/* ==========================================================================
   WO TASARIM STANDARDI — token + taban + düğme  ·  wo-tokenlar v1.0.0
   İş: wohub IE-000001 · 11 Eki 2026 · kurallar: tasarim-standardi.md (aynı klasör)

   TEK KAYNAK budur. Sayfaya olduğu gibi kopyala (ilk satırdaki sürüm yorumu
   dahil); renkleri değiştirmek gerekiyorsa yalnız §1 RENK bloğunu değiştir ve
   kontrastı yeniden ölç. Değer değiştirmek = standardın sürümünü artırmak.

   - Yalnız AÇIK tema. Koyu tema bloğu YOK (sahip kararı 4 Eki 2026).
   - Değerler 4 Eki 2026 «Ufuk» ölçümünden (stripe.com, slack.com, tiktok.com,
     meta.com, rockads.com; 390 + 1440 ölçüm) sadeleştirildi.
   - Adlar gorsel-sistem.md / bilesen-kaliplari.md ile aynı sözleşmedir;
     o dosyalarla değer çelişirse BU dosya kazanır.
   - Boşluk, yarıçap, kontrol boyu: hepsi 4'ün katı (kapi.mjs Boşluk skoru).
   ========================================================================== */

/* ---- §1 TOKENLAR ------------------------------------------------------- */
:root {
  color-scheme: light;

  /* RENK — nötrler (mavi eğilimli slate, saf gri değil) */
  --zemin:          #F9FAFD;   /* sayfa zemini (greatads: kırık beyaz + beyaz yüzen kartlar) */
  --yuzey-1:        #FFFFFF;   /* kart, form, üst bar */
  --yuzey-2:        #F1F3F9;   /* yıkama: bant, hover zemini, disabled */
  --yuzey-3:        #E4E8F1;   /* iç kuyu, seçili satır */
  --kenar:          #E4E8F1;   /* ince çizgi (süs) */
  --kenar-guclu:    #7D869C;   /* form kontrolü çizgisi: beyazda 3,64:1 (WCAG 1.4.11) — yüzey-3 üstünde kullanma */

  --metin:          #111932;   /* beyaz 17,37:1 · zemin 16,64:1 */
  --metin-ikincil:  #48526C;   /* beyaz 7,78:1 */
  --metin-silik:    #5F6881;   /* beyaz 5,55:1 · yüzey-3 4,52:1 — en küçük 14px */

  /* RENK — TEK birincil vurgu (WO Mavisi). Ürün başka aile seçebilir; adlar sabit kalır. */
  --vurgu:          #2046F1;   /* üstünde beyaz 6,55:1 · beyazda bağlantı 6,55:1 */
  --vurgu-koyu:     #1837C5;   /* hover (1 basamak) */
  --vurgu-bas:      #132D94;   /* basılı (2 basamak) */
  --vurgu-yumusak:  #EFF5FF;   /* ikincil düğme hover, rozet zemini */
  --vurgu-yumusak-2:#DAE8FF;   /* basış halkası, seçim */
  --vurgu-cizgi:    #B5D0FF;   /* ikincil düğme çizgisi */
  --vurgu-uzeri:    #FFFFFF;   /* vurgu zemindeki metin */
  --vurgu-halka:    #3766FF;   /* odak halkası: beyazda 4,66:1 */

  /* RENK — enerji (TikTok dozu): yalnız nokta, rozet, tek kelime. Gövde metni/zemin olmaz. */
  --enerji:         #E21287;   /* dolgu; beyazda 4,50:1 → metinde --enerji-metin kullan */
  --enerji-yumusak: #FFF0F6;
  --enerji-metin:   #A0005D;   /* beyaz 7,92:1 */

  /* RENK — durum (metin olarak güvenli; dolgu ayrı) */
  --basari:         #007748;   /* beyaz 5,63:1 */
  --basari-yumusak: #E5FCEE;
  --uyari:          #845000;   /* beyaz 6,71:1 */
  --uyari-dolgu:    #FEA92F;   /* yalnız dolgu/ikon; üstünde --metin (9,04:1) */
  --uyari-yumusak:  #FFF1D9;
  --hata:           #B7191C;   /* beyaz 6,63:1 */
  --hata-dolgu:     #D01D21;   /* tehlike düğmesi; üstünde beyaz 5,41:1 */
  --hata-yumusak:   #FFF0EE;

  /* GÖLGE — mürekkep tabanlı, negatif yayılımlı 2 katman; en çok 4 seviye.
     Düğme ASLA gölge almaz; renkli parıltı yok. */
  --golge-rgb: 17 25 50;
  --golge-sm: 0 1px 2px 0 rgb(var(--golge-rgb) / .06), 0 1px 1px 0 rgb(var(--golge-rgb) / .04);
  --golge-md: 0 4px 12px -2px rgb(var(--golge-rgb) / .08), 0 2px 4px -2px rgb(var(--golge-rgb) / .06);
  --golge-lg: 0 12px 32px -8px rgb(var(--golge-rgb) / .16), 0 4px 8px -4px rgb(var(--golge-rgb) / .08);
  --golge-xl: 0 32px 64px -16px rgb(var(--golge-rgb) / .24), 0 12px 24px -12px rgb(var(--golge-rgb) / .12);
  --golge-ic: inset 0 1px 2px rgb(var(--golge-rgb) / .06);
  --golge-xs: var(--golge-sm);  /* eski ad uyumu */
  --golge-vurgu: none;          /* eski ad uyumu: birincil düğme parıltısı KALDIRILDI */

  /* YARIÇAP — hepsi 4'ün katı. Sayfada en çok 4 tür. */
  --yaricap-xs:  4px;   /* onay kutusu, kbd, kod çipi */
  --yaricap-sm:  8px;   /* EYLEM: tüm düğmeler, girdiler, açılır menü */
  --yaricap-md:  12px;  /* kart içindeki kart, küçük medya */
  --yaricap-lg:  16px;  /* kart, panel, galeri, form kutusu */
  --yaricap-xl:  24px;  /* pencere: hero medyası, CTA bandı */
  --yaricap-2xl: 32px;
  --yaricap-tam: 999px; /* YALNIZ SEÇİM: çip, rozet, sekme, anahtar, avatar */

  /* TİPOGRAFİ — iki aile, ikisinde de ₺ ve latin-ext ölçüldü (gorsel-sistem.md §4.8) */
  --font-baslik: "Bricolage Grotesque", "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-govde:  "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:   "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  /* Tip ölçeği: basamaklı px (akışkan clamp yok); büyük boylar ≥960'ta büyür.
     Görünüm başına en çok 6 boy: 14 · 16 · 18 · 24 · 32/40 · 40/64. 12 yalnız panel. */
  --tip-xs:  12px;   /* panel alt yazısı */
  --tip-sm:  14px;   /* meta, etiket, nav (mobil) */
  --tip-md:  16px;   /* gövde, düğme, girdi (iOS yakınlaştırmasını önler) */
  --tip-lg:  18px;   /* giriş paragrafı, eski fiyat */
  --tip-xl:  24px;   /* h3, kart başlığı */
  --tip-2xl: 32px;   /* h2, fiyat — ≥960: 40 */
  --tip-3xl: 40px;   /* ≥960: 48 */
  --tip-4xl: 40px;   /* h1 — ≥960: 64 */

  --satir-sik:    1.125;  /* h1 ≥960 (64/72) */
  --satir-baslik: 1.25;   /* h1 mobil 40/50, h2 32/40, h3 24/30 */
  --satir-govde:  1.5;    /* 16/24 — kapı aralığı 1,4–1,8 */
  --satir-genis:  1.75;   /* uzun okuma 16/28 */

  --aralik-display: -0.03em;
  --aralik-baslik:  -0.02em;
  --aralik-etiket:   0.08em;  /* küçük BÜYÜK HARF etiket; lang="tr" şart */

  --agirlik-govde: 400;
  --agirlik-orta:  600;
  --agirlik-kalin: 700;
  --agirlik-baslik: 700;

  /* BOŞLUK — 4px tabanı (adlar eski sözleşme, değerler değişmedi) */
  --bosluk-0: 0;
  --bosluk-1: 4px;   --bosluk-2: 8px;   --bosluk-3: 12px;  --bosluk-4: 16px;
  --bosluk-5: 24px;  --bosluk-6: 32px;  --bosluk-7: 40px;  --bosluk-8: 48px;
  --bosluk-9: 64px;  --bosluk-10: 80px; --bosluk-11: 96px; --bosluk-12: 128px;

  /* DÜZEN — basamaklı (aşağıdaki @media yalnız token yeniden tanımlar) */
  --kap:          1232px;  /* Stripe + Meta ortak ölçülen içerik genişliği */
  --kap-dar:       768px;
  --kap-genis:    1440px;
  --kenar-bosluk:   16px;  /* ≥640: 24 · ≥960: 32 */
  --izgara-bosluk:  16px;  /* ≥960: 24 */
  --bolum-y:        56px;  /* ≥640: 72 · ≥960: 96 */
  --bolum-y-dar:    40px;  /* ≥960: 64 */
  --ustbar-y:       64px;  /* ≥960: 72 */
  --olcu:           68ch;
  --olcu-baslik:    22ch;

  /* KONTROL BOYLARI — dokunma hedefi */
  --dokunma-min:    44px;  /* her etkileşimli öğenin en kısa kenarı (cümle içi bağlantı hariç) */
  --kontrol-sm:     44px;  /* ≥960 + fare: 36 (yalnız yoğun panel) */
  --kontrol-nav:    44px;  /* ≥960 + fare: 40 */
  --kontrol-md:     44px;  /* varsayılan düğme */
  --kontrol-girdi:  48px;  /* input, select */
  --kontrol-lg:     48px;  /* landing/hero CTA — ≥640: 56 */
  --dugme-px-sm:    16px;
  --dugme-px-md:    20px;
  --dugme-px-lg:    24px;  /* ≥640: 28 */
  --dugme-yazi:     var(--tip-md);
  --dugme-yazi-sm:  var(--tip-sm);
  --dugme-agirlik:  700;
  --dugme-yaricap:  var(--yaricap-sm);
  --ikon:           20px;
  --ikon-sm:        16px;

  /* ODAK + BASIŞ */
  --odak-kalinlik: 3px;
  --odak-bosluk:   2px;
  --odak-renk:     var(--vurgu-halka);
  --basis-halka:   4px;
  --ok-kayma:      4px;

  /* HAREKET — tek eğri (Stripe), iki süre */
  --kolay:       cubic-bezier(.25, 1, .5, 1);
  --kolay-cikis: cubic-bezier(.4, 0, .2, 1);
  --sure-hizli:  .15s;
  --sure-orta:   .3s;
  --sure-yavas:  .5s;

  /* KATMAN */
  --kat-arka: 0; --kat-icerik: 1; --kat-sabit: 40;
  --kat-ustbar: 50; --kat-acilir: 60; --kat-katman: 80;

  /* BİLEŞEN DEVİRLERİ */
  --kart-zemin: var(--yuzey-1);
  --kart-kenar: 1px solid var(--kenar);
  --kart-golge: var(--golge-sm);
  --kart-golge-hover: var(--golge-md);
  --kart-ic-isik: none;
  --ustbar-zemin: var(--yuzey-1);   /* opak: cam/blur efekt bütçesini harcamaz */
}

@media (min-width: 640px) {
  :root {
    --kenar-bosluk: 24px;
    --bolum-y: 72px;
    --kontrol-lg: 56px;
    --dugme-px-lg: 28px;
  }
}
@media (min-width: 960px) {
  :root {
    --kenar-bosluk: 32px;
    --izgara-bosluk: 24px;
    --bolum-y: 96px;
    --bolum-y-dar: 64px;
    --ustbar-y: 72px;
    --tip-2xl: 40px;
    --tip-3xl: 48px;
    --tip-4xl: 64px;
  }
}
@media (min-width: 960px) and (hover: hover) and (pointer: fine) {
  :root {
    --kontrol-sm: 36px;
    --kontrol-nav: 40px;
  }
}

/* ---- §2 TABAN (zorunlu) ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--font-govde);
  font-size: var(--tip-md);            /* 16px: em tabanlı tarayıcı boşlukları 4'ün katında kalır */
  line-height: var(--satir-govde);
}
/* Tarayıcı varsayılan boşlukları sıfır; dikey ritim .yigin ya da tokenla verilir */
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, pre { margin: 0; }
h1, h2, h3, h4 { font-family: var(--font-baslik); font-weight: var(--agirlik-baslik); color: var(--metin); text-wrap: balance; }
h1 { font-size: var(--tip-4xl); line-height: var(--satir-baslik); letter-spacing: var(--aralik-display); }
h2 { font-size: var(--tip-2xl); line-height: var(--satir-baslik); letter-spacing: var(--aralik-baslik); }
h3 { font-size: var(--tip-xl);  line-height: var(--satir-baslik); letter-spacing: var(--aralik-baslik); }
@media (min-width: 960px) { h1 { line-height: var(--satir-sik); } }
p { text-wrap: pretty; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--vurgu); text-underline-offset: 2px; }
:focus-visible { outline: var(--odak-kalinlik) solid var(--odak-renk); outline-offset: var(--odak-bosluk); }
::selection { background: var(--vurgu-yumusak-2); color: var(--metin); }

/* Dikey yığın: çocuklar arasında tek boşluk (varsayılan 16px) */
.yigin > * + * { margin-top: var(--yigin, var(--bosluk-4)); }

/* Dokunma hedefi yardımcısı: tek başına duran bağlantı, ikon, logo */
.dokunma { display: inline-flex; align-items: center; min-height: var(--dokunma-min); min-width: var(--dokunma-min); }

/* Form kontrolleri */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%;
  min-height: var(--kontrol-girdi);
  padding: var(--bosluk-2) var(--bosluk-4);
  border: 1px solid var(--kenar-guclu);
  border-radius: var(--yaricap-sm);
  background: var(--yuzey-1);
  color: var(--metin);
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html .dugme[aria-busy="true"]::after { animation-duration: 1.4s !important; animation-iteration-count: infinite !important; }
}

/* ---- §3 DÜĞME (zorunlu) -------------------------------------------------
   EYLEM = 8px köşeli dikdörtgen · SEÇİM = hap (.cip). Düğme gölge ALMAZ,
   yukarı zıplamaz, gradyan dolgu almaz. Hover = 1 basamak koyulaşma + ok 4px
   kayar; basış = 2. basamak + 4px halka; odak = 3px düz halka, 2px boşluk.
   Engelli: <button disabled> ya da <a aria-disabled="true">.
   Yükleniyor: aria-busy="true" (etiket gizlenir, genişlik sabit kalır).     */
.dugme {
  --_y: var(--kontrol-md);
  --_px: var(--dugme-px-md);
  --_yazi: var(--dugme-yazi);
  --_zemin: var(--vurgu);
  --_zemin-h: var(--vurgu-koyu);
  --_zemin-a: var(--vurgu-bas);
  --_renk: var(--vurgu-uzeri);
  --_cizgi: transparent;
  --_cizgi-h: transparent;
  --_bas: var(--vurgu-yumusak-2);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bosluk-2);
  min-height: var(--_y);
  min-width: var(--_y);
  max-width: 100%;
  margin: 0;
  padding: 0 var(--_px);
  border: 1px solid var(--_cizgi);       /* her varyantta var → hover'da yerleşim kaymaz */
  border-radius: var(--dugme-yaricap);
  background-color: var(--_zemin);
  color: var(--_renk);
  font-family: var(--font-govde);
  font-size: var(--_yazi);
  font-weight: var(--dugme-agirlik);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    background-color var(--sure-orta) var(--kolay),
    border-color var(--sure-orta) var(--kolay),
    color var(--sure-orta) var(--kolay),
    box-shadow var(--sure-hizli) var(--kolay);
}
.dugme svg { flex: none; width: var(--ikon); height: var(--ikon); }
.dugme .ok { transition: transform var(--sure-orta) var(--kolay); }

/* boyutlar */
.dugme--sm { --_y: var(--kontrol-sm); --_px: var(--dugme-px-sm); --_yazi: var(--dugme-yazi-sm); }
.dugme--sm svg { width: var(--ikon-sm); height: var(--ikon-sm); }
.dugme--nav { --_y: var(--kontrol-nav); --_px: var(--dugme-px-sm); }
.dugme--lg { --_y: var(--kontrol-lg); --_px: var(--dugme-px-lg); }
.dugme--blok { display: flex; width: 100%; }
@media (max-width: 639.98px) { .dugme--blok-mobil { display: flex; width: 100%; } }

/* varyantlar */
.dugme--ikincil {
  --_zemin: var(--yuzey-1); --_zemin-h: var(--vurgu-yumusak); --_zemin-a: var(--vurgu-yumusak-2);
  --_renk: var(--vurgu); --_cizgi: var(--vurgu-cizgi); --_cizgi-h: var(--vurgu);
}
.dugme--hayalet {
  --_zemin: transparent; --_zemin-h: var(--yuzey-2); --_zemin-a: var(--yuzey-3);
  --_renk: var(--metin); --_bas: transparent;
}
.dugme--ters {   /* vurgu renkli bant üstünde */
  --_zemin: var(--yuzey-1); --_zemin-h: var(--vurgu-yumusak); --_zemin-a: var(--vurgu-yumusak-2);
  --_renk: var(--vurgu-bas); --_bas: rgb(255 255 255 / .35);
}
.dugme--tehlike {
  --_zemin: var(--hata-dolgu); --_zemin-h: var(--hata); --_zemin-a: var(--hata);
  --_renk: var(--vurgu-uzeri); --_bas: var(--hata-yumusak);
}
.dugme--baglanti {  /* oklu metin bağlantısı: kart altı, bölüm sonu */
  --_px: 0px; --_zemin: transparent; --_zemin-h: transparent; --_zemin-a: transparent;
  --_renk: var(--vurgu); --_bas: transparent;
  min-width: 0;
}
@media (hover: hover) { .dugme--baglanti:hover { color: var(--vurgu-koyu); } }
.dugme--ikon {      /* kare; aria-label ZORUNLU */
  --_px: 0px; --_zemin: transparent; --_zemin-h: var(--yuzey-2); --_zemin-a: var(--yuzey-3);
  --_renk: var(--metin-ikincil); --_bas: transparent;
  width: var(--_y); padding: 0;
}

/* durumlar */
@media (hover: hover) {
  .dugme:hover { background-color: var(--_zemin-h); border-color: var(--_cizgi-h); }
  .dugme:hover .ok { transform: translateX(var(--ok-kayma)); }
}
.dugme:active { background-color: var(--_zemin-a); border-color: var(--_cizgi-h); box-shadow: 0 0 0 var(--basis-halka) var(--_bas); }
.dugme:focus-visible { outline: var(--odak-kalinlik) solid var(--odak-renk); outline-offset: var(--odak-bosluk); }
.dugme--ters:focus-visible { outline-color: var(--yuzey-1); }
.dugme:disabled,
.dugme[aria-disabled="true"] {
  --_zemin: var(--yuzey-2); --_zemin-h: var(--yuzey-2); --_zemin-a: var(--yuzey-2);
  --_renk: var(--metin-silik); --_cizgi: var(--kenar); --_cizgi-h: var(--kenar); --_bas: transparent;
  cursor: not-allowed;
}
a.dugme[aria-disabled="true"] { pointer-events: none; }
.dugme[aria-busy="true"] { color: transparent; cursor: progress; pointer-events: none; }
.dugme[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 20px;
  height: 20px;
  margin: auto;
  border: 2px solid var(--_renk);
  border-right-color: transparent;
  border-radius: var(--yaricap-tam);
  animation: wo-don 1.4s linear infinite;
}
@keyframes wo-don { to { transform: rotate(360deg); } }

/* SEÇİM hapı (filtre, etiket seçici): aria-pressed / aria-selected */
.cip {
  display: inline-flex; align-items: center; gap: var(--bosluk-2);
  min-height: var(--kontrol-sm); padding: 0 var(--bosluk-4);
  border: 1px solid var(--kenar); border-radius: var(--yaricap-tam);
  background: var(--yuzey-1); color: var(--metin-ikincil);
  font: inherit; font-size: var(--tip-sm); font-weight: var(--agirlik-orta);
  cursor: pointer;
  transition: background-color var(--sure-orta) var(--kolay), border-color var(--sure-orta) var(--kolay), color var(--sure-orta) var(--kolay);
}
@media (hover: hover) { .cip:hover { border-color: var(--kenar-guclu); color: var(--metin); } }
.cip[aria-pressed="true"], .cip[aria-selected="true"] { border-color: var(--vurgu-cizgi); background: var(--vurgu-yumusak); color: var(--vurgu-bas); }
.cip:disabled, .cip[aria-disabled="true"] { background: var(--yuzey-2); color: var(--metin-silik); cursor: not-allowed; }

/* Rozet (etkileşimsiz; tam yarıçap, yeşil nokta — greatads çipi) */
.rozet {
  display: inline-flex; align-items: center; gap: var(--bosluk-2);
  padding: var(--bosluk-1) var(--bosluk-3);
  border-radius: var(--yaricap-tam);
  background: var(--yuzey-1); border: 1px solid var(--kenar);
  color: var(--metin); font-size: var(--tip-sm); font-weight: var(--agirlik-orta);
}
.rozet--nokta::before { content: ""; width: 8px; height: 8px; border-radius: var(--yaricap-tam); background: var(--basari); }