/* Seturack · components.css — sahibi T03 (tasarım §2.2; docs/tasarim-sistemi.md §3, §7, §8).
   Genel Bootstrap 5.3.8 / WStyle bileşen override'ları: tipografi tabanı, odak halkası, buton (6 px; .btn-danger dolgusuz),
   kart (1 px kenar + 1 px gölge, 8 px), rozet (4 px), form, sekme/segment, menü, modal, toast, uyarı bandı, tablo, sayfalama,
   .list-item tabanı, .wstyle-empty-state ve WStyle'dan miras YASAK efektlerin nötrleştirilmesi (§2.2 (a)–(d); CLAUDE.md "Yasak").
   Markup'a dokunulmaz; WStyle sınıf adları korunur, yalnız boyanır. Renk yalnız var(--c-*) (hex yok — lint).
   Yüzeye özgü kurallar burada DEĞİL: features.css parçaları (v5/src/css/features/NN-*.css; kabuk T05, ana sayfa T06, …).
   Hareket: bu dosya hareket EKLEMEZ; yalnız kaldırır (`animation:none`, `transition:none`, `transform:none`). */

/* ============================================================================================================
   1) Tipografi tabanı (§2.2): gövde Plex Sans, başlık h1/h2 ölçeği Bricolage, veri Plex Mono; fiyat asla display fontla
   ============================================================================================================ */
body {
  font-variant-numeric: tabular-nums;                  /* "tnum gövdede global açık" (§2.2) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, .h1, .h2, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--font-display);
  font-weight: 600;                                    /* Bricolage yalnız 600; 700/800 isteği sahte kalınlık üretmesin */
  letter-spacing: -0.02em;
}
/* h1/h2 öğesi küçük ölçek sınıfıyla basılmışsa (ör. <h2 class="h5">) display fontu almaz: o bir kart başlığıdır */
:is(h1, h2):is(.h3, .h4, .h5, .h6, .fs-3, .fs-4, .fs-5, .fs-6, .fs-7, .fs-8, .fs-9) {
  font-family: var(--font-sans);
  letter-spacing: -0.005em;
}
h3, h4, h5, h6, .h3, .h4, .h5, .h6 { font-weight: 600; }
/* Emniyet: sınıf adında "price" geçen her öğe Plex Sans (₺ glifi ve tnum; §0 "fiyat asla display fontla") */
[class*="price"] { font-family: var(--font-sans); letter-spacing: -0.01em; }
code, kbd, pre, samp { font-family: var(--font-mono); }
strong, b { font-weight: 600; }                        /* Plex Sans aralığı 400–600 (seturack-fonts.css); 700 isteği zaten 600'e kenetlenir */

/* ============================================================================================================
   2) Odak halkası (§3.1, §8): 2 px --c-focus + 2 px boşluk; Bootstrap'ın box-shadow odağı yerine.
      Üç katman: (a) outline (genel + Bootstrap bileşenleri), (b) WStyle'ın box-shadow ile çizdiği tek-gösterge bileşenleri
      → --wstyle-focus-ring (bridge.css: 2 px boşluk + 2 px düz --c-focus, aynı geometri), (c) form alanı ve :focus/:hover
      tüketicileri → yumuşak halka (fare odağında da görünür; asıl gösterge kenarın brand'e dönmesi, ≥ 3:1).
      Ölçüm (T03 düzeltme turu, CDP, açık/koyu): Tab ile odak → gösterge bandı ≥ 2 px ve dış zemine karşı ≥ 3:1.
   ============================================================================================================ */
/* (c) Form alanı (§3.5): kenar brand + ring-2 brand/25. Bu kural (a)'dan ÖNCE durur: .form-check-input'ta klavye odağı
       (a)'nın outline'ını alır, fare odağı yalnız bunu. WStyle'ın aynı görünümlü alan tüketicileri (.range-value, .composer,
       .file-upload-drop) de burada; --wstyle-focus-ring artık düz halka olduğundan alan görünümü açıkça yazılır.
       Aranabilir seçici (Tom Select: ülke/il, özel alan, alan adı uzantısı): kenar .ts-wrapper'da, odakta Tom Select .focus sınıfını
       ekler; WStyle default.css `.ts-wrapper.focus .ts-control{border-color:…;box-shadow:none}` göstergeyi siliyordu (upstream'de
       de: kenar 1,24:1, halka yok). Gizli native select (.tomselected) odak almaz (tabindex -1). T08 isteği; 50-auth.css'teki
       kapsamlı eşi T08 kaldırır. (T03 ikinci düzeltme turu) */
.form-control:focus, .form-select:focus, .form-check-input:focus,
.ts-wrapper.form-select.focus, .ts-wrapper.form-control.focus,
.range-value:focus, .composer:focus-within, .file-upload-drop:focus-within {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 2px rgba(var(--c-brand-rgb), .25);
}
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--c-surface), 0 0 0 3px rgba(var(--c-brand-rgb), .25); }
.form-range:focus::-moz-range-thumb { box-shadow: 0 0 0 1px var(--c-surface), 0 0 0 3px rgba(var(--c-brand-rgb), .25); }
/* Hover bir odak değildir: tema özelleştiricisinin logo kutusu odak halkası gibi görünmesin */
.customizer-logo-swap:hover { box-shadow: 0 0 0 2px rgba(var(--c-brand-rgb), .25); }

/* (a) outline */
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.btn:focus-visible,
.btn-check:focus-visible + .btn,
.nav-link:focus-visible,
.page-link:focus-visible,
.dropdown-item:focus-visible,
.list-group-item-action:focus-visible,
.accordion-button:focus-visible,
.btn-close:focus-visible,
.form-check-input:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  box-shadow: none;
}
.btn-close { --bs-btn-close-focus-shadow: none; }
/* Kaydırıcı başparmağı: Bootstrap .form-range:focus{outline:0} → klavye odağı başparmakta düz halka (fare sürüklemesinde (c)) */
.form-range:focus-visible::-webkit-slider-thumb { box-shadow: var(--wstyle-focus-ring); }
.form-range:focus-visible::-moz-range-thumb { box-shadow: var(--wstyle-focus-ring); }
/* Odak rengi tekil: WStyle configure.css segment odağını --wstyle-secondary ile çiziyordu (koyuda 1,12:1) */
.addon-seg-item:focus-visible { outline-color: var(--c-focus); }
/* Çift gösterge olmasın: outline zaten var */
.store-tabs .nav-link:focus-visible { box-shadow: none; }
.sd-module-surface .wcp-table-pagination .pagination { --bs-pagination-focus-box-shadow: none; }

/* (b) --wstyle-focus-ring'i WStyle'da EZEN durum kuralları: seçili ödeme yöntemi `:has(input[name=payment_method]:checked)`
       (0,3,1) odak kuralını (0,3,0) yeniyordu → seçili yönteme Tab ile gelince yalnız 1 px halka kalıyordu; `.sa-preset.is-active`
       iç gölgesi (kaynakta sonra) odağı siliyordu. Eşit/yüksek özgüllükle ve sonra gelerek halka geri verilir. */
.payment-option:has(input.form-check-input:focus-visible) { box-shadow: var(--wstyle-focus-ring); }
.sa-preset.is-active:focus-visible { box-shadow: inset 0 0 0 1px var(--c-brand), var(--wstyle-focus-ring); }

/* ============================================================================================================
   3) Buton (§3.1): 32 / 40 / 48 px, 6 px yarıçap, 14 px/500. Renk değişkenleri bridge.css'te (.btn-primary/-secondary/-success…)
   ============================================================================================================ */
.btn {
  --bs-btn-font-size: .875rem;
  --bs-btn-font-weight: 500;
  --bs-btn-line-height: 1.5;
  --bs-btn-padding-y: .5rem;                           /* 21 + 16 + 2 kenar ≈ 40 px */
  --bs-btn-padding-x: 1rem;
  --bs-btn-border-radius: var(--radius-btn);
  --bs-border-radius-pill: var(--radius-btn);          /* .btn.rounded-pill de 6 px (§2.3 "başka yarıçap yok") */
}
.btn-sm {
  --bs-btn-font-size: .8125rem;
  --bs-btn-padding-y: .3125rem;                        /* ≈ 32 px */
  --bs-btn-padding-x: .75rem;
  --bs-btn-border-radius: var(--radius-btn);
}
.btn-lg {
  --bs-btn-font-size: .9375rem;
  --bs-btn-padding-y: .75rem;                          /* ≈ 48 px */
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-border-radius: var(--radius-btn);
}
/* WStyle .btn-soft (374 kullanım) = Seturack ikincil butonu: yüzey + line-strong çerçeve + ink metin. Pembe dolgu yok
   (kırmızı alan ≤ %8; kırmızı yalnız aksiyon/seçim — §1). */
.btn-soft {
  --bs-btn-color: var(--c-ink);
  --bs-btn-bg: var(--c-surface);
  --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);
  --bs-btn-disabled-color: var(--c-ink-3);
  --bs-btn-disabled-bg: var(--c-surface-2);
  --bs-btn-disabled-border-color: var(--c-line);
  --bs-btn-disabled-opacity: 1;
}
.btn-ghost {
  --bs-btn-color: var(--c-ink-2);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--c-ink);
  --bs-btn-hover-bg: var(--c-surface-3);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--c-ink);
  --bs-btn-active-bg: var(--c-surface-3);
  --bs-btn-active-border-color: transparent;
}
/* Yıkıcı işlem asla dolgu değil (§3.1, §3.19): yüzey + danger metin + brand-line çerçeve; hover danger-soft */
.btn-danger, .btn-outline-danger {
  --bs-btn-color: var(--c-danger);
  --bs-btn-bg: var(--c-surface);
  --bs-btn-border-color: var(--c-brand-line);
  --bs-btn-hover-color: var(--c-danger);
  --bs-btn-hover-bg: var(--c-danger-soft);
  --bs-btn-hover-border-color: var(--c-brand-line);
  --bs-btn-active-color: var(--c-danger);
  --bs-btn-active-bg: var(--c-danger-soft);
  --bs-btn-active-border-color: var(--c-danger);
  --bs-btn-disabled-color: var(--c-ink-3);
  --bs-btn-disabled-bg: var(--c-surface);
  --bs-btn-disabled-border-color: var(--c-line);
  --bs-btn-disabled-opacity: 1;
  --bs-btn-focus-shadow-rgb: var(--c-danger-rgb);
}
/* WStyle .btn-light yalnız koyu/renkli zeminlerde (popüler plan, CTA bandı, hakkımızda): ters buton = on-navy zemin + navy metin */
.btn-light {
  --bs-btn-color: var(--c-navy);
  --bs-btn-bg: var(--c-on-navy);
  --bs-btn-border-color: var(--c-on-navy);
  --bs-btn-hover-color: var(--c-navy);
  --bs-btn-hover-bg: var(--c-white);
  --bs-btn-hover-border-color: var(--c-white);
  --bs-btn-active-color: var(--c-navy);
  --bs-btn-active-bg: var(--c-white);
  --bs-btn-active-border-color: var(--c-white);
}
/* .btn-secondary = .btn-navy: koyu modda ve lacivert yüzeyde ters döner, yoksa zeminde kaybolur (§5.4) */
:root[data-bs-theme=dark] .btn-secondary,
.chrome-dark .btn-secondary {
  --bs-btn-color: var(--c-navy);
  --bs-btn-bg: var(--c-on-navy);
  --bs-btn-border-color: var(--c-on-navy);
  --bs-btn-hover-color: var(--c-navy);
  --bs-btn-hover-bg: var(--c-white);
  --bs-btn-hover-border-color: var(--c-white);
  --bs-btn-active-color: var(--c-navy);
  --bs-btn-active-bg: var(--c-white);
  --bs-btn-active-border-color: var(--c-white);
}

/* ============================================================================================================
   4) Kart (§3.2): 1 px line kenar + 1 px gölge, 8 px; hover'da yükselme yok
   ============================================================================================================ */
.card {
  --bs-card-bg: var(--c-surface);
  --bs-card-border-color: var(--c-line);
  --bs-card-border-radius: var(--radius-card);
  --bs-card-inner-border-radius: calc(var(--radius-card) - 1px);
  --bs-card-cap-bg: var(--c-surface-2);
  --bs-card-cap-color: var(--c-ink);
  box-shadow: var(--sh-card);
}

/* ============================================================================================================
   5) Rozet / durum (§3.3): 4 px, 12 px/500, soft zemin + koyu metin (eşlemesi bridge.css --bs-*-bg-subtle/-text-emphasis)
   ============================================================================================================ */
.badge {
  --bs-badge-font-size: .75rem;
  --bs-badge-font-weight: 500;
  --bs-badge-border-radius: var(--radius-badge);
  --bs-border-radius-pill: var(--radius-badge);        /* .badge.rounded-pill de 4 px */
}
.text-primary { color: var(--c-brand-text) !important; }   /* utility !important'ı: fill rengi metinde AA'yı geçmez (koyuda 3,4) */
.text-secondary { color: var(--c-ink-3) !important; }      /* yükleme göstergeleri: navy metin koyu zeminde kaybolurdu */
/* Sayaç/balon (secondary dolgu + beyaz metin: sepet sayacı, bildirim rozeti, sepet kampanya balonu). Koyu modda --wstyle-secondary
   açık gri (bridge.css) → metin ters döner (navy; 8,5:1 — contrast-table "navy / on-navy-2"), .btn-secondary/sayfalama ile aynı dil.
   Lacivert (chrome-dark) yüzeyde secondary = brand olduğundan beyaz kalır. */
:root[data-bs-theme=dark] :is(.cart-deal-bubble, .client-topbar-badge, .cart-count):not(.chrome-dark *) { color: var(--c-navy); }
/* Kenar çubuğu sayacı (chrome-dark): WStyle metni --wstyle-chrome-bg (navy); köprüde secondary = brand → navy / brand 3,46:1
   (0,65 rem metin, AA 4,5 gerekir; upstream teal ile ~4,5 idi). Beyaz metin 4,84 (açık) / 4,91 (koyu) — contrast-table "white / brand". */
.chrome-dark .client-sidebar-badge { color: var(--c-white); }

/* ============================================================================================================
   6) Form (§3.5): 1.4.11 için line-input çerçeve (3,48:1), yüzey zemin, placeholder ink-4, seçili kontrol brand
   ============================================================================================================ */
.form-control, .form-select {
  border-color: var(--c-line-input);
  background-color: var(--c-surface);
  color: var(--c-ink);
  border-radius: var(--radius-btn);
}
.form-control::placeholder { color: var(--c-ink-4); opacity: 1; }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--c-surface-3); color: var(--c-ink-3); }
.form-check-input { border-color: var(--c-line-input); background-color: var(--c-surface); }
.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate { background-color: var(--c-brand); border-color: var(--c-brand); }
.form-label, .col-form-label { font-weight: 500; }
.form-text { color: var(--c-ink-3); }
.input-group-text { background-color: var(--c-surface-2); border-color: var(--c-line-input); color: var(--c-ink-2); }

/* ============================================================================================================
   7) Sekme / segment (§3.6, §3.5 .seg): nav-pills seçili = navy (koyuda ters); sekme çizgisi brand
   ============================================================================================================ */
.nav {
  --bs-nav-link-color: var(--c-ink-2);
  --bs-nav-link-hover-color: var(--c-ink);
  --bs-nav-link-disabled-color: var(--c-ink-4);
}
.nav-pills {
  --bs-nav-pills-border-radius: var(--radius-btn);
  --bs-nav-pills-link-active-color: var(--c-on-navy);
  --bs-nav-pills-link-active-bg: var(--c-navy);
}
:root[data-bs-theme=dark] .nav-pills {
  --bs-nav-pills-link-active-color: var(--c-navy);
  --bs-nav-pills-link-active-bg: var(--c-on-navy);
}
/* WStyle segmenti: .btn-group > input.btn-check + label.btn.btn-soft (hesap türü — kayıt, checkout ×2, hesap ayarları ×2; alan
   adı seçeneği — configure). Seçili = .seg-on (§3.5): navy zemin + on-navy metin; koyu modda ve lacivert yüzeyde TERS (on-navy
   zemin + navy metin; §5.4 — nav-pills, sayfalama, .btn-secondary ile aynı dil). Bootstrap `.btn-check:checked+.btn` ve `.btn.active`
   yalnız --bs-btn-active-* okur; değişkenler YALNIZ seçili durumda değişir: .btn-soft'un basma (:active) ve açık menü düğmesi (.show)
   görünümü (yukarıda surface-3) aynı kalır. Önce: seçili/seçisiz zemin 1,17:1 (açık) / 1,19:1 (koyu), metin ve kenar aynı →
   durum görünmüyordu (1.4.11). Ölçüm: v5/dev/qa/T03/duzeltme-2/; regresyon: contrast-table.mjs "segment" satırları. */
.btn-check:checked + .btn-soft,
.btn-soft.active {
  --bs-btn-active-color: var(--c-on-navy);
  --bs-btn-active-bg: var(--c-navy);
  --bs-btn-active-border-color: var(--c-navy);
}
:root[data-bs-theme=dark] :is(.btn-check:checked + .btn-soft, .btn-soft.active),
.chrome-dark :is(.btn-check:checked + .btn-soft, .btn-soft.active) {
  --bs-btn-active-color: var(--c-navy);
  --bs-btn-active-bg: var(--c-on-navy);
  --bs-btn-active-border-color: var(--c-on-navy);
}
.nav-tabs {
  --bs-nav-tabs-border-color: var(--c-line);
  --bs-nav-tabs-link-hover-border-color: transparent transparent var(--c-line-strong);
  --bs-nav-tabs-link-active-color: var(--c-ink);
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-border-color: transparent transparent var(--c-brand);
}

/* ============================================================================================================
   8) Menü, modal, toast, uyarı bandı, tablo, sayfalama, liste grubu, akordeon, ilerleme
   ============================================================================================================ */
.dropdown-menu {
  --bs-dropdown-bg: var(--c-surface);
  --bs-dropdown-color: var(--c-ink-2);
  --bs-dropdown-border-color: var(--c-line);
  --bs-dropdown-border-radius: var(--radius-card);
  --bs-dropdown-inner-border-radius: calc(var(--radius-card) - 1px);
  --bs-dropdown-divider-bg: var(--c-line);
  --bs-dropdown-link-color: var(--c-ink-2);
  --bs-dropdown-link-hover-color: var(--c-ink);
  --bs-dropdown-link-hover-bg: var(--c-surface-3);
  --bs-dropdown-link-active-color: var(--c-ink);
  --bs-dropdown-link-active-bg: var(--c-surface-3);
  --bs-dropdown-header-color: var(--c-ink-3);
  box-shadow: var(--sh-pop);
}
/* Seçili menü öğesi hover'la aynı zemini (surface-3) taşır; ayrım renk dışı: ağırlık 500 (+ WStyle dil/para menüsünde onay ikonu).
   20-kabuk.css `.locale-menu .dropdown-item.active` (T05) ile aynı dil; seçili öğe pembe dolgu almaz (kırmızı alan ≤ %8). */
.dropdown-item.active { font-weight: 500; }
.modal {
  --bs-modal-bg: var(--c-surface);
  --bs-modal-color: var(--c-ink-2);
  --bs-modal-border-color: var(--c-line);
  --bs-modal-border-radius: var(--radius-card);
  --bs-modal-inner-border-radius: calc(var(--radius-card) - 1px);
  --bs-modal-box-shadow: var(--sh-pop);
  --bs-modal-header-border-color: var(--c-line);
  --bs-modal-footer-border-color: var(--c-line);
}
.modal-content { box-shadow: var(--sh-pop); }
.modal-backdrop { --bs-backdrop-opacity: 1; background-color: var(--c-scrim); }
.toast {
  --bs-toast-bg: var(--c-surface);
  --bs-toast-color: var(--c-ink-2);
  --bs-toast-border-color: var(--c-line);
  --bs-toast-border-radius: var(--radius-card);
  --bs-toast-box-shadow: var(--sh-pop);
  --bs-toast-header-bg: var(--c-surface-2);
  --bs-toast-header-color: var(--c-ink);
  box-shadow: var(--sh-pop);
}
/* Bilgi bandı (§3.9): sol 4 px renkli çizgi + soft zemin, 6 px */
.alert { --bs-alert-border-radius: var(--radius-btn); border-inline-start-width: 4px; }
.alert-info { border-inline-start-color: var(--c-info); }
.alert-warning { border-inline-start-color: var(--c-warn); }
.alert-danger { border-inline-start-color: var(--c-danger); }
.alert-success { border-inline-start-color: var(--c-ok); }
.alert-primary { border-inline-start-color: var(--c-brand); }
.alert-secondary { border-inline-start-color: var(--c-line-strong); }
/* Tablo (§3.4): ayraç line; başlık 12 px uppercase ink-3 (popüler plan kartının fatura tablosu hariç — lacivert zemin) */
.table { --bs-table-border-color: var(--c-line); --bs-table-color: var(--c-ink-2); --bs-table-hover-bg: var(--c-surface-2); --bs-table-hover-color: var(--c-ink); }
.table:not(.plan-billing-table) > thead > tr > th {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-ink-3);
}
/* Sayfalama: aktif sayfa = .seg-on (navy; koyuda ters — §3.5, §5.4) */
.pagination {
  --bs-pagination-border-radius: var(--radius-btn);
  --bs-pagination-active-color: var(--c-on-navy);
  --bs-pagination-active-bg: var(--c-navy);
  --bs-pagination-active-border-color: var(--c-navy);
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-disabled-color: var(--c-ink-4);
}
:root[data-bs-theme=dark] .pagination {
  --bs-pagination-active-color: var(--c-navy);
  --bs-pagination-active-bg: var(--c-on-navy);
  --bs-pagination-active-border-color: var(--c-on-navy);
}
.list-group {
  --bs-list-group-border-color: var(--c-line);
  --bs-list-group-border-radius: var(--radius-card);
  --bs-list-group-action-hover-bg: var(--c-surface-2);
  --bs-list-group-action-active-bg: var(--c-surface-3);
  --bs-list-group-active-color: var(--c-brand-text);
  --bs-list-group-active-bg: var(--c-brand-soft);
  --bs-list-group-active-border-color: var(--c-brand-line);
}
.accordion {
  --bs-accordion-border-color: var(--c-line);
  --bs-accordion-border-radius: var(--radius-card);
  --bs-accordion-inner-border-radius: calc(var(--radius-card) - 1px);
  --bs-accordion-active-color: var(--c-ink);
  --bs-accordion-active-bg: var(--c-surface-2);
  --bs-accordion-btn-focus-box-shadow: none;
}
/* Akordeon oku: Bootstrap 5.3 simgeyi renkli SVG olarak basar (açık modda açık öğe #052c65, koyu modda ikisi de #6ea8fe mavi —
   dördüncü vurgu rengi). Simge maske olur, rengi düğme metninden gelir (currentColor): her modda ve her zeminde metinle aynı ton.
   Şekil ve dönüş (transform) Bootstrap'ınki. (T08 isteği, G2 yeniden koşusunda doğrulandı: register/temel koyu → fill #6ea8fe.) */
.accordion-button::after {
  background-image: none;
  background-color: currentColor;
  -webkit-mask: var(--bs-accordion-btn-icon) center / contain no-repeat;
  mask: var(--bs-accordion-btn-icon) center / contain no-repeat;
}
.accordion-button:not(.collapsed)::after {
  -webkit-mask-image: var(--bs-accordion-btn-active-icon);
  mask-image: var(--bs-accordion-btn-active-icon);
}
/* Kota/ilerleme: info; kırmızı (brand) kota için kullanılmaz (§3.11) */
.progress, .progress-stacked {
  --bs-progress-bg: var(--c-surface-3);
  --bs-progress-bar-bg: var(--c-info);
  --bs-progress-border-radius: var(--radius-mini);
}

/* ============================================================================================================
   9) .list-item tabanı (preset kayıt satırı) ve boş durum (§3.2, §3.10)
   ============================================================================================================ */
.list-item {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  box-shadow: var(--sh-card);
}
.list-item:hover { border-color: var(--c-line-strong); box-shadow: var(--sh-card); }
.wstyle-empty-state, .wcp-empty-state { color: var(--c-ink-3); animation: none; }

/* ============================================================================================================
   10) WStyle'dan miras YASAK efektlerin nötrleştirilmesi (tasarım §2.2 (a)–(d); CLAUDE.md "Yasak: … blur, uçan kartlar";
       docs/tasarim-sistemi.md §7 "scroll animasyonu, sürekli döngü, hover'da yükselme/ölçek yok"). Ölçüm: cdp-shot.mjs yasak-efekt=0.
   ============================================================================================================ */

/* (a) Kaydırmayla belirme: guard'ın eklediği .js-reveal (layouts/default.tpl) içeriği gizleyip kaydırınca açıyordu → içerik hemen görünür */
.js-reveal [data-reveal] { opacity: 1; translate: none; transition: none; pointer-events: auto; }

/* (b) Kademeli giriş / dekoratif giriş ve sürekli döngü animasyonları (yükleme göstergeleri ve işlem geri bildirimi
       qa/izinli-animasyon.txt'te; onlara dokunulmaz) */
.dash-rise,
.dashx-kpi, .dashx-main > .dash-alerts .dash-alert,
.aff-rise, .rs-kpi,
.reveal,
.auth-stage-copy > *,
.carousel-item.active .hero-copy > *,
.hero-scroll .bi,
.brand-dock.is-looping .brand-track,
.nav-mega-status .status-dot, .footer-status .status-dot,
.dash-pulse,
.wcp-status-spin,
.dash-modal-ico, .dash-modal-ico::before, .dash-modal-ico::after,
.account-switcher-toggle.is-bloom,
.cookie-notice:not([hidden]) {
  animation: none;
}
/* Slayt hero'su: index.css başlangıç durumu `.hero-copy>*{opacity:0;translate:0 1rem}` ve heroRise yalnız `to` karesi taşıyor →
   animasyon kapanınca metin GÖRÜNMEZ kalırdı (ölçüldü: home/slayt, h1 opacity 0). WStyle'ın kendi reduce kuralının eşi: görünür + yerinde. */
.hero-copy > * { opacity: 1; translate: none; }

/* (c) Cam/blur: backdrop-filter kullanan her WStyle seçicisi → blur yok + OPAK token zemini */
.site-header { -webkit-backdrop-filter:none; backdrop-filter:none; background-color: var(--c-surface); }
.site-header.chrome-dark,
.chrome-overlay .site-header.chrome-dark.is-scrolled { background-color: var(--c-navy); }
.client-topbar { -webkit-backdrop-filter:none; backdrop-filter:none; background-color: var(--c-surface); }
.modal-backdrop.fade, .modal-backdrop.show { -webkit-backdrop-filter:none; backdrop-filter:none; }
.pay-locked-card { -webkit-backdrop-filter:none; backdrop-filter:none; background-color: var(--c-surface); }
.dash-balance-card { -webkit-backdrop-filter:none; backdrop-filter:none; background: var(--c-navy-2); border-color: var(--c-navy-line); }
.loader-sticky,
.tld-table .wcp-table-loader-body.loader-sticky { -webkit-backdrop-filter:none; backdrop-filter:none; background-color: var(--c-surface); }
.sms-contacts-overlay { -webkit-backdrop-filter:none; backdrop-filter:none; background-color: var(--c-surface); }
.customizer-veil { -webkit-backdrop-filter:none; backdrop-filter:none; }
/* Cam düğme → ikincil buton görünümü (opak; §2.2 (c)) */
.dash-btn-glass { -webkit-backdrop-filter:none; backdrop-filter:none; background: var(--c-surface); color: var(--c-ink); border-color: var(--c-line-strong); }
.dash-btn-glass:hover, .dash-btn-glass:focus-visible { background: var(--c-surface-2); color: var(--c-ink); }
/* Emniyet ağı: modül/eklenti CSS'i (ui:client.head.css) dahil hiçbir öğe arka plan bulanıklığı taşımaz */
*, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* (d) Kart kaldırma / ölçek: hover'da yükselme ve büyüme yok (§3.2, §7); renk/kenar geri bildirimi kalır */
.dash-stat:hover, .news-feature:hover, .plan-card:hover, .hover-lift:hover, .list-item:hover, .tld-tile:hover, .post-row:hover,
.sd-quick:hover, .sd-module-surface .wpanel-feature:hover, .dash-btn-glass:hover, .dash-btn-light:hover,
.checkout-split-aside .btn-primary:hover, .reference-card:hover .reference-cover-img, .sw-card:hover .sw-thumb img,
.star-btn:hover, .msg-star:hover, .notif-read-btn:hover::before {
  transform: none;
}

/* Anlam taşıyan küçük yönlendirme hareketi (ok simgesinin kayması) KALIR, azaltılmış harekette kapanır.
   translate özelliği yönden bağımsızdır; transform'lu RTL kurallarında ayna (scaleX(-1)) korunur. */
@media (prefers-reduced-motion: reduce) {
  /* (1) Kayma `translate` özelliğiyle yapılanlar: YALNIZ translate sıfırlanır — RTL aynası `transform` ile durur
         ([dir=rtl] .dashx-quick-caret{transform:scaleX(-1)}); transform:none onu hover'da bozardı (T03 düzeltme turu).
         WStyle'ın RTL ve data-dir eşleri LTR kuralından özgül (0,4,0)/(0,3,1) → her biri ayrıca yazılır. */
  .link-arrow:hover .bi, .stat-card:hover .stat-card-arrow, .dash-panel-link:hover .bi, .dashx-quick-item:hover .dashx-quick-caret,
  [dir=rtl] .link-arrow:hover .bi, [dir=rtl] .stat-card:hover .stat-card-arrow, [dir=rtl] .dash-panel-link:hover .bi,
  [dir=rtl] .dashx-quick-item:hover .dashx-quick-caret,
  .sd-tabbar-nav:hover i, .sd-tabbar-nav[data-dir]:hover i { translate: none; }
  /* (2) transform ile yapılanlar (aynasız) */
  .dash-link-new:hover .bi, [dir=rtl] .dash-link-new:hover .bi, [dir=rtl] .news-item:hover .news-item-arrow { transform: none; }
  .contact-card:hover .contact-arrow, .news-item:hover .news-item-arrow, .kb-group-all:hover i, .kb-article:hover .kb-article-arrow,
  .kb-back:hover i, .kb-article-nav-prev:hover .bi-arrow-left, .kb-article-nav-next:hover .bi-arrow-right,
  .reference-card:hover .reference-visit .bi, .icon-link-hover:hover > .bi, .icon-link-hover:focus-visible > .bi { transform: none; }
  [dir=rtl] .contact-card:hover .contact-arrow, [dir=rtl] .kb-group-all:hover i, [dir=rtl] .kb-article:hover .kb-article-arrow,
  [dir=rtl] .kb-back:hover i, [dir=rtl] .kb-article-nav-prev:hover .bi-arrow-left, [dir=rtl] .kb-article-nav-next:hover .bi-arrow-right,
  /* (3) transform + RTL aynası: ayna korunur, kayma sıfırlanır */
  [dir=rtl] .reference-card:hover .reference-visit .bi { transform: scaleX(-1); }
  /* Küresel azaltma (WStyle default.css'teki sıfırlamanın Seturack katmanındaki eşi; lint reduced-motion (3)) */
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================================================
   11) Yarıçap normalizasyonu (§2.3 "kart 8 · buton/alan 6 · rozet/mini 4 — başka yarıçap yok").
       WStyle yüzey CSS'i --wstyle-radius'u (köprüde 6 px) çarpanla kullanır: calc(var(--wstyle-radius) * k), k = .5 … 2.5 →
       3–15 px (ölçüldü: .dash-hero 12, .rs-kpi/.why-card 9,6, .contact-card 9, .badge 4,5 px). Upstream 5.0-beta.2'deki 82
       kuralın HEPSİ (tamamı `border-radius`) aynı seçiciyle, aynı özgüllükte ve sonra gelerek role göre kenetlenir:
         kart/panel/menü kutusu (k ≥ 1,15) → 8 · iç kontrol (segment düğmesi, arama butonu, kategori çipi) → 6 ·
         menü satırı (8 px menü içinde, boşluk ~4 px → eş merkezli) ve rozet/ikon/medya/iskelet/kod (k < 1) → 4.
       Üreteç kuralı: WStyle assets/css/*.css (bootstrap hariç) içinde `border-radius:calc(var(--wstyle-radius)*k)` taşıyan
       her kural; menü satırı = seçicide dropdown-item|drawer-(sub)link|notif-item|account-menu-balance|locale-tabs .nav-link.
       `calc(var(--wstyle-radius) - 1px|.1rem)` iç yarıçapları (k = 1 kapsayıcının içi) bilinçli bırakıldı.
       Düz `var(--wstyle-radius)` (k = 1, 6 px) kullanan kart kökleri yüzeye özgüdür: huni seçim kartları burada, diğerleri
       yüzey birimlerinin parçalarında (birim-notlari/T03.md "yarıçap"). Bootstrap'ın em tabanlı onay kutusu (.25em ≈ 3,75 px)
       bilinçli bırakıldı (.form-switch aynı seçiciyi paylaşır; hap biçimi bozulmasın).
   ============================================================================================================ */
.about-figure, .as-item-actions .dropdown-menu, .aff-stat, .apik-empty, .blog-comment-mod .dropdown-menu, .contact-map-frame,
.dash-hero, .locale-menu, .nav-dropdown, .nav-mega, .nav-mega-feature, .newsletter-panel, .contact-card, .domain-search,
.cta-band, .product-card, .stat-card, .list-toolbar, .list-item, .list-actions .dropdown-menu, .list-empty, .list-skel-row,
.dash-modal .modal-content, .store-tabs, .plans-rack .rack-shell, .why-card, .why-card:after, .quote-stage, .stat-deck,
.stat-ico, .post-row, .kb-search-panel, .kb-help-cta, .lv-notice, .news-card, .news-cta, .ref-shot, .ref-spec, .rsp-metric,
.rsp-step, .rsp-tier, .rsp-benefit, .rsp-calc, .rs-kpi, .sd-hero, .sd-menu, .sa-user-actions .dropdown-menu, .review-prompt,
/* huni seçim kartları (k = 1, kart rolü; yapılandırma · kategori · ödeme aynı köşeyle — tutarlılık) */
.option-card, .cat-card, .payment-option {
  border-radius: var(--radius-card);
}
.dash { --dash-tile-radius: var(--radius-card); }    /* .dash-stat, .dash-panel, .dash-balance-card (k = 1,6 → 9,6 px) */
.apik-cat, .domain-search .btn, .store-tabs .nav-link, .review-card {
  border-radius: var(--radius-btn);
}
.as-item-actions .dropdown-item, .blog-comment-mod .dropdown-item, .notif-item, .locale-menu .locale-tabs .nav-link,
.locale-menu .dropdown-item, .nav-dropdown .dropdown-item, .nav-mega .dropdown-item, .drawer-link, .drawer-sublink,
.account-menu-balance, .account-menu .dropdown-item, .list-actions .dropdown-item, .sd-menu .dropdown-item,
.sa-user-actions .dropdown-item {
  border-radius: var(--radius-mini);
}
.apik-method, .client-sidebar-mark, .customizer-logo-swap, .list-tile-ico, .chrome-dark .site-brand.logo-boxed .site-logo,
.option-media, .label-media, .badge, .captcha-code, .wstyle-skeleton, .site-brand.logo-needs-plate .site-logo, .post-row img,
.kb-code, .sd-spec-ico, .sa-perm-group-ico, .ticket-msg-text code {
  border-radius: var(--radius-badge);
}