/*
 | A Termenedzsment design SAJAT stiluslapja: a preview index.html osszes
 | <style> blokkja (a vigkaroly-preview overlay stilusai nelkul).
 | A tw.css (forditott Tailwind) melle jon.
 */

:root{ --brand:#001F50; --brand-2:#002D76; --accent:#C39A5A; --accent-soft:#D3A665; --accent-deep:#B68A4E; --cream:#F7F3EC; --ink:#0d1b34; }
  html { scroll-behavior: smooth; }
  body { background:#F7F3EC; }
  .reveal { opacity:0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
  .reveal.in { opacity:1; transform:none; }
  .tag { letter-spacing:.30em; }
  .nav-link{ position:relative; }
  .nav-link::after{ content:""; display:block; height:1.5px; width:0; background:var(--accent); transition:width .3s; }
  .nav-link:hover::after{ width:100%; }
  .gold-rule{ height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); }
  /* Before/after slider */
  .ba{ position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; border-radius:1.25rem; user-select:none; touch-action:none; background:#e9e2d5; }
  .ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
  .ba .after-wrap{ position:absolute; inset:0; overflow:hidden; width:50%; will-change:width; }
  .ba .after-wrap img{ width:auto; height:100%; max-width:none; }
  .ba .handle{ position:absolute; top:0; bottom:0; left:50%; width:2px; background:#fff; transform:translateX(-1px); box-shadow:0 0 0 1px rgba(0,31,80,.15); will-change:left; }
  .ba .handle .grip{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:9999px; background:#fff; box-shadow:0 6px 20px rgba(0,31,80,.28); display:grid; place-items:center; color:var(--brand); }
  .ba .lbl{ position:absolute; bottom:.9rem; padding:.28rem .7rem; font-size:.62rem; letter-spacing:.18em; font-weight:600; border-radius:9999px; background:rgba(13,27,52,.62); color:#fff; backdrop-filter:blur(4px); }
  .ba .lbl-before{ left:.9rem; } .ba .lbl-after{ right:.9rem; }

/* Ez ügyfél-oldal: a vigkaroly demó-sáv (és tartalék CTA-sávja) NEM kell */
  #vk-demo,#vkctaBar{display:none!important}
  body{padding-bottom:0!important}
  .reveal{transform:translateY(42px) scale(.985);transition:opacity .78s cubic-bezier(.16,.8,.3,1),transform .9s cubic-bezier(.16,.8,.3,1)}
  .reveal.in{transform:none}
  .tm-l{transform:translateX(-48px)!important}
  .tm-r{transform:translateX(48px)!important}
  /* a folyamat-lépések oldalról csúsznak be -> a szekció vágja a túllógást (különben animáció közben oldalsó scroll) */
  #folyamat{overflow-x:clip}
  .tm-z{transform:translateY(30px) scale(.92)!important}
  .tm-l.in,.tm-r.in,.tm-z.in{transform:none!important}
  @media(prefers-reduced-motion:reduce){.reveal,.tm-l,.tm-r,.tm-z{transform:none!important;transition:none!important}}
  /* GYIK accordion */
  .tm-faq{border:1px solid rgba(0,31,80,.12);border-radius:16px;background:#fff;overflow:hidden;transition:border-color .25s,box-shadow .25s}
  .tm-faq[open]{border-color:rgba(195,154,90,.55);box-shadow:0 14px 40px rgba(0,31,80,.08)}
  .tm-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:20px 22px;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.4rem;font-weight:600;color:#001F50}
  .tm-faq summary::-webkit-details-marker{display:none}
  .tm-faq summary .tm-q{flex:1}
  .tm-faq summary .tm-ic{flex:none;width:30px;height:30px;border-radius:999px;border:1.5px solid #C39A5A;color:#C39A5A;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;transition:transform .3s,background .3s,color .3s}
  .tm-faq[open] summary .tm-ic{transform:rotate(45deg);background:#C39A5A;color:#fff}
  .tm-faq .tm-a{padding:0 22px 22px;color:rgba(13,27,52,.72);font-size:1.02rem;line-height:1.65;max-width:62ch}
  /* iPhone fantom oldalsó-scroll ellen */
  html{overflow-x:clip}
  /* hamburger a márka-navyban (a beinjektált sötét helyett) */
  #vk-rmenu-btn{background:#001F50!important;box-shadow:0 8px 22px rgba(0,31,80,.38)!important}
  /* nincs alsó sáv -> az AI-chat gomb kerüljön lejjebb, a sarokba */
  .vkchat-fab,body.vkcta-on .vkchat-fab{bottom:calc(18px + env(safe-area-inset-bottom,0px))!important}
  /* nagyobb, olvasható fejléc-logó (a név látszódjon) */
  #navbar img{height:56px!important;width:auto!important}
  @media(min-width:640px){#navbar img{height:66px!important}}
  /* --- szebb menü --- */
  #navbar nav.hidden{gap:2.4rem}
  /* Az AI-chat MARAD, csak a vigkaroly.hu-s CTA-gomb ("Ilyen asszisztenst szeretnék →") ki belőle */
  .vkchat-cta{display:none!important}
  /* CTA-banner arany gomb: mobilon árnyék nélkül (csak sima gomb) */
  @media(max-width:767px){.tm-cta-gold{box-shadow:none!important}}
  /* teli-hero háttér: kis blur (a nagy méret elrejti a forrás lágyságát) */
  .tm-hero-bg{filter:blur(4px)}
  /* hero jobb oldali ÉLES kép: mobilon rejtve, lg-nél látszik (a tw.css-ben nincs lg:block) */
  .tm-hero-img{display:none}
  @media(min-width:1024px){.tm-hero-img{display:block} #top h1{font-size:3.7rem!important;line-height:1.14;padding-bottom:.08em}}
  /* DINAMIKUSABB hero-belépő az elemeknél (nagyobb mozgás + rugós easing) */
  @keyframes vkHeroIn{0%{opacity:0;transform:translateY(46px) scale(.94)}100%{opacity:1;transform:none}}
  .vk-hero-anim{animation-duration:.95s!important;animation-timing-function:cubic-bezier(.18,1.12,.32,1)!important}
  @keyframes vkHeroNav{0%{opacity:0;transform:translateY(-22px)}100%{opacity:1;transform:none}}
  .vk-hero-navitem{animation-duration:.6s!important;animation-timing-function:cubic-bezier(.2,1.1,.3,1)!important}
  /* a fejléc-SÁV ne morphóljon betöltéskor (a pill->teljes sáv átalakulás ne animálódjon);
     csak a scroll-elrejtés (transform) animálódjon — a logó/menük saját belépője marad */
  #nav,#navbar{transition:transform .34s cubic-bezier(.4,0,.2,1)!important}
  .nav-link{position:relative;letter-spacing:.015em;color:#33425c;font-weight:500;padding:4px 2px;transition:color .25s}
  .nav-link:hover{color:#001F50}
  .nav-link::after{position:absolute!important;left:50%!important;bottom:-3px;height:2px!important;width:0;background:#C39A5A!important;border-radius:2px;transform:translateX(-50%)!important;transition:width .3s cubic-bezier(.2,.8,.25,1)!important}
  .nav-link:hover::after,.nav-link.nav-active::after{width:100%!important}
  .nav-link.nav-active{color:#001F50;font-weight:600}
  /* fejléc CTA: finom lift + csúszó nyíl (CSAK a gomb, NEM a nav-link) */
  #navbar a[href="#kapcsolat"]:not(.nav-link){box-shadow:0 6px 18px rgba(0,31,80,.16);transition:transform .2s,box-shadow .2s,background .25s}
  #navbar a[href="#kapcsolat"]:not(.nav-link):hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(0,31,80,.30)}
  #navbar a[href="#kapcsolat"]:not(.nav-link)::after{content:"→";margin-left:3px;font-weight:600;transition:transform .2s}
  #navbar a[href="#kapcsolat"]:not(.nav-link):hover::after{transform:translateX(4px)}
  /* mobil menü tételek finomítása */
  #mobileMenu a{transition:background .2s,color .2s;font-weight:500}
  #mobileMenu a:hover{color:#001F50}
  /* --- FANCY mobil menü (injektált #vk-rmenu-panel) — brand navy+arany, elegáns --- */
  /* iOS fantom oldalsó-scroll: a zárt drawer TELJESEN ki a renderből (a fixed elemet a clip nem vágja) */
  #vk-rmenu-panel:not(.open){display:none!important}
  #vk-rmenu-panel.open{display:flex!important;animation:vkDrawerIn .34s cubic-bezier(.4,0,.2,1) both}
  @keyframes vkDrawerIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
  #vk-rmenu-panel{background:linear-gradient(165deg,#faf6ee 0%,#eee4d2 100%)!important;color:#0d1b34!important;box-shadow:-20px 0 60px rgba(0,31,80,.22)!important}
  #vk-rmenu-head{border-bottom:1px solid rgba(195,154,90,.4)!important;padding:22px 22px 18px!important}
  #vk-rmenu-head img{height:42px!important;width:auto!important}
  #vk-rmenu-head b{color:#001F50!important;font-weight:700!important;letter-spacing:.2em!important}
  #vk-rmenu-close{color:#001F50!important;opacity:.7;transition:transform .2s,opacity .2s}
  #vk-rmenu-close:hover{transform:rotate(90deg);opacity:1}
  #vk-rmenu-list{padding:16px 0!important}
  #vk-rmenu-list a{font-family:'Cormorant Garamond',Georgia,serif!important;font-size:1.55rem!important;font-weight:600!important;color:#1a2942!important;border-bottom:1px solid rgba(0,31,80,.08)!important;padding:13px 24px!important;position:relative}
  #vk-rmenu-list a::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:0;height:56%;background:#C39A5A;border-radius:0 3px 3px 0;transition:width .22s}
  #vk-rmenu-list a:hover{background:rgba(195,154,90,.16)!important;padding-left:34px!important;color:#001F50!important}
  #vk-rmenu-list a:hover::before{width:4px}
  #vk-rmenu-list a.vk-rmenu-cta{font-family:ui-sans-serif,system-ui,'Segoe UI',sans-serif!important;background:#001F50!important;color:#fff!important;font-weight:800!important;box-shadow:0 10px 26px rgba(0,31,80,.28)!important}
  #vk-rmenu-list a.vk-rmenu-cta::before{display:none}
  #vk-rmenu-list a.vk-rmenu-cta:hover{padding-left:18px!important;background:#0a2a5c!important;transform:translateY(-1px)}
  #vk-rmenu-list li.vk-rmenu-cta-li:first-of-type{border-top:1px solid rgba(195,154,90,.3)!important}
  /* az utolsó tétel (Ingyenes konzultáció) = navy CTA-gomb, mint desktopon */
  #vk-rmenu-list li:last-child a{margin:18px 20px 6px!important;padding:15px 18px!important;background:#001F50!important;color:#fff!important;font-family:ui-sans-serif,system-ui,'Segoe UI',sans-serif!important;font-size:16px!important;font-weight:800!important;text-align:center;border-radius:999px!important;border-bottom:0!important;box-shadow:none!important}
  #vk-rmenu-list li:last-child a::before{display:none!important}
  #vk-rmenu-list li:last-child a:hover{padding-left:18px!important;background:#0a2a5c!important;transform:translateY(-1px)}

#kb-lb{ position:fixed; inset:0; z-index:2147483000; display:none; align-items:center; justify-content:center;
    background:rgba(6,14,30,.94); padding:20px 16px 72px; }
  #kb-lb.open{ display:flex; }
  #kb-lb figure{ margin:0; max-width:min(1200px,100%); display:flex; flex-direction:column; align-items:center; }
  #kb-lb img{ max-width:100%; max-height:76vh; width:auto; height:auto; border-radius:14px; display:block;
    box-shadow:0 30px 80px rgba(0,0,0,.55); }
  #kb-lb figcaption{ margin-top:14px; color:rgba(255,255,255,.8); text-align:center;
    font:600 12px/1.5 ui-sans-serif,system-ui,'Segoe UI',Arial,sans-serif; letter-spacing:.14em; text-transform:uppercase; }
  #kb-lb .kb-btn{ position:absolute; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.25);
    color:#fff; cursor:pointer; border-radius:999px; width:46px; height:46px; display:grid; place-items:center;
    font:400 22px/1 ui-sans-serif,system-ui,Arial,sans-serif; padding:0; }
  #kb-lb .kb-btn:hover{ background:rgba(255,255,255,.20); }
  #kb-close{ top:18px; right:18px; }
  #kb-prev{ left:18px; top:50%; transform:translateY(-50%); }
  #kb-next{ right:18px; top:50%; transform:translateY(-50%); }
  @media (max-width:640px){
    #kb-prev{ left:10px; } #kb-next{ right:10px; }
    #kb-lb .kb-btn{ width:40px; height:40px; }
    #kb-lb img{ max-height:66vh; }
  }

/* ── A teljes szelessegu, tapado fejlec sajat szabalyai ────────────────────
   A design lefordított Tailwind-készlete (assets/tw.css) csak azokat az
   osztályokat tartalmazza, amiket az eredeti preview használt. A sáv kerete
   és árnyéka olyan utility lenne (border-b, shadow-[0_1px_0…]), ami NINCS
   benne — ezért itt, kézzel írt szabályként áll. */
#nav{border-bottom:1px solid rgba(0,31,80,.10);box-shadow:0 1px 0 rgba(0,31,80,.05)}
#mobileMenu{border-top:1px solid rgba(0,31,80,.10);box-shadow:0 14px 30px rgba(0,31,80,.10)}

/* ── Mobil fiók (site.partials.mobile-drawer) ─────────────────────────────
   A partial semleges alapértékekkel jön; itt kapja meg az oldal arculatát. */
:root{
  --vkdrawer-bg:#FFFFFF;
  --vkdrawer-ink:#001F50;
  --vkdrawer-line:rgba(0,31,80,.10);
  --vkdrawer-accent:#C39A5A;
  --vkdrawer-cta-bg:#001F50;
  --vkdrawer-cta-ink:#FFFFFF;
  --vkdrawer-scrim:rgba(0,31,80,.45);
}

/* ── Pótolt Tailwind utility-k ────────────────────────────────────────────
   Az assets/tw.css a preview LEFORDÍTOTT készlete: csak azokat az osztályokat
   tartalmazza, amiket az eredeti design ténylegesen használt. A Blade-be
   azóta bekerült néhány olyan, ami nincs benne — az ilyen NÉMÁN hatástalan
   (nincs hibaüzenet, csak stílus nélkül marad az elem). Ilyen volt a footer
   `gap-x-6`-ja: nulla térköz, a linkek egymáshoz tapadtak.

   Az itteni értékek a Tailwind v3 alapértékei; a színek a design sajátjai
   (brand #001F50, accent #C39A5A, gold-deep #B68A4E).
   ⚠ Új utility-t NE találj ki: vagy a tw.css-ben meglévőt használj, vagy
   tedd ide is oda. Erre a MissingCssClassTest őrködik. */

/* méret / távolság */
.h-4{height:1rem}
.w-4{width:1rem}
.h-10{height:2.5rem}
.mb-3{margin-bottom:.75rem}
.mt-4{margin-top:1rem}
.pt-8{padding-top:2rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}
.space-y-2>:not([hidden])~:not([hidden]){margin-top:.5rem;margin-bottom:0}

/* keret */
.border-t{border-top-width:1px}
.border-accent\/40{border-color:rgba(195,154,90,.4)}

/* szín */
.bg-accent\/\[0\.12\]{background-color:rgba(195,154,90,.12)}
.text-accent{--tw-text-opacity:1;color:rgb(195 154 90/var(--tw-text-opacity,1))}
.text-brand\/40{color:rgba(0,31,80,.4)}
.text-brand\/60{color:rgba(0,31,80,.6)}
.text-white\/40{color:hsla(0,0%,100%,.4)}
.text-white\/50{color:hsla(0,0%,100%,.5)}
.hover\:bg-gold-deep:hover{--tw-bg-opacity:1;background-color:rgb(182 138 78/var(--tw-bg-opacity,1))}
.hover\:text-white\/70:hover{color:hsla(0,0%,100%,.7)}

/* tipográfia */
.text-\[\.7rem\]{font-size:.7rem}
.tracking-\[\.16em\]{letter-spacing:.16em}
.tracking-\[\.2em\]{letter-spacing:.2em}

/* transzformáció — a Tailwind változó-láncával együtt, különben nem hat */
.scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

@media (min-width:640px){
  .sm\:h-16{height:4rem}
  .sm\:gap-10{gap:2.5rem}
  .sm\:py-20{padding-top:5rem;padding-bottom:5rem}
  .sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}
}