/* ==========================================================================
   VakıfBank clone — theme tokens
   --------------------------------------------------------------------------
   TO CHANGE THE ACCENT COLOR FROM YELLOW TO ANYTHING ELSE:
   edit the six --brand-* values in :root below. Everything in the three
   pages (buttons, tabs, underlines, the hero cards, icons, footer) reads
   from these variables — nothing else needs to change.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  /* ---- brand accent — EDIT THESE 6 TO RE-THEME THE SITE ---- */
  --brand:        #196357; /**#FFC72C;   /* primary accent */
  --brand-600:    #E8A800;   /* hover / active / darker accent */
  --brand-700:    #B8830A;   /* text-on-light accent, borders */
  --brand-100:    #FFF3D2;   /* pale tint, chips */
  --brand-50:     #FFFBF0;   /* faint wash backgrounds */
  --brand-ink:    #FFFFFF;   /* text color placed on top of --brand */

  /* ---- neutrals (rarely change) ---- */
  --ink:        #14130F;
  --ink-soft:   #4B4A44;
  --ink-faint:  #8A887E;
  --paper:      #FFFFFF;
  --cloud:      #F7F6F1;
  --cloud-200:  #EFEDE4;
  --line:       #E5E2D6;

  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

*{ scroll-behavior:smooth; }
body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.font-display{ font-family: var(--font-display); letter-spacing:-0.02em; }
.font-mono{ font-family: var(--font-mono); letter-spacing: 0.04em; }

::selection{ background: var(--brand); color: var(--brand-ink); }

:focus-visible{
  outline: 2px solid var(--brand-700);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; font-size:.9rem; padding:.75rem 1.4rem; border-radius:999px;
  transition:all .2s ease; white-space:nowrap; border:1px solid transparent;
}
.btn-primary{ background:var(--brand); color:var(--brand-ink); }
.btn-primary:hover{ background:var(--brand-600); transform:translateY(-1px); box-shadow:0 8px 20px -8px rgba(0,0,0,.25); }
.btn-outline{ background:transparent; color:var(--ink); border-color: var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--paper); }
.btn-dark{ background:var(--ink); color:var(--paper); }
.btn-dark:hover{ background:#000; transform:translateY(-1px); }
.btn-ghost-brand{ background:transparent; color:var(--ink); border-color:var(--brand); }
.btn-ghost-brand:hover{ background:var(--brand-50); }

/* ---------- nav ---------- */
.nav-link{ position:relative; color:var(--ink-soft); font-weight:500; font-size:.925rem; transition:color .15s; }
.nav-link:hover{ color:var(--ink); }
.nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.nav-link:hover::after{ transform:scaleX(1); }

.topbar-link{ color: var(--brand-ink); font-size:.78rem; font-weight:600; display:inline-flex; align-items:center; gap:.35rem; opacity:.85; transition:opacity .15s; }
.topbar-link:hover{ opacity:1; }

#site-header.scrolled{ box-shadow:0 8px 24px -16px rgba(0,0,0,.25); }

/* ---------- link with arrow ---------- */
.link-arrow{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.9rem; color:var(--ink); }
.link-arrow .arrow-box{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.6rem; height:1.6rem; border-radius:999px; background:var(--brand);
  transition:transform .2s ease;
}
.link-arrow:hover .arrow-box{ transform:translateX(4px); }

/* ---------- tabs ---------- */
.tab-btn{
  font-weight:600; font-size:.95rem; color:var(--ink-faint); padding-bottom:.9rem;
  border-bottom:2px solid transparent; transition:color .2s;
}
.tab-btn[aria-selected="true"]{ color:var(--ink); border-color:var(--brand); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

/* ---------- cards ---------- */
.card-hover{ transition: transform .25s ease, box-shadow .25s ease; }
.card-hover:hover{ transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(20,19,15,.35); }

.tile{
  border:1px solid var(--line); border-radius:1.1rem; background:var(--paper);
  overflow:hidden;
}

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- marquee ---------- */
.marquee-track{ display:flex; width:max-content; animation: marquee 22s linear infinite; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- hero draw-in line ---------- */
.draw-path{ stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw 2.4s 0.3s cubic-bezier(.65,0,.35,1) forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* ---------- fee page: Personal / Commercial mode buttons ---------- */
.fee-mode-btn{
  border: 1.5px solid var(--line); border-radius: .9rem; padding: 1rem 1.25rem;
  font-weight: 700; font-family: var(--font-display); font-size: 1.05rem; text-align:left;
  transition: all .2s ease; background: var(--paper); color: var(--ink-soft);
}
.fee-mode-btn:hover{ border-color: var(--ink-faint); }
.fee-mode-btn[aria-pressed="true"]{ border-color: var(--brand); border-width:2px; color: var(--ink); background: var(--brand-50); }

/* ---------- checkbox-style toggle (Branch / ATM) ---------- */
button[data-toggle][aria-pressed="true"] .check-box{ border-color: var(--ink) !important; background: var(--brand-50); }
button[data-toggle][aria-pressed="true"] .check-mark{ opacity:1; }
button[data-toggle][aria-pressed="false"] .check-box{ border-color: var(--line) !important; background: transparent; }
button[data-toggle][aria-pressed="false"] .check-mark{ opacity:0; }

/* ---------- form fields (login / register) ---------- */
.field-label{ font-size:.78rem; font-weight:600; color:var(--ink-soft); margin-bottom:.4rem; display:block; }
.field{
  width:100%; border:1.5px solid var(--line); border-radius:.75rem; padding:.85rem 1rem;
  outline:none; transition:border-color .15s, box-shadow .15s; background:var(--paper); font-size:.95rem;
}
.field:focus{ border-color:var(--ink); box-shadow:0 0 0 3px var(--brand-50); }
.field-hint{ font-size:.78rem; color:var(--ink-faint); margin-top:.35rem; }

.field-check{
  width:1.15rem; height:1.15rem; border:1.5px solid var(--line); border-radius:.4rem;
  display:inline-flex; align-items:center; justify-content:center; shrink:0; cursor:pointer; transition:all .15s;
}
input:checked + .field-check{ background:var(--brand); border-color:var(--brand); }
input:checked + .field-check svg{ opacity:1; }
.field-check svg{ opacity:0; transition:opacity .15s; }

/* ---------- auth step indicator ---------- */
.step-dot{
  width:2rem; height:2rem; border-radius:999px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:.8rem; font-weight:600; border:1.5px solid var(--line); color:var(--ink-faint);
  transition:all .2s ease; background:var(--paper);
}
.step-dot.is-active{ border-color:var(--brand); background:var(--brand); color:var(--brand-ink); }
.step-dot.is-done{ border-color:var(--ink); background:var(--ink); color:#fff; }
.step-line{ flex:1; height:1.5px; background:var(--line); transition:background .2s ease; }
.step-line.is-done{ background:var(--ink); }
.auth-step{ display:none; }
.auth-step.active{ display:block; }

/* ---------- premium badge ---------- */
.badge-outline{
  display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .9rem .4rem .55rem;
  border:1px solid rgba(255,255,255,.18); border-radius:999px; font-size:.76rem; font-weight:600;
  color:rgba(255,255,255,.85); backdrop-filter: blur(6px);
}

/* ---------- refined shadows & sheen ---------- */
.tile{ box-shadow: 0 1px 2px rgba(20,19,15,.03); transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease; }
.card-hover:hover{ border-color: var(--brand-100); box-shadow: 0 24px 48px -24px rgba(20,19,15,.28), 0 4px 12px -4px rgba(20,19,15,.08); }

.btn-primary{ position:relative; overflow:hidden; }
.btn-primary::after{
  content:""; position:absolute; inset:0; translate:-120% 0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transition: translate .6s ease;
}
.btn-primary:hover::after{ translate:120% 0; }

.text-gold-gradient{
  background:linear-gradient(100deg, var(--brand-700), var(--brand) 45%, var(--brand-600) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- primary nav dropdowns (real child menus) ---------- */
.dropdown-trigger{ display:inline-flex; align-items:center; gap:.3rem; background:none; border:none; cursor:pointer; font:inherit; padding:.5rem .25rem; }
.dropdown-chevron{ transition: transform .2s ease; }
.dropdown-trigger[aria-expanded="true"] .dropdown-chevron{ transform: rotate(180deg); }
.dropdown-panel{
  position:absolute; top:calc(100% + 10px); left:50%; min-width:280px;
  background:var(--paper); border:1px solid var(--line); border-radius:1rem; padding:.5rem;
  box-shadow: 0 24px 48px -20px rgba(20,19,15,.28), 0 4px 16px -8px rgba(20,19,15,.1);
  opacity:0; visibility:hidden; transform:translate(-50%, 6px); transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:60;
}
.dropdown-panel.open{ opacity:1; visibility:visible; transform:translate(-50%, 0); }
.dropdown-link{ display:block; padding:.65rem .8rem; border-radius:.65rem; transition:background .15s; }
.dropdown-link:hover{ background:var(--cloud); }
.dropdown-link-title{ display:block; font-family:var(--font-display); font-weight:600; font-size:.92rem; color:var(--ink); }
.dropdown-link-desc{ display:block; font-size:.78rem; color:var(--ink-faint); margin-top:2px; }

/* ---------- mobile menu (slide-down panel + accordion groups) ---------- */
#mobile-menu-backdrop{ animation: fadeIn .2s ease; }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.mobile-accordion{ border-bottom:1px solid var(--line); }
.mobile-accordion summary{
  list-style:none; cursor:pointer; padding:.85rem 0; font-weight:600; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between;
}
.mobile-accordion summary::-webkit-details-marker{ display:none; }
.mobile-accordion summary::after{
  content:""; width:9px; height:9px; border-right:2px solid var(--ink-faint); border-bottom:2px solid var(--ink-faint);
  transform:rotate(45deg); transition:transform .2s ease; margin-right:4px;
}
.mobile-accordion[open] summary::after{ transform:rotate(-135deg); }
.mobile-accordion-body{ padding-left:.75rem; padding-bottom:.75rem; display:flex; flex-direction:column; }

/* ---------- Google Website Translator widget — restyled to fit the top bar ---------- */
.gtranslate-wrap{ min-width:64px; }
.gtranslate-wrap .goog-te-gadget{ font-family:var(--font-body) !important; font-size:0 !important; color:transparent !important; }
.gtranslate-wrap .goog-te-gadget > span > a.goog-te-menu-value{
  font-size:13px !important; font-weight:600; color:var(--brand-ink) !important; text-decoration:none !important;
  display:inline-flex !important; align-items:center; gap:4px;
}
.gtranslate-wrap .goog-te-gadget > span > a.goog-te-menu-value span{ color:var(--brand-ink) !important; }
.gtranslate-wrap .goog-te-gadget img{ display:none !important; }
/* Google injects a full-width banner iframe + shifts <body> down on activation — neutralize both */
.goog-te-banner-frame{ display:none !important; }
body{ top:0 !important; }
.skiptranslate iframe{ display:none !important; }

/* ---------- pill toggle ---------- */
.pill-toggle{ background:var(--cloud); border-radius:999px; padding:.3rem; display:inline-flex; }
.pill-toggle button{ border-radius:999px; padding:.6rem 1.5rem; font-weight:600; font-size:.9rem; color:var(--ink-soft); transition: all .2s ease; }
.pill-toggle button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }

/* ---------- misc ---------- */
.dot-grid{
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 16px 16px;
}
.section-eyebrow{
  font-family: var(--font-mono); text-transform:uppercase; font-size:.72rem;
  letter-spacing:.14em; color:var(--brand-700); font-weight:600;
}
.numstamp{
  font-family: var(--font-mono); font-size:.72rem; color:var(--ink-faint);
}

.skip-link{ position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:.6rem 1rem; z-index:100; }
.skip-link:focus{ left:1rem; top:1rem; }