/* ==========================================================================
   ISTTERM — Tasarım sistemi (tokens + paylaşılan temel stiller)
   assets/css/theme.css
   Renk, tipografi, ölçü ve hareket değişkenleri burada tanımlıdır.
   Tasarımı değiştirmek için yalnızca :root ve [data-theme="dark"] bloklarını
   güncellemek yeterlidir; header dosyaları bu token'lara bağlı çalışır.

   BREAKPOINT'LER (mobile-first):
     sm: 640px · md: 768px · lg: 1024px · xl: 1280px
   ========================================================================== */

/* 1) TOKENS ---------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Nötr palet (slate) */
  --n-0:#ffffff; --n-25:#fbfcfd; --n-50:#f6f7f9; --n-100:#eef0f4;
  --n-200:#e1e5ec; --n-300:#cbd2dd; --n-400:#9aa4b5; --n-500:#6b7688;
  --n-600:#515c6e; --n-700:#3c4657; --n-800:#262f3d; --n-900:#161c27; --n-950:#0c1119;

  /* Marka (kurumsal lacivert) */
  --b-50:#eef3fb; --b-100:#d8e3f5; --b-200:#b5c8ea; --b-300:#8aa6da;
  --b-400:#5d80c6; --b-500:#3f63b0; --b-600:#2e4d93; --b-700:#263f76;
  --b-800:#1e315c; --b-900:#182746; --b-950:#0e1730;

  /* Marka (kırmızı #e3000f) — birincil buton ve vurgular için
     İstenen ana ton: --r-500 = #e3000f (beyaz metin kontrastı 4.9:1 → WCAG AA) */
  --r-50:#fdecec; --r-100:#fbd6d6; --r-200:#f6aeae; --r-300:#ed7d7d;
  --r-400:#e34a4b; --r-500:#e3000f; --r-600:#c7000d; --r-700:#a1000b;
  --r-800:#7d0008; --r-900:#5d0006;

  /* Vurgu (premium bronz) */
  --a-50:#fbf7ef; --a-100:#f5ecd9; --a-200:#ebd8b3; --a-300:#ddbd84;
  --a-400:#cda35b; --a-500:#bd8f3f; --a-600:#a2762f; --a-700:#8a5f1f;
  --a-800:#6f4b1d; --a-900:#573a1a;

  /* Semantik — Light */
  --bg:            var(--n-0);
  --bg-soft:       var(--n-50);
  --bg-muted:      var(--n-100);
  --surface:       var(--n-0);
  --surface-2:     var(--n-25);
  --surface-inv:   var(--n-900);
  --text:          var(--n-900);
  --text-2:        var(--n-600);
  --text-3:        var(--n-500);
  --text-inv:      var(--n-0);
  --border:        var(--n-200);
  --border-2:      var(--n-300);
  --brand:         var(--b-900);
  --brand-2:       var(--b-700);
  --brand-soft:    var(--b-50);
  --brand-text:    var(--b-800);
  /* Birincil eylem (buton) yüzeyi — koyu temada da okunabilir kalsın */
  --primary:       var(--b-900);
  --primary-hover: var(--b-800);
  --primary-fg:    #ffffff;
  --accent:        var(--a-700);
  --accent-bg:     var(--a-700);
  --accent-fg:     #ffffff;
  --ring:          rgba(24,39,70,.30);
  --scrim:         rgba(12,17,25,.52);
  /* Tanıtım kartı gradyanı (mega menü / overlay) */
  --promo-from:    #2b3f6b; --promo-to: #16233f; --promo-glow: rgba(205,163,91,.5);
  /* Demo içeriği gradyanları (hero + banner) */
  --hero-glow-1:   rgba(61,99,176,.22);
  --hero-glow-2:   rgba(205,163,91,.18);
  --banner-from:   #1c2b49; --banner-mid: #2b3f6b; --banner-to: #3d4f6d;
  --banner-glow:   rgba(205,163,91,.45);
  --header-bg:     rgba(255,255,255,.92);
  --header-solid:  #ffffff;
  --badge-ring:    #ffffff;
  --shadow-1: 0 1px 2px rgba(16,24,40,.05);
  --shadow-2: 0 8px 20px -8px rgba(16,24,40,.16), 0 2px 6px -2px rgba(16,24,40,.06);
  --shadow-3: 0 28px 56px -16px rgba(16,24,40,.26);

  /* Tipografi */
  --font-sans: "Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --fs-11:.6875rem; --fs-12:.75rem; --fs-13:.8125rem; --fs-14:.875rem;
  --fs-15:.9375rem; --fs-16:1rem; --fs-18:1.125rem; --fs-20:1.25rem;
  --fs-24:1.5rem; --fs-30:1.875rem; --fs-36:2.25rem; --fs-44:2.75rem;
  --lh-tight:1.12; --lh-snug:1.3; --lh-base:1.5; --lh-loose:1.75;
  --ls-tight:-.022em; --ls-normal:0; --ls-wide:.03em; --ls-wider:.1em; --ls-widest:.18em;

  /* Ölçü & hareket */
  --container:1360px;
  --gutter:1rem;
  --radius-xs:4px; --radius-sm:7px; --radius-md:11px; --radius-lg:16px; --radius-xl:22px; --radius-pill:999px;
  --t-fast:160ms; --t-base:240ms; --t-slow:340ms;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.36,.64,1);
}

/* İç boşluk (gutter) breakpoint'leri */
@media (min-width:640px)  { :root { --gutter:1.25rem; } }
@media (min-width:768px)  { :root { --gutter:1.5rem;  } }
@media (min-width:1024px) { :root { --gutter:1.75rem; } }
@media (min-width:1280px) { :root { --gutter:2rem;    } }

/* Semantik — Dark */
[data-theme="dark"] {
  color-scheme: dark;
  --bg:           var(--n-950);
  --bg-soft:      #101825;
  --bg-muted:     #16202f;
  --surface:      #121a26;
  --surface-2:    #0f1721;
  --surface-inv:  var(--n-50);
  --text:         #eef1f6;
  --text-2:       #a7b2c3;
  --text-3:       #8792a5;
  --text-inv:     var(--n-950);
  --border:       #232f40;
  --border-2:     #33415a;
  --brand:        #dce7fa;
  --brand-2:      var(--b-300);
  --brand-soft:   #16233a;
  --brand-text:   var(--b-200);
  /* Koyu temada birincil buton orta ton lacivert olur (beyaz metin kontrastı korunur) */
  --primary:      var(--b-600);
  --primary-hover:var(--b-500);
  --primary-fg:   #ffffff;
  --accent:       var(--a-300);
  --accent-bg:    var(--a-300);
  --accent-fg:    #241a06;
  --ring:         rgba(140,175,240,.45);
  --scrim:        rgba(4,8,14,.68);
  --header-bg:    rgba(12,17,25,.90);
  --header-solid: #0c1119;
  --badge-ring:   #0c1119;
  --shadow-1: 0 1px 2px rgba(0,0,0,.45);
  --shadow-2: 0 10px 24px -10px rgba(0,0,0,.65), 0 2px 6px -2px rgba(0,0,0,.4);
  --shadow-3: 0 30px 60px -18px rgba(0,0,0,.75);
}
/* 2) RESET & BASE ---------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--fs-15);
  line-height:var(--lh-base);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
h1,h2,h3,h4,h5,p,figure,ul,ol,dl,dd { margin:0; }
ul,ol { list-style:none; padding:0; }
img,svg,video { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; color:inherit; }
button { background:none; border:0; padding:0; cursor:pointer; }
:focus { outline:none; }
:focus-visible { outline:2px solid var(--ring); outline-offset:2px; border-radius:var(--radius-xs); }
::selection { background:var(--brand-soft); color:var(--brand-text); }
[hidden] { display:none !important; }

* { scrollbar-width:thin; scrollbar-color:var(--border-2) transparent; }
*::-webkit-scrollbar { width:9px; height:9px; }
*::-webkit-scrollbar-thumb { background:var(--border-2); border-radius:99px; border:2px solid transparent; background-clip:content-box; }

/* 3) YARDIMCI SINIFLAR ---------------------------------------------------- */
.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link {
  position:fixed; top:.5rem; left:.5rem; z-index:200; transform:translateY(-180%);
  padding:.6rem 1rem; border-radius:var(--radius-sm);
  background:var(--brand); color:#fff; font-size:var(--fs-13); font-weight:600;
  transition:transform var(--t-base) var(--ease-out);
}
.skip-link:focus-visible { transform:translateY(0); }
.ic { flex:none; }
.kicker {
  font-size:var(--fs-11); font-weight:600; letter-spacing:var(--ls-widest);
  text-transform:uppercase; color:var(--text-3);
}
/* Alt çizgi animasyonlu link */
.ln { position:relative; display:inline-block; }
.ln::after {
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform var(--t-base) var(--ease-out);
}
.ln:hover::after, .ln:focus-visible::after, .ln[aria-current]::after { transform:scaleX(1); transform-origin:left; }
.no-scrollbar { scrollbar-width:none; -ms-overflow-style:none; }
.no-scrollbar::-webkit-scrollbar { display:none; }
/* Scroll kilidi (drawer/overlay açıkken) */
.is-locked { overflow:hidden; touch-action:none; }
/* 4) PAYLAŞILAN UI PARÇALARI ---------------------------------------------- */
/* İkon butonu */
.ibtn {
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  min-width:2.5rem; height:2.5rem; padding-inline:.5rem; border-radius:var(--radius-md); color:inherit;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.ibtn:hover { background:var(--bg-muted); }
.ibtn:active { transform:scale(.94); }
.ibtn[aria-expanded="true"] { background:var(--bg-muted); }
/* Sayaç rozeti (sepet / favori) */
.count {
  position:absolute; top:.1rem; right:.05rem; min-width:1.1rem; height:1.1rem;
  display:grid; place-items:center; padding:0 .3rem;
  font-size:var(--fs-11); font-weight:700; line-height:1; font-variant-numeric:tabular-nums;
  color:var(--accent-fg); background:var(--accent-bg);
  border:2px solid var(--badge-ring); border-radius:var(--radius-pill);
  transition:transform var(--t-base) var(--ease-spring);
}
.count.is-bump { animation:count-bump .42s var(--ease-spring); }
@keyframes count-bump {
  0%{transform:scale(1)} 35%{transform:scale(1.45)} 60%{transform:scale(.92)} 100%{transform:scale(1)}
}
/* Butonlar */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  height:2.75rem; padding-inline:1.25rem; border-radius:var(--radius-pill);
  font-size:var(--fs-14); font-weight:600; letter-spacing:.01em; white-space:nowrap;
  transition:background var(--t-base) var(--ease), color var(--t-base), border-color var(--t-base), transform var(--t-fast) var(--ease);
}
.btn:active { transform:translateY(1px) scale(.99); }
.btn--primary { background:var(--primary); color:var(--primary-fg); }
.btn--primary:hover { background:var(--primary-hover); }
.btn--ghost { border:1px solid var(--border-2); color:var(--text); background:transparent; }
.btn--ghost:hover { border-color:var(--text); background:var(--bg-muted); }
.btn--light { background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.3); }
.btn--light:hover { background:rgba(255,255,255,.26); }
/* Rozet / etiket */
.tag {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.2rem .5rem; border-radius:var(--radius-xs);
  font-size:var(--fs-11); font-weight:700; letter-spacing:var(--ls-wide); text-transform:uppercase;
}
.tag--accent { background:var(--accent-bg); color:var(--accent-fg); }
.tag--soft { background:var(--brand-soft); color:var(--brand-text); }
/* Form alanı */
.field { position:relative; display:flex; align-items:center; }
.field > .ic { position:absolute; left:.85rem; color:var(--text-3); pointer-events:none; transition:color var(--t-fast); }
.field input {
  width:100%; height:2.75rem; padding:.55rem 3rem .55rem 2.6rem;
  background:var(--bg-soft); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius-pill);
  font-size:var(--fs-14);
  transition:border-color var(--t-base) var(--ease), background var(--t-base), box-shadow var(--t-base);
}
.field input::placeholder { color:var(--text-3); }
.field input:hover { border-color:var(--border-2); }
.field input:focus { border-color:var(--brand); background:var(--surface); box-shadow:0 0 0 3px var(--brand-soft); }
.field:focus-within > .ic { color:var(--text); }
/* Logo / marka */
.brand { display:inline-flex; align-items:center; gap:.6rem; }
.brand__mark { width:1.9rem; height:1.9rem; color:var(--brand); }
/* Logo görseli — oran korunur: yalnızca height verilir, genişlik otomatik.
   --logo-h header yüksekliğine göre kademeli küçülür. */
.brand__logo {
  display:block; flex:none;
  height:var(--logo-h,2.5rem);
  width:auto;
  object-fit:contain;
  user-select:none; -webkit-user-drag:none;
}
/* Koyu temada siyah metin görünmez → beyaz varyant gösterilir */
.brand__logo--dark { display:none; }
[data-theme="dark"] .brand__logo--dark { display:block; }
[data-theme="dark"] .brand__logo:not(.brand__logo--dark) { display:none; }
.brand__name { font-size:var(--fs-18); font-weight:700; letter-spacing:var(--ls-wider); text-transform:uppercase; line-height:1; }
.brand__sub {
  font-size:.5625rem; font-weight:600; letter-spacing:var(--ls-widest);
  text-transform:uppercase; color:var(--text-3); line-height:1;
}
/* 6) ORTAK ETKİLEŞİM BİLEŞENLERİ ---------------------------------------- */
/* Drawer / Overlay — yön: --left · --right · --top · --full              */
.drawer { position:fixed; inset:0; z-index:120; pointer-events:none; }
.drawer[hidden] { display:none !important; }
.drawer__scrim {
  position:absolute; inset:0; background:var(--scrim);
  opacity:0; transition:opacity var(--t-base) var(--ease);
}
.drawer.is-open { pointer-events:auto; }
.drawer.is-open .drawer__scrim { opacity:1; }
.drawer__panel {
  position:absolute; display:flex; flex-direction:column;
  background:var(--surface); color:var(--text);
  box-shadow:var(--shadow-3);
  transition:transform var(--t-slow) var(--ease-out), opacity var(--t-base) var(--ease);
  will-change:transform;
}
.drawer--left .drawer__panel  { inset-block:0; inset-inline-start:0; width:min(88vw,410px); transform:translateX(-102%); }
.drawer--right .drawer__panel { inset-block:0; inset-inline-end:0; width:min(90vw,430px); transform:translateX(102%); }
.drawer--top .drawer__panel   { inset-inline:0; top:0; max-height:86dvh; border-radius:0 0 var(--radius-xl) var(--radius-xl); transform:translateY(-102%); }
.drawer--full .drawer__panel  { inset:0; transform:translateY(-3%); opacity:0; }
.drawer--full.is-open .drawer__panel { transform:none; opacity:1; }
.drawer.is-open .drawer__panel { transform:none; }
.drawer__body { flex:1; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.drawer__close {
  display:inline-flex; align-items:center; justify-content:center;
  width:2.5rem; height:2.5rem; border-radius:var(--radius-pill);
  transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.drawer__close:hover { background:var(--bg-muted); }
.drawer__close:active { transform:scale(.92); }

/* Accordion (alt kategoriler) ------------------------------------------- */
[data-acc] + [data-acc] { border-top:1px solid var(--border); }
.acc__trigger {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.95rem .25rem; text-align:start;
  font-size:var(--fs-15); font-weight:500; letter-spacing:var(--ls-normal);
  transition:color var(--t-fast) var(--ease), padding-inline var(--t-base) var(--ease);
}
.acc__trigger:hover { color:var(--brand-text); }
.acc__trigger[aria-expanded="true"] { color:var(--brand-text); }
.acc__chev {
  display:grid; place-items:center; flex:none;
  width:1.75rem; height:1.75rem; border-radius:50%;
  color:var(--text-3); background:var(--bg-muted);
  transition:transform var(--t-base) var(--ease), color var(--t-fast), background var(--t-fast);
}
.acc__trigger[aria-expanded="true"] .acc__chev { transform:rotate(180deg); color:var(--brand-text); background:var(--brand-soft); }
.acc__panel {
  overflow:hidden; max-height:0;
  transition:max-height var(--t-base) var(--ease);
}
.acc__panel { max-height:var(--acc-h,0px); }
.acc__links { padding:0 .25rem .75rem; display:grid; gap:.15rem; }
.acc__links a {
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.55rem .7rem; border-radius:var(--radius-sm);
  font-size:var(--fs-14); color:var(--text-2);
  transition:background var(--t-fast) var(--ease), color var(--t-fast), padding-inline-start var(--t-base) var(--ease);
}
.acc__links a:hover, .acc__links a:focus-visible { background:var(--bg-muted); color:var(--text); padding-inline-start:1rem; }
.acc__all {
  display:inline-flex; align-items:center; gap:.4rem; margin:0 .95rem .9rem;
  font-size:var(--fs-13); font-weight:600; color:var(--brand-text);
}
.acc__all .ic { transition:transform var(--t-base) var(--ease-out); }
.acc__all:hover .ic { transform:translateX(4px); }
/* Sade bağlantı satırı */
.nav-row__link {
  display:flex; align-items:center; justify-content:space-between;
  padding:.95rem .25rem; font-size:var(--fs-15); font-weight:500;
  transition:color var(--t-fast) var(--ease), padding-inline var(--t-base) var(--ease);
}
.nav-row__link:hover { color:var(--brand-text); padding-inline-start:.35rem; }

/* Mega menü & dropdown ortak parçalar ----------------------------------- */
.mega__grid { display:grid; gap:1.75rem 2rem; }
.mega__title {
  margin-bottom:.7rem; font-size:var(--fs-11); font-weight:700;
  letter-spacing:var(--ls-widest); text-transform:uppercase; color:var(--text-3);
}
.mega__col ul { display:grid; gap:.1rem; }
.mega__col a {
  display:block; padding:.32rem .4rem; margin-inline:-.4rem;
  font-size:var(--fs-14); color:var(--text-2); border-radius:var(--radius-xs);
  transition:color var(--t-fast) var(--ease), background var(--t-fast), transform var(--t-base) var(--ease-out);
}
.mega__col a:hover, .mega__col a:focus-visible { color:var(--text); background:var(--bg-muted); transform:translateX(3px); }
/* Tanıtım kartı */
.promo {
  position:relative; display:block; overflow:hidden; isolation:isolate;
  border-radius:var(--radius-lg); color:#fff;
  transition:transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease);
}
.promo:hover { transform:translateY(-3px); box-shadow:var(--shadow-2); }
.promo__bg {
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(90% 90% at 100% 0%, var(--promo-glow), transparent 60%),
    linear-gradient(145deg, var(--promo-from), var(--promo-to));
  transition:transform var(--t-slow) var(--ease-out);
}
.promo:hover .promo__bg { transform:scale(1.06); }
.promo__body { display:flex; flex-direction:column; gap:.4rem; padding:1.1rem 1.15rem; }
.promo__body .tag { align-self:flex-start; }   /* etiket kartı boyunca eslemesin */
.promo__title { font-size:var(--fs-15); font-weight:600; line-height:var(--lh-snug); }
.promo__text { font-size:var(--fs-13); color:rgba(255,255,255,.78); }
.promo__cta {
  display:inline-flex; align-items:center; gap:.35rem; margin-top:.35rem;
  font-size:var(--fs-13); font-weight:600;
}
.promo__cta .ic { transition:transform var(--t-base) var(--ease-out); }
.promo:hover .promo__cta .ic { transform:translateX(4px); }

/* Mobil menü hızlı bağlantı bloğu (tüm drawer'larda ortak) */
.navquick { display:grid; gap:.1rem; }
.navquick__title {
  margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--border);
  margin-bottom:.5rem;
  font-size:var(--fs-11); font-weight:700; letter-spacing:var(--ls-widest);
  text-transform:uppercase; color:var(--text-3);
}
.navquick__link {
  display:flex; align-items:center; gap:.65rem;
  padding:.6rem .25rem; font-size:var(--fs-14); color:var(--text-2);
  transition:color var(--t-fast), padding-inline-start var(--t-base) var(--ease);
}
.navquick__link:hover { color:var(--text); padding-inline-start:.45rem; }
.navquick__link .ic { color:var(--text-3); flex:none; }

/* 7) ERİŞİLEBİLİRLİK: AZALTILMIŞ HAREKET ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}