/* ==========================================================
   BEF QR - Tasarim Sistemi
   Modern, light-mode SaaS arayuzu
   ========================================================== */

/* --- 1. Tasarim Token'lari --- */
:root {
    /* Marka renkleri */
    --brand-50:  #eef4ff;
    --brand-100: #d9e6ff;
    --brand-200: #bcd3ff;
    --brand-300: #8eb6ff;
    --brand-400: #598dff;
    --brand-500: #3366ff;
    --brand-600: #1f4ff5;
    --brand-700: #173de1;
    --brand-800: #1933b6;
    --brand-900: #1a318f;

    /* Notr gri tonlari (slate) */
    --gray-50:  #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    /* Anlamsal renkler */
    --success: #16a34a; --success-bg: #dcfce7; --success-fg: #15803d;
    --warning: #d97706; --warning-bg: #fef3c7; --warning-fg: #b45309;
    --danger:  #dc2626; --danger-bg:  #fee2e2; --danger-fg:  #b91c1c;
    --info:    #0891b2; --info-bg:    #cffafe; --info-fg:    #0e7490;
    --neutral-bg: #f1f5f9; --neutral-fg: #475569;

    /* Yuzeyler */
    --bg:          #f6f8fb;
    --surface:     #ffffff;
    --surface-alt: #f8fafc;
    --border:      #e7ebf0;
    --border-strong: #d8dee6;

    /* Metin */
    --text:        #0f172a;
    --text-muted:  #64748b;
    --text-subtle: #64748b;

    /* Tipografi */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Yaricaplar */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;
    --r-full: 999px;

    /* Golgeler */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

    /* Olcekler */
    --sidebar-w: 264px;
    --header-h: 64px;
    --ctrl-h: 42px; /* form kontrolu (input/select/kare buton) tek tip yukseklik */

    --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- 2. Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; }

/* --- Özel scrollbar (tüm tema) ---
   ÇAKIŞMA UYARISI: Chrome 121'den beri bir öğede `scrollbar-width` ya da
   `scrollbar-color` tanımlıysa Chrome o öğedeki BÜTÜN `::-webkit-scrollbar-*`
   kurallarını YOK SAYAR. Önceki hâlde ikisi birlikte (üstelik `*` seçiciyle)
   yazılıydı; yani 12px genişlik, yuvarlak tutamak, hover rengi ve ok
   düğmelerini gizleme kuralı modern Chrome'da hiç uygulanmıyordu — tarayıcı
   kendi ince çubuğunu çiziyordu.

   Çözüm: iki sistemi AYIRMAK. Webkit sözde-öğelerini destekleyen tarayıcılar
   (Chrome, Edge, Safari) onları kullanır; desteklemeyen (Firefox) standart
   özelliklere düşer. Aynı öğede ikisi birden tanımlanmaz. */

/* Chrome / Edge / Safari */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--gray-300); border-radius: 999px;
    border: 3px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
/* Yukarı/aşağı ok düğmeleri: işletim sisteminin köşeli gri kutuları, ince
   yuvarlak tutamağın ucunda yamalı duruyordu. Kısa kaydırma alanlarında
   (modal içi) ikisi birlikte çubuğun yarısını kaplıyordu. */
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

/* Firefox — webkit sözde-öğeleri desteklenmiyor, standart özelliklere düşülür.
   `thin` zaten ok düğmesi çizmez, ek kural gerekmiyor. */
@supports not selector(::-webkit-scrollbar) {
    * { scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; }
}

[data-lucide] { width: 18px; height: 18px; stroke-width: 2; }

/* ==========================================================================
   İKON + METİN DİKEY ORTALAMA GARANTİSİ (KESİN KURAL)
   Gövde line-height 1.55; tek satır UI bileşenlerinde metin kutusunu ikondan
   yüksek yapıp optik kaymaya yol açar. Tüm ikon+metin taşıyan tek-satır
   bileşenler flex + align-items:center + line-height:1.2 kullanır (TR alt-uzantı güvenli).
   Yeni bir ikon+metin bileşeni eklerken BU KALIBA uy.
   ========================================================================== */
.btn, .nav-item, .dropdown-item, .usermenu__btn,
.badge, .tag-pill, .chip, .card__title,
.cselect__trigger, .cselect__option, .muted-link,
.switch-row, .checkbox, .radio, .cat-item, .toast,
.menu-row__meta, .field__hint, .field__error, .copy-field, .stat__label {
    line-height: 1.2;
}
/* KESİN KURAL: ikon+metin her yerde dikeyde ortalı. İkonlar flex-item olarak sabit
   boyutlu kalır (küçülmez), taban-çizgisi boşluğu yapmaz (block) → flex align-items:center garanti. */
[data-lucide] { flex: none; }

/* --- 3. Yardimcilar --- */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.grid { display: grid; }
.text-muted { color: var(--text-muted); }
.text-subtle { color: var(--text-subtle); }
.text-sm { font-size: 13px; }
.text-xs { font-size: 12px; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.mt-1{margin-top:4px} .mt-2{margin-top:8px} .mt-3{margin-top:12px} .mt-4{margin-top:16px} .mt-6{margin-top:24px}
.mb-2{margin-bottom:8px} .mb-3{margin-bottom:12px} .mb-4{margin-bottom:16px} .mb-6{margin-bottom:24px}
.w-full { width: 100%; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.hidden { display: none; }
.nowrap { white-space: nowrap; }

/* --- 4. Uygulama duzeni (sidebar + ana) --- */
.app { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    transition: transform var(--transition);
}
.sidebar__brand {
    height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 22px;
    /* Üst şeritle AYNI sebep: logo da yarım piksele düşmesin (bkz. .topbar). */
    box-shadow: inset 0 -1px 0 var(--border);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.01em;
}
.sidebar__logo {
    width: 32px; height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    color: #fff;
    display: grid; place-items: center;
    font-weight: 700; font-size: 15px;
    box-shadow: 0 4px 10px rgba(31, 79, 245, 0.3);
}
.sidebar__logo svg { width: 100%; height: 100%; display: block; }
.sidebar__nav { padding: 16px 12px; overflow-y: auto; flex: 1; }
.nav-group + .nav-group { margin-top: 22px; }
.nav-group__title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-subtle);
    padding: 0 12px 8px;
}
.nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border-radius: var(--r-md);
    color: var(--gray-600);
    font-weight: 500;
    transition: var(--transition);
    margin-bottom: 2px;
}
.nav-item:hover { background: var(--gray-100); color: var(--text); }
.nav-item.active { background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
.nav-item.active [data-lucide] { color: var(--brand-600); }
.nav-item [data-lucide] { width: 19px; height: 19px; color: var(--gray-400); }
.nav-item__badge {
    margin-left: auto;
    background: var(--danger-bg); color: var(--danger-fg);
    font-size: 11px; font-weight: 700;
    padding: 1px 7px; border-radius: var(--r-full);
}
/* Kilitli menü öğesi: gizlenmez, soluk + kilit ikonuyla gösterilir (upsell). */
.nav-item--locked { color: var(--gray-400); }
.nav-item--locked [data-lucide]:first-child { opacity: .6; }
.nav-item--locked:hover { background: var(--gray-100); color: var(--gray-600); }
.nav-item__lock {
    margin-left: auto;
    width: 14px !important; height: 14px !important;
    color: var(--gray-400) !important;
}

.main {
    flex: 1;
    margin-left: var(--sidebar-w);
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    height: var(--header-h);
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(8px);
    /* ALT ÇİZGİ BORDER DEĞİL, GÖLGE. `border-bottom` içerik kutusundan 1px
       yiyordu: 64 − 1 = 63, yani TEK sayı. Ortalanan her öğe (başlık, kredi
       pili, profil) yarım piksele düşüyor, metin ve rakamlar bulanıklaşıyordu.
       Gölge aynı çizgiyi çiziyor ama yerleşimi bozmuyor → içerik kutusu 64
       kalıyor ve ortalama tam sayıya oturuyor. */
    box-shadow: inset 0 -1px 0 var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    position: sticky;
    top: 0;
    z-index: 30;
}
.topbar__title { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.topbar__title small { display:block; font-size: 12px; color: var(--text-muted); font-weight: 400; }

.content { padding: 28px; flex: 1; width: 100%; max-width: 100%; }

/* Kullanici menusu */
.usermenu { position: relative; }
.usermenu__btn {
    display: flex; align-items: center; gap: 10px;
    padding: 5px 10px 5px 6px;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    background: var(--surface);
    cursor: pointer;
    transition: var(--transition);
}
.usermenu__btn:hover { background: var(--gray-50); border-color: var(--border-strong); }

/* Topbar profil tetikleyicisi — çerçevesiz: topbar zaten bir yüzey, içine kutu
   çizmek "kutu içinde kutu" yaratıyordu. Durum zeminle anlatılır.
   NOT: .usermenu__btn sınıfı QR indirme dropdown'ında da kullanılıyor;
   bu yüzden görsel kurallar .topbar altına kapsanır. */
.topbar .usermenu__btn {
    gap: 9px; padding: 5px 9px 5px 5px;
    border: 0; background: none;
    transition: background .15s;
}
.topbar .usermenu__btn:hover { background: var(--gray-100); }
.topbar .usermenu.open .usermenu__btn { background: var(--gray-100); }
.usermenu__id { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.usermenu__name {
    max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.25;
}
.usermenu__meta {
    max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 11px; font-weight: 500; color: var(--text-subtle); line-height: 1.25;
}
.usermenu__chev {
    width: 15px; height: 15px; flex: none; color: var(--text-subtle);
    transition: transform .18s cubic-bezier(.4,0,.2,1);
}
.usermenu.open .usermenu__chev { transform: rotate(180deg); }
/* Dar ekranda yalnızca avatar kalır — isim topbar başlığını sıkıştırmasın */
@media (max-width: 640px) {
    .usermenu__id, .usermenu__chev { display: none; }
    .usermenu__btn { padding: 4px; }
}
.avatar {
    width: 34px; height: 34px; flex: none;
    border-radius: var(--r-full);
    background: linear-gradient(140deg, var(--brand-500), #3b2fd4);
    color: #fff; display: grid; place-items: center;
    font-weight: 700; font-size: 12.5px; letter-spacing: .02em;
    /* İç ışık halkası: düz daire yerine hacimli görünüm */
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
.avatar--md { width: 38px; height: 38px; font-size: 14px; }
.usermenu__dropdown {
    /* z-index ZORUNLU: altında konumlandırılmış öğeler var (satır kebap menüsü z:30,
       satış toggle'ları) — indekssiz kalırsa onlar menünün ÜSTÜNE çizilir. */
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 50;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    min-width: 210px; padding: 6px;
    opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top right;
    transition: opacity .16s, transform .16s cubic-bezier(.4,0,.2,1), visibility .16s;
}
.usermenu.open .usermenu__dropdown { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.topbar .usermenu__dropdown { min-width: 246px; }
/* İki satırlı menü öğeleri (başlık + kapsam/maliyet) barındıran geniş menü.
   Genişlik açıklama satırının SARMAMASI için verilir — sarınca öğeler 3 satıra
   çıkıp menü okunamaz hâle geliyordu. */
.usermenu__dropdown--wide { min-width: 292px; }
/* Dar ekranda sabit genişlik taşma yaratır → ekrana sığdır, açıklama sarabilsin */
@media (max-width: 400px) {
    .usermenu__dropdown--wide { min-width: 0; width: calc(100vw - 32px); }
    .usermenu__dropdown--wide .dropdown-item small { white-space: normal; }
}
.usermenu__header {
    display: flex; align-items: center; gap: 10px;
    padding: 10px; margin-bottom: 6px;
    border-radius: var(--r-md); background: var(--gray-50);
}
.usermenu__hid { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.usermenu__header .usermenu__name { max-width: 160px; font-size: 13.5px; }
.usermenu__mail {
    max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 11.5px; color: var(--text-muted);
}
.dropdown-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: var(--r-md);
    color: var(--gray-700); width: 100%; border: 0; background: none; cursor: pointer; text-align: left;
    font-size: 13.5px;
}
.dropdown-item:hover { background: var(--gray-100); }
.dropdown-item.danger { color: var(--danger-fg); }
.dropdown-item.danger:hover { background: var(--danger-bg); }
.dropdown-item [data-lucide] { width: 16px; height: 16px; flex: none; }
.dropdown-item > span { min-width: 0; }
/* İki satırlı öğe: başlık + kapsam/maliyet. small SARMAZ — sarınca öğeler üç
   satıra çıkıp menü okunamaz hâle geliyordu; genişliği --wide karşılıyor. */
.dropdown-item strong { display: block; font-weight: 600; line-height: 1.3; }
.dropdown-item small {
    display: block; margin-top: 2px; white-space: nowrap;
    font-size: 11px; font-weight: 500; color: var(--text-subtle); line-height: 1.3;
}
.dropdown-item:hover small { color: var(--text-muted); }
.usermenu__dropdown--wide .dropdown-item { align-items: flex-start; padding: 10px 12px; }
.usermenu__dropdown--wide .dropdown-item [data-lucide] { margin-top: 1px; }

/* --- 5. Kartlar --- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
}
.card__header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card__title { display: flex; align-items: center; font-size: 15px; font-weight: 650; }
.card__body { padding: 22px; }
.card__footer { padding: 16px 22px; border-top: 1px solid var(--border); background: var(--surface-alt); border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* --- 6. Istatistik kartlari --- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}
/* Izgaradaki kartlar esit yukseklikte; footer en alta sabitlenir */
.stats-grid > .card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.stats-grid > .card > .card__body { flex: 1 1 auto; }
.stats-grid > .card > .card__footer { margin-top: auto; }
.stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 20px;
    box-shadow: var(--shadow-xs);
    transition: var(--transition);
}
.stat:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.stat__top { display: flex; align-items: center; justify-content: space-between; }
.stat__icon {
    width: 42px; height: 42px; border-radius: var(--r-md);
    display: grid; place-items: center;
}
.stat__icon [data-lucide] { width: 21px; height: 21px; }
.stat__icon.brand { background: var(--brand-50); color: var(--brand-600); }
.stat__icon.green { background: var(--success-bg); color: var(--success-fg); }
.stat__icon.amber { background: var(--warning-bg); color: var(--warning-fg); }
.stat__icon.red   { background: var(--danger-bg); color: var(--danger-fg); }
.stat__icon.cyan  { background: var(--info-bg); color: var(--info-fg); }
.stat__value { font-size: 27px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }

/* GENEL KURAL — sayısal gösterimler:
   Orantılı rakamlar (varsayılan) farklı genişlikte olduğu için büyük sayılar dengesiz ve
   "acemice" durur; kartlar/sütunlar arasında da hizasızlık yapar. tabular-nums eşit genişlik
   verir. Büyük+kalın sayılarda ayrıca aralık sıkılaştırılır (bkz. .stat__value: -0.02em).
   Yeni bir sayı gösterimi eklerken .num sınıfını kullan ya da buraya ekle. */
.num,
/* Tablo hücreleri: fatura/ödeme/abonelik listelerinde tutarlar alt alta gelir.
   tabular-nums YALNIZCA rakam genişliğini eşitler, metni etkilemez → tüm
   hücrelere uygulamak güvenli ve 50 ayrı view'a `.num` eklemekten sağlam.
   (money() çıktısına HTML sarmak DEĞİL: aynı fonksiyon JSON'a da gidiyor,
   orada ham etiket basılırdı.) */
.table td,
.table th,
.stat__value,
.credit-card__amount b,
.credit-card__price,
.credit-card__unit,
.plan-card__price,
.mrow__price,
.mrow__range,
/* Sipariş kartı: fiyatlar alt alta dizili bir sütun — orantılı rakamlar hizasız
   duruyordu (public menüdeki .card__price kuralının panel karşılığı). */
.order-item__price,
.order-card__amount {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
.num { letter-spacing: -0.02em; }
.stat__label { color: var(--text-muted); font-size: 13px; margin-top: 4px; }
.stat__trend { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.stat__trend.up { color: var(--success); }
.stat__trend.down { color: var(--danger); }

/* Hızlı işlemler (dashboard eylem kutucukları) */
.qa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.qa {
    display: flex; align-items: center; gap: 13px;
    padding: 15px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    transition: var(--transition);
    text-decoration: none;
}
.qa:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); border-color: var(--border-strong); }
.qa__icon { width: 42px; height: 42px; border-radius: var(--r-md); display: grid; place-items: center; flex: none; }
.qa__icon [data-lucide] { width: 20px; height: 20px; }
.qa__icon.brand { background: var(--brand-50); color: var(--brand-600); }
.qa__icon.green { background: var(--success-bg); color: var(--success-fg); }
.qa__icon.amber { background: var(--warning-bg); color: var(--warning-fg); }
.qa__icon.cyan  { background: var(--info-bg); color: var(--info-fg); }
.qa__body { display: flex; flex-direction: column; min-width: 0; }
.qa__title { font-weight: 650; font-size: 14px; color: var(--text); line-height: 1.2; }
.qa__sub { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.25; }

/* Menü yönetimi ilk-kurulum (boş menü): 3 seçenekli başlangıç kartları */
.onb { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 4px; }
@media (max-width: 900px) { .onb { grid-template-columns: 1fr; } }
.onb-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    padding: 26px 24px; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--shadow-xs); text-decoration: none;
    cursor: pointer; transition: border-color 0.16s, box-shadow 0.16s, transform 0.08s;
}
.onb-card:hover { border-color: var(--brand-300); box-shadow: 0 14px 34px -18px rgba(31, 79, 245, 0.34); transform: translateY(-2px); }
.onb-card__icon { width: 48px; height: 48px; border-radius: var(--r-md); display: grid; place-items: center; flex: none; margin-bottom: 4px; }
.onb-card__icon [data-lucide] { width: 23px; height: 23px; }
.onb-card__icon.brand { background: var(--brand-50); color: var(--brand-600); }
.onb-card__icon.green { background: var(--success-bg); color: var(--success-fg); }
.onb-card__icon.cyan  { background: var(--info-bg); color: var(--info-fg); }
.onb-card__title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.onb-card__desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; flex: 1; }
.onb-card__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13.5px; font-weight: 650; color: var(--brand-600); }
.onb-card__cta [data-lucide] { width: 16px; height: 16px; transition: transform 0.16s; }
.onb-card:hover .onb-card__cta [data-lucide] { transform: translateX(3px); }
/* Form kartındaki CTA gerçek buton — link görünümünü taşısın, hizayı bozmasın */
.onb-card__cta--btn { border: 0; background: none; padding: 0; font: inherit; font-weight: 650; font-size: 13.5px; color: var(--brand-600); cursor: pointer; }

/* Onboarding hero — menü yayınlama (dashboard ana çağrı) */
/* ---- Panel ust bento: hos geldin (sol) + hesap ozeti (sag) ---- */
.home-bento { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; align-items: stretch; }
.home-welcome {
    flex: 1.7 1 340px; min-width: 0;
    display: flex; flex-direction: column;
    padding: 22px 24px;
    border-radius: var(--r-lg);
    border: 1px solid var(--brand-100);
    background: linear-gradient(140deg, var(--brand-50), var(--surface) 78%);
}
.home-welcome__badge {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; line-height: 1.2;
    padding: 5px 11px; border-radius: 99px;
    background: var(--surface); border: 1px solid var(--border); color: var(--text-muted);
}
.home-welcome__badge [data-lucide] { width: 14px; height: 14px; }
.home-welcome__badge.is-live { color: var(--success-fg); background: var(--success-bg); border-color: transparent; }
.home-welcome__title { font-size: 25px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-top: 13px; }
.home-welcome__text { color: var(--text-muted); font-size: 14px; line-height: 1.55; margin-top: 7px; max-width: 46ch; }
.home-welcome__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 18px; }
.home-account {
    flex: 1 1 250px; min-width: 0;
    display: flex; flex-direction: column;
    padding: 20px 22px;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: var(--surface);
}
.home-account__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.home-account__plan { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin-top: 2px; }
.home-account__rows { display: flex; flex-direction: column; gap: 11px; }
.home-account__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.home-account__row .lbl { color: var(--text-muted); }
.home-account__row .val { font-weight: 600; color: var(--text); white-space: nowrap; }
.home-account__row .val.due { color: var(--warning-fg); }
.home-account__foot { margin-top: auto; padding-top: 18px; }

.publish-hero {
    background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-800) 100%);
    border-radius: var(--r-lg);
    padding: 22px 24px 24px;
    margin-bottom: 24px;
    box-shadow: 0 8px 24px rgba(25, 51, 182, 0.22);
    color: #fff;
}
.publish-hero__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.publish-hero__badge {
    width: 46px; height: 46px; border-radius: 13px; flex: none;
    background: rgba(255, 255, 255, 0.16);
    display: grid; place-items: center;
}
.publish-hero__badge [data-lucide] { width: 23px; height: 23px; color: #fff; }
.publish-hero__title h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.publish-hero__title p { font-size: 13.5px; color: rgba(255, 255, 255, 0.85); margin-top: 3px; }
.publish-hero__progress { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.publish-hero__bar { flex: 1; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.24); overflow: hidden; }
.publish-hero__bar > span { display: block; height: 100%; border-radius: 99px; background: #fff; width: var(--pct, 0%); transition: width 0.45s ease; }
.publish-hero__count { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, 0.92); white-space: nowrap; }
.publish-hero__panel {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--r-md);
    padding: 4px 16px;
    margin-bottom: 18px;
}
.publish-hero__panel .chk-item { padding: 13px 0; }
.publish-hero__panel .chk-item + .chk-item { border-top: 1px solid rgba(255, 255, 255, 0.13); }
.publish-hero__panel .chk-ico { background: rgba(255, 255, 255, 0.16); color: #fff; }
.publish-hero__panel .chk-item.done .chk-ico { background: #fff; color: var(--brand-700); }
.publish-hero__panel .chk-label { color: #fff; }
.publish-hero__panel .chk-item.done .chk-label { color: rgba(255, 255, 255, 0.68); }
.publish-hero__panel .muted-link { color: #fff; }
.publish-hero__panel .muted-link:hover { color: rgba(255, 255, 255, 0.82); }
.publish-hero__panel .badge--success { background: rgba(255, 255, 255, 0.92); color: var(--brand-700); }

/* Sekmeler (tabs) */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 22px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
    appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
    padding: 11px 15px; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
    color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
    white-space: nowrap; transition: color 0.15s ease, border-color 0.15s ease;
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--brand-600); border-bottom-color: var(--brand-600); }
.tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-100); border-radius: 7px; }
.tab [data-lucide] { width: 16px; height: 16px; }

/* QR kod alanı (Menü Adresin kartı) */
/* Menü adresi + QR: yan yana. QR sütunu içeriğine göre sabitlenmiş (önizleme
   148 + boşluk + kontroller), kalan genişliği adres kartı alıyor. İkisi de tam
   genişlik olsaydı QR kartının sağında kocaman bir boşluk kalırdı. */
/* İki kart AYNI YÜKSEKLİKTE. `align-items: start` her kartı kendi içeriği
   kadar bırakıyordu; yan yana iki kutunun alt kenarı tutmayınca satır kırık
   görünüyor. Varsayılan `stretch` ile kısa olan uzun olana uyuyor. */
.menucards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); gap: 16px; }
@media (max-width: 900px) { .menucards { grid-template-columns: 1fr; } }

/* QR kartı: solda önizleme, sağda seçim + indirme. `margin-top` YOK —
   artık kendi kartının ilk öğesi, kartın dolgusu yeterli. */
.qr-row { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.qr-preview { width: 148px; height: 148px; border: 1px solid var(--border); border-radius: var(--r-md); background: #fff; flex: none; }
.qr-side { display: flex; flex-direction: column; gap: 10px; min-width: 200px; flex: 1; align-items: flex-start; }
/* Sekmeler İKİ SEÇENEK kadar geniş. Açılır menüde kabın kendi darlığı sınırı
   veriyordu; kartta kap geniş olunca "Logosuz | Logolu" bir uçtan bir uca
   yayılıp gereğinden çok yer kaplıyor ve seçim gibi değil başlık gibi
   duruyordu. */
.qr-side .qrdl__tabs { width: 100%; max-width: 260px; }
.qr-side__label { font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.qr-side__actions { display: flex; gap: 8px; flex-wrap: wrap; }


/* Adres eylemleri: ADLI düğmeler, kendi satırında. Üç çıplak ikon kaydetme
   düğmesiyle aynı satırdayken satır tek bir kontrol gibi okunuyordu. */
/* Eylemler KARTIN ALTINDA. Kartlar eşit yükseklikte olduğundan kısa olanın
   altında ölü alan kalıyor ve düğmeler ortada asılı duruyordu. `margin-top:
   auto` artan boşluğu düğmelerin ÜSTÜNE veriyor; `padding-top` ise boşluk
   yokken (dar ekranda alt alta düşünce) aradaki nefesi koruyor — tek başına
   `auto` orada 0'a inip metne yapışırdı. */
.menucards > .card { display: flex; flex-direction: column; }
.menucards > .card > .card__body:has(.mlink-actions) { flex: 1; display: flex; flex-direction: column; }
.mlink-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 14px; }

/* --- 7. Rozetler --- */
.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px;
    border-radius: var(--r-full);
    font-size: 12px; font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.9; }
.badge--success { background: var(--success-bg); color: var(--success-fg); }
.badge--warning { background: var(--warning-bg); color: var(--warning-fg); }
.badge--danger  { background: var(--danger-bg);  color: var(--danger-fg); }
.badge--info    { background: var(--info-bg);    color: var(--info-fg); }
.badge--neutral { background: var(--neutral-bg); color: var(--neutral-fg); }
.badge--brand   { background: var(--brand-50);   color: var(--brand-700); }

/* "BEF AI" marka rozeti — parıltılı gradyan metin (mavi→mor→camgöbeği), her metin içinde vurgulu. */
/* display: inline — inline-flex DEĞİL. Bir inline-flex kutusunun taban çizgisi
   İLK flex öğesinden gelir; burada ilk öğe metinsiz parıltı karesi olduğu için
   taban çizgisi onun alt kenarından türetiliyor ve "BEF AI" yanındaki normal
   metne göre yukarı kayıyordu ("BEF AI destekli" ölçümde 4,4px kaçık).
   Boşluğu telafi etmek için konan margin-right:-2px de kelime arasındaki
   boşluğu tamamen yiyip "AIdestekli" hâline getiriyordu. Satır içi akışta
   ikisi de kendiliğinden doğru. */
.bef-ai {
    display: inline;
    font-weight: 700;
    background: linear-gradient(100deg, #1f4ff5 0%, #7c3aed 48%, #06b6d4 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: befaiShift 5s ease-in-out infinite;
    text-shadow: 0 0 18px rgba(124, 58, 237, 0.28);
}
.bef-ai__spark {
    /* vertical-align: metnin x-yüksekliğinin ortasına otur; baseline bırakılırsa
       kare taban çizgisine oturup harflerin üstüne taşar. */
    display: inline-block; vertical-align: -1px;
    width: 11px; height: 11px; margin-right: 3px;
    /* dört-köşeli parıltı (sparkle) şekli */
    clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
    background: linear-gradient(135deg, #3366ff, #7c3aed);
    animation: befaiSpark 2.4s ease-in-out infinite;
}
@keyframes befaiShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes befaiSpark { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.9; } 50% { transform: scale(1.25) rotate(90deg); opacity: 1; } }
/* BEF AI butonu: sparkles ikonu gradyan renkte, ince gradyan kenarlık */
.btn--befai { border-color: var(--brand-200); }
.btn--befai [data-lucide]:first-child { color: #7c3aed; }
.btn--befai:hover { border-color: #7c3aed; background: linear-gradient(100deg, rgba(31,79,245,0.06), rgba(124,58,237,0.06)); }

/* --- 8. Butonlar --- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 16px;
    border-radius: var(--r-md);
    font-weight: 600; font-size: 13.5px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    text-decoration: none;
}
/* GENEL KURAL: işlem yapan buton kilitlenir + spinner gösterir.
   Kilitli olduğu net görünmeli → soluk + doygunluğu düşük + not-allowed imleç,
   hover/aktif efektleri iptal. (JS tarafı: window.BEF.btnBusy) */
.btn:disabled,
.is-busy {
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
/* Sadece kilitli (işlem yok): belirgin şekilde soluk */
.btn:disabled:not(.is-busy) { opacity: 0.5; filter: saturate(0.35); }
/* İşlemde: spinner net görünsün diye daha az soluklaştırılır (opacity alt öğeleri de kısar) */
.is-busy { opacity: 0.78; filter: saturate(0.55); }
.btn:disabled:hover,
.is-busy:hover,
.btn:disabled:active,
.is-busy:active {
    transform: none;
    box-shadow: none;
}

/* Spinner — ikon kütüphanesinden BAĞIMSIZ (lucide ikon adları değişse de çalışır).
   currentColor kullanır → butonun metin rengini alır. */
.spinner {
    display: inline-block;
    flex: none;
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: befspin 0.65s linear infinite;
    vertical-align: -2px;
}
.spinner--lg { width: 22px; height: 22px; border-width: 2.5px; }
/* İkon optik ortalama: küçük harfli metnin x-yüksekliği satır-kutusu merkezinin ~1px altında
   kümelendiği için, saf flex ortalamada ikon yukarıda görünür. Sistematik 1px optik düzeltme. */
.btn [data-lucide] { width: 17px; height: 17px; }
.btn--primary { background: var(--brand-600); color: #fff; box-shadow: 0 1px 2px rgba(31,79,245,0.3); }
.btn--primary:hover { background: var(--brand-700); }
/* Renkli (beyaz yazılı) butonlarda muted metin (ör. filtre sayacı) düşük kontrasta düşmesin */
.btn--primary .text-muted, .btn--danger .text-muted { color: rgba(255,255,255,0.75); }
.btn--secondary { background: var(--surface); color: var(--gray-700); border-color: var(--border-strong); }
.btn--secondary:hover { background: var(--gray-50); border-color: var(--gray-300); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { background: var(--danger-fg); }
/* YUMUŞAK TEHLİKE: eylem yıkıcı ama sayfanın ASIL işi değil (ör. abonelik
   kartının başlığındaki "Aboneliği İptal Et"). Dolu kırmızı orada bağırıp
   kullanıcıyı iptale davet ediyor; nötr gri ise silme/iptal ailesinden
   olduğunu hiç söylemiyordu. Kırmızı metin + kırmızı çerçeve, açık zemin. */
.btn--danger-soft { background: var(--surface); color: var(--danger-fg); border-color: #fecaca; }
.btn--danger-soft:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger-fg); }
.btn--ghost { background: transparent; color: var(--gray-600); }
.btn--ghost:hover { background: var(--gray-100); }
.btn--light { background: #fff; color: var(--brand-700); }
.btn--light:hover { background: var(--brand-50); }
.btn--sm { padding: 6px 11px; font-size: 12.5px; border-radius: var(--r-sm); }
.btn--icon { padding: 8px; }
.btn--icon [data-lucide] { width: 16px; height: 16px; }
/* Input satırındaki kare ikon butonu — input ile aynı yükseklik (--ctrl-h) ve tam kare */
.btn--field { padding: 0; width: var(--ctrl-h); height: var(--ctrl-h); flex-shrink: 0; }
.btn--field [data-lucide] { width: 16px; height: 16px; }
.btn--block { display: flex; width: 100%; }

/* --- 9. Tablolar --- */
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); }
table.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table thead th {
    text-align: left;
    padding: 12px 18px;
    font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-subtle);
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
/* Başlıktaki hizalama sınıfı KURALI EZEBİLMELİ. `.table thead th` (0,2,1)
   `.text-right` sınıfından (0,1,0) güçlü olduğu için sağa yaslanmış tutar
   sütunlarında başlık solda, değer sağda kalıyordu — dört ekranda birden
   (fatura belgesi, admin fatura, abonelik ayarları, raporlar). */
.table thead th.text-right  { text-align: right; }
.table thead th.text-center { text-align: center; }
.table tbody td { padding: 14px 18px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--transition); }
.table tbody tr:hover { background: var(--surface-alt); }
.table .cell-primary { font-weight: 600; color: var(--text); }
.table .cell-sub { color: var(--text-muted); font-size: 12.5px; }
.table-actions { display: flex; gap: 6px; justify-content: flex-end; }

.cell-user { display: flex; align-items: center; gap: 11px; }
.cell-user .avatar { width: 36px; height: 36px; }

/* --- 10. Formlar --- */
/* align-items:start → grid hücreleri satırın en uzun hücresine göre GERİLMEZ.
   Aksi halde kısa alan gerilir, içindeki .flex(prefix+input) büyür ve @ öneki
   dikeyde kayar. start ile her alan doğal yüksekliğinde kalır (@ hep ortalı). */
.form-grid { display: grid; gap: 18px; align-items: start; }
.form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.span-2 { grid-column: span 2; }
.label { font-size: 13px; font-weight: 600; color: var(--gray-700); }
.label .req { color: var(--danger); }
/* `hidden` özniteliği, display tanımlı ögelerde (.btn vb.) ezilmesin */
[hidden] { display: none !important; }
.input, .select, .textarea {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    background: var(--surface);
    /* Yalnızca focus/hover görsellerini animasyonla — height'i DEĞİL (textarea resize takılmasın) */
    transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
    font-size: 14px;
}
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--brand-400);
    box-shadow: 0 0 0 3px var(--brand-100);
}
.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }
.textarea { resize: vertical; min-height: 90px; }
.input, .select { height: var(--ctrl-h); padding-top: 0; padding-bottom: 0; }
.input.error, .select.error, .textarea.error { border-color: var(--danger); }

/* Ozel select - native ok yerine kendi chevron'umuz */
.select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    color: var(--text);
    cursor: pointer;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 16px 16px;
}
.select:hover { border-color: var(--gray-300); }
.select::-ms-expand { display: none; }
.select option { color: var(--text); background: var(--surface); }
.select:disabled { background-color: var(--gray-100); color: var(--text-muted); cursor: not-allowed; opacity: 0.75; }
.field__error { color: var(--danger-fg); font-size: 12.5px; }
.field__hint { color: var(--text-muted); font-size: 12px; }
/* İkonlu ipucu — ikon + metin dikeyde KUSURSUZ ortalı, NUDGE YOK.
   Sır: ikon flex-item; metin ayrı bir span'de ve span'in line-height'ı ikon
   yüksekliğine eşitlenir → align-items:center her ikisinin kutusunu birebir
   ortalar, manuel kaydırma gerekmez. Çok satırda ilk satır ikonla hizalı kalır. */
.hint { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 12px; }
.hint > [data-lucide] { flex: none; width: 14px; height: 14px; color: var(--text-subtle); }
.hint > span { line-height: 14px; }
.input-group { position: relative; display: flex; align-items: center; }
.input-group > [data-lucide] { position: absolute; left: 13px; color: var(--text-subtle); width: 18px; height: 18px; }
.input-group .input { padding-left: 40px; }
.input-prefix {
    display: inline-flex; align-items: center; flex-shrink: 0;
    height: var(--ctrl-h); padding: 0 12px; line-height: 1;
    background: var(--gray-100); border: 1px solid var(--border-strong); border-right: 0;
    border-radius: var(--r-md) 0 0 var(--r-md); color: var(--text-muted); font-size: 14px;
}
.input-prefix + .input { border-radius: 0 var(--r-md) var(--r-md) 0; }
/* Prefix + input tek satırda hizalı dursun (flex stretch yerine sabit yükseklik) */
.flex > .input-prefix + .input { min-width: 0; }

/* Switch */
.switch { position: relative; display: inline-block; width: 42px; height: 24px; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__slider { position: absolute; inset: 0; background: var(--gray-300); border-radius: var(--r-full); transition: var(--transition); cursor: pointer; }
.switch__slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: var(--transition); box-shadow: var(--shadow-sm); }
.switch input:checked + .switch__slider { background: var(--brand-600); }
.switch input:checked + .switch__slider::before { transform: translateX(18px); }
/* Label yalnızca switch+metin kadar yer kaplar; satırın boş kısmına tıklama
   checkbox'ı toggle etmez. align-self: flex-start -> flex-item (.field) içinde
   germe (stretch) ile tam genişliğe yayılmasını engeller. */
.switch-row { display: inline-flex; align-self: flex-start; align-items: center; gap: 12px; line-height: 1.2; }

/* Ozel checkbox & radio */
.checkbox, .radio {
    display: inline-flex; align-items: center; gap: 9px;
    cursor: pointer; user-select: none;
    font-size: 13.5px; line-height: 1.2; color: var(--gray-600);
}
.checkbox input[type="checkbox"],
.radio input[type="radio"],
.check {
    appearance: none; -webkit-appearance: none;
    flex-shrink: 0; margin: 0;
    width: 18px; height: 18px;
    border: 1.5px solid var(--border-strong);
    background: var(--surface);
    cursor: pointer; position: relative;
    transition: var(--transition);
}
.checkbox input[type="checkbox"],
.check { border-radius: 5px; }
.radio input[type="radio"] { border-radius: 50%; }

.checkbox input[type="checkbox"]:hover,
.radio input[type="radio"]:hover,
.check:hover { border-color: var(--brand-400); }

.checkbox input[type="checkbox"]:focus-visible,
.radio input[type="radio"]:focus-visible,
.check:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-100); border-color: var(--brand-400); }

/* Tik: SVG. Eskiden 45° döndürülmüş border hilesiydi — uçları köşeli kalıyor,
   sabit piksellerle (left:5px/top:1.5px) elle hizalandığı için optik merkezde
   durmuyor ve kutu boyutu değişince bozuluyordu. SVG yuvarlak uçlu, tam ortalı
   ve her boyutta aynı oranda ölçekleniyor. */
.checkbox input[type="checkbox"]:checked,
.check:checked {
    background-color: var(--brand-600); border-color: var(--brand-600);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M4.4 9.3l3 3.1 6.2-6.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 100% 100%;
    animation: befCheckPop .18s cubic-bezier(.34,1.4,.64,1);
}
@keyframes befCheckPop { from { transform: scale(.82); } to { transform: scale(1); } }
/* Radio seçili nokta: border-width büyütmek yerine ölçeklenen nokta —
   kalınlık animasyonu kutuyu titretiyordu. */
.radio input[type="radio"]:checked { border-color: var(--brand-600); }
.radio input[type="radio"]:checked::after {
    content: ''; position: absolute; inset: 3px;
    border-radius: 50%; background: var(--brand-600);
    animation: befCheckPop .18s cubic-bezier(.34,1.4,.64,1);
}
.checkbox input:disabled,
.radio input:disabled,
.check:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- 11. Uyari / flash --- */
.alert {
    display: flex; align-items: center; gap: 11px;
    padding: 13px 16px; border-radius: var(--r-md);
    font-size: 13.5px; margin-bottom: 18px;
    border: 1px solid transparent;
}
.alert [data-lucide] { width: 19px; height: 19px; flex-shrink: 0; }
.alert--success { background: var(--success-bg); color: var(--success-fg); border-color: #bbf7d0; }
.alert--error   { background: var(--danger-bg);  color: var(--danger-fg);  border-color: #fecaca; }
.alert--info    { background: var(--info-bg);     color: var(--info-fg);     border-color: #a5f3fc; }
.alert--warning { background: var(--warning-bg);  color: var(--warning-fg);  border-color: #fde68a; }

/* --- 12. Bos durum --- */
.empty {
    text-align: center; padding: 56px 24px; color: var(--text-muted);
}
.empty__icon {
    width: 56px; height: 56px; border-radius: var(--r-lg);
    background: var(--gray-100); color: var(--gray-400);
    display: grid; place-items: center; margin: 0 auto 16px;
}
.empty__icon [data-lucide] { width: 26px; height: 26px; }
.empty h3 { font-size: 15px; color: var(--text); margin-bottom: 6px; }

/* Kilitli özellik upsell kartı (tam sayfa). Satış odaklı, tema uyumlu. */
.locked-upsell {
    max-width: 520px; margin: 8px auto; text-align: center;
    padding: 48px 36px 44px;
    display: flex; flex-direction: column; align-items: center;
}
.locked-upsell__icon {
    position: relative;
    width: 84px; height: 84px; margin-bottom: 8px;
    display: flex; align-items: center; justify-content: center;
}
.locked-upsell__icon::before {
    content: ''; position: absolute; inset: 0; border-radius: var(--r-full);
    background: radial-gradient(circle, rgba(31,79,245,.16), rgba(31,79,245,.04) 55%, transparent 72%);
}
.locked-upsell__icon [data-lucide] {
    position: relative; width: 38px; height: 38px;
    color: var(--brand-600); stroke-width: 1.6;
}
.locked-upsell__plan {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 700; letter-spacing: .02em;
    color: var(--brand-700); background: var(--brand-50);
    padding: 4px 11px; border-radius: var(--r-full); margin-bottom: 14px;
}
.locked-upsell__plan [data-lucide] { width: 13px; height: 13px; }
.locked-upsell__title {
    font-size: 20px; font-weight: 700; letter-spacing: -.02em;
    color: var(--text); margin-bottom: 10px; text-wrap: balance;
}
.locked-upsell__desc {
    font-size: 14.5px; color: var(--text-muted); line-height: 1.6;
    max-width: 380px; margin: 0 auto 6px;
}
.locked-upsell__cta-text {
    font-size: 13.5px; color: var(--text-subtle); margin: 8px 0 22px;
}
.locked-upsell .btn { min-height: 44px; padding: 0 22px; font-size: 14.5px; }

/* --- 13. Sayfa basligi & araclar --- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.page-head p { color: var(--text-muted); margin-top: 3px; }
.page-head__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Sayfa başlığının sağındaki durum filtreleri (sipariş) */
.filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* İstasyonlar bağlantısı filtrelerin YANINDA ama onlardan biri DEĞİL: filtreler
   bu listeyi daraltır, o ise başka bir sayfaya gider. Ayraç olmadan yedinci bir
   filtre gibi okunuyordu. */
.orders-stations + .filter-tabs { padding-left: 12px; border-left: 1px solid var(--border); }
@media (max-width: 640px) {
    /* Tek satıra sığmayınca ayraç anlamını yitiriyor (alt satıra düşen bir
       kenarlık ilgisiz bir çizgi gibi duruyor). */
    .orders-stations + .filter-tabs { padding-left: 0; border-left: 0; }
}
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.search-box { position: relative; min-width: 240px; }
.search-box [data-lucide] { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-subtle); width: 17px; height: 17px; }
.search-box input { padding-left: 38px; }

/* Sekmeler / filtre cipleri */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 13px; border-radius: var(--r-full);
    background: var(--surface); border: 1px solid var(--border-strong);
    font-size: 13px; font-weight: 500; color: var(--gray-600);
    transition: var(--transition); cursor: pointer;
}
.chip:hover { border-color: var(--gray-300); }
.chip.active { background: var(--gray-900); color: #fff; border-color: var(--gray-900); }

/* --- 14. Sayfalama --- */
/* margin-top YOK. Bileşen her yerde (8 liste ekranının hepsinde) `.card__footer`
   içinde çiziliyor ve o kabın zaten 16px dolgusu var; 18px marj üstte 43px, altta
   24px bırakıp ayağı tepeden ağır gösteriyordu. Ayrık bir yerde kullanılırsa
   boşluğu o kullanım versin. */
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pagination__info { color: var(--text-muted); font-size: 13px; }
.pagination__pages { display: flex; gap: 4px; }
.page-link {
    min-width: 36px; height: 36px; padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-strong); border-radius: var(--r-md);
    background: var(--surface); color: var(--gray-600); font-size: 13.5px; font-weight: 500;
    transition: var(--transition);
}
.page-link:hover { background: var(--gray-50); }
.page-link.active { background: var(--brand-600); color: #fff; border-color: var(--brand-600); }
.page-link.disabled { opacity: 0.45; pointer-events: none; }

/* --- 15. Tanim listeleri (detay) --- */
.dl { display: grid; grid-template-columns: 160px 1fr; gap: 14px 20px; }
.dl dt { color: var(--text-muted); font-size: 13px; }
.dl dd { font-weight: 500; }

/* --- 16. Modal --- */
/* AÇILIŞ VE KAPANIŞ ANİMASYONU.
   Önce `display: none` ↔ `display: flex` ile açılıp kapanıyordu: `display`
   animasyon edilemediği için modal AÇILIRKEN yumuşuyor (@keyframes modalIn)
   ama KAPANIRKEN bir anda yok oluyordu. Ayrıca arka plan hiç yumuşamıyor,
   yalnızca kutu animasyon alıyordu.

   Çözüm görünürlük + saydamlık: ikisi de animasyon edilebilir. `visibility`
   geçişi AÇILIŞTA anında (0s), KAPANIŞTA gecikmeli (160ms) tanımlanır —
   yoksa öğe saydamlık daha inmeden gizlenip animasyon yine kesilirdi. */
/* backdrop-filter YOK — ölçülmüş sebep, tercih değil.
   Tam ekran perdede blur, arkasında HERHANGİ bir şey her karede boyandığında
   (ör. .bef-ai gradyan metin animasyonu) tüm görüntü alanının yeniden
   bulanıklaştırılmasını zorluyor. Ölçüm: abonelik modalı açıkken kare süresi
   16,6ms → 63,0ms, yani 60fps yerine ~16fps; kaydırırken her yer titriyor.
   Perde zaten koyu bir örtü, 2px blur'un görsel katkısı bu bedeli hak etmiyor.
   Aynı gerekçe .drawer-backdrop ve .imgedit-backdrop için de geçerli. */
.modal-backdrop {
    position: fixed; inset: 0; background: rgba(15,23,42,0.5);
    display: flex; align-items: center; justify-content: center; z-index: 60; padding: 20px;
    opacity: 0; visibility: hidden;
    transition: opacity 160ms ease, visibility 0s linear 160ms;
}
.modal-backdrop.open {
    opacity: 1; visibility: visible;
    transition: opacity 160ms ease, visibility 0s linear 0s;
}
/* Onay pencereleri her şeyin (tema modalı z:200 dahil) üstünde açılmalı.
   Kredi penceresi de burada: BEF AI düğmeleri çekmecenin İÇİNDE duruyor,
   varsayılan z:60 ile açılsaydı sorduğu şeyin altında kalırdı. */
.modal-backdrop:has(.modal--confirm),
.modal-backdrop:has(.modal--aiask) { z-index: 400; }
.modal {
    background: var(--surface); border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg); width: 100%; max-width: 480px;
    max-height: 90vh; overflow-y: auto;
    /* @keyframes modalIn YERİNE geçiş: keyframe yalnızca giriş yönünde
       çalışıyordu, geçiş iki yönde de çalışır. Kutu arka plandan biraz daha
       uzun sürer (180 > 160) ki perde kapanırken kutu hâlâ küçülüyor olsun. */
    opacity: 0; transform: scale(0.97) translateY(8px);
    transition: opacity 180ms ease, transform 180ms ease;
}
.modal-backdrop.open .modal { opacity: 1; transform: none; }
/* BAŞLIK VE AYAK SABİT, ORTA BÖLÜM KAYAR — standart yapıdaki modallarda.
   `.modal` varsayılanı bütün kutuyu kaydırıyordu: kısa ekranda (ör. 800px'lik
   pencerede alan ayarları modalı) başlık ve Kaydet butonu yukarı kayıp
   kayboluyordu. Ayrıca tam genişlikte renkli bir çocuk varsa kaydırma çubuğu
   onu daraltıp kenarda beyaz şerit bırakıyordu.

   `:has(> .modal__body)` ile HEDEFLİ: yalnızca üçlü yapıyı (başlık/gövde/ayak)
   kullanan modallar etkilenir. Onay penceresinin gövdesi `.confirm__body` —
   eşleşmez, eski davranışını korur. Eşleşseydi ve gövdesine kaydırma
   verilmeseydi uzun bir onay metni `overflow: hidden` ile kırpılıp
   ERİŞİLEMEZ hâle gelirdi; şimdikinden kötü. */
.modal:has(> .modal__body) {
    display: flex; flex-direction: column;
    overflow: hidden;   /* köşe yuvarlaklığı içeriği kırpsın */
}
.modal:has(> .modal__body) > .modal__header,
.modal:has(> .modal__body) > .modal__footer { flex-shrink: 0; }
/* min-height: 0 ŞART — flex öğesi varsayılanda içeriğinden küçülemez. */
.modal:has(> .modal__body) > .modal__body { flex: 1; min-height: 0; overflow-y: auto; }

/* ÜST VE ALT ŞERİT AYNI YÜKSEKLİKTE. Başlıkta 20px, ayakta 16px dolgu vardı ve
   şeritlerin yüksekliğini içlerindeki en uzun öğe belirliyordu: kapatma
   düğmesi 35px, ayaktaki düğmeler 37px. Sonuç 75px'e karşı 70px — pencerenin
   üstü altından daha havadar duruyordu. Dolgular eşitlendi, kapatma düğmesi de
   ayaktaki düğmelerle aynı ölçüye getirildi (aşağıda); iki şerit de
   16 + 37 + 16. */
.modal__header { padding: 16px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.modal__header .btn--icon { width: 37px; height: 37px; padding: 0; display: grid; place-items: center; }
.modal__title { font-size: 16px; font-weight: 650; }
.modal__body { padding: 24px; }
.modal__footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }
/* Özel onay penceresi (window.confirm yerine) */
.modal--confirm { max-width: 420px; }
.confirm__body { display: flex; align-items: center; gap: 14px; padding: 22px 24px 18px; }
.confirm__icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--danger-bg); color: var(--danger); display: grid; place-items: center; }
.confirm__icon [data-lucide] { width: 22px; height: 22px; }
.confirm__content { flex: 1; min-width: 0; }
/* Prompt kipi: metin girişi (native window.prompt yerine — bkz. BEF.prompt).
   Başlık/açıklama olmayabildiği için üst boşluk yalnızca metin varken. */
.confirm__input { width: 100%; margin-top: 12px; }
.confirm__input[hidden] { display: none; }
/* Prompt bir uyarı değil veri girişi; ünlem ikonu basılmıyor, kutu da
   tam genişlik kullanabilsin. */
.confirm__icon[hidden] { display: none; }
.confirm__title { font-size: 16px; font-weight: 650; color: var(--text); margin-bottom: 4px; }
.confirm__text { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }
/* Scroll kilidi JS lockScroll() ile yönetilir (scrollbar padding telafisi için); overflow burada set edilmez. */

/* Özel tooltip (native title yerine) */
.tooltip {
    position: fixed; top: 0; left: 0; z-index: 350;
    background: var(--gray-900); color: #fff;
    padding: 5px 9px; border-radius: var(--r-sm);
    font-size: 12px; font-weight: 500; line-height: 1.3;
    white-space: nowrap; max-width: 260px;
    box-shadow: var(--shadow-md);
    opacity: 0; transform: translateY(3px); transition: opacity .12s, transform .12s;
    pointer-events: none;
}
.tooltip.show { opacity: 1; transform: translateY(0); }
.tooltip::after {
    content: ''; position: absolute; top: 100%; left: var(--tip-arrow, 50%);
    margin-left: -5px; border: 5px solid transparent; border-top-color: var(--gray-900);
}
.tooltip.below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--gray-900); }

/* Özel tarih seçici (native type=date yerine) */
.datepick { position: relative; }
.datepick__input { cursor: pointer; padding-right: 38px; }
.datepick__icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--text-subtle); cursor: pointer; }
.datepick__pop {
    position: fixed; z-index: 200; width: 268px;
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md);
    box-shadow: var(--shadow-lg); padding: 12px;
    opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .12s, transform .12s;
}
.datepick__pop.open { opacity: 1; visibility: visible; transform: translateY(0); }
.datepick__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.datepick__my { font-weight: 650; font-size: 13.5px; }
.datepick__nav { width: 30px; height: 30px; border: 0; background: none; border-radius: var(--r-sm); display: grid; place-items: center; cursor: pointer; color: var(--text-muted); }
.datepick__nav:hover { background: var(--gray-100); color: var(--text); }
.datepick__nav [data-lucide] { width: 17px; height: 17px; }
.datepick__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.datepick__wd { text-align: center; font-size: 11px; font-weight: 700; color: var(--text-subtle); padding: 4px 0; }
.datepick__day { border: 0; background: none; border-radius: var(--r-sm); height: 32px; font-size: 13px; color: var(--text); cursor: pointer; }
.datepick__day:hover { background: var(--gray-100); }
.datepick__day.today { color: var(--brand-600); font-weight: 700; }
.datepick__day.selected { background: var(--brand-600); color: #fff; font-weight: 600; }
.datepick__day.selected:hover { background: var(--brand-700); }
.datepick__foot { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; text-align: center; }
.datepick__todaybtn { border: 0; background: none; color: var(--brand-600); font-weight: 600; font-size: 12.5px; cursor: pointer; padding: 4px 10px; border-radius: var(--r-sm); }
.datepick__todaybtn:hover { background: var(--brand-50); }

/* --- 17. Mobil menu --- */
.menu-toggle { display: none; }
/* Perde `display` ile açılıp kapanıyordu: kenar çubuğu kayarak girip çıkarken
   perde bir anda beliriyor/yok oluyordu. Modal ve çekmece ile aynı desen. */
.sidebar__backdrop {
    position: fixed; inset: 0; background: rgba(15,23,42,0.4); z-index: 35;
    opacity: 0; visibility: hidden;
    transition: opacity 0.25s, visibility 0s linear 0.25s;
}
.sidebar__backdrop.open {
    opacity: 1; visibility: visible;
    transition: opacity 0.25s, visibility 0s linear 0s;
}
/* Geniş ekranda kenar çubuğu sabit; perde hiç devreye girmemeli. */
@media (min-width: 901px) { .sidebar__backdrop { display: none; } }

@media (max-width: 1024px) {
    .form-grid.cols-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
    .sidebar.open { transform: translateX(0); }
    .main { margin-left: 0; }
    .menu-toggle { display: inline-flex; }
    .form-grid.cols-2, .form-grid.cols-3 { grid-template-columns: 1fr; }
    .field.span-2 { grid-column: span 1; }
    .dl { grid-template-columns: 1fr; gap: 4px 0; }
    .dl dd { margin-bottom: 10px; }
}
@media (max-width: 560px) {
    .content { padding: 18px; }
    .topbar { padding: 0 16px; }
    .search-box { min-width: 0; flex: 1; }
}

/* --- 18. Cesitli --- */
.divider { height: 1px; background: var(--border); margin: 20px 0; border: 0; }
.muted-link { display: inline-flex; align-items: center; gap: 5px; color: var(--brand-600); font-weight: 600; }
.muted-link:hover { text-decoration: underline; }
.progress { height: 8px; background: var(--gray-200); border-radius: var(--r-full); overflow: hidden; }
.progress__bar { height: 100%; background: var(--brand-500); border-radius: var(--r-full); }
.copy-field { display: flex; align-items: center; gap: 8px; }
.copy-field code { flex: 1; padding: 9px 12px; background: var(--gray-50); border: 1px solid var(--border); border-radius: var(--r-md); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, monospace; }

/* --- 19. Görsel alanı (dropzone) + düzenleyici --- */
.imgfield__drop {
    position: relative;
    border: 2px dashed var(--border-strong);
    border-radius: var(--r-lg);
    background: var(--surface-alt);
    min-height: 150px;
    cursor: pointer;
    transition: var(--transition);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.imgfield__drop:hover { border-color: var(--brand-400); background: var(--brand-50); }
.imgfield__drop.dragover { border-color: var(--brand-500); background: var(--brand-100); }
/* Görseli ortalayan kap. Görsel elemanı kutuyu DOLDURMAZ, kendi boyutuna küçülür
   (aşağıya bkz.) — köşe yarıçapının görünür olmasının tek yolu bu. */
.imgfield__preview {
    position: absolute; inset: 0; padding: 10px;
    display: flex; align-items: center; justify-content: center;
}
.imgfield__empty {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    color: var(--text-muted); font-size: 13px; text-align: center; padding: 24px; z-index: 1;
}
.imgfield__empty [data-lucide] { width: 30px; height: 30px; color: var(--gray-400); }
.imgfield__empty b { color: var(--gray-600); font-weight: 600; }
.imgfield__hint { font-size: 11.5px; color: var(--text-subtle); margin-top: -3px; }
.imgfield__actions {
    position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; z-index: 2;
}
.imgfield__actions .btn { background: rgba(255,255,255,0.95); box-shadow: var(--shadow-sm); }
/* NOT: `imgfield--avatar` (daire kutu + object-fit:cover) KALDIRILDI. Tek kullanıcısı
   menü logosuydu; logo serbest orana geçince `cover` onu kırpar hale geldi. */
/* Kutu TAM GENİŞLİKTE kalır (bırakma alanı büyük olsun), görsel ise ortada
   KENDİ ORANINDA durur — kırpılmaz. Yükseklik, kare bir görselin de rahat
   görünebileceği kadar. */
.imgfield--wide .imgfield__drop { min-height: 200px; }
/* Marka logosu: ORAN SERBEST. Kafe/restoran logolarının çoğu YATAY yazı markası
   ("DEMIR COFFEE" gibi); 1:1 kırpma zorunluluğu bunları ortadan kesiyordu. Kutu
   sabit kalır, logo içinde kendi oranında ortalanır (temel .imgfield__img zaten
   object-fit:contain). Daire/`cover` olan avatar varyantı bu yüzden bırakıldı. */
.imgfield--logo .imgfield__drop { min-height: var(--media-h, 150px); }

/* İşletme bilgileri: SOLDA logo, SAĞDA metin alanları.
   Kapak görseli projeden kaldırıldı; logo tek kaldığı için alt alta iki görsel
   kutusu yerine yan yana yerleşim kullanılıyor.
   Logo sütunu kareden GENİŞ (200px): yatay yazı markası dar bir kutuda
   okunamayacak kadar küçülüyordu. */
.brand-grid { --media-h: 150px; display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: stretch; }
/* Logo kutusu SAĞ SÜTUNLA AYNI HİZADA bitsin. Zincirin tamamı gerilmeli, tek bir
   halka kopsa yükseklik aktarılmaz:
     .brand-grid (align-items:stretch) → .field (flex kolon) → .imgfield (flex:1)
     → .imgfield__drop (flex:1)
   Önce `align-items: start` vardı: logo kendi 150px'inde kalıp sağ sütun daha uzun
   olduğunda hizasız bitiyordu. min-height KORUNUR — sağ sütun kısaldığında (ör. dar
   ekranda tek satır) kutu okunamayacak kadar yassılmasın. */
.brand-grid > .field { min-height: 0; }
.brand-grid .imgfield--logo { flex: 1; min-height: 0; display: flex; }
/* min-height burada ALT SINIR, hedef değil: yükseklik sağ sütundan gelmeli.
   150px bırakılınca logo alanı (20 etiket + 6 boşluk + 150) = 176px oluyor ve sağ
   sütunun iki satırından (68 + 18 + 68 = 154px) uzun kalıp grid satırını geriyordu
   → kutu, alanların altına taşıyordu. Düşük sınır + flex:1 ile kutu tam 128px'e,
   yani sağ sütunla aynı hizaya oturuyor. */
.brand-grid .imgfield--logo .imgfield__drop { flex: 1; min-height: 96px; }
/* Tek sütuna düşünce germe anlamını yitirir (üst üste iki ayrı satır). */
@media (max-width: 700px) {
    .brand-grid { grid-template-columns: 1fr; align-items: start; }
    .brand-grid .imgfield--logo { display: block; }
    /* Tek sütunda gerilecek komşu yok → kutu kendi dolgun yüksekliğine döner. */
    .brand-grid .imgfield--logo .imgfield__drop { min-height: var(--media-h, 150px); }
}
/* İşletme adı + para birimi yan yana. cols-2 (1fr 1fr) KULLANILMADI: para birimi
   kısa bir seçim kutusu, adla eşit genişlik alması dengesiz duruyordu. */
.brand-grid__row { display: grid; grid-template-columns: 1fr 220px; gap: 14px; align-items: start; }
@media (max-width: 900px) { .brand-grid__row { grid-template-columns: 1fr; } }

/* Görsel düzenleyici de aynı desende: `display` ile açılıp kapanıyordu,
   yani kapanışta hiçbir animasyon çalışmıyordu (bkz. .modal-backdrop). */
.imgedit-backdrop {
    position: fixed; inset: 0; background: rgba(15,23,42,0.62);
    display: flex; align-items: center; justify-content: center; z-index: 80; padding: 16px;
    /* backdrop-filter kaldırıldı — gerekçe .modal-backdrop'ta yazılı. */
    opacity: 0; visibility: hidden;
    transition: opacity 160ms ease, visibility 0s linear 160ms;
}
.imgedit-backdrop.open {
    opacity: 1; visibility: visible;
    transition: opacity 160ms ease, visibility 0s linear 0s;
}
.imgedit {
    background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
    width: 100%; max-width: 560px; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden;
    opacity: 0; transform: scale(0.97) translateY(8px);
    transition: opacity 180ms ease, transform 180ms ease;
}
.imgedit-backdrop.open .imgedit { opacity: 1; transform: none; }
.imgedit__head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.imgedit__title { font-weight: 650; font-size: 15px; }
.imgedit__stage { background: #0f172a; padding: 10px; max-height: 46vh; overflow: hidden; }
.imgedit__stage img { max-width: 100%; display: block; }
.imgedit__tools { padding: 14px 20px; border-bottom: 1px solid var(--border); }
.imgedit__toolrow { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ie-tool {
    width: 38px; height: 38px; border-radius: var(--r-md);
    border: 1px solid var(--border-strong); background: var(--surface);
    display: grid; place-items: center; cursor: pointer; color: var(--gray-600); transition: var(--transition);
}
.ie-tool:hover { background: var(--gray-100); color: var(--text); border-color: var(--gray-300); }
.ie-tool [data-lucide] { width: 18px; height: 18px; }
.imgedit__filters { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.imgedit__flabel { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; display: flex; justify-content: space-between; }
.imgedit__fval { color: var(--gray-600); font-weight: 600; }
.imgedit__foot { padding: 14px 20px; display: flex; gap: 10px; justify-content: flex-end; }
@media (max-width: 520px) { .imgedit__filters { grid-template-columns: 1fr; } }

.range { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 999px; background: var(--gray-200); outline: none; }
.range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--brand-600); cursor: pointer; box-shadow: var(--shadow-sm); border: 2px solid #fff; }
.range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--brand-600); cursor: pointer; border: 2px solid #fff; }

/* --- 20. Menü yönetimi yardımcıları --- */
.sorting-ghost { opacity: 0.4; background: var(--brand-50) !important; }
[data-drag] { cursor: grab; color: var(--text-subtle); }
/* forceFallback (otomatik kaydırma için): sürüklenen klon imlece yapışık, hafif kaldırılmış görünür. */
.sortable-fallback {
    opacity: .92; cursor: grabbing !important;
    box-shadow: 0 12px 32px -8px rgba(15,23,42,.35);
    transform: rotate(.5deg);
}
.sortable-drag { opacity: 0; }
[data-drag]:active { cursor: grabbing; }
.row-unavail, .is-unavailable { opacity: 0.55; }
.chip-select { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-select .chip { position: relative; user-select: none; }
.chip-select .chip input { position: absolute; opacity: 0; pointer-events: none; }

/* Serbest-metin chip girişi (malzemeler vb.): input gibi görünen konteyner + chip'ler. */
.chip-input {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    min-height: var(--ctrl-h); padding: 6px 8px;
    border: 1px solid var(--border-strong); border-radius: var(--r-md);
    background: var(--surface); cursor: text;
    transition: border-color .15s, box-shadow .15s;
}
.chip-input:focus-within { border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
.chip-input__chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 6px 4px 10px; border-radius: var(--r-full);
    background: var(--brand-50); color: var(--brand-700);
    font-size: 13px; font-weight: 600; line-height: 1; max-width: 100%;
}
.chip-input__x {
    display: grid; place-items: center; flex-shrink: 0;
    width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%;
    background: none; color: var(--brand-600); cursor: pointer;
    transition: background .14s, color .14s;
}
.chip-input__x:hover { background: var(--brand-100); color: var(--brand-700); }
.chip-input__x [data-lucide], .chip-input__x svg { width: 13px; height: 13px; }
.chip-input__field {
    flex: 1; min-width: 120px;
    border: 0; outline: 0; background: none; padding: 4px 2px;
    font-size: 14px; color: var(--text);
}
.chip-input__field::placeholder { color: var(--text-subtle); }
/* SEÇİLİLİK GİRDİDEN OKUNUR, sınıftan değil.
   `.active` sınıfı JS ile `change` olayında konuyordu; koddan `checked = true`
   atandığında (ör. alan ayarları modalı açılırken) `change` doğmuyor ve seçili
   chip seçilmemişlerle birebir aynı görünüyordu — hangisinin seçili olduğu
   anlaşılmıyordu. `:has(:checked)` her durumda doğru; JS'e ihtiyaç yok.
   `.active` korunuyor: bağlantı biçimindeki chip'lerde (yönetim filtreleri)
   girdi yok, orada sınıf tek yol. */
.chip-select .chip:has(input:checked),
.chip-select .chip.active { background: var(--brand-600); color: #fff; border-color: var(--brand-600); }
/* Klavyeyle gezinirken hangi chip'te olduğun görünmeli: girdi gizli olduğu için
   odak halkası kendiliğinden çıkmıyor. */
.chip-select .chip:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--brand-100); }
.var-row { align-items: center; }
@keyframes varRowIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.var-row--enter { animation: varRowIn 0.22s ease; }
.var-row--leaving { overflow: hidden; opacity: 0; transform: translateX(14px); transition: opacity 0.2s ease, transform 0.2s ease, height 0.2s ease, margin 0.2s ease; }
.toast-wrap {
    position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    z-index: 300; pointer-events: none; width: max-content; max-width: 92vw;
}
.toast {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--gray-900); color: #fff; padding: 11px 16px; border-radius: var(--r-md);
    font-size: 13.5px; font-weight: 500; line-height: 1.2; box-shadow: var(--shadow-lg);
    max-width: 100%; opacity: 0; transform: translateY(12px);
    transition: opacity .3s, transform .3s;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast [data-lucide] { width: 17px; height: 17px; flex-shrink: 0; }
.toast--success { background: var(--success); }
.toast--error { background: var(--danger); }
.toast--warning { background: var(--warning); }
.toast--info { background: var(--info); }

/* Menü liste satırı */
.menu-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); margin-bottom: 10px; transition: border-color .15s, box-shadow .15s; }
.menu-row:hover { border-color: var(--brand-200); box-shadow: var(--shadow-sm); }
.menu-row__drag { color: var(--gray-300); cursor: grab; flex-shrink: 0; transition: color .15s; }
.menu-row:hover .menu-row__drag { color: var(--text-subtle); }
.menu-row__drag:active { cursor: grabbing; }
.menu-row__thumb { width: 56px; height: 56px; border-radius: var(--r-md); overflow: hidden; background: var(--gray-100) center/cover no-repeat; border: 1px solid var(--border); flex-shrink: 0; display: grid; place-items: center; color: var(--gray-400); }
.menu-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.menu-row__title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.menu-row__name { font-weight: 650; font-size: 14.5px; color: var(--text); }
.menu-row__meta { display: flex; align-items: center; gap: 8px; }
.menu-row__price { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.menu-row__actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.menu-row__actions form { display: flex; }
.menu-row__actions .btn--ghost.text-danger:hover { background: var(--danger-bg); }
/* Satışta değilse: kontrolleri kullanılabilir tut, sadece görsel/isim/fiyatı soluklaştır */
.menu-row.is-unavailable { opacity: 1; }
.menu-row.is-unavailable .menu-row__thumb,
.menu-row.is-unavailable .menu-row__name,
.menu-row.is-unavailable .menu-row__price { opacity: 0.45; }
.cat-block { margin-bottom: 22px; }
.cat-block__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cat-block__head h3 { font-size: 15px; font-weight: 650; }
.tag-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 3px 9px; border-radius: var(--r-full); background: var(--gray-100); color: var(--gray-600); font-weight: 600; }

/* --- Toplu ürün yükleme (bulk_upload_100) --- */
.bulk-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 20px; align-items: start; }
@media (max-width: 860px) { .bulk-grid { grid-template-columns: 1fr; } }

.bulk-form { display: flex; flex-direction: column; }
.bulk-form__submit { width: 100%; justify-content: center; }

.csv-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
    padding: 34px 20px; border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--surface-2);
    cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.csv-drop:hover, .csv-drop:focus-visible { border-color: var(--brand-400); background: var(--brand-50); outline: none; }
.csv-drop.is-drag { border-color: var(--brand-500); background: var(--brand-50); transform: scale(1.01); }
.csv-drop.has-file { border-style: solid; border-color: var(--success-fg); background: var(--success-bg); }
.csv-drop__icon { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-full); background: var(--brand-50); color: var(--brand-600); }
.csv-drop__icon [data-lucide] { width: 22px; height: 22px; }
.csv-drop.has-file .csv-drop__icon { background: #fff; color: var(--success-fg); }
.csv-drop__title { font-weight: 600; font-size: 14px; color: var(--text); word-break: break-word; }
.csv-drop__hint { font-size: 12.5px; color: var(--text-muted); }

.bulk-cols { display: flex; flex-direction: column; gap: 2px; }
.bulk-col { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.bulk-col:last-child { border-bottom: 0; }
.bulk-col__name { flex: 0 0 130px; font-size: 12.5px; font-weight: 600; color: var(--brand-700); }
.bulk-col__desc { flex: 1; font-size: 13px; color: var(--text-muted); }
.bulk-col__req { color: var(--danger-fg); margin-left: 1px; font-weight: 700; }

.bulk-result { display: flex; align-items: center; gap: 16px; }
.bulk-result__icon { flex-shrink: 0; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-full); }
.bulk-result__icon [data-lucide] { width: 26px; height: 26px; }
.bulk-result__icon.ok { background: var(--success-bg); color: var(--success-fg); }
.bulk-result__icon.warn { background: var(--warning-bg); color: var(--warning-fg); }
.bulk-result__text h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.bulk-result__text p { color: var(--text-muted); margin-top: 2px; }
.bulk-result__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.bulk-skip__num { width: 90px; }

/* --- Memnuniyet anketi / geri bildirim (satisfaction_survey) --- */
.stars { display: inline-flex; align-items: center; gap: 2px; color: var(--border-strong); }
.stars [data-lucide] { width: 16px; height: 16px; fill: none; }
.stars .on { color: #f59e0b; }
.stars .on[data-lucide] { fill: #f59e0b; }
.stars--lg [data-lucide] { width: 22px; height: 22px; }

.survey-summary { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.survey-avg { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 130px; }
.survey-avg__num { font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--text); }
.survey-avg__total { font-size: 12.5px; color: var(--text-muted); }
.survey-dist { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 7px; }
.survey-dist__row { display: flex; align-items: center; gap: 10px; }
.survey-dist__label { display: inline-flex; align-items: center; gap: 3px; width: 34px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.survey-dist__label [data-lucide] { width: 13px; height: 13px; color: #f59e0b; fill: #f59e0b; }
.survey-dist__bar { flex: 1; height: 8px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
.survey-dist__bar > span { display: block; height: 100%; width: var(--w, 0%); border-radius: var(--r-full); background: linear-gradient(90deg, var(--brand-400), var(--brand-600)); }
.survey-dist__n { width: 34px; text-align: right; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }

.survey-list { display: flex; flex-direction: column; gap: 12px; }
.survey-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 15px 16px; transition: border-color .15s; }
.survey-item.is-new { border-color: var(--brand-300); box-shadow: inset 3px 0 0 var(--brand-500); }
.survey-item__head { display: flex; align-items: center; gap: 10px; }
.survey-item__time { font-size: 12px; color: var(--text-subtle); }
.survey-item__del { margin-left: auto; }
.survey-item__comment { margin-top: 9px; color: var(--text); line-height: 1.55; white-space: pre-line; }
.survey-item__meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.survey-item__meta span { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-muted); }
.survey-item__meta [data-lucide] { width: 14px; height: 14px; }

/* --- Özel alan adı DNS kutusu (custom_domain) --- */
.dns-box { margin-top: 8px; padding: 15px 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); }
.dns-box__title { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13.5px; margin-bottom: 9px; }
.dns-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--text-muted); line-height: 1.55; }
.dns-steps code, .dns-target { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: var(--brand-50); color: var(--brand-700); padding: 2px 7px; border-radius: var(--r-sm); font-weight: 600; }
.dns-status { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-muted); }
.dns-status [data-lucide] { width: 15px; height: 15px; flex-shrink: 0; }
.dns-status a { color: var(--brand-700); font-weight: 600; }

/* --- Raporlar (advanced_reporting) --- */
.rep-chart { display: flex; align-items: flex-end; gap: 6px; height: 150px; }
.rep-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.rep-bar__track { flex: 1; width: 100%; max-width: 26px; display: flex; align-items: flex-end; }
.rep-bar__fill { width: 100%; height: var(--h, 0%); min-height: 0; border-radius: var(--r-sm) var(--r-sm) 3px 3px; background: linear-gradient(180deg, var(--brand-400), var(--brand-600)); transition: height .2s; }
.rep-bar__lbl { font-size: 11px; color: var(--text-subtle); }
.rep-bar:hover .rep-bar__fill { filter: brightness(1.08); }


/* --- Çoklu dil (unlimited_languages) --- */
.lang-picker { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.lang-opt { cursor: pointer; display: block; }
.lang-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.lang-opt__box { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r-md); transition: border-color .15s, background .15s; }
.lang-opt input:checked + .lang-opt__box { border-color: var(--brand-500); background: var(--brand-50); }
.lang-opt input:focus-visible + .lang-opt__box { box-shadow: 0 0 0 3px var(--brand-100); }
.lang-opt__code { font-size: 11px; font-weight: 700; color: var(--brand-700); background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 2px 6px; min-width: 30px; text-align: center; }
.lang-opt input:checked + .lang-opt__box .lang-opt__code { border-color: var(--brand-300); }
.lang-opt__name { font-size: 13px; font-weight: 500; }
/* SEÇİLİ OLAN AYRIŞSIN. Yalnızca kenar ve zemin değişiyordu; yirmi seçenek
   arasında hangilerinin işaretli olduğunu taramak gerekiyordu. Onay imi ve
   kalın yazı seçimi bir bakışta okunur kılıyor. */
.lang-opt input:checked + .lang-opt__box { box-shadow: inset 0 0 0 1px var(--brand-500); }
.lang-opt input:checked + .lang-opt__box .lang-opt__name { font-weight: 650; color: var(--brand-700); }
.lang-opt__box::after {
    content: ""; margin-inline-start: auto; flex: none;
    width: 15px; height: 15px; border-radius: 50%;
    border: 1.5px solid var(--border-strong);
    transition: background .15s, border-color .15s;
}
.lang-opt input:checked + .lang-opt__box::after {
    border-color: var(--brand-600); background: var(--brand-600)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
}
/* Sabit sutun sayisi (genislik azicik degisince 9<->10 zicramasi olmasin) */
@media (max-width: 1580px) { .lang-picker { grid-template-columns: repeat(7, 1fr); } }
@media (max-width: 1360px) { .lang-picker { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 1160px) { .lang-picker { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 940px)  { .lang-picker { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 680px)  { .lang-picker { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px)  { .lang-picker { grid-template-columns: repeat(2, 1fr); } }

.tr-block { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.tr-block__title { display: flex; align-items: center; gap: 7px; padding: 11px 14px; font-weight: 600; font-size: 13px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.tr-block__title [data-lucide] { color: var(--text-subtle); }
.tr-block__body { padding: 14px; }
/* Dil akordiyonu. <details> DEĞİL: kapalı <details> içeriği hiç render edilmediği
   için yükseklik animasyonu yapılamıyor. Projede zaten kullanılan grid 0fr↔1fr
   deseni (bkz. .pkg-feats) ile açılıp kapanır. */
.tr-lang { border-bottom: 1px solid var(--border); }
.tr-lang:last-child { border-bottom: 0; }
.tr-lang__sum {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 11px 14px; cursor: pointer; user-select: none;
    border: 0; background: none; text-align: start;
    font: inherit; color: inherit;   /* <button> font-family'yi miras ALMAZ */
    transition: background .15s;
}
.tr-lang__sum:hover { background: var(--surface-2); }
.tr-lang__code { font-size: 11px; font-weight: 700; color: var(--brand-700); background: var(--brand-50); border-radius: var(--r-sm); padding: 2px 7px; min-width: 30px; text-align: center; }
.tr-lang__name { font-size: 13px; font-weight: 500; flex: 1; }
.tr-lang__chev { width: 16px; height: 16px; color: var(--text-subtle); transition: transform .28s cubic-bezier(.4,0,.2,1); }
.tr-lang.is-open .tr-lang__chev { transform: rotate(180deg); }
/* 0fr↔1fr geçişi: içerik yüksekliği bilinmeden animasyon yapılabilir */
.tr-lang__body {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .28s cubic-bezier(.4,0,.2,1);
}
.tr-lang.is-open .tr-lang__body { grid-template-rows: 1fr; }
/* Kırpılan grid öğesi DOLGUSUZ olmak ZORUNDA. min-height:0 yalnızca içerik kutusunu
   sıfırlar; padding her hâlükârda ayakta kalır ve satır o yükseklikte takılır
   (kapalı akordiyonlarda "Ad" etiketi bu yüzden sızıyordu). Dolgu ayrı bir iç
   katmana taşınır. */
.tr-lang__clip { overflow: hidden; min-height: 0; }
.tr-lang__inner {
    display: flex; flex-direction: column; gap: 12px;
    /* Üst dolgu, odak halkası (3px) kırpılmasın diye 2px değil */
    padding: 6px 14px 14px;
}
/* Alerjen/varyasyon çeviri alanları, JS ile yeniden kurulabilmeleri için KENDİ
   kaplarında duruyor (bkz. _product_form.php notu). Bu kaplar .tr-lang__inner'ın
   flex-gap zincirini kırıyordu: gap yalnızca DOĞRUDAN çocuklara uygulanır, kabın
   içindeki .field'lar 0 boşlukla üst üste diziliyordu. Kaplar da aynı düzeni kurar. */
.tr-lang__inner [data-tr-allergens],
.tr-lang__inner [data-tr-vars] {
    display: flex; flex-direction: column; gap: 12px;
}
/* Kap BOŞKEN de (ürünün alerjeni/varyasyonu yok) flex öğesi sayılıp iki yanından
   gap alıyor → komşular arasında 12 yerine 24px kalıyordu.
   `:empty` KULLANILAMAZ: PHP döngüsü etiketler arasına satır sonu bırakıyor, bu bir
   metin düğümü sayılıyor ve `:empty` eşleşmiyor. `:has()` çocuk elemana bakar. */
.tr-lang__inner [data-tr-allergens]:not(:has(.field)),
.tr-lang__inner [data-tr-vars]:not(:has(.field)) { display: none; }
/* "Hareketi azalt": açılma geçişi KORUNUR — durumu anlatan, küçük ölçekli bir
   geçiştir, vestibüler tetikleyici değil. Tamamen kapatmak arayüzü bozuk
   hissettiriyordu. Yalnızca süre kısaltılır. */

/* --- Masalar (table_qr) — kare kutular grid'i --- */

/* Masa QR + istatistik (standart drawer içinde) */
.tqr { display: flex; gap: 14px; align-items: center; }
.tqr__img { border: 1px solid var(--border); border-radius: var(--r-md); background: #fff; flex-shrink: 0; }
.tqr__side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.tqr__url code { display: block; font-size: 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 7px 9px; word-break: break-all; color: var(--text-muted); line-height: 1.5; }

.tstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tstat { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 13px 8px 11px; text-align: center; display: flex; flex-direction: column; min-height: 82px; }
/* Değer alanı büyür + içinde dikeyde ortalanır → 1 ya da 2 satır olsun değer hep ortada,
   etiketler de üç kutuda aynı hizada (altta) durur. */
.tstat__v { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--text); }
.tstat__v--sm { font-size: 12.5px; font-weight: 700; line-height: 1.35; }
.tstat__l { font-size: 11px; color: var(--text-muted); line-height: 1.3; margin-top: 6px; }

/* --- Siparişler (online_order) --- */
/* MASONRY DEĞİL, bilinçli olarak. Sipariş listesi bir KUYRUK: masonry/column
   düzeni kartları sütun sütun yukarıdan aşağı dizer, yeni sipariş gelince hepsi
   yer değiştirir ve personel bakarken kart altından kayar. Ayrıca yerel
   `grid-template-rows: masonry` henüz hiçbir tarayıcıda kararlı değil.
   align-items: stretch (varsayılan) — kartlar satır içinde EŞİT boyda biter;
   `start` iken kısa kartın altında düzensiz boşluk kalıyordu. */
.order-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
/* Flex kolon + özet satırında margin-top:auto → eylem butonları satır boyunca
   AYNI hizada. Mutfakta arka arkaya tıklanan şey bu; hizalı olması tarama ve
   dokunma hatasını azaltıyor. */
/* Dikey aralık GAP ile veriliyor, tek tek margin-top ile DEĞİL.
   Kart flex kolon olduğu için margin'ler birleşmiyordu; ayrıca özet satırındaki
   `margin-top: auto` (bloğu dibe yaslamak için) kart gerilmediğinde 0'a düşüp
   ayraç çizgisini üstündeki not kutusuna yapıştırıyordu — nefes yalnızca çizginin
   ALTINDA kalıyordu. gap her koşulda asgari aralığı garanti eder. */
.order-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 15px 16px; display: flex; flex-direction: column; gap: 11px; }
/* DURUM RENGİ = KATEGORİ, ACİLİYET DEĞİL.
   Önce "new" TÜM kenarlığı amber yapıyordu (border-color: --warning-fg):
   · Her yeni sipariş hata/uyarı gibi görünüyordu — oysa "yeni" normal ve beklenen
     durum, siparişlerin hepsi buradan geçiyor. Varsayılan durum alarm vermemeli.
   · Diğer durumlar yalnızca 3px sol şerit alırken "new" tam çerçeve alıyordu:
     tutarsız ağırlık.
   · Amber artık NOT ve GECİKME rengi. Kart çerçevesi de amber olunca içindeki not
     kutusu öne çıkamıyordu — aynı renk iki farklı anlam taşıyamaz.
   Bundan sonra: amber/kırmızı YALNIZCA zamana duyarlılık ve notlar. Durum sadece
   sol şeritte, kategorik renk. */
.order-card--new { box-shadow: inset 4px 0 0 var(--brand-500); }
.order-card--preparing { box-shadow: inset 4px 0 0 var(--info-fg); }
.order-card--ready { box-shadow: inset 4px 0 0 var(--success-fg); }
/* GECİKME durum rengini EZER: 20+ dakikadır bekleyen sipariş, hangi aşamada
   olursa olsun en acil bilgidir. Şerit kırmızıya döner — uzaktan da yakalanır. */
.order-card.is-late { box-shadow: inset 4px 0 0 var(--danger); }
/* KAPALI siparişler sönük: aktif olanlar arasında dikkat çekmemeliler.
   İptal ayrıca daha soluk — teslim edilen "tamamlandı", iptal "olmadı". */
/* KAPALI SİPARİŞLER GERİ ÇEKİLİR. "Tümü" görünümünde tamamlanmış işler yapılacak
   işlerle aynı ağırlıkta yarışıyordu; yoğun serviste teslim edilenler birikip
   aktifleri ekrandan itiyor. Bunlar artık bağlam, iş değil. */
.order-card--delivered,
.order-card--canceled {
    background: var(--surface-2);
    /* KENARLIK KALIR. Önce `transparent` yapılmıştı: kartlar sayfa zemininde eriyip
       nerede başlayıp bittikleri kayboluyordu — birkaç tanesi yan yana gelince
       tek bir karmaşaya dönüşüyordu. Geri çekilme İÇERİK kontrastından gelmeli,
       sınırın kendisinden değil. */
    box-shadow: none;              /* durum şeridi yok: iş bitti, kategoriye gerek yok */
}
.order-card--delivered .order-item,
.order-card--canceled .order-item { color: var(--text-muted); }
.order-card--canceled { opacity: .7; }
/* Kapalı siparişte NOT sönük: not bir hazırlık TALİMATIydı, iş bitince geçmiş
   kaydı. Amber vurgu burada aktif siparişlerin notlarını gölgeliyordu. */
.order-card--delivered .order-card__note,
.order-card--canceled .order-card__note {
    background: var(--surface); border-inline-start-color: var(--border-strong);
    color: var(--text-muted);
}
.order-card--delivered .order-card__note [data-lucide],
.order-card--canceled .order-card__note [data-lucide] { color: var(--text-subtle); }
.order-card--delivered .order-item__note,
.order-card--canceled .order-item__note {
    background: var(--surface); color: var(--text-subtle);
}

/* Durum etiketi (yalnızca kapalı siparişlerde basılır) */
.order-card__state { font-weight: 700; white-space: nowrap; }
/* İkisi de SAKİN. "Teslim edildi" önce yeşildi ama tamamlanmış bir iş kutlanacak
   bir şey değil — "Tümü" görünümünde aktif siparişlerden dikkat çalıyordu. */
.order-card__state--delivered { color: var(--text-muted); }
.order-card__state--canceled { color: var(--text-subtle); }
/* Başlık: masa solda, bekleme süresi sağda. İki öğe, tek satır, sarmasız. */
/* Masa solda, süre sağda; kapalı siparişte durum etiketi ikisinin arasına girer. */
.order-card__head { display: flex; align-items: center; gap: 10px; }
/* Artık ikon değil "Masa N" metni (bkz. orders.php notu) → inline-flex/gap gereksiz. */
.order-card__table { font-weight: 700; font-size: 15px; white-space: nowrap; margin-right: auto; }
.order-card__code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--text-subtle); }

/* --- Bekleme süresi + aciliyet ---
   Kartın en çok bakılan bilgisi. Renk süreyle ARTAR: 10 dk'da uyarı, 20 dk'da
   gecikme. Yalnızca hâlâ işlenen siparişlere uygulanır (bkz. orders.php $urgency)
   — dün teslim edilmiş bir sipariş "3 gün" diye kıpkırmızı yanmamalı. */
.order-card__age {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12.5px; font-weight: 600; line-height: 1.2;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.order-card__age.is-waiting { color: var(--warning-fg); }
.order-card__age.is-late {
    color: var(--danger);
    /* Gecikmişte renk tek başına yetmiyor (renk körlüğü + hızlı tarama):
       zeminle birlikte rozet gibi okunur. */
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    border-radius: 999px; padding: 2px 8px;
}

/* --- Uzun ürün listesi katlama --- */
.order-items.is-collapsed .order-item--extra { display: none; }
.order-items.is-open .order-item--extra { display: flex; }
.order-items__more {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 2px; padding: 3px 0;
    background: none; border: none; cursor: pointer;
    font-size: 12.5px; font-weight: 600; color: var(--brand-600); line-height: 1.2;
}
.order-items__more:hover { color: var(--brand-700); text-decoration: underline; }
.order-items.is-open .order-items__more [data-lucide] { transform: rotate(180deg); }
.order-card__cust { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.order-card__cust [data-lucide] { width: 14px; height: 14px; }
.order-items { display: flex; flex-direction: column; gap: 7px; }
.order-item { display: flex; align-items: baseline; gap: 9px; font-size: 13.5px; }
/* Oluk YALNIZCA .has-qty ile ayrılır (siparişte 1'den büyük adet varsa).
   Hepsi 1 adetken boş bir sütun kalıp ürün adlarını sebepsiz içeri kaydırıyordu. */
.order-item__qty { font-weight: 700; color: var(--brand-600); display: none; }
.order-items.has-qty .order-item__qty { display: block; min-width: 24px; }
/* Dikey yığın: ürün adı üstte, notu altında kendi rozetinde. */
.order-item__name { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.order-item__var { color: var(--text-muted); font-size: 12.5px; }
/* Ürün satırı notu: italik açık gri okunmuyordu. Kendi satırında, amber ve
   okunur — sipariş notuyla aynı dil, daha küçük ölçek. */
.order-item__note {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 3px; padding: 1px 7px 1px 5px;
    border-radius: 999px;
    background: var(--warning-bg); color: #78350f;
    font-size: 11.5px; font-weight: 600; line-height: 1.5;
}
.order-item__note [data-lucide] { color: var(--warning); }
.order-item__price { font-weight: 600; font-size: 13px; }
/* MÜŞTERİ NOTU — kartın en dikkat çeken öğelerinden biri olmalı.
   Önce nötr gri kutuydu ("var(--surface-2)" + "--text-muted") ve ürün satırlarından
   bile SİLİK duruyordu. Oysa not bir TALİMAT: "fındıksız", "az şekerli", "acısız".
   Kaçırılması en pahalı bilgi bu — alerji notu atlanırsa sonucu ciddi.
   Sol şerit + amber zemin: gözün taradığı bir kartta hemen yakalanır. */
.order-card__note {
    display: flex; align-items: flex-start; gap: 7px;
    padding: 8px 11px;
    border-radius: var(--r-md);
    background: var(--warning-bg);
    border-inline-start: 3px solid var(--warning);
    font-size: 13px; line-height: 1.4;
    color: #78350f;   /* amber-900: --warning-fg zeminde yeterli kontrast vermiyordu */
}
.order-card__note [data-lucide] { flex-shrink: 0; margin-top: 2px; color: var(--warning); }
.order-card__note b { font-weight: 700; }
/* ÖZET: adet · kod · tutar. Üçü tek satır, ikincil ağırlık.
   Tutar önce ayak satırının en büyük öğesiydi; eylemin arkasına alınınca sarma
   yüzünden TEK BAŞINA alt satıra düşüp kopuk duruyordu. Doğru yeri burası. */
.order-card__sum {
    display: flex; align-items: center; gap: 8px;
    /* KELİME KIRILMASINI ENGELLE. Kartlar 300px'e kadar daralıyor; özet satırında
       beş öğe var (durum · adet · kod · tutar · sil). Sığmayınca flex kelimenin
       ortasından bölüyordu ("Teslim / edildi"). Çocuklar nowrap → kırılma yok;
       satırın kendisi sarabilir → gerekirse iki TEMİZ satıra iner. */
    flex-wrap: wrap; row-gap: 3px;
    /* auto: kart satır yüksekliğine gerildiğinde fazla boşluğu BURASI yutar.
       Asgari aralık .order-card'ın gap'inden gelir → çizgi hiçbir koşulda
       üstündeki öğeye yapışmaz. */
    margin-top: auto; padding-top: 11px;
    border-top: 1px solid var(--border);
    font-size: 12.5px; color: var(--text-muted);
}
.order-card__sum > * { white-space: nowrap; }
.order-card__amount {
    margin-left: auto; font-size: 14px; font-weight: 700; color: var(--text);
    white-space: nowrap;   /* tutar ile ₺ ayrılmasın */
    font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
/* Ayakta ikinci bir ayraç fazlalıktı — üst çizgi özet satırına taşındı. */
.order-card__foot { display: flex; align-items: center; gap: 10px; }
/* Birincil buton kalan genişliği doldurur, ikon butonlar sabit kalır: dar kartta
   buton sıkışmıyor, dokunma hedefi büyük kalıyor. */
.order-card__actions { display: flex; align-items: center; gap: 6px; width: 100%; }
/* SADECE ilerletme formu esner. Önce `form:first-child` yazıyordu — teslim/iptal
   edilmiş siparişte tek form SİLME formu olduğu için o birinci çocuk oluyor ve
   çöp kutusu ikonu kart genişliğinde bir butona dönüşüyordu. */
.order-card__advance { flex: 1; min-width: 0; }
.order-card__advance .btn { width: 100%; }
/* Eylemsiz (kapalı) siparişte silme sağa yaslanır — ortada asılı kalmasın. */
.order-card__foot:not(:has(.order-card__advance)) .order-card__actions { justify-content: flex-end; }

/* --- 21. Responsive grid yardımcıları (mobilde tek sütuna iner) --- */
.g-2, .g-main, .g-side, .g-detail, .g-detail-l {
    display: grid; gap: 18px; align-items: stretch;
}
.g-2        { grid-template-columns: 1fr 1fr; }
.g-main     { grid-template-columns: 1.6fr 1fr; }
.g-side     { grid-template-columns: 2fr 1fr; }
.g-detail   { grid-template-columns: 1fr 320px; }
.g-detail-l { grid-template-columns: 320px 1fr; }
.g-stretch  { align-items: stretch; }
@media (max-width: 900px) {
    .g-2, .g-main, .g-side, .g-detail, .g-detail-l { grid-template-columns: 1fr; }
}

/* Yükleniyor animasyonu (buton içi) */
.spin { animation: befspin 0.7s linear infinite; }
@keyframes befspin { to { transform: rotate(360deg); } }

/* ==========================================================
   22. UTILITY & BİLEŞEN KATMANI (inline stil yerine)
   ========================================================== */

/* Flex & hizalama */
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; min-width: 0; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }

/* Dikey yığın (flex column + gap) */
.stack { display: flex; flex-direction: column; }
.stack-8 { gap: 8px; } .stack-12 { gap: 12px; } .stack-14 { gap: 14px; }
.stack-16 { gap: 16px; } .stack-18 { gap: 18px; } .stack-24 { gap: 24px; }

/* Gap (mevcut gap-1..4'e ek) */
.gap-6 { gap: 6px; } .gap-10 { gap: 10px; } .gap-12 { gap: 12px; }
.gap-14 { gap: 14px; } .gap-16 { gap: 16px; } .gap-18 { gap: 18px; } .gap-24 { gap: 24px; }

/* Kenar boşlukları */
.m-0 { margin: 0; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-0 { margin-top: 0; }
.mb-16 { margin-bottom: 16px; } .mb-18 { margin-bottom: 18px; }
.mb-24 { margin-bottom: 24px; } .mb-28 { margin-bottom: 28px; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; }

/* Form genişlikleri (2 standart) */
.form-narrow { max-width: 720px; }
.form-wide { max-width: 1100px; }

/* Metin renkleri */
.text-danger { color: var(--danger-fg); }
.text-success { color: var(--success-fg); }
.text-warning { color: var(--warning-fg); }
.text-brand { color: var(--brand-700); }
.text-default { color: var(--text); }

/* Metin biçimleri */
.uppercase { text-transform: uppercase; letter-spacing: 0.04em; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.break-word { white-space: normal; word-break: break-all; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Başlık / sayı ölçekleri */
.fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; }
.h-lg { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.h-md { font-size: 18px; font-weight: 700; }
.h-sm { font-size: 16px; font-weight: 700; }
.num-xl { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.num-lg { font-size: 24px; font-weight: 700; }
.num-md { font-size: 20px; font-weight: 700; }
.fs-13 { font-size: 13px; } .fs-14 { font-size: 14px; }

/* İkon boyutları (lucide) */
/* Ölçek 14'ten başlıyordu ve küçük rozetlerde (11–12px yazı) kullanılan
   `ic-13` HİÇBİR ŞEY yapmıyordu: tanımsız sınıf sessizce global
   `[data-lucide] { 18px }` kuralına düşüyor, ikon yazının bir buçuk katı
   çıkıyordu. Rozet ikonları için alt basamaklar eklendi. */
.ic-11 { width: 11px; height: 11px; } .ic-12 { width: 12px; height: 12px; }
.ic-13 { width: 13px; height: 13px; }
.ic-14 { width: 14px; height: 14px; } .ic-15 { width: 15px; height: 15px; }
.ic-16 { width: 16px; height: 16px; } .ic-17 { width: 17px; height: 17px; }
.ic-18 { width: 18px; height: 18px; } .ic-19 { width: 19px; height: 19px; }
.ic-20 { width: 20px; height: 20px; } .ic-26 { width: 26px; height: 26px; }
.link-ico { width: 14px; height: 14px; flex-shrink: 0; }
.title-ico { width: 18px; height: 18px; margin-right: 7px; flex-shrink: 0; }
.ic-success { color: var(--success); }

/* Avatar / stat ikon varyantları */
.avatar--lg { width: 64px; height: 64px; font-size: 24px; margin: 0 auto 12px; }
.stat__icon--sm { width: 36px; height: 36px; border-radius: 9px; }
.stat__icon--xs { width: 34px; height: 34px; border-radius: 8px; }

/* Renk seçici girişi */
.color-input { width: 52px; height: 40px; border: 1px solid var(--border-strong); border-radius: var(--r-md); cursor: pointer; background: none; padding: 3px; }

/* Kart gövde büyük dolgu */
.card__body--lg { padding: 32px; }

/* Kenarlıklı iç tablo (fatura kalemleri) */
.box-table { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }

/* Satır içi kod rozeti */
.code-chip { background: var(--gray-100); padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, monospace; font-size: 12px; }

/* Toplam satırı (fatura) */
.total-row { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 2px solid var(--gray-900); }

/* Belge tam genişliğe yayılmasın: bir A4 belgesinin satırları 1400px'e uzayınca
   okunmuyor. Ek bloklar (havale talimatı, kısmi tahsilat) belgenin ALTINA
   diziliyor — önce sağda duruyordu ve ödenmiş belgede o sütun boş kalıyordu. */
.paydoc { max-width: 780px; }
.paydoc__extra { margin-top: 18px; }

/* Belge no bağlantısı: satırın kimliği tıklanabilir ama tabloyu mavi
   bağlantılarla doldurmuyor — rengi metinden gelir, niyet hover'da belli olur. */
.doclink { color: inherit; text-decoration: none; }
.doclink:hover { color: var(--brand-600); text-decoration: underline; text-underline-offset: 3px; }
.doclink:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; border-radius: 3px; }

/* Belge modalı — gövde AJAX ile geliyor. */
.modal--doc { max-width: 840px; }
.modal--doc .modal__header h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
/* Modalın içinde belge zaten tek sütun; genişlik sınırını modal veriyor. */
.modal--doc .paydoc { max-width: none; }
.modal--doc .card { border: none; box-shadow: none; }
.modal--doc .card__body--lg { padding: 4px 0 0; }
.doc-loading { display: grid; place-items: center; min-height: 220px; color: var(--text-muted); }

/* --- Ayarlar modalı ---------------------------------------------------------
   Solda bölümler, sağda pano. Modalın kendisi kaymaz; kayan yalnızca sağdaki
   pano — bölüm listesi her zaman görünür kalmalı, kullanıcı nerede olduğunu
   kaybetmesin. */
/* YÜKSEKLİK SABİT, max-height DEĞİL. Panolar farklı boyda: değişken yükseklik
   bırakınca bölüm değiştirmek kutuyu büyütüp küçültüyor, sol menü yerinde
   durmuyordu. Sabitleyince yalnızca sağdaki içerik kayıyor. */
.modal--settings {
    max-width: 880px; width: 100%;
    height: min(620px, 88vh);
    overflow: visible; position: relative; padding: 0;
    /* Gövde AJAX ile gelen bir sarmalayıcının içinde. O sarmalayıcıya yükseklik
       verilmezse `.settings { height: 100% }` dayanacak bir ölçü bulamıyor ve
       sol sütunun arka planı içerik kadar kısa kalıyordu. */
    display: flex; flex-direction: column;
}
.modal--settings > [data-settings-body] { flex: 1; min-height: 0; }
.modal--settings__x { position: absolute; top: 10px; right: 10px; z-index: 2; }
.settings { display: grid; grid-template-columns: 244px 1fr; min-height: 0; height: 100%; }
.modal--settings .settings { height: 100%; }

.settings__side {
    background: var(--bg-soft, #f6f8fb); border-right: 1px solid var(--border);
    border-radius: var(--r-xl) 0 0 var(--r-xl);
    /* ALT DOLGU YOK: çıkış bloğu sağdaki ayak gibi kabın DİBİNE otursun.
       Alttan 16px pay bırakınca sol çizgi sağdakinden yukarıda kalıyor ve iki
       çizgi dikey ayırıcıda kesişmiyordu. */
    padding: 16px 12px 0; display: flex; flex-direction: column; gap: 14px;
    overflow-y: auto;
}
/* Kimlik bloğu ile bölüm listesi arasında AYIRICI. İkisi aynı yüzeyde art
   arda duruyordu ve "Özkan Demir" ilk menü öğesi gibi okunuyordu.
   Çizgi kenara kadar gitsin diye yan sütunun 12px yatay dolgusu negatif kenar
   boşluğuyla aşılıyor; içeride kısa kalan çizgi yarım iş gibi duruyor. */
.settings__me {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    margin: 0 -12px; padding: 4px 18px 14px;
    border-bottom: 1px solid var(--border);
}
.settings__me-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.settings__me-txt b { font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; }
.settings__me-txt span {
    font-size: 11.5px; color: var(--text-subtle);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 2px aralıkta seçili (beyaz kart) ve üstüne gelinen (gri) öğe birbirine
   yapışıyordu; iki zemin arasında nefes payı yok, tek bir blok gibi
   okunuyorlardı. */
.settings__nav { display: flex; flex-direction: column; gap: 6px; }
.settings__navitem {
    display: flex; align-items: flex-start; gap: 10px; width: 100%;
    padding: 9px 10px; border: 0; background: none; border-radius: var(--r-md);
    font: inherit; text-align: left; cursor: pointer; color: var(--text);
    transition: background .12s ease, color .12s ease;
}
.settings__navitem:hover { background: rgba(15, 23, 42, .05); }
.settings__navitem.is-active { background: var(--surface); box-shadow: var(--shadow-sm); }
/* İKON HİZASI TAM SAYIYA OTURMALI. Başlığın satır yüksekliği kalıtımla
   20,15px geliyordu: (20,15 − 16) / 2 = 2,075 → ikon yarım piksele düşüyor ve
   1x ekranda bir piksel kayıyor. Satır yüksekliği 20px'e sabitlenince fark 4,
   yarısı 2 — tam sayı. */
.settings__navitem [data-lucide] { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--text-muted); }
.settings__navitem.is-active [data-lucide] { color: var(--primary); }
.settings__navitem span { display: flex; flex-direction: column; min-width: 0; }
.settings__navitem b { font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: -0.01em; }
.settings__navitem small { font-size: 11px; color: var(--text-subtle); line-height: 16px; }

/* Çıkış: sütunun DİBİNDE. margin-top:auto onu aşağı iter, üstündeki çizgi
   bölüm listesinden ayırır — eylem ile gezinme aynı yığında karışmasın. */
/* Çizgi kenara kadar: üstteki kimlik ayırıcısıyla aynı yöntem, yan sütunun
   12px yatay dolgusu negatif kenar boşluğuyla aşılıyor.

   DİKEY DOLGU SAĞDAKİ AYAKLA AYNI (14px): iki blok da aynı yükseklikte olup
   aynı dibe oturunca üstlerindeki çizgiler tek bir sürekli çizgi gibi
   görünüyor. Farklı dolgu, ayırıcıda 1px'lik bir kırılma bırakıyordu. */
.settings__out {
    margin: auto -12px 0; padding: 14px 12px;
    border-top: 1px solid var(--border);
}
/* Yalnızca hizalama ve renk; ölçüler `.btn`den geliyor ki sağdaki ayak
   düğmesiyle aynı yükseklikte olsun. */
.settings__outbtn {
    width: 100%; justify-content: flex-start; padding-left: 10px;
    color: var(--danger-fg);
}
.settings__outbtn:hover { background: rgba(220, 38, 38, .08); color: var(--danger-fg); }

.settings__main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
/* Panolar üst üste; yalnızca etkin olan akışa girer. `hidden` yerine sınıf:
   form alanları DOM'da kalmalı ki tarayıcı otomatik doldurma ve doğrulama
   davranışı bölümler arasında bozulmasın. */
.settings__pane { display: none; flex-direction: column; min-height: 0; flex: 1; }
.settings__pane.is-active { display: flex; }
.settings__sub { display: none; flex-direction: column; min-height: 0; flex: 1; }
.settings__sub.is-active { display: flex; }

.settings__head { padding: 20px 24px 0; }
.settings__head h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.settings__head p { font-size: 12.5px; color: var(--text-subtle); margin-top: 3px; }
.settings__head--back { display: flex; align-items: center; gap: 6px; padding-left: 14px; }
.settings__head--back h3 { margin: 0; }

.settings__body { padding: 18px 24px 24px; overflow-y: auto; flex: 1; min-height: 0; }
.settings__foot {
    padding: 14px 24px; border-top: 1px solid var(--border);
    display: flex; justify-content: flex-end; gap: 8px; flex: none;
}
.settings__foot--split { justify-content: space-between; }
.settings__foot-end { display: flex; gap: 8px; }

/* Tam sayfa hâli: modal kabuğu yok, kutuyu kartın kendisi çiziyor. */
.settings-page .settings {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-xl); box-shadow: var(--shadow-sm);
    max-width: 880px; min-height: 520px;
}

@media (max-width: 760px) {
    /* Dar ekranda yan yana iki sütun sığmıyor: bölümler üstte yatay şerit. */
    .settings { grid-template-columns: 1fr; }
    .settings__side {
        border-right: 0; border-bottom: 1px solid var(--border);
        border-radius: var(--r-xl) var(--r-xl) 0 0;
    }
    .settings__nav { flex-direction: row; overflow-x: auto; gap: 6px; }
    .settings__navitem { flex: none; }
    .settings__navitem small { display: none; }
    /* Dar ekranda yan sütun kısa bir başlık şeridi: çıkışı dibe itmenin
       anlamı kalmıyor, listenin yanına geçiyor. */
    .settings__out { margin: 0; padding: 8px 0 0; border-top: 0; }
    .settings__outbtn { width: auto; }
    .modal--settings { height: 92vh; }
}

/* --- Fatura belgesi --- */
.invoice-doc__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; margin-bottom: 30px; }
/* Taraf blokları (düzenleyen / alıcı) aynı biçimde: ad kalın, altına satırlar. */
.invoice-doc__party { display: flex; flex-direction: column; gap: 2px; }
.invoice-doc__party b { font-size: 14.5px; font-weight: 700; color: var(--text); line-height: 1.35; }
.invoice-doc__party span { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }

.invoice-doc__meta { text-align: right; flex: none; }
.invoice-doc__title { font-size: 13px; font-weight: 700; letter-spacing: 0.16em; color: var(--text-muted); }
.invoice-doc__no { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin-top: 2px; }
/* dt/dd yan yana, sağa dayalı: etiketler soluk, değerler okunur. */
.invoice-doc__meta dl {
    display: grid; grid-template-columns: auto auto; justify-content: end;
    gap: 2px 8px; margin-top: 12px; font-size: 12.5px;
}
.invoice-doc__meta dt { color: var(--text-muted); }
/* İki nokta AYIRICI OLARAK, işaretlemede değil biçemde: etiketle değeri
   birbirine bağlıyor, yoksa aradaki boşluk ikisini ilgisiz iki kelime gibi
   gösteriyordu. Metinde durmamalı — dt/dd zaten bu ilişkiyi taşıyor, kopyala
   yapıştırdığında da tarihe yapışmasın. */
.invoice-doc__meta dt::after { content: ":"; margin-left: 1px; }
.invoice-doc__meta dd { margin: 0; color: var(--text); font-weight: 600; }
/* Belge altı açıklaması — okunmalı ama belgeyle yarışmamalı. */
.invoice-doc__note {
    margin: 18px 0 0; padding-top: 13px; border-top: 1px solid var(--border);
    font-size: 11.5px; line-height: 1.65; color: var(--text-subtle);
}
/* Referans: tahsilat şeridinin ikinci satırı. Okunacak değil EŞLEŞTİRİLECEK
   bir dizi — ana cümlenin ağırlığında durmasın, tek tıkla seçilebilsin. */
.invoice-doc__ref {
    display: block; margin-top: 2px;
    font-size: 11.5px; font-weight: 500; opacity: .78;
    letter-spacing: 0; user-select: all;
}

.invoice-doc__to { margin-bottom: 24px; }
.invoice-doc__label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px;
}

/* Toplam: faturanın ana bilgisi, göz oraya gitmeli. */
.invoice-doc__total {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    margin-top: 18px; padding-top: 18px; border-top: 2px solid var(--gray-900);
    font-size: 14px; font-weight: 600;
}
.invoice-doc__total b { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }

/* Ödendi şeridi — durum rozeti sayfa başlığında kalıyor ama çıktıya girmiyor;
   belgenin kendisinde de görünmeli. (satır yüksekliği − ikon) çift: 20 − 18 = 2 */
.invoice-doc__paid {
    /* İki satırlı olabiliyor (referans): çok satırlı ikon+metin hizası
       flex-start + ikonu satır yüksekliğine göre indirme ile kurulur. */
    display: flex; align-items: flex-start; gap: 9px;
    margin-top: 20px; padding: 11px 14px; border-radius: var(--r-md);
    background: var(--success-bg); color: var(--success-fg);
    font-size: 13px; font-weight: 600; line-height: 20px;
}
.invoice-doc__paid [data-lucide] { width: 18px; height: 18px; flex: none; margin-top: 1px; }

@media (max-width: 620px) {
    .invoice-doc__head { flex-direction: column; gap: 20px; }
    .invoice-doc__meta { text-align: left; }
    .invoice-doc__meta dl { justify-content: start; }
}

/* --- Yazdırma ---
   Ekran arayüzü (kenar çubuğu, üst şerit, düğmeler, yan kartlar) çıktıya
   girmemeli; kâğıda yalnızca belgenin kendisi gitsin. */
@page { margin: 16mm; }
@media print {
    /* .page-head de gizli: fatura numarası ve durumu belgenin kendisinde zaten
       var, "Faturalara dön" bağlantısının ise kâğıtta hiçbir anlamı yok. */
    /* .modal-backdrop BU LİSTEDE DEĞİL: açık bir belge modalı yazdırılabilmeli.
       Kapalı olanları aşağıdaki :not(.open) kuralı gizliyor. */
    .sidebar, .topbar, .no-print, .flash, .page-head,
    .drawer-backdrop { display: none !important; }
    /* Sınıflar layouts/app.php ile birebir: .app > .sidebar + .main > .content */
    body, .app, .main, .content { background: #fff !important; margin: 0 !important; padding: 0 !important; }
    .app { display: block !important; }
    .g-detail { display: block !important; }
    .card { border: none !important; box-shadow: none !important; }
    .card__body--lg { padding: 0 !important; }
    /* MODALDAN YAZDIRMA. Perde position:fixed ve max-height:90vh; olduğu gibi
       bırakılırsa yazıcı yalnızca ekrana sığan kısmı basar, gerisi kırpılır.
       Yazdırırken modalı normal akışa indiriyoruz. */
    .modal-backdrop { position: static !important; background: none !important;
                      padding: 0 !important; opacity: 1 !important; visibility: visible !important; }
    .modal-backdrop:not(.open) { display: none !important; }
    .modal { max-width: none !important; max-height: none !important; overflow: visible !important;
             box-shadow: none !important; transform: none !important; opacity: 1 !important; }
    .modal__header, .modal__footer { display: none !important; }
    .modal__body { overflow: visible !important; max-height: none !important; padding: 0 !important; }
    /* Perde açıkken sayfanın kendi içeriği kâğıda girmesin. */
    body:has(.modal-backdrop.open) .content > *:not(.modal-backdrop) { display: none !important; }

    /* Yazıcı arka planları basmayabilir; kenarlıkla görünür kal. */
    .box-table { border: 1px solid #d5dae1 !important; }
    .invoice-doc__paid { border: 1px solid #16a34a !important; }
}

/* Uyarı kutucukları (dashboard "dikkat gerektiren") */
.tile { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: var(--r-md); font-weight: 600; }
.tile--danger { background: var(--danger-bg); color: var(--danger-fg); }
.tile--warning { background: var(--warning-bg); color: var(--warning-fg); }
.tile--success { background: var(--success-bg); color: var(--success-fg); }

/* Otomatik grid varyantları */
.grid-auto-160 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; }
.grid-auto-200 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.grid-cards-280 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }

/* --- Paket kartları (abonelik / plan değiştir) --- */
.section-head { margin-bottom: 14px; }
.section-head h2 { display: flex; align-items: center; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.section-head p { color: var(--text-muted); font-size: 13px; margin-top: 3px; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(198px, 1fr)); gap: 14px; align-items: stretch; }
/* Üst padding tüm kartlarda EŞİT (rozetli/rozetsiz fark etmez) → isim/fiyat aynı hizada başlar,
   yüzen rozetler (top:-10px) içeriğe binmez, kartlar dikeyde birebir eşit. */
.plan-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 16px 18px; }
.plan-card--current { border-color: var(--brand-300); box-shadow: inset 0 0 0 1px var(--brand-200); }
.plan-card__name { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.plan-card__desc { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; min-height: 34px; line-height: 1.4; }
.plan-card__price { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin-top: 8px; }
.plan-card__price span { font-size: 12.5px; font-weight: 500; color: var(--text-muted); }
/* Orantılı fiyat: mevcut plandan geçişte ilk dönem tutarı + kredi notu */
.plan-card__proration { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; padding: 9px 11px; background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--r-md); }
.plan-card__proration-due { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--brand-700); }
.plan-card__proration-due .text-muted { font-size: 11.5px; font-weight: 600; }
.plan-card__proration-note { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--brand-700); }
.plan-card__proration-note [data-lucide] { width: 13px; height: 13px; flex: none; }
.plan-card__feats { flex: 1; margin-top: 14px; }
.plan-inherit { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--brand-700); background: var(--brand-50); border-radius: var(--r-sm); padding: 7px 9px; margin-bottom: 10px; }
.plan-inherit [data-lucide] { width: 14px; height: 14px; flex-shrink: 0; }
.plan-note { font-size: 12px; color: var(--text-muted); line-height: 1.45; }
/* SÜTUNLARA AKAR, sabit tek sütun DEĞİL.
   Eskiden `flex-direction: column` idi ve dört plan yan yanayken doğruydu:
   her kart ~250px, tek sütundan başkası sığmazdı. Tek plana geçilince kart
   sayfanın tamamını kaplıyor ama liste tek sütunda kalıyordu — 30 madde alt
   alta diziliyor, sağda ~1200px boşa gidiyordu.

   `column-width` kart genişliğine göre KENDİ ayarlanıyor: dar kademe
   kartlarında tek sütun, tam genişlikteki tek kartta üç-dört sütun. İki
   düzen için ayrı sınıf tutmaya gerek kalmıyor.

   Okuma sırası (aşağı → yandaki sütun) burada sorun değil, aksine işe yarıyor:
   madde sırası bilerek kuruluyor (BEF AI maddeleri listenin tam ortasına
   alınıyor, bkz. subscription.php) ve sütun akışı o ortayı görsel olarak da
   orta sütuna denk getiriyor. */
.plan-list { column-width: 210px; column-gap: 22px; }
.plan-list li {
    display: flex; align-items: flex-start; gap: 7px;
    font-size: 12.5px; line-height: 1.4;
    padding-bottom: 7px;   /* gap yerine: column akışında `gap` dikeyi yönetmez */
    /* Madde sütun sınırında ikiye bölünmesin — uzun etiketler ("BEF AI ile
       ürün görseli üretme") ikinci satıra taşıyor ve bölünürse ikonu bir
       sütunda, metni diğerinde kalırdı. */
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}
.plan-list [data-lucide] { width: 15px; height: 15px; color: var(--success-fg); flex-shrink: 0; margin-top: 1px; }
.plan-card__foot { margin-top: 16px; }

/* "En Çok Tercih Edilen" plan — üst şerit rozeti + belirgin çerçeve + hafif büyük */
.plan-card--featured {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 1px var(--brand-500), 0 22px 50px -24px rgba(31, 79, 245, 0.42);
}
.plan-card__ribbon {
    position: absolute; top: -11px; left: 14px; z-index: 3;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px 4px 9px; border-radius: 999px;
    background: var(--brand-600); color: #fff;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
    box-shadow: 0 6px 16px -5px rgba(31, 79, 245, 0.55);
}
.plan-card__ribbon [data-lucide] { width: 12px; height: 12px; }
/* Featured + AI birlikteyse: şerit solda, AI rozeti sağda — çakışmaz (üst padding tüm kartlarda eşit). */
/* Featured + AI aynı kartta: "en çok tercih" çerçevesi öncelikli (mavi düz kenar), AI gradyanı bastırılır */
.plan-card--featured.plan-card--ai { border-color: var(--brand-500); background: var(--surface); }

/* BEF AI destekli plan vurgusu — parıltılı üst şerit + köşe rozeti + AI özellik satırları öne çıkar */
.plan-card { position: relative; }
.plan-card--ai {
    border-color: transparent;
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        linear-gradient(120deg, #1f4ff5, #7c3aed 55%, #06b6d4) border-box;
    box-shadow: 0 18px 44px -26px rgba(124, 58, 237, 0.4);
}
.plan-card--ai.plan-card--current { box-shadow: 0 0 0 3px var(--brand-100), 0 18px 44px -26px rgba(124, 58, 237, 0.4); }
.plan-card__ai-badge {
    position: absolute; top: -10px; right: 14px; z-index: 2;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 11px 4px 8px; border-radius: 999px;
    background: var(--surface); border: 1.5px solid transparent;
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        linear-gradient(120deg, #1f4ff5, #7c3aed 55%, #06b6d4) border-box;
    font-size: 11px; font-weight: 700; line-height: 1.3;
    box-shadow: 0 6px 16px -6px rgba(124, 58, 237, 0.45);
    /* "destekli" kelimesi normal renk, BEF AI badge kendi gradyanında */
    color: var(--text-muted);
}
/* Aktif abonelik başlığı: durum pill'i + İptal Et butonu dikeyde kusursuz ortalı.
   İçteki form block olduğundan flex-item olarak pill'le hizası kayabiliyordu → form'u da flex yap.
   Ayrıca pill ile butonu aynı yüksekliğe getirip her ikisini de dikeyde ortala (metin optik merkezi çakışsın). */
.sub-actions { align-items: stretch; }
.sub-actions form { display: flex; align-items: center; }
.sub-actions > .badge { align-items: center; }
.sub-actions .btn--sm, .sub-actions .badge { min-height: 30px; }
.sub-actions .badge { padding-top: 0; padding-bottom: 0; line-height: 1; }
.grid-cards-300 { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 18px; align-items: stretch; }
.grid-cards-360 { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 18px; align-items: stretch; }

/* Tanım listesi varyantları */
.dl--tight { grid-template-columns: 120px 1fr; }
.dl--split { grid-template-columns: 1fr auto; }

/* Dashboard gelir grafiği */
.chart { display: flex; align-items: flex-end; gap: 14px; height: 200px; padding-top: 10px; }
.chart__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.chart__bar { width: 100%; max-width: 46px; height: var(--bar-h, 4px); background: linear-gradient(180deg, var(--brand-400), var(--brand-600)); border-radius: 8px 8px 0 0; transition: height 0.3s; }

/* Varyasyon fiyat kutusu */
.var-price { max-width: 150px; }

/* Küçük görsel önizleme (thumb) - <img> ile kullanılır */
.thumb-img { width: 100%; height: 100%; object-fit: cover; }

/* Ayırıcı üstü toplam (koyu çizgi) */
.pay-hist-row { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--border); }


/* Font-size / weight utilities (birebir eşleme için) */
.fs-11 { font-size: 11px; } .fs-12 { font-size: 12px; } .fs-16 { font-size: 16px; }
.fs-17 { font-size: 17px; } .fs-18 { font-size: 18px; } .fs-20 { font-size: 20px; }
.fs-22 { font-size: 22px; } .fs-24 { font-size: 24px; } .fs-28 { font-size: 28px; }
.tracking-tight { letter-spacing: -0.02em; }

/* Dolgu utilities */
.pad-lg { padding: 32px; } .pad-28 { padding: 28px; } .pad-14 { padding: 14px; }

/* Çeşitli */
.mh-20 { min-height: 20px; }
.mb-32 { margin-bottom: 32px; }
.bg-surface { background: var(--surface); }
.pill-warning { background: var(--warning-bg); color: var(--warning-fg); }
.pill-danger { background: var(--danger-bg); color: var(--danger-fg); }
.pill-success { background: var(--success-bg); color: var(--success-fg); }
.pill-info { background: var(--info-bg); color: var(--info-fg); }
.pill-muted { background: var(--neutral-bg); color: var(--neutral-fg); }
.dropdown-sep { margin-top: 6px; border-top: 1px solid var(--border); padding-top: 6px; }
.card-boxed { border: 1px solid var(--border); border-radius: var(--r-md); }

/* Görsel alanı: <img> tabanlı önizleme */
/* contain (cover DEĞİL): görsel kutuyu doldurmak için kırpılmaz, kendi oranında
   ortalanır. cover iken kare bir ürün görseli geniş-alçak kutuda ortasından
   şerit gibi kesiliyor ve ne yüklendiği anlaşılmıyordu. */
/* Eleman, GÖRSELİN kendi boyutunu alır (inset:0 + %100 DEĞİL): ancak o zaman
   border-radius görselin köşelerine denk gelir. object-fit:contain ile eleman
   kutuyu doldurduğunda görsel ortada duruyor, köşe yarıçapı ise elemanın
   görünmeyen kenarlarına uygulandığı için hiçbir etkisi olmuyordu.
   Kırpılma yok: oran max-width/max-height ile korunuyor. */
.imgfield__img {
    max-width: 100%; max-height: 100%; width: auto; height: auto;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .1);
}
.imgfield__img[hidden] { display: none; }

/* LOGODA GÖLGE/YUVARLAKLIK YOK.
   Yukarıdaki gölge fotoğraflar içindir: ürün ve kategori görselleri kutularını
   doldurur, gölge onları zeminden ayırır. Logo ise SAYDAM ve kutusunu doldurmaz.
   Gölge elemanın DİKDÖRTGENİNE çizildiği için görünen piksellerin değil, boş
   alanın da kenarı çiziliyor — ortada olmayan beyaz bir kart varmış gibi
   görünüyordu. Saydam logo doğrudan bırakma alanının zeminine oturmalı. */
.imgfield--logo .imgfield__img {
    border-radius: 0;
    box-shadow: none;
}
.is-hidden { display: none !important; }

/* --- 23. API dokümantasyon --- */
.code-block {
    background: var(--gray-900); color: #e2e8f0;
    padding: 16px 18px; border-radius: var(--r-md);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px; line-height: 1.65;
    overflow-x: auto; white-space: pre; margin: 0;
}
.code-block .c-key { color: #7dd3fc; }
.code-block .c-str { color: #bef264; }
.code-block .c-com { color: #64748b; }
.badge--method { background: var(--success-bg); color: var(--success-fg); font-family: ui-monospace, monospace; }
.doc-step { display: flex; gap: 12px; align-items: flex-start; }
.doc-step__no {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: var(--r-full);
    background: var(--brand-600); color: #fff; display: grid; place-items: center;
    font-size: 12px; font-weight: 700;
}

/* --- 24. Ürün yönetimi: gruplama, arama, toplu işlem --- */
.menu-section { margin-bottom: 22px; }
.menu-section__head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.menu-section__head h3 { font-size: 14px; font-weight: 650; }
.menu-section__count { font-size: 12px; color: var(--text-subtle); font-weight: 600; }
.menu-row__check { flex-shrink: 0; }
.bulkbar {
    position: sticky; top: calc(var(--header-h) + 8px); z-index: 15;
    display: none; align-items: center; gap: 12px; flex-wrap: wrap;
    background: var(--gray-900); color: #fff;
    padding: 10px 14px; border-radius: var(--r-md); margin-bottom: 16px;
    box-shadow: var(--shadow-md);
}
.bulkbar.show { display: flex; }
.bulkbar__count { font-weight: 600; font-size: 13.5px; }
.bulkbar .btn { padding: 6px 12px; }
.prod-empty-hint { display: none; justify-content: center; align-items: center; gap: 6px; text-align: center; padding: 30px; color: var(--text-subtle); }
.bulkbar__clear { color: #fff; }
.bulkbar__clear:hover { background: rgba(255,255,255,0.12); }

/* --- 25. Menü Yönetimi: iki panel (kategori | ürün) --- */
.menu-manage { display: grid; grid-template-columns: 330px 1fr; grid-template-rows: minmax(440px, auto); gap: 18px; align-items: stretch; }
/* Sabit yükseklik: kategori değiştirince (dolu/boş) pane zıplamasın; içerik azsa alan
   korunur, çoksa büyür. Boş durum dikey ortalanır. */
.menu-manage > .card { display: flex; flex-direction: column; min-height: 0; }
.menu-manage > .card > .card__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* Her iki panel başlığı eşit yükseklik: sağdaki arama input'u --ctrl-h (42px), sol başlık daha kısa.
   Başlık, kontrol yüksekliği + dikey padding (18×2) kadar min-yükseklik alır → ikisi de hizalı. */
.menu-manage > .card > .card__header { min-height: calc(var(--ctrl-h) + 36px); }
@media (max-width: 900px) { .menu-manage { grid-template-columns: 1fr; } }

/* Masaüstünde menü yönetimi ekranı viewport'u kaplar; her panel KENDİ İÇİNDE scrollanır
   (sayfa büyümez). :has ile yalnızca bu sayfaya uygulanır. */
@media (min-width: 901px) {
    .content:has(.menu-manage) {
        height: calc(100vh - var(--header-h));
        flex: none; /* flex:1 (flex-basis:0) explicit height'ı ezmesin */
        display: flex; flex-direction: column; overflow: hidden;
    }
    .content:has(.menu-manage) .menu-manage {
        flex: 1; min-height: 0; grid-template-rows: 1fr;
    }
    .menu-manage > .card > .card__body { overflow-y: auto; }
}

/* Menü ayarları: normal sayfa akışı; aksiyon barı içeriğin sonunda */
/* Kaydet çubuğu: içerik uzunsa ekranın altına yapışır (butonlar hep görünür).
   Formun sonuna gelince yerine oturur ve sade footer'a döner (gölge/kenarlık kalkar).
   "Yapışık mı" durumu JS'te sentinel + IntersectionObserver ile .is-stuck ile işaretlenir. */
.menu-settings__bar {
    position: sticky; bottom: 0; z-index: 20;
    margin: 20px -28px -28px; padding: 14px 28px;
    background: var(--surface); border-top: 1px solid transparent;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.menu-settings__bar.is-stuck {
    border-top-color: var(--border);
    box-shadow: 0 -8px 24px -14px rgba(15, 23, 42, 0.18);
}
.menu-settings__sentinel { height: 1px; margin-top: -1px; }
@media (max-width: 900px) { .menu-settings__bar { margin: 20px -18px -18px; padding: 14px 18px; } }

/* === Görünüm: TEK telefon çerçevesi — ince, sade === */
/* Çerçeve: mutlak konumlu ekran + her yerden 6px sabit kenar → kenar garanti ince ve eşit (flex/padding quirk yok) */
.phone { position: relative; height: 100%; max-height: 710px; max-width: 100%; aspect-ratio: 300 / 638; margin: 0 auto;
    border-radius: 24px;
    background: linear-gradient(145deg, #2f323b 0%, #14161c 46%, #060709 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 22px 48px -22px rgba(16, 20, 50, 0.42); }
.phone::before { content: ""; position: absolute; left: -2px; top: 24%; width: 3px; height: 30px; background: linear-gradient(180deg, #3c3f48, #15171d); border-radius: 3px 0 0 3px; box-shadow: 0 42px 0 #343742; }
.phone::after { content: ""; position: absolute; right: -2px; top: 30%; width: 3px; height: 56px; background: linear-gradient(180deg, #3c3f48, #15171d); border-radius: 0 3px 3px 0; }
.phone__screen { position: absolute; inset: 6px; border-radius: 18px; overflow: hidden; background: #fff; }
/* İki iframe üst üste — kaydedince arka tampon yüklenip çapraz geçişle öne gelir (titremesiz) */
/* iframe gerçek telefon genişliğinde (390px) render eder, JS çerçeveye göre scale eder → birebir telefon görünümü */
.phone__frame { position: absolute; top: 0; left: 0; width: 390px; height: 100%; border: 0; display: block; transform-origin: top left; opacity: 0; transition: opacity 0.26s ease; }
.phone__frame.is-active { opacity: 1; }

/* Görünüm: sabit split — sol kontroller kendi içinde kayar, sağ telefon sabit + dikeyde ortalı (sayfa kaymaz) */
/* === Görünüm editörü: dar kontrol paneli (sol) + büyük önizleme sahnesi (sağ) === */
.content:has(.appear) { padding: 0; }
.appear { display: grid; grid-template-columns: 380px minmax(0, 1fr); height: calc(100vh - var(--header-h)); }

.appear__panel { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border-right: 1px solid var(--border); }
.appear__head { flex: 0 0 auto; padding: 0; }
.appear__head h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.appear__head p { color: var(--text-muted); font-size: 13px; margin-top: 5px; line-height: 1.45; }
.appear__form { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.appear__body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 28px; }
.appear__label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; line-height: 1.2; font-weight: 650; color: var(--text); margin-bottom: 14px; }
.appear__label [data-lucide] { width: 16px; height: 16px; flex: none; display: block; color: var(--text-muted); }
.appear__hint { color: var(--text-muted); font-size: 12px; margin-top: 12px; line-height: 1.5; }
.appear__save { flex: 0 0 auto; padding: 14px 24px; border-top: 1px solid var(--border); }
.appear__save .btn { width: 100%; justify-content: center; }

.appear__stage { position: relative; display: grid; place-items: center; padding: 40px; overflow: hidden;
    background-color: #eaeef6;
    background-image: radial-gradient(rgba(30, 42, 76, 0.06) 1.1px, transparent 1.1px);
    background-size: 24px 24px; }
/* Telefon + altındaki eylemler tek yığın; sahne ikisini birlikte ortalıyor. */
.appear__preview { display: grid; justify-items: center; gap: 16px; }
.appear__preview .mlink-actions { justify-content: center; margin-top: 0; padding-top: 0; }

/* Kesin yükseklik → genişlik orandan (aspect-ratio) gelir; max-width: none ki oran kırılmasın.
   Çıkarılan pay 90 → 150: altına eylem satırı geldi, telefon onu ezmesin. */
.phone--stage { height: min(720px, calc(100vh - var(--header-h) - 150px)); max-height: none; width: auto; max-width: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.42), 0 26px 60px -30px rgba(18, 26, 60, 0.4); }

@media (max-width: 991px) {
    .content:has(.appear) { padding: 18px; }
    .appear { display: block; height: auto; }
    .appear__panel { border-right: 0; background: transparent; }
    .appear__head { padding: 0 0 4px; }
    .appear__body { overflow: visible; padding: 16px 0; }
    .appear__save { padding: 12px 0 0; border-top: 0; }
    /* Sahne TAMAMEN gizlenmiyor: telefon önizlemesi dar ekranda anlamsız ama
       altındaki Görüntüle/Kopyala/Paylaş erişilebilir kalmalı — mobilde asıl
       gereken onlar. Sahne süsünden (noktalı zemin, dolgu) arınıp yalnızca
       eylem satırını taşıyor. */
    .appear__stage { display: block; padding: 0; background: none; overflow: visible; }
    .appear__stage .phone { display: none; }
    .appear__preview { gap: 0; }
    .appear__preview .mlink-actions { justify-content: flex-start; margin-top: 16px; }
}

/* === Görünüm editörü: renk swatch'ları === */
.swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; justify-items: center; }
.swatch { width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; position: relative;
    background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.09); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.swatch:hover { transform: translateY(-2px); }
.swatch.is-active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--sw); }
/* Tik: checkbox ile aynı SVG (yuvarlak uç, tam ortalı) — döndürülmüş border değil */
.swatch.is-active::before { content: ""; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M4.4 9.3l3 3.1 6.2-6.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 20px 20px; }
/* Özel renk gözü: seçicinin KABI. `overflow: hidden` YOK — paneli kırpardı;
   yerel girdiyi gizlemek için de gerekmiyor, onu `.cpick__native` yapıyor. */
.swatch--custom { display: grid; place-items: center; background: var(--surface);
    box-shadow: inset 0 0 0 2px var(--border); color: var(--text-muted); }
.swatch--custom:hover { color: var(--brand-600); box-shadow: inset 0 0 0 2px var(--brand-300); transform: translateY(-2px); }
.swatch--custom [data-lucide] { width: 17px; height: 17px; pointer-events: none; }
/* Renk hazır tonlardan biriyken göz "boş" durur: damlalık görünür, dolgu yok.
   Özel bir renk seçilince göz o renge boyanır ve damlalık beyaza döner. */
/* PANEL AÇIKKEN GÖZ HAVALANMAZ. `transform` yığın bağlamı yaratıyor ve panelin
   `z-index: 40`'ı o bağlamın İÇİNDE kalıyor: göz `z-index: auto` ile aktığı
   için sonradan gelen konumlanmış kardeşler (yazı tipi kartları) panelin
   üstüne biniyordu. Fare panelin üzerindeyken de göz hover'da sayıldığından
   sorun açık kaldığı sürece sürüyordu. */
.swatch--custom:has(.cpick.is-open),
.swatch--custom:has(.cpick.is-open):hover { transform: none; z-index: 41; }
.swatch--custom:not(.is-active) .cpick__dot { opacity: 0; }
.swatch--custom.is-active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--sw); color: #fff; }
.swatch--custom.is-active::before { content: none; }   /* tik yerine damlalık kalsın */

/* Arka plan (yüzey tonu) kartları */
.surfgrid, .radgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.surfcard { position: relative; border: 1.5px solid var(--border); background: var(--surface); border-radius: 12px; padding: 8px 8px 9px; cursor: pointer; text-align: center; transition: border-color .15s, box-shadow .15s, transform .15s; }
.surfcard:hover { transform: translateY(-2px); }
.surfcard.is-active { border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
.surfcard__prev { display: block; height: 52px; border-radius: 8px; padding: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.surfcard__card { display: block; height: 100%; border-radius: 5px; padding: 7px; text-align: left; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.surfcard__bar { display: block; width: 58%; height: 6px; border-radius: 3px; }
.surfcard__ln { display: block; height: 4px; border-radius: 2px; margin-top: 6px; width: 92%; opacity: 0.9; }
.surfcard__ln--sm { width: 58%; margin-top: 4px; opacity: 0.55; }
.surfcard__name { display: block; font-size: 12px; font-weight: 650; color: var(--text); margin-top: 7px; }
.surfcard__tick { position: absolute; top: 6px; right: 6px; width: 17px; height: 17px; border-radius: 50%; background: var(--brand-500); color: #fff; display: grid; place-items: center; opacity: 0; transform: scale(0.6); transition: 0.15s; }
.surfcard__tick [data-lucide] { width: 11px; height: 11px; }
.surfcard.is-active .surfcard__tick { opacity: 1; transform: scale(1); }

/* Köşe yuvarlaklığı kartları */
.radcard { display: flex; flex-direction: column; align-items: center; gap: 9px; border: 1.5px solid var(--border); background: var(--surface); border-radius: 12px; padding: 15px 8px 11px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.radcard:hover { transform: translateY(-2px); }
.radcard.is-active { border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
.radcard__prev { width: 42px; height: 42px; background: var(--brand-50); border: 1.5px solid var(--brand-400); }
.radcard__name { font-size: 12px; font-weight: 650; color: var(--text-muted); }
.radcard.is-active .radcard__name { color: var(--brand-600); }

/* TEK boş-görsel tutucu — proje geneli. Görsel yoksa herhangi bir görsel alanına ".ph" ekle;
   arka plan + ikon temadan gelir (koyu tema dahil), ikon çözünürlüğe göre ölçeklenir. */
:where(.ph) { position: relative; }
.ph { background: var(--fill, #eceef3); overflow: hidden; }
.ph::after { content: ""; position: absolute; inset: 0; background-color: var(--muted, #aeb6c4);
    -webkit-mask: url("/assets/img/ph.svg") center / min(56px, 44%) no-repeat;
    mask: url("/assets/img/ph.svg") center / min(56px, 44%) no-repeat; opacity: 0.42; }

/* === Görünüm editörü: font kartları (her kart kendi fontuyla) === */
.fontgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
.fontcard { position: relative; text-align: left; cursor: pointer; padding: 15px 16px 14px;
    background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px;
    display: flex; flex-direction: column; gap: 3px; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
.fontcard:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.fontcard.is-active { border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
.fontcard__name { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); line-height: 1.15; }
.fontcard__demo { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.fontcard__tick { position: absolute; top: 9px; right: 9px; width: 20px; height: 20px; border-radius: 50%;
    background: var(--brand-600); color: #fff; display: grid; place-items: center;
    opacity: 0; transform: scale(0.6); transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1); }
.fontcard__tick [data-lucide] { width: 12px; height: 12px; stroke-width: 3; }
.fontcard.is-active .fontcard__tick { opacity: 1; transform: scale(1); }

/* Menü adresi (vanity handle) düzenleme alanı */
.handle-field { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 0; }
.handle-field__host { display: inline-flex; align-items: center; align-self: stretch; padding: 0 12px; background: var(--gray-100); border: 1px solid var(--border); border-right: 0; border-radius: var(--r-md) 0 0 var(--r-md); color: var(--text-muted); font-size: 13.5px; white-space: nowrap; }
/* host + input BİTİŞİK tek alan (aralarında boşluk yok): host sol yuvarlak, input sağ yuvarlak */
.handle-field__input.input { flex: 1 1 160px; min-width: 140px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.handle-field .btn { flex: 0 0 auto; margin-left: 8px; }

.auth__alt { text-align: center; margin-top: 18px; font-size: 13.5px; color: var(--text-muted); }
.auth__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--brand-50); color: var(--brand-600); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.auth__icon [data-lucide] { width: 28px; height: 28px; }

/* Yayın kontrol listesi */
.chk-item { display: flex; align-items: center; gap: 10px; }
.chk-ico { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--gray-100); color: var(--gray-500); flex: none; }
.chk-ico [data-lucide] { width: 15px; height: 15px; }
.chk-item.done .chk-ico { background: var(--success-bg); color: var(--success-fg); }
.chk-label { flex: 1; font-size: 14px; font-weight: 600; color: var(--gray-800); line-height: 1.2; }
.chk-item.done .chk-label { color: var(--text-muted); }

/* Şifre göster/gizle */
.pw { position: relative; display: block; }
.pw-has-toggle { position: relative; }
.pw-has-toggle .input { padding-right: 42px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; color: var(--text-subtle); padding: 4px; display: inline-flex; align-items: center; line-height: 1; border-radius: var(--r-sm); }
.pw-toggle:hover { color: var(--gray-600); }
.pw-toggle [data-lucide] { width: 17px; height: 17px; }
.pw-req { display: grid; grid-template-rows: 0fr; opacity: 0; margin: 0; transition: grid-template-rows 0.28s ease, opacity 0.2s ease, margin 0.28s ease; }
/* Üstte nefes payı: liste alana yapışıkken alanın parçası gibi okunuyordu. */
.pw-req.open { grid-template-rows: 1fr; opacity: 1; margin: 12px 0 18px; }
/* İÇERİK KADAR YER, EŞİT SÜTUN DEĞİL. Izgara dört maddeyi 1fr'e geriyordu:
   "Bir rakam" 85px yazı için 185px yer kaplıyor, üçü bir satıra sığıyor,
   dördüncüsü tek başına alta düşüyordu — liste kırık görünüyordu. Esnek
   satırda maddeler yazıları kadar yer kaplar ve dördü tek satıra sığar;
   dar ekranda kendiliğinden alta sarar. */
.pw-req__inner {
    min-height: 0; overflow: hidden;
    display: flex; flex-wrap: wrap; gap: 8px 18px;
}
/* SATIRI SONUNA KADAR KULLAN. İçerik kadar yer verince maddeler sola toplanıp
   sağda boşluk bırakıyordu. Eşit pay + `max-content` alt sınırı: kutular eşit
   olduğu için işaretler düzenli aralıklarla diziliyor, satır iki uçtan da
   dolu bitiyor, dar kapta ise madde yazısından küçülmek yerine alta sarıyor. */
.pw-req__item { flex: 1 1 0; min-width: max-content; }
.pw-req__item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); line-height: 1.2; transition: var(--transition); }
.pw-req__item.ok { color: var(--gray-700); }
.pw-req__dot { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--gray-300); display: inline-flex; align-items: center; justify-content: center; flex: none; transition: var(--transition); }
.pw-req__dot [data-lucide] { width: 11px; height: 11px; color: #fff; opacity: 0; stroke-width: 3.5; }
.pw-req__item.ok .pw-req__dot { background: var(--success); border-color: var(--success); }
.pw-req__item.ok .pw-req__dot [data-lucide] { opacity: 1; }

.cat-list { display: flex; flex-direction: column; gap: 3px; }
.cat-item {
    display: flex; align-items: center; gap: 10px; line-height: 1.2;
    min-height: 46px; /* hover'da aksiyon butonları için alan baştan rezerve — yükseklik sıçramaz */
    padding: 10px 12px; border-radius: var(--r-md);
    cursor: pointer; transition: var(--transition);
    border: 1px solid transparent;
}
.cat-item:hover { background: var(--gray-50); }
.cat-item.active { background: var(--brand-50); border-color: var(--brand-100); }
.cat-item.active .cat-item__name { color: var(--brand-700); font-weight: 600; }
.cat-item__drag { color: var(--text-subtle); cursor: grab; flex-shrink: 0; }
.cat-item__drag:active { cursor: grabbing; }
.cat-item__name { flex: 1; min-width: 0; font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-item__count { font-size: 11px; font-weight: 700; background: var(--gray-100); color: var(--gray-600); padding: 1px 8px; border-radius: var(--r-full); flex-shrink: 0; }
.cat-item.active .cat-item__count { background: var(--brand-100); color: var(--brand-700); }
.cat-item__passive { font-size: 10px; color: var(--warning-fg); background: var(--warning-bg); padding: 1px 6px; border-radius: var(--r-full); }
.cat-item__actions { display: none; gap: 2px; flex-shrink: 0; }
.cat-item:hover .cat-item__actions { display: flex; }
.cat-item__act {
    width: 24px; height: 24px; border: 0; background: none; border-radius: var(--r-sm);
    display: grid; place-items: center; cursor: pointer; color: var(--text-subtle);
}
.cat-item__act:hover { background: var(--gray-200); color: var(--text); }
.cat-item__act.danger:hover { background: var(--danger-bg); color: var(--danger-fg); }
.cat-item__act [data-lucide] { width: 15px; height: 15px; }

/* Kategori ağacı (2 seviye) */
.cat-tree { display: flex; flex-direction: column; gap: 2px; }
.cat-node { }
.cat-item__caret { width: 15px; height: 15px; color: var(--text-subtle); flex-shrink: 0; transition: transform 0.15s, color 0.15s; margin-left: -2px; cursor: pointer; border-radius: 4px; }
.cat-item__caret:hover { color: var(--brand-600); }
.cat-node.collapsed > .cat-item .cat-item__caret { transform: rotate(-90deg); }
.cat-item--parent .cat-item__name { font-weight: 650; }
.cat-children {
    display: flex; flex-direction: column; gap: 2px;
    margin: 2px 0 2px 20px; padding-left: 10px;
    border-left: 1.5px solid var(--border);
}
.cat-node.collapsed > .cat-children { display: none; }
.cat-item--sub { background: transparent; }
.cat-item__drag--static { cursor: default; color: var(--text-subtle); }
/* Boş alt-liste normalde 0 yükseklik (layout'ta kalır -> her zaman geçerli bırakma hedefi);
   sürükleme sırasında bırakma bölgesi olarak açılır. */
.cat-children:empty { min-height: 0; margin: 0; padding: 0; border: 0; }
.cat-tree.dragging .cat-children:empty {
    align-items: center; justify-content: center;
    min-height: 40px; margin: 2px 0 2px 20px;
}
.cat-tree.dragging .cat-children:empty::before {
    content: 'Alt kategori yapmak için buraya bırak';
    width: 100%; text-align: center; font-size: 11px; color: var(--brand-600);
    border: 1.5px dashed var(--brand-300); border-radius: var(--r-md); padding: 10px;
    background: var(--brand-50);
}

.pane-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.prod-pane { display: none; }
.prod-pane.active { display: flex; flex-direction: column; min-height: 100%; }
.menu-manage .empty { margin: auto; } /* boş durumlar (sağ/sol) pane içinde dikey+yatay ortalı */

/* ============================================================
   Tek-akış menü yönetimi (.mtree) — kategori açordeon + inline ürün
   ============================================================ */
.mtree { display: flex; flex-direction: column; gap: 14px; }

/* --- Araç çubuğu: arama + Ekle --- */
.mtree__bar { display: flex; align-items: center; gap: 12px; }
.mtree__search { flex: 1; min-width: 0; }
.mtree__search .input { width: 100%; }
.mtree__add { position: relative; flex-shrink: 0; }
.mtree__menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
    min-width: 190px; padding: 6px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column; gap: 2px;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .16s, transform .16s, visibility .16s;
}
.mtree__add.is-open .mtree__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.mtree__menu button {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 11px; border-radius: var(--r-md);
    font-size: 14px; font-weight: 500; color: var(--text);
    background: none; border: 0; cursor: pointer; text-align: left; width: 100%;
    transition: background .14s;
}
.mtree__menu button:hover { background: var(--brand-50); color: var(--brand-700); }
.mtree__menu [data-lucide] { width: 17px; height: 17px; color: var(--gray-400); flex-shrink: 0; }
.mtree__menu button:hover [data-lucide] { color: var(--brand-600); }

/* --- Toplu seçim çubuğu --- */
.mtree__bulk {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 14px; border-radius: var(--r-lg);
    background: var(--brand-50); border: 1px solid var(--brand-100);
    animation: befSlideDown .18s ease;
}
@keyframes befSlideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mtree__bulk-count { font-size: 13.5px; color: var(--brand-700); }
.mtree__bulk-count b { font-weight: 700; }
.mtree__bulk-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Tek satır boşluğu — her yerde (öğeler arası, başlık-gövde, kategori-kategori) AYNI.
   Ürünler arası ile başlık-ürün arası birebir eşit görünür. */
.mtree { --mrow-gap: 10px; }
/* --- Liste: her öğe ayrı kart, aralarında boşluk (nefes alan hiyerarşi) --- */
.mtree__list { display: flex; flex-direction: column; gap: var(--mrow-gap); }

/* ============ Kategori: GÖRÜNMEZ grup — kartı BAŞLIK taşır, gövde sarmaz ============
   Ana kategori kartı tüm içeriği kapsamaz; başlık kendi kartı, alt öğeler kendi kartları
   olarak altına akar (referans yaklaşımı). Böylece dev bir dış kart oluşmaz. */
.mcat { display: flex; flex-direction: column; }
.mcat.is-hidden { display: none; }

/* ---- Özel sürükle-bırak göstergeleri (referans davranışı) ---- */
/* 1) Kaynak öğe: sürüklenirken YERİNDE kalır, solgun görünür (liste kaymaz).
   Kategoride SADECE başlık kartı solar; gövdesi (ürünler) normal kalır. Ürün ise tümüyle solar. */
.mrow.is-drag-src { opacity: .4; }
.mcat.is-drag-src > .mcat__head { opacity: .4; }
.is-drag-src { pointer-events: none; }

/* 2) İmleçteki klon: imlece yapışık, opak, gölgeli net kart (body'ye eklenir). */
.mtree-fallback {
    position: fixed; z-index: 200; margin: 0; pointer-events: none;
    opacity: .97; cursor: grabbing;
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: 0 16px 36px -10px rgba(15,23,42,.45);
}
/* Kategori klonu = yalnız başlık kartı (.mcat__head kopyası); zaten tek satır. */

/* 3) Bırakılacak yeri gösteren ÇİZGİ (mutlak konumlu, tree'ye göre). */
.mtree { position: relative; }
.mtree-dropline {
    position: absolute; height: 3px; border-radius: 3px;
    background: var(--brand-500); z-index: 40;
    opacity: 0; pointer-events: none; transition: opacity .1s;
    box-shadow: 0 0 0 1px rgba(255,255,255,.6);
}
.mtree-dropline.is-on { opacity: 1; }
.mtree-dropline.is-blocked { background: var(--danger-fg); }
/* Sürüklerken imleç grabbing + metin seçimi kapalı */
body.mtree-dragging { cursor: grabbing; user-select: none; }

/* Başlık = kartın kendisi (border + bg + gölge) */
/* Kategori başlık kartı = ürün kartıyla AYNI boyut (padding/radius/hover). */
.mcat__head {
    display: flex; align-items: center; gap: 12px;
    min-height: 62px; padding: 9px 12px; cursor: pointer; user-select: none;
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface); box-shadow: var(--shadow-xs);
    transition: border-color .15s, box-shadow .15s, background .14s;
}
.mcat__head:hover { border-color: var(--brand-200); box-shadow: var(--shadow-sm); }
.mcat__grip { color: var(--gray-300); cursor: grab; flex-shrink: 0; transition: color .15s; }
.mcat__head:hover .mcat__grip { color: var(--text-subtle); }
.mcat__grip:active { cursor: grabbing; }
.mcat__grip--static { width: 16px; flex-shrink: 0; }
.mcat__cover {
    /* position:relative → AI üret butonu / AI rozeti üstüne konumlanabilsin (ürün thumb'ı gibi) */
    position: relative;
    width: 40px; height: 40px; border-radius: var(--r-md); flex-shrink: 0;
    overflow: hidden; background: var(--gray-100); border: 1px solid var(--border);
    display: grid; place-items: center; color: var(--gray-400);
}
.mcat__cover img { width: 100%; height: 100%; object-fit: cover; }
.mcat__cover [data-lucide], .mcat__cover svg { width: 20px; height: 20px; }
.mcat__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mcat__name {
    display: flex; align-items: center; gap: 7px;
    font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--text);
    line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mcat__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success-fg); flex-shrink: 0; }
.mcat.is-passive .mcat__dot { background: var(--gray-300); }
.mcat__count { font-size: 12.5px; color: var(--text-muted); line-height: 1.2; }
.mcat__passive { font-size: 10px; color: var(--gray-500); background: var(--gray-100); padding: 2px 7px; border-radius: var(--r-full); flex-shrink: 0; }
/* Satır/başlık işlem menüsü (kebab): tek "⋯" butonu + açılan dropdown. */
.rowmenu { position: relative; flex-shrink: 0; }
.rowmenu__pop {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 30;
    min-width: 168px; padding: 6px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column; gap: 2px;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .16s, transform .16s, visibility .16s;
}
.rowmenu.is-open .rowmenu__pop { opacity: 1; visibility: visible; transform: translateY(0); }
.rowmenu.is-open .rowmenu__btn { background: var(--gray-100); color: var(--text); }
.rowmenu__pop form { display: flex; }
.rowmenu__pop .dropdown-item { width: 100%; }
.mcat__switch { flex-shrink: 0; }
/* Caret artık <button> (açordeon aç/kapat) — buton stilini sıfırla, tıklama alanı ver. */
.mcat__caret {
    display: grid; place-items: center; flex-shrink: 0;
    width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--r-md);
    background: none; color: var(--text-subtle); cursor: pointer;
    transition: transform .2s, background .14s, color .14s;
}
.mcat__caret:hover { background: var(--gray-100); color: var(--text); }
.mcat__caret [data-lucide] { width: 20px; height: 20px; }
.mcat.is-collapsed > .mcat__head .mcat__caret { transform: rotate(-90deg); }

/* Gövde: kategori satırının altında ürünler + alt kategoriler. Girinti ile hiyerarşi.
   Açılma/kapanma: grid-template-rows 1fr↔0fr animasyonu (içerik yüksekliğini bilmeye
   gerek yok, JS'siz yumuşak). İç sarıcı overflow:hidden ile içeriği kırpar. */
.mcat__body {
    display: grid; grid-template-rows: 1fr;
}
/* Animasyon yalnızca ilk boyamadan SONRA (anim-ready) — sayfa açılırken kapalı
   kategoriler animasyonsuz gelir, kullanıcı tıklayınca yumuşak açılıp kapanır. */
.mtree.anim-ready .mcat__body { transition: grid-template-rows .28s ease; }
.mcat__body > .mcat__inner { min-height: 0; overflow: hidden; }
/* Kebab menü açıkken kırpma kalksın (dropdown taşabilsin). Kategori açık olduğundan
   animasyon zaten bitmiş; overflow:visible güvenli. */
.mcat__inner.has-open-menu { overflow: visible; }
.mcat.is-collapsed > .mcat__body { grid-template-rows: 0fr; }
/* Gövde içi: ürünler + alt kategoriler kendi kartlarıyla, GİRİNTİLİ (sol boşluk).
   Dış sarıcı kart YOK — girinti hiyerarşiyi taşır. */
/* İç gap = öğeler arası boşluk. Başlık↔ilk öğe boşluğu ise .mcat__head'in alt
   marjından gelir (yalnızca AÇIKKEN) — böylece KAPALI kategoride hiç boşluk kalmaz
   ve iki kapalı kategori arası tam --mrow-gap olur. */
.mcat__inner { display: flex; flex-direction: column; gap: var(--mrow-gap); padding: 0 0 0 24px; }
.mcat > .mcat__head { margin-bottom: 0; }
.mcat:not(.is-collapsed) > .mcat__head { margin-bottom: var(--mrow-gap); }
.mtree.anim-ready .mcat > .mcat__head { transition: border-color .15s, box-shadow .15s, background .14s, margin-bottom .28s ease; }
/* Birleşik akış: ürün (.mrow) + alt kategori (.mcat) tek kapta, karışık sıralı. */
.mcat__flow { display: flex; flex-direction: column; gap: var(--mrow-gap); }
/* Boş kap yer kaplamasın (:empty PHP whitespace'inde güvenilmez → .is-empty PHP'den). */
.mcat__flow.is-empty, .mcat__flow:empty { display: none; }
/* Sürüklerken boş kap görünmez ama hedeflenebilir (büyük mavi kutu YOK — doğal). */
.mtree.dragging .mcat__flow.is-empty { display: block; min-height: 18px; }

/* Alt kategori = üst kategori/ürün ile aynı boyut (genel .mcat__head kuralından gelir).
   Girinti .mcat__inner'dan; tek fark ad font'u biraz küçük. */
.mcat--sub .mcat__name { font-size: 14px; }

.mcat--uncat .mcat__head { cursor: pointer; }

/* "+ Ekle" kartı: diğer öğelerle tutarlı — kendi kart satırı (çerçeve + zemin),
   içindeki butonlar kartın içinde yaşayan hafif tetikleyiciler. */
.mcat__add {
    display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface);
    transition: border-color .15s, background .14s;
}
.mcat__add:hover { border-color: var(--border-strong); }
.madd {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: var(--r-md);
    border: 0; background: none;
    color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer;
    transition: color .15s, background .15s;
}
.madd:hover { color: var(--brand-600); background: var(--brand-50); }
.madd [data-lucide] { width: 16px; height: 16px; }

/* ============ Ürün satırı (.mrow) — ayrı kart ============ */
.mrow {
    display: flex; align-items: center; gap: 12px;
    min-height: 62px; padding: 9px 12px;
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface); cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .14s;
}
.mrow:hover { border-color: var(--brand-200); box-shadow: var(--shadow-sm); }
.mrow.is-hidden { display: none; }
.mrow.is-checked { border-color: var(--brand-300); background: var(--brand-50); }
.mrow__grip { color: var(--gray-300); cursor: grab; flex-shrink: 0; transition: color .15s; }
.mrow:hover .mrow__grip { color: var(--text-subtle); }
.mrow__grip:active { cursor: grabbing; }
.mrow__check { display: flex; flex-shrink: 0; }
/* Checkbox teması ortak .check bileşeninden gelir (native görünüm YOK). */
.mrow__thumb {
    width: 40px; height: 40px; border-radius: var(--r-md); flex-shrink: 0;
    overflow: hidden; background: var(--gray-100); border: 1px solid var(--border);
    display: grid; place-items: center; color: var(--gray-400);
    padding: 0; cursor: pointer; transition: border-color .15s;
}
.mrow__thumb:hover { border-color: var(--brand-300); }
.mrow__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mrow__thumb { position: relative; }

/* BÜYÜTME DÜĞMESİ — küçük resmin kendisi (ortak sınıf).
   Ayrı bir ikon koymuyoruz: 40px'lik bir kutuda ikon görselin üstünü
   kapatırdı; üstüne gelince beliren büyüteç yeterli işaret.

   Sınıf `mrow__zoom` iken yalnızca ürün listesine aitmiş gibi duruyordu ve
   kampanya listesi ile kurtarma kutusuna aynı davranış lazım olunca kopyalanmak
   üzereydi. Tek ad, tek davranış: kapsayıcının konumlanmış ve sabit ölçülü
   olması yeterli (aşağıdaki üç kutu da öyle).

   `inset: 0` ile kapsayıcıyı kaplıyor — bu yüzden ölçüyü hep kapsayıcı
   veriyor, düğme değil. */
.zoombtn {
    position: absolute; inset: 0; padding: 0; border: 0; background: none;
    cursor: zoom-in; display: block;
}
.zoombtn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zoombtn::after {
    content: ''; position: absolute; inset: 0; opacity: 0;
    background: rgba(15, 23, 42, .45) center / 16px 16px no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E");
    transition: opacity .12s ease;
}
.zoombtn:hover::after,
.zoombtn:focus-visible::after { opacity: 1; }

/* --- Görsel büyütme perdesi --- */
.lbox {
    position: fixed; inset: 0; z-index: 90; display: none;
    align-items: center; justify-content: center; padding: 32px;
    background: rgba(9, 14, 30, .82);
}
.lbox.open { display: flex; }
.lbox__fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; }
/* Görsel EKRANA sığar: büyük bir fotoğraf perdeyi taşırıp kapatma düğmesini
   ekran dışına itiyordu. */
.lbox__img {
    max-width: min(920px, 100%); max-height: calc(100vh - 128px);
    width: auto; height: auto; display: block;
    border-radius: var(--r-lg); background: var(--surface);
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .6);
}
.lbox__cap { color: rgba(255, 255, 255, .82); font-size: 13px; text-align: center; }
.lbox__x {
    position: absolute; top: 16px; inset-inline-end: 16px;
    display: grid; place-items: center; width: 40px; height: 40px;
    border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(255, 255, 255, .14); color: #fff;
    transition: background .12s ease;
}
.lbox__x:hover { background: rgba(255, 255, 255, .26); }
/* (40 − 18) çift → ikon yarım piksele düşmüyor. */
.lbox__x [data-lucide] { width: 18px; height: 18px; }
/* BEF AI: görselsiz üründe placeholder üzerinde üret butonu */
.mrow__aigen {
    position: absolute; inset: 0; z-index: 1;
    display: grid; place-items: center; width: 100%; height: 100%;
    border: none; background: transparent; color: var(--brand-600); cursor: pointer;
    border-radius: inherit; transition: background .15s;
}
.mrow__aigen:hover { background: var(--brand-50); }
.mrow__aigen i, .mrow__aigen .spin { width: 18px; height: 18px; }
/* BEF AI: AI ile üretilmiş görselde küçük rozet */
/* "AI üretimi" işareti — YALNIZCA panelde (public menüye taşınmaz).
   Nötr/yarı saydam: marka mavisi çip 40px thumbnail'de görselin önüne geçiyordu
   ve ürünlerin çoğu AI olunca liste rozet gürültüsüne dönüyordu. Bilgi taşır,
   dikkat çalmaz. */
.mrow__aibadge {
    /* Köşeden 3px içeride: thumbnail'in köşe eğrisiyle çakışmasın.
       Pill için yatay dolgu dikeyin ~2,5 katı — kareye yakın bir çipe tam
       yuvarlaklık verilirse hap değil yumru görünür. */
    position: absolute; top: 3px; left: 3px; z-index: 2;
    font-size: 8px; font-weight: 700; line-height: 1; letter-spacing: .04em;
    padding: 2.5px 6px; border-radius: 999px;
    background: rgba(15, 23, 42, .58); color: rgba(255, 255, 255, .95);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    transition: opacity .12s ease;
}
/* ÜSTÜNE GELİNCE ÇEKİLİR. 40px'lik kutuda rozet ile büyüteç üst üste biniyor;
   ikisi birden okunmuyordu. Rozet bilgi ("bu görsel AI ile üretildi"),
   büyüteç eylem — imleç oradayken eylem öncelikli. Bilgi duruyor, yalnızca o
   an görünmüyor. */
.mrow__thumb:hover .mrow__aibadge,
.mcat__cover:hover .mrow__aibadge { opacity: 0; }
/* --- Varyasyon fiyatları: satır üstünde açılır düzenleyici ---
   `position: fixed` — listenin kaydırma ve taşma kutularına takılmasın
   (renk seçicide aynı tuzağa düşülmüştü). Konumu JS hesaplıyor. */
.varprice {
    position: fixed; z-index: 60;
    min-width: 244px; padding: 12px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
    /* AÇILIŞ/KAPANIŞ ANİMASYONU. `display` geçişlenemiyor; kutu her zaman
       yerleşimde duruyor, görünürlüğü opaklık + ölçekle veriliyor. Kapalıyken
       `pointer-events: none` — görünmez ama tıklamayı yiyen bir katman
       kalmasın. Süre JS'teki VP_SURE ile aynı (140ms): kapanış bitmeden öğe
       silinirse animasyon yarıda kesilir. */
    opacity: 0; transform: translateY(-6px) scale(.97);
    transform-origin: top right; pointer-events: none;
    transition: opacity .14s cubic-bezier(.4,0,.2,1), transform .14s cubic-bezier(.4,0,.2,1);
}
/* Yukarı açılan kutu AŞAĞIDAN gelir: hareket her zaman tetikten dışarı doğru. */
.varprice--up { transform: translateY(6px) scale(.97); transform-origin: bottom right; }
.varprice.open { opacity: 1; transform: none; pointer-events: auto; }
.varprice__head { font-size: 12px; font-weight: 650; color: var(--text-muted); margin-bottom: 9px; }
.varprice__list { display: flex; flex-direction: column; gap: 7px; }
.varprice__row { display: flex; align-items: center; gap: 10px; }
/* Ad esner, alan sabit: farklı uzunluktaki adlarda girdiler aynı hizada kalsın. */
.varprice__name {
    flex: 1; min-width: 0; font-size: 13px; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.varprice__field { position: relative; flex: none; }
/* Sağ dolgu İKİ SINIFLA: `.input--sm` dosyada daha sonra geliyor ve `padding`
   KISAYOLU tek sınıflı kuralı eziyordu — para birimi simgesi son rakamın
   üstüne biniyordu (ölçüldü: 8px çakışma). */
.varprice .varprice__input { width: 96px; padding-inline-end: 24px; text-align: end; font-variant-numeric: tabular-nums; }
.varprice__cur {
    position: absolute; inset-inline-end: 9px; top: 50%; transform: translateY(-50%);
    font-size: 12px; color: var(--text-subtle); pointer-events: none;
}
.varprice__foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* Aralık artık bir düğme: tıklanabilir olduğu belli olsun. */
.mrow__price.is-range { cursor: pointer; border: 1px solid transparent; background: none; }
.mrow__price.is-range:hover { border-color: var(--border-strong); background: var(--surface); }

/* --- Üst şerit: hesap alanı ---
   Kredi kutusu ve profil satırı kenar çubuğunun dibindeydi; ikisi de "hangi
   sayfadayım"dan bağımsız, hesaba ait şeyler. Üst şeride taşındılar. */
.topbar__end { display: flex; align-items: center; gap: 12px; min-width: 0; }

/* KREDİ PİLİ. Kenar çubuğundaki dolu renkli kart 56px'lik şeride sığmıyor ve
   sayfa başlığını bastırırdı: burada marka tonunda ama düz bir pil. Bakiye ve
   "ekle" yolu duruyor, hacmi durmuyor. */
.credit-pill {
    display: inline-flex; align-items: center; gap: 8px;
    height: 34px; padding: 0 4px 0 11px;
    border-radius: var(--r-full); text-decoration: none;
    background: var(--brand-50); color: var(--brand-700);
    border: 1px solid var(--brand-100);
    transition: background .12s ease, border-color .12s ease;
}
.credit-pill:hover { background: var(--brand-100); border-color: var(--brand-300); }
/* (34 − 16) = 18 → tek tarafa 9px: ikon yarım piksele düşmüyor. */
.credit-pill__ico { width: 16px; height: 16px; flex: none; }
/* SAYI DİKEYDE ORTALI — mürekkep olarak, kutu olarak değil.
   Rakamların ALTINDA inen harf boşluğu var, üstünde yok: satır kutusu
   ortalanınca rakamlar optik olarak yukarıda kalıyor. Piksel ölçümü: pil
   merkezine göre −0,75px, yanındaki daireler −0,06px.
   `padding-top: 1px` kutuyu 1px büyütüyor, esnek ortalama onu yeniden
   ortalayınca içerik yarım piksel aşağı iniyor → sapma 0,19px'e düşüyor
   (yarım pikselin altı, 1x'te ayırt edilemez). Kesirli `top` yerine tam
   sayı dolgu: alt piksel konumlandırma bulanıklık üretiyor. */
.credit-pill__val {
    font-size: 13.5px; line-height: 1; font-weight: 700; letter-spacing: -0.01em;
    padding-top: 1px;
}
.credit-pill__add {
    display: grid; place-items: center; width: 26px; height: 26px; flex: none;
    border-radius: 50%; background: var(--brand-600); color: #fff;
}
.credit-pill__add [data-lucide] { width: 14px; height: 14px; }
/* Bakiye bittiğinde uyarı tonu — menu-admin.js `is-empty` sınıfını yönetiyor. */
.credit-pill.is-empty { background: var(--warning-bg); color: var(--warning-fg); border-color: #fcd9a4; }
.credit-pill.is-empty .credit-pill__add { background: var(--warning); }

/* PROFİL = AÇILIR MENÜ. Blok doğrudan ayarları açıyordu ve hep aynı bölüme
   düşüyordu; menü hedefi baştan seçtiriyor. Yapı `.usermenu` (yöneticideki
   menüyle aynı motor), buradaki sınıf yalnızca üst şerit ölçüleri için. */
.topuser .usermenu__btn { border-radius: var(--r-full); }

/* Dar ekranda ad/abonelik düşer: avatar + ok kalır, başlığa yer açılır. */
@media (max-width: 900px) {
    .topuser .usermenu__id { display: none; }
    .topbar__end { gap: 8px; }
}
@media (max-width: 560px) {
    .credit-pill { padding-inline-start: 8px; gap: 6px; }
    .credit-pill__ico { display: none; }
}
/* "Hareketi azalt": YER DEĞİŞTİRME kapatılır (kart kalkması, ok kayması),
   gölge geçişi korunur — renk/gölge değişimi hareket değildir. */
/* BEF AI: abonelik plan kartında kredi satırı */
.plan-card__credits {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 14px; padding: 9px 12px; border-radius: var(--r-md);
    background: var(--brand-50); color: var(--brand-800);
    font-size: 13px; font-weight: 600;
}
.plan-card__credits i { width: 16px; height: 16px; flex: none; color: var(--brand-600); }
.plan-card__credits b { font-size: 15px; font-weight: 700; color: var(--brand-700); }

/* BEF Kredi paket kartları (aboneliğim) */
.credit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.credit-card {
    position: relative; display: flex; flex-direction: column; gap: 6px;
    padding: 20px; border-radius: var(--r-lg);
    background: var(--surface); border: 1px solid var(--border);
    transition: border-color .15s, box-shadow .15s;
}
.credit-card:hover { border-color: var(--brand-300); box-shadow: var(--shadow-sm); }
.credit-card--featured { border-color: var(--brand-400); box-shadow: 0 0 0 3px var(--brand-50); }
.credit-card__ribbon {
    position: absolute; top: -10px; inset-inline-start: 20px;
    background: var(--brand-600); color: #fff; border-radius: 999px;
    padding: 3px 10px; font-size: 11px; font-weight: 700;
}
.credit-card__amount { font-size: 15px; font-weight: 600; color: var(--text-subtle); }
/* Sayılar: tasarım sistemiyle aynı ağırlık (700) + sıkı aralık; 800 fazla blok duruyordu */
.credit-card__amount b { font-size: 31px; font-weight: 700; color: var(--text); letter-spacing: -0.025em; line-height: 1.1; }
.credit-card__price { font-size: 21px; font-weight: 700; color: var(--brand-700); letter-spacing: -0.02em; }
.credit-card__unit { font-size: 12px; color: var(--text-subtle); }
.credit-card__meta {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin: 6px 0 14px; padding-top: 12px; border-top: 1px solid var(--border);
    font-size: 12.5px; font-weight: 600; color: var(--text-subtle);
}
.credit-card__meta i { width: 15px; height: 15px; color: var(--brand-600); }
.credit-card form { margin-top: auto; }

/* İkonlu ipucu satırı (ör. "ödeme simüle ediliyor" notu) */
.field__hint > [data-lucide] { width: 14px; height: 14px; vertical-align: -2px; margin-inline-end: 2px; }

/* BEKLEYEN İŞ ipucu (onaylanmamış e-posta değişikliği gibi): düz gri ipucu
   satırı arasında kaybolurdu — kullanıcı bunu görmezse değişikliği yaptığını
   sanıp eski adresle kalıyor. Uyarı değil bilgi: kırmızı değil kehribar. */
.field__hint--warn {
    display: flex; align-items: flex-start; gap: 7px;
    margin-top: 7px; padding: 9px 11px; border-radius: var(--r-sm);
    background: var(--warning-bg, #fffbeb); border: 1px solid var(--warning-border, #fde68a);
    color: var(--warning-fg, #92400e); line-height: 1.5;
}
.field__hint--warn > [data-lucide] { flex: none; margin: 2px 0 0; }

/* --- Ödeme adımı (checkout) --- */
.checkout { max-width: 560px; margin-inline: auto; }
.checkout .alert { align-items: flex-start; }
.checkout .alert p { margin: 3px 0 0; opacity: .92; }
.checkout__line {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.checkout__name { font-size: 15px; font-weight: 700; color: var(--text); }
.checkout__detail { margin-top: 3px; font-size: 12.5px; color: var(--text-subtle); }
.checkout__amount { font-size: 15px; font-weight: 600; color: var(--text-subtle); white-space: nowrap; }
.checkout__total {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 16px 0; font-size: 13.5px; font-weight: 600; color: var(--text-subtle);
}
.checkout__total b { font-size: 26px; font-weight: 700; color: var(--text); letter-spacing: -0.025em; }
.checkout__sim { padding-top: 14px; border-top: 1px dashed var(--border); }
.checkout__sim-title { font-size: 13px; font-weight: 600; color: var(--text-subtle); margin-bottom: 10px; }
.checkout__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
@media (max-width: 520px) { .checkout__acts { grid-template-columns: 1fr; } }

/* Abonelik kartında paket içeriği (animasyonlu açılır — grid 0fr↔1fr) */
.pkg-feats { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; }
.pkg-feats__toggle {
    /* width:100% VERME — display:flex zaten blok seviyesi, genişliği kendi doldurur.
       width:100% + negatif yan marj = öğe sola kayar ama genişlemez → sağda boşluk kalır. */
    display: flex; align-items: center; gap: 8px;
    /* Negatif margin: tıklama/hover alanı genişler ama hizalama bozulmaz */
    padding: 8px 10px; margin: -8px -10px 0;
    border: none; background: none; cursor: pointer; text-align: start;
    border-radius: var(--r-md);
    font-size: 13px; font-weight: 600; color: var(--brand-700);
    transition: background .15s;
}
.pkg-feats__toggle:hover { background: var(--brand-50); }
.pkg-feats__toggle > i { width: 16px; height: 16px; flex: none; }
/* Chevron'u daire içine al → tıklanabilir olduğu net görünsün */
.pkg-feats__chev {
    margin-inline-start: auto; flex: none;
    display: grid; place-items: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--brand-50); color: var(--brand-600);
    transition: transform .3s ease, background .15s;
}
.pkg-feats__chev i { width: 15px; height: 15px; }
.pkg-feats__toggle:hover .pkg-feats__chev { background: var(--brand-100); }
.pkg-feats.is-open .pkg-feats__chev { transform: rotate(180deg); }
.pkg-feats__body {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .32s cubic-bezier(.4, 0, .2, 1);
}
.pkg-feats.is-open .pkg-feats__body { grid-template-rows: 1fr; }
.pkg-feats__body > div { overflow: hidden; }
.pkg-feats__list {
    list-style: none; margin: 0; padding: 14px 0 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 16px;
}
.pkg-feats__list li { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-muted); }
.pkg-feats__list li i { width: 15px; height: 15px; color: var(--success, #16a34a); flex: none; }

/* --peek: katlanmışken TAMAMEN gizleme — ilk satırları göster, alta doğru
   bulanıklaştırıp erit. Kapalı kutu "boş bir düğme" gibi durmuyor, altında
   içerik olduğu görülüyor.

   Yükseklik burada 0fr↔1fr ızgara numarasıyla DEĞİL max-height ile
   animasyonlanıyor: sabit bir önizleme yüksekliği fr ölçeklemesiyle
   birleştiğinde (0fr + min-height) animasyonun ilk üçte biri ölü zamana
   dönüşüyordu — fr'in hesapladığı yükseklik önizlemeyi geçene kadar hiçbir
   şey kıpırdamıyor. --full'ü JS her tıklamada ölçüp yazıyor; ölçemezse
   200vh yedeği devreye girer ve liste yine tam açılır. */
.pkg-feats--peek { --peek: 92px; }
.pkg-feats--peek .pkg-feats__body { display: block; }
.pkg-feats--peek .pkg-feats__body > div {
    position: relative;
    max-height: var(--peek);
    transition: max-height .36s cubic-bezier(.4, 0, .2, 1);
}
.pkg-feats--peek.is-open .pkg-feats__body > div { max-height: var(--full, 200vh); }
/* Erime katmanı alt kenara yapışır; kutu büyürken onunla iner ve söner.
   Maske ŞART: maskesiz bulanıklık üst kenarında keskin bir çizgi bırakıyor. */
.pkg-feats--peek .pkg-feats__body > div::after {
    content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 40px;
    pointer-events: none;
    background: var(--surface);
    -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 78%);
    mask-image: linear-gradient(to bottom, transparent, #000 78%);
    transition: opacity .18s ease;
}
.pkg-feats--peek.is-open .pkg-feats__body > div::after { opacity: 0; }
/* Ad + pill'ler dikey: pill'ler (Öne çıkan vb.) ADIN ÜSTÜNDE, aralarında nefes payı. */
.mrow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.mrow__name {
    display: flex; align-items: center; gap: 7px;
    font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.2;
    background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.mrow__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success-fg); flex-shrink: 0; }
.mrow.is-off .mrow__dot { background: var(--danger-fg); }
.mrow__pills { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.mrow__pills:empty { display: none; }
/* Adın üstündeki pill'ler daha küçük/ince — başlığın önüne geçmesin. */
.mrow__pills .tag-pill { font-size: 10px; padding: 2px 7px; gap: 3px; line-height: 1; }
.mrow__pills .tag-pill .ic-14 { width: 11px; height: 11px; }
/* İkon+metin dikey ortalama garantisi (KESİN kural): SVG'yi blok yap, flex center tam çalışsın. */
.mrow__pills .tag-pill [data-lucide], .mrow__pills .tag-pill svg { display: block; }

/* Fiyat: inline düzenlenebilir alan veya varyasyon aralığı */
.mrow__price { flex-shrink: 0; }
.mrow__price--edit { position: relative; display: inline-flex; align-items: center; }
.mrow__price-input {
    width: 116px; height: 36px; padding: 0 28px 0 12px;
    border: 1px solid var(--border-strong); border-radius: var(--r-md);
    background: var(--surface); color: var(--text);
    font-size: 14px; font-weight: 700; text-align: right;
    font-variant-numeric: tabular-nums;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.mrow__price-input:hover { border-color: var(--brand-300); }
.mrow__price-input:focus { outline: 0; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
.mrow__cur { position: absolute; right: 11px; color: var(--text-subtle); font-size: 13px; font-weight: 600; pointer-events: none; }
.mrow__price--edit.is-saved .mrow__price-input { border-color: var(--success-fg); background: var(--success-bg); }
.mrow__price.is-range {
    display: inline-flex; align-items: center;
    height: 36px; padding: 0 12px;
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--gray-100); color: var(--text-muted);
    font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums;
    cursor: help; white-space: nowrap;
}
.mrow__switch { flex-shrink: 0; }
.mrow.is-off .mrow__thumb, .mrow.is-off .mrow__name, .mrow.is-off .mrow__price { opacity: .5; }
@media (max-width: 640px) {
    .mrow { padding-left: 16px; }
    .mcat--sub .mcat__head { padding-left: 28px; }
    .mcat--sub .mcat__flow .mrow, .mcat--sub .mcat__add { padding-left: 28px; }
    .mcat__add { padding-left: 16px; }
    .mrow__check { display: none; }
    .mrow__price-input { width: 96px; }
    .mtree__bulk { flex-direction: column; align-items: stretch; }
}

/* --- 26. Drawer (sağdan açılan panel) — yeniden kullanılabilir --- */
.drawer-backdrop {
    position: fixed; inset: 0; background: rgba(15,23,42,0.5);
    /* backdrop-filter kaldırıldı — gerekçe .modal-backdrop'ta yazılı. */
    opacity: 0; visibility: hidden; z-index: 70;
    /* `visibility` GEÇİŞ LİSTESİNDE OLMALI. Yalnızca `opacity` yazılıydı:
       kapanışta visibility anında `hidden` olup öğeyi görünmez yapıyor,
       saydamlık geçişi hiç görünmüyordu. Panel kayarak kapanırken perde
       bir anda kayboluyordu. Açılışta 0s, kapanışta 250ms gecikmeli. */
    transition: opacity 0.25s, visibility 0s linear 0.25s;
}
.drawer-backdrop.open {
    opacity: 1; visibility: visible;
    transition: opacity 0.25s, visibility 0s linear 0s;
}
.drawer {
    position: fixed; top: 0; right: 0; height: 100vh;
    width: 480px; max-width: 92vw;
    background: var(--surface); box-shadow: -12px 0 44px rgba(15,23,42,0.18);
    transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
    z-index: 71; display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer--lg { width: 700px; }
.drawer__header {
    padding: 18px 22px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0;
}
.drawer__title { font-size: 16px; font-weight: 650; }
.drawer__body { padding: 22px; overflow-y: auto; flex: 1; }
.drawer__loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 60px 20px; color: var(--text-muted); }
.drawer__loading [data-lucide] { animation: befspin 0.7s linear infinite; }
/* Drawer içindeki formun alt aksiyon çubuğu (yapışkan) */
.drawer-actions {
    position: sticky; bottom: -22px; margin: 22px -22px -22px;
    padding: 14px 22px; background: var(--surface);
    border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end;
}
/* İkincil eylem (ör. Sil) solda, ana grup sağda */
.drawer-actions--split { justify-content: space-between; align-items: center; }

/* Form içi sekmeler (ör. ürün formu) — üstte yapışkan, drawer footer'ını yansıtır.

   `top: -22px` — VE BU SÜS DEĞİL, ZORUNLU.
   Tarayıcı yapışma dikdörtgenini kaydırıcının İÇERİK kutusundan alıyor, dolgu
   kutusundan değil. Gövdenin dolgusu 22px olduğu için `top: 0` çubuğu tam 22px
   aşağıda yapıştırıyor ve o bantta kaydırılan içerik görünüyor. Ölçüldü:
   `top: 0` → çubuk gövde kenarından 22px aşağıda; `top: -22px` → tam kenarda.

   `margin-top: -22px` de gerekli ama BAŞKA BİR İŞ İÇİN: duruş hâlinde çubuğu
   gövdenin dolgusuna değil kenarına dayıyor. Sıfırlanınca sekmelerin üstünde
   22 + 13 = 35px boşluk kalıyordu.

   KURAL: `top` YAPIŞMA yerini, `margin` DURUŞ yerini belirler. Birinin
   sorununu ötekini değiştirerek çözmeye çalışmak — ki denendi — iki yeni hata
   üretiyor. Negatif boşluk yalnızca çubuk formun İLK öğesiyken doğru; üstüne
   bir şey gelince aşağıda ayrıca iptal ediliyor. */
.ptabs {
    position: sticky; top: -22px; z-index: 6; margin: -22px -22px 18px; padding: 13px 22px 0;
    background: var(--surface); border-bottom: 1px solid var(--border);
    display: flex; gap: 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.ptabs::-webkit-scrollbar { display: none; }
.ptab {
    appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
    padding: 9px 13px; font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.2;
    color: var(--text-muted); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.ptab:hover { color: var(--text); }
.ptab.is-active { color: var(--brand-600); border-bottom-color: var(--brand-600); }
.ptab [data-lucide] { width: 15px; height: 15px; }
.ptab-panel { display: none; }
.ptab-panel.is-active { display: block; }
@media (max-width: 560px) { .drawer, .drawer--lg { width: 100%; max-width: 100%; } }

/* .drawer-open: overflow kilidi JS lockScroll() ile (padding telafili); burada set edilmez. */

/* --- 27. Özel Select (temaya uyumlu açılır liste) --- */
.cselect { position: relative; }
.cselect__native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; }
.cselect__trigger {
    width: 100%; height: var(--ctrl-h); display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 0 13px; border: 1px solid var(--border-strong); border-radius: var(--r-md);
    background: var(--surface); color: var(--text); font-size: 14px; text-align: left;
    cursor: pointer; transition: var(--transition);
}
.cselect__trigger:hover { border-color: var(--gray-300); }
.cselect.open .cselect__trigger,
.cselect__trigger:focus-visible { outline: none; border-color: var(--brand-400); box-shadow: 0 0 0 3px var(--brand-100); }
.cselect--disabled .cselect__trigger { background: var(--gray-100); color: var(--text-muted); cursor: not-allowed; }
.cselect.error .cselect__trigger { border-color: var(--danger); }
.cselect__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cselect__label.is-placeholder { color: var(--text-subtle); }
.cselect__chev { width: 16px; height: 16px; color: var(--text-subtle); flex-shrink: 0; transition: transform 0.2s; }
.cselect.open .cselect__chev { transform: rotate(180deg); }

/* PANEL ARTIK KAYDIRMIYOR, İÇİNDEKİ LİSTE KAYDIRIYOR: arama kutusu panelin
   başında sabit duruyor. Panelin kendisi kaydırsaydı kullanıcı listede
   ilerledikçe arama kutusu yukarı kaçardı. */
.cselect__panel {
    position: fixed; z-index: 100;
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
    box-shadow: var(--shadow-lg); padding: 6px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.16s, transform 0.16s, visibility 0.16s;
}
.cselect__list { overflow-y: auto; min-height: 0; }

/* Arama kutusu — panelin başında, listeden ince bir çizgiyle ayrı. */
.cselect__search { position: relative; flex: none; padding: 2px 2px 7px; }
/* İKON YÜZDEYLE DEĞİL, TAM SAYIYLA. `top: 50%` kutunun ortasını alıyordu ama
   kutunun altında 7px dolgu var — yani %50, girdinin ortası değil. Hesap:
   üst dolgu 2 + (34 − 16) / 2 = 11. İkon 16px, çünkü (34 − 16) çift; tek
   sayıda bir ikon yarım piksele oturur (bkz. .twrow__dot). */
.cselect__search [data-lucide] {
    position: absolute; inset-inline-start: 12px; top: 11px;
    width: 16px; height: 16px; color: var(--text-subtle); pointer-events: none;
}
.cselect__searchin {
    width: 100%; height: 34px; padding: 0 10px 0 34px;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface-alt); color: var(--text);
    font: inherit; font-size: 13.5px; line-height: 34px;
}
.cselect__searchin:focus { outline: none; border-color: var(--brand-400); background: var(--surface); }
.cselect__searchin::placeholder { color: var(--text-subtle); }
.cselect__empty { flex: none; padding: 12px 11px; font-size: 13px; color: var(--text-subtle); }
.cselect__panel.up { transform: translateY(6px); }
.cselect__panel.open { opacity: 1; visibility: visible; transform: translateY(0); }
.cselect__group { padding: 8px 11px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-subtle); }
.cselect__group:first-child { padding-top: 2px; }
.cselect__option {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 9px 11px; border-radius: var(--r-sm); font-size: 13.5px;
    color: var(--gray-700); cursor: pointer; transition: background 0.1s;
}
.cselect__option.active { background: var(--gray-100); }
.cselect__option.selected { color: var(--brand-700); font-weight: 600; }
.cselect__option.is-disabled { opacity: 0.45; cursor: not-allowed; }
.cselect__optlabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cselect__check { width: 16px; height: 16px; color: var(--brand-600); opacity: 0; flex-shrink: 0; }
.cselect__option.selected .cselect__check { opacity: 1; }

/* --- Uluslararası telefon girişi (phone-input.js) --- */
.phoneinput { position: relative; display: flex; align-items: stretch; }
.phoneinput__flag {
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
    padding: 0 10px; border: 1px solid var(--border); border-right: 0;
    border-radius: var(--r-md) 0 0 var(--r-md); background: var(--surface-2);
    font: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer;
    transition: background 0.12s;
}
.phoneinput__flag:hover { background: var(--gray-100); }
.phoneinput__iso { font-weight: 700; letter-spacing: 0.02em; }
.phoneinput__dial { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.phoneinput__chev { width: 15px; height: 15px; color: var(--text-subtle); }
.phoneinput__input { border-radius: 0 var(--r-md) var(--r-md) 0; flex: 1; min-width: 0; }
.phoneinput:focus-within .phoneinput__flag { border-color: var(--brand-400); }
/* fixed, absolute DEĞİL: panel body'ye taşındı (bkz. phone-input.js).
   Absolute + wrap içindeyken kaydırılabilir kapsayıcının (modal gövdesi)
   taşma alanını büyütüyor, ülke listesi açılınca modal kayıyordu.
   z-index modalın (60) ve çekmecenin (71) üstünde olmalı. */
.phoneinput__panel {
    position: fixed; z-index: 120; width: 320px; max-width: 92vw;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
    box-shadow: var(--shadow-lg); padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
.phoneinput__search { position: relative; display: flex; align-items: center; }
.phoneinput__search [data-lucide] { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--text-subtle); pointer-events: none; }
.phoneinput__searchbox {
    width: 100%; padding: 9px 12px 9px 34px; border: 1px solid var(--border); border-radius: var(--r-sm);
    font: inherit; font-size: 13.5px; background: var(--surface-2); color: var(--text);
}
.phoneinput__searchbox:focus { outline: none; border-color: var(--brand-400); background: var(--surface); }
/* Öğeler arası ince boşluk → hover/selected zeminleri birbirine yapışmaz (KESİN kural) */
.phoneinput__list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.phoneinput__opt {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 9px 10px; border: 0; border-radius: var(--r-sm); background: none; font: inherit;
    font-size: 13.5px; color: var(--text); cursor: pointer; transition: background 0.1s;
}
.phoneinput__opt:hover { background: var(--gray-100); }
/* selected: marka rengi zemin + belirgin sol vurgu (hover'dan net ayrı okunur) */
.phoneinput__opt.is-sel { background: var(--brand-50); color: var(--brand-700); font-weight: 600; box-shadow: inset 2px 0 0 var(--brand-500); }
.phoneinput__opt.is-sel:hover { background: var(--brand-100); }
.phoneinput__opt-iso { flex-shrink: 0; width: 30px; font-weight: 700; font-size: 12px; color: var(--brand-700); }
.phoneinput__opt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phoneinput__opt-dial { flex-shrink: 0; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.phoneinput__empty { padding: 18px; text-align: center; font-size: 13px; color: var(--text-subtle); }

/* --- Kaydetme çubuğu (uzun formlar) ---------------------------------------
   SORUN: "Menüm" gibi uzun, sekmeli formlarda tek "Kaydet" butonu sayfa başlığında
   duruyor. Kullanıcı aşağı indikçe buton ekrandan çıkıyor ve kaydetmenin nerede
   olduğu kayboluyor — sayfa başına dönmeyi bilmesi gerekiyor.

   ÇÖZÜM: değişiklik yapılınca alttan beliren sabit çubuk. Sürekli değil YALNIZCA
   kirliyken görünür; böylece hem kaydet her an erişilebilir olur hem de
   "kaydedilmemiş değişiklik var" bilgisi verilir (önceden hiç yoktu).

   Konum: kenar çubuğunu örtmemek için soldan --sidebar-w kadar içeride; mobilde
   (<=900px) kenar çubuğu zaten katman olduğu için 0'a döner. */
.savebar {
    position: fixed; z-index: 40;
    left: var(--sidebar-w); right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: flex-end; gap: 14px;
    padding: 12px 28px calc(12px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 20px rgba(15, 23, 42, .07);
    transform: translateY(100%);
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
.savebar.is-on { transform: translateY(0); }
.savebar__note {
    margin-right: auto;
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 500; color: var(--text-muted); line-height: 1.2;
}
.savebar__note [data-lucide] { width: 16px; height: 16px; color: var(--warning, #d97706); }
/* Çubuk sayfanın son içeriğini örtmesin */
.content:has(.savebar) { padding-bottom: 92px; }
@media (max-width: 900px) {
    .savebar { left: 0; padding-inline: 16px; }
    .savebar__note { font-size: 12px; }
}

/* --- Marka logosu (BEF QR'ın kendi logosu) ---
   Yazı markası: 129.1 x 27.8 (oran ~4.64). Yükseklik sabit, genişlik orandan gelir. */
.brand-logo { height: 26px; width: auto; display: block; }
/* Faturada logo biraz daha büyük ve altındaki firma adından ayrık dursun. */
.invoice__logo { height: 30px; margin-bottom: 14px; }
/* Koyu zeminde (giriş sayfası sol paneli): tek renk beyaza indirge.
   brightness(0) önce her şeyi siyaha çeker, invert(1) beyaza çevirir — SVG'nin
   iç renklerini bilmeye gerek kalmaz. */
.brand-logo--onDark { filter: brightness(0) invert(1); height: 30px; }

/* ==========================================================================
   İSTASYONLAR (kurulum ekranı)
   ========================================================================== */

/* --- Hazırlık noktaları listesi ---
   Kart ızgarası DEĞİL liste: tipik işletmede 1–3 istasyon var ve geniş ekranda
   tek kart kocaman boşlukta yalnız kalıyordu. Liste 1'de de 12'de de dengeli. */
/* Dış dolgu YOK: satırların kendi dolgusu (10px 22px) zaten var. 6px'lik bir
   dolgu vardı ve varsayılan istasyonun renkli zemini ile kart başlığının çizgisi
   arasına beyaz bir şerit sokuyordu — renk satırın üstünden kopuk duruyordu. */
.st-panel .st-list { padding: 0; }

.st-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 22px;
    border-bottom: 1px solid var(--border);
}
.st-item:last-of-type { border-bottom: 0; }
.st-item.is-default { background: linear-gradient(90deg, var(--brand-50), transparent 55%); }

.st-item__name { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; max-width: 340px; }
.st-item__name input {
    flex: 1; min-width: 0;
    font-size: 15px; font-weight: 650; color: var(--text);
    border: 1px solid transparent; background: transparent;
    border-radius: var(--r-sm); padding: 5px 8px;
    font-family: inherit;
}
/* Düzenlenebilirlik ancak temas edilince belli olur — her satırda duran input
   çerçevesi listeyi form tarlasına çevirirdi. */
.st-item__name input:hover { border-color: var(--border); background: var(--surface-alt); }
.st-item__name input:focus { border-color: var(--brand-400); background: var(--surface); outline: none; }
/* Kaydet tuşu yalnızca odakta: her satırda duran onay ikonu "kaydedilmemiş
   değişiklik var" yanılgısı yaratıyordu. */
.st-item__name .btn { opacity: 0; pointer-events: none; transition: opacity .12s ease; }
.st-item__name:focus-within .btn { opacity: 1; pointer-events: auto; }

.st-item__badge {
    flex-shrink: 0;
    font-size: 11px; font-weight: 650;
    padding: 3px 9px; border-radius: var(--r-full);
    background: var(--brand-100); color: var(--brand-700);
}

.st-item__count { flex-shrink: 0; font-size: 13px; color: var(--text-muted); }
.st-item__count .num { font-weight: 650; color: var(--text); margin-right: 2px; }

.st-item__act { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0; }

/* --- Ekleme satırı ---
   Listenin İÇİNDE: ayrı kart olduğunda "Bar" yazmak için 1400px'lik bir input
   tek başına duruyordu. */
.st-add {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 22px;
    border-top: 1px dashed var(--border-strong);
}
.st-add__ic { width: 16px; height: 16px; color: var(--text-subtle); flex-shrink: 0; }
.st-add .input { flex: 1; min-width: 0; max-width: 320px; }
/* Buton yüksekliği input'a eşitlenir: .btn dolgudan boy alıyor (~40px),
   .input sabit --ctrl-h (42px) — yan yana durunca 2px'lik fark görünüyor. */
.st-add .btn { height: var(--ctrl-h); }

.st-list__empty {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 22px; color: var(--text-muted); font-size: 14px;
}
.st-list__empty i { width: 20px; height: 20px; flex-shrink: 0; color: var(--gray-400); }

/* --- Yönlendirme --- */
.st-hint { font-size: 13px; color: var(--text-muted); margin: 0 0 14px; }

/* TEK özet uyarısı. Satır başına rozet denendi ve başarısız oldu: hiçbir şey
   etiketlenmemişken 14 satırın 14'ü de uyarı rengine dönüp uyarıyı anlamsız
   kıldı. Bir tane olunca gerçekten okunuyor. */
.st-note {
    /* flex-start: metin dar ekranda sarıyor, center ikonu satırların arasına alır */
    display: flex; align-items: flex-start; gap: 9px;
    padding: 10px 13px; margin-bottom: 14px;
    border-radius: var(--r-md);
    background: var(--warning-bg); color: var(--warning-fg);
    font-size: 13.5px; line-height: 1.4;
}
.st-note i { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.st-note b { font-weight: 700; }

/* IZGARA — sütun akışı (column-width) DENENDİ VE GERİ ALINDI.
   İki sebeple karıştırıyordu:
   · Okuma sırası ters: sütun akışında içerik yukarıdan aşağı gidip yandaki
     sütuna atlıyor, oysa göz tabloyu soldan sağa satır satır tarıyor. Yan yana
     düşen üç kök birbiriyle ilgisiz görünüyordu.
   · Bloklar bölünmüyordu ama GÖRÜNMÜYORDU da: bir kök, üstündeki alt
     kategoriyle aynı hizada durunca kardeşi sanılıyordu.
   Izgara okuma sırasını düzeltir; kutular da grubu gözle görünür kılar. */
.st-route {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 14px;
    /* Kısa gruplar uzun olanın boyuna gerilmesin. */
    align-items: start;
}

/* Kök + alt dalları TEK GÖRSEL BİRİM. Kutu olmadan hiyerarşi yalnızca 18px'lik
   girintiye kalıyordu ve yan yana sütunlarda o girinti okunmuyordu. */
.st-group {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 2px 14px;
}

.st-row {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}
.st-row:last-child { border-bottom: 0; }

/* KÖK satırı grubun başlığıdır — daha ağır. Alt satırlar ona bağlı olduğunu
   ağırlık farkından da anlıyor, yalnızca girintiye kalmıyor. */
.st-row:not(.st-row--child) .st-row__name { font-weight: 600; }

/* Alt kategori girintisi + ağaç çizgisi: miras üstten aktığı için hangi
   kategorinin hangisinin altında olduğu görünmeden "üstten" etiketi hangi
   üstü kastettiğini söyleyemez. */
.st-row--child .st-row__label { padding-left: 20px; position: relative; }
.st-row--child .st-row__label::before {
    content: ""; position: absolute; left: 4px; top: 50%;
    width: 9px; height: 1px; background: var(--border-strong);
}

.st-row__label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.st-row__name { font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sessiz etiket, renkli rozet DEĞİL — yalnızca mirasla gelenlerde basılıyor.
   Etiketlide select zaten istasyon adını, varsayılanda "Otomatik → X" yazıyor. */
.st-row__via { flex-shrink: 0; font-size: 11.5px; color: var(--text-subtle); }

/* Kutu içinde daha dar: 200px, 330px'lik bir grupta ada yer bırakmıyordu. */
.st-row__sel { flex-shrink: 0; width: 168px; }
.st-row .cselect { flex-shrink: 0; width: 168px; }

[data-routing].is-saving { opacity: .55; pointer-events: none; transition: opacity .1s ease; }

@media (max-width: 640px) {
    .st-item { flex-wrap: wrap; gap: 8px 10px; }
    .st-item__name { max-width: none; flex-basis: 100%; }
    .st-item__act { margin-left: 0; }
    .st-route { grid-template-columns: 1fr; }
    .st-row__sel, .st-row .cselect { width: 150px; }
}

/* --- Sipariş kartında istasyon ilerlemesi --- */
.order-stations { display: flex; flex-wrap: wrap; gap: 5px; }

.ostat {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11.5px; font-weight: 600;
    padding: 3px 8px; border-radius: var(--r-full);
    border: 1px solid transparent;
    white-space: nowrap;
}
.ostat i { flex-shrink: 0; }

/* Üç durum GÖRSEL OLARAK sıralı okunur: soluk → sıcak → yeşil.
   Yoğun serviste kimse etiketi okumaz, renk sırasını tarar. */
.ostat--pending   { background: var(--neutral-bg); color: var(--neutral-fg); border-color: var(--border); }
.ostat--preparing { background: var(--warning-bg); color: var(--warning-fg); border-color: #fcd9a0; }
.ostat--ready     { background: var(--success-bg); color: var(--success-fg); border-color: #a7e8bf; }

/* --- Siparişler: istasyon tanıtım ipucu ---
   Uyarı DEĞİL bilgi: hiçbir şey bozuk değil, kullanıcı yalnızca var olduğunu
   bilmediği bir özelliği kaçırıyor. Bu yüzden sarı/kırmızı değil marka tonu. */
.ohint {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; margin-bottom: 16px;
    background: linear-gradient(100deg, var(--brand-50), var(--surface) 70%);
    border: 1px solid var(--brand-100);
    border-radius: var(--r-lg);
}
.ohint__ic {
    flex-shrink: 0;
    width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-100); color: var(--brand-700);
}
.ohint__ic [data-lucide] { width: 20px; height: 20px; }

.ohint__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ohint__body b { font-size: 14px; font-weight: 650; color: var(--text); }
.ohint__body span { font-size: 13px; color: var(--text-muted); line-height: 1.4; }

.ohint .btn { flex-shrink: 0; }
.ohint__x {
    flex-shrink: 0;
    background: none; border: 0; cursor: pointer; padding: 5px;
    color: var(--text-subtle); border-radius: var(--r-sm); line-height: 1;
    display: inline-flex;
}
.ohint__x:hover { color: var(--gray-600); background: rgba(15,23,42,.05); }
.ohint__x [data-lucide] { width: 16px; height: 16px; }

@media (max-width: 640px) {
    /* Dar ekranda metin ve buton alt alta; kapat düğmesi sağ üstte kalır. */
    .ohint { flex-wrap: wrap; position: relative; padding-right: 40px; }
    .ohint__body { flex-basis: calc(100% - 52px); }
    .ohint .btn { width: 100%; }
    .ohint__x { position: absolute; top: 10px; right: 10px; }
}

/* ==========================================================================
   YERLEŞİM PLANI (masalar + alanlar)
   ==========================================================================
   Koordinatlar YÜZDE: --tx/--ty (masa), --zx/--zy/--zw/--zh (alan).
   Piksel kullanılmıyor çünkü plan farklı ekran genişliklerinde gösteriliyor;
   piksel saklansaydı düzen dar ekranda dağılırdı. */

.plan-card { padding: 16px; }

/* --- Renk seçici ---
   Yerel pencere işletim sistemine ait: temayla ilgisiz, her platformda başka.
   Palet + serbest hex ile değiştirildi; yerel input gizli kalıp değeri taşıyor. */
/* Kontrol ALANI DOLDURUR. İçerik kadar genişleyince yanındaki metin
   girdisinden dar kalıyor ve form ızgarası kırık görünüyordu. */
.cpick { position: relative; display: flex; width: 100%; }
.cpick__native { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.cpick__trigger {
    display: flex; align-items: center; gap: 9px; width: 100%;
    height: var(--ctrl-h); padding: 0 10px;
    border: 1px solid var(--border-strong); border-radius: var(--r-md);
    background: var(--surface); font: inherit; font-size: 13.5px; cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.cpick__trigger:hover { border-color: var(--brand-400); }
.cpick.is-open .cpick__trigger { border-color: var(--brand-400); box-shadow: 0 0 0 3px var(--brand-100); }
.cpick__dot, .cpick__prev {
    width: 18px; height: 18px; border-radius: 5px; flex: none;
    background: var(--c, #2563eb); box-shadow: inset 0 0 0 1px rgba(15,23,42,.14);
}
/* Kod solda, ok sağ uçta: girdi görünümüyle aynı hizada dursun. */
.cpick__hex { flex: 1; text-align: left; font-variant-numeric: tabular-nums; letter-spacing: .01em; color: var(--text); }
/* (ctrl yüksekliği − 14) çift olsun diye 14px: ikon yarım piksele düşmesin. */
.cpick__chev { width: 14px; height: 14px; color: var(--text-subtle); }
.cpick__panel {
    /* Panel tetikten dar olmasın; sağa taşacaksa JS sağ kenara yaslıyor
       (hangi sütunda olduğunu CSS bilemez). */
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
    display: none; width: max(100%, 232px); padding: 10px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
/* Sağ kenara yaslanmış hâli. */
.cpick--sag .cpick__panel { left: auto; right: 0; }
.cpick.is-open .cpick__panel { display: block; }
.cpick__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(22px, 1fr)); gap: 6px; }
.cpick__sw {
    width: 100%; aspect-ratio: 1; padding: 0; border: 0; cursor: pointer;
    border-radius: 6px; background: var(--c);
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.14);
    transition: transform .1s ease;
}
.cpick__sw:hover { transform: scale(1.12); }
.cpick__sw.is-on { box-shadow: inset 0 0 0 1px rgba(15,23,42,.14), 0 0 0 2px var(--surface), 0 0 0 4px var(--brand-500); }
.cpick__custom { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.cpick__input { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }

/* --- Kompakt kip ---
   Tetik, pil yerine KABINI DOLDURAN bir düğme. Görünüm sayfasındaki 40px'lik
   yuvarlak "özel renk" gözü gibi, seçicinin kendi ölçüsünü dayatamayacağı
   yerler için. Panel değişmiyor. */
/* Yarıçap KABINDAN gelir: tetik ve renk noktası `inherit` ile onu izliyor.
   Zincirin ilk halkası burası — atlanırsa nokta yuvarlak kabın içinde kare
   kalıyor (`inherit` ata değerini alır, kardeşininkini değil). */
.cpick--kompakt { position: absolute; inset: 0; display: block; width: auto; border-radius: inherit; }
.cpick--kompakt .cpick__trigger {
    width: 100%; height: 100%; padding: 0; gap: 0;
    border: 0; border-radius: inherit; background: none;
    display: grid; place-items: center;
}
.cpick--kompakt .cpick__trigger:hover { border: 0; }
.cpick.cpick--kompakt.is-open .cpick__trigger { border: 0; box-shadow: none; }
/* Renk noktası kabı boyar; damlalık üstünde durur. */
.cpick--kompakt .cpick__dot {
    position: absolute; inset: 0; width: auto; height: auto;
    border-radius: inherit; box-shadow: none;
}
.cpick--kompakt .cpick__pip { position: relative; width: 17px; height: 17px; display: block; }

/* --- Saat seçici ---
   Yerel pencere işletim sistemine ait ve biçimi tarayıcı diline bağlı
   (23:00 / 11:00 PM). Yazılabilir alan + iki sütunlu liste. */
.tpick { position: relative; display: flex; align-items: center; }
.tpick__native { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.tpick__text { width: 100%; padding-right: 30px; font-variant-numeric: tabular-nums; }
.tpick__btn {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    display: grid; place-items: center;
    width: 24px; height: 24px; padding: 0;
    border: 0; background: none; border-radius: var(--r-sm);
    color: var(--text-subtle); cursor: pointer;
}
.tpick__btn:hover { background: rgba(15,23,42,.06); color: var(--text); }
/* (24 − 14) / 2 = 5 — tam sayı; ikon yarım piksele düşmesin. */
.tpick__btn [data-lucide] { width: 14px; height: 14px; }
.tpick.is-disabled { opacity: .45; pointer-events: none; }

.tpick__panel {
    position: absolute; top: calc(100% + 5px); left: 0; z-index: 40;
    display: none; grid-template-columns: 1fr 1fr; gap: 4px;
    padding: 5px; min-width: 128px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-md); box-shadow: var(--shadow-lg);
}
.tpick.is-open .tpick__panel { display: grid; }
/* Sabit yükseklik + kaydırma: 24 saat tek ekrana sığmıyor, panel sayfayı
   uzatmak yerine kendi içinde kaysın. */
.tpick__col { max-height: 168px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; }
.tpick__opt {
    padding: 5px 8px; border: 0; border-radius: var(--r-sm);
    background: none; font: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums;
    color: var(--text); cursor: pointer; text-align: center;
    transition: background .1s ease;
}
.tpick__opt:hover { background: var(--surface-alt); }
.tpick__opt.is-on { background: var(--brand-600); color: #fff; font-weight: 600; }

/* --- Toplu QR indirme paneli ---
   İki eksenli seçim: üstte logolu/logosuz sekmesi, altında biçim. Düz listede
   her kombinasyon ayrı satırdı ve sayı arttıkça menü okunmaz hâle geliyordu. */
.qrdl__panel { min-width: 232px; padding: 6px; }
.qrdl__tabs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
    padding: 3px; margin-bottom: 5px;
    background: var(--surface-alt); border-radius: var(--r-md);
}
.qrdl__tab {
    padding: 6px 8px; border: 0; border-radius: calc(var(--r-md) - 3px);
    background: none; font: inherit; font-size: 12.5px; font-weight: 600;
    color: var(--text-muted); cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.qrdl__tab:hover { color: var(--text); }
.qrdl__tab.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.qrdl__pane { display: none; }
.qrdl__pane.is-active { display: block; }
/* Biçim adı solda, kap türü sağda: göz önce "PNG/SVG"yi arıyor, "ZIP" ikincil. */
.qrdl__pane .dropdown-item span { flex: 1; }
.qrdl__pane .dropdown-item small {
    font-size: 11px; font-weight: 600; color: var(--text-subtle);
    letter-spacing: .02em;
}

/* --- Masalar sayfası: EKRANA SIĞAR ---
   Yerleşim planı mekânın kuşbakışı hâli; bir kısmını görmek için sayfayı
   kaydırmak planın bütününü görme fikrini bozuyor. Sayfa üst şerit ve içerik
   dolgusu düşülmüş yüksekliği alır, tuval kalan boşluğa göre küçülür. */
/* EKRAN YÜKSEKLİĞİNE BAĞLI DEĞİL.
   Önce `height: calc(100vh - …)` idi ve tuval kalan yüksekliğe göre
   küçülüyordu. Ölçüyü YÜKSEKLİK belirleyince genişlik ondan türüyor (16/9) ve
   sonuç ekrandan ekrana savruluyordu: alçak bir dizüstünde tuval avuç içi
   kadar kalıp iki yanında kocaman boşluk bırakıyor, yüksek bir ekranda ise
   devleşiyordu. Aynı plan her ekranda başka bir şeye benziyordu.

   Artık ölçüyü GENİŞLİK belirliyor: tuval içerik sütununu kaplar, yüksekliği
   orandan çıkar. Genişlik her ekranda öngörülebilir olduğu için tuval de öyle.
   Sayfa gerekiyorsa kaydırılır — planın tamamını görmek uğruna onu
   okunmayacak kadar küçültmekten iyidir. */
.planpage { display: flex; flex-direction: column; }
.planpage .page-head { flex: none; }
/* KART YOK. Tuval ekrana sığmak için oranını koruyarak küçülüyor, dolayısıyla
   kalan yükseklik kadar geniş olabiliyor. Bunu tam genişlikte beyaz bir kartın
   içine koyunca iki yanda kocaman boşluk kalıyor ve "neden yayılmıyor?" diye
   okunuyordu. Tuvalin kendi zemini ve köşe yuvarlaması zaten var; etrafındaki
   kutu hiçbir şey eklemiyordu. */
.plancanvas {
    background: none; border: 0; box-shadow: none; padding: 0;
}
/* TUVAL İÇERİK SÜTUNUNU TAM KAPLAR — genişlik sınırı yok.
   Bir üst sınır denendi (1180px) ama geniş ekranda sağda boş bir şerit
   bırakıyordu: plan sayfanın asıl işi, yanında kullanılmayan alan olması
   "neden yayılmıyor?" diye okunuyor. Karşılığı, geniş ekranda tuvalin 16/9
   oranı gereği uzaması ve sayfanın kaydırılması — planın tamamını görmek için
   onu küçültmekten iyi. */
.plancanvas__fit { width: 100%; }
.plan {
    position: relative;
    /* Sabit oran ŞART: yüzde koordinatlar ancak tuvalin oranı her yerde aynıysa
       aynı şekle karşılık gelir. Oran serbest olsaydı geniş ekranda yan yana
       duran iki masa dar ekranda üst üste binerdi. */
    aspect-ratio: 16 / 9;
    /* `min-height` YOK. Vardı (340px) ve dar bir sütunda oranı sessizce
       eziyordu: 500px genişlikte oran 281px ister, alt sınır 340px'e çıkarır
       ve tuval 16/9 olmaktan çıkardı. Oysa yüzde koordinatların anlamlı olması
       bu oranın sabitliğine bağlı — bir masanın yeri ancak tuvalin şekli her
       yerde aynıysa aynı yere denk gelir. Oran tek başına ölçüyü zaten
       belirliyor, alt sınıra gerek yok. */
    border-radius: var(--r-md);
    background: var(--surface-alt);
    /* Zemin ızgarası: sürüklerken mesafe hissi verir, hizalamayı kolaylaştırır. */
    background-image:
        linear-gradient(rgba(15,23,42,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,.045) 1px, transparent 1px);
    background-size: 5% 8.888%;
    border: 1px solid var(--border);
    overflow: hidden;
    touch-action: none;   /* dokunmatikte sürükleme sayfayı kaydırmasın */
    user-select: none;
}

/* --- Alan --- */
.zone {
    position: absolute;
    left: var(--zx); top: var(--zy);
    width: var(--zw); height: var(--zh);
    border: 1.5px dashed color-mix(in srgb, var(--zc) 55%, transparent);
    background: color-mix(in srgb, var(--zc) 7%, transparent);
    border-radius: var(--r-md);
    display: flex; flex-direction: column;
    /* ALANIN TAMAMI TUTAMAK. İmleç yalnızca başlıkta "tut" diyordu; alan artık
       her yerinden sürükleniyor ve imleç bunu söylemezse kullanıcı ortasına
       basıp tutmadığını sanıyor. */
    cursor: grab;
    /* Sürüklerken metin seçilmesin: alan adı ve "Açık" rozeti mavi seçime
       dönüp sürükleme yarıda kesiliyordu. */
    user-select: none;
    /* Dokunmatikte sürükleme sayfayı kaydırmasın. */
    touch-action: none;
}
/* Sürüklenen alan en önde: taşınırken diğerlerinin altında kaybolmasın. */
.zone.is-dragging { z-index: 5; }
.zone:active { cursor: grabbing; }
.zone.is-dragging { cursor: grabbing; opacity: .85; }
/* Masa üstüne geldiğinde: bırakılınca nereye gideceği belli olmalı. */
.zone.is-target {
    border-style: solid;
    background: color-mix(in srgb, var(--zc) 16%, transparent);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--zc) 45%, transparent);
}
/* Kapalı alan: renk çekilir, çapraz tarama. Kapalı olduğu UZAKTAN anlaşılmalı,
   küçük bir rozetle değil — plan bir bakışta taranan bir görsel. */
.zone.is-closed {
    border-color: var(--border-strong);
    background:
        repeating-linear-gradient(45deg, rgba(15,23,42,.05) 0 8px, transparent 8px 16px),
        var(--gray-100);
}

/* Başlık ARTIK AYRI BİR TUTAMAK DEĞİL: alan her yerinden sürükleniyor, imleç
   de oradan miras alınıyor. Buradaki kendi `cursor` kuralı, tutamağın hâlâ
   yalnızca başlık olduğunu söyleyen tek işaretti.

   ALAN ADI MASALARIN ÜSTÜNDE. Masalar z:6'ya çıkarılmıştı (köşe tutamakları
   onları yutuyordu); bu sefer başlığın üstüne gelen bir masa alanın adını
   örtüyor, alan tanınmaz oluyordu.

   `pointer-events: none` ŞART: başlık yalnızca GÖRSEL olarak öne geliyor.
   Olayları da yakalasaydı altındaki masa tutulamaz, üstelik başlık şeridi
   yeniden "tek tutamak" hâline gelirdi. Dişli düğmesi kendi olaylarını
   geri alıyor. */
.zone__head {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px 6px 10px;
    position: relative; z-index: 7;
    pointer-events: none;
}
.zone__cog { pointer-events: auto; }
.zone__name {
    font-size: 12.5px; font-weight: 700; color: var(--zc);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zone.is-closed .zone__name { color: var(--text-muted); }

.zone__state {
    flex-shrink: 0; margin-left: auto;
    font-size: 10.5px; font-weight: 650;
    padding: 2px 7px; border-radius: var(--r-full);
    background: var(--success-bg); color: var(--success-fg);
}
.zone.is-closed .zone__state { background: var(--gray-200); color: var(--gray-600); }

.zone__cog {
    flex-shrink: 0;
    background: none; border: 0; cursor: pointer; padding: 3px;
    color: var(--text-subtle); border-radius: var(--r-sm); line-height: 1;
    display: inline-flex;
}
.zone__cog:hover { color: var(--gray-700); background: rgba(15,23,42,.06); }
/* Dişli ve boyutlandırıcı alanın "tut" imlecini DEVRALMAZ: ikisi de sürükleme
   değil, başka bir iş yapıyor. */
.zone__cog, .zone__cog:active { cursor: pointer; }
.zone__cog [data-lucide] { width: 15px; height: 15px; }

/* Gerekçe yalnızca kapalıyken: "neden kapalı?" açıkken sorulmayan bir soru. */
.zone__reason { display: none; }
.zone.is-closed .zone__reason {
    display: block;
    padding: 0 10px; font-size: 11px; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* DÖRT KÖŞE TUTAMAĞI. Tek köşe (sağ alt) varken alanı sola/yukarı büyütmek
   için önce taşıyıp sonra boyutlandırmak gerekiyordu — iki adımlık bir iş,
   üstelik arada plan bozuluyordu.

   Küçük kare yerine köşeyi saran L: tıklama hedefi 18px, görsel iz ince.
   Tamamen görünmez yapmak olmaz, tutamağın yeri tahmin edilmemeli. */
/* ÜST ÜSTE BİNEN ALANLAR. Alanlar mutlak konumlu; ikisi çakışınca DOM'da
   sonra gelen üste biniyor ve alttakinin köşe tutamaklarını YUTUYORDU —
   kullanıcı tutamağı görüyor ama tutamıyordu.

   Çözüm `:hover` DEĞİL: imlecin üstünde olan zaten örten alan, onu öne almak
   sorunu büyütüyor. Tutamakların kendisi yükseltiliyor; küçük köşe izleri
   olduğu için üstte durmaları görsel bir sorun yaratmıyor. */
.zone__resize {
    position: absolute; z-index: 4;
    width: 18px; height: 18px;
    background: color-mix(in srgb, var(--zc) 55%, transparent);
    /* Köşeyi saran L şekli: iki kenardan 3px kalınlıkta şerit. */
    -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% 3px no-repeat,
                  linear-gradient(#000 0 0) 0 0 / 3px 100% no-repeat;
            mask: linear-gradient(#000 0 0) 0 0 / 100% 3px no-repeat,
                  linear-gradient(#000 0 0) 0 0 / 3px 100% no-repeat;
    opacity: .65; transition: opacity .12s ease;
}
.zone:hover .zone__resize { opacity: 1; }
.zone__resize--nw { left: -1px; top: -1px;    cursor: nwse-resize; }
.zone__resize--ne { right: -1px; top: -1px;   cursor: nesw-resize; transform: scaleX(-1); }
.zone__resize--sw { left: -1px; bottom: -1px; cursor: nesw-resize; transform: scaleY(-1); }
.zone__resize--se { right: -1px; bottom: -1px; cursor: nwse-resize; transform: scale(-1); }
.zone.is-closed .zone__resize { background: var(--border-strong); }

/* --- Masa --- */
.tbl {
    /* MASA HER ŞEYİN ÜSTÜNDE. Alan köşe tutamakları (z:4) ve sürüklenen alan
       (z:5) masaların önüne geçiyordu: bir alanın köşesine yakın duran masa
       tutulamıyor, tutamak yakalanıyordu. Masa planın asıl nesnesi. */
    z-index: 6;
    position: absolute;
    left: var(--tx); top: var(--ty);
    /* Koordinat masanın MERKEZİ: kenar olsaydı boyut değişince yer kayardı. */
    transform: translate(-50%, -50%);
    /* ÖLÇÜ YÜZDE — tuval genişliğinin yüzdesi (menu_tables.size).
       Sabit 58px'ti; iki kişilik masa ile on kişilik masa planda aynı
       görününce plan mekânı anlatmayı bırakıyordu.

       Yüzde, planın ÖLÇEKLİ ÇİZİM olduğu fikrini koruyor: tuval küçülünce masa
       da küçülür, yan yana duran iki masa üst üste binmez. Piksel saklansaydı
       tuval küçüldükçe masa oransal olarak büyürdü.

       ALT SINIR VAR, ÜST SINIR YOK. Alt sınır okunabilirlik için: telefonun
       dar tuvalinde %4 (~14px) okunmaz. Üst sınır ise 160px'te kesiyordu ve
       MenuTable::SIZE_MAX ile çelişiyordu — aynı derdi iki yerden çözmeye
       çalışınca ayarlar kaydırıcısı yarısından sonra hiçbir şey yapmaz oldu
       (geniş tuvalde %10 zaten 160px'i buluyordu). Tavan tek yerde: SIZE_MAX.
       `aspect-ratio` kare tutuyor — yükseklik yüzdesi tuvalin YÜKSEKLİĞİNE
       göre hesaplanacağı için `height: var(--tw)` yazmak masayı ezerdi. */
    width: max(26px, var(--tw, 4%));
    height: auto; aspect-ratio: 1;
    /* Varsayılan yuvarlaklık şekil sınıfından gelir; burada daire bırakmak
       sınıfsız bir masayı sessizce daire yapardı. */
    border-radius: var(--r-md);
    border: 2px solid var(--tc, var(--gray-300));
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1px; padding: 2px;
    cursor: grab; font-family: inherit;
    transition: box-shadow .12s ease, border-color .12s ease;
}
.tbl:hover { box-shadow: var(--shadow-md); border-color: var(--tc, var(--brand-400)); }
.tbl.is-dragging { cursor: grabbing; box-shadow: var(--shadow-lg); z-index: 7; }

/* --- Masa şekilleri ---
   Aynı ölçü, farklı köşe: iki şekil yan yana geldiğinde plandaki satır hissi
   bozulmasın diye yalnızca yuvarlaklık değişiyor. */
.tbl--round  { border-radius: 50%; }
.tbl--square { border-radius: var(--r-md); }

/* Şekil seçicideki küçük göstergeler: adın yanında ne olduğu görünsün. */
.tshape {
    width: 12px; height: 12px; flex: none;
    border: 1.5px solid currentColor; opacity: .75; border-radius: 3px;
}
.tshape--round { border-radius: 50%; }
.tbl__no {
    font-size: 17px; font-weight: 700; color: var(--text);
    font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1;
    /* SARMALANMAZ. Yanlardaki oransal pay küçük masada içerik kutusunu iyice
       daraltıyor; numara sarmalanırsa iki satıra düşüp masanın kimliği
       okunmaz hâle gelirdi. Payı taşsa bile sorun yok: numara masanın dikey
       ORTASINDA duruyor, dairenin en geniş yerinde. */
    white-space: nowrap;
}
/* ETİKET MASANIN İÇİNDE — ama kenar payıyla.
   Eski hâlinde `max-width: 100%` idi: metin masanın TAM genişliğine kadar
   uzanabiliyordu. Karede sorun değil, ama dairede o hizada kenar içeri
   kıvrıldığı için yazı çerçeveye değiyor, hatta üstüne biniyordu.

   Çözüm metni kısaltmak değil, yazının durabileceği alanı doğru tanımlamak:
   yanlardan pay bırakılıyor ve etiket o payın içinde kalıyor. Sığmayan ad üç
   noktaya düşüyor — kesilmiş değil, kısaltılmış görünüyor.

   Sınır MASANIN KUTUSUNA verilmiyor, ETİKETE veriliyor. Masaya yüzde `padding`
   denendi ve plan patladı: yüzde iç boşluk elemanın kendi genişliğine değil
   KAPSAYICI BLOĞUN genişliğine göre hesaplanıyor, yani %15 masanın değil
   tuvalin %15'i oluyor ve masalar tuval boyunda dairelere dönüşüyordu.
   Etiketin `max-width` yüzdesi ise doğrudan masaya göre çözülüyor — istenen
   ölçüt buydu. */
.tbl__lbl {
    font-size: 9px; color: var(--text-subtle); line-height: 1.1;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* DAİREDE DAHA DAR. Etiketin bulunduğu hizada kenar içeri kıvrılıyor; tam
   genişlikte bir yazı çerçeveye değiyor, hatta üstüne biniyordu. */
.tbl--round .tbl__lbl { max-width: 72%; }
/* Şeritte etiket YOK: masalar orada sabit 54px ve yalnızca numara okunuyor.
   Ad `title` olarak duruyor, üzerine gelince görünüyor. */
.tray__tbl .tbl__lbl { display: none; }
/* Kapalı alandaki masa: QR'ı sipariş almıyor, bunu planda göstermek zorundayız. */
.tbl.is-closed { opacity: .5; filter: saturate(.4); }

/* ÖLÇÜ TUTAMAĞI. Alan köşelerindekiyle aynı dil: normalde görünmez, masanın
   üstüne gelince beliriyor — plan sürekli tutamaklarla dolu görünmesin.
   Tek köşe yeterli: masa merkezinden büyüyor, hangi köşeyi çektiğin sonucu
   değiştirmiyor.
   Kutunun DIŞINA taşıyor (-3px): daire masada köşe tutamağı içeride kalsaydı
   kavisin altında yarı yarıya kaybolurdu. */
.tbl__resize {
    position: absolute; right: -3px; bottom: -3px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--tc, var(--brand-500));
    border: 2px solid var(--surface);
    box-shadow: var(--shadow-sm);
    cursor: nwse-resize;
    opacity: 0; transition: opacity .12s ease;
}
.tbl:hover .tbl__resize,
.tbl.is-sizing .tbl__resize { opacity: 1; }
/* Sürüklerken imleç tutamağın üstünden çıksa da boyutlandırma sürüyor. */
.tbl.is-sizing { cursor: nwse-resize; z-index: 8; }

/* --- Kaydet çubuğu --- */

/* ALANI TAMAMEN DOLDURUR — sabit oran YOK.
   Önce 16/9 korunuyor, genişlik kalan yükseklikten türetiliyordu; oran
   korunuyordu ama alçak/geniş ekranlarda iki yanda büyük boşluk kalıyordu.
   Kullanıcı kararı: boşluk bırakmak yerine alanı doldur.

   BEDELİ: tuvalin oranı ekrandan ekrana değişir. Masalar nokta olduğu için
   yerleri orantılı kayar, sorun çıkmaz; ALANLARIN en-boy oranı ise ekranla
   birlikte değişir — bir ekranda kare çizilen alan başka ekranda dikdörtgen
   görünür. Sürükleme matematiği kutu ölçüsünden yüzde hesapladığı için
   etkilenmez. */
.plancanvas__fit .plan { width: 100%; height: auto; margin: 0; }

/* MEDYA SORGUSU TEMEL KURALDAN SONRA GELMELİ. Bu bloklar dosyanın başındaki
   900px sorgusundaydı; aynı özgüllükte olduğu için sonradan gelen temel kural
   onları eziyor ve telefonda hiç işlemiyorlardı.
   NOT: eski 900px kuralı burada `height: auto` ile 100vh'yi geri alıyordu;
   artık temel kuralda da yükseklik yok, o telafiye gerek kalmadı. */
@media (max-width: 700px) {
    /* Telefonda oran BİLEREK 4/5: dikey ekranda 16/9 şerit kullanılmaz.
       Burada da alt sınır yok — oranı ezerdi (bkz. .plan). */
    .plancanvas__fit .plan { aspect-ratio: 4 / 5; }
}


/* --- Alan ayarları penceresi --- */
.zm-color { padding: 4px; height: var(--ctrl-h); cursor: pointer; }
/* Güvenlik ağı: içerik ne olursa olsun ayarlar modalı yatayda kaymasın —
   yatay kaydırma bir formda her zaman bir yerleşim hatasının belirtisi. */
[data-zone-modal] .modal__body { overflow-x: hidden; }
.zm-hint { font-size: 12px; color: var(--text-muted); margin: 0 0 8px; line-height: 1.45; }

/* Düzen artık .chip-select ve .radio bileşenlerinden geliyor; burada yalnızca
   yerleşim kalıyor. Eskiden bu iki satır çıplak radyoları elle biçimlendiriyor,
   projenin form dilinden ayrı düşüyordu. */
.zm-state { margin-top: 2px; }
.zm-until { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; padding: 10px 12px; background: var(--surface-alt); border-radius: var(--r-md); }

.zm-days { display: flex; flex-direction: column; gap: 7px; }
.zm-day { display: flex; align-items: center; gap: 8px; }
/* SAAT ALANLARI SATIRA SIĞAR. Tema saat seçicisi girdinin etrafına bir
   sarmalayıcı koyuyor; esnek satırda sarmalayıcının varsayılan `min-width:auto`
   değeri içeriğinden küçülmesini engelliyor ve satır modalı aşıp gövdeye YATAY
   KAYDIRMA getiriyordu. İki alan kalan yeri paylaşsın. */
.zm-day .tpick { flex: 1; min-width: 0; }
.zm-day .tpick__text { width: 100%; min-width: 0; }
/* Anahtar + gün adı: min-width günleri hizalı tutuyor (Pzt/Çar/Cmt farklı
   genişlikte, saat alanları kaymasın). */
.zm-day__on { display: flex; align-items: center; gap: 9px; min-width: 92px; font-size: 13px; cursor: pointer; }
.zm-day__name { font-weight: 600; }
/* Kapalı günün adı da soluk: satırın devre dışı olduğu tek bakışta anlaşılsın. */
.zm-day:has([data-day-on]:not(:checked)) .zm-day__name { color: var(--text-subtle); font-weight: 500; }
.zm-day__sep { color: var(--text-subtle); }
/* `width:auto` yalnızca yalın kullanımda; saat seçicisinin içindeki alan
   sarmalayıcısını doldurmalı (kural dosyada .tpick__text'ten SONRA geldiği
   için aksi hâlde onu eziyordu). */
.input--sm { height: 34px; padding: 0 9px; font-size: 13px; width: auto; }
.tpick .input--sm { width: 100%; }
/* Kapalı günün saatleri soluk: o satırın devre dışı olduğu belli olsun. */
.zm-day .input--sm:disabled { opacity: .45; }

.zm-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

@media (max-width: 700px) {
    .plan { aspect-ratio: 4 / 5; min-height: 420px; }
    .tbl { width: 50px; height: 50px; }
    .tbl__no { font-size: 15px; }
    .zm-day { flex-wrap: wrap; }
}

/* ==========================================================================
   ABONELİK TEKLİFİ — ücretsiz kademe + ücretli abonelik
   ==========================================================================
   Kademeli paket ızgarası değil: en fazla İKİ kart var. Tek kart varsa
   ortalanır ve genişliği sınırlanır — sayfanın tamamına yayılırsa fiyat ve
   buton absürt genişlikte uzuyordu. */

.sub-offer { display: flex; justify-content: center; }
.sub-offer__card {
    position: relative;
    width: 100%; max-width: 780px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 30px 28px 26px;
    display: flex; flex-direction: column;
}

/* İki kart yan yana. Ücretsiz DAR, ücretli GENİŞ (3fr): ücretli kartın özellik
   listesi çok daha uzun ve sütunlara yayılması gerekiyor; eşit bölünseydi
   ücretsiz kart yarısı boş dururken ücretli sıkışırdı. */
.sub-offer--two {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr);
    gap: 18px;
    align-items: start;
}
.sub-offer--two .sub-offer__card { max-width: none; }

/* Ücretsiz kart NÖTR: ücretlinin yanında eşit ağırlıkta durursa karar
   zorlaşıyor. Vurgu ücretlide. */
.sub-offer__card--free { background: var(--surface-alt); }
.sub-offer__card--paid { border-color: var(--brand-200); }

.sub-offer__ai {
    position: absolute; top: -11px; right: 22px;
    font-size: 11.5px; font-weight: 650;
    padding: 3px 11px; border-radius: var(--r-full);
    background: var(--surface); border: 1px solid var(--brand-200); color: var(--brand-700);
}

.sub-offer__head h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.sub-offer__head p { color: var(--text-muted); font-size: 13.5px; margin-top: 4px; line-height: 1.45; }

.sub-offer__price {
    display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
    margin: 18px 0 22px;
    font-size: 34px; font-weight: 700; letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}
.sub-offer__price span { font-size: 14px; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }

/* Liste .plan-list'in sütun akışını miras alır (column-width: 210px):
   dar ücretsiz kartta tek sütun, geniş ücretli kartta iki-üç sütun. */
.sub-offer__feats { margin-bottom: 22px; }
/* Butonu kartın DİBİNE it — iki kart yan yanayken butonlar aynı hizada
   olmazsa kartlar kırık görünüyor. */
.sub-offer__card form { margin-top: auto; }

/* --- Ücretsizde OLMAYANLAR ---
   Yalnızca dahil olanları listelemek "neyi kaçırıyorum?" sorusunu cevapsız
   bırakıyordu; kullanıcı ücretliye geçmenin ne kazandırdığını göremeden karar
   veremez. */
.sub-locked {
    margin-bottom: 22px; padding: 12px 14px;
    border-radius: var(--r-md);
    background: var(--surface); border: 1px dashed var(--border-strong);
}
.sub-locked__title {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 650; color: var(--text-muted);
    margin-bottom: 8px;
}
.sub-locked__list li { color: var(--text-subtle); }
.sub-locked__list [data-lucide] { color: var(--gray-400); }

.btn--lg { height: 48px; font-size: 15px; }

@media (max-width: 560px) {
    .sub-offer__card { padding: 26px 18px 22px; }
    .sub-offer__price { font-size: 28px; }
}

/* Abonelikte planlanmış geçiş bildirimi (ücretsiz kademeye inecek).
   Uyarı DEĞİL bilgi: kullanıcının kendi verdiği kararın ne zaman yürürlüğe
   gireceğini söylüyor, bir sorunu haber vermiyor. */
.sub-notice {
    /* İki satıra sarıyor (tarih + açıklama); ikon ilk satıra hizalanmalı. */
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 14px; margin-bottom: 16px;
    border-radius: var(--r-md);
    background: var(--brand-50); border: 1px solid var(--brand-100);
    color: var(--brand-800); font-size: 13.5px; line-height: 1.45;
}
.sub-notice i { width: 18px; height: 18px; flex-shrink: 0; color: var(--brand-600); margin-top: 1px; }

/* ==========================================================================
   YÜKSELTME ÇAĞRISI (ücretsiz kademedeki kullanıcı)
   ==========================================================================
   Sayfanın en üstünde, tek ve büyük. Daha önce kart başlığında küçük bir buton
   olarak duruyordu ve sayfaya ilk girişte gözden kaçıyordu — oysa ücretsiz
   kullanıcı asıl hedef kitle. */

.upsell {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
    padding: 22px 26px; margin-bottom: 18px;
    border-radius: var(--r-lg);
    /* Koyu marka zemini: sayfadaki her şey açık yüzey, bu tersine dönünce
       başka hiçbir vurguya gerek kalmadan öne çıkıyor. */
    background: linear-gradient(115deg, var(--brand-700), var(--brand-900) 62%, #12205e);
    color: #fff;
    box-shadow: 0 14px 34px -18px rgba(23, 61, 225, .75);
    position: relative; overflow: hidden;
}
/* Köşedeki ışık — düz gradyan biraz cansız kalıyordu. */
.upsell::before {
    content: ''; position: absolute;
    width: 320px; height: 320px; right: -110px; top: -150px;
    background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%);
    border-radius: 50%; pointer-events: none;
}

.upsell__body { position: relative; z-index: 1; min-width: 0; flex: 1; }
.upsell__badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 650; letter-spacing: .02em;
    padding: 3px 9px; border-radius: var(--r-full);
    background: rgba(255,255,255,.16); color: #fff;
    margin-bottom: 9px;
}
.upsell__body h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.upsell__body p { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.8); margin-top: 5px; max-width: 520px; }

.upsell__action { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: stretch; gap: 10px; flex-shrink: 0; }
.upsell__price {
    text-align: center;
    font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.upsell__price span { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.7); letter-spacing: 0; }

/* Buton BEYAZ: koyu zeminde marka mavisi bir buton kaybolurdu. */
.upsell__btn {
    background: #fff; color: var(--brand-700);
    border: 0; font-weight: 650; min-width: 210px;
    box-shadow: 0 6px 16px -6px rgba(0,0,0,.4);
}
.upsell__btn:hover { background: #f1f5ff; color: var(--brand-800); }

/* ==========================================================================
   İptal akışı (Aboneliğim)

   İki panolu modal: ne kaybediyor / neden ayrılıyor. Yükseltme modalinin
   `.sm-*` düzeninden ayrı tutuluyor — orası satış, burası veda; ikisinin
   ölçüleri ve tonu aynı olmamalı.
   ========================================================================== */
.cx-step { display: none; }
[data-cancel-step="1"] .cx-step[data-cancel-pane="1"],
[data-cancel-step="2"] .cx-step[data-cancel-pane="2"] { display: block; }

.cx-body { display: flex; flex-direction: column; gap: 14px; }

/* "İsteğe bağlı" rozeti başlığın yanında: asıl bilgi bu ve gövdeye inen iki
   satırlık serbest paragrafta kayboluyordu. */
.cx-opt { margin-inline-start: 8px; vertical-align: 2px; font-weight: 600; }
/* Gerekçe tek satır, ikonuyla hizalı — kutusuz serbest metin bloğu değil. */
.cx-hint {
    display: flex; align-items: flex-start; gap: 7px;
    font-size: 12.5px; line-height: 1.5; color: var(--text-subtle); margin-bottom: 2px;
}
.cx-hint [data-lucide] { flex: none; margin-top: 2px; }

.cx-block { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; }

/* EKRANIN ASIL MESAJI. Sade beyaz çerçeveli bir kutuyken "iptal sonrası"
   dipnotuyla aynı ağırlıkta okunuyordu; oysa kullanıcının bu ekranda görmesi
   gereken tek şey bu.

   KIRMIZI DEĞİL, KEHRİBAR: kırmızı "hata/tehlike" der ve korkutur — kayıp bir
   hata değil. Kehribar "dikkat" der. Sol kenardaki şerit kutuyu sayfadan
   ayırıyor, kilit ikonu dolu bir madalyonda duruyor. */
.cx-block--lose {
    background: linear-gradient(180deg, #fffbf3, var(--surface) 62%);
    border-color: #fcd9a4; border-inline-start: 3px solid var(--warning);
    padding-inline-start: 16px;
}
.cx-block__title {
    display: flex; align-items: center; gap: 10px;
    font-size: 14.5px; font-weight: 650; color: var(--text); margin-bottom: 14px;
    letter-spacing: -0.01em;
}
/* Toplam sayı başlığın İLK sözü: soyut bir cümle yerine rakamla açılıyor. */
.cx-block__title b { font-weight: 750; color: var(--warning-fg); }
.cx-block__ico {
    flex: none; display: grid; place-items: center; width: 28px; height: 28px;
    border-radius: 50%; background: var(--warning-bg); color: var(--warning-fg);
}

/* İKİ SÜTUN. Maddeler kısa ("5 masa ve masa QR kodu"); tek sütunda satırların
   sağı boş kalıyor ve liste gereğinden uzun görünüyordu — kaydırmadan
   okunabilmesi bu ekranda önemli. Dar ekranda tek sütuna iner. */
.cx-list {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 18px; list-style: none; margin: 0; padding: 0;
}
@media (max-width: 520px) { .cx-list { grid-template-columns: 1fr; } }
.cx-list li { display: flex; align-items: baseline; gap: 9px; font-size: 13px; line-height: 1.5; color: var(--text-muted); min-width: 0; }
.cx-list li [data-lucide] { flex: none; align-self: center; color: var(--warning); }
/* Mesajı SAYI taşıyor: etiket sessiz kalırken rakam öne çıkıyor. */
.cx-list li b { color: var(--text); font-size: 15px; font-weight: 750; }
.cx-more { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #f1d9b4; font-size: 12.5px; color: var(--text-muted); }

/* "İptal sonrası ne olur?" — DİPNOT AĞIRLIĞINDA.
   Bu blok önce yeşil bir başarı kutusuydu: tik işaretleri ve güven veren renk
   "iptal etsen de her şey yolunda" diyor, kaybı anlatan blokla eşit ağırlıkta
   durup iptali cazip kılıyordu. Bilgi doğru ve kullanıcının hakkı — ama
   ekranın mesajı bu değil. Kutu yok, renk yok, küçük ve sessiz. */
.cx-after { padding: 0 2px; }
.cx-after__title { font-size: 12px; font-weight: 650; color: var(--text-muted); margin-bottom: 6px; }
.cx-after__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cx-after__list li {
    position: relative; padding-inline-start: 12px;
    font-size: 12.5px; line-height: 1.5; color: var(--text-subtle);
}
.cx-after__list li::before {
    content: ''; position: absolute; inset-inline-start: 0; top: 8px;
    width: 4px; height: 4px; border-radius: 50%; background: var(--text-subtle); opacity: .6;
}

.cx-note {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 12px 14px; border-radius: var(--r-md);
    background: var(--info-bg); color: var(--info-fg);
    font-size: 12.5px; line-height: 1.5;
}
.cx-note [data-lucide] { flex: none; margin-top: 1px; }
.cx-note--final { background: var(--surface-alt); color: var(--text-muted); }

/* Nedenler: tek sütun, tıklama alanı satırın tamamı. */
.cx-reasons { display: flex; flex-direction: column; gap: 6px; }
.cx-reason {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r-md);
    font-size: 13px; color: var(--text); transition: border-color .12s, background .12s;
}
.cx-reason:hover { border-color: var(--brand-300); background: var(--brand-50); }
.cx-reason:has(input:checked) { border-color: var(--brand-500); box-shadow: 0 0 0 1px var(--brand-500); }

/* YAN YANA, sağ uçta. `space-between` ikisini iki uca itiyordu: aradaki boşluk
   onları iki ayrı karar gibi gösteriyor, iptal düğmesi de kendi köşesinde
   bağımsız bir eylem gibi duruyordu. Bitişik durunca aynı sorunun iki cevabı
   olarak okunuyorlar. İkisi de tam görünür ve aynı ölçüde — yıkıcı olanı
   küçültmek ya da soluklaştırmak karanlık desen olurdu. */
.cx-foot { display: flex; justify-content: flex-end; gap: 10px; }
@media (max-width: 560px) {
    .cx-foot { flex-direction: column-reverse; }
    .cx-foot .btn { width: 100%; justify-content: center; }
}

/* Geri düğmesi olan başlık: ok solda, başlık ortada kalmasın diye sola akar. */
.modal__header--back { display: flex; align-items: center; gap: 10px; }
.modal__header--back h3 { flex: 1; min-width: 0; }

/* ==========================================================================
   Kampanya listesi (panel)

   Kampanya BİR GÖRSELDİR: listede de menüde çıkacağı oranda görünmeli. Ürün
   satırlarının 44px'lik kare küçük resmi 16/9 bir afişi tanınmaz hâle
   getiriyordu. Satırın ortası da açıklamayla doluyor — önceden başlıkla en
   sağdaki anahtar arasında bir ekran boyu boşluk kalıyordu.
   ========================================================================== */
.camplist { display: flex; flex-direction: column; gap: 12px; }
.camprow {
    display: grid;
    grid-template-columns: auto 176px minmax(0, 1fr) auto;
    align-items: center; gap: 16px;
    padding: 12px 16px 12px 8px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.camprow:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
/* Pasif satır SOLGUN ama okunur: gizlemiyoruz, "menüde değil" diyoruz. */
.camprow.is-off { background: var(--surface-alt); }
/* Satır tıklanabilir: imleç ve üzerine gelme durumu bunu söylemeli, yoksa
   kullanıcı kalem düğmesini aramaya devam eder. */
.camprow { cursor: pointer; }
.camprow:hover { border-color: var(--brand-300); }
/* Kendi işi olan öğeler satırın imlecini devralmasın. */
.camprow [data-drag] { cursor: grab; }
.camprow.is-off .camprow__thumb { opacity: .5; }

.camprow__drag { width: 18px; height: 18px; color: var(--text-subtle); cursor: grab; flex: none; }
.camprow__drag:active { cursor: grabbing; }

/* Menüdeki kartla AYNI oran (16/9): panelde gördüğü kırpma, misafirin gördüğü. */
.camprow__thumb {
    width: 176px; aspect-ratio: 16 / 9; border-radius: var(--r-md);
    background: var(--surface-alt); border: 1px solid var(--border);
    overflow: hidden; display: grid; place-items: center; color: var(--text-subtle);
    /* Büyütme düğmesi (.zoombtn) `inset: 0` ile kaplıyor: konum çıpası burası. */
    position: relative;
}
.camprow__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.camprow__thumb [data-lucide] { width: 22px; height: 22px; }

.camprow__body { min-width: 0; }
.camprow__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.camprow__name { font-size: 14.5px; font-weight: 650; letter-spacing: -0.01em; }
/* İki satırda kesilir: uzun bir açıklama satır yüksekliğini uçurmasın. */
.camprow__desc {
    margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--text-muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* ÖĞELER ARASINDA AYIRAÇ VAR — yalnızca boşluk yetmiyordu.
   Öğeler arası 16px, ikon ile metin arası 5px'ti; oran 3:1. Kulağa yeterli
   geliyor ama iki öğe de "ikon + metin" olduğu için göz yakınlığa göre
   grupluyor ve birinci öğenin METNİYLE ikinci öğenin İKONUNU tek bir öbek gibi
   okuyor: "Süresiz 👁 14 görüntülenme". Boşluğu büyütmek bunu ancak zayıflatır,
   çözmez — sınırın nerede olduğunu söyleyen bir işaret gerekiyor.

   Nokta projenin zaten kullandığı ayıraç (kurtarma listesi, görsel alanı
   ipucu). Aralık dengeli: noktadan önce kabın 12px'i, sonra kendi 7px'i + iç
   kutunun 5px'i = yine 12px. */
.camprow__meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 7px;
    font-size: 12.5px; color: var(--text-muted);
}
.camprow__meta span { display: inline-flex; align-items: center; gap: 5px; }
.camprow__meta > span + span::before {
    content: '·';
    margin-right: 7px;
    color: var(--border-strong);
}

/* Denetimler TEK GRUP: anahtar ile düğmeler arasında boşluk bırakmıyoruz,
   üçü birlikte satırın sağ ucunda duruyor. */
.camprow__ctrl { display: flex; align-items: center; gap: 6px; }
.camprow__ctrl form { display: flex; }

@media (max-width: 720px) {
    /* Dar ekranda küçük resim tam genişlik: 176px'lik sütun metne yer bırakmıyor. */
    .camprow { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "drag thumb" "body body" "ctrl ctrl"; }
    .camprow__drag { grid-area: drag; align-self: start; margin-top: 6px; }
    .camprow__thumb { grid-area: thumb; width: 100%; }
    .camprow__body { grid-area: body; }
    .camprow__ctrl { grid-area: ctrl; justify-content: flex-end; }
}

@media (max-width: 720px) {
    .upsell { padding: 20px; }
    .upsell__action { width: 100%; }
    .upsell__btn { width: 100%; min-width: 0; }
}

/* Değiştirilemeyen özellik çipi (PlanFeatures::BASELINE — her abonelikte açık).
   Seçili görünür ama tıklanamaz; kapatılabilir sanılmasın. */
.chip--locked { opacity: .72; cursor: not-allowed; }
.chip--locked input { cursor: not-allowed; }

/* ==========================================================================
   ABONELİK BAŞLATMA ADIMI (modal)
   ==========================================================================
   Fatura bilgileri + sipariş özeti. Varsayılan 480px'lik modal iki sütunlu
   form için dar kalıyor. */

.modal--lg { max-width: 620px; }

/* Sipariş özeti — ne satın alındığı ödemeden ÖNCE görünmeli. */
.sm-summary {
    padding: 14px 16px;
    border-radius: var(--r-md);
    background: var(--surface-alt);
    border: 1px solid var(--border);
}
.sm-summary__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.sm-summary__row > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sm-summary__row b { font-size: 14.5px; font-weight: 650; }
.sm-summary__price { font-size: 15px; font-weight: 650; white-space: nowrap; }
.sm-summary__total {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 14px;
}
.sm-summary__total b { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }

.sm-type { display: flex; gap: 8px; }

/* Güvence satırı — taahhüt kaygısını azaltır. Metin DOĞRU: ücretsiz kademeye
   geçiş akışı gerçekten var ve dönem sonuna kadar özellikler açık kalıyor. */
.sm-note {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 11px 13px; border-radius: var(--r-md);
    background: var(--success-bg); color: var(--success-fg);
    font-size: 13px; line-height: 1.45;
}
.sm-note i { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }

.sm-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
/* Birincil butona genişlik verilir (ayağın ağırlık merkezi), YÜKSEKLİK
   verilmez — iki buton aynı boyda kalmalı. */
.sm-foot .btn--primary { min-width: 175px; }

@media (max-width: 560px) {
    .sm-foot { flex-direction: column-reverse; align-items: stretch; }
    .sm-foot .btn { width: 100%; min-width: 0; }
}

/* --- Ödeme dönemi seçimi (aylık / yıllık) --- */
.sm-period { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Izgara ETİKETİ geriyor ama içindeki kutuyu değil: kutu kendi içeriği kadar
   kalıyordu ve yıllık (kazanç şeridi yüzünden) uzun olunca satır tırtıklı
   görünüyordu. Etiketi flex yapıp kutuya flex:1 vermek ikisini eşitler. */
.sm-period__opt { cursor: pointer; display: flex; }
.sm-period__opt > .sm-period__box { flex: 1; }
/* Radyo görsel olarak gizli ama ERİŞİLEBİLİR kalır (klavye + ekran okuyucu):
   display:none olsaydı sekme ile seçilemezdi. */
.sm-period__opt input { position: absolute; opacity: 0; width: 0; height: 0; }

.sm-period__box {
    position: relative; display: flex; flex-direction: column; gap: 2px;
    padding: 13px 14px; border-radius: var(--r-md);
    border: 1.5px solid var(--border); background: var(--surface);
    transition: border-color .12s ease, background-color .12s ease;
}
.sm-period__opt:hover .sm-period__box { border-color: var(--border-strong); }
.sm-period__opt input:checked + .sm-period__box {
    border-color: var(--brand-500);
    background: var(--brand-50);
}
/* Klavyeyle gezerken seçili kutu belli olmalı — radyo görünmediği için
   odak halkası kutuya taşınıyor. */
.sm-period__opt input:focus-visible + .sm-period__box {
    box-shadow: 0 0 0 3px var(--brand-100);
}

.sm-period__name { font-size: 13px; font-weight: 650; color: var(--text); }
.sm-period__price { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.sm-period__sub { font-size: 11.5px; color: var(--text-muted); }
.sm-period__sub b { font-weight: 700; color: var(--text); }
/* Üstü çizili aylık fiyat: kıyas için, ana bilgiyle yarışmasın diye soluk. */
.sm-period__sub s { margin-inline-start: 4px; color: var(--gray-400); }
/* ÖLÇÜLER TAM SAYI. `line-height: 1.2` × 10.5px = 12,6px'lik bir satır kutusu
   veriyordu; 11px ikon ondan UZUN olunca satırı ikon geriyor ve ortalama
   yarım piksele düşüyor. Tarayıcı bunu yuvarlayınca ikon 1px aşağı kayıyor —
   metin ise alt piksel hassasiyetiyle çizildiği için kayma gözle görülüyor.
   (satır yüksekliği − ikon) ÇİFT olmalı ki ortalama tam piksele otursun. */
.sm-period__badge {
    display: inline-flex; align-items: center; gap: 4px;
    position: absolute; top: -9px; right: 10px;
    font-size: 10.5px; font-weight: 700; line-height: 14px;
    padding: 2px 9px; border-radius: var(--r-full);
    background: var(--success); color: #fff;
    box-shadow: 0 2px 6px -1px rgba(22, 163, 74, .45);
}
.sm-period__badge [data-lucide] { width: 12px; height: 12px; }

/* Kazanç şeridi — yıllığı ÖNE ÇIKARAN ana öğe.
   Renk YEŞİL, marka mavisi değil: mavi bu ekranda "seçili" demek. Kazanç
   vurgusu seçim durumundan ayrı okunmalı, yoksa yıllık her zaman seçiliymiş
   gibi görünürdü. */
.sm-period__gain {
    display: flex; align-items: center; gap: 6px;
    margin-top: 8px; padding-top: 8px;
    border-top: 1px dashed var(--success-bg);
    /* line-height TAM SAYI (16px), 1.2 DEĞİL: 11,5 × 1,2 = 13,8px'lik satır
       kutusunu 14px ikon geriyordu, ortalama yarım piksele düşüp yuvarlanınca
       ikon 1px aşağı kayıyordu. 16 − 14 = 2, yani ortalama tam piksele oturur. */
    font-size: 11.5px; font-weight: 600; line-height: 16px; color: var(--success-fg);
}
.sm-period__gain [data-lucide] { width: 14px; height: 14px; flex: none; }
.sm-period__gain b { font-weight: 800; }

/* Öne çıkan seçenek: seçili olmasa bile yeşile çalan ince bir çerçeve.
   Seçim rengiyle (mavi) çakışmaz — seçilince checked kuralı devralır. */
.sm-period__opt--push .sm-period__box {
    border-color: var(--success-bg);
    background: linear-gradient(180deg, rgba(220, 252, 231, .35), transparent 62%);
}
.sm-period__opt--push:hover .sm-period__box { border-color: var(--success); }

/* Kazanç satırı — yalnızca yıllık seçiliyken. */
.sm-summary__save {
    display: flex; align-items: center; gap: 6px;
    margin-top: 10px; font-size: 12.5px; color: var(--success-fg);
}
.sm-summary__save[hidden] { display: none; }

/* Teklif kartında yıllık duyurusu */
.sub-offer__yearly {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin: -12px 0 20px;
    padding: 7px 11px; border-radius: var(--r-full);
    background: var(--success-bg); color: var(--success-fg);
    font-size: 12.5px; align-self: flex-start;
}

@media (max-width: 460px) {
    .sm-period { grid-template-columns: 1fr; }
}

/* Vergi satırı: bireyselde vergi dairesi gizlenince TC Kimlik tek başına ilk
   sütunda kalıyor ve sağ sütun boş duruyordu. Tek görünür alan kaldığında
   satırı komple kaplar.
   :has kullanılıyor çünkü koşul DOM durumuna bağlı ve JS ile sınıf yönetmek
   iki ayrı doğruluk kaynağı yaratırdı (form tipi zaten JS'te değişiyor).
   Proje bu seçiciyi başka yerlerde de kullanıyor (.content:has(.appear)). */
.sm-taxrow:has(> [hidden]) > .field:not([hidden]) { grid-column: 1 / -1; }

/* ==========================================================================
   ABONELİK ADIM 1 — DEĞER ANLATIMI
   ==========================================================================
   Geniş modal: özellik kartları iki sütuna sığsın, metin nefes alsın. */

/* KAYDIRMA GÖVDEDE, MODALDA DEĞİL.
   `.modal` varsayılanı `overflow-y: auto` — kaydırma çubuğu modalın İÇİNDE yer
   kaplıyor, dolayısıyla tam genişlik olması gereken mavi başlık 12px dar
   kalıyor ve sağda beyaz bir şerit + kırık köşe yuvarlaklığı bırakıyordu.
   Çubuğu gövdeye almak hem onu çözüyor hem de başlığın ve fiyat/buton
   satırının kaymadan sabit kalmasını sağlıyor (uzun listede önemli). */
.modal--xl {
    max-width: 860px;
    overflow: hidden;            /* köşe yuvarlaklığı başlığı kırpsın */
    display: flex; flex-direction: column;
}

/* İki pano, tek modal: geri dönüldüğünde form durumu (yazılanlar, seçilen
   dönem) korunsun diye ayrı modal açılmıyor. */
.sm-step { display: none; flex-direction: column; min-height: 0; }
[data-step="1"] > [data-step-pane="1"],
[data-step="2"] > [data-step-pane="2"],
[data-step="3"] > [data-step-pane="3"] { display: flex; }

/* Başlık ve ayak sabit, yalnızca orta bölüm kayar.
   min-height: 0 ŞART — flex öğesi varsayılanda içeriğinden küçülemez, o
   olmadan gövde taşar ve kaydırma yine modala düşerdi. */
.sm-step > .sm-hero,
.sm-step > .modal__header,
.sm-step > .modal__footer { flex-shrink: 0; }
.sm-step > .modal__body { flex: 1; min-height: 0; overflow-y: auto; }

/* Adım 2'de form da dikey zincirin parçası: gövdesi kaysın, ayağı sabit kalsın. */
.sm-step > form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.sm-step > form > .modal__body { flex: 1; min-height: 0; overflow-y: auto; }
.sm-step > form > .modal__footer { flex-shrink: 0; }

/* --- Üst bölüm --- */
.sm-hero {
    position: relative;
    padding: 30px 32px 26px;
    background: linear-gradient(115deg, var(--brand-700), var(--brand-900) 65%, #12205e);
    color: #fff;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    overflow: hidden;
}
.sm-hero::before {
    content: ''; position: absolute;
    width: 300px; height: 300px; right: -90px; top: -140px;
    background: radial-gradient(circle, rgba(255,255,255,.15), transparent 70%);
    border-radius: 50%; pointer-events: none;
}
.sm-hero > * { position: relative; z-index: 1; }
.sm-hero__badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 650;
    padding: 3px 10px; border-radius: var(--r-full);
    background: rgba(255,255,255,.18);
    margin-bottom: 10px;
}
.sm-hero h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; }
.sm-hero p { font-size: 14px; color: rgba(255,255,255,.82); margin-top: 7px; max-width: 560px; line-height: 1.5; }
/* Kapatma düğmesi koyu zeminde: .btn--ghost burada okunmaz. */
.sm-hero__x {
    position: absolute; top: 16px; right: 16px; z-index: 2;
    background: rgba(255,255,255,.14); border: 0; cursor: pointer;
    width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; padding: 0;
}
.sm-hero__x:hover { background: rgba(255,255,255,.26); }
.sm-hero__x [data-lucide] { width: 17px; height: 17px; }

/* --- Değer kartları --- */
.sm-values { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.sm-value { display: flex; gap: 13px; }
.sm-value__ic {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-50); color: var(--brand-600);
}
.sm-value__ic [data-lucide] { width: 20px; height: 20px; }
.sm-value__txt { min-width: 0; }
.sm-value__txt b { display: block; font-size: 14.5px; font-weight: 650; line-height: 1.35; }
.sm-value__txt p { font-size: 13px; color: var(--text-muted); line-height: 1.55; margin-top: 5px; }

/* Etiketler: hikâyenin hangi somut özelliklere dayandığını gösterir —
   "ballandırma"nın karşılığı olan gerçek maddeler görünür kalsın. */
.sm-value__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.sm-value__tags span {
    font-size: 11px; font-weight: 600;
    padding: 2px 8px; border-radius: var(--r-full);
    background: var(--surface-alt); color: var(--text-muted);
    border: 1px solid var(--border);
}

/* --- Tam liste (katlanmış) --- */
/* .pkg-feats bileşeninin üstüne YALNIZCA farkı bindirilir.
   Kenarlık, dolgu, ok döndürme ve açılma animasyonu bileşenden geliyor;
   burada tekrar tanımlanırsa ikisi ayrışır. `summary` kuralları KALDIRILDI —
   <details> kullanılmıyor artık, ölü seçicilerdi. */
.sm-all { margin-top: 24px; padding-top: 18px; }
/* Geniş modalda üç sütuna yayılır; dar ekranda kendiliğinden teke iner.
   .plan-list'in çok sütunlu (column-width) akışı BURADA ızgaraya çevrildi —
   iki sebeple:
     1. Çok sütunlu akış maddeleri sütun sütun dağıtır; yükseklik değiştikçe
        dağılım da değişir, yani liste açılırken maddeler yer değiştirerek
        zıplar. Izgarada satır sırası sabittir, yalnızca alttan yenisi görünür.
     2. Okuma sırası soldan sağa olur; "ilk iki satır" önizlemesi ancak
        böyle anlamlı — sütun akışında ilk iki satır, her sütunun başındaki
        alakasız maddelerden oluşurdu. */
.sm-all__list {
    margin-top: 14px;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    column-gap: 24px;   /* satır aralığını .plan-list li'nin padding-bottom'u veriyor */
}

/* Satır içi küçük rozet — tablo hücresinde metnin yanında. */
.badge--xs { font-size: 10.5px; padding: 1px 6px; margin-inline-start: 6px; vertical-align: 1px; }

/* --- Filtre paneli (Faturalarım / Ödemelerim) --- */
.fpanel {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); overflow: hidden;
}
.fpanel__bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
    padding: 14px 16px;
}
.fpanel__search { flex: 1 1 240px; min-width: 0; }
/* Tek satırlık ikon + metin: ölçüler TAM SAYI olmalı, yoksa ikon yarım
   piksele düşüp kayıyor (bkz. .sm-period__gain). 20 − 16 = 4, çift. */
.fpanel__toggle { display: inline-flex; align-items: center; gap: 7px; line-height: 20px; margin-inline-start: auto; }
.fpanel__toggle [data-lucide] { width: 16px; height: 16px; }
.fpanel__count {
    display: inline-grid; place-items: center; min-width: 18px; height: 18px;
    padding: 0 5px; border-radius: 999px;
    background: var(--brand-500); color: #fff; font-size: 11px; font-weight: 700;
    /* line-height KUTUYLA AYNI (18px). Düğmeden 20px miras alıyordu ve rakam
       1px aşağı kayıyordu; `1` (=11px) denendiğinde 1px yukarı kaydı.
       Sebep: satır kutusunu kutuya ortalamak (18−L)/2 kadar kaydırıyor, bu da
       yalnızca L ÇİFT olduğunda tam sayı çıkıyor. Ölçümde 12/14/16/18 tam
       ortalıyor, 11/13/15 bir piksel kaçırıyor. Eşitlemek en sağlamı: fark 0,
       yuvarlanacak bir şey kalmıyor. Aynı kural: [[icon-text-integer-metrics]] */
    line-height: 18px;
    /* .num'ın negatif harf aralığı (-0,02em) son karakterden SONRA da
       uygulanıp ortalamayı 0,5px sağa kaydırıyordu. Tek rakamlık rozette
       tabular-nums'ın da faydası yok — sayı hizalaması gereken yer tablo. */
    letter-spacing: 0;
}
.fpanel__chev { transition: transform .25s ease; }
.fpanel.is-open .fpanel__chev { transform: rotate(180deg); }

/* Açılma: grid 0fr↔1fr — projenin katlanır bileşen deseni (bkz. .pkg-feats). */
.fpanel__body {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .3s cubic-bezier(.4, 0, .2, 1);
}
.fpanel.is-open .fpanel__body { grid-template-rows: 1fr; }
.fpanel__body > * { overflow: hidden; }
.fpanel__grid {
    /* 220px: altı alan bu genişlikte 3+3 kırılıyor. 170px'te 5+1 oluyordu ve
       tek başına kalan son alan hizasız görünüyordu. */
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px 14px; padding: 4px 16px 0;
    border-top: 1px solid var(--border);
    margin-top: 2px; padding-top: 16px;
}
.fpanel__acts { display: flex; justify-content: flex-end; gap: 10px; padding: 16px; }
/* Filtre yokken "Temizle" tıklanabilir görünmesin ama yerini de korusun. */
.fpanel__acts .is-disabled { opacity: .45; pointer-events: none; }

/* Ödemesiz mod anahtarı — PayTR kartının altında ayrı bir bölüm gibi dursun. */
.paybypass { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.paybypass .switch-row { align-items: flex-start; }
/* Açıklama alt satıra insin; anahtarın yanında tek satırda sıkışmasın. */
.paybypass__hint { display: block; margin-top: 3px; line-height: 1.45; }

/* --- Fatura bilgisi kartları (defter) --- */
.bcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }
.bcard {
    position: relative;
    border: 1px solid var(--border); border-radius: var(--r-lg);
    background: var(--surface); transition: border-color .15s, box-shadow .15s;
}
/* Seçili kart :has ile — radyo görünmez, işaret kartın kendisinde. */
.bcard:has(input:checked) {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 1px var(--brand-500);
}
.bcard:hover { border-color: var(--brand-300); }
.bcard__pick { display: block; cursor: pointer; padding: 13px 15px; }
/* Radyo GİZLENMEZ (display:none klavyeyle erişilemez yapar) — görsel olarak
   kaldırılır, odak halkası kartın kendisinde gösterilir. */
.bcard__pick input { position: absolute; opacity: 0; pointer-events: none; }
.bcard:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--brand-100); border-color: var(--brand-500); }
.bcard__main { display: block; }
.bcard__head { display: flex; align-items: center; gap: 8px; padding-right: 26px; }
.bcard__head b {
    font-size: 13.5px; font-weight: 650; color: var(--text); line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bcard__type {
    flex: none; font-size: 11px; font-weight: 600; line-height: 1.2;
    padding: 3px 7px; border-radius: 999px;
    background: var(--brand-50); color: var(--brand-700);
}
/* Değerler alt alta: adres uzun, yan yana dizilirse kart hizası bozulur. */
.bcard__lines {
    display: flex; flex-direction: column; gap: 3px;
    margin-top: 8px; font-size: 12.5px; color: var(--text-muted); line-height: 1.45;
}
.bcard__lines span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Eylemler tek küme: yönetim kipinde yıldız + kalem yan yana durur. */
.bcard__acts { position: absolute; top: 9px; inset-inline-end: 9px; display: flex; gap: 2px; }
.bcard__edit, .bcard__star {
    display: grid; place-items: center; width: 26px; height: 26px;
    border: none; border-radius: var(--r-sm); background: none;
    color: var(--gray-500); cursor: pointer; transition: background .15s, color .15s;
}
.bcard__edit:hover, .bcard__star:hover { background: var(--gray-100); color: var(--text); }
.bcard__edit [data-lucide], .bcard__star [data-lucide] { width: 14px; height: 14px; }
.bcard__star:hover { color: var(--warning-fg); }

/* --- Yönetim kipi (Ayarlar) ---
   Burada SEÇİM YOK. Kartlar radyoyla çiziliyor, kullanıcı birini seçiyor ve
   hiçbir şey olmuyordu; seçim yalnızca ödeme adımında bir işe yarıyor.
   Yerine kalıcı bir tercih var: varsayılan. */
.bcard__pick--static { display: block; padding: 13px 15px; }
.bcard--manage { cursor: default; }
.bcard--manage:hover { border-color: var(--border); }
.bcard--manage.is-default { border-color: var(--brand-500); box-shadow: 0 0 0 1px var(--brand-500); }
.bcard__def {
    flex: none; display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600; line-height: 1.2;
    padding: 3px 7px; border-radius: 999px;
    background: var(--warning-bg); color: var(--warning-fg);
}
/* Rozet ikinci rozet olduğu için başlığa daha çok yer gerekiyor. */
.bcard--manage .bcard__head { padding-right: 56px; flex-wrap: wrap; row-gap: 5px; }

/* Boş kutu: aynı ızgarada, kesikli çerçeveyle "buraya ekle" olduğu belli. */
.bcard--new {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-height: 108px; padding: 13px 15px;
    border: 1px dashed var(--gray-300); background: none;
    color: var(--brand-700); font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer;
}
.bcard--new:hover { border-color: var(--brand-500); background: var(--brand-50); }
.bcard__plus {
    display: grid; place-items: center; width: 30px; height: 30px;
    border-radius: 50%; background: var(--brand-50); color: var(--brand-600);
}
.bcard--new:hover .bcard__plus { background: var(--surface); }
.bcard__plus [data-lucide] { width: 16px; height: 16px; }
.bcards__empty {
    display: flex; align-items: center; gap: 7px;
    margin-top: 10px; font-size: 12.5px; color: var(--text-muted); line-height: 1.2;
}
.bcards__empty [data-lucide] { flex: none; color: var(--brand-600); }

/* Sil düğmesi ayakta solda durur: yıkıcı işlem onaylayıcıların yanında olmamalı. */
.bp-del { margin-inline-end: auto; color: var(--danger); }
.bp-del:hover { background: var(--danger-bg); color: var(--danger-fg); }

/* --- Ayak --- */
.sm-foot__price { display: flex; align-items: baseline; gap: 6px; margin-right: auto; }
.sm-foot__price b { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.sm-foot__price span { font-size: 12.5px; color: var(--text-muted); }

@media (max-width: 720px) {
    .sm-values { grid-template-columns: 1fr; gap: 18px; }
    .sm-hero { padding: 26px 20px 22px; }
    .sm-hero h3 { font-size: 20px; }
    .sm-foot__price { width: 100%; margin-bottom: 4px; }
}

/* Karar noktası: ret butonunun üstünde neyin kilitli kalacağı yazılı.
   Bilgi tonunda — uyarı kırmızısı ya da suçlayıcı vurgu YOK; amaç kullanıcıyı
   utandırmak değil, kararı bilerek vermesini sağlamak. */
.sm-decline { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
/* ÇOK SATIRLI ikon+metin — `align-items: center` DEĞİL.
   Metin ayak genişliğinde iki satıra sarıyor; `center` ikonu iki satırın
   ORTASINA koyuyor, yani ilk satırla hizasız duruyor. Projenin çok satırlı
   deseni (.sm-note, .order-card__note) flex-start + küçük margin-top:
   ikon ilk satırın optik ortasına oturur.
   (line-height 1.2 kuralı TEK SATIRLIK bileşenler için; burada 1.4 doğru.) */
.sm-decline__note {
    display: inline-flex; align-items: flex-start; gap: 6px;
    font-size: 12px; color: var(--text-muted); line-height: 1.4; text-align: right;
}
.sm-decline__note i {
    flex-shrink: 0; color: var(--gray-400);
    /* (12px × 1.4 = 16.8px satır kutusu − 13px ikon) / 2 ≈ 2px */
    margin-top: 2px;
}

@media (max-width: 720px) {
    .sm-decline { align-items: stretch; width: 100%; }
    .sm-decline__note { text-align: left; }
    .sm-decline .flex { flex-direction: column-reverse; }
    .sm-decline .btn { width: 100%; }
}

/* --- Kaydedilmemiş BEF AI üretimi (partials/ai_recover) ---------------------
   Bir UYARI değil, bir teslimat: kullanıcı zaten ödemiş, biz elinde olanı geri
   veriyoruz. Bu yüzden kırmızı/sarı değil marka rengiyle duruyor — panik değil
   hatırlatma. Formun en üstünde, ama form alanlarından açıkça ayrı bir kutuda:
   içindeki "Geri getir" bir kaydetme eylemi değil. */
.airec {
    border: 1px solid var(--brand-200);
    background: var(--brand-50);
    border-radius: var(--r-lg);
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 10px;
}
.airec__head { display: flex; align-items: flex-start; gap: 10px; }
.airec__badge {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--surface);
    color: var(--brand-600);
    box-shadow: var(--shadow-sm);
}
.airec__badge [data-lucide] { width: 15px; height: 15px; }
.airec__intro { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.airec__intro b { font-size: 13.5px; color: var(--gray-800); }
.airec__intro span { font-size: 12px; color: var(--text-subtle); }

.airec__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
/* Kutu BLOK, içindeki satır flex. Eskiden ikisi aynı elemandı ve açılır metin
   sarmalanan bir flex öğesiydi: kapalıyken yüksekliği sıfır oluyordu ama kabın
   `gap`'i yine de bir satır aralığı bırakıyordu — satırın altında sebepsiz
   görünen 10px'lik boşluk buydu. */
.airec__item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 7px 8px 7px 7px;
}
.airec__row { display: flex; align-items: center; gap: 10px; }

/* KUTU VARKEN NEGATİF BOŞLUK İPTAL. `.ptabs`ın `margin-top: -22px`i çubuğu
   gövdenin kenarına dayamak için; ama üstünde bir kutu varken o değer çubuğu
   kutunun ÜZERİNE bindiriyor (kutunun altı kırpılmış görünüyordu).
   `top` DEĞİŞMİYOR: yapışma yeri her iki durumda da aynı olmalı. */
.airec + .ptabs,
.airec + .ptab-panel { margin-top: 18px; }
/* Küçük kare önizleme: hangi görselden söz ettiğimiz metinle anlatılamaz.
   Kutu SPAN, içindeki büyütme düğmesi (.zoombtn) `inset: 0` ile kaplıyor —
   ölçüyü buradan alıyor, konum çıpası da burası. */
.airec__thumb {
    flex: 0 0 auto;
    position: relative;
    width: 44px; height: 44px;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--surface-alt);
    display: block;
}
.airec__icon {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-sm);
    background: var(--brand-50);
    color: var(--brand-600);
    border: 0; padding: 0;
}
.airec__icon [data-lucide] { width: 17px; height: 17px; }
/* Tıklanabilir olan METNİ olan satır: görseldeki büyütmenin karşılığı. */
.airec__icon--btn { cursor: pointer; transition: background .12s ease; }
.airec__icon--btn:hover { background: var(--brand-100); }
.airec__item.is-open .airec__icon--btn { background: var(--brand-600); color: #fff; }

/* AÇILIR METİN. Satırın ALTINDA tam genişlikte: yanına sıkıştırmak uzun bir
   açıklamayı iki kelimeye indirirdi, oysa gösterilme sebebi okunabilmesi.
   `grid-template-rows: 0fr → 1fr` yükseklik bilinmeden de geçiş yapabilen tek
   yol; `max-height` ile yapılsaydı ya metin kesilir ya geçiş takılırdı.

   KAPALIYKEN HİÇ YER KAPLAMAZ: kutunun kendi kenar boşluğu yok, iç boşluk da
   `overflow: hidden` katmanının içinde. Bu yüzden ayırıcı çizgi ve üst boşluk
   metnin kendisine veriliyor — kutuya verilseydi kapalıyken de görünürdü. */
.airec__text {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .16s ease;
}
.airec__text > div { overflow: hidden; }
.airec__item.is-open .airec__text { grid-template-rows: 1fr; }
.airec__text p {
    margin: 8px 0 0; padding: 8px 2px 2px;
    font-size: 12.5px; line-height: 1.5; color: var(--gray-700);
    border-top: 1px solid var(--border);
}
/* min-width:0 ŞART: taşan bağlam adı esnek kutuyu genişletip butonu dışarı
   itiyordu (flex öğesinin varsayılan min-width'i auto). */
.airec__meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.airec__meta b { font-size: 13px; color: var(--gray-800); }
.airec__meta span {
    font-size: 11.5px; color: var(--text-subtle);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.airec__item .btn { flex: 0 0 auto; }
/* "At" ikinci derece bir eylem: sessiz durur, üzerine gelinince kendini
   gösterir. Geri getirmekle eş ağırlıkta çizilseydi liste bir seçim ekranına
   dönerdi — oysa varsayılan eylem geri getirmek. */
.airec__drop { color: var(--text-subtle); }
.airec__drop:hover { color: var(--danger); background: var(--danger-bg); }

.airec__more {
    font-size: 11.5px; color: var(--text-subtle);
    padding-top: 2px;
}

@media (max-width: 480px) {
    /* Dar ekranda "Geri getir" alt satıra iniyor; sarmalama ve satır aralığı
       BURADA gerekiyor — geniş ekranda satır tek parça olduğu için değil. */
    .airec__row { flex-wrap: wrap; row-gap: 8px; }
    .airec__row .btn { width: 100%; }
}

/* --- BEF Kredi onay penceresi (aiOnay) --------------------------------------
   Genel "Emin misiniz?" penceresinden ayrı: orası bir CÜMLE gösteriyor, burada
   ise kullanıcının bilmesi gereken üç şey de SAYI (ne gidecek, ne kalacak,
   yetiyor mu). Sayılar cümlenin içine gömülünce okunmuyordu.

   Ton da farklı: kırmızı uyarı üçgeni yerine BEF AI'nın moru. Kredi harcamak
   tehlikeli bir işlem değil, bilinçli bir alışveriş — pencere de öyle durmalı. */
.aiask { padding: 22px 24px 18px; }
/* ÜSTTEN HİZALI, ORTALI DEĞİL.
   Ortalamada başlık ile konuyu birbirine yaklaştırmak zorundaydık: aralarındaki
   boşluk dış boşluğa yaklaştığı anda iki satır öbekleşmeyi bırakıyor, her biri
   ikonun bir kenarına işaret ediyordu. Yani ortalama, tam da aralarında boşluk
   istediğimiz yerde onu daraltmayı dayatıyordu.

   Üstten hizalayınca o kısıt kalkıyor: başlığın nerede başladığı belli
   (ikonun üst kenarı), aşağısı serbest — konu rahatça ayrılabiliyor. */
.aiask__head { display: flex; align-items: flex-start; gap: 13px; }
.aiask__mark {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, var(--brand-500), #7c3aed);
}
.aiask__mark [data-lucide] { width: 21px; height: 21px; }

/* Satır yükseklikleri piksel cinsinden — çarpan değil. Başlığın mürekkebi
   ikonun üst kenarından ~2px aşağıda başlıyor (20px'lik kutunun yarım satır
   aralığı kadar); bu, üst kenara tam yapışmasını engelleyen kasıtlı payıdır.
   Çarpan verilseydi yazı tipi değişince o pay kaybolurdu. */
.aiask__what { min-width: 0; display: flex; flex-direction: column; }
.aiask__title { font-size: 16px; line-height: 20px; font-weight: 650; color: var(--text); }
.aiask__subject {
    margin-top: 2px;
    font-size: 12.5px; line-height: 15px; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aiask__subject[hidden] { display: none; }

/* Sayı bloğu: bakılacak tek yer. Maliyet solda, sonrası sağda — kullanıcı
   "ne gidiyor / ne kalıyor" sorusunu tek bakışta cevaplıyor. */
.aiask__cost {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 14px; padding: 12px 14px;
    border: 1px solid var(--brand-200); background: var(--brand-50);
    border-radius: var(--r-md);
}
.aiask__price { font-size: 15px; font-weight: 650; color: var(--brand-700); }
.aiask__after { font-size: 12.5px; color: var(--text-subtle); text-align: right; }
.aiask__after[hidden] { display: none; }
.aiask__after .num { font-weight: 650; color: var(--text); }
/* Kredi yetmiyorsa blok sessizce kalmaz: renk de ton değiştirir. */
.aiask__cost:has(.is-short) { border-color: var(--danger); background: var(--danger-bg); }
.aiask__cost:has(.is-short) .aiask__price { color: var(--danger-fg); }
.aiask__after.is-short { color: var(--danger-fg); font-weight: 600; }
.aiask__after.is-short .num { color: var(--danger-fg); }

.aiask__note {
    margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted);
}
.aiask__note:empty { display: none; }

/* --- Yerleştirilmemiş masalar şeridi (masalar sayfası) ----------------------
   Yeni masa doğrudan plana konmuyor; burada bekliyor ve kullanıcı onu istediği
   yere sürüklüyor. Eskiden konumu sistem seçiyordu ve plan doluyken yeni masa
   mevcutların üstüne düşüyordu — "masa eklendi" deniyor ama ekranda değişen
   bir şey görünmüyordu.

   Kesik çerçeve BİLEREK: alanların (.zone) kesik çerçevesiyle aynı dil —
   "burası henüz kesinleşmemiş bir yer" demek. */
.tray {
    /* Sürüklerken metin seçilmesin ve dokunmatikte sayfa kaymasın. Bu iş
       eskiden `pointerdown` iptaliyle yapılıyordu, ama o dokunmatikte `click`
       olayını da yutuyor ve masa tıklanamaz hâle geliyordu. */
    user-select: none; touch-action: none;
    margin-bottom: 12px; padding: 10px 12px;
    border: 1px dashed var(--border-strong); border-radius: var(--r-md);
    background: var(--surface-alt);
}
.tray__head {
    display: flex; align-items: center; gap: 7px; margin-bottom: 9px;
    font-size: 12.5px; font-weight: 600; color: var(--text-muted);
}
.tray__head [data-lucide] { color: var(--brand-600); flex: none; }

/* BOŞKEN GİZLİ, SÜRÜKLERKEN GÖRÜNÜR. Şerit DOM'da duruyor çünkü masayı
   plandan çıkarmak için bırakılacak bir hedef gerekiyor; ama boş bir kutuyu
   sürekli göstermek planın üstünde boşuna yer kaplardı. */
.tray.is-empty { display: none; }
.tray.is-empty.is-armed { display: block; }
/* Üzerine gelindiğinde hedef olduğu belli olsun. */
.tray.is-target { border-color: var(--brand-500); background: var(--brand-50); }

/* İpucu YALNIZCA boş şeritte: masa varken ne olduğu zaten görünüyor. */
.tray__hint { display: none; font-size: 12.5px; color: var(--text-subtle); }
.tray.is-empty .tray__items { display: none; }
.tray.is-empty .tray__hint { display: block; }
/* SATIRA SIĞMAYAN ALT SATIRA GEÇER.
   Önce yatayda kayıyordu ve kaydırma çubuğu gizliydi: taşan masalar
   ulaşılabilir ama GÖRÜNMEZ oluyordu — kullanıcı 15'ten sonrasının silindiğini
   sanıyordu. Yatay kaydırma zaten fark edilmesi en zor davranış; burada hiçbir
   işareti olmayınca büsbütün görünmez kalıyordu.

   Sarmalama, bekleyen masaların TAMAMINI göstererek sorunu kökünden çözüyor:
   şerit bir bekleme yeri, orada ne olduğunu görmek onun tek işi.

   Üst sınır üç satır: yüzlerce masa eklenirse şerit planı ekrandan itmesin.
   O noktada dikey kaydırma devreye giriyor ve çubuğu GİZLEMİYORUZ — taşmayı
   görünmez kılan hata tam olarak buydu. */
.tray__items {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    max-height: 188px; overflow-y: auto; padding: 2px;
}

/* Şeritteki masa SABİT ölçüde. Gerçek ölçüsü tuval genişliğinin yüzdesi, ama
   şeritte tuval yok — yüzde burada başka bir şeye çözülür ve masa rastgele bir
   boyda görünürdü. Gerçek ölçüsünü sürüklenirken alıyor. */
.tray__tbl {
    position: static; transform: none;
    width: 54px; height: 54px; flex: 0 0 auto;
    z-index: auto;
}
.tray__tbl .tbl__no { font-size: 16px; }
/* Kaldırılan masa imlecin altında serbest yüzer; tuvale girene kadar
   yerleşmemiş sayılıyor. `pointer-events: none` şart — altındaki tuvali
   hedef olarak görebilmemiz için. */
.tbl.is-lifted {
    position: fixed; margin: 0; z-index: 200;
    pointer-events: none; cursor: grabbing;
    box-shadow: var(--shadow-lg);
    transform: translate(-50%, -50%);
}
/* Sürükleme tuvalin üzerindeyken hedef belli olsun — ve o noktaya
   bırakılamıyorsa bu da bırakmadan ÖNCE görünsün. */
.plan.is-drop    { outline: 2px dashed var(--brand-400); outline-offset: -3px; }
.plan.is-drop-no { outline: 2px dashed var(--danger); outline-offset: -3px; }
.tbl.is-blocked  { opacity: .55; border-color: var(--danger); }
/* Bekleyen masa sayısı: liste üç satırı aşıp kayınca da görünür kalır. */
.tray__count {
    display: inline-grid; place-items: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px; background: var(--brand-100); color: var(--brand-700);
    font-size: 11.5px; font-weight: 700;
}

/* --- Masa hızlı eylemleri (sağ tık) ----------------------------------------
   Masayla ilgili her iş düzenleme çekmecesinden geçiyordu: şekli değiştirmek,
   QR almak, silmek için paneli açıp kapatmak gerekiyordu. Yerleşim düzenlerken
   bunlar tek tık uzakta olmalı.

   BODY'ye ekleniyor, masanın içine değil: tuval `overflow: hidden` ve kenardaki
   bir masanın menüsü kırpılırdı. Konumu JS ölçüp yerleştiriyor. */
.ctxmenu {
    position: fixed; z-index: 300;
    min-width: 190px; padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
}
.ctxmenu__head {
    padding: 5px 10px 7px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
    color: var(--text-subtle); text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}
/* Satırlar projenin dropdown dilinden geliyor (.dropdown-item): ayrı bir görsel
   dil kurmak, aynı işi yapan iki menü türü demekti. */
/* QR alt menüsü. Logolu/logosuz iki ayrı satır olarak dizilince menünün yarısı
   QR'a ayrılıyor ve asıl eylemler arasında kayboluyordu; alt menü ikisini tek
   başlık altında topluyor. */
.ctxsub { position: relative; }
.ctxsub__arrow { margin-left: auto; opacity: .55; }
.ctxsub__panel {
    display: none;
    position: absolute; top: -6px; left: 100%; z-index: 1;
    min-width: 150px; padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
}
/* Üzerine gelince VE tıklayınca: dokunmatik cihazda `hover` yok, yalnızca
   hover'a bağlı bir menü orada hiç açılmazdı. */
.ctxsub:hover > .ctxsub__panel,
.ctxsub.is-open > .ctxsub__panel { display: block; }
.ctxsub:hover > .dropdown-item,
.ctxsub.is-open > .dropdown-item { background: var(--gray-100); }
/* Sağ kenara yakınken sola açılır (sınıfı JS ölçüp koyuyor). */
.ctxsub--left > .ctxsub__panel { left: auto; right: 100%; }

/* --- Yeni masa varsayılanları penceresi ------------------------------------
   ÜST BOŞLUK ALTTAKİNDEN AZ. Gövdenin dolgusu her yönde 24px'ti ama görsel
   olarak üst taraf daha boş duruyordu: en üstteki öğe bir ETİKET (kendi satır
   aralığı var), en alttaki ise küçük punto bir ipucu. Kutu ölçüleri eşitken
   mürekkep arası eşit değildi; dengeyi kuran şey dolgunun kendisi değil,
   içeriğin bıraktığı pay. */
.modal__body.pm { padding-top: 18px; }
.pm { display: flex; flex-direction: column; gap: 18px; }
/* AÇILIP KAPANIR. `hidden` ile anında gidip geliyordu; ölçü kaydırıcısı
   ekranda birden belirince kullanıcı neyin değiştiğini bir kare içinde
   yakalamak zorunda kalıyordu.

   Geçiş `grid-template-rows: 0fr → 1fr` ile: içeriğin yüksekliği önceden
   bilinmiyor (önizleme + kaydırıcı + satır), `max-height` ile yapılsaydı ya
   kesilir ya da geçiş takılırdı. Üst boşluk İÇERİDE, yoksa kapalıyken de
   yer kaplardı. */
.pm-size {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .18s ease, opacity .18s ease;
    opacity: 0;
}
.pm-size.is-open { grid-template-rows: 1fr; opacity: 1; }
.pm-size__in { overflow: hidden; }
.pm-size.is-open .pm-size__in { padding-top: 12px; }

/* ÖNİZLEME ŞERİDİ. Tuvalin 16/9 minyatürü değil, yalnızca GENİŞLİK ekseni:
   ölçü zaten tuval genişliğinin yüzdesi, dolayısıyla masanın şeride oranı
   plandaki oranın birebir aynısı. Yükseklik SABİT — ilk denemede önizleme
   büyüdükçe pencere de büyüyor, düğmeler kayıyordu. */
.pm-prev {
    position: relative; height: 76px; margin-bottom: 14px;
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface-alt);
    background-image:
        linear-gradient(rgba(15,23,42,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,.045) 1px, transparent 1px);
    background-size: 10% 25%;
    overflow: hidden;
}
.pm-prev__tbl {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    /* Yüzde ŞERİDE göre çözülüyor; şerit de tuvalin genişliğini temsil ettiği
       için sonuç plandaki oranla aynı. */
    width: 4%; aspect-ratio: 1;
    border: 2px solid var(--brand-500);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: width .1s ease, border-radius .1s ease;
}
.pm-cap {
    font-size: 12px; color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
    margin-top: 8px;
}

/* --- Diller sayfası --------------------------------------------------------
   Dil seçimi "Menüm" sayfasının bir sekmesindeydi: adı hiçbir yerde geçmediği
   için özellik bulunamıyor, bulunduğunda da dil eklemenin doğurduğu çeviri işi
   hiç görünmüyordu. Seçim ve sonucun aynı ekranda olması bu yüzden. */
.lang-main {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: var(--r-md);
    background: var(--surface-alt); border: 1px solid var(--border);
    font-size: 13px; color: var(--text-muted);
}
.lang-main__code {
    display: inline-grid; place-items: center;
    min-width: 34px; height: 24px; padding: 0 7px;
    border-radius: var(--r-sm); background: var(--brand-600); color: #fff;
    font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
}

/* ---- Genel özet ----
   Sekiz satırı tek tek toplayıp "ne kadarı bitti?" sorusunu kullanıcıya
   hesaplatmak yerine cevabı doğrudan veriyoruz. Eylem düğmesi de burada,
   çünkü karar bu rakama bakılarak veriliyor. */
.lsum {
    display: flex; align-items: center; gap: 18px;
    padding: 16px 18px; margin-bottom: 16px;
    border-radius: var(--r-lg);
    background: var(--brand-50); border: 1px solid var(--brand-200);
}
.lsum.is-done { background: var(--success-bg); border-color: var(--success-bg); }
/* Halka: yüzdeyi çubuktan daha okunur kılıyor ve özeti satırlardan ayırıyor.
   `--p` PHP'den geliyor; conic-gradient tek özellikle dolum çiziyor. */
.lsum__ring {
    flex: 0 0 auto; width: 68px; height: 68px; border-radius: 50%;
    display: grid; place-items: center;
    background: conic-gradient(var(--brand-500) calc(var(--p) * 1%), var(--brand-100) 0);
}
.lsum.is-done .lsum__ring { background: conic-gradient(var(--success) calc(var(--p) * 1%), #fff 0); }
/* ALT ALTA — ama SATIR ARALIKLARI SIKILMIŞ hâlde.
   İlk hâlinde de alt altaydı ve bozuk görünüyordu; sebebi dizilim değil,
   satırların varsayılan aralığıydı: iki satır kutusu kendi boşluklarını da
   getirince rakamla işaret arasında kocaman bir aralık kalıyor, ikili bir
   bütün gibi okunmuyor ve dairenin ortasından kayıyordu.

   `line-height: 1` her iki satırı da mürekkebine indiriyor, aradaki tek
   boşluğu da biz veriyoruz (2px). Böylece yığın 29px oluyor ve 54px'lik
   dairede altta üstte eşit pay kalıyor. */
.lsum__ring span {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 54px; height: 54px; border-radius: 50%;
    background: var(--surface);
    font-size: 18px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--text);
}
.lsum__ring small {
    margin-top: 2px;
    font-size: 9.5px; font-weight: 700; line-height: 1; letter-spacing: .04em;
    color: var(--text-subtle);
}
.lsum__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lsum__text b { font-size: 15px; }
/* DOĞRUDAN ÇOCUK. Torun seçici olarak yazılmıştı ve başlıktaki `<span
   class="num">759</span>` da bu kurala giriyordu: sayı hem soluk hem küçük
   çıkıyor, cümlenin en önemli parçası en sönük parçası oluyordu. */
.lsum__text > span { font-size: 12.5px; color: var(--text-muted); }
/* Sayı cümlenin taşıyıcısı: bir tık iri ve marka renginde. */
.lsum__text b .num { font-size: 17px; color: var(--brand-700); margin-inline-end: 2px; }
.lsum__cta { flex: 0 0 auto; }

/* ---- Dil satırları ---- */
.langstat { display: flex; flex-direction: column; gap: 8px; }
.lrow { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.lrow.is-open { border-color: var(--brand-300); }
.lrow.is-done { background: var(--surface-alt); }

/* Satırın TAMAMI açma düğmesi: eksik olan dilde kullanıcının bir sonraki
   sorusu hep "hangileri?" — o yüzden hedef küçük bir ok değil, satır. */
.lrow__head {
    display: grid;
    grid-template-columns: 40px minmax(96px, 1fr) auto 120px 42px 18px;
    align-items: center; gap: 12px;
    width: 100%; padding: 12px 14px;
    border: 0; background: none; font: inherit; color: inherit; text-align: start;
    cursor: pointer; transition: background .12s ease;
}
.lrow__head:hover:not(:disabled) { background: var(--gray-50); }
.lrow__head:disabled { cursor: default; }

.lrow__code {
    display: grid; place-items: center; height: 24px;
    border-radius: var(--r-sm); background: var(--brand-50); color: var(--brand-700);
    font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.lrow.is-done .lrow__code { background: var(--success-bg); color: var(--success-fg); }
.lrow__name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tür kırılımı ÇİP olarak: düz metinken hepsi aynı ağırlıktaydı ve göz eksik
   olanı bulamıyordu. Tamamlananlar sessiz, eksik olanlar işaretli. */
.lrow__types { display: flex; flex-wrap: wrap; gap: 6px; }
.ltag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 500;
    background: var(--gray-100); color: var(--text-subtle);
}
.ltag b { font-weight: 700; }
.ltag.is-missing { background: var(--warning-bg); color: var(--warning-fg); }
.ltag.is-done { background: var(--success-bg); color: var(--success-fg); }

/* Çubuk SINIRLI genişlikte. Sayfa boyunca uzatıldığında %6'lık dolum
   kaybolup satır boş görünüyordu. */
.lrow__bar { height: 6px; border-radius: 999px; background: var(--gray-200); overflow: hidden; }
.lrow__bar span { display: block; height: 100%; background: var(--brand-500); border-radius: inherit; }
.lrow.is-done .lrow__bar span { background: var(--success); }
.lrow__pct { text-align: right; font-size: 12.5px; font-weight: 650; }
.lrow__chev { width: 18px; height: 18px; color: var(--text-subtle); transition: transform .16s ease; }
.lrow.is-open .lrow__chev { transform: rotate(180deg); }
.lrow__ok { width: 18px; height: 18px; color: var(--success); }

/* Açılır alan: yükseklik bilinmiyor (liste sunucudan geliyor) → 0fr/1fr. */
.lrow__panel {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .2s ease;
}
.lrow.is-open .lrow__panel { grid-template-rows: 1fr; }
.lrow__clip { overflow: hidden; }

/* ---- Eksik kalem listesi ---- */
.lmiss { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 14px; }
.lmiss__wait { padding: 14px; font-size: 12.5px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
.lmiss__t { font-size: 11.5px; font-weight: 700; color: var(--text-subtle); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 7px; }
.lmiss__t .num { color: var(--warning-fg); }
.lmiss__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
/* Kalem TIKLANABİLİR: kullanıcı listeden doğrudan eksiği doldurmaya geçebilmeli,
   arada bir arama adımı olmamalı. */
.lmiss__i {
    display: inline-flex; align-items: baseline; gap: 6px;
    max-width: 100%; padding: 5px 10px;
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface); font-size: 12.5px; text-align: start;
    transition: border-color .12s ease, background .12s ease;
}
.lmiss__i:hover { border-color: var(--brand-400); background: var(--brand-50); }
.lmiss__i span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lmiss__i small { font-size: 11px; color: var(--text-subtle); flex: none; }
.lmiss__more { margin-top: 7px; font-size: 11.5px; color: var(--text-subtle); }

@media (max-width: 900px) {
    /* Dar ekranda çipler ve çubuk aynı satıra sığmıyor: kimlik üstte,
       ölçüm altta. */
    .lrow__head {
        grid-template-columns: 40px 1fr 42px 18px;
        grid-template-areas: "code name pct chev" "types types types types" "bar bar bar bar";
        gap: 8px 12px;
    }
    .lrow__code { grid-area: code; } .lrow__name { grid-area: name; }
    .lrow__types { grid-area: types; } .lrow__bar { grid-area: bar; }
    .lrow__pct { grid-area: pct; } .lrow__chev, .lrow__ok { grid-area: chev; }
    .lsum { flex-wrap: wrap; }
    .lsum__cta { width: 100%; }
}

/* --- Dil eklendikten sonraki karşılama penceresi --- */
.lw { display: flex; flex-direction: column; gap: 16px; }
.lw__head { display: flex; align-items: center; gap: 13px; }
.lw__mark {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, var(--brand-500), #7c3aed);
}
.lw__head > div { display: flex; flex-direction: column; min-width: 0; }
.lw__head b { font-size: 16px; line-height: 20px; font-weight: 650; }
/* DOĞRUDAN ÇOCUK. `.lw__head span` olarak yazılmıştı ve yuvarlak işaretin
   kendisi de bir `span` olduğu için onu da yakalıyordu: `.lw__mark`'ın
   `color: #fff` kuralını özgüllükle yenip ikonu gri yapıyordu (ölçüldü:
   rgb(100,116,139)). */
.lw__head > div > span { font-size: 12.5px; line-height: 15px; color: var(--text-muted); }

/* Sayı BÜYÜK: "çeviri gerekiyor" cümlesi soyut, rakam işin büyüklüğünü
   tarttırıyor ve BEF AI teklifini de anlamlı kılıyor. */
/* Sayı ile etiket TABAN ÇİZGİSİNDEN hizalı, kutu ortasından değil: rakamın
   kutusu 30px, etiketinki 19px — ortadan hizalanınca rakam metnin altına
   sarkıyordu.

   ETİKET TEK SATIR. İki satıra bölünmüştü ("çevrilmeyi bekleyen içerik" /
   "9 dilde"): kutunun sağ yarısı boş kalıyor, yükseklik iki katına çıkıyor ve
   ikinci satır ilk satırın devamı mı ayrı bir bilgi mi belli olmuyordu. */
.lw__stat {
    display: flex; align-items: baseline; gap: 11px;
    /* Dolgu eşit değil, MÜREKKEP eşit: rakamın büyük harf tepesi kutunun
       üstünden 18px, etiketin inişli harfleri (ç, y) altından 16px kalıyordu.
       Üstten 1 alınıp alta verildi → 17/17. */
    padding: 13px 16px 15px; border-radius: var(--r-md);
    background: var(--brand-50); border: 1px solid var(--brand-200);
}
.lw__num { font-size: 30px; font-weight: 700; line-height: 1; color: var(--brand-700); }
.lw__lbl { font-size: 13.5px; color: var(--text-muted); line-height: 19px; }
.lw__lbl b { font-weight: 600; color: var(--text); }

.lw__where { font-size: 13px; color: var(--text-muted); line-height: 1.55; }
.lw__where > b { display: block; font-size: 13.5px; color: var(--text); margin-bottom: 5px; }
.lw__where p { margin: 0; }
.lw__where p b { color: var(--text); font-weight: 600; }

.lw__ai {
    padding: 13px 15px; border-radius: var(--r-md);
    border: 1px solid var(--brand-200);
    background: linear-gradient(100deg, rgba(31,79,245,.05), rgba(124,58,237,.05));
}
.lw__ai-t { font-size: 13.5px; font-weight: 650; margin-bottom: 4px; }
.lw__ai p { margin: 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
/* Çeviriler sekmesinde dil başına durum. Beş dilli bir üründe hangisinin
   doldurulmadığı ancak akordiyonlar tek tek açılarak görülüyordu; sekmenin
   tamamı sessizdi. Ölçüt Diller sayfasındakiyle aynı: kaynakta boş olan alan
   eksik sayılmaz, yoksa açıklaması olmayan ürün hep "eksik" kalırdı. */
.tr-lang__state {
    margin-inline-start: auto; flex: none;
    padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .01em;
}
.tr-lang__state.is-done    { background: var(--success-bg); color: var(--success-fg); }
.tr-lang__state.is-missing { background: var(--warning-bg); color: var(--warning-fg); }

/* AYIRAÇ NOKTASI — çizilmiş, yazı karakteri değil.
   "·" karakterinin dikey konumu yazı tipinin metriklerinden geliyor ve çoğu
   yüzde satır ortasına denk gelmiyor; punto ya da yazı tipi değişince de
   kayıyor. Çizilen nokta `vertical-align: middle` ile her koşulda ortada. */
.sep-dot {
    display: inline-block; width: 3px; height: 3px; border-radius: 50%;
    background: currentColor; opacity: .45;
    vertical-align: middle;
    margin: 0 7px;
}

/* --- Çeviri ekranı ---------------------------------------------------------
   Çeviri KALEM BAZLI DEĞİL, DİL BAZLI yapılan bir iş: kimse bir ürünü açıp
   sekiz dilini doldurmuyor, "menüyü Almancaya çevireyim" diye oturuyor.

   AKIŞ: dil → içerik türü → kalemler. Menünün tamamını tek sayfaya dökmek iki
   kez denendi (düz liste, sonra kategori bölümleri); ikisi de iki yüze yakın
   kutuyla duvar oldu. Bir de kaynak metin çeviri kutusunun YANINDAYDI: ad tek
   satır, açıklama üç satır, alerjen yarım satır olduğu için iki sütun hiçbir
   zaman hizalanmadı. Artık kaynak kutunun ÜSTÜNDE. */

/* Dil şeridi — çevirmen bir dili bitirip ötekine geçiyor; her seferinde Diller
   sayfasına dönmek o akışı kesiyordu.

   İKİ PARÇALIYDI: solda kutu içinde kod ("PT"), yanında ad. Sekiz dil yan yana
   dizilince ekran on altı parçaya bölünüyordu ve kod da bir şey anlatmıyordu —
   "Português" zaten kendini söylüyor. Kodun yeri DURUM NOKTASI aldı: hangi
   dilde iş kaldığı şeritten okunuyor. */
.twlangs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.twlang {
    display: inline-flex; align-items: center; gap: 8px;
    /* 34 − 14 = 20 ve 34 − 8 = 26: hem yazı hem nokta tam piksele oturuyor
       (bkz. `.twrow`). */
    height: 34px; padding: 0 13px;
    border: 1px solid var(--border); border-radius: var(--r-full);
    background: var(--surface); color: var(--text-muted);
    font-size: 13px; line-height: 14px; text-decoration: none;
    transition: border-color .14s ease, color .14s ease, background-color .14s ease;
}
.twlang:hover { border-color: var(--brand-300); color: var(--text); }
.twlang.is-on {
    border-color: var(--brand-500); background: var(--brand-50);
    color: var(--brand-700); font-weight: 600;
}
/* Nokta İÇİ BOŞ başlıyor, yarım kalanda sarı, bitince yeşil doluyor: yalnızca
   renk farkı olsaydı ekranı uzaktan tarayan göz ayırt edemezdi. */
/* Pildeki nokta da HARFLERİN ortasına hizalı, pilin ortasına değil: hedef
   merkez pil başından 17,5px, o yüzden nokta tek boyutlu (9px) ve üstten
   1px kenarlık + 12px ile 13–22 arasına oturuyor. Bkz. `.twrow__dot`. */
.twlang__dot {
    flex: 0 0 auto; width: 9px; height: 9px;
    border-radius: var(--r-full); border: 1.5px solid var(--gray-300);
    align-self: flex-start; margin-top: 12px;
}
.twlang.is-part .twlang__dot { border-color: var(--warning, #d97706); background: var(--warning, #d97706); }
.twlang.is-done .twlang__dot { border-color: var(--success); background: var(--success); }

/* ---- Tür kutuları (giriş) ---- */
.thub { display: flex; flex-direction: column; gap: 10px; }
.thub__c {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto 18px;
    align-items: center; gap: 16px;
    padding: 16px 18px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    text-decoration: none; color: inherit;
    transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
a.thub__c:hover { border-color: var(--brand-300); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.thub__ico {
    width: 44px; height: 44px; border-radius: var(--r-md);
    display: grid; place-items: center;
    background: var(--brand-50); color: var(--brand-600);
}
.thub__ico [data-lucide] { width: 21px; height: 21px; }
.thub__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.thub__t { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.thub__h { font-size: 12.5px; color: var(--text-muted); }
/* Sayı ve çubuk ALT ALTA: yan yana dizildiğinde satır yüksekliği türden türe
   değişiyor ve kutular birbirini tutmuyordu. */
.thub__st { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; width: 120px; }
.thub__n { font-size: 13px; font-weight: 700; color: var(--text); }
.thub__bar { width: 100%; height: 6px; border-radius: var(--r-full); background: var(--gray-200); overflow: hidden; }
.thub__bar span { display: block; height: 100%; background: var(--brand-500); border-radius: inherit; }
.thub__chev { width: 18px; height: 18px; color: var(--text-subtle); }
.thub__c.is-done .thub__ico { background: var(--success-bg, rgba(22,163,74,.10)); color: var(--success); }
.thub__c.is-done .thub__bar span { background: var(--success); }
.thub__c.is-done .thub__chev { color: var(--success); }
/* İçeriği olmayan tür tıklanmıyor: boş listeye götürmek yerine sebebini yazıyoruz. */
.thub__c.is-empty { grid-template-columns: 44px minmax(0, 1fr); background: var(--surface-alt); }
.thub__c.is-empty .thub__ico { background: var(--gray-100); color: var(--text-subtle); }
.thub__sum { margin-top: 16px; font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.thub__sum b { color: var(--text); font-weight: 650; }

/* ---- Kalem ekranı: solda liste, sağda alanlar ---- */
.twe__wrap { display: grid; grid-template-columns: 288px minmax(0, 1fr); gap: 16px; align-items: start; }

.twe__rail {
    position: sticky; top: calc(var(--header-h) + 16px);
    display: flex; flex-direction: column;
    max-height: calc(100dvh - var(--header-h) - 56px);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    overflow: hidden;
}
.twrail__top { padding: 12px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.twrail__search { position: relative; }
.twrail__search [data-lucide] {
    position: absolute; inset-inline-start: 10px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; color: var(--text-subtle); pointer-events: none;
}
.twrail__search .input { padding-inline-start: 31px; }
.twrail__filter { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-muted); cursor: pointer; }

.twrail__list { flex: 1; overflow-y: auto; padding: 8px; }
.twrail__g.is-hidden { display: none; }
.twrail__g + .twrail__g { margin-top: 10px; }
.twrail__gt {
    font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--text-subtle); padding: 6px 8px 4px;
}
/* NOKTA SATIR KUTUSUNA DEĞİL, HARFLERİN ORTASINA HİZALI.
   `align-items: center` noktayı satır kutusunun ortasına koyuyor; ama harflerin
   görsel ortası bundan hep 0,5px AŞAĞIDA: satır kutusu 3px'lik alt uzantı payını
   da taşıyor, "Türk Kahvesi" ise onu kullanmıyor. Chrome'da ölçüldü — nokta
   merkezi satır başından 17,0; büyük harf ortası 17,5.

   Hesap (13px Inter): metin kutusu 16px (üst 13 + alt 3), büyük harf yüksekliği
   9px. Satır yüksekliği 21 → yarım aralık 2,5 → taban çizgisi 7 + 2,5 + 13 = 22,5
   → harf ortası 22,5 − 4,5 = 18. Nokta 8px olduğu için üstten 14px: 14–22 arası,
   ikisi de tam sayı. */
.twrow {
    width: 100%; display: grid; grid-template-columns: 9px minmax(0, 1fr); align-items: center; gap: 9px;
    padding: 7px 9px; border: 0; border-radius: var(--r-sm); background: none;
    font-size: 13px; line-height: 21px; color: var(--text-muted); text-align: start; cursor: pointer;
}
/* Satırlar ARALIKLI: bitişik dizildiklerinde seçili satırın zemini üstündeki
   satırın hover zeminine yapışıyor, iki vurgu tek blok gibi okunuyordu. */
.twrow + .twrow { margin-top: 3px; }
.twrow:hover { background: var(--gray-50); color: var(--text); }
.twrow.is-hidden { display: none; }
.twrow.is-on { background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
/* Nokta ÜÇ DURUMLU: boş (hiç başlanmamış), sarı (yarım), yeşil (tamam). İki
   durumda yarım kalan kalem hiç dokunulmamışla aynı görünüyordu. */
.twrow__dot {
    /* NOKTA 9px, ÇÜNKÜ HEDEF MERKEZ YARIM PİKSELDE. Harflerin ortası satır
       başından 17,5px'e düşüyor (Chrome'da ölçüldü). Çift boyutlu bir nokta o
       merkeze oturunca kenarları yarım piksele biner; tek boyutlu nokta hem
       merkeze tam oturuyor hem kenarları tam sayıda kalıyor: 13 → 22. */
    width: 9px; height: 9px; border-radius: var(--r-full); border: 1.5px solid var(--gray-300);
    align-self: start; margin-top: 6px;   /* 13 − 7 dolgu */
}
.twrow.is-part .twrow__dot { border-color: var(--warning, #d97706); background: var(--warning, #d97706); }
.twrow.is-done .twrow__dot { border-color: var(--success); background: var(--success); }
.twrow__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.twrail__none { padding: 14px 10px; font-size: 12.5px; color: var(--text-subtle); }

/* SAYI TEK KUTUDA. Parçaları (rakam, "/", rakam, "çevrildi") doğrudan ızgaraya
   bırakmak, her birini AYRI HÜCREYE düşürüyordu: iki sütunluk ızgarada rakamlar
   alt alta diziliyor, çubuk da başka bir satıra kaçıyordu. */
/* SATIR YÜKSEKLİĞİ TAM SAYI VE ÇUBUKLA AYNI PARİTEDE. 12,5px yazının
   varsayılan satır kutusu 18,75px'e düşüyordu; 6px'lik çubuk bunun ortasına
   konunca üstte 6,375 altta 6,375 kalıyor ve çubuk yarım piksele oturup aşağı
   kaymış görünüyordu. 18 − 6 = 12, yani iki yana 6'şar tam piksel. */
.twrail__foot {
    padding: 10px 12px; border-top: 1px solid var(--border); background: var(--surface-alt);
    font-size: 12.5px; line-height: 18px; color: var(--text-muted);
    display: flex; align-items: center; gap: 10px;
}
.twrail__n { flex: 0 0 auto; white-space: nowrap; line-height: 18px; }
.twrail__foot .num { font-weight: 700; color: var(--text); }
.twrail__bar {
    flex: 1; min-width: 40px; height: 6px;
    border-radius: var(--r-full); background: var(--gray-200); overflow: hidden;
}
.twrail__bar span { display: block; height: 100%; background: var(--success); border-radius: inherit; }

/* ---- Seçili kalem ---- */
.twp { display: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.twp.is-on { display: block; }
.twp__head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.twp__ttl { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.twp__t { font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em; }
.twp__g { font-size: 12px; color: var(--text-subtle); }
.twp__body { padding: 20px; }

/* Alan: ETİKET → KAYNAK → KUTU, hep aynı sırada ve aynı boşlukla. */
.twf + .twf { margin-top: 16px; }
.twf__lbl {
    font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--text-subtle); margin-bottom: 5px;
}
.twf__src {
    font-size: 13.5px; line-height: 1.5; color: var(--text-muted);
    background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-sm);
    padding: 8px 11px; margin-bottom: 7px;
}
.twf .input, .twf .textarea { width: 100%; }

/* Alerjen ve varyasyon adları kısa; tek sütunda dizilince ekran gereksiz
   uzuyordu. */
.twp__sec {
    margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border);
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--text-subtle); margin-bottom: 12px;
}
.twp__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.twp__grid .twf + .twf { margin-top: 0; }

.twp__nav {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface-alt);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.twp__pos { font-size: 12.5px; color: var(--text-muted); font-weight: 650; }
.twp__empty {
    padding: 40px 20px; text-align: center; font-size: 13px; color: var(--text-muted);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
}

/* Kaydetme çubuğu ORTAK `.savebar`: kirliyken alttan beliriyor (bkz. Menüm
   ayarları). Bu ekranda sürekli duran ayrı bir çubuk vardı; kaydedecek bir şey
   yokken de yer kaplıyor ve uyarıyı görünmez kılıyordu. */

@media (max-width: 1000px) {
    /* Dar ekranda liste yana sığmıyor: üste alınıyor ve kendi içinde kayıyor. */
    .twe__wrap { grid-template-columns: minmax(0, 1fr); }
    .twe__rail { position: static; max-height: 320px; }
    .twp__grid { grid-template-columns: minmax(0, 1fr); }
    .twp__grid .twf + .twf { margin-top: 0; }
}

@media (max-width: 640px) {
    .thub__c { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; padding: 14px; }
    .thub__st { width: 84px; }
    .thub__chev { display: none; }
}

/* --- Sadakat (panel) -------------------------------------------------------
   Ekranın merkezinde liste değil ARAMA var: damgayı kasadaki personel veriyor
   ve bunu müşteri sırada beklerken yapıyor. Düzen buna göre — arama kutusu
   büyük, seçilen üyenin kartları tek dokunuşluk düğmelerle geliyor. */
/* `.lystat` KALDIRILDI: üç sayı için üç büyük kutu, altı yüz piksel genişlik.
   Yerini projenin `.stat` kartı aldı — panelin her yerinde aynı bileşen. */

/* Nasıl çalışır adımları: kart tanımlı ama ilk üye gelmemişken kasanın yerinde
   duruyor. */
.lysteps { display: flex; flex-direction: column; gap: 12px; }
.lystep { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; }
.lystep__n {
    width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    background: var(--brand-50); color: var(--brand-700); font-size: 12.5px; font-weight: 700;
}
.lystep > div { display: flex; flex-direction: column; gap: 2px; }
.lystep b { font-size: 13.5px; font-weight: 650; }
.lystep span { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }

.ly-empty { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 20px; }
.ly-empty__ico {
    width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
    background: var(--brand-50); color: var(--brand-600);
}
.ly-empty__ico [data-lucide] { width: 22px; height: 22px; }
.ly-empty b { font-size: 15px; }
.ly-empty p { font-size: 13px; color: var(--text-muted); max-width: 460px; line-height: 1.55; }

/* Arama kutusu BÜYÜK: kasada tek elle, telaşla kullanılıyor. */
.tillsearch { position: relative; }
.tillsearch [data-lucide] {
    position: absolute; inset-inline-start: 13px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; color: var(--text-subtle); pointer-events: none;
}
.tillsearch .input { height: 48px; font-size: 15px; padding-inline-start: 40px; }

.tilllist { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.tilllist__none { padding: 16px 4px; font-size: 13px; color: var(--text-muted); }
.tillrow {
    display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: center; gap: 12px; width: 100%;
    padding: 10px 12px; border: 0; border-radius: var(--r-md); background: none;
    text-align: start; cursor: pointer; font-size: 13.5px; line-height: 20px;
}
.tillrow:hover { background: var(--gray-50); }
.tillrow__code {
    font-weight: 700; letter-spacing: .04em; color: var(--brand-700);
    background: var(--brand-50); border-radius: var(--r-sm); padding: 3px 0; text-align: center;
}
.tillrow__n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tillrow__m { color: var(--text-muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tillmember { margin-top: 14px; }
.tillmember__h {
    display: flex; align-items: center; gap: 13px;
    padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px;
}
.tillmember__code {
    font-size: 15px; font-weight: 700; letter-spacing: .05em; color: var(--brand-700);
    background: var(--brand-50); border: 1px solid var(--brand-200);
    border-radius: var(--r-md); padding: 8px 12px;
}
.tillmember__h > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tillmember__h b { font-size: 15px; font-weight: 650; }
.tillmember__h span { font-size: 12.5px; color: var(--text-muted); }

.tillcard { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-lg); }
.tillcard + .tillcard { margin-top: 10px; }
/* Hak edilmiş ödül kutuyu değiştiriyor: personelin kaçırmaması gereken tek şey bu. */
.tillcard.is-ready { border-color: var(--success); background: var(--success-bg); }
.tillcard__h { display: flex; align-items: baseline; gap: 9px; }
.tillcard__h b { font-size: 14px; font-weight: 650; }
.tillcard__h span { font-size: 12px; color: var(--text-muted); }
.tillcard__s { font-size: 12.5px; color: var(--text-muted); margin: 8px 0 12px; }
.tillcard__s .num { font-weight: 700; color: var(--text); }
.tillcard__ready { color: var(--success-fg); font-weight: 650; }
.tillcard__a { display: flex; flex-wrap: wrap; gap: 8px; }

/* Damga izleri: müşteriye dönüp "üç kaldı" demek için kartın kendisi gibi
   görünmesi gerekiyor — sayı yazmak aynı şeyi anlatmıyor. */
.stamps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.stampdot {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--gray-300); background: var(--surface);
}
.stampdot.is-on { border-color: var(--brand-500); background: var(--brand-500); }
.tillcard.is-ready .stampdot.is-on { border-color: var(--success); background: var(--success); }

.lycards { display: flex; flex-direction: column; gap: 10px; }
.lycard {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px;
    padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-lg);
}
.lycard.is-off { background: var(--surface-alt); }
.lycard.is-off .lycard__top b { color: var(--text-muted); }
.lycard__main { min-width: 0; }
.lycard__top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.lycard__top b { font-size: 14.5px; font-weight: 650; }
.lycard__scope { font-size: 12px; color: var(--text-subtle); }
/* Kural NOKTALARLA: kasada ve müşterinin kartında damga zaten nokta; tanım
   listesinde yazıyla anlatmak aynı kavramı iki ayrı dile bölüyordu. */
.lycard__rule { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 9px 0 8px; }
.lycard__reward { font-size: 13px; color: var(--text-muted); }
.stamps--sm { gap: 4px; margin: 0; }
.stamps--sm .stampdot { width: 13px; height: 13px; border-width: 2px; }
.stamps__more { font-size: 11.5px; font-weight: 700; color: var(--text-subtle); margin-inline-start: 2px; }
.lycard__use { font-size: 12.5px; color: var(--text-subtle); }
.lycard__use b { color: var(--text); font-weight: 700; }

@media (max-width: 640px) {
    .tillrow { grid-template-columns: 66px minmax(0, 1fr); }
    .tillrow__m { display: none; }
}

/* --- Panel ana sayfası -----------------------------------------------------
   Ana sayfa GÜNÜN EKRANI: bugüne ait rakamlar ve düzeltilebilir eksikler.
   Kümülatif toplamlar Raporlar'da.

   "Bugün" için tek satırlık özel bir şerit yazılmıştı; aynı sayfanın altında
   `.stat` kartları duruyordu, yani tek sayfada iki ayrı özet dili. Şerit
   kaldırıldı, rakamlar `.stat` kartlarına taşındı. */
/* Bölüm başlığı: kart ızgarasının üstünde "Bugün" gibi bir ayraç. */
.sect-title {
    display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
    font-size: 12.5px; font-weight: 650; color: var(--text-muted);
}
.sect-title [data-lucide] { width: 16px; height: 16px; color: var(--warning); }


/* Sağlık satırı: SAYI + ADRES. "12 üründe görsel yok" deyip kullanıcıyı
   arayışa bırakmıyor, doğrudan o listeye götürüyor. */
.health { display: flex; flex-direction: column; gap: 2px; }
.health__i {
    display: grid; grid-template-columns: 32px minmax(0, 1fr) 18px;
    align-items: center; gap: 12px;
    padding: 9px 10px; border-radius: var(--r-md);
    text-decoration: none; color: inherit;
}
.health__i:hover { background: var(--gray-50); }
.health__ico {
    width: 32px; height: 32px; border-radius: var(--r-md); display: grid; place-items: center;
    background: var(--warning-bg); color: var(--warning-fg);
}
.health__ico [data-lucide] { width: 17px; height: 17px; }
.health__t { font-size: 13.5px; color: var(--text-muted); }
.health__t b { color: var(--text); font-weight: 700; margin-inline-end: 2px; }
.health__c { width: 18px; height: 18px; color: var(--text-subtle); }

.home-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }

.minilist { display: flex; flex-direction: column; gap: 2px; }
.minirow {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center; gap: 12px;
    padding: 9px 10px; border-radius: var(--r-md);
    text-decoration: none; color: inherit; font-size: 13.5px;
}
.minirow:hover { background: var(--gray-50); }
.minirow--plain { grid-template-columns: minmax(0, 1fr) auto; }
.minirow--plain:hover { background: none; }
.minirow__k { font-size: 12px; font-weight: 700; color: var(--brand-700); }
.minirow__t { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minirow__v { font-weight: 650; }

/* Çubuk EN ÇOK SATANA GÖRE: farkı okumak beş sayıyı karşılaştırmaktan hızlı. */
.toprow { display: grid; grid-template-columns: minmax(0, 1fr) 90px 44px; align-items: center; gap: 12px; padding: 7px 10px; }
.toprow__n { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toprow__b { height: 6px; border-radius: var(--r-full); background: var(--gray-200); overflow: hidden; }
.toprow__b span { display: block; height: 100%; background: var(--brand-500); border-radius: inherit; }
.toprow__v { text-align: end; font-size: 13px; font-weight: 700; }

.fblist { display: flex; flex-direction: column; gap: 12px; }
.fbrow { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; }
.fbrow__r {
    height: 26px; display: inline-flex; align-items: center; justify-content: center; gap: 3px;
    border-radius: var(--r-full); background: var(--warning-bg); color: var(--warning-fg);
    font-size: 12.5px; font-weight: 700;
}
.fbrow__r [data-lucide] { width: 12px; height: 12px; }
.fbrow p { font-size: 13px; line-height: 1.5; color: var(--text); }
.fbrow__none { color: var(--text-subtle); font-style: italic; }
.fbrow span { font-size: 12px; color: var(--text-subtle); }

@media (max-width: 900px) {
    .home-cols { grid-template-columns: minmax(0, 1fr); }
}

/* --- Raporlar -------------------------------------------------------------- */
/* Aralık seçici: adres taşıdığı için bağlantı, düğme değil (bkz. reports.php). */
.rangepick { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-full); }
.rangepick__i {
    padding: 6px 13px; border-radius: var(--r-full); line-height: 18px;
    font-size: 12.5px; color: var(--text-muted); text-decoration: none; white-space: nowrap;
}
.rangepick__i:hover { color: var(--text); }
.rangepick__i.is-on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-xs); }

/* `.kpi` KALDIRILDI: raporlardaki özet kartları da `.stat` kullanıyor. */

/* Değişim oku `.stat__trend` (CSS'te zaten vardı, hiç kullanılmamıştı) —
   yön RENKLE DEĞİL önce OKLA anlatılıyor: kırmızı/yeşil ayrımı tek başına
   renk körü kullanıcıya bir şey söylemiyor. */
.stat__trend [data-lucide] { width: 13px; height: 13px; }
.stat__label .stat__trend { margin-inline-start: 8px; }
.stat__hint { margin-inline-start: 8px; color: var(--text-subtle); }

/* Uzun aralıkta çubuklar daralıyor; 90 gün de aynı yükseklikte okunabilsin. */
.rep-chart--wide { gap: 3px; height: 170px; }
.rep-chart--wide .rep-bar__track { max-width: none; }

@media (max-width: 900px) {
    .rangepick { width: 100%; overflow-x: auto; }
}

/* --- Garson çağrıları (salon ekranı) --------------------------------------
   Çağrı sipariş değil: saniyeler içinde cevap bekliyor. Satırlar büyük, tek
   dokunuşluk — salon tabletinde ayaküstü kullanılıyor. */
.calls { display: flex; flex-direction: column; gap: 10px; }
.calls__none { font-size: 13px; color: var(--text-muted); padding: 8px 2px; }
.call {
    display: grid; grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center; gap: 14px;
    padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-lg);
}
/* 5 dakikayı geçen çağrı RENKLE DEĞİL, önce ikonla/çerçeveyle ayrılıyor:
   yalnızca renk farkı, ekranın uzağından bakan personele bir şey söylemiyor. */
.call.is-late { border-color: var(--danger); background: var(--danger-bg); }
.call__t {
    height: 46px; display: grid; place-items: center;
    border-radius: var(--r-md); background: var(--brand-50); color: var(--brand-700);
    font-size: 19px; font-weight: 700; letter-spacing: -.02em;
}
.call.is-late .call__t { background: #fff; color: var(--danger-fg); }
.call__b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.call__b b { font-size: 14.5px; font-weight: 650; }
.call__b span { font-size: 12.5px; color: var(--text-muted); }
.call.is-late .call__b span { color: var(--danger-fg); font-weight: 600; }

/* Cashback: damga kartı ÜRÜN sayar, cashback TUTAR sayar. Aynı ekranda ama
   ayrı bölümler — kurulumları ayrı düşünülüyor. */

/* Kart başlığının altındaki açıklama: sağa yaslandığında geniş ekranda
   başlıktan bin piksel uzağa düşüyordu. */
.card__header--stack { display: block; }
.card__sub { margin-top: 4px; font-size: 12.5px; color: var(--text-muted); }

/* Kasada bakiye bloğu: fiş tutarı ilk girilen şey, o yüzden damga
   kartlarının üstünde. */
.tillcash {
    padding: 13px 15px; margin-bottom: 12px;
    border: 1px solid var(--brand-200); background: var(--brand-50); border-radius: var(--r-lg);
}
.tillcash__b { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.tillcash__b span { font-size: 12.5px; color: var(--text-muted); }
.tillcash__b b { font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--brand-700); }
.tillcash__f { display: flex; gap: 8px; flex-wrap: wrap; }
.tillcash__f .input { width: 140px; background: var(--surface); }

/* Cashback KURULUM EKRANI (kapalıyken sayfanın tamamı bu). Uyarı bandı +
   işe yaramayan kasa + en altta ayar yerine tek bir iş: aç. */
/* KURULUM KARTI — markanın renginde. Yayın adımları kartıyla (`.publish-hero`)
   aynı dil: bir kez yapılan, sayfanın tamamını kaplayan kurulum işleri renkli
   duruyor. Beyaz kart üstüne beyaz kart "burada bir karar var" demiyordu.

   İKİ SÜTUN: solda ne olduğu, sağda tek karar. Tek sütunken metin 560px'de
   kesiliyor, kartın sağ yarısı boş kalıyordu. */
.cbstart {
    /* Sağ sütun 400px: örnek cümle ("200 ₺ harcayan müşterinin bakiyesine
       10,00 ₺ yazılır.") 330px'de iki satıra kırılıyordu. */
    display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 36px; align-items: center;
    padding: 30px 32px;
    border-radius: var(--r-lg);
    background:
        radial-gradient(60% 90% at 88% 12%, rgba(255,255,255,.16), transparent 60%),
        linear-gradient(135deg, var(--brand-600) 0%, var(--brand-800) 100%);
    box-shadow: 0 8px 24px rgba(25, 51, 182, 0.22);
    color: #fff;
}
.cbstart__ico {
    width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center;
    background: rgba(255,255,255,.16); color: #fff; margin-bottom: 16px;
}
.cbstart__ico [data-lucide] { width: 24px; height: 24px; }
.cbstart h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.cbstart__t > p { margin-top: 8px; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.85); max-width: 60ch; }
.cbstart__t b { color: #fff; font-weight: 650; }

/* ALTI MADDE İKİŞERLİ: tek sütunda sol taraf uzayıp sağdaki karar kutusuyla
   hizası bozuluyordu. */
.cbstart__list {
    list-style: none; margin: 18px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px;
}
.cbstart__list li { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.85); }
.cbstart__list [data-lucide] { width: 15px; height: 15px; margin-top: 2px; color: #fff; opacity: .75; flex: none; }

/* Karar kutusu YARI SAYDAM, beyaz değil. Önce açık zeminli bir kutuydu:
   doygun mavinin üstünde açık bir blok, tonu ne kadar kırılırsa kırılsın
   "ışıldıyor" gibi duruyor — sorun ton değil, karşıtlığın kendisi. Yayın
   adımları kartındaki panel de (`.publish-hero__panel`) böyle çözüyor: panel
   zemini alıyor, tek parlak öğe DÜĞME kalıyor — zaten tek eylem o. */
.cbstart__panel {
    padding: 20px; border-radius: var(--r-md);
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
}
.cbstart__panel .label { color: rgba(255, 255, 255, .78); }

/* Oran kutusu. Girdi de zeminin İÇİNDE: beyaz bir kutu koymak paneli yeniden
   parlatırdı. İşaret solda (Türkçede yüzde başa gelir: %5).

   TEK KURAL: burada iki ayrı `.cbstart__in > span` tanımı birikmişti ve
   sonraki, işaretin beyaz rengini gri ile eziyordu — mavi zeminde işaret
   görünmez oluyordu. */
/* KUTUNUN KENDİSİ ALAN, girdi onun içinde: işaret dışarıda dururken kutunun
   bir yüzde alanı olduğu anlaşılmıyordu. Şimdi "%5,00" tek parça olarak
   ortada duruyor. */
.cbstart__in {
    display: flex; align-items: center; justify-content: center; gap: 1px;
    height: 52px; margin-top: 6px; padding: 0 12px; cursor: text;
    border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--r-md);
    background: rgba(255, 255, 255, .14);
}
.cbstart__in:focus-within {
    background: rgba(255, 255, 255, .20);
    border-color: rgba(255, 255, 255, .55);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .14);
}
.cbstart__in > span { flex: none; font-size: 20px; font-weight: 700; color: rgba(255, 255, 255, .72); }
.cbstart__in input {
    width: 5ch; padding: 0; border: 0; background: none; outline: none;
    font: inherit; font-size: 20px; font-weight: 700; color: #fff; text-align: left;
}
/* Sayı okları GİZLİ: dar alanda rakamın yanına sıkışıp kutuyu dengesiz
   gösteriyorlar; artırma/azaltma zaten klavyeyle yapılabiliyor. */
.cbstart__in input::-webkit-outer-spin-button,
.cbstart__in input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.cbstart__in input { appearance: textfield; -moz-appearance: textfield; }
.cbstart__ex { margin: 12px 0 18px; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.cbstart__ex b { color: #fff; font-weight: 700; }

@media (max-width: 900px) {
    .cbstart { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px; }
}

/* AYARLAR: İKİ AYRI KART, YAN YANA.
   Önce tek satırlık bir formdu, sonra tek kartın içinde alt alta iki blok.
   İkisinde de "durum" ile "oran" aynı ayarın parçaları gibi okunuyordu — oysa
   biri sistemi çalıştırıp durduruyor, diğeri ne kadar vereceğinizi söylüyor.
   Ayrı kartta her biri kendi başlığını, açıklamasını ve karşılığını taşıyor.

   Kartlar EŞİT YÜKSEKLİKTE: her ikisinin de altında bir "karşılık" satırı var
   (biri müşteri cebindeki tutar, diğeri örnek hesap) ve bunlar `margin-top:
   auto` ile aynı hizaya oturuyor. */
.cbset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cbcard { margin: 0; display: flex; flex-direction: column; }
.cbcard .card__body { flex: 1; display: flex; flex-direction: column; }

/* Kartın altındaki karşılık satırı: kart gövdesinin tamamına yayılmış ince bir
   ayraçla ayrılıyor, iki kartta da aynı yükseklikte. */
.cbcard__foot {
    margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border);
    display: flex; align-items: center; gap: 8px; min-height: 54px;
    font-size: 12.5px; color: var(--text-muted);
}
.cbcard__foot > b { font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }

/* --- Durum kartı --- */
/* DURUM ÖNCE OKUNUYOR: anahtarın kendisi "şu an açık mı" sorusunu yeterince
   cevaplamıyor; nokta ve metin cevaplıyor. Anahtar sağda, çünkü satır soldan
   sağa "şu an şöyle → değiştir" diye okunuyor. */
.cbstate {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 15px; margin-bottom: 16px;
    border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-alt);
    cursor: pointer;
}
.cbstate__l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cbstate__h { display: flex; gap: 9px; }
.cbstate__h b { font-size: 14.5px; line-height: 20px; font-weight: 650; }
/* Nokta 9px ve `align-self: start` + tam sayı üst boşluk: `align-items: center`
   satır KUTUSUNU ortalıyor, harflerin optik ortası ise yarım piksel altta
   kalıyor (ölçüldü). 20px satırda 6px, noktanın merkezini 10,5'e getiriyor. */
.cbstate__dot {
    flex: none; align-self: start; margin-top: 6px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--success-fg, #16a34a); box-shadow: 0 0 0 3px rgba(22, 163, 74, .16);
}
.cbstate__l > span { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.cbstate .switch { flex: none; }
/* Kapalıyken kart sessizleşiyor: yeşil nokta griye dönüyor, başlık soluyor. */
.cbcard.is-off .cbstate__dot { background: var(--text-subtle); box-shadow: 0 0 0 3px rgba(100, 116, 139, .14); }
.cbcard.is-off .cbstate { background: var(--surface); }

/* İki cümle, ikon başlı: "açıkken ne olur / kapatınca ne olur". */
.cbfacts { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cbfacts li { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; line-height: 1.55; color: var(--text-muted); }
.cbfacts b { color: var(--text); font-weight: 650; }
.cbfacts [data-lucide] { width: 15px; height: 15px; margin-top: 2px; flex: none; color: var(--text-subtle); }

/* --- Oran kartı --- */
.cbrate__field {
    display: flex; align-items: center; justify-content: center; gap: 1px;
    height: 62px; padding: 0 14px; cursor: text;
    border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface);
}
.cbrate__field:focus-within { border-color: var(--brand-400); box-shadow: 0 0 0 3px var(--brand-100); }
.cbrate__field > span { flex: none; font-size: 24px; font-weight: 700; color: var(--text-subtle); }
.cbrate__field input {
    width: 5ch; padding: 0; border: 0; background: none; outline: none;
    font: inherit; font-size: 24px; font-weight: 700; color: var(--text); text-align: left;
    appearance: textfield; -moz-appearance: textfield;
}
/* Sayı okları gizli: dar alanda rakamın yanına sıkışıp kutuyu dengesiz
   gösteriyorlar; artırma/azaltma zaten klavyeyle yapılabiliyor. */
.cbrate__field input::-webkit-outer-spin-button,
.cbrate__field input::-webkit-inner-spin-button { appearance: none; margin: 0; }

/* Hazır oranlar: yüzde seçmek serbest bir sayı girmekten çok bir tercih. */
.cbrate__presets { display: flex; gap: 6px; margin: 8px 0 16px; }
.cbrate__preset {
    flex: 1; height: 34px; border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text-muted);
    font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
    transition: border-color .14s ease, color .14s ease, background-color .14s ease;
}
.cbrate__preset:hover { border-color: var(--brand-300); color: var(--text); }
.cbrate__preset.is-on { border-color: var(--brand-500); background: var(--brand-50); color: var(--brand-700); }

/* Örnek bir CÜMLE değil bir ÖLÇEK: tek satırlık "200 ₺ → 10 ₺" oranın
   büyüklüğünü göstermiyor, üç tutar gösteriyor. Rakamlar oranla canlı
   değişiyor. */
.cbtable { margin-top: auto; padding-top: 13px; border-top: 1px solid var(--border); }
.cbtable__h {
    display: flex; justify-content: space-between; margin-bottom: 4px;
    font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    color: var(--text-subtle);
}
.cbtable__r {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 6px 0; font-size: 13px; color: var(--text-muted);
}
.cbtable__r + .cbtable__r { border-top: 1px dashed var(--border); }
.cbtable__r b { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; color: var(--brand-700); }

@media (max-width: 1100px) {
    .cbset { grid-template-columns: minmax(0, 1fr); }
}

/* --- Cashback: kasa ekranı ek parçaları --------------------------------
   Sayfa sadakatten AYRILDI (damga ürün sayar, cashback tutar). Kasa parçaları
   ortak (`.tillsearch`, `.tillrow`, `.tillmember`); buradakiler yalnızca
   tutara özgü olanlar. */

/* Karşılık İŞLEMDEN ÖNCE görünüyor: personel "ne kadar yazılacak"ı müşteriye
   söyleyebilmeli, sonradan öğrenmemeli. */
.tillcash__calc { margin-top: 10px; font-size: 12.5px; color: var(--text-muted); }
.tillcash__calc b { color: var(--brand-700); font-weight: 700; }
.tillcash__calc[hidden] { display: none; }

.cbhist { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.cbhist__none { margin-top: 14px; font-size: 12.5px; color: var(--text-subtle); }
.cbhist__r {
    display: grid; grid-template-columns: 92px minmax(0, 1fr) auto;
    align-items: center; gap: 12px;
    padding: 7px 10px; border-radius: var(--r-sm); font-size: 12.5px; color: var(--text-muted);
}
.cbhist__r:hover { background: var(--gray-50); }
.cbhist__k { font-weight: 700; color: var(--danger-fg); }
.cbhist__k.is-plus { color: var(--success-fg); }
.cbhist__d { color: var(--text-subtle); }

/* Sınıra takılma bildirimi (çekmece içeriği). Formun yerine basılıyor: kayıt
   zaten açılamayacakken doldurulacak bir form göstermenin anlamı yok. */
.limitbox { text-align: center; padding: 8px 4px 4px; }
.limitbox__ico {
    width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 14px;
    display: grid; place-items: center;
    background: var(--warning-bg, #fffbeb); color: var(--warning-fg, #b45309);
}
.limitbox__ico [data-lucide] { width: 22px; height: 22px; }
.limitbox b { font-size: 15.5px; font-weight: 700; }
.limitbox p { margin-top: 7px; font-size: 13px; line-height: 1.6; color: var(--text-muted); }
/* Sayım rakamı: "kaç kaldı" sorusunun cevabı, cümlenin içinde kaybolmasın. */
.limitbox__n {
    margin: 14px auto 16px; padding: 7px 14px; width: max-content;
    border: 1px solid var(--border); border-radius: 999px;
    font-size: 13px; font-weight: 700; color: var(--text);
}

/* --- Şikayetler --------------------------------------------------------
   Ekran bir İŞ LİSTESİ: her satır bir kayıt değil bir görev. Açık olanlar
   önde, çözülenler soluk. */
.cfilter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.cfilter__b {
    height: 32px; padding: 0 13px; display: inline-flex; align-items: center;
    border: 1px solid var(--border); border-radius: 999px;
    font-size: 12.5px; font-weight: 600; color: var(--text-muted); text-decoration: none;
    transition: border-color .14s ease, color .14s ease, background-color .14s ease;
}
.cfilter__b:hover { border-color: var(--brand-300); color: var(--text); }
.cfilter__b.is-on { border-color: var(--brand-500); background: var(--brand-50); color: var(--brand-700); }

.clist { display: flex; flex-direction: column; gap: 12px; }
.citem { padding: 15px 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
/* Yeni kayıt SOL KENARDAN işaretli: rozet zaten var ama liste uzayınca göz
   önce kenarı tarıyor. */
.citem.is-new { border-inline-start: 3px solid var(--warning-fg, #d97706); }
.citem.is-progress { border-inline-start: 3px solid var(--brand-500); }
.citem.is-resolved { background: var(--surface-alt); }
.citem.is-resolved .citem__msg { color: var(--text-muted); }

.citem__h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); }
.citem__topic { font-weight: 650; color: var(--text); }
/* Tarih sağa: satırın solu "ne oldu", sağı "ne zaman" — göz ikisini ayrı tarıyor. */
.citem__time { margin-inline-start: auto; }
.citem__msg { margin-top: 9px; font-size: 13.5px; line-height: 1.6; }

.citem__who { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 12.5px; color: var(--text-muted); }
.citem__who [data-lucide] { width: 14px; height: 14px; flex: none; }
.citem__nomail { font-style: normal; font-size: 11.5px; color: var(--warning-fg, #b45309); }

/* Yanıt, şikayetin ALTINDA ve içeriden: konuşmanın ikinci repliği. */
.citem__reply {
    margin-top: 12px; padding: 11px 13px; border-radius: var(--r-sm);
    background: var(--brand-50); border: 1px solid var(--brand-100);
}
.citem__reply b { font-size: 12px; font-weight: 700; color: var(--brand-700); }
.citem__reply p { margin-top: 5px; font-size: 13px; line-height: 1.55; }
.citem__reply > span { display: block; margin-top: 6px; font-size: 11.5px; color: var(--text-subtle); }

.citem__act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 13px; }
.citem__del { margin-inline-start: auto; }
.citem__form { margin-top: 12px; }
.citem__formfoot { display: flex; align-items: center; gap: 12px; margin-top: 9px; }
.citem__hint { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.citem__hint [data-lucide] { width: 14px; height: 14px; flex: none; }
.citem__formfoot .btn { margin-inline-start: auto; }

/* Sayfa içi sekmeler (Memnuniyet: puanlar / sorun bildirimleri). Sekme adres
   değiştiriyor — durum ve süzgeç paylaşılabilir kalsın diye. */
.ptabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.ptab {
    display: inline-flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 15px;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--text-muted); text-decoration: none;
    font-size: 13.5px; font-weight: 600;
    transition: border-color .14s ease, color .14s ease, background-color .14s ease;
}
.ptab [data-lucide] { width: 16px; height: 16px; }
.ptab:hover { border-color: var(--brand-300); color: var(--text); }
.ptab.is-on { border-color: var(--brand-500); background: var(--brand-50); color: var(--brand-700); }
/* Sayı rozeti sekmenin İÇİNDE: hangi tarafta iş biriktiği listeye girmeden
   görülüyor. Bekleyen bildirim kehribar — puan sayısı yalnızca bir toplam. */
.ptab__n {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface-alt); color: var(--text-muted); font-size: 11.5px; font-weight: 700;
}
.ptab.is-on .ptab__n { background: var(--brand-100); color: var(--brand-700); }
.ptab__n--warn { background: var(--warning-bg, #fef3c7); color: var(--warning-fg, #b45309); }
.ptab.is-on .ptab__n--warn { background: var(--warning-bg, #fef3c7); color: var(--warning-fg, #b45309); }