/* Seturack · bridge.css — sahibi T03 (tasarım §2.2, D-4; PLAN §0-5 K-1/K-2).
   Görev: tokens.css'teki --c-* tokenlarını (1) WStyle'ın 38 --wstyle-* değişkeninin HER BİRİNE (W01 §7 listesi; ya bir token ya
   "bilinçli olarak WStyle'da bırakıldı" yorumu), (2) Bootstrap 5.3.8 kök --bs-* değişkenlerine, (3) .btn-* bileşen değişkenlerine bağlar.
   Hex yok (lint `hex`); renk değeri yalnız var(--c-*).

   Neden kazanıyor (yükleme sırası D-4): bu dosya layout'ta satır içi `:root{--wstyle-primary:{$setting.primary_color}…}` bloğundan
   ve view'ların {block name=head} yüzey CSS'inden SONRA yüklenir. `:root` (0,1,0) aynı özgüllükteki theme.css/default.css
   `:root` ve `[data-bs-theme=dark]` bloklarını kaynak sırasıyla yener; koyuya özgü eşlemeler `:root[data-bs-theme=dark]` (0,2,0).
   Panelin primary_color/secondary_color ayarı (canlıda theme/color1 = 009595) böylece etkisizdir — K-2: alan panelde kalır,
   Seturack'ın kontrast doğrulanmış türevleri sabittir (theme.php `st_set_brand_note`).

   Değerler var(--c-*) olduğundan tek `:root` bloğu iki modu da taşır: koyu modda tokenlar değişir, eşleme aynı kalır. */

/* ============================================================================================================
   1) WStyle --wstyle-* (38) — theme.css 20 + default.css 18
   ============================================================================================================ */
:root {
  /* theme.css (20) */
  --wstyle-primary: var(--c-brand);                    /* kırmızı = aksiyon ve seçim (§1 renk disiplini) */
  --wstyle-primary-rgb: var(--c-brand-rgb);
  --wstyle-secondary: var(--c-navy);                   /* lacivert = güven/marka yüzeyi; koyu modda ters buton components.css'te */
  --wstyle-secondary-rgb: var(--c-navy-rgb);
  --wstyle-success: var(--c-ok);
  --wstyle-success-rgb: var(--c-ok-rgb);
  --wstyle-font-family: var(--font-sans);
  /* --wstyle-font-size-base: bilinçli olarak WStyle'da bırakıldı (.9375rem = 15 px = tasarım gövdesi §2.2) */
  --wstyle-body-color: var(--c-ink-2);                 /* WStyle #475569 ≈ ink-2 #46515b; başlıkla hiyerarşi korunur */
  --wstyle-heading-color: var(--c-ink);
  --wstyle-muted-color: var(--c-ink-3);                /* .meta, text-body-secondary (AA: canvas 5,05 / kart 5,52) */
  --wstyle-body-bg: var(--c-canvas);
  --wstyle-surface-bg: var(--c-surface);
  --wstyle-border-color: var(--c-line);                /* dekoratif ayraç; form çerçevesi components.css'te line-input (1.4.11) */
  --wstyle-chrome-bg: var(--c-navy);                   /* chrome-dark yüzeyler: footer, topbar, sidebar, auth sahnesi, bantlar */
  --wstyle-chrome-bg-deep: var(--c-navy);              /* "derin" ton da navy: WStyle'ın chrome gradyanları düzleşir (§1 "gradyan yok") */
  --wstyle-chrome-color: var(--c-on-navy);
  --wstyle-chrome-muted: var(--c-on-navy-2);
  --wstyle-chrome-border: var(--c-navy-line);
  --wstyle-radius: var(--radius-btn);                  /* 6 px taban (k = 1: buton/alan). WStyle'ın `calc(var(--wstyle-radius) * k)`
                                                          türevleri (82 kural: 3,6–15 px) components.css §11'de rolüne göre 4/6/8'e
                                                          kenetlenir; kart 8 px ve rozet 4 px de orada açıkça */

  /* default.css (18) */
  /* --wstyle-shade-target: bilinçli olarak WStyle'da bırakıldı (black/white; yalnız color-mix hover türevlerinde) */
  --wstyle-primary-text: var(--c-brand-text);          /* açık yüzeyde kırmızı METİN brand-text (fill rengi değil — §2.1) */
  --wstyle-primary-hover: var(--c-brand-hover);
  --wstyle-primary-active: var(--c-brand-hover);
  --wstyle-primary-subtle: var(--c-brand-soft);
  --wstyle-primary-emphasis: var(--c-brand-text);
  --wstyle-on-primary: var(--c-white);
  --wstyle-secondary-text: var(--c-ink);               /* navy metin açıkta ink; koyuda ink zaten açık ton (WStyle'ın 55% beyaz karışımı yerine) */
  --wstyle-secondary-hover: var(--c-navy-2);
  --wstyle-secondary-active: var(--c-navy-3);
  --wstyle-secondary-subtle: var(--c-surface-3);
  --wstyle-secondary-emphasis: var(--c-ink);
  /* --wstyle-success-hover, --wstyle-success-active: bilinçli olarak WStyle'da bırakıldı (--wstyle-success'ten color-mix türevi) */
  --wstyle-shadow-sm: var(--sh-card);                  /* yalnız iki gölge (§2.3): kart 1 px … */
  --wstyle-shadow: var(--sh-card);                     /* … WStyle'ın hover "kaldırma" gölgesi kart gölgesine iner (büyük yumuşak gölge yok) */
  --wstyle-shadow-lg: var(--sh-pop);                   /* … ve menü/modal/toast için pop */
  /* Odak halkası: 2 px boşluk + 2 px DÜZ --c-focus (§2 "2 px focus + 2 px boşluk"; 1.4.11 / 2.4.7 ≥ 3:1 — contrast-table.mjs
     "köprü" satırları bu değeri ölçer). WStyle bu değişkeni ~13 bileşende TEK odak göstergesi olarak kullanır: outline'ı kapatır
     (.cat-card, .apik-cat, .sa-preset, .wcp-tbar-*, .wcp-acc-head) ya da input'u opacity:0 ile gizler (.option-card, .payment-option,
     .addon-pill, .sms-amount, .sd-cancel-*). Eski değer `0 0 0 2px rgba(brand, .25)` zeminde 1,45:1 (açık) / 1,21:1 (koyu) idi
     (T03 düzeltme turu, CDP ölçümü). Form alanının yumuşak halkası (border-brand + ring-2 brand/25, §3.5) ve :focus/:hover
     tüketicileri components.css §2'de açıkça yazılır; bu değişkeni okumazlar. */
  --wstyle-focus-ring: 0 0 0 2px var(--c-surface), 0 0 0 4px var(--c-focus);
}

/* Koyu mod: --c-navy (#0b1a2a) sayfa zeminiyle (#0c161f) 1,04:1 — düz yüzeydeki secondary tüketicileri (sepet kampanya kalemi
   kenarı + bağlantı çizgisi + balon zemini, bildirim/sepet sayacı zemini, configure segment odağı) koyu modda kayboluyordu
   (T03 düzeltme turu; upstream teal görünürdü). Ters dil: açıkta lacivert vurgu ↔ koyuda açık gri vurgu (.btn-secondary,
   sayfalama, nav-pills ile aynı). Bu dolgunun üstündeki beyaz metin components.css §2'de navy'ye döner. Lacivert (chrome-dark)
   yüzeyde aşağıdaki brand eşlemesi her iki modda geçerli kalır. */
:root[data-bs-theme=dark] {
  --wstyle-secondary: var(--c-on-navy-2);
  --wstyle-secondary-rgb: var(--c-on-navy-2-rgb);
}

/* Lacivert (chrome-dark) yüzeylerde WStyle "secondary" vurgusu (aktif kenar çubuğu çizgisi, sayaç rozeti, sepet sayacı, seçili
   onay kutusu, odak kenarı) navy olarak kalırsa zeminde KAYBOLUR (T03 çekimi dashboard-hero/yeni-musteri: panel kenar çubuğunda aktif öğe görünmüyordu).
   Lacivertte vurgu = kırmızı (seçim/aksiyon rengi; §1, §3.14 "sol 3 px kırmızı çubuk"). .chrome-dark .btn-secondary components.css'te
   açıkça terstir (bu değişkeni okumaz). WStyle'ın bu yüzeylerdeki dekoratif radial "parıltı" gradyanları ayrıca yüzey birimlerinde
   düzleştirilmeli (§1 "gradyan yok") — v5/dev/birim-notlari/T03.md. */
.chrome-dark {
  --wstyle-secondary: var(--c-brand);
  --wstyle-secondary-rgb: var(--c-brand-rgb);
  /* Halkanın boşluğu lacivert: beyaz boşluk lacivert bantta parlak bir çerçeve olurdu. Değişken burada yeniden çözülür
     (var() özel özellikte bildirildiği öğede hesaplanır). focus / navy ≥ 3:1 (contrast-table köprü satırı). */
  --wstyle-focus-ring: 0 0 0 2px var(--c-navy), 0 0 0 4px var(--c-focus);
}

/* ============================================================================================================
   2) Bootstrap 5.3.8 kök değişkenleri (default.css'in `:root,[data-bs-theme=dark]` köprüsünün eksik bıraktıkları + düzeltmeler)
   ============================================================================================================ */
:root {
  --bs-font-sans-serif: var(--font-sans);
  --bs-font-monospace: var(--font-mono);
  --bs-body-bg-rgb: var(--c-canvas-rgb);               /* .pay-locked-card vb. rgba(var(--bs-body-bg-rgb), …) */
  --bs-body-color-rgb: var(--c-ink-2-rgb);
  --bs-emphasis-color: var(--c-ink);
  --bs-emphasis-color-rgb: var(--c-ink-rgb);
  --bs-secondary-bg: var(--c-surface-3);               /* devre dışı alan, input-group-text */
  --bs-secondary-bg-rgb: var(--c-surface-3-rgb);       /* .bg-body-secondary */
  --bs-tertiary-bg-rgb: var(--c-canvas-rgb);           /* .bg-body-tertiary = sayfa zemini (default.css --bs-tertiary-bg: body-bg ile aynı; Bootstrap'ın koyu gri #2b3035'i kalmasın) */
  --bs-tertiary-color: var(--c-ink-3);                 /* Bootstrap'ın %50 saydam grisi AA'yı geçmez → ink-3 */
  --bs-border-color-translucent: var(--c-line);

  /* Bağlantı: Bootstrap 5.3 `a{color: rgba(var(--bs-link-color-rgb), …)}` okur. default.css bunu FILL rengine (--wstyle-primary-rgb)
     bağlıyordu → açıkta canvas üstünde 4,4, koyuda ~3,5 (AA dışı). Metin rengi brand-text'e çekilir. */
  --bs-link-color: var(--c-brand-text);
  --bs-link-color-rgb: var(--c-brand-text-rgb);
  --bs-link-hover-color: var(--c-brand-text);
  --bs-link-hover-color-rgb: var(--c-brand-text-rgb);
  --bs-code-color: var(--c-ink-2);
  --bs-highlight-bg: var(--c-warn-soft);
  --bs-highlight-color: var(--c-ink);

  /* Durum renkleri (rozet/uyarı/metin yardımcıları): soft zemin + koyu metin (§3.3) */
  --bs-primary-bg-subtle: var(--c-brand-soft);
  --bs-primary-border-subtle: var(--c-brand-line);
  --bs-primary-text-emphasis: var(--c-brand-text);
  --bs-secondary-bg-subtle: var(--c-surface-3);        /* nötr rozet (bg-secondary-subtle ×60) */
  --bs-secondary-border-subtle: var(--c-line);
  --bs-secondary-text-emphasis: var(--c-ink-2);
  --bs-success-rgb: var(--c-ok-rgb);
  --bs-success-bg-subtle: var(--c-ok-soft);
  --bs-success-border-subtle: color-mix(in srgb, var(--c-ok) 30%, var(--c-surface));
  --bs-success-text-emphasis: var(--c-ok);
  --bs-warning: var(--c-warn);
  --bs-warning-rgb: var(--c-warn-rgb);
  --bs-warning-bg-subtle: var(--c-warn-soft);
  --bs-warning-border-subtle: color-mix(in srgb, var(--c-warn) 30%, var(--c-surface));
  --bs-warning-text-emphasis: var(--c-warn);
  --bs-info: var(--c-info);
  --bs-info-rgb: var(--c-info-rgb);
  --bs-info-bg-subtle: var(--c-info-soft);
  --bs-info-border-subtle: color-mix(in srgb, var(--c-info) 30%, var(--c-surface));
  --bs-info-text-emphasis: var(--c-info);
  --bs-danger: var(--c-danger);
  --bs-danger-rgb: var(--c-danger-rgb);
  --bs-danger-bg-subtle: var(--c-danger-soft);
  --bs-danger-border-subtle: var(--c-brand-line);
  --bs-danger-text-emphasis: var(--c-danger);

  /* Form doğrulama */
  --bs-form-valid-color: var(--c-ok);
  --bs-form-valid-border-color: var(--c-ok);
  --bs-form-invalid-color: var(--c-danger);
  --bs-form-invalid-border-color: var(--c-danger);
  --bs-focus-ring-color: rgba(var(--c-brand-rgb), .25);

  /* Gölge yardımcıları (.shadow-sm/.shadow/.shadow-lg): yalnız kart ve pop */
  --bs-box-shadow-sm: var(--sh-card);
  --bs-box-shadow: var(--sh-card);
  --bs-box-shadow-lg: var(--sh-pop);
  --bs-box-shadow-inset: none;

  /* Yarıçap: taban 6 (buton/alan), sm 4 (rozet), lg/xl 8 (kart) — §2.3 "başka yarıçap yok" */
  --bs-border-radius: var(--radius-btn);
  --bs-border-radius-sm: var(--radius-badge);
  --bs-border-radius-lg: var(--radius-card);
  --bs-border-radius-xl: var(--radius-card);
  --bs-border-radius-xxl: var(--radius-card);
}

/* ============================================================================================================
   3) Bootstrap .btn-* bileşen değişkenleri (Bootstrap ve default.css bu değişkenleri sınıf üstünde tanımlar — kökten akmaz)
   Görünüm kararları (boyut, ghost/soft/danger dolgusuz, odak) components.css'te.
   ============================================================================================================ */
.btn-primary {
  --bs-btn-color: var(--c-white);
  --bs-btn-bg: var(--c-brand);
  --bs-btn-border-color: var(--c-brand);
  --bs-btn-hover-color: var(--c-white);
  --bs-btn-hover-bg: var(--c-brand-hover);
  --bs-btn-hover-border-color: var(--c-brand-hover);
  --bs-btn-active-color: var(--c-white);
  --bs-btn-active-bg: var(--c-brand-hover);
  --bs-btn-active-border-color: var(--c-brand-hover);
  --bs-btn-focus-shadow-rgb: var(--c-brand-rgb);
  /* Devre dışı: opaklık zemini ve metni birlikte soldurur (koyuda ~3,1:1) → token çifti (v3 components.css notu) */
  --bs-btn-disabled-color: var(--c-ink-3);
  --bs-btn-disabled-bg: var(--c-surface-3);
  --bs-btn-disabled-border-color: var(--c-surface-3);
  --bs-btn-disabled-opacity: 1;
}

/* WStyle'ın dolgu "secondary" butonu → Seturack .btn-navy (önemli ama birincil olmayan; §3.1). Koyu modda ters: components.css */
.btn-secondary {
  --bs-btn-color: var(--c-on-navy);
  --bs-btn-bg: var(--c-navy);
  --bs-btn-border-color: var(--c-navy);
  --bs-btn-hover-color: var(--c-on-navy);
  --bs-btn-hover-bg: var(--c-navy-2);
  --bs-btn-hover-border-color: var(--c-navy-2);
  --bs-btn-active-color: var(--c-on-navy);
  --bs-btn-active-bg: var(--c-navy-3);
  --bs-btn-active-border-color: var(--c-navy-3);
  --bs-btn-focus-shadow-rgb: var(--c-navy-rgb);
  --bs-btn-disabled-color: var(--c-ink-3);
  --bs-btn-disabled-bg: var(--c-surface-3);
  --bs-btn-disabled-border-color: var(--c-surface-3);
  --bs-btn-disabled-opacity: 1;
}

.btn-success {
  --bs-btn-color: var(--c-on-ok);
  --bs-btn-bg: var(--c-ok);
  --bs-btn-border-color: var(--c-ok);
  --bs-btn-hover-color: var(--c-on-ok);
  --bs-btn-active-color: var(--c-on-ok);
  --bs-btn-disabled-color: var(--c-on-ok);
  --bs-btn-focus-shadow-rgb: var(--c-ok-rgb);
}

.btn-outline-primary {
  --bs-btn-color: var(--c-brand-text);
  --bs-btn-border-color: var(--c-brand-line);
  --bs-btn-hover-color: var(--c-brand-text);
  --bs-btn-hover-bg: var(--c-brand-soft);
  --bs-btn-hover-border-color: var(--c-brand-line);
  --bs-btn-active-color: var(--c-brand-text);
  --bs-btn-active-bg: var(--c-brand-soft);
  --bs-btn-active-border-color: var(--c-brand-text);
}

.btn-outline-secondary {
  --bs-btn-color: var(--c-ink);
  --bs-btn-border-color: var(--c-line-strong);
  --bs-btn-hover-color: var(--c-ink);
  --bs-btn-hover-bg: var(--c-surface-2);
  --bs-btn-hover-border-color: var(--c-line-strong);
  --bs-btn-active-color: var(--c-ink);
  --bs-btn-active-bg: var(--c-surface-3);
  --bs-btn-active-border-color: var(--c-line-strong);
}

.btn-link {
  --bs-btn-color: var(--c-brand-text);
  --bs-btn-hover-color: var(--c-brand-text);
  --bs-btn-active-color: var(--c-brand-text);
  --bs-btn-disabled-color: var(--c-ink-4);
}