/* OTOMATİK — elle düzenleme. v5/dev/derle.sh üretti: v5/src/css/features/NN-*.css parçalarının ad sırasıyla birleşimi (tasarım D-9). */

/* ---- 10-temel.css ---- */
/* features/10-temel.css — sahibi T03 (tasarım T03 kartı; docs/tasarim-sistemi.md §2.2, §3.10, §3.18, §3.19).
   Seturack'ın EK tipografi ve temel bileşen sınıfları (WStyle/Bootstrap sınıflarına dokunmaz; yalnız WStyle'ın .eyebrow'u
   Seturack kicker'ına giydirilir — aynı rol, 38 kullanım). derle.sh bu parçayı features.css'e ad sırasıyla birleştirir.
   Renk yalnız var(--c-*); hareket yok. */

/* ---- Kicker (§3.18): 32×3 px çizgi + mono uppercase; kırmızı METİN brand-text, lacivertte on-navy-2 + kırmızı çizgi ---- */
.kicker, .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-block-end: .75rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-brand-text);
}
.kicker::before, .eyebrow::before {
  content: "";
  flex: none;
  inline-size: 2rem;
  block-size: 3px;
  background-color: currentColor;
}
.kicker-inv, .chrome-dark .kicker, .chrome-dark .eyebrow, .plans-rack .eyebrow { color: var(--c-on-navy-2); }
.kicker-inv::before, .chrome-dark .kicker::before, .chrome-dark .eyebrow::before, .plans-rack .eyebrow::before { background-color: var(--c-brand); }
/* Ortalanmış bölüm başlığında kicker da ortalanır (WStyle .text-center kapsayıcıları) */
.text-center > .kicker, .text-center > .eyebrow { justify-content: center; }

/* ---- Numaralı bölüm (§0 aşı: "01 — Planlar"): <p class="kicker"><span class="kicker-num">01</span>Planlar</p> ---- */
.kicker-num { color: var(--c-ink-3); }
.kicker-num::after { content: "—"; margin-inline: .5em; color: var(--c-ink-4); }
.kicker-inv .kicker-num, .chrome-dark .kicker-num { color: var(--c-on-navy-3); }
.kicker-inv .kicker-num::after, .chrome-dark .kicker-num::after { color: var(--c-on-navy-3); }

/* ---- Başlık ölçeği (§2.2): Bricolage 600, optik boyut sabit; fiyat ASLA bu sınıflarla basılmaz ---- */
.h-display, .h-section, .h-page {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--bs-heading-color, var(--c-ink));
  text-wrap: balance;
}
.h-display { font-size: 2.625rem; line-height: 1.02; letter-spacing: -.025em; font-variation-settings: "opsz" 96; }   /* 42 → 56 → 68 */
.h-section { font-size: 1.875rem; line-height: 1.08; letter-spacing: -.02em; font-variation-settings: "opsz" 48; }   /* 30 → 38 */
.h-page { font-size: 1.75rem; line-height: 1.1; letter-spacing: -.02em; font-variation-settings: "opsz" 36; }        /* 28 → 34 */
@media (min-width: 640px) {
  .h-display { font-size: 3.5rem; }
  .h-section { font-size: 2.375rem; }
  .h-page { font-size: 2.125rem; }
}
@media (min-width: 1024px) {
  .h-display { font-size: 4.25rem; }
}
.h-card { font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 600; line-height: 1.35; letter-spacing: -.005em; }
.h-sub { font-family: var(--font-sans); font-size: .9375rem; font-weight: 600; line-height: 1.35; }
.meta { font-size: .75rem; line-height: 1.5; color: var(--c-ink-3); }
.chrome-dark .meta { color: var(--c-on-navy-2); }

/* ---- Fiyat ve veri (§2.2): fiyat Plex Sans 600 + tnum, satır kırmaz (ince boşluk dahil); veri Plex Mono ---- */
.price {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mono { font-family: var(--font-mono); font-size: .8125rem; font-variant-numeric: tabular-nums; }

/* ---- Tehlike bölgesi (§3.19): kart + brand-line çerçeve; satır = başlık + sonuç açıklaması + sağda .btn-danger.btn-sm ---- */
.danger-zone {
  background-color: var(--c-surface);
  border: 1px solid var(--c-brand-line);
  border-radius: var(--radius-card);
  box-shadow: var(--sh-card);
}
.danger-zone-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 1rem 1.25rem;
  border-block-end: 1px solid var(--c-line);
  color: var(--c-danger);
  font-size: .9375rem;
  font-weight: 600;
}
.danger-row {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1rem 1.25rem;
  border-block-end: 1px solid var(--c-line);
}
.danger-row:last-child { border-block-end: 0; }
.danger-row-title { margin: 0; color: var(--c-ink); font-size: .9375rem; font-weight: 600; }
@media (min-width: 640px) {
  .danger-row { flex-direction: row; align-items: center; justify-content: space-between; }
  .danger-row > .btn { flex: none; }
}

/* ---- Boş durum (§3.10): ortalanmış 40 px ikon (ink-4), 15 px başlık, 13 px açıklama, tek ikincil buton; illüstrasyon/emoji yok ---- */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--c-ink-3);
}
.empty-icon { font-size: 2.5rem; line-height: 1; color: var(--c-ink-4); }
.empty-title { margin: 0; color: var(--c-ink); font-size: .9375rem; font-weight: 600; }
.empty-text { margin: 0; max-inline-size: 28rem; font-size: .8125rem; }

/* ---- Bakım view'ı (views/maintenance.tpl — sahibi T03, §4.9): kırmızı yalnız aksiyon/seçim (§1); bilgi notu bilgi bandı dilinde ---- */
.maintenance-title { font-weight: 600; letter-spacing: -.025em; font-variation-settings: "opsz" 96; }
.maintenance-summary-head { background-color: var(--c-surface-2); }
.maintenance-summary-head > span i { color: var(--c-ink-3); }
.maintenance-note {
  color: var(--c-ink-2);
  background-color: var(--c-info-soft);
  border-inline-start: 4px solid var(--c-info);
  border-radius: var(--radius-btn);
}
.maintenance-note-icon { color: var(--c-info); }
/* Platform kredisi (views/maintenance.tpl, show_powered_by): Ek A muafiyeti için .footer-powered-band rolünü taşır; WStyle'ın
   site footer'ı için çizdiği tam genişlik lacivert bant görünümü bakım footer'ında satır içine döner (T03 düzeltme turu). */
.maintenance-footer .footer-powered-band { padding: 0; background: none; text-align: inherit; }

/* ---- 15-veri.css ---- */
/* ---------------------------------------------------------------------------------------------------------------------
 * 15-veri.css — Seturack · veri bileşenleri: st-btk (BTK 5651 tanıtıcı bilgiler) ve st-location (sabit lokasyon satırı).
 * Sahibi T04 (tasarım §2.2, §4.1, §4.6, §4.9, D-17). features.css'e derle.sh ile birleşir (D-9); renk hex'i yok (tokens.css'te).
 *
 * Renk: bileşen aynı markup'la açık yüzeyde (iletişim, panel/checkout altı, giriş formu, bakım altı) ve lacivert footer'da
 * (.chrome-dark) basılır. Renkler bağlamın KENDİ token'larından gelir (bridge.css: --wstyle-* → --c-*), yüzde karışımından değil:
 *   açık yüzey   değer = --wstyle-heading-color (ink)      etiket/ikincil = --wstyle-muted-color (ink-3; AA kart 5,52 · zemin 5,05)
 *   .chrome-dark değer = --wstyle-chrome-color (on-navy)  etiket/ikincil = --wstyle-chrome-muted (on-navy-2)
 * Koyu modda aynı değişkenler koyu token'lara döner (tokens.css :root[data-bs-theme=dark]). Gövde metni bağlamdan miras alınır.
 * Hareket yok (transition/animation kullanılmaz).
 * ------------------------------------------------------------------------------------------------------------------- */

.st-btk,
.st-location {
    --st-veri-ink: var(--wstyle-heading-color, currentColor);
    --st-veri-muted: var(--wstyle-muted-color, currentColor);
    --st-veri-line: var(--wstyle-border-color, currentColor);
    --st-veri-mono: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.chrome-dark .st-btk,
.chrome-dark .st-location {
    --st-veri-ink: var(--wstyle-chrome-color, currentColor);
    --st-veri-muted: var(--wstyle-chrome-muted, currentColor);
    --st-veri-line: var(--wstyle-chrome-border, currentColor);
}

/* --- st-btk · ortak ------------------------------------------------------------------------------------------------ */
.st-btk {
    color: inherit;
    font-size: .875rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.st-btk a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}
.st-btk a:hover {
    color: var(--st-veri-ink);
}
.st-btk a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}
.st-btk-tel {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --- st-btk · full: başlık + unvan + satırlar + adres/e-posta/telefon (footer, iletişim sayfası) -------------------- */
.st-btk--full {
    display: grid;
    gap: .5rem;
    max-width: 40rem;
}
.st-btk--full > * {
    margin: 0;
}
.st-btk-title {
    font-family: var(--st-veri-mono);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--st-veri-muted);
}
.st-btk-name {
    font-weight: 600;
    font-size: .9375rem;
    color: var(--st-veri-ink);
}
.st-btk-lines {
    list-style: none;
    padding: 0;
}
.st-btk-list {
    display: grid;
    gap: .375rem;
    margin: .25rem 0 0;
    padding-top: .625rem;
    border-top: 1px solid var(--st-veri-line);
}
.st-btk-title + .st-btk-list {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.st-btk-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 1rem;
}
.st-btk-row dt {
    font-family: var(--st-veri-mono);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--st-veri-muted);
    padding-top: .15rem;
}
.st-btk-row dd {
    margin: 0;
    color: var(--st-veri-ink);
}
@media (min-width: 36rem) {
    .st-btk-row {
        grid-template-columns: 6.5rem minmax(0, 1fr);
    }
    .st-btk-row dd {
        grid-column: 2;
    }
    .st-btk-row dt {
        grid-row: 1 / span 9;
    }
}

/* --- st-btk · compact: tek satır (panel, checkout, giriş; bakımda bütün alanlar) ---------------------------------- */
/* Ayraç karakteri yok: dar ekranda kayan satırın başına "·" düşmesin diye öğeler yalnız boşlukla ayrılır (unvan koyu, bağlantı altı çizili). */
.st-btk--compact {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 1rem;
    row-gap: .125rem;
    margin: 0;
    font-size: .8125rem;
    color: var(--st-veri-muted);
}
.st-btk--compact .st-btk-name {
    color: var(--st-veri-ink);
    font-weight: 500;
    font-size: inherit;
}
/* Bakım: bütün alanlar basılır (iletişim sayfasına ulaşılamaz) — alt alta. */
.st-btk--compact[data-st-btk-yer="bakim"] {
    display: grid;
    row-gap: .125rem;
}
.st-btk--compact[data-st-btk-yer="bakim"] .st-btk-name {
    margin-bottom: .125rem;
}

/* --- Yerleşim: T03'ün include noktaları (layouts/auth.tpl, views/maintenance.tpl) — ikisinde de .container yok ----- */
/* Giriş/kayıt: form sütununun altında, formun kendi sütun genişliğinde (WStyle auth.css .auth-form-inner 25rem / -wide 34rem). */
.auth-form > .st-btk[data-st-btk-yer="auth"] {
    inline-size: 100%;
    max-inline-size: 25rem;
    margin-inline: auto;
    margin-block-start: 1.5rem;
}
.auth-form:has(.auth-form-inner-wide) > .st-btk[data-st-btk-yer="auth"] {
    max-inline-size: 34rem;
}
/* Bakım: footer'daki .container ile aynı hiza (Bootstrap 5.3 kapsayıcı genişlikleri ve yarım oluk). */
.maintenance-footer > .st-btk[data-st-btk-yer="bakim"] {
    box-sizing: border-box;
    inline-size: 100%;
    margin-inline: auto;
    padding-inline: calc(var(--bs-gutter-x, 1.5rem) * .5);
    padding-block: 0 1rem;
}
@media (min-width: 576px) {
    .maintenance-footer > .st-btk[data-st-btk-yer="bakim"] { max-inline-size: 540px; }
}
@media (min-width: 768px) {
    .maintenance-footer > .st-btk[data-st-btk-yer="bakim"] { max-inline-size: 720px; }
}
@media (min-width: 992px) {
    .maintenance-footer > .st-btk[data-st-btk-yer="bakim"] { max-inline-size: 960px; }
}
@media (min-width: 1200px) {
    .maintenance-footer > .st-btk[data-st-btk-yer="bakim"] { max-inline-size: 1140px; }
}
@media (min-width: 1400px) {
    .maintenance-footer > .st-btk[data-st-btk-yer="bakim"] { max-inline-size: 1320px; }
}

/* --- st-location: "Lokasyon  <ad> · <kod>" (değerler veriden) --------------------------------------------------------- */
.st-location {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: .75rem;
    row-gap: .25rem;
    font-size: .875rem;
    line-height: 1.5;
}
.st-location-label {
    font-family: var(--st-veri-mono);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--st-veri-muted);
}
.st-location-value {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: .5rem;
}
.st-location-name {
    font-weight: 500;
    color: var(--st-veri-ink);
}
.st-location-code {
    font-family: var(--st-veri-mono);
    font-size: .8125rem;
    color: var(--st-veri-muted);
}
.st-location-code::before {
    content: "\00B7";
    content: "\00B7" / "";
    margin-inline-end: .5rem;
}
.st-location-list {
    display: flex;
    flex-wrap: wrap;
    column-gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.st-location-list > li + li::before {
    content: "\00B7";
    content: "\00B7" / "";
    margin-inline-end: .5rem;
    color: var(--st-veri-muted);
}

/* ---- 20-kabuk.css ---- */
/* features/20-kabuk.css — Seturack · kabuk (public header/topbar/drawer/footer, bantlar, çerez bildirimi; panel ve huni kabuğu).
   Sahibi T05 (tasarım §4.1, D-16; docs/tasarim-sistemi.md §1, §3.14, §3.15, §3.17, §5, §7). derle.sh bu parçayı features.css'e
   ad sırasıyla birleştirir (D-9). Renk yalnız var(--c-*) (hex yok — lint); markup'a dokunulmaz, WStyle sınıfları yalnız boyanır.
   Hareket EKLENMEZ: WStyle'ın kendi geçişleri components.css'teki küresel reduce sıfırlamasıyla kapanır.

   Başlık kararı (T03 notu "header lacivert/yüzey"): ön yüz başlığı WStyle'daki gibi LACİVERT kalır (.site-header.chrome-dark).
   Gerekçe: WStyle'ın sayfa üstü sistemi (page-hero, hero-slider, `chrome-overlay`) başlığı lacivert hero'nun üstüne bindirir; durum
   şeridi + başlık + hero tek lacivert blok olarak okunur (tasarım sistemi §1 "lacivert yüzey sayfa başına ≤ 2 bant + footer").
   Beyaz başlık bu sayfalarda lacivert/beyaz/lacivert şerit üretir ve bindirmeyi (T06/T07/T11/T13 yüzeyleri) kapatmayı gerektirirdi.
   Tek birincil kuralı: başlıktaki tek dolu düğme "Giriş Yap"/"Müşteri Paneli" — .btn-secondary, lacivertte ters (açık zemin + navy
   metin); kırmızı dolgu sayfanın kendi birincil eylemine kalır. */

/* ============================================================================================================
   1) Durum şeridi (topbar, §3.15): mono, kısa; yalnız veri (telefon/e-posta BTK süzgecinden, destek bağlantısı)
   ============================================================================================================ */
.topbar { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .01em; }
/* Bootstrap .py-2 yardımcı sınıfı !important taşır; şerit ≈ 32 px olsun diye yalnız burada eşit güçle ezilir (§3.15) */
.topbar > .container.py-2 { padding-block: .25rem !important; }
.topbar-link { padding-block: .25rem; }
.topbar-link .bi, .topbar-icon .bi { color: var(--c-on-navy-3); }
.topbar-link:hover .bi { color: inherit; }
/* İçeriksiz şerit basılmaz (sosyal bağlantı, iletişim, destek ve kanca çıktısı yoksa): boş lacivert bant kalmasın */
.topbar:not(:has(.topbar-icon, .topbar-link, .ms-auto > :not(.topbar-link))) { display: none; }

/* ============================================================================================================
   2) Başlık (§3.15): menü bağlantıları, tek dolu düğme, dil/para, sepet sayacı, mega menü (gradyan yok)
   ============================================================================================================ */
.site-nav .nav-link { border-radius: var(--radius-btn); }
.st-header-cta { white-space: nowrap; }
.locale-toggle { border-radius: var(--radius-btn); font-family: var(--font-mono); font-size: .75rem; }
.st-header-locale .locale-toggle { padding-inline: .625rem; }
/* Sepet sayacı (lacivertte secondary = brand, beyaz metin 4,84): ikon düğmesinin zemininden 2 px lacivert halkayla ayrılır
   (T03 notu: düğme zemini / sayaç 2,45:1) */
.site-header .cart-count { box-shadow: 0 0 0 2px var(--c-navy); font-family: var(--font-mono); }
/* Mega menü öne çıkan kartı: WStyle'ın kırmızı/lacivert radial parıltısı yok (§1 "gradyan yok") */
.nav-mega-feature::before, [dir=rtl] .nav-mega-feature::before { content: none; }
.nav-mega-eyebrow { font-family: var(--font-mono); font-weight: 400; color: var(--c-on-navy-2); }
.nav-mega-title { font-weight: 600; }
.nav-mega-label { font-family: var(--font-mono); font-weight: 500; color: var(--c-ink-3); }
/* Menü satırı: pembe (primary-subtle) yerine nötr yüzey — kırmızı yalnız aksiyon/seçim (§1); menü dili components.css §8 ile aynı */
.nav-dropdown .dropdown-item:hover,
.nav-dropdown .dropdown-item.active,
.nav-dropdown .dropdown-sub:hover > .dropdown-item,
.nav-dropdown .dropdown-sub:focus-within > .dropdown-item { background-color: var(--c-surface-3); color: inherit; }
.nav-dropdown .icon-disc { background-color: var(--c-surface-3); color: var(--c-ink-2); }
.nav-dropdown .dropdown-item:hover .icon-disc,
.nav-mega .dropdown-item:hover .icon-disc,
.nav-mega .dropdown-item:focus-visible .icon-disc { background-color: var(--c-surface); color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-line); }

/* ============================================================================================================
   3) Mobil çekmece (drawer): nötr vurgu, başlıkla aynı eylem dili
   ============================================================================================================ */
.site-drawer .offcanvas-header { border-block-end-color: var(--c-line); }
.drawer-link:hover, .drawer-link.active, .drawer-sublink:hover { background-color: var(--c-surface-3); color: var(--c-ink); }
.drawer-link > .bi:first-child { color: var(--c-ink-3); }
.drawer-sub { border-inline-start-color: var(--c-line); }
.site-drawer .btn.dropdown-toggle { font-family: var(--font-mono); font-size: .75rem; }   /* "TR · TRY" veri: mono (başlık/footer ile aynı) */

/* ============================================================================================================
   4) Dil/para seçici (components/locale-switcher.tpl): nötr seçili satır, onay işareti kırmızı (seçim); tek seçenekte sabit bilgi
   ============================================================================================================ */
.locale-menu .dropdown-item:hover,
.locale-menu .dropdown-item.active { background-color: var(--c-surface-3); }
.locale-menu .dropdown-item.active { color: var(--c-ink); font-weight: 500; }
.st-locale-static {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--c-ink-3);
  white-space: nowrap;
}
.chrome-dark .st-locale-static { color: var(--c-on-navy-2); }
.st-locale-sep { color: var(--c-ink-4); }
.chrome-dark .st-locale-sep { color: var(--c-on-navy-3); }

/* ============================================================================================================
   5) Sayfa başı (partials/page-hero.tpl): düz lacivert, parıltı yok; başlık display fontta 600 (Bricolage yalnız 600)
   ============================================================================================================ */
.page-hero-plain, [dir=rtl] .page-hero-plain { background-image: none; }
.page-hero { border-block-end: 1px solid var(--c-navy-line); }     /* koyu modda navy/canvas 1,04:1 — ayrışma kenarla (§5.2) */
.page-hero-title { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; }
.page-hero-lead { color: var(--c-on-navy-2); }

/* ============================================================================================================
   6) Bantlar (partials/band-contact.tpl, band-newsletter.tpl)
   ============================================================================================================ */
.contact-value { font-weight: 600; }
.contact-label { font-family: var(--font-mono); font-weight: 500; letter-spacing: .08em; }
/* Bülten paneli: lacivert kart, büyük yumuşak gölge yok (§1 "kart 1 px kenar + 1 px gölge") */
.newsletter-panel { border-color: var(--c-navy-line); box-shadow: var(--sh-card); }
.newsletter-kicker { font-family: var(--font-mono); font-weight: 400; letter-spacing: .12em; color: var(--c-on-navy-2); }

/* ============================================================================================================
   7) Footer (§3.17, D-16): lacivert, dünya haritası deseni yok; BTK bloğu kendi şeridinde; durum bağlantısı yalnız status_url ile
   ============================================================================================================ */
.site-footer::before { display: none; }
.site-footer { border-block-start: 1px solid var(--c-navy-line); }
.site-footer .footer-heading {
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--c-on-navy-2);
}
/* BTK şeridi: footer-top ile aynı ızgara (21rem | 1fr, 5rem aralık) — unvan ve kurumsal satırlar marka sütununun, adres/e-posta/
   telefon listesi menü sütunlarının hizasında. Bileşenin kendi tek sütun düzeni (15-veri.css) dar ekranda geçerli kalır. */
.footer-btk { padding-block: 2rem; border-block-start: 1px solid var(--c-navy-line); }
@media (min-width: 992px) {
  .footer-btk .st-btk--full {
    max-width: none;
    grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
    column-gap: 5rem;
    align-items: start;
  }
  .footer-btk .st-btk--full > :not(.st-btk-list) { grid-column: 1; }
  .footer-btk .st-btk-list { grid-column: 2; grid-row: 1 / span 4; margin: 0; padding-top: 0; border-top: 0; }
}
.st-footer-status .bi { font-size: .75em; }
/* Yukarı dön düğmesi bir aksiyon değil, yön kısayoludur: kırmızı dolgu yerine ikincil (tek birincil kuralı; T03 notu) */
.scroll-top.btn-primary {
  --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);
  box-shadow: var(--sh-card);
}

/* ============================================================================================================
   8) Çerez bildirimi (partials/cookie-notice.tpl): kabul ve ret EŞİT ağırlıkta (karanlık örüntü yok — UX "Güven");
      tercih kaydı tek dolu düğme (lacivert; koyuda ters). Kart dili: 8 px, pop gölgesi, kırmızı tonlu gölge yok.
   ============================================================================================================ */
.cookie-notice-card { border-color: var(--c-line); border-radius: var(--radius-card); box-shadow: var(--sh-pop); }
.cookie-btn { border-radius: var(--radius-btn); font-weight: 500; }
.cookie-btn-solid, .cookie-btn-ghost { background: var(--c-surface); border-color: var(--c-line-strong); color: var(--c-ink); }
.cookie-btn-solid:hover, .cookie-btn-ghost:hover { background: var(--c-surface-2); color: var(--c-ink); }
.cookie-btn-solid[data-cookie-action="save"] { background: var(--c-navy); border-color: var(--c-navy); color: var(--c-on-navy); }
.cookie-btn-solid[data-cookie-action="save"]:hover { background: var(--c-navy-2); border-color: var(--c-navy-2); color: var(--c-on-navy); }
:root[data-bs-theme=dark] .cookie-btn-solid[data-cookie-action="save"],
:root[data-bs-theme=dark] .cookie-btn-solid[data-cookie-action="save"]:hover { background: var(--c-on-navy); border-color: var(--c-on-navy); color: var(--c-navy); }
.cookie-btn:focus-visible { outline-color: var(--c-focus); }
.cookie-btn-bare { color: var(--c-ink-3); }
.cookie-cat-input { accent-color: var(--c-brand); }

/* ============================================================================================================
   9) Panel kabuğu (§3.14): kenar çubuğu açık modda da lacivert; aktif öğe white/8 + sol 3 px kırmızı çubuk; sayaç mono
   ============================================================================================================ */
.client-sidebar .client-sidebar-link.active {
  background-color: color-mix(in srgb, var(--c-on-navy) 8%, transparent);
  color: var(--c-on-navy);
}
.client-sidebar-badge, .client-topbar-badge, .cart-count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.client-sidebar-grouplabel { font-family: var(--font-mono); font-weight: 500; letter-spacing: .1em; }
/* Panel footer'ı: kısa BTK satırı ayrı satırda, footer metniyle aynı ölçekte */
.client-footer-btk { padding-block: 0 .9rem; }
.client-footer-btk .st-btk--compact { font-size: .75rem; }

/* ============================================================================================================
   10) Huni kabuğu (checkout-header/footer): adım göstergesi — etkin adım lacivert numara dairesi (§3.13; kırmızı yalnız sayfanın
       "Devam/Öde" eylemi), tamamlanan adım yeşil onay; numaralar mono
   ============================================================================================================ */
.checkout-step-num { font-family: var(--font-mono); font-size: .75rem; }
.checkout-step.is-active .checkout-step-num { background-color: var(--c-navy); border-color: var(--c-navy); color: var(--c-on-navy); }
:root[data-bs-theme=dark] .checkout-step.is-active .checkout-step-num { background-color: var(--c-on-navy); border-color: var(--c-on-navy); color: var(--c-navy); }
.checkout-step.is-done { color: var(--c-ink-2); }
.checkout-step.is-done .checkout-step-num { background-color: var(--c-ok-soft); border-color: transparent; color: var(--c-ok); }
.checkout-shell-footer-text .st-btk--compact { font-size: .75rem; }

/* ---- 30-anasayfa.css ---- */
/* features/30-anasayfa.css — sahibi T06 (tasarım §4.2, §4.3; docs/tasarim-sistemi.md §1, §2.2, §3.18, §7; docs/canli-gecikme-olcumu.md §4).
   Ana sayfa yüzeyi: slaytsız giriş (st-hero), plan rafı, WStyle ana sayfa bölümlerinin Seturack diline çekilmesi (markup'a dokunmadan,
   yalnız CSS) ve canlı gecikme kartı (st-network). derle.sh bu parçayı features.css'e ad sırasıyla birleştirir.
   Kurallar: renk yalnız var(--c-*) (hex yok — lint); kart 8 · buton/alan 6 · rozet/mini 4 px; gradyan, parıltı, blur, uçan kart,
   sürekli döngü YOK (CLAUDE.md "Yasak"; tasarım sistemi §1 "gradyan yok", §7); her hareket prefers-reduced-motion: no-preference içinde.
   Kapsam: index.css (yalnız ana sayfada yüklenir) seçicileri `.plans-rack …`, `.why-card`, `.band-visual`, `.stat-…`, `.quote-…`,
   `.brand-dock`, `.tld-…`, `.post-row`, `.hero-slide…` — plan kartı/satırının GENEL görünümü T07'nindir (plan-grid/plan-rows);
   burada yalnız lacivert raf bağlamındaki (.plans-rack) farklar yazılır. */

/* ============================================================================================================
   1) Slaytsız giriş (components/home/st-hero.tpl): açık zemin, tek h1 (h-display), tek birincil düğme. Lacivert yüzey bütçesi
      (sayfa başına ≤ 2 bant + footer — §1) plan rafına ve "hakkımızda" bandına kalır; giriş bu yüzden açık.
   ============================================================================================================ */
.st-hero {
  padding-block: 2.5rem 3rem;
  background-color: var(--c-canvas);
  border-block-end: 1px solid var(--c-line);
}
.st-hero-copy { max-inline-size: 48rem; }
.st-hero .kicker { margin-block-end: 1rem; }
.st-hero-title {
  margin: 0 0 1rem;
  max-inline-size: 18ch;
  color: var(--c-ink);
}
.st-hero-lead {
  margin: 0;
  max-inline-size: 36rem;
  font-size: 1.0625rem;                                 /* .lead 17 px (§2.2) */
  line-height: 1.625;
  color: var(--c-ink-2);
}
.st-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-block-start: 2rem;
}
@media (min-width: 1024px) {
  .st-hero { padding-block: 4.5rem 5rem; }
}

/* ============================================================================================================
   2) Plan rafı (components/home/plans.tpl, index.css .plans-rack): lacivert bant DÜZ — WStyle'ın kırmızı/yeşil radial parıltıları
      ve artı-işareti deseni (::before maske) kaldırılır. Raf kabuğu navy-2 (bant navy) → popüler kart (navy + kırmızı kenar, §3.12)
      kabuktan ayrışır; köprüde chrome-bg-deep = chrome-bg olduğu için WStyle'ın derinlik farkı yoktu.
   ============================================================================================================ */
.plans-rack { background-image: none; }
.plans-rack::before { content: none; }
.plans-rack .rack-shell {
  background-color: var(--c-navy-2);
  border-color: var(--c-navy-line);
  box-shadow: none;
}
.plans-rack .rack-bar { border-block-end-color: var(--c-navy-line); }
/* Sekmeler ve dönem anahtarı: seçili = ters (on-navy zemin + navy metin), aynı dil (§3.5 .seg-on'un lacivert yüzeydeki karşılığı) */
.plans-rack .nav-pills .nav-link { color: var(--c-on-navy-2); border-radius: var(--radius-btn); }
.plans-rack .nav-pills .nav-link:hover { color: var(--c-on-navy); }
.plans-rack .nav-pills .nav-link.active { background-color: var(--c-on-navy); color: var(--c-navy); }
.plans-rack .billing-toggle {
  border-color: var(--c-navy-line);
  border-radius: var(--radius-btn);
  background-color: var(--c-navy);
}
.plans-rack .billing-toggle .billing-option { border-radius: var(--radius-mini); color: var(--c-on-navy-2); }
.plans-rack .billing-toggle .billing-option:hover { color: var(--c-on-navy); }
.plans-rack .billing-toggle .billing-option.active { background-color: var(--c-on-navy); color: var(--c-navy); }
/* Tek sekmede çubuk: sabit lokasyon satırı (T04 st-location) solda, dönem anahtarı sağda; dar ekranda alt alta */
.plans-rack .rack-bar > .st-location { margin: 0; }
/* Popüler plan (kart ve satır): navy + kırmızı kenar; başlık on-navy (WStyle'ın secondary %55 karışımı köprüde pembe tona dönüyordu);
   ışık izi (::after, --spot-x/y) ve radial parıltı (::before) yok */
.plans-rack .plan-card.plan-popular,
.plans-rack .plan-row.plan-popular {
  --bs-heading-color: var(--c-on-navy);
  background-color: var(--c-navy);
  border-color: var(--c-brand);
  box-shadow: var(--sh-card);
}
.plans-rack .plan-card.plan-popular::before,
.plans-rack .plan-card.plan-popular::after,
.plans-rack .plan-row.plan-popular::after { content: none; }
/* Kart düğmeleri ikincil (yüzey + line-strong); WStyle rafta pembe dolgu (primary-subtle) veriyordu — kırmızı yalnız aksiyon/seçim (§1) */
.plans-rack .plan-card .btn-soft,
.plans-rack .plan-row .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);
}
.plans-rack .plan-row.plan-popular .btn-soft {
  --bs-btn-color: var(--c-on-navy);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--c-on-navy-3);         /* kontrol sınırı ≥ 3:1 (1.4.11): navy-line navy'de kayboluyordu */
  --bs-btn-hover-color: var(--c-on-navy);
  --bs-btn-hover-bg: var(--c-navy-2);
  --bs-btn-hover-border-color: var(--c-on-navy-3);
  --bs-btn-active-color: var(--c-on-navy);
  --bs-btn-active-bg: var(--c-navy-3);
  --bs-btn-active-border-color: var(--c-on-navy-3);
}
/* Popüler planın düğmesi rafta TERS (on-navy zemin + navy metin; WStyle .btn-light) kalır: ana sayfanın tek birincil düğmesi girişteki
   "Planları gör"dür ve ilk ekranda raf da görünür (1280×900'de popüler satır ~700 px). Katalogda (T07, 40-katalog-funnel.css) aynı düğme
   sayfanın tek birincil aksiyonu olarak brand dolgu alır; bu kural yalnız ana sayfa rafını (0,4,0) geri çevirir. Popüler satırın diğer
   ayrıntıları (ayrıntı paneli, çipler, fatura tablosu) T07'nin genel kurallarındandır — tek kaynak. */
.plans-rack .plan-card.plan-popular .btn-light,
.plans-rack .plan-row.plan-popular .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);
}
.plans-rack .link-arrow, .plans-rack .link-arrow:hover { color: var(--c-on-navy); }

/* ============================================================================================================
   3) Diğer WStyle bölümleri — markup korunur, yalnız boya (tasarım §4.2). Panel tarafı (PN-2) bölümlerin çoğunu kapatır; açık
      kalan bölüm yine Seturack dilinde görünsün.
   ============================================================================================================ */

/* 3a) Slayt hero'su (slides panel verisi): dekoratif radial parıltı + nokta deseni yok; görsel "Ken Burns" yakınlaşması yok
       (9 sn scale geçişi — sürekli hareket, §7). Metin görünürlüğü T03'te (.hero-copy > *). */
.hero-slide-a::before, .hero-slide-b::before, .hero-slide-c::before { content: none; }
.hero-slide .hero-media, .hero-slider.is-booted .carousel-item.active .hero-media { scale: none; transition: none; }
.hero-slider .hero-title { font-weight: 600; letter-spacing: -.025em; }   /* .hero-title başka view'larda da var (page-hero): kapsamlı */
.hero-slider .hero-nav-btn { border-radius: var(--radius-btn); }
/* Slaytın tek eylemi birincil düğmedir (ekranda tek birincil aksiyon — CLAUDE.md UX; st-hero ile aynı dil). Markup WStyle'ın .btn-soft'u. */
.hero-slider .hero-copy .btn-soft {
  --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);
}

/* 3b) Alan adı bandı: radial zemin parıltısı yok; TLD kutuları kart dili (8 px, 1 px kenar), fiyat mürekkep (fiyat kırmızı değil) */
.domain-band { background-image: none; }
.tld-tile { border-radius: var(--radius-card); background-color: var(--c-surface); }
.tld-tile:hover { border-color: var(--c-line-strong); box-shadow: var(--sh-card); }
.tld-tile .tld-name, .tld-tile-more .tld-more-count { font-weight: 600; }
.tld-tile .tld-price { color: var(--c-ink); font-weight: 600; }
.tld-tile-more { background-color: transparent; }
/* Alan adı arama kutusu (.domain-search, default.css) — ORTAK bileşen: ana sayfa domain-check + views/domain.tpl ve
   views/license-verification.tpl (T13 isteği: tek kaynak burada, üç yüzey aynı görünür). WStyle'ın büyük yumuşak gölgesi
   (shadow-lg) ve kırmızı hale (primary %6, odakta %12) yok (§1 "büyük yumuşak gölge yok", kırmızı yalnız aksiyon/odak).
   Kutu tek bir form alanıdır (içindeki input kenarsız): kenar line-input (1.4.11, 3,48:1), odak = form alanı dili
   (components.css §2 (c)): kenar brand + 2 px brand/25 halka. Yarıçaplar components.css §11'de (kutu 8 · düğme 6). */
.domain-search {
  border-color: var(--c-line-input);
  box-shadow: none;
}
.domain-search:focus-within {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 2px rgba(var(--c-brand-rgb), .25);
}
/* Hatalı giriş (license-verification.css .domain-search.is-invalid: shadow-lg + danger hale) → geçersiz form alanı dili: kenar danger,
   halka yalnız odakta. Aynı özgüllük (0,2,0); Seturack katmanı yüzey CSS'inden sonra yüklenir (D-4). */
.domain-search.is-invalid {
  border-color: var(--c-danger);
  box-shadow: none;
}
.domain-search.is-invalid:focus-within { box-shadow: 0 0 0 2px rgba(var(--c-danger-rgb), .25); }
/* Ana sayfada Seturack girişi birincil düğmesiyle basılıysa (slayt yok) alan adı bandı ilk ekranda girişin hemen altında kalır
   (home/tam 1280×900): iki dolu kırmızı düğme olmasın — "Ara" önemli ama birincil olmayan lacivert düğme (tasarım sistemi §3.1
   .btn-navy; koyu modda ters — 70-hizmet.css .sd-cp-launch ile aynı dil). Kapsam yalnız ana sayfa bandı: views/domain.tpl ve
   license-verification.tpl'de (T13) aynı kutunun düğmesi sayfanın tek birincil aksiyonu olarak kırmızı kalır. :has() desteklemeyen
   tarayıcıda kural düşer, düğme kırmızı kalır (kabul edilen bozulma). Markup ve .btn-primary sınıfı aynen (§2.5-5). */
.st-hero:has([data-st-primary]) ~ .domain-band .domain-search .btn-primary {
  --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);
}
:root[data-bs-theme=dark] .st-hero:has([data-st-primary]) ~ .domain-band .domain-search .btn-primary {
  --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);
}

/* 3c) "Neden biz" kartları: köşe parıltısı (::before) ve fareyi izleyen kenar ışığı (::after) yok; ikon diski nötr (çok renkli/
       gradyan ikon yok — §1). Kart 1 px kenar + 1 px gölge; hover yalnız kenar rengi. */
.why-card::before, .why-card::after { content: none; }
.why-card { box-shadow: var(--sh-card); }
.why-card:hover { border-color: var(--c-line-strong); box-shadow: var(--sh-card); }
.why-card-ico {
  background-image: none;
  background-color: var(--c-surface-2);
  color: var(--c-ink-2);
  box-shadow: inset 0 0 0 1px var(--c-line);
}

/* 3d) "Hakkımızda" bandı (lacivert): radial parıltılar yok; üst etiket Seturack kicker'ı (mono, kırmızı çizgi) */
.band-visual::before { content: none; }
.band-visual .hero-eyebrow {
  gap: .75rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--c-on-navy-2);
}
.band-visual .hero-eyebrow::before { inline-size: 2rem; block-size: 3px; border-radius: 0; background-color: var(--c-brand); }
.band-visual .band-title { font-weight: 600; }

/* 3e) Rakam bandı: dev filigran ikon (dekorasyon) yok; rakam Plex Sans 600 + tnum (büyük rakam display fontla basılmaz — §2.2) */
.stat-band .stat-watermark { display: none; }
/* .stat-ico/.stat-value panelde de var (dashboard-hero, affiliate, sms — başka birimler): yalnız rakam bandında */
.stat-band .stat-ico { color: var(--c-on-navy-2); background-color: var(--c-navy-2); }
.stat-band .stat-deck { box-shadow: none; }
.stat-band .stat-value { font-family: var(--font-sans); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* 3f) Müşteri görüşleri: dev tırnak süsü yok; avatar/çip nötr (pembe dolgu yok); puan rakamı Plex Sans 600 */
.quote-stage::before { content: none; }
.quote-stage { box-shadow: var(--sh-card); }
.quote-avatar, .quote-chip-ava { color: var(--c-ink-2); background-color: var(--c-surface-3); }
.quote-picker [data-bs-target] { border-radius: var(--radius-btn); }
.quote-picker [data-bs-target]:hover { background-color: var(--c-surface-3); }
.quote-score-num { font-family: var(--font-sans); font-weight: 600; }
.quote-text { font-weight: 500; }

/* 3g) Platform logoları: kayan şerit (marquee) yerine sarmalı ızgara. index.js hareketli kipte seti çoğaltır (aria-hidden kopyalar)
       ve .is-looping ekler; animasyon T03'te kapalı → kopyalar gizlenir, set satırlara sarılır, kenar solma maskesi kalkar. */
.brand-dock { -webkit-mask-image: none; mask-image: none; }
.brand-dock .brand-track { inline-size: auto; }
.brand-dock .brand-set[aria-hidden] { display: none; }
.brand-dock .brand-set {
  inline-size: 100%;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 3rem;
  padding-inline-end: 0;
}

/* 3h) Duyuru/blog satırı: hover yalnız kenar (pembe karışım yok), başlık rengi sabit */
.post-row:hover { border-color: var(--c-line-strong); }
.post-row .post-title { font-weight: 600; }
.post-row:hover .post-title { color: var(--c-ink); }

/* 3i) Bant arka plan videosu ve slayt videosu: azaltılmış harekette oynatılmaz (döngülü video sürekli harekettir — §7).
       Video kaldırılınca bant düz lacivert zeminde kalır (görsel varsa poster yerine bandın kendi görseli yoktur). */
@media (prefers-reduced-motion: reduce) {
  video.band-bg-media, video.hero-media { display: none; }
}

/* 3j) Geçiş süreleri tasarım sistemine (≤ 250 ms; renk 150 ms) — WStyle'ın 0,5 sn görüş geçişi ve kart geçişleri */
@media (prefers-reduced-motion: no-preference) {
  .quote-stage .carousel-item { transition: opacity var(--dur-move) var(--ease-out); }
  .why-card, .tld-tile, .post-row { transition: border-color var(--dur-color) var(--ease-out), box-shadow var(--dur-color) var(--ease-out); }
}

/* ============================================================================================================
   4) Ağ bölümü — canlı gecikme kartı (components/home/st-network.tpl + assets/js/seturack/latency.js).
      Durum renkleri ok/info/warn/danger ölçüm kalitesini gösterir (DURUM rengi; marka aksiyon rengi değil — canli-gecikme-olcumu.md §4).
      Eşikler latency.js ile aynı: < 25 çok düşük · < 60 düşük · < 120 orta · üstü yüksek; çubuk ölçeği 120 ms = tam.
      Ölçüm sürerken nabız animasyonu YOK (sürekli döngü yasak, §7): durum metni "Ölçülüyor…" + soluk değer + aria-busy.
   ============================================================================================================ */
.st-lat {
  padding: 1.25rem;
  background-color: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  box-shadow: var(--sh-card);
}
.st-lat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.st-lat-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.st-lat-retry { flex: none; }
.st-lat-retry[aria-disabled=true] { color: var(--c-ink-3); cursor: progress; }
.st-lat-list {
  display: grid;
  gap: 1.25rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.st-lat-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .25rem .75rem;
}
.st-lat-label { color: var(--c-ink-2); font-size: .9375rem; }
.st-lat-num { white-space: nowrap; }
.st-lat-value {
  font-family: var(--font-sans);                        /* büyük rakam: Plex Sans 600 + tnum (§2.2 .price) */
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
}
.st-lat-unit { font-size: .875rem; color: var(--c-ink-3); }
.st-lat-track {
  block-size: 6px;
  margin-block-start: .5rem;
  overflow: hidden;
  border-radius: var(--radius-mini);
  background-color: var(--c-surface-3);
}
.st-lat-bar {
  inline-size: 0;
  block-size: 100%;
  border-radius: inherit;
  background-color: var(--c-info);
}
.st-lat-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .25rem .75rem;
  margin-block-start: .5rem;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--c-ink-3);
}
.st-lat-best { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.st-lat-row.is-excellent .st-lat-bar { background-color: var(--c-ok); }
.st-lat-row.is-good .st-lat-bar { background-color: var(--c-info); }
.st-lat-row.is-fair .st-lat-bar { background-color: var(--c-warn); }
.st-lat-row.is-far .st-lat-bar { background-color: var(--c-danger); }
.st-lat-row.is-measuring .st-lat-value,
.st-lat-row.is-failed .st-lat-value { color: var(--c-ink-4); }   /* büyük metin (28 px/600): ink-4 açıkta 3,3 · koyuda 3,9 ≥ 3:1 */
.st-lat-row.is-nearest .st-lat-quality { color: var(--c-ok); font-weight: 500; }
.st-lat-note {
  margin: 1.25rem 0 0;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--c-line);
  font-size: .75rem;
  line-height: 1.5;
  color: var(--c-ink-3);
}
@media (min-width: 640px) {
  .st-lat { padding: 1.5rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .st-lat-bar { transition: inline-size var(--dur-move) var(--ease-out), background-color var(--dur-color) var(--ease-out); }
}

/* ---- 35-kolay.css ---- */
/* features/35-kolay.css — sahibi T15 (docs/v5/kolay-vps-plani.md §2). Kolay vitrin: uygulama kutuları, boyut adımı, bütün boyutlar.
   Kurallar: renk yalnız var(--c-*); kart 8, buton/alan 6 px; gölge, gradyan, sürekli hareket yok; tek birincil düğme. */

.kv { background-color: var(--c-surface); color: var(--c-ink); padding-block-end: 4rem; }
.kv-hero { padding-block: 1.5rem 1rem; }
.kv-h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.04;
  letter-spacing: -.02em;
}
.kv-h1-sm {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.875rem, 5vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -.015em;
}
.kv-lead { margin: .5rem 0 0; font-size: clamp(1rem, 2vw, 1.125rem); color: var(--c-ink-2); }
.kv-preview { padding: .625rem .875rem; margin: 0 0 1rem; border: 1px dashed var(--c-line-strong); border-radius: var(--radius-card); font-size: .875rem; color: var(--c-ink-2); }

.kv-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: 1.375rem; }
.kv-chip {
  padding: .5rem 1rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  background: transparent;
  color: var(--c-ink);
  font-size: .9375rem;
  font-weight: 500;
  transition: border-color var(--dur-color) var(--ease-out);
}
.kv-chip:hover { border-color: var(--c-ink); }
.kv-chip[aria-pressed="true"] { background-color: var(--c-ink); border-color: var(--c-ink); color: var(--c-surface); }

.kv-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.kv-app {
  display: flex;
  flex-direction: column;
  min-block-size: 9.5rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  color: var(--c-ink);
  transition: border-color var(--dur-color) var(--ease-out), background-color var(--dur-color) var(--ease-out);
}
.kv-app-sec {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: .125rem;
  padding: 1.125rem;
  border-radius: var(--radius-card);
  color: inherit;
  text-decoration: none;
}
.kv-app-sec:hover { color: inherit; }
.kv-app-detay { align-self: flex-start; margin: -.5rem 1.125rem .875rem; font-size: .8125rem; color: var(--c-ink-3); }
.kv-app-detay:hover { color: var(--c-ink); }
.kv-app[hidden] { display: none; }
.kv-app:hover { border-color: var(--c-ink); background-color: var(--c-surface-2); color: var(--c-ink); }
.kv-app .bi { margin-block-end: .75rem; font-size: 1.75rem; line-height: 1; }
.kv-app b { font-size: 1.0625rem; font-weight: 600; }
.kv-what { font-size: .875rem; line-height: 1.35; color: var(--c-ink-3); }
.kv-from { margin-block-start: auto; padding-block-start: .625rem; font-size: .875rem; font-weight: 500; }
.kv-more { margin: 1.125rem 0 0; }
.kv-more a { color: var(--c-ink-2); font-size: .9375rem; }

.kv-why {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.75rem;
  margin-block-start: 4rem;
  padding-block-start: 2rem;
  border-block-start: 1px solid var(--c-line);
}
.kv-why h2 { margin: 0 0 .375rem; font-family: var(--font-sans); font-size: 1.125rem; font-weight: 600; letter-spacing: 0; }
.kv-why p { margin: 0; font-size: .9375rem; color: var(--c-ink-3); }

.kv-narrow { max-inline-size: 35rem; margin-inline: auto; padding-inline: 1rem; }
.kv-narrow-wide { max-inline-size: 45rem; }
.kv-back { display: inline-flex; align-items: center; gap: .375rem; padding-block: 1.25rem .875rem; color: var(--c-ink-3); font-size: .9375rem; text-decoration: none; }
.kv-back:hover { color: var(--c-ink); }
.kv-apphead { display: flex; align-items: center; gap: .875rem; margin-block-end: .375rem; }
.kv-apphead .bi { font-size: 2.25rem; line-height: 1; }
.kv-inc { margin: .25rem 0 1.75rem; color: var(--c-ink-3); }
.kv-q { margin: 0 0 .75rem; font-family: var(--font-sans); font-size: 1.25rem; font-weight: 600; letter-spacing: 0; }

.kv-size {
  display: flex;
  align-items: center;
  gap: .875rem;
  margin-block-end: .625rem;
  padding: 1rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  cursor: pointer;
  transition: border-color var(--dur-color) var(--ease-out);
}
.kv-size:hover { border-color: var(--c-ink); }
.kv-size:has(input:checked) { border-color: var(--c-brand); box-shadow: inset 0 0 0 1px var(--c-brand); }
.kv-size input { flex: none; inline-size: 1.25rem; block-size: 1.25rem; margin: 0; accent-color: var(--c-brand); }
.kv-size-m { flex: 1; min-inline-size: 0; }
.kv-size-m b { font-weight: 600; }
.kv-size-m small { display: block; font-size: .875rem; color: var(--c-ink-3); }
.kv-size-p { font-weight: 600; white-space: nowrap; text-align: end; font-variant-numeric: tabular-nums; }
.kv-size-p small { font-weight: 400; font-size: .875rem; color: var(--c-ink-3); }
.kv-tag { display: inline-block; margin-inline-start: .5rem; padding: .0625rem .5rem; border-radius: var(--radius-badge); background-color: var(--c-brand-soft); color: var(--c-brand-text); font-size: .75rem; font-weight: 600; vertical-align: .0625rem; }

.kv-other { margin-block-end: 1.125rem; }
.kv-other summary { padding-block: .375rem; color: var(--c-ink-3); font-size: .9375rem; cursor: pointer; }
.kv-other-box { padding-block-start: .625rem; }
.kv-other input[type="range"] { inline-size: 100%; block-size: 1.75rem; margin: 0; accent-color: var(--c-brand); }
.kv-range-out { display: flex; justify-content: space-between; gap: .75rem; margin-block-start: .25rem; font-size: .9375rem; }
.kv-range-out b { font-weight: 600; }

.kv-assure { display: flex; gap: .75rem; margin: 1rem 0 1.125rem; padding: .875rem 1rem; border-radius: var(--radius-card); background-color: var(--c-surface-2); font-size: .9375rem; }
.kv-assure .bi { font-size: 1.25rem; line-height: 1.3; color: var(--c-brand-text); }
.kv-assure b { font-weight: 600; }

.kv-seg { display: flex; gap: .25rem; margin-block-end: .75rem; padding: .25rem; border-radius: var(--radius-card); background-color: var(--c-surface-2); }
.kv-seg button, .kv-seg a {
  flex: 1;
  padding: .625rem .5rem;
  border: 0;
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--c-ink);
  font-size: .9375rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
}
.kv-seg button[aria-pressed="true"], .kv-seg a[aria-current] { background-color: var(--c-surface); box-shadow: 0 0 0 1px var(--c-line); }
.kv-seg em { font-style: normal; font-weight: 600; color: var(--c-ok); }
.kv-seg-loc { margin-block-end: 1.5rem; }

.kv-legal { margin: 0 0 .75rem; font-size: .875rem; color: var(--c-ink-3); }
.kv-err { margin-block-end: .75rem; padding: .75rem 1rem; border-radius: var(--radius-card); background-color: var(--c-danger-soft); color: var(--c-danger); font-size: .9375rem; }
.kv-cta { padding-block: .5rem 1rem; }
.kv-go { inline-size: 100%; }
.kv-tax { margin: .5rem 0 0; font-size: .8125rem; text-align: center; color: var(--c-ink-3); }

.kv-tablewrap { overflow-x: auto; }
.kv-table { inline-size: 100%; border-collapse: collapse; font-size: .9375rem; }
.kv-table th { padding: .5rem .625rem; border-block-end: 1px solid var(--c-line); font-size: .8125rem; font-weight: 500; color: var(--c-ink-3); text-align: start; }
.kv-table td { padding: .625rem; border-block-end: 1px solid var(--c-line); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kv-table b { font-weight: 600; }
.kv-table .kv-r { text-align: end; }
.kv-table tbody tr:hover { background-color: var(--c-surface-2); }
.kv-table-note { text-align: start; margin-block-start: 1rem; }

/* Telefonda tablo kaymaz: her boyut iki satır, fiyat ve Seç düğmesi hep görünür. */
@media (max-width: 34rem) {
  .kv-tablewrap { overflow-x: visible; }
  .kv-table, .kv-table tbody { display: block; }
  .kv-table thead { display: none; }
  .kv-table tr {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: .375rem .75rem;
    padding-block: .75rem;
    border-block-end: 1px solid var(--c-line);
  }
  .kv-table td { padding: 0; border: 0; }
  .kv-table td:nth-child(4) { grid-column: 1 / span 2; grid-row: 2; text-align: start; font-weight: 600; }
  .kv-table td:nth-child(5) { grid-column: 3; grid-row: 2; }
}

@media (max-width: 860px) {
  .kv-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kv-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .kv-hero { padding-block-start: 1.25rem; }
  .kv-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -.5); padding-inline: calc(var(--bs-gutter-x, 1.5rem) * .5); scrollbar-width: none; }
  .kv-chips::-webkit-scrollbar { display: none; }
  .kv-chip { flex: none; }
  .kv-apps { grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--c-line); border-radius: var(--radius-card); overflow: hidden; }
  .kv-app { flex-direction: row; align-items: center; min-block-size: 0; border: 0; border-block-end: 1px solid var(--c-line); border-radius: 0; }
  .kv-app-sec { display: grid; grid-template-columns: 2.125rem minmax(0, 1fr); column-gap: .75rem; align-items: center; min-inline-size: 0; padding: .875rem; border-radius: 0; }
  .kv-app-detay { flex: none; align-self: center; margin: 0; padding: .875rem; }
  .kv-app:last-child { border-block-end: 0; }
  .kv-app .bi, .kv-app .kv-logo { grid-row: 1 / 3; margin: 0; }
  .kv-app .bi { font-size: 1.5rem; }
  .kv-app b, .kv-what { grid-column: 2; }
  .kv-from { grid-column: 3; grid-row: 1 / 3; margin: 0; padding: 0; font-size: .8125rem; color: var(--c-ink-3); white-space: nowrap; text-align: end; }
  .kv-why { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}
@media (max-width: 540px) and (min-height: 600px) {
  .kv-cta { position: sticky; inset-block-end: 0; padding-block: .75rem 1rem; background-color: var(--c-surface); }
}
@media (prefers-reduced-motion: reduce) {
  .kv-chip, .kv-app, .kv-size { transition: none; }
}

/* Panel: giriş, boyut, uyarı */
.kv-dash-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-block: .5rem 1.25rem; }
.kv-dash-list { margin-block-start: 1rem; }
.kv-dash-list .dash-panel-head { display: none; } /* başlık h1'de, tüm liste kenar çubuğunda */
.kv-dash-list .dash-empty .btn { display: none; } /* birincil aksiyon sayfa başında: Yeni sunucu */
.kv-advice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-block-end: 1rem; padding: .875rem 1rem; border-radius: var(--radius-card); background-color: var(--c-warn-soft); font-size: .9375rem; }
.kv-advice b { font-weight: 600; }
.kv-scale { max-inline-size: 35rem; }
.kv-scale-lead { margin: 0 0 1rem; color: var(--c-ink-3); }
.kv-scale-now { display: flex; justify-content: space-between; gap: .75rem; margin-block-end: .5rem; font-size: .9375rem; }
.kv-scale-now b { font-weight: 600; }
.kv-scale input[type="range"] { inline-size: 100%; block-size: 1.75rem; margin: 0; accent-color: var(--c-brand); }
.kv-scale .kv-range-out { color: var(--c-ink-3); }
.kv-scale .kv-range-out b { color: var(--c-ink); }
.kv-scale-note { margin: .75rem 0; font-size: .9375rem; }
.kv-scale .btn { min-inline-size: 10rem; }
.kv-about { margin-block-start: 2.5rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--c-line); }
.kv-about h2 { font-size: 1.05rem; margin-block-end: .4rem; }
.kv-about p { color: var(--c-ink-2); margin-block-end: .5rem; }
.kv-scale ~ .sd-alert { max-inline-size: 35rem; margin-block-start: 1rem; }
.kv-search { position: relative; max-inline-size: 35rem; margin-block-end: 1rem; }
.kv-search .bi { position: absolute; inset-block-start: 50%; inset-inline-start: .875rem; transform: translateY(-50%); color: var(--c-ink-3); }
.kv-search input { inline-size: 100%; padding: .625rem .875rem .625rem 2.5rem; border: 1px solid var(--c-line-strong); border-radius: var(--radius-card); background-color: var(--c-surface); color: var(--c-ink); font-size: 1rem; }
.kv-search input:focus { outline: 2px solid var(--c-brand); outline-offset: 1px; }
.kv-none { margin: .5rem 0 0; color: var(--c-ink-2); }
.kv-os { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: 1rem; }
.kv-logo { inline-size: 1.75rem; block-size: 1.75rem; object-fit: contain; margin-block-end: .75rem; }
.kv-apphead .kv-logo { inline-size: 2.25rem; block-size: 2.25rem; margin-block-end: 0; }
.page-hero { padding-block: 1.25rem; }
.page-hero-title { font-size: clamp(1.5rem, 3.5vw, 2rem); }
.kb-article-meta span:has(> .bi-eye), .kb-doc-meta span:has(> .bi-eye) { display: none; }
.kv-adv { margin-block-start: 1rem; padding: .75rem 1rem; border: 1px solid var(--c-line); border-radius: var(--radius-card); }
.kv-adv summary { cursor: pointer; font-weight: 600; }
.kv-adv[open] summary { margin-block-end: .75rem; }
.kv-svc .list-summary, .kv-svc .list-toolbar { display: none; }
@media (max-width: 640px) {
  body:has(.kv-cta) .sai-w { bottom: calc(4.75rem + env(safe-area-inset-bottom)) !important; }
  body:has(.kv-cta) .scroll-top { display: none; }
}

/* Blog ve haber: kapağı olmayan yazıda boş kutu yok, bülten yok (e-posta kurulunca açılır), yazı sonunda sipariş düğmesi. */
.news-thumb:not(:has(img)) { display: none; }
.news-cta[data-newsletter], .news-subscribe[data-newsletter], .newsletter-band { display: none; }
.kv-post-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block: 1.5rem;
  padding: 1.25rem 1.5rem;
  background-color: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: 8px;
}
.kv-post-cta-title { margin: 0 0 .25rem; font-weight: 600; color: var(--c-ink); }
.kv-post-cta-text { margin: 0; color: var(--c-ink-2); font-size: .9rem; }

/* Yazı ve sayfa içindeki tablolar telefonda sayfayı taşırmaz, kendi içinde kayar. */
.kb-prose table, .about-prose table { display: block; max-inline-size: 100%; overflow-x: auto; }

/* İlk soru: üç büyük seçenek. */
.kv-start { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-block: 1.25rem; }
.kv-start-c {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .375rem;
  padding: 1.25rem;
  text-align: start;
  color: var(--c-ink);
  background-color: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  cursor: pointer;
}
.kv-start-c:hover { border-color: var(--c-ink); background-color: var(--c-surface-2); }
.kv-start-c[aria-pressed="true"] { border-color: var(--c-brand); box-shadow: inset 0 0 0 1px var(--c-brand); }
.kv-start-c .bi { font-size: 1.75rem; line-height: 1; margin-block-end: .375rem; }
.kv-start-c b { font-size: 1.125rem; font-weight: 600; }
.kv-start-d { font-size: .9375rem; color: var(--c-ink-2); }
.kv-panel { margin-block-start: 1.25rem; scroll-margin-block-start: 5rem; }
.kv-panel .kv-search[hidden], .kv-panel .kv-chips[hidden] { display: none; }
@media (max-width: 48rem) { .kv-start { grid-template-columns: minmax(0, 1fr); } .kv-start-c { padding: 1rem; } }

/* Serbest boyut kaydırıcıları. */
.kv-sl-h { margin: 1rem 0 .5rem; font-weight: 600; }
.kv-sliders { display: grid; gap: .875rem; margin-block-end: 1.125rem; padding: 1rem; border: 1px solid var(--c-line); border-radius: var(--radius-card); }
.kv-slider { display: block; margin: 0; cursor: pointer; }
.kv-slider-h { display: flex; justify-content: space-between; gap: .75rem; font-size: .9375rem; color: var(--c-ink-2); }
.kv-slider-h b { font-weight: 600; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.kv-slider input[type="range"] { display: block; inline-size: 100%; block-size: 1.75rem; margin: 0; accent-color: var(--c-brand); }
.kv-hesap { margin-block-end: 1.5rem; }
.kv-hesap .kv-go { display: block; inline-size: 100%; text-align: center; }
.kv-ornek-h { margin-block-start: 1.75rem; }

/* İşletim sistemi logoları koyu zeminde kaybolmasın. */
.kv-app .kv-logo, .kv-apphead .kv-logo, .kv-secim .kv-logo { background-color: var(--c-white); border-radius: 6px; padding: 3px; }

/* Seçim düğmesi: ilk ekranın seçim olduğu baştan belli olsun. */
.kv-start-c { transition: border-color .15s ease, background-color .15s ease; }
.kv-start-d { flex: 1; }
.kv-start-go { display: inline-flex; align-items: center; gap: .375rem; margin-block-start: .5rem; padding: .375rem .875rem; border-radius: var(--radius-btn, 6px); font-style: normal; font-size: .9375rem; font-weight: 600; color: var(--c-white); background-color: var(--c-brand); }
.kv-start-go .bi { font-size: .9375rem; margin: 0; }
.kv-start-c:hover .kv-start-go { filter: brightness(1.08); }
@media (prefers-reduced-motion: reduce) { .kv-start-c { transition: none; } }
.kv-more { color: var(--c-ink-2); font-size: .9375rem; }

/* Sık sorulanlar: konu başlıklı iki sütun, kartlı satırlar, tıklanır alan satırın tamamı. */
.kv-faq { padding-block: 2.25rem 1rem; }
.kv-faq > h2 { margin: 0 0 1.25rem; font-size: 1.5rem; }
.kv-faq-kolon { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; align-items: start; }
.kv-faq-grup h3 { margin: 0 0 .625rem; font-family: var(--font-sans); font-size: 1rem; font-weight: 600; color: var(--c-ink-2); letter-spacing: 0; }
.kv-faq details { margin-block-end: .5rem; background-color: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--radius-card); }
.kv-faq details[open] { border-color: var(--c-line-strong); }
.kv-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .875rem 1rem; font-weight: 600; cursor: pointer; list-style: none; }
.kv-faq summary::-webkit-details-marker { display: none; }
.kv-faq summary .bi { flex: none; color: var(--c-ink-3); transition: transform .15s ease; }
.kv-faq details[open] summary .bi { transform: rotate(45deg); }
.kv-faq p { margin: 0; padding: 0 1rem .875rem; color: var(--c-ink-2); font-size: .9375rem; }
.kv-faq-son { margin: 1.25rem 0 0; color: var(--c-ink-2); }
@media (max-width: 48rem) { .kv-faq-kolon { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .kv-faq summary .bi { transition: none; } }

/* Aynı ekran: solda ne kurulacağı, sağda boyut ve fiyat. Kısa ekranda kart kendi içinde kayar, düğme görünür kalır. */
.kv-kur-h { display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem; font-family: var(--font-sans); font-size: 1.125rem; font-weight: 600; letter-spacing: 0; }
.kv-kur-h b { display: inline-grid; flex: none; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; border-radius: 50%; background-color: var(--c-brand); color: var(--c-white); font-size: .8125rem; font-weight: 600; }
.kv-kisa { display: none; }
.kv-kart { padding: 1rem 1.125rem; border: 1px solid var(--c-line); border-radius: var(--radius-card); background-color: var(--c-surface); }
.kv-kart .kv-sliders { gap: .25rem; margin-block-end: .625rem; padding: 0; border: 0; }
.kv-kart .kv-slider input[type="range"] { block-size: 1.375rem; }
.kv-kart .kv-seg { margin-block-end: .75rem; }
.kv-kart .kv-seg button { padding-block: .4375rem; }
.kv-kart .kv-os { margin-block: .625rem 0; }
.kv-kart .kv-os[hidden] { display: none; }
.kv-kart .kv-chip { padding: .3125rem .75rem; font-size: .875rem; }
.kv-kart .kv-legal { margin-block: .75rem 0; }
.kv-kart .kv-err { margin-block: .75rem 0; }
.kv-kart .kv-cta { padding-block: .625rem 0; }
.kv-kart .kv-tax { margin-block-start: .5rem; }
.kv-hazirlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-block-end: .75rem; }
.kv-hazir { position: relative; display: flex; flex-direction: column; gap: .125rem; margin: 0; padding: .625rem .75rem; border: 1px solid var(--c-line); border-radius: var(--radius-card); cursor: pointer; transition: border-color var(--dur-color) var(--ease-out); }
.kv-hazir[hidden] { display: none; }
.kv-hazir:hover { border-color: var(--c-ink); }
.kv-hazir:has(input:checked) { border-color: var(--c-brand); box-shadow: inset 0 0 0 1px var(--c-brand); }
.kv-hazir:has(input:focus-visible) { outline: 2px solid var(--c-brand); outline-offset: 2px; }
.kv-hazir input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.kv-hazir b { font-size: .875rem; font-weight: 600; line-height: 1.25; }
.kv-hazir span { margin-block-start: auto; font-size: .875rem; color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.kv-secim { display: flex; align-items: center; gap: .75rem; padding-block-start: .75rem; border-block-start: 1px solid var(--c-line); }
.kv-secim[hidden] { display: none; }
.kv-secim-ikon { flex: none; }
.kv-secim-ikon .bi { font-size: 1.5rem; line-height: 1; }
.kv-secim .kv-logo { display: block; margin: 0; }
.kv-secim-m { min-inline-size: 0; }
.kv-secim-m b { display: block; font-weight: 600; }
.kv-secim-m small { display: block; font-size: .8125rem; line-height: 1.35; color: var(--c-ink-3); }
.kv-toplam { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin: 0 0 .625rem; color: var(--c-ink-2); }
.kv-toplam b { color: var(--c-ink); font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kv-toplam small { font-size: .875rem; font-weight: 400; color: var(--c-ink-3); }
.kv-yil { margin: -.375rem 0 .625rem; font-size: .8125rem; text-align: end; color: var(--c-ink-3); }
.kv-not { margin: .5rem 0 0; font-size: .8125rem; text-align: center; color: var(--c-ink-3); }
.kv-app[aria-current="true"] { border-color: var(--c-brand); box-shadow: inset 0 0 0 1px var(--c-brand); }
[data-kv-start][data-uyari], [data-kv-apps][data-uyari] { outline: 2px solid var(--c-brand); outline-offset: 6px; border-radius: var(--radius-card); }
.kv-kur-ana { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: 2rem; align-items: start; margin-block-start: .25rem; }
.kv-kur-ana .kv-start { grid-template-columns: minmax(0, 1fr); gap: .625rem; margin-block: 0; }
.kv-kur-ana .kv-start-c { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 1rem; align-items: center; padding: 1rem 1.125rem; }
.kv-kur-ana .kv-start-c > .bi { grid-row: 1 / 3; margin: 0; }
.kv-kur-ana .kv-start-c > b, .kv-kur-ana .kv-start-d { grid-column: 2; }
.kv-kur-ana .kv-start-go { grid-column: 3; grid-row: 1 / 3; margin: 0; }
.kv-start[data-acik] .kv-start-d, .kv-start[data-acik] .kv-start-go { display: none; }
.kv-kur-ana .kv-start[data-acik] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kv-kur-ana .kv-start[data-acik] .kv-start-c { display: flex; flex-direction: row; align-items: center; gap: .5rem; padding: .625rem .75rem; }
.kv-kur-ana .kv-start[data-acik] .kv-start-c > .bi { font-size: 1.125rem; }
.kv-kur-ana .kv-start[data-acik] .kv-start-c > b { font-size: .9375rem; line-height: 1.25; }
.kv-kur-uyg { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; grid-template-areas: "bas sag" "hak sag"; grid-template-rows: auto 1fr; column-gap: 3rem; align-items: start; }
.kv-kur-bas { grid-area: bas; }
.kv-kur-uyg .kv-kur-sag { grid-area: sag; margin-block-start: 1.25rem; }
.kv-kur-uyg .kv-about { grid-area: hak; margin-block-start: .75rem; padding-block-start: 0; border: 0; }
.kv-kur-uyg .kv-inc { margin-block-end: 1rem; }
@media (min-width: 62rem) {
  .kv-kur-sag { position: sticky; inset-block-start: 5rem; max-block-size: calc(100vh - 5.5rem); overflow-y: auto; }
  .kv-kur-ana .kv-apps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kv-kur-ana .kv-app { min-block-size: 8rem; }
  .kv-kur-ana .kv-app-sec { padding: .875rem .875rem .625rem; }
  .kv-kur-ana .kv-app-detay { margin: -.25rem .875rem .75rem; }
}
@media (min-width: 62rem) and (max-width: 74.99rem) {
  .kv-kur-ana { grid-template-columns: minmax(0, 1fr) 22rem; gap: 1.5rem; }
  .kv-kur-uyg { grid-template-columns: minmax(0, 1fr) 22rem; column-gap: 1.5rem; }
  .kv-kur-ana .kv-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 61.99rem) {
  .kv-kur-ana { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .kv-kur-ana:not([data-secili]) .kv-kur-sag { display: none; }
  .kv-kur-sag { scroll-margin-block-start: 5rem; }
  .kv-kur-uyg { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bas" "sag" "hak"; grid-template-rows: none; }
  .kv-kur-uyg .kv-kur-sag { margin-block-start: .5rem; }
  .kv-kur-uyg .kv-about { margin-block-start: 2rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--c-line); }
}
@media (max-width: 48rem) {
  .kv-kur-ana .kv-start[data-acik] .kv-start-c { justify-content: center; padding: .625rem .375rem; text-align: center; }
  .kv-kur-ana .kv-start[data-acik] .kv-start-c > .bi, .kv-start[data-acik] .kv-tam { display: none; }
  .kv-start[data-acik] .kv-kisa { display: inline; }
  .kv-kur-ana .kv-start[data-acik] .kv-start-c > b { font-size: .8125rem; }
}
@media (max-width: 540px) {
  .kv-kur-ana .kv-start-c { column-gap: .75rem; padding: .875rem; }
  .kv-kur-ana .kv-start-c > .bi { font-size: 1.5rem; }
  .kv-kur-ana .kv-start-go { padding: .5rem; font-size: 0; } /* telefonda yalnız ok: açıklama sığsın */
  .kv-kur-ana .kv-start-go .bi { font-size: 1rem; }
}
@media (max-width: 540px) and (min-height: 600px) {
  .kv-kart .kv-cta { padding-block: .75rem; }
}
@media (prefers-reduced-motion: reduce) { .kv-hazir { transition: none; } }

/* Uygulama tanıtım sayfası: okunur uzunlukta satır, sakin hiyerarşi; satın alma kartı yanında sabit durur. */
.kv-sayfa-giris { margin: .5rem 0 1rem; font-size: 1.0625rem; line-height: 1.55; color: var(--c-ink-2); }
.kv-sayfa { grid-area: hak; max-inline-size: 44rem; }
.kv-sayfa > section { padding-block: 1.25rem; border-block-start: 1px solid var(--c-line); }
.kv-sayfa h2 { margin: 0 0 .75rem; font-family: var(--font-sans); font-size: 1.25rem; font-weight: 600; letter-spacing: 0; }
.kv-sayfa p { margin: 0 0 .875rem; line-height: 1.6; color: var(--c-ink-2); }
.kv-tik, .kv-sayfa-not { margin: 0; padding: 0; list-style: none; }
.kv-tik li, .kv-sayfa-not li { position: relative; padding-inline-start: 1.625rem; margin-block-end: .5rem; line-height: 1.5; color: var(--c-ink-2); }
.kv-tik li::before { content: "\2713"; position: absolute; inset-inline-start: 0; font-weight: 600; color: var(--c-ok); }
.kv-sayfa-not li::before { content: "\2022"; position: absolute; inset-inline-start: .375rem; color: var(--c-ink-3); }
.kv-sayfa-adim { margin: 0; padding-inline-start: 1.375rem; }
.kv-sayfa-adim li { margin-block-end: .5rem; padding-inline-start: .25rem; line-height: 1.5; color: var(--c-ink-2); }
.kv-sayfa .kv-faq { padding-block: 1.25rem; }
.kv-sayfa-yazi { margin: 0 0 1rem; padding: 0; list-style: none; }
.kv-sayfa-yazi li { margin-block-end: .375rem; }
.kv-sayfa .kv-chips { margin-block-end: 0; }
.kv-sayfa a.kv-chip { text-decoration: none; font-size: .875rem; padding: .375rem .75rem; }
.kv-table-boyut td { white-space: normal; }
@media (max-width: 34rem) {
  .kv-table-boyut tr { grid-template-columns: minmax(0, 1fr) auto; }
  .kv-table-boyut td:nth-child(1) { grid-column: 1 / -1; grid-row: 1; }
  .kv-table-boyut td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; font-size: .875rem; color: var(--c-ink-3); }
  .kv-table-boyut td:nth-child(3) { grid-column: 1; grid-row: 3; text-align: start; font-weight: 600; }
  .kv-table-boyut td:nth-child(4) { grid-column: 2; grid-row: 3; }
}
.kv-secim-m { flex: 1; }
.kv-secim-detay { flex: none; align-self: flex-start; font-size: .8125rem; color: var(--c-ink-3); }
.kv-secim-detay:hover { color: var(--c-ink); }

/* Sağdan sola dillerde sayı ve birim soldan sağa okunur (1 GB, 130 ₺); Arapça harfler bitişik yazıldığı için harf aralığı açılmaz. */
[dir="rtl"] .kv-slider-h b,
[dir="rtl"] .kv-hazir span,
[dir="rtl"] [data-kv-toplam],
[dir="rtl"] .kv-table-boyut td { unicode-bidi: plaintext; }
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] .h-display, [lang="ar"] .h-section, [lang="ar"] .h-page, [lang="ar"] .kv-h1 { letter-spacing: normal; }

/* ---- 40-katalog-funnel.css ---- */
/* features/40-katalog-funnel.css — Seturack · katalog (products/category, plan-grid, plan-rows) + sipariş hunisi (configure, cart,
   checkout, pay, sonuç sayfaları, özet rayı). Sahibi T07 (tasarım §4.4, §4.5; docs/tasarim-sistemi.md §1, §3.1, §3.2, §3.5, §3.12,
   §3.13, §7). derle.sh bu parçayı features.css'e ad sırasıyla birleştirir (D-9).
   Kurallar: markup ve WStyle sınıf adları korunur, yalnız boyanır; renk yalnız var(--c-*) (hex yok — lint); yarıçap kart 8 · düğme/
   alan 6 · rozet/mini 4 (§2.3 "başka yarıçap yok": WStyle'ın 2rem/10rem hap köşeleri de buraya kenetlenir); gradyan, parıltı, blur,
   kaldırma YOK (CLAUDE.md "Yasak"); bu dosya hareket EKLEMEZ (transition/animation yazılmaz; WStyle'ınkiler components.css'in küresel
   reduce sıfırlamasıyla kapanır).
   Renk disiplini (§1): kırmızı yalnız aksiyon ve seçim — sayfanın tek birincil düğmesi, seçili kart kenarı, odak. WStyle'ın pembe
   (primary-subtle) dekor zeminleri (ikon kutuları, fiyat çipleri, segment zemini, hover) nötr tona iner; seçili kart v3 radio-card
   gibi brand kenar + brand-soft/40 zemin alır.
   Lacivert yüzey (§1 "popüler plan kartı ters"): katalogda yalnız popüler plan kartı/satırı. Özet rayı (WStyle: kırmızı→lacivert
   gradyan panel) YÜZEY olur — sepet özeti v3'te de yüzey kart (§3.13); rayın içindeki "Sepete ekle / Devam / Öde" sayfanın tek
   kırmızı düğmesidir.
   Odak (T03 notu "Davranış 7"): seçili kart kurallarında box-shadow DEĞİŞTİRİLMEZ (yalnız kenar/zemin) — WStyle'ın
   `:has(:focus-visible)` halkası ve components.css §2 (b) sırası bozulmaz. */

/* ============================================================================================================
   1) Katalog — dönem anahtarı (§3.5 .seg): yüzey kutu, seçili = lacivert (koyu modda ters); hap köşesi yok
   ============================================================================================================ */
.billing-toggle {
  border-color: var(--c-line);
  border-radius: var(--radius-btn);
  background-color: var(--c-surface);
}
.billing-toggle .billing-option { border-radius: var(--radius-mini); color: var(--c-ink-3); }
.billing-toggle .billing-option:hover { color: var(--c-ink); }
.billing-toggle .billing-option.active { background-color: var(--c-navy); color: var(--c-on-navy); }
:root[data-bs-theme=dark] .billing-toggle .billing-option.active { background-color: var(--c-on-navy); color: var(--c-navy); }

/* Tek sekmeli şeritte sabit lokasyon satırı (T04 st-location) dönem anahtarıyla aynı çubukta: dış boşluğu çubuk verir */
.section-head + .d-flex > .st-location,
.section-head + .d-flex > [data-st-location] { margin: 0; }
/* Çok sekmede (sekmeler ürün ailesi) tek lokasyonun satırı yalnız kendi panosunun başında: çubukla aynı hiza (dar ekranda orta, lg'de sol) */
.st-pane-location { display: flex; justify-content: center; margin-block-start: 1rem; }
@media (min-width: 992px) { .st-pane-location { justify-content: flex-start; } }

/* ============================================================================================================
   2) Plan kartı / satırı (plan-grid, plan-rows) — GENEL görünüm (ana sayfa rafındaki farklar T06'nın 30-anasayfa.css'inde)
      §3.12: fiyat Plex Sans (components.css [class*=price]), popüler = lacivert + brand kenar + brand rozet + TEK birincil düğme;
      diğer kartların düğmesi ikincil (WStyle zaten .btn-soft basar). Gölge/ölçek/ışık izi yok.
   ============================================================================================================ */
.plan-card .plan-price .price-now { font-size: 2.125rem; font-weight: 600; }          /* §3.12 .price 34 px */
.plan-row .price-now { font-weight: 600; }
.plan-row .price-was { white-space: nowrap; }                                       /* dar fiyat sütununda "199,00 / ₺" kırılmasın */
/* T14-B1: dar kartta (ana sayfa rafı, 375 px, yıllık dönem) "%N Kazanç" rozeti kartın dışına taşıyordu (≈12 px).
   Fiyat metni kendi içinde kırılmaz (üst kural), ama eski fiyat ile rozet aynı satıra sığmazsa rozet alt satıra iner. */
[data-role="save-band"] .wui-collapse-inner > .d-flex { flex-wrap: wrap; row-gap: .25rem; min-width: 0; }
.plan-chip { border-radius: var(--radius-badge); }
/* "Popüler" rozeti: brand zemin + beyaz metin (§3.3; beyaz/brand 4,84:1). Alevli ikon dekor — sükûnet, metin yeter */
.plan-card .plan-badge .badge.badge-secondary-soft,
.plan-row.plan-popular .plan-row-id .badge.badge-secondary-soft {
  background-color: var(--c-brand);
  color: var(--c-white);
}
.plan-card .plan-badge .bi-fire,
.plan-row .plan-row-id .badge-secondary-soft .bi-fire { display: none; }

/* Popüler kart (grid): lacivert, brand kenar; WStyle'ın başlık rengi (secondary %55 + beyaz) köprüde gri-pembeye dönüyordu → on-navy.
   ::before (radial parıltı) ve ::after (fareyi izleyen ışık kenarı, --spot-x/y) kaldırılır. */
.plan-card.plan-popular {
  --bs-heading-color: var(--c-on-navy);
  --bs-secondary-color: var(--c-on-navy-2);
  background-color: var(--c-navy);
  border-color: var(--c-brand);
  color: var(--c-on-navy);
  box-shadow: var(--sh-card);
}
.plan-card.plan-popular::before,
.plan-card.plan-popular::after { content: none; }
.plan-card.plan-popular .plan-price.price-band { background-color: var(--c-navy-2); }
.plan-card.plan-popular .plan-features .bi { color: var(--c-ok-inv); }
.plan-card.plan-popular .billing-compare { --bs-btn-color: var(--c-on-navy-2); --bs-btn-hover-color: var(--c-on-navy); }
/* "Ödeme seçeneklerini karşılaştır" bir açıklama açıcıdır, satın alma aksiyonu değil: kırmızı bağlantı yerine mürekkep (sayfadaki tek
   kırmızı = popüler planın düğmesi; §1). Odak halkası components.css'ten. */
.plan-card:not(.plan-popular) .billing-compare.btn-link { --bs-btn-color: var(--c-ink-2); --bs-btn-hover-color: var(--c-ink); --bs-btn-active-color: var(--c-ink); }

/* Popüler satır (rows — VDS kategorisinin varsayılan düzeni, PN-3): kartla aynı dil. WStyle yalnız yeşil kenar veriyordu. */
.plan-row.plan-popular {
  --bs-heading-color: var(--c-on-navy);
  --bs-secondary-color: var(--c-on-navy-2);
  background-color: var(--c-navy);
  border-color: var(--c-brand);
  color: var(--c-on-navy);
  box-shadow: var(--sh-card);
}
.plan-row.plan-popular .price-now { color: var(--c-on-navy); }
.plan-row.plan-popular .plan-row-details { background-color: var(--c-navy-2); border-color: var(--c-navy-line); }
.plan-row.plan-popular .plan-chip { background-color: var(--c-navy-3); border-color: var(--c-navy-line); color: var(--c-on-navy); }
.plan-row.plan-popular .plan-chip .bi { color: var(--c-ok-inv); }
.plan-row.plan-popular .plan-billing-table,
.plan-card.plan-popular .plan-billing-table {
  --bs-table-color: var(--c-on-navy);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--c-navy-line);
  color: var(--c-on-navy);
}
.plan-row.plan-popular .plan-billing-table tr.cycle-current > td,
.plan-card.plan-popular .plan-billing-table tr.cycle-current > td { background-color: var(--c-navy-3); }
/* Lacivertte ikincil düğme (ayrıntı açma, stokta yok): ters çerçeveli; kontrol sınırı ≥ 3:1 (1.4.11) için on-navy-3 */
.plan-row.plan-popular .btn-soft {
  --bs-btn-color: var(--c-on-navy);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--c-on-navy-3);
  --bs-btn-hover-color: var(--c-on-navy);
  --bs-btn-hover-bg: var(--c-navy-2);
  --bs-btn-hover-border-color: var(--c-on-navy-3);
  --bs-btn-active-color: var(--c-on-navy);
  --bs-btn-active-bg: var(--c-navy-3);
  --bs-btn-active-border-color: var(--c-on-navy-3);
}
/* Popüler planın "Başlayın/Yapılandır" düğmesi = sayfanın TEK birincil aksiyonu (§3.12: popüler kartta .btn-primary). WStyle .btn-light
   basar (markup aynen); yalnız bu bağlamda brand dolguya döner. Diğer kartlar .btn-soft (ikincil) kalır. */
.plan-card.plan-popular .btn-light,
.plan-row.plan-popular .btn-light {
  --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);
}

/* Alt kategori kartı (drilldown, category-server.css): hover nötr (pembe zemin yok), fiyat mürekkep rengi (kırmızı = aksiyon) */
.cat-card:hover { border-color: var(--c-line-strong); background-color: var(--c-surface-2); }
.cat-card-price-amount { color: var(--c-ink); font-weight: 600; }
.cat-card:hover .cat-card-chevron { color: var(--c-ink); }
/* Alt kategori kartının ve boş sekmenin ikon kutusu dekordur (aksiyon değil): pembe zemin + kırmızı ikon yerine nötr (§1 kırmızı alan) */
.cat-card .icon-disc:not(.is-logo),
.tab-content .wcp-empty-state .icon-disc { background-color: var(--c-surface-3); color: var(--c-ink-2); }

/* "≈ döviz" notu (fx-note.js; ayar st_fx_note, varsayılan kapalı): fiyatın altında küçük, ikincil; yalnız metin */
.st-fx-row { margin-block-start: .125rem; font-size: .8125rem; line-height: 1.4; color: var(--c-ink-3); }
.st-fx-row[hidden] { display: none; }
.plan-card.plan-popular .st-fx-row,
.plan-row.plan-popular .st-fx-row { color: var(--c-on-navy-2); }
.order-summary .st-fx-row { margin-block: -.25rem .5rem; text-align: end; }

/* ============================================================================================================
   3) Huni ortak — ikon kutuları, seçim kartları, fiyat çipleri (configure · checkout · pay)
   ============================================================================================================ */
/* Bölüm başlığı ikon kutusu: dekor → nötr (§1 kırmızı alan ≤ %8; v3 kart başlığı ikonu ink). Ürün logosu (.is-logo) dokunulmaz */
.checkout-shell .icon-disc:not(.is-logo) { background-color: var(--c-surface-3); color: var(--c-ink-2); }
/* Seçenek/etiket ikon kutusu (ödeme yöntemi, kayıtlı kart şeması, ek seçenek): kırmızı ikon yerine mürekkep (veri ikonu aynen) */
.checkout-shell .option-media, .checkout-shell .label-media { color: var(--c-ink-2); }

/* Seçim kartı (§3.5 .radio-card): hover nötr kenar; seçili = brand kenar + brand-soft/40 zemin. box-shadow'a dokunulmaz (odak). */
.option-card:hover { border-color: var(--c-line-strong); }
.option-card:has(.form-check-input:checked),
.option-card.option-card-active {
  border-color: var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand-soft) 40%, var(--c-surface));
}
/* Fiyat çipi: pembe hap → nötr rozet; fiyat mürekkep rengi */
.price-chip {
  border-radius: var(--radius-badge);
  background-color: var(--c-surface-3);
  color: var(--c-ink);
  font-weight: 600;
}

/* Dar ekran (375 px) taşmaları: oturum paneli düğmesi ("Siz değil misiniz? Çıkış Yap") dört satıra kırılıyordu → düğme kırılmaz, sığmazsa
   alt satıra iner; bakiye anahtarı çipi WStyle'da 8rem'de kesiliyordu (inline-flex'te üç nokta da çıkmaz) → çip sütun içinde sarılır */
[data-signedin-panel] { flex-wrap: wrap; }
[data-signedin-panel] > .btn { white-space: nowrap; }
.option-card-toggle .price-chip { max-inline-size: 100%; overflow: visible; white-space: normal; }
/* Ödeme yöntemi kartı: hover nötr; seçili başlık pembe dolgu yerine brand-soft/40 (kenar ve halka WStyle'da brand) */
.payment-option:hover { border-color: var(--c-line-strong); }
.payment-option:has(input[name=payment_method]:checked) .payment-option-head,
.payment-option:has(input[name=pmethod]:checked) .payment-option-head {
  background-color: color-mix(in srgb, var(--c-brand-soft) 40%, var(--c-surface));
}

/* ============================================================================================================
   4) Yapılandırma (configure.css)
   ============================================================================================================ */
/* Dönem kartı: dar ekranda (375 px, iki sütun) "3 Aylık" adı tasarruf rozetinin yanında harf harf kırılıyordu → ad kırılmaz,
   rozet sığmazsa alt satıra iner */
.billing-cycle-card > .d-flex { flex-wrap: wrap; row-gap: .25rem; }
.billing-cycle-card .billing-cycle-name { white-space: nowrap; }
/* Ek seçenek grupları segmenti (§3.5 .seg): nötr kutu, seçili = lacivert (koyuda ters); WStyle'ın pembe zemini yok */
.addon-seg {
  border-color: var(--c-line);
  border-radius: var(--radius-btn);
  background: var(--c-surface-2);
}
.addon-seg-item { border-radius: var(--radius-mini); color: var(--c-ink-3); }
.addon-seg-item:hover { color: var(--c-ink); }
.addon-seg-item[aria-selected=true] { background: var(--c-navy); color: var(--c-on-navy); box-shadow: none; }
:root[data-bs-theme=dark] .addon-seg-item[aria-selected=true] { background: var(--c-on-navy); color: var(--c-navy); box-shadow: none; }
/* Hap seçici (radyo "pill"): kutu 6, hap ve kayan seçim izi 4 (§2.3) */
.addon-pills { border-radius: var(--radius-btn); }
.addon-pill, .addon-pill-thumb { border-radius: var(--radius-mini); }
/* "Zorunlu / İsteğe bağlı" etiketi: pembe hap → nötr rozet */
.addon-row-badge { border-radius: var(--radius-badge); color: var(--c-ink-2); background-color: var(--c-surface-3); }
/* Kaydırıcı değer kutusu: pembe zemin yerine alan görünümü (mono olmayan sayı, tnum) */
.range-value { background-color: var(--c-surface-2); border-color: var(--c-line); color: var(--c-ink); }
/* Alan adı kartı (VDS'de kapalı; açık ürünlerde): kart 8, öneri hover nötr, NS rozeti nötr */
.domain-result, .domain-suggestions, .ns-list, .sms-doc { border-radius: var(--radius-card); }
.domain-suggestion:hover { background-color: var(--c-surface-2); }
.ns-badge { border-radius: var(--radius-badge); background-color: var(--c-surface-3); color: var(--c-ink-2); }
.host-feat-item i { color: var(--c-ink-3); }

/* ============================================================================================================
   5) Sepet (cart.css): kalem kartı ayrıntısı 8, haplar → rozet/düğme köşesi, dekor ikonları nötr
   ============================================================================================================ */
.cart-item-details { border-radius: var(--radius-card); }
.cart-deal-bubble, .cart-promo-of, .cart-chip, .cart-auto-tag { border-radius: var(--radius-badge); }
.cart-config-btn { border-radius: var(--radius-btn); }
.cart-item-specs li i, .cart-chip i { color: var(--c-ink-3); }
.cart-item-section-toggle:hover, .summary-group-toggle:hover, .rail-addons-toggle:hover { color: var(--c-ink); }

/* ============================================================================================================
   6) Ödeme (checkout.css): havale referansı ve kilitli fatura alanı nötr; kilit blur'u yok. (Kart formunun yanındaki
      "Ödemeniz güvende" kutusu .checkout-secure-cover şablonda basılmaz — checkout-card-fields.tpl, pay.tpl ST:T07.)
   ============================================================================================================ */
.bank-reference { background-color: var(--c-surface-2); border-color: var(--c-line); }
.bank-reference-label { color: var(--c-ink-3); }
.pay-detail-list { border-radius: var(--radius-card); }
/* Misafir fatura alanı kilidi: arkadaki iskelet bulanıklaştırılmaz (CLAUDE.md "Yasak: blur"), soluklaşır; üstte opak kart */
.pay-locked-blur { filter: none; opacity: .4; }
.pay-locked-card { border-radius: var(--radius-card); }
.pay-locked-icon { color: var(--c-ink-3); }
/* Sipariş sonucu: kurulum notunun önündeki roket simgesi süs (CLAUDE.md "Yasak": anlam taşımayan ikon); durum simgeleri (onay, kum saati) kalır */
.checkout-shell .bi-rocket-takeoff { display: none; }

/* ============================================================================================================
   7) Özet rayı (checkout-shell.css .checkout-split-aside): kırmızı→lacivert gradyan panel → YÜZEY (§3.13 sepet özeti kartı).
      WStyle'ın ray değişkenleri (--rail-*) token'lara bağlanır; card/stack yerleşimleri zaten yüzeydir, aynı dil. Geniş ekranda
      sabit ray geometrisi (konum, genişlik) WStyle'da kalır; yalnız renk/kenar değişir.
   ============================================================================================================ */
.checkout-split-aside {
  --rail-fg: var(--c-ink);
  --rail-fg-muted: var(--c-ink-3);
  --rail-fg-faint: var(--c-ink-4);
  --rail-line: var(--c-line);
  --rail-line-strong: var(--c-line-strong);
  --rail-fill: var(--c-surface-2);
  --rail-fill-strong: var(--c-surface-3);
  --rail-discount: var(--c-ok);
  --bs-secondary-color: var(--c-ink-3);
  --bs-success-text-emphasis: var(--c-ok);
  --bs-success-bg-subtle: var(--c-ok-soft);
  --bs-success-border-subtle: color-mix(in srgb, var(--c-ok) 30%, var(--c-surface));
  color: var(--c-ink-2);
  background-color: var(--c-surface);
  background-image: none;
  border-block-start: 1px solid var(--c-line);
}
[dir=rtl] .checkout-split-aside { background-image: none; }
@media (min-width: 992px) {
  body.checkout-shell:not(.checkout-shell-centered) .checkout-split-aside { border-inline-start-color: var(--c-line); }
}
:is(.checkout-layout-card, .checkout-layout-stack) .checkout-split-aside .order-summary { border-radius: var(--radius-card); }
.checkout-split-aside .summary-label { color: var(--c-ink-2); }
/* Rayın birincil düğmesi: WStyle beyaz dolgu + kırmızı metin veriyordu (kırmızı zemin için) → standart brand birincil. Kaldırma/gölge yok. */
.checkout-split-aside .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-disabled-color: var(--c-ink-3);
  --bs-btn-disabled-bg: var(--c-surface-3);
  --bs-btn-disabled-border-color: var(--c-surface-3);
  font-weight: 500;
}
.checkout-split-aside .btn-primary:hover { box-shadow: none; }
/* Raydaki alanlar (kupon): standart alan görünümü (§3.5) — WStyle'ın yarı saydam beyaz alanı yüzeyde görünmezdi */
.checkout-split-aside .form-control { background-color: var(--c-surface); border-color: var(--c-line-input); color: var(--c-ink); }
.checkout-split-aside .form-control::placeholder { color: var(--c-ink-4); }
.checkout-split-aside .form-control:focus {
  background-color: var(--c-surface);
  border-color: var(--c-brand);
  color: var(--c-ink);
  box-shadow: 0 0 0 2px rgba(var(--c-brand-rgb), .25);
}
.checkout-split-aside .invalid-feedback { color: var(--c-danger); }
.checkout-split-aside hr { opacity: 1; border-color: var(--c-line); }
/* Kaydırma çubuğu (uzun kalem/indirim listesi): beyaz yerine çizgi tonu */
.checkout-split-aside .order-summary-items,
.checkout-split-aside .summary-discounts-body { scrollbar-color: var(--c-line-strong) transparent; }
.checkout-split-aside .order-summary-items::-webkit-scrollbar-thumb,
.checkout-split-aside .summary-discounts-body::-webkit-scrollbar-thumb { background-color: var(--c-line-strong); border-radius: var(--radius-mini); }

/* Sabit lokasyon satırı (configure özeti, sepet özeti, rail kalemleri; D-17): diğer özet satırlarıyla aynı dil, değer yarı kalın */
.st-summary-location .summary-value { font-weight: 600; color: var(--c-ink); }
/* Vergi satırı: etiket esnek kutu olduğundan ad ile oran arasındaki boşluk çöküyordu ("Vergi(%20)") — oran kendi boşluğunu taşır */
.order-summary-line .summary-label > [data-role="tax-row-rate"] { margin-inline-start: .25rem; }

/* ---- 50-auth.css ---- */
/* features/50-auth.css — sahibi T08 (tasarım §4.6; docs/tasarim-sistemi.md §2.2, §3; T03 notu "T08 (auth)").
   Kimlik doğrulama yüzeyi: layouts/auth.tpl (T03) + views/auth/*.tpl + components/invite-access.tpl. Yalnız görünüm:
   WStyle auth.css'in sınıf adları, 7 adımlı giriş makinesi (data-auth-step), .otp-input ve sosyal düğmeler aynen; burada boyanır.
   Renk yalnız var(--c-*) (hex yok — lint). Hareket EKLENMEZ (WStyle'ın authStageRise'ı components.css §10 (b)'de kapalı).
   derle.sh bu parçayı features.css'e ad sırasıyla birleştirir; auth.css'ten SONRA yüklenir (D-4), eşit özgüllük yeter. */

/* ---- 1) Sahne (≥ 992 px): düz lacivert marka paneli. Başlık Seturack ölçeğinde (.h-section: Bricolage 600, opsz 48, 30→38 px);
          WStyle 800 ağırlık istiyordu (Bricolage yalnız 600 yüklü). Kicker imzası: metnin üstünde 32×3 px kırmızı çizgi (§3.18). ---- */
.auth-stage {
  border-inline-end: 1px solid var(--c-navy-line);    /* koyu modda navy ↔ surface ayrışması 1,04:1: ton farkı + 1 px çizgi (§2.1) */
}
.auth-stage-copy::before {
  content: "";
  display: block;
  inline-size: 2rem;
  block-size: 3px;
  margin-block-end: 1.5rem;
  background-color: var(--c-brand);
}
.auth-stage-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "opsz" 48;
  font-size: clamp(1.875rem, 1.3rem + 1.1vw, 2.375rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-block-end: 1rem;
  color: var(--c-on-navy);
}
.auth-stage-text {
  font-size: 1rem;
  line-height: 1.625;
  color: var(--c-on-navy-2);                           /* lacivert üstünde AA (contrast-table.mjs on-navy-2/navy çifti) */
}
.auth-stage-foot { color: var(--c-on-navy-2); }
.auth-stage-foot a,
.auth-stage-foot a:hover {
  color: var(--c-on-navy);
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
}

/* ---- 2) Form sütunu: WStyle'ın sahneye düşen büyük gölgesi yok (kart dili: 1 px kenar, gölge yalnız menü/modal — §3) ---- */
@media (min-width: 992px) {
  .auth-form,
  [dir=rtl] .auth-form { box-shadow: none; }
}
/* Uzun formda (kayıt) sahne yapışkan ve 100svh: altında kalan sol sütun zemini de lacivert olsun (tam sayfa çekim / aşırı kaydırma) */
@media (min-width: 992px) {
  .auth-split { background-color: var(--c-navy); }
}
/* Telefonda form ekranın ortasında yüzmesin: marka şeridinin hemen altından başlar, kısa BTK satırı sayfa sonunda kalır
   (G2 entegrasyon notu "auth'un 375 px'te dikey boşluğu"). Masaüstünde WStyle'ın dikey ortalaması korunur. */
@media (max-width: 991.98px) {
  .auth-form-body { justify-content: flex-start; }
}

/* ---- 3) Başlıklar: her adımın başlığı (h1.h3 giriş/şifre/etkinleştirme/davet, h2.h3 sonraki adımlar, .auth-title kayıt) sayfa
          başlığı rolündedir → .h-page ölçeği (Bricolage 600, opsz 36, 26→30 px). components.css'in "h1.h3 = kart başlığı (sans)"
          kuralını (0,1,1) bu yüzeyde (0,2,1) ile açıkça geri alır. Kayıt adımlarının h2.h6 başlıkları sans kalır. ---- */
.auth-form-inner :is(h1, h2).h3,
.auth-form-inner .auth-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "opsz" 36;
  font-size: clamp(1.625rem, 1.45rem + .75vw, 1.875rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--c-ink);
}

/* ---- 4) Durum simgesi: nötr disk; anlam yalnız başarı/tehlike çeşitlerinde renk alır (kırmızı yalnız birincil aksiyonda) ---- */
.auth-icon {
  inline-size: 3rem;
  block-size: 3rem;
  font-size: 1.25rem;
  background-color: var(--c-surface-3);
  color: var(--c-ink-2);
}
.auth-icon-success { background-color: var(--c-ok-soft); color: var(--c-ok); }
.auth-icon-danger { background-color: var(--c-danger-soft); color: var(--c-danger); }

/* ---- 5) Uyarı: Seturack bant dili (.alert ile aynı: 6 px, sol 4 px durum çizgisi, metin mürekkep, simge durum renginde) ---- */
.auth-alert {
  border-radius: var(--radius-btn);
  border-inline-start-width: 4px;
  color: var(--c-ink);
}
.auth-alert-danger {
  background-color: var(--c-danger-soft);
  border-color: transparent;
  border-inline-start-color: var(--c-danger);
}
.auth-alert-danger > i { color: var(--c-danger); }
.auth-alert-warning {
  background-color: var(--c-warn-soft);
  border-color: transparent;
  border-inline-start-color: var(--c-warn);
}
.auth-alert-warning > i { color: var(--c-warn); }

/* ---- 6) Kod girişi: hane kutuları ve doğrulama kodu veri gibi okunur (Plex Mono 500, §2.2 .mono); köşe buton yarıçapı ---- */
.otp-input.form-control {
  font-family: var(--font-mono);
  font-weight: 500;
  border-radius: var(--radius-btn);
}
[data-verify-form] input[name="code"] {
  font-family: var(--font-mono);
  letter-spacing: .3em;
}

/* ---- 7) Kayıt adımları: etkin adımın numarası kırmızı DOLGU almaz (kırmızı tek birincil aksiyona, "Hesap Oluştur"a kalır) →
          mürekkep dolgu; tamamlanan adım onay tonunda; numaralar mono. Bağlantı çizgisi dekoratif ayraç rengi. ---- */
.reg-step-num {
  font-family: var(--font-mono);
  font-weight: 500;
  border-color: var(--c-line-strong);
  background-color: var(--c-surface);
  color: var(--c-ink-3);
}
.reg-step:focus-within .reg-step-num {
  background-color: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-surface);
}
.reg-step.is-done .reg-step-num {
  background-color: var(--c-ok-soft);
  border-color: var(--c-ok-soft);
  color: var(--c-ok);
}
.reg-step::before { background-color: var(--c-line); }
/* Telefonda adım girintisi alanları daraltmasın: numara 28 px, girinti 40 px (WStyle 34/50 px); çizgi numaranın ortasından */
@media (max-width: 575.98px) {
  .reg-step { padding-inline-start: 2.5rem; }
  .reg-step-num { inline-size: 1.75rem; block-size: 1.75rem; font-size: .75rem; }
  .reg-step-head { min-block-size: 1.75rem; }
  .reg-step::before { inset-inline-start: calc(.875rem - 1px); inset-block-start: 2.05rem; }
}

/* Aranabilir seçici (Tom Select) odağı artık KÜRESEL: components.css §2 (c) `.ts-wrapper.form-select.focus` (T03 ikinci düzeltme
   turu, T08 isteği). Buradaki birebir aynı kapsamlı kural G2 yeniden koşusunda kaldırıldı (iki kural birlikte kalmasın — T03 → T08
   isteği; ölçüm: register/temel kenar brand 4,84 açık / 3,40 koyu, yalnız küresel kuralla). */

/* ---- 8) Davet erişim özeti: "Tam hesap erişimi" rozeti pembe (primary-subtle) yerine nötr rozet — rozet dili her yerde aynı
          (bridge.css: secondary-subtle = surface-3/ink-2). Bootstrap yardımcıları !important taşıdığı için kapsamlı değişkenle. ---- */
.invite-access {
  --bs-primary-bg-subtle: var(--c-surface-3);
  --bs-primary-text-emphasis: var(--c-ink);
}

/* ---- 60-panel.css ---- */
/* ---------------------------------------------------------------------------------------------------------------------
 * features/60-panel.css — Seturack · müşteri paneli: dashboard (hero + standard), hizmet/fatura/talep listeleri, fatura detayı,
 * toplu ödeme, destek talebi (liste, detay, oluşturma, yanıt parçası). Sahibi T09 (tasarım §4.7; docs/tasarim-sistemi.md §1, §3.1–3.4,
 * §3.10, §3.11, §4 "Panel dashboard / Faturalar / Destek"). derle.sh bu parçayı features.css'e ad sırasıyla birleştirir (D-9).
 *
 * Kural: markup'a dokunmadan WStyle sınıfları boyanır; Seturack'ın eklediği sınıflar `st-` önekli (views/account/*.tpl ST:T09
 * blokları). Renk yalnız var(--c-*) / köprü değişkenleri (hex yok — lint). Hareket EKLENMEZ (yalnız renk geri bildirimi;
 * küresel reduce sıfırlaması components.css'te). Yükleme sırası (D-4): WStyle yüzey CSS'i (dashboard.css, default.css list-*,
 * invoice-detail.css, support-tickets.css, ticket-*.css) bu dosyadan ÖNCE gelir → eşit özgüllükte burası kazanır.
 *
 * İçindekiler
 *   1) Panel yardımcıları: .st-btn-1 (birincil görünüm) · .st-btn-2 (ikincil görünüm)
 *   2) Durum rozeti eşlemesi — TEK YER
 *   3) Dashboard hero: lacivert yüzey, tek birincil düğme, bakiye kartı
 *   4) Dashboard: KPI/istatistik kartları, uyarı bandı, paneller, satırlar, boş durum, ölçer
 *   5) Dashboard standard (dashx-*)
 *   6) Kayıt listeleri (hizmetler / faturalar / talepler + T13'ün alan adı listesi aynı dili alır)
 *   7) Fatura detayı + toplu ödeme
 *   8) Destek: liste ekleri, detay, mesaj akışı, oluşturma
 *   9) Yarıçap normalizasyonu (kart kökleri 8 px — birim-notlari/T03.md "yarıçap")
 * ------------------------------------------------------------------------------------------------------------------- */

/* =====================================================================================================================
   1) Panel yardımcıları — Bootstrap buton rengi değişkenlerle çizilir; .btn.st-btn-* (0,2,0) varyant sınıfının (0,1,0)
      değişkenlerini ezer. Mevcut sınıf silinmeden (tasarım §2.5-5) görünüm rolü değişir.
   ===================================================================================================================== */
.btn.st-btn-1 {
  --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);
}
.btn.st-btn-2 {
  --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);
}

/* =====================================================================================================================
   2) Durum rozeti eşlemesi — TEK YER (tasarım §4.7; docs/tasarim-sistemi.md §3.3: ok = çalışıyor/ödendi · warn = bekliyor/
      ödenmemiş · danger = gecikmiş/askıda · info = bilgi/işleniyor · nötr = iptal/kapalı · brand YALNIZ "Popüler").
      Hizmet/fatura/talep durumunu WStyle üç yerde basar (preset satırı, dashboard paneli, detay başlığı) ve "açık talep" ile
      "destek ekibi" etiketini brand-soft (pembe) rozetle çizer; panel bağlamında bu rozet info'ya eşlenir. Değişken rozetin
      KENDİSİNDE çözülür → JS'in sonradan güncellediği rozet (ticket-detail data-role="ticket-status") de aynı rengi alır.
   ===================================================================================================================== */
:is(.list-item, .dash-panel, .td-subject-row, .ticket-aside, .ticket-msg-author) .badge.bg-primary-subtle {
  --bs-primary-bg-subtle: var(--c-info-soft);
  --bs-primary-text-emphasis: var(--c-info);
}
/* Rozet içi dönen dişli (bekleyen hizmet, işlenen talep) zaten durağan (components.css §10 b); ikon rozet metniyle aynı renk */
.badge .wcp-status-spin { animation: none; }

/* =====================================================================================================================
   3) Dashboard hero — lacivert marka yüzeyi (docs/tasarim-sistemi.md §1 "lacivert = güven ve marka yüzeyi", "kırmızı alan ≤ %8";
      birim-notlari/T03.md T09 maddesi). WStyle'ın brand→secondary gradyanı + nokta deseni kalkar. Özgüllük: WStyle'ın
      [dir=rtl][data-bs-theme=dark] .dash-hero (0,3,0) kuralını da yenmek için `:root .dash .dash-hero` (0,3,0) + sonra gelir.
   ===================================================================================================================== */
:root .dash .dash-hero {
  background: var(--c-navy);
  color: var(--c-on-navy);
  border: 1px solid var(--c-navy-line);
  border-radius: var(--radius-card);
  box-shadow: none;
  /* odak halkasının boşluğu lacivert (bridge.css .chrome-dark ile aynı dil) */
  --wstyle-focus-ring: 0 0 0 2px var(--c-navy), 0 0 0 4px var(--c-focus);
}
:root .dash .dash-hero::before { content: none; }
.dash-hero .dash-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--c-on-navy-2);
}
.dash-hero .dash-eyebrow::before {                      /* kicker çizgisi (10-temel .kicker ile aynı ölçü) */
  content: "";
  flex: none;
  inline-size: 2rem;
  block-size: 3px;
  background-color: var(--c-brand);
}
.dash-hero .dash-greeting {
  color: var(--c-on-navy);
  font-weight: 600;
  font-variation-settings: "opsz" 48;
}
.dash-hero .dash-health { color: var(--c-on-navy-2); }
/* Durum noktası: anlam taşır (hesapta bekleyen iş var/yok), döngü yok */
.dash-hero .dash-pulse { --pulse-color: var(--c-ok-inv); box-shadow: none; }
.dash-hero .dash-pulse-warn { --pulse-color: var(--c-warn-inv); }

/* Aksiyonlar: TEK dolu düğme (.st-dash-cta, data-st-primary), ikincil ters çerçeveli (.st-dash-btn-2), alan adı metin bağlantısı */
.dash-hero-actions { align-items: center; gap: .75rem; }
.dash-hero .dash-btn-light,
.dash-hero .dash-btn-glass {
  min-block-size: 2.5rem;
  padding-block: .5rem;
  padding-inline: 1rem;
  border-radius: var(--radius-btn);
  font-size: .875rem;
  font-weight: 500;
  box-shadow: none;
}
.dash-hero .st-dash-cta {
  background: var(--c-brand);
  border: 1px solid var(--c-brand);
  color: var(--c-white);
}
.dash-hero .st-dash-cta:hover,
.dash-hero .st-dash-cta:focus-visible {
  background: var(--c-brand-hover);
  border-color: var(--c-brand-hover);
  color: var(--c-white);
}
.dash-hero .st-dash-btn-2 {
  background: transparent;
  border: 1px solid var(--c-on-navy-3);
  color: var(--c-on-navy);
}
.dash-hero .st-dash-btn-2:hover,
.dash-hero .st-dash-btn-2:focus-visible {
  background: var(--c-navy-3);
  border-color: var(--c-on-navy-2);
  color: var(--c-on-navy);
}
.dash-hero .st-dash-textlink {
  min-block-size: 2.5rem;
  padding-inline: .25rem;
  background: transparent;
  border-color: transparent;
  color: var(--c-on-navy-2);
  text-decoration: underline;
  text-decoration-color: var(--c-on-navy-3);
  text-underline-offset: .2em;
}
.dash-hero .st-dash-textlink:hover,
.dash-hero .st-dash-textlink:focus-visible {
  background: transparent;
  border-color: transparent;
  color: var(--c-on-navy);
  text-decoration-color: currentColor;
}

/* Bakiye kartı (T03: blur yok, opak navy-2): metin on-navy tonları; tutar Plex Sans 600 (fiyat display fontla basılmaz) */
.dash-hero .dash-balance-card { border-radius: var(--radius-card); }
.dash-hero .dash-balance-label,
.dash-hero .dash-balance-note { color: var(--c-on-navy-2); }
.dash-hero .dash-balance-value {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--c-on-navy);
}
@media (max-width: 767.98px) {
  /* mobil: üç eylem tek satıra sıkışmaz; birincil tam genişlik, diğerleri altta */
  .dash-hero-actions .st-dash-cta { flex: 1 1 100%; }
  .dash-hero-actions .st-dash-btn-2 { flex: 1 1 0; }
  .dash-hero-actions .st-dash-textlink { flex: 0 1 auto; }
}

/* =====================================================================================================================
   4) Dashboard: istatistik/KPI kartları, uyarı bandı, paneller
   ===================================================================================================================== */
/* Dekoratif filigran ikon ve çok renkli ikon çipleri yok (docs/tasarim-sistemi.md §1 "çok renkli ikon" YAPMA) */
.dash-stat-watermark { display: none; }
:is(.dash-stat-ico, .dashx-kpi-ico, .dashx-balance-ico, .dashx-quick-ico) {
  --bs-primary-bg-subtle: var(--c-surface-3);  --bs-primary-text-emphasis: var(--c-ink-2);
  --bs-info-bg-subtle: var(--c-surface-3);     --bs-info-text-emphasis: var(--c-ink-2);
  --bs-warning-bg-subtle: var(--c-surface-3);  --bs-warning-text-emphasis: var(--c-ink-2);
  --bs-success-bg-subtle: var(--c-surface-3);  --bs-success-text-emphasis: var(--c-ink-2);
  border-radius: var(--radius-btn);
}
.dash-stat {
  border-color: var(--c-line);
  box-shadow: var(--sh-card);
}
.dash-stat:hover { border-color: var(--c-line-strong); box-shadow: var(--sh-card); }
.dash-stat-label { font-size: .875rem; font-weight: 500; color: var(--c-ink-2); }
/* Döşeme sayısı izinlere göre 1–4 (show_* bayrakları): sabit 4 sütun yerine eşit dağılım — boş sütun kalmaz */
@media (min-width: 768px) {
  .dash-stats, .dashx-kpis { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
}
/* Mobilde 2 sütun: tek sayıda döşemede sondaki tam genişlik alır (3 döşemede boş yarım hücre kalmaz; 375 px G3 çekimi) */
@media (max-width: 767.98px) {
  .dash-stats > .dash-stat:last-child:nth-child(odd),
  .dashx-kpis > .dashx-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.dash-stat-value, .dashx-kpi-value { white-space: nowrap; }
@media (max-width: 575.98px) {
  .dash-stat-value, .dashx-kpi-value { font-size: 1.375rem; }
  .dash-stat-label { font-size: .8125rem; }
}
.dash-stat-value,
.dashx-kpi-value,
.dashx-balance-value {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--c-ink);
}

/* Uyarı bandı (dash/list): soft zemin + sol 4 px çizgi (§3.9); bant içi düğme ikincil, hover'da DOLGU yok (§3.1 .btn-danger) */
.dash-alert, .list-alert {
  border-inline-start-width: 4px;
  border-radius: var(--radius-btn);
}
.dash-alert-danger, .list-alert-danger { border-inline-start-color: var(--c-danger); }
.dash-alert-warning, .list-alert-warning { border-inline-start-color: var(--c-warn); }
/* Mobilde WStyle bant düğmesini tam genişliğe yayar (.list-alert .btn{flex:1 1 100%}); kapat düğmesi tek başına alt satıra
   düşmesin diye sağ üst köşeye sabitlenir, metin ona yer bırakır (375 px G3 çekimi: faturalar, hizmetler, talepler) */
@media (max-width: 575.98px) {
  .list-alert:has(> .wstyle-alert-close) { position: relative; }
  .list-alert:has(> .wstyle-alert-close) > .list-alert-body { padding-inline-end: 2rem; }
  .list-alert > .wstyle-alert-close { position: absolute; inset-block-start: .5rem; inset-inline-end: .5rem; margin: 0; }
}
:is(.dash-alert, .list-alert) :is(.btn-outline-danger, .btn-outline-warning):not(.st-btn-1) {
  --bs-btn-bg: var(--c-surface);
  --bs-btn-hover-bg: var(--c-surface-2);
  --bs-btn-hover-color: var(--bs-btn-color);
  --bs-btn-hover-border-color: var(--bs-btn-border-color);
  --bs-btn-active-bg: var(--c-surface-3);
  --bs-btn-active-color: var(--bs-btn-color);
}
:is(.dash-alert, .list-alert) .btn-outline-danger:not(.st-btn-1) { --bs-btn-color: var(--c-danger); --bs-btn-border-color: var(--c-brand-line); }
:is(.dash-alert, .list-alert) .btn-outline-warning:not(.st-btn-1) { --bs-btn-color: var(--c-warn); --bs-btn-border-color: var(--c-line-strong); }
/* Faturalar bandındaki "Şimdi öde" sayfanın tek birincili (invoices.tpl ST:T09) — st-btn-1 değişkenleri bandın kuralını da yener */
.list-alert .btn.st-btn-1 {
  --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);
}

/* Paneller: kart dili (1 px kenar + 1 px gölge, 8 px); başlık kart başlığıdır → Plex Sans (display değil) */
.dash-panel {
  border-color: var(--c-line);
  box-shadow: var(--sh-card);
}
.dash-panel-head { border-block-end-color: var(--c-line); }
.dash-panel-title {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--c-ink);
}
.dash-panel-link { font-size: .8125rem; font-weight: 500; color: var(--c-brand-text); }
.dash-service-name, .dash-row-title { color: var(--c-ink); }
.dash-service-name:hover, .dash-row-title:hover { color: var(--c-brand-text); }
.dash-service-meta, .dash-row-sub { color: var(--c-ink-3); }
/* Mono = veri (IP, belge no — §1 YAP); tutar ve tarih cümlesi Plex Sans tabular kalır */
.st-dash-ip { font-family: var(--font-mono); font-size: .75rem; }
.dash-row-title.st-dash-docno { font-family: var(--font-mono); font-size: .875rem; font-weight: 500; }

/* Boş durum (§3.10): nötr ikon, renkli daire yok */
.dash-empty-ico {
  background: var(--c-surface-3);
  color: var(--c-ink-3);
}
.dash-empty-title { color: var(--c-ink); }
.dash-empty-text { color: var(--c-ink-3); }

/* Ölçer / gösterge (§3.11): değer info, ≥ eşik warn/danger; KIRMIZI (brand) kota/süre için kullanılmaz */
.dash-meter { background: var(--c-surface-3); border-radius: var(--radius-mini); }
.dash-meter > span { background: var(--c-info); }
.dash-meter.is-soon > span { background: var(--c-warn); }
.dash-meter.is-critical > span { background: var(--c-danger); }
.dash-gauge-track { stroke: var(--c-surface-3); }
.dash-gauge-fill { stroke: var(--c-info); }
.dash-gauge.is-high .dash-gauge-track,
.dash-gauge.is-critical .dash-gauge-track { stroke: var(--c-surface-3); }
.dash-gauge.is-high .dash-gauge-fill { stroke: var(--c-warn); }
.dash-gauge.is-critical .dash-gauge-fill { stroke: var(--c-danger); }
.dash-gauge-val, .dash-gauge-cap { fill: var(--c-ink-3); color: var(--c-ink-3); }
.dash-gauge-skeleton { background: var(--c-surface-3); border-radius: var(--radius-mini); }
.dash-service-pending { color: var(--c-info); }

/* =====================================================================================================================
   5) Dashboard standard (dashx-*): sol ray kartları, KPI, başlık + tek birincil düğme
   ===================================================================================================================== */
.dashx-card, .dashx-kpi {
  border-color: var(--c-line);
  border-radius: var(--radius-card);
  box-shadow: var(--sh-card);
}
.dashx-kpi:hover { background: var(--c-surface-2); border-color: var(--c-line-strong); }
.dashx-kpi-label { font-weight: 500; color: var(--c-ink-2); }
.dashx-identity-name { font-weight: 600; color: var(--c-ink); }
.dashx-identity-link { color: var(--c-brand-text); }
.dashx-quick-title {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--c-ink-3);
}
.dashx-quick-item:hover { background: var(--c-surface-2); color: var(--c-ink); }
.dashx-quick-label { font-weight: 500; }
.dashx-head { justify-content: flex-start; }
.dashx-head .dash-eyebrow {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--c-brand-text);
}
.dashx-greeting { font-weight: 600; color: var(--c-ink); }
.dashx-head .dash-health {
  margin-inline-start: auto;
  border-color: var(--c-line);
  border-radius: var(--radius-btn);
  color: var(--c-ink-2);
}
/* G4 (T12 isteği): sağlık çipi yalnız durum varken basılır; yokken tek birincil düğme yine sağa yaslanır */
.dashx-head .dashx-head-lead + .st-dashx-cta { margin-inline-start: auto; }
.dashx-head .dash-pulse:not(.dash-pulse-warn) { --pulse-color: var(--c-ok); }
.dashx-head .dash-pulse-warn { --pulse-color: var(--c-warn); }
.dash-pulse { box-shadow: none; }
@media (max-width: 575.98px) {
  .dashx-head .dash-health { margin-inline-start: 0; }
  .dashx-head .st-dashx-cta { flex: 1 1 100%; }
}

/* =====================================================================================================================
   6) Kayıt listeleri (default.css .list-*; servicesList / invoicesList / ticketsList preset satırları). Satır dili:
      ad ink 600 · kimlik (hostname, IP, belge no) mono · tutar Plex Sans 600 · tarih mono · durum rozeti §2 · nötr çip 4 px.
   ===================================================================================================================== */
.list-title {
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variation-settings: "opsz" 36;
}
@media (min-width: 640px) { .list-title { font-size: 2rem; } }

/* Özet döşemeleri (filtre segmenti, aria-pressed): nötr kart; seçili = kırmızı çerçeve (seçim rengi, §1); filigran ve renkli şerit yok */
.list-tile {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  box-shadow: var(--sh-card);
  --list-accent: var(--c-ink-2);
}
.list-tile::before { content: none; }
.list-tile-watermark { display: none; }
.list-tile-success { --list-accent: var(--c-ok); }
.list-tile-warning { --list-accent: var(--c-warn); }
.list-tile-danger  { --list-accent: var(--c-danger); }
.list-tile-info    { --list-accent: var(--c-info); }
.list-tile-ico {
  border-radius: var(--radius-btn);
  background-color: var(--c-surface-3);
  color: var(--list-accent);
}
.list-tile:hover { border-color: var(--c-line-strong); }
.list-tile.is-active {
  border-color: var(--c-brand);
  box-shadow: inset 0 0 0 1px var(--c-brand), var(--sh-card);
}
.list-tile-value {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--c-ink);
}
.list-tile-sub { color: var(--c-ink-2); font-weight: 500; }
.list-tile-label { color: var(--c-ink-3); }
/* WStyle default.css `.list-page .list-tile{box-shadow:inset 3px 0 … accent}` (0,2,0, RTL eşi 0,3,0): renkli sol şerit yok */
.list-page .list-tile, [dir=rtl] .list-page .list-tile { box-shadow: var(--sh-card); }
.list-page .list-tile.is-active, [dir=rtl] .list-page .list-tile.is-active { box-shadow: inset 0 0 0 1px var(--c-brand), var(--sh-card); }

.list-toolbar {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  box-shadow: var(--sh-card);
}
.list-control-label { font-weight: 500; color: var(--c-ink-2); }
/* Arama alanı otomatik doldurmayı önlemek için odaklanana dek `readonly` gelir (WStyle default.js); devre dışı gibi GRİ görünmesin
   (components.css `.form-control[readonly]` surface-3) — alan etkindir, yalnız tarayıcı doldurmasına kapalıdır. */
.list-search .form-control[readonly] { background-color: var(--c-surface); color: var(--c-ink); }

/* Satır */
.list-item { padding: .875rem 1rem; }
.list-item.is-danger {
  background-color: var(--c-surface);
  border-color: var(--c-brand-line);
  box-shadow: inset 4px 0 0 0 var(--c-danger), var(--sh-card);
}
[dir=rtl] .list-item.is-danger { box-shadow: inset -4px 0 0 0 var(--c-danger), var(--sh-card); }
.list-item.is-info { background-color: var(--c-surface); }
/* Kapalı/iptal satır soluk görünür AMA metin AA'nın altına inmez (opaklık metni de soldururdu) */
.list-item[data-status=closed], .list-item[data-status=cancelled] { opacity: 1; background-color: var(--c-surface-2); }
.list-item[data-status=closed] .list-name, .list-item[data-status=cancelled] .list-name { color: var(--c-ink-2); }
.list-ico {
  border-radius: var(--radius-btn);
  background-color: var(--c-surface-3);
  color: var(--c-ink-2);
}
.list-item.is-danger .list-ico, .list-item.is-info .list-ico { background-color: var(--c-surface-3); }
.list-item:not([data-status=active]) .list-ico.has-logo { filter: none; opacity: 1; }
.list-name { color: var(--c-ink); }
.list-name:hover { color: var(--c-brand-text); }
.list-ident, .list-orderid, .list-due-date {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: 0;
}
.list-ident { font-size: .75rem; color: var(--c-ink-2); }
.list-ident + .st-list-ip::before { content: "·"; margin-inline-end: .4rem; color: var(--c-ink-4); }   /* hostname · IP */
.list-orderid { font-size: .75rem; color: var(--c-ink-3); }
.list-due-date { font-size: .8125rem; font-weight: 500; color: var(--c-ink); }
/* Fatura satırında tarih cümle içindedir ("Son ödeme 30 Eyl 2026") → Plex Sans; mono yalnız çıplak tarih (hizmet/talep) */
.list-rows[data-noun=invoices] .list-due-date { font-family: var(--font-sans); font-weight: 500; }
.list-due-date.list-due-none, .list-due-lifetime { font-family: var(--font-sans); color: var(--c-ink-3); }
.list-due-rem { font-weight: 500; color: var(--c-ink-3); }
.list-due-rem.is-soon { color: var(--c-warn); }
.list-due-rem.is-critical { color: var(--c-danger); }
.list-due-pending { font-weight: 500; color: var(--c-info); }
.list-chip {
  border-radius: var(--radius-badge);
  padding: .25rem .5rem;
  font-size: .75rem;
  font-weight: 500;
  background-color: var(--c-surface-3);
  color: var(--c-ink-2);
}
.list-chip-btn.is-on { background-color: var(--c-ok-soft); color: var(--c-ok); }
.list-chip-btn:hover { border-color: var(--c-line-strong); }
.list-side { border-block-start: 1px solid var(--c-line); }
.list-amount {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--c-ink);
}
.list-cycle { font-weight: 400; color: var(--c-ink-3); }
.list-meter { background: var(--c-surface-3); border-radius: var(--radius-mini); }
.list-meter > span { background: var(--c-info); }
.list-due:has(.list-due-rem.is-soon) .list-meter { background: var(--c-surface-3); }
.list-due:has(.list-due-rem.is-soon) .list-meter > span { background: var(--c-warn); }
.list-due:has(.list-due-rem.is-critical) .list-meter { background: var(--c-surface-3); }
.list-due:has(.list-due-rem.is-critical) .list-meter > span { background: var(--c-danger); }
/* Satır eylemleri: ikincil (yüzey + line-strong) — satırdaki "Öde/Yönet" asla dolgu değil (§3.1) */
.list-actions .btn-soft {
  --bs-btn-bg: var(--c-surface);
  --bs-btn-border-color: var(--c-line-strong);
  --bs-btn-hover-bg: var(--c-surface-2);
  --bs-btn-hover-border-color: var(--c-line-strong);
  --bs-btn-active-bg: var(--c-surface-3);
  --bs-btn-active-border-color: var(--c-line-strong);
}
@media (min-width: 992px) {
  .list-side { border-block-start: 0; }
}
.list-empty { border-color: var(--c-line-strong); }

/* =====================================================================================================================
   7) Fatura detayı + toplu ödeme (invoice-detail.css; layouts/invoice.tpl)
   ===================================================================================================================== */
.invoice-doc-label, .invoice-fact dt, .invoice-party-label {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--c-ink-3);
}
.invoice-doc-no {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--c-ink);
}
.invoice-fact dd { font-family: var(--font-mono); font-size: .875rem; font-weight: 500; color: var(--c-ink); }   /* Plex Mono 400/500 (sahte kalın yok) */
.invoice-fact dd.invoice-fact-due {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 600;
}
.invoice-party-name { font-weight: 600; color: var(--c-ink); }
.invoice-table thead th { font-weight: 600; letter-spacing: .06em; color: var(--c-ink-3); }
.invoice-wrap .order-summary-total .summary-value { font-family: var(--font-sans); font-weight: 600; color: var(--c-ink); }
/* İkon diski: nötr (pembe brand-soft yok); durum diskleri (invoice-status-disc-*) anlamlı rengini korur */
.invoice-wrap .icon-disc:not([class*="invoice-status-disc"]),
[data-ticket-create] .icon-disc {
  background-color: var(--c-surface-3);
  color: var(--c-ink-2);
}
.invoice-wrap .invoice-pay-card { border-color: var(--c-line); box-shadow: var(--sh-card); }
.invoice-back { color: var(--c-ink-3); }
.invoice-back:hover { color: var(--c-brand-text); }
.invoice-txn-amount { font-family: var(--font-sans); font-weight: 600; }

/* =====================================================================================================================
   8) Destek: liste ekleri (support-tickets.css), detay + mesaj akışı (ticket-detail.css), oluşturma (ticket-create.css)
   ===================================================================================================================== */
.list-rows[data-noun=tickets] .list-ico.is-plain { background-color: var(--c-surface-3); }
.list-ico-staff { background-color: var(--c-navy); color: var(--c-on-navy); box-shadow: 0 0 0 2px var(--c-surface); }
.support-pin { border-color: var(--c-line); border-radius: var(--radius-btn); }
.support-pin-value { font-family: var(--font-mono); font-weight: 500; letter-spacing: .08em; color: var(--c-ink); }

/* Detay başlığı */
.td-head-icon { background-color: var(--c-surface-3); color: var(--c-ink-2); }
.td-subject { font-weight: 600; }

/* Mesaj akışı: kronolojik; destek ekibi mesajı yüzey-2 zemin + lacivert avatar (marka = güven), pembe ton yok; saat mono */
.ticket-msg {
  border-color: var(--c-line);
  border-radius: var(--radius-card);
  box-shadow: var(--sh-card);
}
.ticket-msg-staff {
  background-color: var(--c-surface-2);
  border-color: var(--c-line);
}
.ticket-msg-ava-txt { background-color: var(--c-surface-3); color: var(--c-ink-2); font-weight: 600; }
.ticket-msg-staff .ticket-msg-ava-txt { background-color: var(--c-navy); color: var(--c-on-navy); box-shadow: inset 0 0 0 1px var(--c-navy-line); }
.ticket-msg-ava-badge { background-color: var(--c-navy); color: var(--c-on-navy); box-shadow: 0 0 0 2px var(--c-surface); }
.ticket-msg-staff .ticket-msg-ava-badge { box-shadow: 0 0 0 2px var(--c-surface-2); }
.ticket-msg-head { border-block-end-color: var(--c-line); }
.ticket-msg-time { font-family: var(--font-mono); font-size: .75rem; color: var(--c-ink-3); }
.ticket-msg-role { font-family: var(--font-mono); font-weight: 400; letter-spacing: .08em; color: var(--c-ink-3); }
.ticket-msg-rate { border-block-start-color: var(--c-line); }
.ticket-msg-cred-ico { color: var(--c-ink-2); }
.ticket-file, .ticket-shot { border-color: var(--c-line); }
.ticket-file:hover, .ticket-shot:hover { border-color: var(--c-line-strong); color: var(--c-ink); }
.ticket-file-ico, .ticket-reply-toggle-ico, .cred-toggle-ico, .cred-ico {
  background-color: var(--c-surface-3);
  color: var(--c-ink-2);
}
.ticket-file-size, .ticket-shot-size { font-family: var(--font-mono); }
/* Kimlik bilgisi kutusu WStyle'da min 300 px: dar ekranda mesaj kartından taşıyordu (375 px çekimi) */
@media (max-width: 575.98px) { .ticket-msg-cred { min-inline-size: 0; inline-size: 100%; } }
.ticket-reply, .ticket-reply-sent, .ticket-closed-note {
  border-color: var(--c-line);
  border-radius: var(--radius-card);
}
.ticket-reply-sent-title { font-weight: 600; }
.ticket-info-row dt { color: var(--c-ink-3); }
.ticket-info-row dd { font-weight: 500; color: var(--c-ink); }

/* Oluşturma: kimlik bilgisi paneli, ek bilgi önerisi, eklenti listesi — seçim/hover rengi nötr; birincil yalnız "Gönder" */
.cred-toggle:hover, .cred-toggle:focus-visible,
.cred-add:hover, .cred-add:focus-visible {
  border-color: var(--c-line-strong);
  background-color: var(--c-surface-2);
  color: var(--c-ink);
}
.cred-item:hover { border-color: var(--c-line-strong); }
.cred-item, .kb-suggest { border-color: var(--c-line); }
.composer-bar:hover { background-color: var(--c-surface-2); }
.st-tkt-block-actions { margin-block-start: .25rem; }

/* =====================================================================================================================
   9) Yarıçap normalizasyonu — düz `var(--wstyle-radius)` (6 px) taşıyan KART kökleri 8 px (components.css §11 dışında kalanlar;
      birim-notlari/T03.md "Yüzey birimleri — yarıçap"). İç kontroller (composer, cred-toggle, support-pin) 6 px kalır.
   ===================================================================================================================== */
.dashx-card, .dashx-kpi, .invoice-partial-panel, .ticket-msg, .ticket-msg-cred, .cred-item, .kb-suggest,
.ticket-reply, .ticket-reply-sent, .ticket-closed-note {
  border-radius: var(--radius-card);
}
.invoice-partial-head.collapsed { border-end-start-radius: var(--radius-card); border-end-end-radius: var(--radius-card); }
.cred-panel { border-end-start-radius: var(--radius-card); border-end-end-radius: var(--radius-card); }

/* ---- 70-hizmet.css ---- */
/* ---------------------------------------------------------------------------------------------------------------------
 * features/70-hizmet.css — Seturack · hizmet detayı: views/account/service-detail.tpl + components/service-transfer.tpl
 * (WStyle service-detail.css, service-detail-software.css, service-management.css) ve Yönetim sekmesine ÇEKİRDEĞİN bastığı
 * modül yüzeyi (templates/system/module/service/server/dashboard.php istemci dalı: section.sd-panel > .sd-quick-grid >
 * a.wpanel-feature; sınıf adları değişmez, yalnız boyanır — tasarım §2.5-4, §4.8).
 * Sahibi T10 (tasarım §4.8; docs/tasarim-sistemi.md §1, §2.3, §3.1, §3.3, §3.9, §3.11, §3.13, §3.19, §4 "Sunucu detayı").
 * derle.sh bu parçayı features.css'e ad sırasıyla birleştirir (D-9).
 *
 * Kural: markup'a dokunmadan WStyle sınıfları boyanır; şablonda yalnız `data-st-primary` (tek birincil aksiyon) eklendi.
 * Renk yalnız var(--c-*) (hex yok — lint). Hareket EKLENMEZ (transition/animation yok; kart kaldırma zaten components.css (d)).
 * Yükleme sırası (D-4): WStyle yüzey CSS'i bu dosyadan ÖNCE gelir → eşit özgüllükte burası kazanır.
 * Kapsam: `.sd-*` atomları views/account/sms.tpl (T13) tarafından da kullanılır ve T13 bunları bilinçli olarak boyamaz
 * (90-kalan.css başlığı) → buradaki genel `.sd-*` kuralları SMS panelini de aynı dile getirir. Hizmet detayına özgü rol kuralları
 * `[data-service-detail]` ile kapsanır.
 *
 * İçindekiler
 *   1) Tek birincil aksiyon (data-st-primary) ve buton rolleri (Konsol = lacivert)
 *   2) Üst kart (hero): kimlik, durum rozeti, olgular, yenileme çubuğu
 *   3) Sekme şeridi (alt çizgili; etkin sekme kırmızı çizgi)
 *   4) Paneller, alan ızgarası, veri (mono)
 *   5) Metrik göstergesi (info; eşikte warn, kritikte danger — kırmızı kota için kullanılmaz)
 *   6) Plan özeti + özellik listesi + yazılım/teslimat
 *   7) Hızlı işlemler + Yönetim sekmesi (çekirdek modül yüzeyi)
 *   8) Faturalama, etkinlik, eklentiler, ek bilgiler
 *   9) Paket değişikliği (sekme + onay modalı)
 *  10) Devir (lisans + hizmet)
 *  11) İptal — tehlike bölgesi
 *  12) Yardım kutusu (lacivert)
 *  13) Uyarı bantları (sol 4 px çizgi + soft zemin)
 * ------------------------------------------------------------------------------------------------------------------- */

/* =====================================================================================================================
   1) Tek birincil aksiyon (CLAUDE.md UX "her ekranda tek birincil aksiyon"; tasarım-sistemi §3.1 "ekranda tek").
      Şablon (ST:T10) sayfa başına TEK düğmeye data-st-primary basar: süresi dolan/dolmuş hizmette Yenile → yönetilebilir
      sunucuda Yönetim → indirme → destek talebi. O düğme (WStyle'da .btn-secondary olsa da) kırmızı dolgu; hero, genel bakış
      ve paket kartlarındaki diğer dolu düğmeler (.btn-primary / lacivert .btn-secondary) ikincil görünür. Sınıf silinmez,
      yalnız Bootstrap buton değişkenleri ezilir (60-panel.css .st-btn-1/-2 ile aynı yöntem). Sekme içi form gönderimleri
      (fatura profili kaydet, devri başlat) ve modal birincilleri kendi ekranlarının tek birincilidir — dokunulmaz.
   ===================================================================================================================== */
:root [data-service-detail] .btn[data-st-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);
}
/* İkincil görünüm (components.css .btn-soft ile birebir değişkenler). Özgüllük (1,3,0): koyu modun
   `:root[data-bs-theme=dark] .btn-secondary` (0,3,0) ters lacivert kuralını da yener.
   Yönetim sekmesi açıkken hero'daki "Yönetim" kısayolu aynı yeri gösterdiğinden birincilliği sekmenin içeriğine bırakır
   (:has desteklemeyen tarayıcıda hero birincili kırmızı kalır — kabul edilen bozulma). */
[data-service-detail] :is(.sd-hero-actions, #sd-overview, #sd-upgrade .plan-card) :is(.btn-primary, .btn-secondary):not([data-st-primary]),
[data-service-detail]:has(#sd-management.active) .sd-hero-actions .btn[data-st-primary] {
  --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-focus-shadow-rgb: var(--c-ink-rgb);
}
/* Tek tıkla panel girişi ("Kontrol Paneline Git" — genel bakış ve Yönetim sekmesi): lacivert, önemli ama birincil olmayan
   (tasarım §4.8 "SSO Konsol düğmesi lacivert"; tasarım-sistemi §3.1 .btn-navy). Koyu modda ters (.btn-secondary ile aynı dil). */
.btn.sd-cp-launch {
  --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);
}
:root[data-bs-theme=dark] .btn.sd-cp-launch {
  --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);
}

/* =====================================================================================================================
   2) Üst kart (hero) — tasarım-sistemi §4 "Sunucu detayı": kimlik + rozet, mono kimlik verisi, meta dl, sağda aksiyonlar
   ===================================================================================================================== */
.sd-hero {
  border-color: var(--c-line);
  background-color: var(--c-surface);
  box-shadow: var(--sh-card);
}
/* İkon çipi nötr (çok renkli ikon / pembe zemin yok — §1); logolu hizmette logonun beyaz plakası kalır */
.sd-hero-ico { background-color: var(--c-surface-3); color: var(--c-ink-2); }
.sd-hero-ico-logo { background-color: var(--c-white); box-shadow: inset 0 0 0 1px var(--c-line); }
.sd-hero-title {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  font-variation-settings: "opsz" 36;
  color: var(--c-ink);
}
/* Durum rozeti (§3.3: 4 px, 12 px/500; ok = çalışıyor · info = hazırlanıyor · warn = süresi doldu · danger = askıda · nötr = iptal).
   WStyle'da "süresi dolmuş" rozetinin rengi yoktu (yalnız metin) → warn (iptal formundaki rozetiyle aynı). */
.sd-status {
  gap: .3rem;
  padding-block: .1875rem;
  padding-inline: .5rem;
  border-radius: var(--radius-badge);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.4;
}
.sd-status-active { background-color: var(--c-ok-soft); color: var(--c-ok); }
.sd-status-pending { background-color: var(--c-info-soft); color: var(--c-info); }
.sd-status-expired { background-color: var(--c-warn-soft); color: var(--c-warn); }
.sd-status-suspended { background-color: var(--c-danger-soft); color: var(--c-danger); }
.sd-status-cancelled { background-color: var(--c-surface-3); color: var(--c-ink-2); }
/* Kimlik verisi mono (hostname, sipariş no — 60-panel.css liste satırıyla aynı dil); bağlantı ikonu dış bağlantıyı söyler */
.sd-hero-meta { color: var(--c-ink-3); }
.sd-hero-domain { font-family: var(--font-mono); font-size: .8125rem; font-weight: 500; color: var(--c-ink-2); }
.sd-hero-domain:hover { color: var(--c-brand-text); }
.sd-hero-orderid { font-family: var(--font-mono); font-size: .8125rem; font-weight: 400; color: var(--c-ink-3); }
.sd-dot { background-color: var(--c-ink-4); opacity: 1; }
.sd-hero-foot { border-block-start-color: var(--c-line); }
/* Olgular: etiket mono büyük harf (fatura detayı .invoice-fact dt ile aynı), değer ink; fiyat Plex Sans 600 */
.sd-fact dt {
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.sd-fact dd { font-weight: 600; color: var(--c-ink); }
.sd-fact + .sd-fact { border-inline-start-color: var(--c-line); }
.sd-fact-unit { font-weight: 400; color: var(--c-ink-3); }
/* Otomatik yenileme anahtarı: açık = brand (§2.1 "switch açık"); her kontrol her yerde aynı — WStyle burada yeşil dolgu kullanıyordu */
.sd-switch-inline .form-check-input:checked,
.sd-autorenew .form-check-input:checked { background-color: var(--c-brand); border-color: var(--c-brand); }
.sd-switch-state,
.sd-switch-inline:has(.form-check-input:checked) .sd-switch-state { font-weight: 500; color: var(--c-ink); }
/* Yenileme süresi: info çubuk (components.css .progress); ≤ 14 gün warn, ≤ 3 gün danger (WStyle JS eşikleri) */
.sd-renew-label { font-weight: 500; color: var(--c-ink); }
/* "19 gün kaldı" bir ifade → Plex Sans (mono yalnız çıplak veri; 60-panel.css'teki fatura tarihi kuralı) */
.sd-renew-rem { font-weight: 500; color: var(--c-ink-3); }
.sd-renew-rem.is-soon { color: var(--c-warn); }
.sd-renew-rem.is-critical { color: var(--c-danger); }
/* Yenileme menüsü: fiyat ink (kırmızı yalnız aksiyon) */
.sd-renew-menu .dropdown-header { border-block-end-color: var(--c-line); }
.sd-renew-opt { border-block-end-color: var(--c-line); }
.sd-renew-opt-price { font-weight: 600; color: var(--c-ink); }

/* =====================================================================================================================
   3) Sekme şeridi — klasör sekmesi yerine alt çizgili şerit (§3.6 "aktif sekme çizgisi brand"; components.css .nav-tabs dili)
   ===================================================================================================================== */
.sd-tabcard { box-shadow: var(--sh-card); }
.sd-tabbar {
  padding-inline: .5rem;
  background-color: var(--c-surface);
  box-shadow: inset 0 -1px 0 0 var(--c-line);
}
.sd-segtabs { gap: 0; }
.sd-segtabs .nav-link {
  padding-block: .75rem;
  padding-inline: .875rem;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--c-ink-3);
  font-size: .875rem;
  font-weight: 500;
}
.sd-segtabs .nav-link:hover { color: var(--c-ink); background-color: transparent; box-shadow: inset 0 -2px 0 0 var(--c-line-strong); }
.sd-segtabs .nav-link.active { color: var(--c-ink); background-color: transparent; box-shadow: inset 0 -2px 0 0 var(--c-brand); }
/* Şerit yatay kaydırılan bir kap: dışa taşan odak halkası kırpılırdı → halka içeride */
.sd-segtabs .nav-link:focus-visible { outline-offset: -2px; }
.sd-tabbar-nav { color: var(--c-ink-3); }
.sd-tabbar-nav:hover, .sd-tabbar-nav:focus-visible { color: var(--c-ink); }
.sd-tabbar-nav:focus-visible { outline-color: var(--c-focus); }

/* =====================================================================================================================
   4) Paneller, alan ızgarası, veri — panel kartın içinde surface-2 (bir kademe derinlik), alan hücreleri yüzey
   ===================================================================================================================== */
.sd-panel {
  border-color: var(--c-line);
  border-radius: var(--radius-card);
  background-color: var(--c-surface-2);
}
.sd-panel-head, .sd-panel-title { border-block-end-color: var(--c-line); }
/* Kart başlıkları Plex Sans (h2 olarak basılıyorlar; components.css h1/h2 display fontu yalnız sayfa/bölüm başlığı içindir) */
.sd-panel-title, .sd-mgmt-cta-title, .sd-help-title, .sd-extra-title, .sd-cancel-cons-title, .sd-req-group-title {
  font-family: var(--font-sans);
  letter-spacing: -.005em;
}
.sd-panel-title { font-size: .9375rem; font-weight: 600; color: var(--c-ink); }
.sd-panel-title .bi { color: var(--c-ink-3); }
.sd-req-group-title { color: var(--c-ink); font-weight: 600; }
.sd-fields { border-color: var(--c-line); border-radius: var(--radius-card); background-color: var(--c-line); }
.sd-field { background-color: var(--c-surface); }
.sd-field-label {
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--c-ink-3);
}
.sd-field-val { color: var(--c-ink); }
/* Uzun değer (adres, ana makine adı) hücreden taşıp kırpılmasın: gerekirse satır kırılır (G3 — SMS paneli API adresi 375 px'te
   "…/client/sr" diye kesiliyordu; .sd-* atomu ortak olduğundan hizmet detayındaki değerler de aynı davranır) */
.sd-field-val > span, .sd-field-val .sd-mono { min-inline-size: 0; overflow-wrap: anywhere; }
/* Telefonda tek sütun: iki sütunda hücre ~70 px kalıyor ve IP adresi rakam ortasından bölünüyordu (375 px'te "203.0.1 / 13.10") */
@media (max-width: 575.98px) {
  .sd-fields { grid-template-columns: minmax(0, 1fr); }
}
/* Veri (IP, kullanıcı, parola, işletim sistemi, lisans anahtarı) Plex Mono 400/500 — sahte kalın yok */
.sd-mono { font-family: var(--font-mono); font-size: .8125rem; font-weight: 500; letter-spacing: 0; color: var(--c-ink); }
.sd-field [data-role=license-key] { font-weight: 500; letter-spacing: .06em; }
.sd-copy { color: var(--c-ink-3); }
.sd-copy:hover { color: var(--c-ink); }
.sd-info-row { border-block-end-color: var(--c-line); }
.sd-info-row dt { color: var(--c-ink-3); }
.sd-info-row dd { color: var(--c-ink); }
.sd-req-foot { border-block-start-color: var(--c-line); }

/* =====================================================================================================================
   5) Metrik göstergesi (§3.11): ray surface-3, değer info; WStyle JS eşiği ≥ %75 → warn, ≥ %90 → danger. Brand (kırmızı) kota
      için kullanılmaz. Göstergenin şekli ve oranı WStyle'ın (tasarım §4.8 "oran/kademe hesabı yok"); yalnız renk ve tipografi.
   ===================================================================================================================== */
.sd-metric {
  border-color: var(--c-line);
  border-radius: var(--radius-card);
  background-color: var(--c-surface);
  box-shadow: none;
}
.sd-metric-label {
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.sd-metric-val { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; color: var(--c-ink); }
.sd-used { font-weight: 600; color: var(--c-ink); }
.sd-limit { font-weight: 400; color: var(--c-ink-3); }
.sd-gauge-track { stroke: var(--c-surface-3); }
.sd-gauge-fill { stroke: var(--c-info); }
.sd-gauge-fill.is-high { stroke: var(--c-warn); }
.sd-gauge-fill.is-critical { stroke: var(--c-danger); }
.sd-gauge-val { fill: var(--c-ink); font-weight: 600; }

/* =====================================================================================================================
   6) Plan özeti + özellik listesi + yazılım/teslimat — fiyat ink (kırmızı yalnız aksiyon), ikon çipleri nötr
   ===================================================================================================================== */
.sd-plan-summary { border-block-end-color: var(--c-line); }
.sd-plan-tier { font-size: 1.125rem; font-weight: 600; color: var(--c-ink); }
.sd-plan-amount { font-size: 1.125rem; font-weight: 600; color: var(--c-ink); }
.sd-spec-list li { border-block-end-color: var(--c-line); color: var(--c-ink-2); }
.sd-spec-list .bi { color: var(--c-ink-3); }
.sd-spec-list li b { font-weight: 600; color: var(--c-ink); }
/* Nötr ikon çipleri (60-panel.css .list-ico ile aynı: surface-3 + ink-2). Durum renkli çipler (iptal "şimdi" seçili, uyarı satırı,
   pasif eklenti, logolu indirme) WStyle'daki daha özgül kurallarıyla kendi rengini korur. */
.sd-spec-ico, .sd-quick-ico, .sd-addon-ico, .sd-offer-ico, .sd-invoice-ico, .sd-bprofile-ico, .sd-cancel-svc-ico,
.sd-cancel-when-ico, .sd-cancel-cons-ico, .sd-cu-art, .sd-cu-file-ico, .sd-dl-art, .sw-reissue-ico, .sd-party-avatar {
  background-color: var(--c-surface-3);
  color: var(--c-ink-2);
}
.sd-dl-name { font-weight: 600; color: var(--c-ink); }
.sd-dl-meta { color: var(--c-ink-3); }
.sd-dl-links a { border-block-end-color: var(--c-line); color: var(--c-ink-2); }
.sd-dl-links .bi { color: var(--c-ink-3); }
.sd-dl-links a:hover { color: var(--c-ink); }
.sw-reissue, .sd-cu-file { border-color: var(--c-line); border-radius: var(--radius-card); background-color: var(--c-surface); }
.sw-reissue-title, .sd-cu-file-name { color: var(--c-ink); }
.sd-cu-art { border-radius: var(--radius-card); }

/* =====================================================================================================================
   7) Hızlı işlemler (genel bakış .sd-quick) + Yönetim sekmesi (çekirdek: .sd-panel > .sd-quick-grid > a.wpanel-feature).
      İkisi aynı karo: yüzey + 1 px line, 6 px (kontrol), nötr ikon çipi; hover'da kenar line-strong + surface-2 (yükselme
      yok — components.css (d)). Çekirdek, modülün araç grubu renklerini satır içi <style> ile basar
      (`.wpanel-feature-icon.<sınıf>{background;color}` (0,2,0) ve `.wpanel-feature:has(.<sınıf>):hover{border-color}` (0,3,0);
      dashboard.php:198-222) → burada (0,3,0)/(0,4,0) ile nötrlenir: çok renkli ikon yok (§1).
   ===================================================================================================================== */
.sd-quick,
.sd-module-surface .sd-quick-grid .wpanel-feature {
  border-color: var(--c-line);
  border-radius: var(--radius-btn);
  background-color: var(--c-surface);
  color: var(--c-ink-2);
  box-shadow: none;
}
.sd-quick:hover,
.sd-module-surface .sd-quick-grid .wpanel-feature:hover {
  border-color: var(--c-line-strong);
  background-color: var(--c-surface-2);
  color: var(--c-ink);
  box-shadow: none;
}
.sd-quick-ico,
.sd-module-surface .wpanel-feature .wpanel-feature-icon {
  border-radius: var(--radius-btn);
  background-color: var(--c-surface-3);
  color: var(--c-ink-2);
}
.sd-quick-label,
.sd-module-surface .wpanel-feature .wpanel-feature-label { font-size: .8125rem; font-weight: 500; color: var(--c-ink); }
/* SSO çağrı kartı (Yönetim sekmesinin başı) */
.sd-mgmt-cta {
  border-color: var(--c-line);
  border-radius: var(--radius-card);
  background-color: var(--c-surface);
  box-shadow: none;
}
.sd-mgmt-cta-logo { background-color: var(--c-white); box-shadow: inset 0 0 0 1px var(--c-line); }
.sd-mgmt-cta-title { font-size: 1rem; font-weight: 600; color: var(--c-ink); }
.sd-mgmt-cta-text { color: var(--c-ink-3); }
/* Modül yüzeyi: çekirdeğin `html` kartı `.card.bg-gradient.border-0` basar → gradyan yok (§1), surface-2 panel dili */
.sd-module-surface { --bs-gradient: none; }
.sd-module-surface .card { border-radius: var(--radius-card); background-color: var(--c-surface-2); box-shadow: none; }
.sd-module-surface .card-header { border-block-end-color: var(--c-line); }
.sd-module-surface .card-title { color: var(--c-ink); }
.sd-module-surface .list-group-item-action:hover { background-color: var(--c-surface-3); color: var(--c-ink); }
.sd-module-surface .ocl-icon { background-color: var(--c-surface-3); color: var(--c-ink-2); }
.sd-module-surface .wcp-table-shell { border-color: var(--c-line); border-radius: var(--radius-card); background-color: var(--c-surface); }
.sd-module-surface .wcp-filter-menu { border-color: var(--c-line); border-radius: var(--radius-card); box-shadow: var(--sh-pop); }
.sd-module-surface .wcp-filter-item:hover,
.sd-module-surface .wcp-filter-selector-secondary:hover,
.sd-module-surface .wcp-filter-dropdown.show .wcp-filter-selector-secondary { background-color: var(--c-surface-3); color: var(--c-ink); }
.sd-module-surface .wcp-filter-item.active { background-color: var(--c-surface-3); }
/* Sayfalama etkin sayfası = .seg-on (components.css .pagination ile aynı: navy, koyuda ters); WStyle burada pembe veriyordu */
.sd-module-surface .wcp-table-pagination .pagination {
  --bs-pagination-active-color: var(--c-on-navy);
  --bs-pagination-active-bg: var(--c-navy);
  --bs-pagination-active-border-color: var(--c-navy);
}
:root[data-bs-theme=dark] .sd-module-surface .wcp-table-pagination .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);
}

/* =====================================================================================================================
   8) Faturalama, etkinlik, eklentiler, ek bilgiler
   ===================================================================================================================== */
/* Yenileme kartı: açıkken yeşil zemin yok — durum anahtarın kendisinde (brand) ve metninde */
.sd-autorenew,
.sd-autorenew:has(.form-check-input:checked) { border-color: var(--c-line); border-radius: var(--radius-card); background-color: var(--c-surface); }
.sd-autorenew .form-check-label, .sd-card-brand { font-weight: 500; color: var(--c-ink); }
.sd-invoice { border-block-end-color: var(--c-line); }
.sd-invoice-no { font-family: var(--font-mono); font-weight: 500; }
.sd-invoice-date { color: var(--c-ink-3); }
.sd-invoice-amount { font-weight: 600; color: var(--c-ink); }
.sd-bprofile-name { font-weight: 600; color: var(--c-ink); }
.sd-bprofile-addr { color: var(--c-ink-3); }
/* "Varsayılan" / "Mevcut plan" rozeti: brand-soft (pembe) durum rozeti panelde bilgi tonuna eşlenir (60-panel.css §2 ile aynı;
   brand rozet YALNIZ "Popüler" — §3.3). Değişken rozetin kendisinde çözülür. */
[data-service-detail] .badge.bg-primary-subtle {
  --bs-primary-bg-subtle: var(--c-info-soft);
  --bs-primary-text-emphasis: var(--c-info);
}
/* Etkinlik zaman çizelgesi: "primary" tonlu olay bilgi tonunda; saat mono */
.sd-event::before { background-color: var(--c-line); }
.sd-event-primary { background-color: var(--c-info-soft); color: var(--c-info); }
.sd-event-text { color: var(--c-ink-2); }
.sd-event-time { font-family: var(--font-mono); font-size: .75rem; color: var(--c-ink-3); }
/* Eklentiler */
.sd-addon, .sd-offer { border-color: var(--c-line); border-radius: var(--radius-card); background-color: var(--c-surface); }
.sd-offer:hover { border-color: var(--c-line-strong); box-shadow: none; }
.sd-addon-name, .sd-offer-name { color: var(--c-ink); }
.sd-addon-price, .sd-offer-price { font-weight: 600; color: var(--c-ink); }
.sd-addon-remove:hover { color: var(--c-danger); }
.sd-addon-pop-foot { border-block-start-color: var(--c-line); }
/* Ek bilgi kartları */
.sd-extra-card { border-color: var(--c-line); border-radius: var(--radius-card); background-color: var(--c-surface); }
.sd-extra-title { font-size: .9375rem; font-weight: 600; color: var(--c-ink); }

/* =====================================================================================================================
   9) Paket değişikliği — kart dili 40-katalog-funnel.css'teki .plan-card'dan; burada yalnız hizmet detayına özgü durumlar.
      Birden çok "Yükselt" düğmesi yan yana kırmızı olmasın (§1'deki kural); seçim onay modalındaki tek birincille tamamlanır.
   ===================================================================================================================== */
.plan-card.sd-plan-current { border-color: var(--c-line-strong); box-shadow: none; }
.plan-card.sd-plan-scheduled { border-color: var(--c-info); box-shadow: none; }
.sd-pc-plan { border-color: var(--c-line); border-radius: var(--radius-card); background-color: var(--c-surface-2); }
.sd-pc-plan-new { border-color: var(--c-brand-line); background-color: var(--c-brand-soft); }   /* seçilen hedef = seçim rengi (§1) */
.sd-pc-tag { font-family: var(--font-mono); font-weight: 400; letter-spacing: .08em; color: var(--c-ink-3); }
.sd-pc-name, .sd-pc-rate .num-tabular, .sd-pc-delta-to, .sd-pc-cycle-mo-amt { font-weight: 600; color: var(--c-ink); }
.sd-pc-col, .sd-pc-summary { border-color: var(--c-line); border-radius: var(--radius-card); }
.sd-pc-summary { background-color: var(--c-surface-2); }
.sd-pc-total { border-block-start-color: var(--c-line); font-weight: 600; }
.sd-pc-delta, .sd-pc-cycle + .sd-pc-cycle { border-color: var(--c-line); }

/* =====================================================================================================================
   10) Devir (lisans devri + hizmet devri): numaralı adım = lacivert numara dairesi (§3.13; 90-kalan.css ile aynı), koyuda ters
   ===================================================================================================================== */
.sd-tr-step { border-color: var(--c-line); border-radius: var(--radius-card); background-color: var(--c-surface); }
.sd-tr-step-num { background-color: var(--c-navy); color: var(--c-on-navy); font-weight: 600; box-shadow: none; }
:root[data-bs-theme=dark] .sd-tr-step-num { background-color: var(--c-on-navy); color: var(--c-navy); }
.sd-tr-step-title { font-weight: 600; color: var(--c-ink); }
.sd-tr-step-desc { color: var(--c-ink-3); }
.sd-party { border-color: var(--c-line); border-radius: var(--radius-card); background-color: var(--c-surface); }
.sd-party-avatar { font-family: var(--font-mono); font-weight: 500; }
.sd-party-role { font-weight: 600; color: var(--c-ink); }
.sd-party-email { font-family: var(--font-mono); font-size: .75rem; color: var(--c-ink-3); }
.sd-party-foot { border-block-start-color: var(--c-line); }
.sd-party-arrow, .sd-tr-foot { color: var(--c-ink-3); }

/* =====================================================================================================================
   11) İptal — tehlike bölgesi (§3.19: kart, brand-line çerçeve, başlık ikonlu danger; yıkıcı düğme .btn-danger dolgusuz —
       components.css). Talep formu "danger-zone" dilinde; vazgeç yolu (ikincil "Hizmeti koru") her zaman yanında.
   ===================================================================================================================== */
#sd-cancel [data-cancel-state=form] {
  border-color: var(--c-brand-line);
  background-color: var(--c-surface);
  box-shadow: var(--sh-card);
}
#sd-cancel [data-cancel-state=form] > .sd-panel-title,
#sd-cancel [data-cancel-state=form] > .sd-panel-title .bi { color: var(--c-danger); }
.sd-cancel-svc, .sd-cancel-alt, .sd-cancel-actions { border-color: var(--c-line); }
.sd-cancel-chip { border-color: var(--c-line-strong); border-radius: var(--radius-btn); color: var(--c-ink-2); }
.sd-cancel-chip:hover { border-color: var(--c-ink-3); }
.sd-cancel-when-card { border-color: var(--c-line-strong); border-radius: var(--radius-card); }
.sd-cancel-when-card:hover { border-color: var(--c-ink-3); }
.sd-cancel-when-title { font-weight: 600; color: var(--c-ink); }
.sd-cancel-cons { border-color: var(--c-line); border-radius: var(--radius-card); background-color: var(--c-surface-2); }
.sd-cancel-cons.is-immediate { border-color: var(--c-brand-line); }
.sd-cancel-cons-title { font-size: .9375rem; font-weight: 600; color: var(--c-ink); }
.sd-cancel-cons-title .bi { color: var(--c-ink-3); }
.sd-cancel-cons-label { color: var(--c-ink-3); }
.sd-cancel-cons-value { font-weight: 600; color: var(--c-ink); }
.sd-cancel-cons-foot { border-block-start-color: var(--c-line); }
.sd-cancel-req { border-color: var(--c-line); border-radius: var(--radius-card); }
.sd-cancel-req-row + .sd-cancel-req-row { border-block-start-color: var(--c-line); }
.sd-cancel-req-row dt { color: var(--c-ink-3); }
.sd-cancel-req-row dd { color: var(--c-ink); }

/* =====================================================================================================================
   12) Yardım kutusu — lacivert (tasarım-sistemi §4 "Sunucu detayı … lacivert Destek kutusu"; lacivert = güven ve marka yüzeyi).
       Destek talebi sayfanın birincili değilse ters çerçeveli ikincil (60-panel.css .st-dash-btn-2 ile aynı dil); birincilse
       kırmızı dolgu (§1). Odak halkasının boşluğu lacivert (bridge.css .chrome-dark ile aynı).
   ===================================================================================================================== */
.sd-help {
  border-color: var(--c-navy-line);
  border-radius: var(--radius-card);
  background-color: var(--c-navy);
  color: var(--c-on-navy);
  box-shadow: none;
  --wstyle-focus-ring: 0 0 0 2px var(--c-navy), 0 0 0 4px var(--c-focus);
}
.sd-help-ico { background-color: var(--c-navy-3); color: var(--c-on-navy-2); }
.sd-help-title { font-size: 1rem; font-weight: 600; color: var(--c-on-navy); }
.sd-help-sub { color: var(--c-on-navy-2); }
[data-service-detail] .sd-help-actions .btn:not([data-st-primary]) {
  --bs-btn-color: var(--c-on-navy);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--c-on-navy-3);
  --bs-btn-hover-color: var(--c-on-navy);
  --bs-btn-hover-bg: var(--c-navy-3);
  --bs-btn-hover-border-color: var(--c-on-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-on-navy-2);
}

/* =====================================================================================================================
   13) Uyarı bantları (§3.9): sol 4 px renkli çizgi + soft zemin, 6 px; başlık ink, metin ink-2. Bant içi düğme dolgu yapmaz
       (WStyle hover'da tam dolgu veriyordu; yıkıcı olmayan "Talebi görüntüle" de kırmızı dolarak birincil gibi görünüyordu).
   ===================================================================================================================== */
.sd-alert, .sd-cancel-status, .sd-cancel-confirm-warn, .sd-pc-scheduled, .sd-tr-status {
  border-radius: var(--radius-btn);
  border-inline-start-width: 4px;
}
.sd-alert-danger, .sd-cancel-status, .sd-cancel-confirm-warn {
  border-color: var(--c-brand-line);
  border-inline-start-color: var(--c-danger);
  background-color: var(--c-danger-soft);
}
.sd-alert-danger, .sd-cancel-confirm-warn { color: var(--c-danger); }
.sd-alert-info { border-inline-start-color: var(--c-info); }
.sd-pc-scheduled { border-inline-start-color: var(--c-ok); }
.sd-tr-status { border-color: var(--c-line); border-inline-start-color: var(--c-warn); background-color: var(--c-surface-2); }
.sd-alert-title, .sd-cancel-status-title, .sd-tr-status-title { font-size: .9375rem; font-weight: 600; color: var(--c-ink); }
.sd-alert-text, .sd-cancel-status-desc { font-size: .8125rem; color: var(--c-ink-2); }
.sd-tr-status-desc { color: var(--c-ink-3); }
.sd-cancel-status-ico { background-color: var(--c-surface); color: var(--c-danger); }
.sd-alert .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-surface-2);
  --bs-btn-hover-border-color: var(--c-danger);
  --bs-btn-active-color: var(--c-danger);
  --bs-btn-active-bg: var(--c-surface-3);
  --bs-btn-active-border-color: var(--c-danger);
}
.sd-alert .btn-outline-info {
  --bs-btn-color: var(--c-info);
  --bs-btn-bg: var(--c-surface);
  --bs-btn-border-color: var(--bs-info-border-subtle);
  --bs-btn-hover-color: var(--c-info);
  --bs-btn-hover-bg: var(--c-surface-2);
  --bs-btn-hover-border-color: var(--c-info);
  --bs-btn-active-color: var(--c-info);
  --bs-btn-active-bg: var(--c-surface-3);
  --bs-btn-active-border-color: var(--c-info);
}

/* ---- 80-icerik.css ---- */
/* ---------------------------------------------------------------------------------------------------------------------
 * 80-icerik.css — Seturack · içerik ve sistem sayfaları: iletişim, içerik/yasal sayfa, bilgi bankası, blog, duyurular,
 * referanslar, bülten çıkışı, eklenti sayfası, 404, CTA bandı. Sahibi T11 (tasarım §4.9; docs/tasarim-sistemi.md §1, §2.3,
 * §3.2, §3.10, §3.18, §6-8, §7). features.css'e derle.sh ile ad sırasıyla birleşir (D-9).
 *
 * İlkeler (CLAUDE.md "Kullanıcı deneyimi ilkeleri", tasarım sistemi §1):
 *   - Kırmızı yalnız aksiyon ve seçim: dekoratif pembe zeminler (ikon kutuları, küçük resim yer tutucuları, yardım bantları,
 *     kategori rozetleri) nötr yüzey tonuna iner. Bağlantı metni brand-text kalır (rol: bağlantı).
 *   - Gradyan, parıltı, sahte tarayıcı süsü rengi yok; kartlar 1 px kenar + kart gölgesi, köşe 8 px (--radius-card).
 *   - Tek birincil aksiyon: bülten aboneliği her yerde ikincil (navy) — bant (partials/band-newsletter.tpl) ile aynı dil;
 *     bilgi bankası ana sayfasında birincil = arama, yardım bandındaki talep düğmesi ikincil.
 *   - Hareket EKLENMEZ (transition/animation yok); WStyle'ın yön oklarına T03 components.css §10 dokunur.
 * Renk yalnız var(--c-*) (hex yok — lint); koyu mod token'larla kendiliğinden döner (tokens.css :root[data-bs-theme=dark]).
 * Seçiciler WStyle'ın kendi seçicileriyle aynı ya da daha özgül; Seturack katmanı WStyle CSS'inden sonra yüklenir (D-4).
 * ------------------------------------------------------------------------------------------------------------------- */

/* =====================================================================================================================
   1) Ortak: kart kökleri 8 px (T03 isteği "yarıçap": düz var(--wstyle-radius) = 6 px taşıyan kart/panel kökleri),
      hover'da pembe kenar yerine nötr güçlü kenar (geri bildirim kalır, renk vurgusu yok)
   ===================================================================================================================== */
.news-feature, .news-item, .news-subscribe, .news-cats,
.kb-cat-card, .kb-article, .kb-article-list, .kb-article-sheet, .kb-helpful, .kb-article-nav-link,
.kb-callout, .kb-values, .kb-codeblock, .kb-figure-btn,
.blog-comments-embed, .reference-card, .page-doc-sheet, .contact-office, .about-stat {
  border-radius: var(--radius-card);
}
.news-feature:hover, .news-item:hover, .kb-article:hover, .kb-cat-card:hover, .kb-figure-btn:hover,
.contact-office:hover, .reference-card:hover, .kb-article-nav-link:hover {
  border-color: var(--c-line-strong);
}
.kb-article-list .kb-article:hover { background-color: var(--c-surface-2); }

/* Başlık ağırlıkları: WStyle 700/800 ister; Plex Sans ve Bricolage 600'e kadar (T03 §1) — sahte kalınlık üretilmesin */
.news-feature-title, .news-section-title, .news-item-title, .news-card .news-title, .news-cta-title, .news-subscribe-title,
.kb-section-title, .kb-cat-name, .kb-doc-title, .kb-help-cta-title, .kb-prose h2, .kb-prose h3, .kb-prose strong,
.reference-title, .blog-comment-gate-title, .ref-spec-cta {
  font-weight: 600;
}

/* Dekoratif ikon kutuları → nötr (rol: tanıtıcı ikon; aksiyon değil) */
.contact-method .icon-disc,
.kb-cat-ico, .kb-article-ico, .kb-cat-header-ico,
.blog-comment-avatar, .blog-comment-gate-ico {
  background-color: var(--c-surface-2);
  color: var(--c-ink-2);
  box-shadow: inset 0 0 0 1px var(--c-line);
}

/* =====================================================================================================================
   2) İletişim (views/content/contact.tpl)
   ===================================================================================================================== */
/* Ofis kartı: ikonlar ve "Merkez ofis" etiketi nötr (etiket bir durum/seçim değil) */
.contact-office-meta .bi { color: var(--c-ink-3); }
/* Özgüllük (0,4,0): WStyle default.css `[data-bs-theme=dark] .badge.bg-primary-subtle{color:…!important}` (0,3,0) koyu modda pembe bırakıyordu */
.contact-office .contact-office-head .badge.bg-primary-subtle {
  background-color: var(--c-surface-3) !important;   /* Bootstrap .bg-primary-subtle yardımcısı !important taşır */
  color: var(--c-ink-2) !important;                  /* .text-primary-emphasis yardımcısı !important taşır */
}
/* Adres: şablon nl2br ile <br> basıyor, WStyle ayrıca white-space:pre-line veriyordu → her satır sonu çift boşluk oluyordu */
.contact-office-addr { white-space: normal; }
/* Tek ofis: auto-fill boş izleri saklıyordu → kart sola yaslanıyor, başlık ortada kalıyordu. auto-fit + ortalama */
.contact-office-grid { grid-template-columns: repeat(auto-fit, minmax(16rem, 22rem)); }
.contact-map-chip .bi { color: var(--c-ink-3); }

/* Form kapalı (st-ic-formsuz, contact.tpl ST:T11): "diğer yollar" tam genişlikte; liste sütunlara yayılır */
.st-ic-formsuz .contact-method-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem 2rem;
}

/* BTK tam blok (st-btk variant=full yer=iletisim; bileşen T04, burada yalnız iletişim sayfasındaki yerleşimi):
   geniş ekranda unvan + kurumsal satırlar solda, adres / e-posta / telefon listesi sağda */
.st-ic-btk .st-btk--full[data-st-btk-yer="iletisim"] { max-width: none; }
@media (min-width: 992px) {
  .st-ic-btk .st-btk--full[data-st-btk-yer="iletisim"] {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 3rem;
    align-items: start;
  }
  .st-ic-btk .st-btk--full[data-st-btk-yer="iletisim"] > :not(.st-btk-list) { grid-column: 1; }
  .st-ic-btk .st-btk--full[data-st-btk-yer="iletisim"] > .st-btk-list {
    grid-column: 2;
    grid-row: 1 / span 3;                              /* sol sütunda en çok 3 öğe (başlık, unvan, satırlar); fazladan örtük satır boşluğu yok */
    margin: 0;
    padding: 0 0 0 3rem;
    border-top: 0;
    border-inline-start: 1px solid var(--c-line);
  }
  [dir=rtl] .st-ic-btk .st-btk--full[data-st-btk-yer="iletisim"] > .st-btk-list { padding: 0 3rem 0 0; }
}

/* =====================================================================================================================
   3) İçerik / yasal sayfa (views/content/page-detail.tpl) — uzun metin tipografisi + içindekiler (ST:T11)
   ===================================================================================================================== */
.page-doc-sheet { padding: 1.5rem 1.25rem; }
@media (min-width: 768px) { .page-doc-sheet { padding: 2.25rem 2.5rem; } }
@media (min-width: 1200px) { .page-doc-sheet { padding: 2.75rem 3.5rem; } }
/* Okunur satır uzunluğu (≈ 72 karakter); sayfa başlığıyla aynı sol hizada */
.page-doc-sheet .kb-prose { max-inline-size: 46rem; font-size: 1rem; line-height: 1.75; }
.page-doc-sheet .kb-prose h2 { font-size: 1.375rem; margin-block: 2.5rem .75rem; }
.page-doc-sheet .kb-prose h3 { font-size: 1.0625rem; border-block-end: 0; padding-block-end: 0; }
.page-doc-sheet .kb-prose ol > li::marker { font-family: var(--font-mono); font-size: .875em; color: var(--c-ink-3); }

.st-ic-toc {
  max-inline-size: 46rem;
  margin-block-end: 2rem;
  padding: 1rem 1.25rem 1.125rem;
  background-color: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-btn);
}
.st-ic-toc-title {
  margin: 0 0 .5rem;
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.st-ic-toc-list {
  margin: 0;
  padding: 0;
  list-style: none;                                    /* yasal başlıklar numarasını kendisi taşır ("Madde 1"); sıra <ol> semantiğinde */
  font-size: .875rem;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .st-ic-toc-list { columns: 2; column-gap: 2.5rem; }
}
.st-ic-toc-item { break-inside: avoid; padding-block: .1875rem; }
.st-ic-toc-sub { padding-inline-start: 1rem; font-size: .8125rem; }
.st-ic-toc a { color: var(--c-ink-2); text-decoration: none; }
.st-ic-toc a:hover { color: var(--c-brand-text); text-decoration: underline; text-underline-offset: .15em; }

/* Yan menü (diğer sayfalar/sözleşmeler): seçili öğe çizgisi zaten brand; metin ink */
.about-nav-link.active { color: var(--c-ink); }

/* =====================================================================================================================
   4) CTA bandı (components/cta-band.tpl): kırmızı → lacivert 135° gradyan + nokta deseni yerine v3'ün "son CTA kartı"
      (templates/website/Seturack/pages/hakkimizda.php:182-197, index.php:703-718): açık kart, metin solda, butonlar sağda;
      birincil = brand (sayfanın tek birincil aksiyonu), ikincil = .btn-soft dili. T03 notu düz LACİVERT önermişti; içerik
      sayfasında bandın hemen altında kabuğun lacivert bülten bandı (partials/band-newsletter.tpl) ve üstünde lacivert sayfa
      başlığı durduğundan (tasarım sistemi §1 "lacivert yüzey sayfa başına en fazla 2 bant + footer") kart seçildi.
   ===================================================================================================================== */
.cta-band {
  display: grid;
  gap: .75rem 3rem;
  align-items: center;
  padding: 2rem 1.5rem;
  text-align: start;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-card);
  color: var(--c-ink-2);
  --bs-heading-color: var(--c-ink);
}
.cta-band::before { content: none; }
.cta-band > * { margin: 0; }
.cta-band .cta-title {
  font-size: 1.875rem;
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variation-settings: "opsz" 48;
  text-wrap: balance;
}
.cta-band > p { color: var(--c-ink-2); opacity: 1 !important; max-inline-size: 36rem; margin-block-end: .5rem !important; }   /* .opacity-75 / .mb-4 yardımcıları !important */
.cta-band > .d-flex { justify-content: flex-start !important; }                                                              /* .justify-content-center !important */
@media (min-width: 992px) {
  .cta-band { grid-template-columns: minmax(0, 1fr) auto; padding: 3rem 3.5rem; }
  .cta-band .cta-title { font-size: 2.375rem; }
  .cta-band > .cta-title, .cta-band > p { grid-column: 1; }
  .cta-band > p { margin-block-end: 0 !important; }
  .cta-band > .d-flex { grid-column: 2; grid-row: 1 / span 2; flex-wrap: nowrap !important; }   /* .flex-wrap !important; yan yana, satır yüksekliğini şişirmez */
}
/* Yuvarlak hap butonlar (.rounded-pill yardımcısı !important) → Seturack 6 px buton, 48 px yükseklik (btn-lg) */
.cta-band .btn.rounded-pill { border-radius: var(--radius-btn) !important; padding-block: .75rem; }
/* WStyle renkli zemin için ters butonlar (.btn-light / .btn-outline-light) açık kartta: birincil (brand) + ikincil (soft) */
.cta-band .btn-light {
  --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);
}
.cta-band .btn-outline-light {
  --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);
}

/* =====================================================================================================================
   5) Bilgi bankası (knowledgebase*.tpl, components/kb-sidebar.tpl)
   ===================================================================================================================== */
.kb-cat-count { color: var(--c-ink-3); font-weight: 500; }
.kb-cat-count .bi { color: var(--c-ink-3); }
.kb-meta-chip {
  border-color: var(--c-line);
  border-radius: var(--radius-badge);
  background-color: var(--c-surface-2);
  color: var(--c-ink-2);
}
.kb-meta-chip:hover { border-color: var(--c-line-strong); background-color: var(--c-surface-3); color: var(--c-ink); }
.kb-results-title .kb-results-query { color: var(--c-ink); }

/* "Hâlâ yardım" bandı: pembe zemin → nötr kart; köşe T03 §11'de (kart, 8 px) */
.kb-help-cta {
  background-color: var(--c-surface);
  border-color: var(--c-line);
  box-shadow: var(--sh-card);
}
.kb-help-cta-sub { color: var(--c-ink-3); }
/* Bilgi bankası ana sayfasında birincil aksiyon aramadır: yardım bandındaki talep düğmesi ikincil görünür (tek birincil) */
main:has(.kb-search-panel) .kb-help-cta .btn-primary {
  --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);
}

/* Kenar çubuğu seçimi: pembe dolgu yerine nötr zemin + brand çizgi (seçim = kırmızı çizgi, §1) */
.kb-cat-item.is-active .kb-cat-head {
  background-color: var(--c-surface-2);
  color: var(--c-ink);
  box-shadow: inset 3px 0 0 var(--c-brand);
}
[dir=rtl] .kb-cat-item.is-active .kb-cat-head { box-shadow: inset -3px 0 0 var(--c-brand); }
.kb-cat-item.is-active .kb-cat-head .kb-sidebar-ico,
.kb-cat-item.is-active .kb-cat-head .kb-sidebar-count,
.kb-cat-item.is-active .kb-cat-head .kb-cat-caret { color: var(--c-ink-2); }
.kb-subcat-link.is-current, .kb-subcat-link.is-current:hover {
  background-color: var(--c-surface-2);
  color: var(--c-ink);
}

/* =====================================================================================================================
   6) Blog ve duyurular (blog*.tpl, news*.tpl, components/{blog-*,news-newsletter}.tpl)
   ===================================================================================================================== */
/* Küçük resim yer tutucusu: kategori renginden pembe gradyan → nötr yüzey (kapak görseli varsa görsel aynen) */
.news-thumb,
.news-item .news-thumb, .news-feature .news-thumb {
  background-image: none;
  background-color: var(--c-surface-2);
  color: var(--c-ink-4);
  box-shadow: inset 0 0 0 1px var(--c-line);
}
/* Öne çıkan yazı: 3 px kırmızı sol şerit dekorasyondu → diğer kartlarla aynı kenar */
.news-feature { border-inline-start: 1px solid var(--c-line); }
/* Kategori rozeti: nötr; operatörün kategori rengi (--cat-color, veri) yalnız ikonda */
.badge.blog-cat-badge { background-color: var(--c-surface-3); color: var(--c-ink-2); }
.blog-cat-badge > .bi { color: var(--cat-color, var(--c-ink-3)); }
/* Kategori listesi seçimi: nötr zemin + brand çizgi */
.news-cat:hover { background-color: var(--c-surface-2); }
.news-cat.active {
  background-color: var(--c-surface-2);
  color: var(--c-ink);
  box-shadow: inset 3px 0 0 var(--c-brand);
}
[dir=rtl] .news-cat.active { box-shadow: inset -3px 0 0 var(--c-brand); }
.news-cat.active .news-cat-count { color: var(--c-ink-2); }
/* Etiketler: hap → 4 px nötr çip */
.blog-tag {
  border-radius: var(--radius-badge);
  background-color: var(--c-surface-2);
  border-color: var(--c-line);
  color: var(--c-ink-2);
}
.blog-tag:hover { color: var(--c-ink); background-color: var(--c-surface-3); border-color: var(--c-line-strong); }
.blog-tag:hover::before { color: var(--c-ink-3); }
/* Yorum sayısı: kırmızı dolgu sayaç → nötr sayaç (bildirim değil) */
.blog-comments-count { color: var(--c-ink-2); background-color: var(--c-surface-3); }

/* Bülten kutuları (yan sütun .news-subscribe, yazı altı .news-cta): pembe zemin → nötr kart; abonelik düğmesi ikincil
   (navy), kabuk bandındaki .btn-secondary ile aynı (tutarlılık + tek birincil). Koyu modda navy ters döner (§5.4). */
.news-subscribe, .news-cta {
  background-color: var(--c-surface);
  border-color: var(--c-line);
  box-shadow: var(--sh-card);
}
.news-subscribe .btn-primary, .news-cta .btn-primary {
  --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);
}
:root[data-bs-theme=dark] .news-subscribe .btn-primary,
:root[data-bs-theme=dark] .news-cta .btn-primary {
  --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);
}
/* Yazı detayında aynı sayfada iki bülten formu vardı (yazı altı .news-cta + kabuk bandı): bant varsa yazı altı gizlenir.
   Markup ve form sözleşmesi aynen durur (parite); bant kaldırılırsa yazı altı kendiliğinden görünür. */
body:has(.newsletter-band) .news-cta[data-newsletter] { display: none; }

/* =====================================================================================================================
   7) Referanslar (references*.tpl, components/reference-card.tpl)
   ===================================================================================================================== */
/* Varsayılan vurgu nötr; operatörün kategori rengi satır içi --ref-accent ile gelirse o kullanılır (veri) */
.reference-card { --ref-accent: var(--c-ink-3); }
.reference-cover { background-color: var(--c-surface-2); }
.reference-cover::after { content: none; }                    /* vurgu renkli gradyan + karartma örtüsü */
.reference-cover-ico { background-image: none; color: var(--c-ink-4); }
.reference-frame { background-color: var(--c-surface-2); }
.reference-frame-dots span { background-color: var(--c-line-strong); }
.reference-frame-addr { background-color: var(--c-surface); color: var(--c-ink-3); box-shadow: inset 0 0 0 1px var(--c-line); }
.reference-cat-label { color: var(--c-ink-3); }
/* Süzgeç çipleri = segment dili (T03 §7: seçili navy, koyuda ters); hap yerine 6 px */
.reference-chip { border-radius: var(--radius-btn); border-color: var(--c-line-strong); color: var(--c-ink-2); }
.reference-chip:hover { background-color: var(--c-surface-2); border-color: var(--c-line-strong); color: var(--c-ink); }
.reference-chip.active { background-color: var(--c-navy); border-color: var(--c-navy); color: var(--c-on-navy); }
:root[data-bs-theme=dark] .reference-chip.active { background-color: var(--c-on-navy); border-color: var(--c-on-navy); color: var(--c-navy); }
.reference-chip-count { border-radius: var(--radius-badge); }
.reference-chip.active .reference-chip-count { background-color: transparent; box-shadow: inset 0 0 0 1px currentColor; }
/* Detay */
.ref-cat-pill { border-radius: var(--radius-badge); background-color: var(--c-surface-3); color: var(--c-ink-2); }
.ref-hero-cat { border-radius: var(--radius-badge); background-color: var(--c-navy-2); color: var(--c-on-navy); }
.ref-feature-list .bi { color: var(--c-ok); }
.ref-tech-list .bi { color: var(--c-ink-3); }
.ref-shot-bar { background-color: var(--c-surface-2); }

/* =====================================================================================================================
   8) Bülten aboneliğinden çıkış (newsletter-unsubscribe.tpl; .st-ic-bulten ST:T11) — auth.css bileşenleri yalnız burada
   ===================================================================================================================== */
.st-ic-bulten .auth-icon:not(.auth-icon-success):not(.auth-icon-danger) {
  background-color: var(--c-surface-2);
  color: var(--c-ink-2);
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.st-ic-bulten .nl-address-row { border-radius: var(--radius-btn); background-color: var(--c-surface-2); }
.st-ic-bulten .nl-address-value { font-family: var(--font-mono); font-size: .875rem; font-weight: 500; color: var(--c-ink); }

/* =====================================================================================================================
   9) 404 (views/404.tpl): parıltı yok; durum kodu MONO ve mürekkep tonunda (tasarım sistemi §6-8 "mono durum kodu"),
      kaçış rotaları aynen (Ana sayfa birincil; bilgi bankası / destek ikincil)
   ===================================================================================================================== */
.error-hero::before { content: none; }
.error-code {
  margin-block-end: 1rem;
  font-family: var(--font-mono);
  font-size: clamp(3.5rem, 2.5rem + 6vw, 6.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--c-ink-3);
}
.error-lead { color: var(--c-ink-2); }

/* ---- 90-kalan.css ---- */
/* ---------------------------------------------------------------------------------------------------------------------
 * 90-kalan.css — Seturack · kalan yüzeyler: hesap ayarları + bakiye (account-settings.css, balance.css), alt hesaplar
 * (sub-accounts.css), API anahtarları (api-credentials.css), alan adı detayı (domain-detail.css), SMS paneli
 * (service-detail-sms.css), satış ortaklığı (affiliate.css), bayi paneli/programı (reseller.css, reseller-program.css),
 * lisans doğrulama (license-verification.css), lisans devri onayı.
 * Sahibi T13 (tasarım §4.11; docs/tasarim-sistemi.md §1, §2.3, §3.1, §3.2, §3.5, §3.9, §3.13). features.css'e derle.sh ile
 * birleşir (D-9). Markup'a dokunmaz; WStyle sınıflarını yalnız boyar. Renk yalnız var(--c-*) (hex tokens.css'te). Hareket
 * EKLENMEZ (transition/animation yok).
 *
 * Kapsam kuralı: seçiciler yalnız bu yüzeylere özgü WStyle sınıflarıdır (as-*, bal-*, sa-*, apik-*, dd-*, aff-*, rs-*, rsp-*,
 * lv-*, sms-* [yalnız account/sms.tpl yükler], .tld-table [yalnız views/domain.tpl]). Paylaşılan atomlar (.icon-disc, .btn-soft, .btn-check, .sw-* [ana sayfa da
 * yükler], .sd-* [hizmet detayı]) burada boyanmaz — tutarlılık için global kalırlar.
 *
 *  1) Yarıçap: kart/panel kökleri 8 px (§2.3; birim-notlari/T03.md "yarıçap"). İç satır/kontrol/ikon kutuları 6 px kalır.
 *  2) Gradyan ve pembe zemin yok (§1 "gradyan yok", "kırmızı yalnız aksiyon ve seçim"): bakiye kartı düz yüzey; ödeme/
 *     kullanılabilir bakiye panelleri ve "siz" satırı nötr zemin. Seçili durum (.is-active, :checked) kırmızı KALIR (seçim).
 *  3) Numaralı adım/sıra daireleri = lacivert numara dairesi (§3.13); koyu modda ters (§5.4, .btn-navy ile aynı dil).
 *  4) Bilgi bandı (§3.9): yüzeye özgü not şeritleri sol 4 px renkli çizgi alır (.alert ile aynı dil).
 *  5) Segment (§3.5): tema modu ve ürün seçici seçili öğesi pembe/kırmızı dolgu değil — .seg-on lacivert, koyu modda ters
 *     (components.css §7'deki küresel .btn-soft segmentiyle aynı dil; düzeltme turu 2).
 *  6) Tek birincil aksiyon (§3.1): aynı ekranda ikinci .btn-primary ikincil görünür (sınıf silinmez; görünüm ezilir).
 *  7) Dekorasyon değil içerik: istatistik kartı filigranı gizli; çok renkli ikon çipi yok (§1; 60-panel.css dashboard çipleriyle
 *     aynı nötr dil — düzeltme turu 2); veri değerleri (komisyon, kademe oranı) kırmızı değil.
 * ------------------------------------------------------------------------------------------------------------------- */

/* 1) Kart / panel kökleri ------------------------------------------------------------------------------------------- */
.as-card, .as-panel, .as-notif-card,
.bal-hero,
.sa-user, .sa-perm-group,
.apik-key, .apik-perm-body, .apik-log-summary,
.aff-payout, .aff-perk,
.sms-sender, .sms-charguide, .sms-calc-result {
    border-radius: var(--radius-card);
}

/* 2) Gradyan / pembe zemin -------------------------------------------------------------------------------------------- */
.bal-hero { background-image: none; background-color: var(--c-surface); }
.aff-payout, .aff-payout-avail { background: var(--c-surface-2); }
.aff-payout-avail { border-radius: var(--radius-btn); }
/* "Siz" satırı: kırmızı başlangıç çizgisi (sahiplik işareti) kalır, pembe zemin ve kenar tonu nötr */
.sa-user-self { background-color: var(--c-surface-2); border-color: var(--c-line); }
/* En üst kademe: rozet + brand-line çerçeve yeter; pembe zemin yok */
.rsp-tier-top { background: var(--c-surface); border-color: var(--c-brand-line); }
/* Bayi panelindeki "kademeniz" satırı: "Kademeniz" rozeti durumu zaten söylüyor; satırın pembe zemini ikinci kırmızı işaret
   olurdu → "siz" satırıyla (.sa-user-self) aynı nötr zemin (düzeltme turu 2) */
.rs-tier-row.is-current { background: var(--c-surface-2); }
/* Kart gölgesi tek ölçü (§3.2): hesap örneği kutusundaki büyük "pop" gölgesi kart gölgesine iner */
.rsp-calc { box-shadow: var(--sh-card); }
/* Listedeki dekoratif kırmızı ikonlar nötr (kırmızı yalnız aksiyon/seçim) */
.bal-benefits li i, .bal-priority-name i, .aff-fact > .bi { color: var(--c-ink-3); }

/* 3) Numaralı daireler: lacivert (açık) / ters (koyu) ---------------------------------------------------------------- */
.rsp-step-num, .lv-step-num, .dd-step-num, .dd-ns-num, .bal-priority li::before {
    background-color: var(--c-navy);
    color: var(--c-on-navy);
    font-weight: 600;
}
:root[data-bs-theme=dark] :is(.rsp-step-num, .lv-step-num, .dd-step-num, .dd-ns-num),
:root[data-bs-theme=dark] .bal-priority li::before {
    background-color: var(--c-on-navy);
    color: var(--c-navy);
}

/* 4) Bilgi bandı: sol 4 px çizgi (bilgi = info, uyarı = warn) --------------------------------------------------------- */
.apik-note, .sa-note, .bal-fx, .as-backup-note, .as-2fa-note {
    border-inline-start: 4px solid var(--c-info);
    border-radius: var(--radius-btn);
}
.bal-low-warning, .as-verify-status, .as-2fa-required, .aff-payout-strip {
    border-inline-start: 4px solid var(--c-warn);
    border-radius: var(--radius-btn);
}

/* 5) Segment ve sekme -------------------------------------------------------------------------------------------------- */
/* Hesap/bakiye dikey sekmeleri: seçili = ink metin + yüzey zemini + kırmızı çizgi (panel kenar çubuğuyla aynı dil, §3.14;
   mobilde yatay şerit → alt çizgi, §3.6). Pembe dolgu yok. */
.as-vtabs .nav-link.active {
    color: var(--c-ink);
    background-color: var(--c-surface);
    box-shadow: inset 0 -2px 0 0 var(--c-brand);
}
@media (min-width: 992px) {
    .as-vtabs .nav-link.active { box-shadow: inset 3px 0 0 0 var(--c-brand); }
    [dir=rtl] .as-vtabs .nav-link.active { box-shadow: inset -3px 0 0 0 var(--c-brand); }
}
/* Görünüm modu segmenti (Açık/Koyu/Otomatik): gri ray + seçili dilim .seg-on (lacivert; koyu modda ters). Kırmızı yok.
   Düzeltme turu 2: önceki "beyaz dilim" seçili ↔ seçisiz zemin farkı 1,17:1 (açık) / 1,30:1 (koyu) idi — T03'ün components.css
   §7'de kapattığı 1.4.11 sorununun aynısı; artık navy/ray 14,3:1 · on-navy/ray (koyu) 16,5:1; seçisiz metin ink-2/ray 6,96 / 9,88:1 ve küresel segmentle aynı görünüm. */
.as-thememode { border-radius: var(--radius-btn); background-color: var(--c-surface-3); border-color: var(--c-line); }
.as-thememode .btn { border-radius: var(--radius-mini); color: var(--c-ink-2); }
.as-thememode .btn:hover { color: var(--c-ink); }
.as-thememode .btn.active { color: var(--c-on-navy); background-color: var(--c-navy); }
:root[data-bs-theme=dark] .as-thememode { background-color: var(--c-canvas); }
:root[data-bs-theme=dark] .as-thememode .btn.active { color: var(--c-navy); background-color: var(--c-on-navy); }
/* Bayi programı ürün seçici: seçili = lacivert segment (.seg-on, §3.5); koyu modda ters */
.rsp-product-toggle { border-radius: var(--radius-btn); }
.rsp-product-option { border-radius: var(--radius-mini); }
.rsp-product-option.active { background-color: var(--c-navy); color: var(--c-on-navy); }
:root[data-bs-theme=dark] .rsp-product-option.active { background-color: var(--c-on-navy); color: var(--c-navy); }

/* 6) Tek birincil aksiyon: ikinci .btn-primary ikincil görünümde (components.css .btn-soft ile aynı değerler) ------------
   - API anahtarları boş durumu: başlıktaki "API Anahtarı Oluştur" birincil, boş durum düğmesi ikincil (§3.10)
   - Lisans doğrulama: "Lisansı Kontrol Et" birincil, "İzinsiz kullanımı bildir" ikincil
   - Lisans devri onayı: "Onayla" formu varken alt bağlantılar ikincil (views/account/license-transfer-verify.tpl, ST:T13)
   - SMS paneli genel bakış: hero'nun lacivert "SMS Gönder"i sayfanın tek dolu düğmesi; kredi kartındaki "Kredi Ekle" ikincil
     (G3 — T10 notu: aynı ekranda iki vurgulu düğme; hizmet detayındaki data-st-primary kararıyla aynı ilke. Düşük bakiyede
     gönderim formundaki "Kredi Ekle" bağlantısı ve kredi modalının devam düğmesi etkilenmez) */
.apik-empty .btn-primary, .lv-notice-cta.btn-primary, .st-kalan-ikincil.btn-primary,
#sd-overview .sd-panel-head .btn-primary[data-bs-target="#sd-addcredit"] {
    --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;
}

/* Sayfa başlığı açıklaması: dar ekranda başlığın altında, sola yaslı (WStyle her genişlikte sağa yaslıyordu → 375'te kopuk okunur) */
@media (max-width: 767.98px) {
    .as-pagehead > p { text-align: start; }
}

/* Alan adı fiyat tablosu (yalnız views/domain.tpl): tutar ve para simgesi aynı satırda — 375 px'te "300,00" / "₺" kırılıyordu.
   Tablo .table-responsive içinde; dar ekranda sarmalayıcı yatay kayar, sayfa taşmaz. (Düzeltme turu; 40-katalog-funnel.css
   .plan-row .price-was ile aynı karar.) */
.tld-table td.num-tabular { white-space: nowrap; }

/* 7) Dekorasyon değil içerik ------------------------------------------------------------------------------------------- */
/* Satış ortaklığı + bayi paneli KPI kartları: büyük soluk filigran ikon gizli (bayi kartlarında da aynı desen vardı) */
.aff-stat-watermark, .rs-kpi-watermark { display: none; }
/* KPI ikon çipleri: WStyle her karta ayrı renk verir (bg-primary/info/success/warning-subtle) → tasarım sistemi §1 "çok renkli ikon"
   YAPMA. T09'un dashboard çipleriyle (60-panel.css §4) aynı nötr çip: surface-3 zemin + ink-2 ikon. Bootstrap yardımcı sınıfları
   değişken okuduğu için yalnız bu çiplerin içinde değişkenler ezilir (markup değişmez). */
:is(.aff-stat-ico, .rs-kpi-ico) {
    --bs-primary-bg-subtle: var(--c-surface-3);  --bs-primary-text-emphasis: var(--c-ink-2);
    --bs-info-bg-subtle: var(--c-surface-3);     --bs-info-text-emphasis: var(--c-ink-2);
    --bs-warning-bg-subtle: var(--c-surface-3);  --bs-warning-text-emphasis: var(--c-ink-2);
    --bs-success-bg-subtle: var(--c-surface-3);  --bs-success-text-emphasis: var(--c-ink-2);
}
/* Para/oran verisi kırmızı basılmaz (kırmızı = aksiyon/seçim; tutar kırmızısı borç/hata okunur) */
.aff-commission .list-amount, .rsp-tier-rate, .rsp-calc-part.is-result .rsp-calc-num { color: var(--c-ink); }
.rsp-calc-arrow { color: var(--c-ink-3); }