/* ============================================================
   AZTEK ERP — Layout, panels, tables (Light + Dark)
   ============================================================ */

/* Sayfa uzayıp scrollbar belirince içerik ~10px sola "kayıyordu" (kısa sayfada
   scrollbar yok, sorgu sonucu gelince var). stable: scrollbar alanı hep ayrılır,
   içerik hiç kaymaz. macOS'ta scrollbar zaten yer kaplamadığından etkisi yoktur. */
html { scrollbar-gutter: stable; }

:root,
[data-theme="light"] {
    /* "Sinyal Turuncu / İsviçre Finans" (kullanıcı seçimi 2026-08-28):
       içerik SAF BEYAZ, dekor yok — hiyerarşiyi tipografi ve kılcal/kalın
       çizgiler taşır. (Önceki Ufuk buz geçişi bu kararla kaldırıldı.) */
    --erp-bg: #fdfdfb;
    --erp-bg-grad: none;
    --erp-surface: #ffffff;
    --erp-vurgu: #e2431e;          /* uluslararası turuncu */
    --erp-kalin-cizgi: #111111;    /* İsviçre kalın kural çizgisi */
    /* Sidebar MÜREKKEP SİYAHI (S5) — iki temada da koyu (CLAUDE.md kuralı). */
    --erp-sidebar-bg: #141413;
    --erp-sidebar-text: #a9a8a0;
    --erp-sidebar-text-active: var(--erp-sidebar-accent);
    --erp-sidebar-hover-bg: rgba(255, 255, 255, 0.04);
    --erp-sidebar-active-bg: var(--erp-sidebar-active-tint);
    --erp-border: rgba(0, 0, 0, 0.08);
    --erp-border-strong: rgba(0, 0, 0, 0.14);
    --erp-row-hover: rgba(0, 0, 0, 0.05);   /* %3 fark edilmiyordu */
    --erp-row-zebra: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] {
    /* "Lacivert Füme" içerik zemini (kullanıcı seçimi 2026-08-19; önce Gece
       Mavisi denendi, mavi fazla baskın bulundu): nötr siyahın maviye hafif
       çekilmiş hâli — his neredeyse aynı, zemin sidebar ile uyumlu; zemin
       yukarıdan aşağıya DEGRADE (--erp-bg-grad, .erp-content'e uygulanır).
       --erp-bg DÜZ RENK KALMAK ZORUNDA: birçok bileşen onu dolgu olarak
       kullanıyor (degrade orta tonu seçildi). Açık temaya dokunulmadı. */
    /* Koyu tema: İsviçre gece baskısı — sıcak mürekkep kâğıdı, parlak turuncu. */
    --erp-bg: #121211;
    --erp-bg-grad: none;
    --erp-surface: #1a1a19;
    --erp-vurgu: #ff6a3d;
    --erp-kalin-cizgi: #f2f1ea;
    --erp-sidebar-bg: #101010;
    --erp-sidebar-text: #a9a8a0;
    --erp-sidebar-text-active: var(--erp-sidebar-accent);
    --erp-sidebar-hover-bg: rgba(255, 255, 255, 0.03);
    --erp-sidebar-active-bg: var(--erp-sidebar-active-tint);
    --erp-border: rgba(255, 255, 255, 0.06);
    --erp-border-strong: rgba(255, 255, 255, 0.1);
    --erp-row-hover: rgba(255, 255, 255, 0.06);
    --erp-row-zebra: rgba(255, 255, 255, 0.02);
}

/* ============================================================
   SIDEBAR MODU — mod 1 (varsayılan, turuncu) / mod 2 (mavi)
   Uygulamanın kendi açık/koyu temasından BAĞIMSIZ, ayrı bir
   data-attribute (bkz. index.html + js/sidebar-mode.js). Sidebar her
   iki app temasında da koyu kalır (CLAUDE.md) — bu yalnızca menünün
   vurgu rengini (amber/cyan) değiştirir, zemin koyuluğunu değil.
   ============================================================ */
:root,
[data-sidebar-mode="1"] {
    /* SİNYAL TURUNCU — S5; aktif öğe DOLU turuncu hap, metni sabit beyaz */
    --erp-sidebar-accent: #ff6a3d;
    --erp-sidebar-accent-2: #e2431e;
    --erp-sidebar-hover-tint: rgba(226, 67, 30, 0.13);
    --erp-sidebar-active-tint: #e2431e;
    --erp-sidebar-active-text: #ffffff;
    --erp-sidebar-glow: rgba(226, 67, 30, 0.10);
    /* Logo nabız ışığı — sidebar-glow'dan BİLEREK ayrı ve güçlü: glow sidebar
       atmosferini boyar (soluk kalmalı), bu ise logonun görünür kalp atışıdır. */
    --erp-logo-isik: rgba(255, 106, 61, 0.60);
    --erp-logo-isik-dis: rgba(226, 67, 30, 0.34);
    --erp-sidebar-guide: rgba(226, 67, 30, 0.35);
    --erp-sidebar-hover-text: #f5f4ee;
}
[data-sidebar-mode="2"] {
    /* KLEIN MAVİSİ — İsviçre'nin ikinci sesi. Aktif hap ve avatar #1d3fc4'tü;
       panelle çatışan cırt mavi (kullanıcı 2026-08-29) → hover/glow ile aynı
       aileden yumuşak laciverte (#3f66c4 / #3552a8) çekildi. */
    --erp-sidebar-accent: #6f8ce8;
    --erp-sidebar-accent-2: #3552a8;
    --erp-sidebar-hover-tint: rgba(63, 102, 196, 0.16);
    --erp-sidebar-active-tint: #3f66c4;
    --erp-sidebar-active-text: #ffffff;
    --erp-sidebar-glow: rgba(63, 102, 196, 0.13);
    --erp-logo-isik: rgba(111, 140, 232, 0.62);
    --erp-logo-isik-dis: rgba(63, 102, 196, 0.36);
    --erp-sidebar-guide: rgba(111, 140, 232, 0.35);
    --erp-sidebar-hover-text: #eef2ff;
}

.erp-shell {
    display: grid;
    grid-template-columns: 172px 1fr;
    /* Satırı 100vh'ye SABİTLE (minmax(0,1fr) = en fazla 100vh, içeriğe göre
       BÜYÜMEZ). Yalnız `height:100vh` yetmiyordu: örtük `auto` satır, sidebar
       menüsü uzayınca (tüm gruplar açık) içeriğe göre 100vh'yi aşıp tüm shell'i
       aşağı itiyordu → ÇIKIŞ ve sağdaki "system online" footbar kırpılıp
       görünmez oluyordu. minmax(0,1fr) hem taşmayı engeller hem de hücre
       içlerinin (nav/content) kendi overflow'larıyla kaymasına izin verir. */
    grid-template-rows: minmax(0, 1fr);
    height: 100vh;
    /* Mobil tarayıcılarda adres çubuğu 100vh'yi taşırıp footbar'ı gizleyebiliyor;
       dvh destekleyen tarayıcılar gerçek görünür yüksekliği kullanır (fallback: 100vh). */
    height: 100dvh;
    background: var(--erp-bg);
    color: var(--text-primary);
    overflow: hidden;
    /* Kolon geçişi TEMEL kuralda: yalnızca [data-rail] bloğunda kalsaydı
       rail'e girerken kayar ama ÇIKARKEN (attribute kalkınca transition da
       kalktığı için) menü aniden fırlardı. */
    transition: grid-template-columns 620ms cubic-bezier(.22, .8, .24, 1),
                var(--transition-theme);
}

.erp-sidebar {
    display: flex; flex-direction: column;
    position: relative;
    /* İnce bir atmosfer parıltısı mod rengine göre değişir; taban koyuluğu
       (--erp-sidebar-bg) app temasına bağlı kalmaya devam eder. */
    background:
        radial-gradient(circle at 30% 0%, var(--erp-sidebar-glow), transparent 55%),
        var(--erp-sidebar-bg);
    color: var(--erp-sidebar-text);
    /* Alt boşluk kaldırıldı: ÇIKIŞ bloğu footbar gibi tam dibe otursun ki
       ÇIKIŞ ayracı ile "system online" ayracı aynı hizaya gelsin. Üst boşluk
       22→10px: logo ve menü yukarı alındı (kullanıcı isteği 2026-08-29;
       topbar kalktığından çizgi hizası bağımlılığı yok). */
    padding: 10px 0 0;
    transition: background 380ms ease;
}
/* Sidebar → içerik yumuşak TON GEÇİŞİ: sidebar rengi ~26px içeriğe sızıp
   saydamlaşır; eski sert dikey çizgi (border-right) yerine yumuşak kaynaşma.
   Kartlar içerikte ~28px iç boşluktan sonra başladığından bu sızıntı boşlukta
   kalır, kart üstlerini kapatmaz. pointer-events yok — tıklamayı engellemez. */
.erp-sidebar::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; right: -26px;
    width: 26px;
    background: linear-gradient(90deg, var(--erp-sidebar-bg), transparent);
    pointer-events: none;
    z-index: 3;
}

/* ============================================================
   RAY MODU (data-rail="1") — C-Level Raporlar sayfası
   Sidebar 240px'ten 54px'lik bir raya kayar; içerik alanı grid
   kolonuyla birlikte genişler. Rapor sayfası geniş grafiklerle
   çalıştığı için ekranda yer açar. Yalnızca Raporlar.razor
   açar/kapatır (OnInitialized/Dispose), başka sayfa etkilenmez.

   Neden width değil grid: masaüstünde sidebar genişliği TEK
   yerden, .erp-shell'in grid-template-columns'undan geliyor;
   .erp-sidebar'ın kendi width'i yok. İkisini birlikte
   animasyonlamak yerine grid kolonunu geçirmek yeterli ve
   içerik aynı karede yeniden akar (boşluk/atlama olmaz).
   ============================================================ */
[data-rail="1"] .erp-shell {
    grid-template-columns: 54px 1fr;
    transition: grid-template-columns 620ms cubic-bezier(.22, .8, .24, 1),
                var(--transition-theme);
}
/* Raya geçerken menünün içeriği kaybolur — ikonlar 54px'e sığmaz ve
   grup açılır-kapanır başlıkları yarım görünürdü. Metinler önce
   soluklaşır (240ms), kolon sonra kapanır: göz "kayıyor" görür. */
[data-rail="1"] .erp-nav,
[data-rail="1"] .erp-sidebar-foot,
[data-rail="1"] .erp-logo span,
[data-rail="1"] .sidebar-mode-toggle {
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease;
}
[data-rail="1"] .erp-logo { padding: 0 16px; }
/* Sızan sağ kenar degradesi rayda içeriğin üstüne düşer (mobil
   çekmecede de aynı sebeple kapatılıyor, bkz. @media 900px). */
[data-rail="1"] .erp-sidebar::after { display: none; }

/* Rayı geri açma düğmesi — sidebar dikey ortasında, ray dışında görünmez. */
.erp-rail-toggle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px; height: 32px;
    display: none;
    align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--erp-sidebar-accent);
    font-size: 13px;
    cursor: pointer;
    z-index: 5;
    transition: background 160ms, border-color 160ms, transform 160ms;
}
[data-rail="1"] .erp-rail-toggle { display: inline-flex; }
.erp-rail-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--erp-sidebar-accent);
    transform: translate(-50%, -50%) scale(1.06);
}

/* Hareket duyarlılığı: kayma animasyonu kapanır, sonuç aynı kalır. */
@media (prefers-reduced-motion: reduce) {
    [data-rail="1"] .erp-shell { transition: none; }
}

/* RAPORLAR menü öğesi — süper admin'e özel, diğer menülerden ayrışır:
   altın gradyan yazı + çok hafif ışıma. Sidebar HER İKİ temada koyu
   olduğu için renkler sabit açık tonlardır (var(--text-primary)
   KULLANILAMAZ — açık temada okunmaz hale gelir, CLAUDE.md). */
.erp-sidebar .erp-nav-item-rapor {
    position: relative;
    background: linear-gradient(90deg, rgba(255, 190, 80, 0.10), rgba(255, 190, 80, 0.02));
    border: 1px solid rgba(255, 190, 80, 0.22);
}
.erp-sidebar .erp-nav-item-rapor span:not(.erp-nav-star) {
    background: linear-gradient(180deg, #ffd489 0%, #e0a33c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 800;
}
.erp-sidebar .erp-nav-item-rapor svg { color: #ffce7a; }
.erp-sidebar .erp-nav-item-rapor .erp-nav-star {
    margin-left: auto;
    font-size: 9px;
    color: #e0a33c;
    opacity: 0.75;
}
.erp-sidebar .erp-nav-item-rapor:hover {
    background: linear-gradient(90deg, rgba(255, 190, 80, 0.18), rgba(255, 190, 80, 0.05));
    border-color: rgba(255, 190, 80, 0.42);
    box-shadow: 0 0 18px -6px rgba(255, 190, 80, 0.45);
}
.erp-sidebar .erp-nav-item-rapor.active {
    background: linear-gradient(90deg, rgba(255, 190, 80, 0.24), rgba(255, 190, 80, 0.07));
    border-color: rgba(255, 190, 80, 0.55);
}

.erp-logo {
    /* SÜTUN + ORTALANMIŞ (kullanıcı isteği): logo üstte ortada, altında
       selamlama. Üst/alt boşluk sıkıldı — logo ve menü yukarı (2026-08-29). */
    display: flex; flex-direction: column; align-items: center; gap: 0;
    box-sizing: border-box;
    padding: 6px 10px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    margin-bottom: 10px;
}

/* Sidebar mod düğmesi (SidebarModeToggle.razor) — logonun sağına yaslanır */
.sidebar-mode-toggle {
    appearance: none; cursor: pointer; flex-shrink: 0;
    margin-left: auto;
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--erp-sidebar-text);
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 160ms ease, box-shadow 220ms ease;
}
.sidebar-mode-toggle:hover { transform: scale(1.08); color: var(--erp-sidebar-accent); border-color: var(--erp-sidebar-accent); }
.sidebar-mode-toggle:active { transform: scale(0.94); }
.sidebar-mode-toggle svg { transition: transform 380ms cubic-bezier(.34,1.56,.64,1); }
/* Mavi mod (mode 2): buton "yanıyor" gibi — en dış çerçeve gerçek bir ampul
   gibi SICAK SARI ışık yayar (dark moddaki ampulün yanması hissiyle aynı).
   İkon cyan kalır (mavi mod göstergesi); dışa vuran ışık sıcak sarıdır. */
.sidebar-mode-toggle.is-mode-2 {
    color: var(--erp-sidebar-accent);
    border-color: #ffcf87;
    box-shadow: 0 0 13px 1px rgba(255, 201, 110, 0.55), 0 0 5px rgba(216, 179, 108, 0.9);
}
.sidebar-mode-toggle.is-mode-2 svg { transform: rotate(180deg); }
/* Logo: markup'taki eski inline style'lar buraya alındı — gerçekte render
   edilen görünüm (mono, 0.14em) esas alındı, CSS artık markup'la çelişmiyor. */
.erp-logo-mark { display: flex; align-items: center; justify-content: center; color: var(--amber-bright); }
.erp-logo-name { font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.14em; color: #f0e6d2; }
.erp-logo-sub { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--erp-sidebar-text); letter-spacing: var(--track-wide); margin-top: 2px; }

/* flex:1 + min-height:0 + overflow-y:auto → menü uzunsa (tüm gruplar açık) nav
   KENDİ İÇİNDE kayar; logo üstte, ÇIKIŞ altta sabit kalır ve grid satırı 100vh'yi
   aşmaz. (.erp-content ile aynı, kanıtlı desen.) min-height:0 şart: flex item'ın
   varsayılan min-height:auto'su nav'ı içerik boyuna büyütüp kaydırmayı engelliyordu. */
.erp-nav { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 10px 8px; }
/* İnce, sidebar'ın koyu zeminine uygun kaydırma çubuğu (her iki temada koyu). */
.erp-nav { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; }
.erp-nav::-webkit-scrollbar { width: 7px; }
.erp-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 4px; }
.erp-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.28); }
.erp-nav::-webkit-scrollbar-track { background: transparent; }
/* .erp-nav-group kaldırıldı — markup'ta karşılığı kalmamıştı (ölü kural) */

/* 10px — .erp-nav-section-header'ın (11px) altında kalsın diye bilerek
   küçük; önceden ikisi de eşitti ve alt/üst hiyerarşisi okunmuyordu. */
.erp-nav-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 12px;
    color: var(--erp-sidebar-text);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-radius: 999px; /* OVAL hap — kullanıcı isteği (S5 uyarlaması) */
    margin-bottom: 2px;
    transition: background 160ms, color 160ms;
}
/* Sığmayan etiket ("İrsaliye No Sorgulama" gibi) artık "..." ile kesilmiyor —
   gerektiğinde ikinci satıra sarıyor. */
/* 198px sidebar'da etiketler TEK satır (İsviçre menüsü) — punto/tracking
   buna göre sıkıldı; en uzun etiket 'MÜŞTERİ PERFORMANSI' sığar. */
.erp-nav-item span { white-space: nowrap; line-height: 1.3; }
.erp-nav-item svg { flex-shrink: 0; margin-top: 1px; }
.erp-nav-item:hover { background: var(--erp-sidebar-hover-bg); color: var(--erp-sidebar-hover-text); border-radius: 999px; }
/* Aktif öğe DOLU vurgu hapı: metin/ikon SABİT beyaz (koyu zeminde token
   değişkeni kullanılmaz — CLAUDE.md sidebar kuralının dolu-hap hali). */
.erp-nav-item.active {
    background: var(--erp-sidebar-active-bg);
    color: var(--erp-sidebar-active-text, #ffffff);
}
.erp-nav-item.active span { color: var(--erp-sidebar-active-text, #ffffff); }
.erp-nav-item.active svg { color: var(--erp-sidebar-active-text, #ffffff); }
.erp-nav-item svg { color: rgba(255,255,255,0.45); }

/* Bir bölüm içindeki marka/alt-grup etiketi (ör. Ürün Yönetimi → Apple / Samsung).
   Sidebar her iki temada koyu olduğu için renk güvenli sidebar token'ından gelir. */
.erp-nav-subhead {
    padding: 9px 12px 3px;
    font-family: var(--font-body);
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--erp-sidebar-text);
    opacity: 0.55;
}
/* Tıklanamaz "çok yakında" öğesi — nav-item ile aynı boyut, soluk ve imleçsiz. */
.erp-nav-item-disabled {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; margin-bottom: 2px;
    font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 700;
    letter-spacing: var(--track-body); text-transform: uppercase;
    color: var(--erp-sidebar-text); opacity: 0.4; cursor: default;
}
.erp-nav-item-disabled svg { flex-shrink: 0; color: rgba(255,255,255,0.35); }

/* Yükseklik footbar ile eşitlendi (42px) + dibe hizalı → ÇIKIŞ ayracı ile
   "system online" ayracı tam aynı çizgide. */
.erp-sidebar-foot {
    display: flex; align-items: center;
    height: 42px; box-sizing: border-box;
    padding: 0 24px;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.erp-logout {
    appearance: none; border: 0; background: transparent;
    color: var(--erp-sidebar-text);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: color 160ms, background 160ms;
}
.erp-logout:hover { color: var(--amber); background: rgba(255,255,255,0.03); }

.erp-main {
    display: flex; flex-direction: column; overflow: hidden; min-width: 0;
    /* Zemin geçişi BURADA: topbar + içerik + footbar tek parça görünsün
       (ayrı yüzey renkleri bütünlüğü bozuyordu — kullanıcı geri bildirimi).
       Degrade viewport'a sabit; içerik kaysa da ışık kaynağı yerinde durur. */
    background: var(--erp-bg-grad, var(--erp-bg));
    background-attachment: fixed;
}

/* Hamburger + çekmece arka planı: MASAÜSTÜNDE GİZLİ. Yalnızca ≤900px
   media query'sinde görünür/işlevsel olur (bkz. aşağıdaki mobil blok).
   Böylece masaüstü düzeni birebir korunur. */
.erp-hamburger {
    display: none;
    appearance: none; -webkit-appearance: none;
    flex-shrink: 0;
    width: 38px; height: 38px;
    align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--erp-border-strong);
    border-radius: 9px;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 160ms, color 160ms, background 160ms;
}
.erp-hamburger:hover { border-color: var(--amber); color: var(--amber); }
.erp-hamburger:active { transform: scale(0.95); }
.erp-nav-backdrop { display: none; }

.erp-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 24px;
    /* İsviçre kuralı: başlık bandının altında KALIN mürekkep çizgisi. */
    border-bottom: 2px solid var(--erp-kalin-cizgi, var(--text-primary));
    background: transparent;
    transition: var(--transition-theme);
}

.erp-breadcrumb { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; }
.erp-crumb-root { color: var(--text-dim); }
.erp-crumb-sep { color: var(--text-dim); opacity: 0.5; }
/* Sayfa adı ("Kullanıcı Yetkileri") kod değeri değil, UI metni — Inter'e alındı;
   alan adı + ayraç bilinçli mono kaldı. Mono 700 zaten yüklenmiyordu (sahte kalın). */
.erp-crumb-page {
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--track-label);
}

.erp-topbar-right { display: flex; align-items: center; gap: 18px; }

/* Raporlar sayfasına özel orta blok: veri kesiti tarihi (#cmdDate).
   Sayfa kendi başlık bloğunu kaldırdığı için bu bilgi topbar'a taşındı —
   grafiklere ~85px dikey yer açar. Mutlak konum ŞART: sol (breadcrumb+radyo)
   ve sağ (kullanıcı) blokların genişliği eşit değil, flex ile ortalasaydık
   kullanıcı adı uzadıkça tarih kayardı. Metni js/rapor.js doldurur; boşken
   (veri gelmeden / diğer sayfalarda) hiç görünmez. */
.erp-topbar { position: relative; }
.erp-topbar-orta {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.rapor-veri {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 13px;
    border: 1px solid var(--erp-border-strong);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 10px; font-weight: 500;
    letter-spacing: var(--track-wide, 0.14em);
    color: var(--text-dim);
    white-space: nowrap;
    transition: var(--transition-theme);
}
.rapor-veri::before {
    content: ""; flex: 0 0 auto;
    width: 6px; height: 6px; border-radius: 50%;
    background: linear-gradient(135deg, #e6c765, #c9a227);
    box-shadow: 0 0 6px rgba(201, 162, 39, 0.55);
}
.rapor-veri:empty { display: none; }

/* Dashboard selamlaması — topbar'da, radio butonunun yanında (sayfadaki başlık
   bloğu kalktı, kartlara dikey yer açıldı; Raporlar'daki #cmdDate deseniyle aynı
   mantık). Selam + ad tek satır, altta minik alt yazı. */
.erp-selam {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 4px;
    min-width: 0;
    line-height: 1.25;
    white-space: nowrap;
}
.erp-selam-ad {
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--text-primary);
    letter-spacing: var(--track-body);
}
.erp-selam-ad b { color: var(--gold-text); font-weight: 650; }
.erp-selam-alt {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 0.04em;
}
/* Dar ekranda breadcrumb + radio zaten sıkışıyor — selamlama gizlenir. */
@media (max-width: 1180px) { .erp-selam { display: none; } }
/* Dar ekranda breadcrumb ile çakışmasın (DOM'da kalır, JS'i etkilemez). */
@media (max-width: 1180px) { .erp-topbar-orta { display: none; } }

.erp-user { display: flex; align-items: center; gap: 10px; }
.erp-user-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--amber-bright), var(--amber));
    color: #1a1a2a;
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-size: 12px; letter-spacing: 0.1em;
}
.erp-user-avatar-img { object-fit: cover; display: block; }
.erp-user-name { font-size: 13px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.erp-user-mail { font-size: 11px; color: var(--text-dim); font-family: var(--font-mono); }

/* Koyu temada zemin degrade (--erp-bg-grad yalnız dark blokta tanımlı);
   fallback none → açık tema birebir eski görünümünde kalır. */
/* Sol dolgu 32px: sidebar→içerik ton geçişi (26px ::after sızıntısı) metnin
   ALTINA girmesin — kullanıcı bildirimi (yazılar saydamlığın üzerine geliyordu). */
.erp-content { flex: 1; overflow-y: auto; padding: 12px 20px 16px 32px; background: transparent; }

/* ============================================================
   PAGE TRANSITION — menüler arası reels-tarzı geçiş
   @key="@_currentPage" ile her route değişiminde yeniden tetiklenir
   ============================================================ */
/* fill-mode "backwards" ("both" DEĞİL): aşağıdaki %100 yorumunda anlatılan
   containing-block tuzağı, keyframe'e `transform: none` yazmakla KAPANMIYOR —
   tarayıcı animasyonlu transform'u kimlik matrisi (matrix(1,0,0,1,0,0)) olarak
   hesaplıyor ve "both" bunu animasyon bittikten sonra da tutuyor; değeri `none`
   olmayan her transform ise fixed elemanları hapsediyor. Canlıda ölçüldü:
   Raporlar sayfasında tooltip'ler imleçten kopup sayfa kaydıkça sürükleniyordu.
   "backwards" ile animasyon bitince ANİMASYON DEĞERİ KALKAR, taban stil
   (opacity:1 + transform yok) geçerli olur — görüntü birebir aynı, tuzak yok. */
.page-transition {
    animation: page-in 0.32s cubic-bezier(.2, .85, .25, 1) 1 backwards;
    transform-origin: center top;
}

@keyframes page-in {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(0.99);
    }
    /* 100% "transform: none" OLMALI ("translateY(0) scale(1)" DEĞİL): görsel olarak
       birebir aynıdır ama identity transform "both" fill-mode ile kalıcı olur ve
       containing block oluşturur → sayfa İÇİNDE render edilen position:fixed
       modallar (KargoDurumModal, SatisData onay modalı) viewport yerine bu kutuya
       hapsolur. none = animasyon bitince transform tamamen kalkar, fixed serbest. */
    100% {
        opacity: 1;
        transform: none;
    }
}

/* İçindeki ilk önemli element'ler hafif stagger ile gelsin */
.page-transition .page-head {
    animation: page-child-in 0.32s cubic-bezier(.2, .85, .25, 1) 0.04s 1 backwards;
}
.page-transition .stat-grid {
    animation: page-child-in 0.32s cubic-bezier(.2, .85, .25, 1) 0.09s 1 backwards;
}
.page-transition .panel {
    animation: page-child-in 0.32s cubic-bezier(.2, .85, .25, 1) 0.14s 1 backwards;
}
.page-transition .panel + .panel {
    animation-delay: 0.18s;
}

@keyframes page-child-in {
    0%   { opacity: 0; transform: translateY(12px); }
    /* none (translateY(0) değil) — gerekçe için page-in %100 yorumuna bak. */
    100% { opacity: 1; transform: none; }
}

/* NavLink tıklandığında küçük pulse */
.erp-nav-item:active { transform: scale(0.98); }

.erp-footbar {
    display: flex; align-items: center; gap: 10px;
    /* Yükseklik sidebar ÇIKIŞ bloğuyla eşit (42px) → alt ayraçlar aynı hizada. */
    height: 42px; box-sizing: border-box;
    padding: 0 28px;
    background: transparent;
    border-top: 1px solid var(--erp-border);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: var(--track-wide);
    transition: var(--transition-theme);
}
.erp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success-soft); }
.erp-sep { opacity: 0.4; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; gap: 16px; }
.page-title { font-family: var(--font-display); font-size: var(--fs-3xl); line-height: 1; color: var(--text-primary); letter-spacing: var(--track-tight); text-transform: uppercase; }
.page-title .accent {
    background: linear-gradient(180deg, var(--amber-bright) 0%, var(--amber) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* Başlık accent'i SIDEBAR MODUNA uyar (kullanıcı isteği 2026-08-19): mod 1'de
   turuncu (yukarıdaki varsayılan), mod 2'de sidebar'ın mavi vurgusu. Gradyan
   uçları mod-2 accent tokenlarından; iki temada da doygun kaldığı için tek
   tanım yeterli. */
[data-sidebar-mode="2"] .page-title .accent {
    background: linear-gradient(180deg, #a9c4f5 0%, var(--erp-sidebar-accent-2, #4a6fc4) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.page-sub { font-family: var(--font-body); font-size: 11px; color: var(--text-dim); margin-top: 4px; letter-spacing: var(--track-body); line-height: 1.4; }
.page-actions { display: flex; gap: 8px; }

.btn-ghost {
    appearance: none;
    background: transparent;
    border: 1px solid var(--erp-border-strong);
    color: var(--text-primary);
    padding: 8px 14px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: normal;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    transition: border-color 160ms, color 160ms;
}
.btn-ghost:hover { border-color: var(--amber); color: var(--amber); }

/* Excel indir — kompakt, nötr buton + küçük tablo-ikon rozeti (yeşil). Hover'da amber. */
.btn-excel {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-primary);
    padding: 5px 11px 5px 6px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    white-space: nowrap;
    transition: color 160ms;
}
.btn-excel-badge {
    display: grid; place-items: center;
    width: 22px; height: 22px; flex-shrink: 0;
    border-radius: 6px;
    background: rgba(93, 187, 122, 0.16);
    color: #7fd0a0;
    transition: background 160ms, color 160ms;
}
.btn-excel-badge svg { width: 13px; height: 13px; }
.btn-excel:hover:not(:disabled) { color: var(--amber-bright, #e8cf9a); }
.btn-excel:hover:not(:disabled) .btn-excel-badge { background: rgba(216, 179, 108, 0.16); color: var(--amber-bright, #e8cf9a); }
.btn-excel:active:not(:disabled) { transform: scale(0.97); }
.btn-excel:disabled { opacity: 0.55; cursor: not-allowed; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 24px; }
/* Kart çerçevesi: "cam kenar & akan ışık şeridi".
   Üstte kalıcı altın hairline + yüzeyde ince cam parlaması; hover'da hairline
   üzerinde soldan sağa bir ışık akar. Renkler --fx5-* token'larından gelir ve
   açık/koyu temada AYRI tanımlıdır (bkz. app.css).

   `overflow: hidden` BİLEREK YOK: kart içindeki hover balonu (.bs-balon, bekleyen
   sevkiyat kırılımı) kartın ÜSTÜNE taşıyor, overflow gizlenirse kırpılır. Akan
   ışığa gerek de yok — o bir arka plan katmanı ve arka planlar zaten border-box'a
   kırpılır, elemanın dışına sızmaz. */
.stat-card {
    position: relative; /* .stat-spark sağ üst köşeye + ::before/::after konumlanır */
    background: linear-gradient(180deg, var(--fx5-sheen), transparent 58%), var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: 12px;
    padding: 18px 20px;
    /* --fx5-aura: ampulün sıcak halesi kartın arkasında (çift katman: geniş
       yumuşak + dar parlak — bulb-glow ile aynı dil). Statik; hover'da güçlenir. */
    box-shadow: inset 0 1px 0 var(--fx5-rim), var(--fx5-aura);
    transition: var(--transition-theme), transform 200ms, border-color 200ms, box-shadow 260ms;
}
/* Kalıcı üst hairline — kart durağanken de görünen tek işaret */
.stat-card::before {
    content: '';
    position: absolute; left: 0; right: 0; top: 0; height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--fx5-line) 25%, var(--fx5-line) 75%, transparent);
    border-radius: 12px 12px 0 0;
    pointer-events: none;
}
/* Hover'da akan ışık */
.stat-card::after {
    content: '';
    position: absolute; left: 0; right: 0; top: 0; height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--fx5-beam), transparent);
    background-size: 38% 100%;
    background-repeat: no-repeat;
    background-position: -45% 0;
    border-radius: 12px 12px 0 0;
    opacity: 0;
    transition: opacity 200ms;
    pointer-events: none;
}
.stat-card:hover {
    transform: translateY(-2px);
    border-color: var(--gold);
    box-shadow: inset 0 1px 0 var(--fx5-rim), var(--fx5-aura-hover), var(--fx5-lift);
}
.stat-card:hover::after {
    opacity: 1;
    animation: fx5-sweep 1.5s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes fx5-sweep {
    0%   { background-position: -45% 0; }
    100% { background-position: 145% 0; }
}
/* Hareket hassasiyeti: ışık akmaz ama kenar görünürlüğü korunur */
@media (prefers-reduced-motion: reduce) {
    .stat-card { transition: var(--transition-theme), border-color 200ms; }
    .stat-card:hover { transform: none; }
    .stat-card:hover::after { animation: none; opacity: 0.55; background-position: 50% 0; }
}
.stat-label { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: var(--track-label); margin-bottom: 8px; }
.stat-value { font-family: var(--font-display); font-size: 30px; color: var(--text-primary); line-height: 1; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.stat-trend { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; }
.stat-trend.up { color: var(--success-text); } .stat-trend.down { color: var(--danger-text); } .stat-trend.neutral { color: var(--text-dim); }

/* Kart sağ üstündeki mini trend çizgisi (Dashboard) */
.stat-spark { position: absolute; top: 18px; right: 18px; opacity: 0.9; pointer-events: none; }

/* Tıklanabilir stat kartı — <a> olarak render edilir, yetkiye bağlı */
a.stat-card { display: block; text-decoration: none; color: inherit; cursor: pointer; }

/* Placeholder ("çok yakında") kartı: kesikli çerçeve + nötr hover —
   canlı kartla karışıp "veri var" sinyali vermesin */
.stat-card.stat-card-soon { border-style: dashed; border-color: var(--erp-border-strong); opacity: 0.8; }
.stat-card.stat-card-soon:hover { transform: none; border-color: var(--erp-border-strong); }
.stat-soon-pill {
    display: inline-block;
    font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600;
    color: var(--gold-text); background: var(--gold-soft);
    border: 1px solid var(--gold);
    padding: 3px 12px; border-radius: 999px;
}

.panel {
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: 12px;
    padding: 22px;
    margin-bottom: 20px;
    transition: var(--transition-theme);
}
.panel-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px dashed var(--erp-border); }
/* Site standardı: her yeni sayfa/panel .page-title veya .panel-title
   class'ını kullanır ve büyük harf + bu fontu otomatik alır. */
.panel-title { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--text-primary); letter-spacing: 0.05em; text-transform: uppercase; }
/* gold-text: cyan hem light'ta okunmuyordu hem amber/altın kimliğine yabancıydı */
.panel-tag { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; color: var(--gold-text); letter-spacing: var(--track-body); }

.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.quick-tile {
    display: flex; align-items: center; gap: 14px;
    background: var(--erp-bg);
    border: 1px solid var(--erp-border);
    border-radius: 10px;
    padding: 14px 16px;
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color 160ms, transform 160ms, background 160ms;
}
.quick-tile:hover { border-color: var(--amber); transform: translateX(2px); }
.quick-tile-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--amber-bright), var(--amber));
    color: #1a1a2a;
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-size: 12px; letter-spacing: 0.1em;
    flex-shrink: 0;
}
.quick-tile-name { flex: 1; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--text-primary); }
.quick-tile-arrow { font-family: var(--font-mono); color: var(--text-dim); transition: transform 160ms, color 160ms; }
.quick-tile:hover .quick-tile-arrow { color: var(--amber); transform: translateX(4px); }

.search-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) auto; gap: 12px; align-items: end; }
/* Sorgula/Ara butonu İÇERİK GENİŞLİĞİNDE kalsın. auto-fit birden fazla kolon
   ürettiğinde buton sondaki `auto` track'ine değil üretilen `1fr` kolona düşüyor
   ve satır boyunca uzayıp "sayfayı kaplayan dev buton" görünümü oluşturuyordu. */
.search-row > button { justify-self: start; }

/* SORGU BUTONU AÇIKLAMALARIN ALTINDA — site standardı. Buton `.search-row`
   grid'inin dışında, kendi satırında durur; okuma sırası "alan → ne yazmalıyım
   → butona bas" oluyor. Yeni bir sorgu sayfası eklerken butonu search-row'un
   içine koymayın, açıklamalardan sonra bu sarmalayıcıya alın. */
.search-actions { margin-top: 14px; display: flex; }
.search-field { display: flex; flex-direction: column; gap: 6px; }
.search-label { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--text-dim); }
.search-field input {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: normal;
    color: var(--input-text);
    outline: none;
    transition: border-color 180ms, box-shadow 180ms;
}
.search-field input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(201, 162, 92, 0.15); }
.search-field input::placeholder { color: var(--input-placeholder); }

/* Açılır liste, metin kutusuyla BİREBİR aynı görünsün: native görünüm kapatılır
   (appearance:none) ve kendi ok işaretimiz çizilir. Ok grisi bilerek sabit — data
   URI içinde currentColor çalışmaz; #8a8f97 her iki temada da okunur.
   color-scheme: açılan native listenin de tema ile uyumlu çizilmesini sağlar.
   (AdminLogs kendi .log-search-row select kuralıyla aynı görünümü zaten
   sağlıyordu; bu global kural yeni sayfaların tekrar yazmasını gereksiz kılar.) */
.search-field select {
    appearance: none; -webkit-appearance: none;
    width: 100%;
    background-color: var(--input-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8f97' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 13px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 10px 34px 10px 12px;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: normal;
    color: var(--input-text);
    outline: none; cursor: pointer;
    transition: border-color 180ms, box-shadow 180ms;
}
.search-field select:hover { border-color: var(--erp-border-strong); }
.search-field select:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(201, 162, 92, 0.15); }

/* Açılan seçenek listesi (popup) işletim sistemi tarafından çizilir; CSS ile tam
   stillenemez. Elde iki kaldıraç var, ikisini birden kullanıyoruz:
   1) color-scheme — popup'ı koyu/açık çizdirir. "light dark" YAZMAYIN: tarayıcı
      sistem tercihini seçer ve koyu temada beyaz liste açılır (canlıda görüldü).
      Uygulamanın kendi temasına sabitlenmeli.
   2) option/optgroup arka planı — Chrome/Edge'de uygulanır, popup panel rengini
      uygulama yüzeyine yaklaştırır. Safari bunu yok sayar, orada (1) devrededir. */
.search-field select { color-scheme: dark; }
[data-theme="light"] .search-field select { color-scheme: light; }
.search-field select option {
    background-color: var(--erp-surface);
    color: var(--text-primary);
}
.search-field select optgroup {
    background-color: var(--erp-surface);
    color: var(--text-dim);
    font-style: normal; font-weight: 700;
}

/* BİRİNCİL BUTON STANDARDI — uygulamanın her yerinde bu ölçü kullanılır.
   Ölçüler bilinçli olarak küçük: buton bir aksiyon işareti, sayfayı kaplayan bir
   blok değil. Bir yerde daha büyük/geniş buton gerekiyor gibi görünüyorsa önce
   düzeni gözden geçir; bu değerleri sayfa bazında ezmeyin. */
.btn-primary {
    appearance: none; border: 0;
    background: linear-gradient(180deg, var(--amber-bright) 0%, var(--amber) 100%);
    color: #1a1a2a;
    padding: 7px 13px;
    border-radius: 7px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: normal;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
    box-shadow: 0 4px 10px -4px var(--amber-glow);
    transition: transform 160ms, box-shadow 160ms;
    height: 31px;
    text-transform: uppercase;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -4px var(--amber-glow); }
.btn-primary .arrow { font-family: var(--font-mono); font-size: 12px; }
/* Devre dışı birincil buton (sorgu çalışırken vb.) — eskiden Sorgulama.razor'da
   tekrar tekrar tanımlıydı, artık global. */
.btn-primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--font-body); font-size: 12px; }
.data-table th {
    text-align: left;
    padding: 10px 12px;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    font-weight: 600;
    color: var(--text-dim);
    border-bottom: 1px solid var(--erp-border-strong);
    white-space: nowrap;
}
.data-table td { padding: 12px 12px; color: var(--text-primary); border-bottom: 1px solid var(--erp-border); line-height: 1.45; }
.data-table tbody tr { transition: background 140ms; }
/* Zebra: 100 satırlık log/8 kolonlu seri tablosunda satır izleme desteği.
   Özel zeminli satırlar (ör. log-row-login) class'la geldiği için zebra'yı ezer. */
.data-table tbody tr:nth-child(even) { background: var(--erp-row-zebra); }
.data-table tbody tr:hover { background: var(--erp-row-hover); }

/* Panel içi kaydırmalı tablo: sayfa değil konteyner kaydığı için sticky
   başlık burada GÜVENLE çalışır (sayfa-geneli sticky denemesi bozuluyordu). */
.table-scroll { max-height: 65vh; overflow-y: auto; }
.table-scroll .data-table th {
    position: sticky; top: 0; z-index: 2;
    background: var(--erp-surface);
}
/* mono: seri no / kod / tarih-saat gibi tek satırda kalması gereken değerler
   — sayfa geneli kaydığında (sticky başlık işe yaramadığı için kaldırıldı,
   bkz. git geçmişi) en azından hücre içeriği alt satıra kırılmasın. */
.data-table .mono { letter-spacing: 0.04em; white-space: nowrap; }
.data-table .num  { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--track-body);
    line-height: normal;
    border: 1px solid currentColor;
    white-space: nowrap;
}
/* 8 durum-adlı sınıf (stokta/sevk/ariza/...) hiç kullanılmıyordu ve hardcoded
   renkleri light temada kontrastı geçmiyordu — 4 anlamsal varyanta indirildi,
   -text token'ları iki temada da okunur. Durum→varyant eşlemesi sayfada yapılır. */
.badge-success { color: var(--success-text); background: var(--success-soft); }
.badge-danger  { color: var(--danger-text);  background: var(--danger-soft); }
.badge-info    { color: var(--cyan);         background: rgba(127, 162, 232, 0.08); }
.badge-warn    { color: var(--warning-text); background: rgba(216, 161, 22, 0.08); }

.empty-state { padding: 40px 20px; text-align: center; color: var(--text-dim); }
.empty-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--erp-bg);
    border: 1px dashed var(--erp-border-strong);
    display: grid; place-items: center;
    margin: 0 auto 14px;
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--amber);
}
.empty-title { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--text-primary); letter-spacing: 0.05em; margin-bottom: 4px; }
.empty-sub { font-family: var(--font-body); font-size: 12px; color: var(--text-dim); line-height: 1.4; }

/* Hata durumu (timeout, sunucu hatası, yüklenemedi) "kayıt bulunamadı"dan
   bir bakışta ayrışsın — hata farklı aksiyon gerektirir (BT'ye başvur).
   "Yetkin yok" blokları hata değil durum: nötr amber kalır. */
.empty-state.is-error .empty-icon {
    color: var(--danger);
    border-color: var(--danger);
    background: var(--danger-soft);
}
.empty-state.is-error .empty-title { color: var(--danger); }

/* ============================================================
   RESPONSIVE — TELEFON & TABLET (≤900px)
   Masaüstü (>900px) düzeni HİÇ değişmez; tüm mobil davranış burada.

   Sidebar dar ekranda daraltılmış grid kolonu OLARAK KALMAZ (168px sidebar
   ekranın yarısını yiyordu). Bunun yerine off-canvas ÇEKMECE olur: normalde
   ekran dışında; topbar'daki hamburger açar, karartma (backdrop) veya bir
   menü öğesine tıklamak kapatır. İçerik tüm genişliği kullanır.
   ============================================================ */
@media (max-width: 900px) {
    /* Tek kolon: sidebar akıştan çıkar (position:fixed), içerik tam genişlik. */
    .erp-shell { grid-template-columns: 1fr; }

    .erp-sidebar {
        position: fixed;
        top: 0; bottom: 0; left: 0;
        width: min(300px, 84vw);
        z-index: 70;
        transform: translateX(-100%);
        transition: transform 280ms cubic-bezier(.2, .85, .25, 1);
        will-change: transform;
    }
    .erp-sidebar.is-open {
        transform: translateX(0);
        box-shadow: 0 0 60px -8px rgba(0, 0, 0, 0.6);
    }
    /* İçeriğe sızan sağ kenar degradesi çekmecede içeriğin üstüne düşer — kapat. */
    .erp-sidebar::after { display: none; }

    /* Hamburger + karartma yalnız bu modda görünür. */
    .erp-hamburger { display: inline-flex; }
    .erp-nav-backdrop {
        display: block;
        position: fixed; inset: 0;
        z-index: 60;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0; pointer-events: none;
        transition: opacity 280ms ease;
    }
    .erp-nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

    /* Topbar/footbar/içerik sıkılaştırma. */
    .erp-topbar { padding: 12px 16px; gap: 10px; }
    .erp-topbar-left { gap: 10px; }
    .erp-footbar { padding: 0 16px; }
    .erp-content { padding: 18px; }
    .erp-user-meta { display: none; }
    .page-title { font-size: 20px; }

    /* Breadcrumb sığmayınca sayfa adını "…" ile kessin, topbar'ı taşırmasın. */
    .erp-breadcrumb { min-width: 0; overflow: hidden; }
    .erp-crumb-page { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Sorgu formu + sayfa başlığı/panel aksiyonları alt alta / sarabilsin.
       (Panel başlığındaki aralık toggle'ı — 24S/7G/30G/90G/6AY — dar ekranda
       taşıp kesiliyordu; başlık satırı ve toggle artık sarar.) */
    .search-row { grid-template-columns: 1fr; }
    /* Buton eskiden `width: 100%` ile satırın tamamını kaplıyordu ve dar ekranda
       ekranı kaplayan dev bir blok gibi duruyordu. Artık içerik genişliğinde ve
       sola hizalı; dokunma hedefi küçülmesin diye yalnızca bir alt genişlik var. */
    .search-row .btn-primary { justify-self: start; min-width: 104px; justify-content: center; }
    .page-head { flex-wrap: wrap; }
    .page-actions { flex-wrap: wrap; }
    .panel-head { flex-wrap: wrap; gap: 10px; }
    .trend-toggle { flex-wrap: wrap; }

    /* Mobilde geniş tablo hücreleri sarıp okunmaz hale gelmesin: doğal
       genişliğini korusun, sarmalayıcı YATAY kaysın. (Masaüstünde bu kural
       yok — hücreler eskisi gibi sığacak şekilde sarar.) */
    .table-x .data-table,
    .table-scroll .data-table { min-width: max-content; }
}

/* Tablo kaydırma sarmalayıcıları. Masaüstünde içerik sığdığında kaydırma
   çubuğu görünmez → masaüstü etkilenmez; mobilde yatay kaydırmayı açar. */
.table-scroll { overflow: auto; }          /* dikey + yatay (eski: yalnız dikey) */
.table-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 560px) {
    .erp-content { padding: 14px; }
    /* iOS input'a odaklanınca 16px altı yazıda otomatik zoom yapar — engelle. */
    input, select, textarea { font-size: 16px; }
    /* Küçük telefonlarda başlık aksiyon ikonlarına yer bırakmak için biraz küçül. */
    .page-title { font-size: 18px; }
    /* Telefonda uzun alan adı sayfa adını kesip itiyordu; kök+ayracı gizle,
       sadece faydalı olan sayfa adı kalsın (alan adı zaten adres çubuğunda). */
    .erp-crumb-root, .erp-crumb-sep { display: none; }
}

/* ============================================================
   QR OLUŞTUR
   ============================================================ */
.qr-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 900px) { .qr-layout { grid-template-columns: 1fr; } }

.qr-controls { padding: 16px 22px; }
.qr-mode-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: wrap;
}

.qr-segmented {
    display: inline-flex;
    background: var(--erp-bg);
    border: 1px solid var(--erp-border);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}
.qr-segmented button {
    appearance: none; border: 0;
    background: transparent;
    color: var(--text-dim);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: normal;
    text-transform: uppercase;
    padding: 7px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 180ms, color 180ms;
}
.qr-segmented button:hover { color: var(--text-primary); }
.qr-segmented button.active {
    background: linear-gradient(180deg, var(--amber-bright), var(--amber));
    color: #1a1a2a;
    box-shadow: 0 2px 8px -2px var(--amber-glow);
}

.qr-form { display: flex; flex-direction: column; gap: 14px; }
.qr-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .qr-form-row { grid-template-columns: 1fr; } }

.qr-preview-panel { position: sticky; top: 16px; }
.qr-preview {
    display: grid; place-items: center;
    padding: 20px;
    background: var(--erp-bg);
    border-radius: 12px;
    margin-bottom: 16px;
}
.qr-preview canvas {
    max-width: 100%; height: auto;
    border-radius: 6px;
    box-shadow: 0 4px 12px -4px rgba(0,0,0,0.15);
}

.qr-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.qr-tip {
    margin-top: 14px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: var(--track-body);
    line-height: 1.4;
}
.qr-tip .dim { color: var(--gold-text); margin-right: 4px; } /* rol kuralı: ipucu = gold, eylem = amber */

.qr-validation {
    margin-top: 10px;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--danger);
    font-weight: 600;
}
.qr-validation strong { color: var(--text-primary); }

.qr-batch-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 20px;
}

.qr-code-inline {
    font-family: var(--font-mono);
    font-size: 11px;
    background: var(--erp-bg);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--erp-border);
    color: var(--cyan);
}

/* QR — validation & placeholder */
.req { color: var(--amber); margin-left: 2px; }

.qr-invalid {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px var(--danger-soft) !important;
}

.field-error {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--danger);
    margin-top: 2px;
}

.qr-hint {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-dim);
    margin-top: -6px;
    letter-spacing: var(--track-body);
    line-height: 1.4;
}
.qr-hint strong { color: var(--gold-text); }

.qr-placeholder {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    color: var(--text-dim);
    padding: 30px 10px;
    text-align: center;
}
.qr-placeholder svg { color: var(--text-dim); opacity: 0.4; }
.qr-placeholder p {
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: var(--track-body);
}
.qr-placeholder strong { color: var(--gold-text); }

/* Segmented control'e başlık — formlardaki search-label diliyle */
.qr-seg-group { display: flex; flex-direction: column; gap: 6px; }

.qr-select {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: normal;
    color: var(--input-text);
    outline: none;
    transition: border-color 180ms;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23999' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    cursor: pointer;
}
.qr-select:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(201, 162, 92, 0.15); }

/* --- Kartvizit linki + baskı bilgisi (QR Oluştur) ---------------------------
   QR'ın içinde vCard değil kısa link var; kullanıcının hem linki hem QR'a giren
   büyük harfli metni görmesi gerekiyor (ikisi aynı adres, biri insan biri makine
   için). Baskı kutusu ise 1x1 cm hedefinin tutup tutmadığını EKRANDA söyler —
   asıl hata bu bilginin hiç gösterilmemesiydi. */
.qr-link-box {
    margin-top: 14px;
    border: 1px solid var(--erp-border);
    border-radius: 8px;
    overflow: hidden;
}
.qr-link-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 11px;
    border-bottom: 1px solid var(--erp-border);
}
.qr-link-row:last-child { border-bottom: 0; }
.qr-link-label {
    flex: 0 0 108px;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.qr-link-val {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-primary);
    overflow-x: auto;
    white-space: nowrap;
}
.qr-copy { flex: 0 0 auto; }

.qr-print-info {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--erp-border);
    background: var(--erp-row-zebra);
}
.qr-print-info p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-dim);
    letter-spacing: var(--track-body);
}
.qr-print-info strong { color: var(--gold-text); }
.qr-print-sub { margin-top: 6px !important; }
/* Hedef boyut okuma sınırının altındaysa: sessizce geçmesin. */
.qr-print-info.uyari { border-color: var(--danger); }
.qr-print-info.uyari strong { color: var(--danger); }

/* Satır aksiyonları tek satırda kalsın: sarmalayınca satır yüksekliği üçe
   katlanıyor ve liste taranamıyor. Dar ekranda tablo .table-x ile yatay kayar. */
.qr-row-actions { display: flex; gap: 6px; flex-wrap: nowrap; white-space: nowrap; }
.qr-row-silinmis td { opacity: 0.5; text-decoration: line-through; }
.qr-row-silinmis td:last-child { opacity: 1; text-decoration: none; }

/* ============================================================
   BEKLEYEN SEVKİYAT (Operasyon) + dashboard kartının hover balonu
   ============================================================ */

/* Balon kartın İÇİNDE mutlak konumlu — position:fixed KULLANMA:
   .page-transition'ın animasyonlu transform'u fixed öğeleri viewport'a değil
   o kutuya bağlıyor ve balon imleçten kopuyor (bkz. CLAUDE.md, Raporlar
   tooltip'lerinde birebir yaşandı). */
/* Stat şeridi, ALTINDAKİ grafik panellerinin ÜSTÜNDE bir katmanda durmalı:
   .trend-grid .panel'lerin kendi stacking context'i var (z-index:0 + aurora
   halesi) ve DOM'da sonra geldikleri için hover balonunu ÖRTÜYORLARDI
   (kullanıcı ekran görüntüsüyle bildirdi 2026-08-19). Şeridi tek katman
   yukarı almak balonu her koşulda üstte tutar. */
.stat-grid { position: relative; z-index: 3; }
.stat-card.has-bs-tip { position: relative; }

/* ===== KATMAN ÖLÇEĞİ — hover balonları neden kayboluyordu =====================
   Balonlar kendi kutularının İÇİNDE mutlak konumlu. Ama kapsayıcıya `z-index`
   verilir verilmez o kutu kendi STACKING CONTEXT'ini kurar: içerideki balonun
   `z-index: 30`u artık yalnız o kutunun içinde geçerlidir, kutunun kendisi
   dışarıda hangi katmandaysa balon da orada kalır. Bu yüzden balon, DOM'da
   SONRA gelen her kardeşin altında kaldı — kullanıcı üç ayrı yerde bildirdi.
   Çözüm: balonu değil, HOVER'DAKİ KUTUYU yukarı almak. Ölçek tek yerde:

     0  → dinlenmedeki paneller / tür kırılımı çipleri (kendi context'leri)
     2  → yapışkan tablo başlığı (.table-scroll th)
     3  → stat şeridi (.stat-grid)
     6  → HOVER'DAKİ dashboard paneli  → stat şeridini ve kardeş panelleri geçer
    60  → HOVER'DAKİ tür kırılımı çipi → yapışkan başlığı ve kardeş çipleri geçer

   Yeni bir hover balonu eklerken balona z-index vermek YETMEZ; kapsayıcısına
   bu ölçekten bir hover katmanı da ver. */

.bs-balon {
    position: absolute;
    left: 50%;
    /* AŞAĞI açılır, yukarı DEĞİL: stat kartları dashboard'un en üst şeridinde
       durduğu için yukarı açılan balonun ilk satırları ekranın dışında kalıyordu
       (canlı önizlemede görüldü). */
    top: calc(100% + 10px);
    transform: translateX(-50%) translateY(-4px);
    min-width: 214px;
    padding: 10px 12px;
    /* BALON ÇERÇEVE STANDARDI (kullanıcı: irsaliye trendindeki balon beğenildi,
       hepsi aynı olsun): yüzey dolgusu + MAVİ vurgu kenarı + 10px yuvarlaklık +
       derin gölge. Nötr gri kenar yerine --pnl-cizgi-a. */
    background: var(--erp-surface);
    border: 1px solid var(--pnl-cizgi-a);
    border-radius: 10px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    transition: opacity 150ms ease, transform 150ms ease, visibility 150ms;
    z-index: 40;
    pointer-events: none;   /* balon kendi hover'ını yutmasın, kart linki tıklanabilir kalsın */
}
.stat-card.has-bs-tip:hover .bs-balon,
.stat-card.has-bs-tip:focus-visible .bs-balon {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
/* Kartın altında, yukarı bakan ok */
.bs-balon::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: var(--pnl-cizgi-a);
}
.bs-balon-bas {
    font-family: var(--font-body);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 7px;
}
.bs-balon-sat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.7;
}
.bs-balon-ad  { color: var(--text-primary); }
.bs-balon-say { color: var(--gold-text); font-variant-numeric: tabular-nums; font-weight: 600; }
.bs-balon-dip {
    margin-top: 7px;
    padding-top: 6px;
    border-top: 1px solid var(--erp-border);
    font-family: var(--font-body);
    font-size: 10.5px;
    color: var(--text-dim);
}

/* --- Tür kırılımı şeridi (liste sayfası) --- */
.bs-tipler {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
}
.bs-tip {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    padding: 11px 13px;
    background: var(--erp-row-zebra);
    border: 1px solid var(--erp-border);
    border-radius: 10px;
    cursor: pointer;
    font-family: var(--font-body);
    transition: border-color 160ms, background 160ms;
}
.bs-tip:hover:not(:disabled) { border-color: var(--gold); background: var(--erp-row-hover); }
.bs-tip:disabled { opacity: 0.6; cursor: default; }

/* --- Kutu çerçevesi: dashboard panellerinin "aurora + koşan ışık" dilinin
   küçültülmüş hâli. GERÇEK border'a DOKUNULMAZ (solid/dashed ayrımı "kart dışı"
   bilgisini taşıyor) — ışık katmanları pseudo'lardan gelir. --- */
.bs-tip { position: relative; z-index: 0; overflow: visible; }
/* Hover'da çipin KENDİSİ yukarı çıkar (katman ölçeği, bkz. yukarısı): balon
   z-index:30 ile çipin içinde kalıyor, çip 0'da olduğu için DOM'da sonraki
   çipler ve yapışkan tablo başlığı (z:2) üstüne biniyordu. */
.bs-tip:hover { z-index: 60; }
/* Arkada nefes alan hale */
.bs-tip::before {
    content: ""; position: absolute; inset: -8px; z-index: -1;
    border-radius: 16px; pointer-events: none;
    background:
        radial-gradient(52% 62% at 12% 0%, var(--pnl-halo-mavi), transparent 70%),
        radial-gradient(54% 64% at 90% 100%, var(--pnl-halo-altin), transparent 70%);
    filter: blur(7px);
    opacity: 0.55;
    animation: bs-nefes 6.2s ease-in-out infinite;
    animation-delay: var(--bsd, 0s);
    transition: opacity 220ms;
}
@keyframes bs-nefes {
    0%, 100% { opacity: 0.34; transform: scale(0.98); }
    50%      { opacity: 0.8;  transform: scale(1.015); }
}
/* Kenarda koşan tek komet */
.bs-tip::after {
    content: ""; position: absolute; inset: -1px; border-radius: 11px;
    padding: 1.3px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    background: conic-gradient(from var(--bsKos),
        transparent 0 80%, var(--pnl-kuyruk) 93%, var(--pnl-bas) 98%, var(--pnl-uc) 99.3%, transparent 100%);
    opacity: 0.55;
    transition: opacity 220ms;
    animation: bs-kos 4.2s linear infinite;
    animation-delay: var(--bsd, 0s);
}
@keyframes bs-kos { to { --bsKos: 680deg; } }
.bs-tip:hover:not(:disabled)::after { opacity: 1; }
.bs-tip:hover:not(:disabled)::before { opacity: 0.95; }
/* SENKRON BOZ: kutular aynı anda parlamasın (panellerdeki kuralla aynı mantık;
   süreler/gecikmeler birbirinin katı değil) */
.bs-tipler > *:nth-child(1) { --bsd: -0.3s; }
.bs-tipler > *:nth-child(2) { --bsd: -1.7s; }
.bs-tipler > *:nth-child(3) { --bsd: -2.9s; }
.bs-tipler > *:nth-child(4) { --bsd: -3.8s; }
.bs-tipler > *:nth-child(5) { --bsd: -1.1s; }
/* Kart dışı kutusunda komet SÖNÜK: o kutu bilerek "sayılmıyor" diyor,
   ışıkla öne çıkmamalı. */
.bs-tip-haric::after { opacity: 0.22; }
.bs-tip-haric:hover:not(:disabled)::after { opacity: 0.5; }
/* Seçili tür: altın kenarlık + hafif altın zemin (iki temada da okunur) */
.bs-tip.on {
    border-color: var(--gold);
    background: color-mix(in srgb, var(--gold) 10%, transparent);
}
.bs-tip-ad  { font-size: 11.5px; color: var(--text-primary); letter-spacing: var(--track-body); }
.bs-tip-say { font-size: 21px; color: var(--gold-text); font-variant-numeric: tabular-nums; line-height: 1.15; }
.bs-tip-alt { font-size: 10.5px; color: var(--text-dim); }

/* --- Tablo hücreleri --- */
/* Kod + ad aynı hücrede iki satır: tablo 9 kolonluk, ayrı kolonlar ekranı taşırıyordu */
.bs-iki { display: flex; flex-direction: column; gap: 1px; line-height: 1.35; }
.bs-kod { font-size: 11px; color: var(--text-dim); }

.bs-etiket {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--erp-border-strong);
    font-size: 10.5px;
    letter-spacing: var(--track-body);
    white-space: nowrap;
}
/* Grup etiketi renkleri — gözle taranabilsin diye her grup kendi tonunda.
   Renkler tema token'larından gelir, iki temada da okunur. */
.bs-g-servis  { border-color: var(--warning); color: var(--warning-text); }
.bs-g-rezerve { border-color: var(--gold); color: var(--gold-text); }
.bs-g-satis   { border-color: var(--success); color: var(--success-text); }
.bs-g-diger   { color: var(--text-dim); }

/* Kart dışı (Rezerve) işaretleri — soluk ve küçük: bilgi verir, dikkat çalmaz.
   Fark bilinçli olduğu için gizlenmez; kullanıcı kart ile listeyi kıyaslarken
   sebebi satırda görsün. */
.bs-haric-not, .bs-satir-not, .bs-balon-not {
    display: inline-block;
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
    border: 1px solid var(--erp-border-strong);
    border-radius: 999px;
    padding: 0 5px;
    line-height: 1.5;
    white-space: nowrap;
}
.bs-haric-not { margin-left: 5px; }
.bs-satir-not { border: 0; padding: 0; letter-spacing: 0.04em; }
.bs-balon-not { border: 0; padding: 0; margin-left: 4px; letter-spacing: 0.04em; }
/* Kart dışı grup çipi: kesikli kenar — "sayıya girmiyor" görsel karşılığı */
.bs-tip-haric { border-style: dashed; }
.bs-tip-haric .bs-tip-say { color: var(--text-dim); }
/* Balonda ayraç: üstteki satırların toplamı kartın sayısıdır, alttakiler değil */
.bs-balon-haric {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--erp-border-strong);
    opacity: 0.75;
}
.bs-balon-haric .bs-balon-say { color: var(--text-dim); font-weight: 500; }

/* Bekleyen tutar kutusu — grup çipleriyle aynı şeritte ama TIKLANABİLİR DEĞİL
   (filtre değil, toplam). Altın kenarlıkla ayrışır; üzerine gelince grup bazlı
   tutar kırılımı açılır. */
.bs-tip-tutar {
    cursor: help;
    position: relative;
    border-color: var(--gold);
    background: color-mix(in srgb, var(--gold) 7%, transparent);
}
/* Tutar kutusunun kometi ALTIN (kimliği o) — diğerleri mavi koşar */
.bs-tip-tutar::after {
    background: conic-gradient(from var(--bsKos),
        transparent 0 80%, var(--pnl-altin-kuyruk) 93%, var(--pnl-altin-bas) 99%, transparent 100%);
    opacity: 0.7;
}
.bs-tip-tutar:hover::after { opacity: 1; }
.bs-tip-tutar:hover::before { opacity: 0.95; }
.bs-tip-tutar .bs-tip-say { color: var(--gold-text); }
.bs-tutar-balon {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    z-index: 30;
    min-width: 208px;
    padding: 9px 11px;
    /* Balon çerçeve standardı — bkz. .bs-balon */
    background: var(--erp-surface);
    border: 1px solid var(--pnl-cizgi-a);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
    opacity: 0; visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 150ms, transform 150ms, visibility 150ms;
    pointer-events: none;
    text-align: left;
}
.bs-tip-tutar:hover .bs-tutar-balon { opacity: 1; visibility: visible; transform: translateY(0); }
/* Grup satırının altındaki KOD satırları — girintili ve soluk, hiyerarşi gözle
   okunsun. Uzun listede balon kendi içinde kayar (sayfa kaymaz). */
.bs-tutar-balon {
    /* Liste uzun olabiliyor (4 grup + ~20 kod): balon KENDİ İÇİNDE kayar,
       sayfa kaymaz. Kaydırma çubuğu sidebar'la aynı ince stilde — "kırpılmış"
       değil "kaydırılabilir" okunsun diye. */
    max-height: 340px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.bs-tutar-balon::-webkit-scrollbar { width: 7px; }
.bs-tutar-balon::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 4px; }
.bs-tutar-balon::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); }
.bs-tutar-balon::-webkit-scrollbar-track { background: transparent; }
/* TOPLAM satırı balonun dibine YAPIŞIK: liste kayarken de her zaman görünür.
   Kaymayan bir dipte toplam listenin altında kalıyor ve kullanıcı balonu
   "yarım basılmış" görüyordu. */
.bs-tutar-balon .bs-balon-dip {
    position: sticky;
    bottom: -9px;                 /* balonun 9px alt iç boşluğunu da kapat */
    margin-bottom: -9px;
    padding-bottom: 9px;
    background: var(--erp-surface);
}
.bs-balon-alt {
    padding-left: 12px;
    font-size: 11px;
    opacity: 0.72;
}
.bs-balon-alt .bs-balon-ad { color: var(--text-dim); }
.bs-balon-alt .bs-balon-say { font-weight: 500; }

.bs-kalan { color: var(--gold-text); font-weight: 600; }
.bs-geciken { color: var(--danger); white-space: nowrap; }



/* ============================================================
   PAYLAŞILAN BİLEŞENLER
   (eskiden Sorgulama / SeriNoTakibiAcma / Dashboard / AdminLogs
    içinde tek tek kopyalanıyordu — tek kaynak = kalıcı parite)
   ============================================================ */

/* ---- Spinner ---- */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner-sm {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(0,0,0,0.18);
    border-top-color: #1F1A14;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin-right: 8px;
    vertical-align: -2px;
}

/* ---- Yükleniyor bloğu (LoadingBlock bileşeni) ---- */
.loading-state {
    display: flex; align-items: center; gap: 10px;
    padding: 22px 4px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-dim);
    letter-spacing: 0.02em;
}
.loading-spinner {
    width: 18px; height: 18px;
    border: 2px solid var(--erp-border-strong);
    border-top-color: var(--amber);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}

/* ---- Pager ---- */
.pager {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px;
    margin-top: 18px; padding: 14px;
    font-family: var(--font-body); font-size: 13px;
}
.pager button {
    appearance: none; border: 1px solid var(--erp-border-strong);
    background: transparent; color: var(--text-primary);
    padding: 8px 14px; border-radius: 6px; cursor: pointer;
    font-family: var(--font-body); font-size: 12px; line-height: normal;
    transition: background 140ms, border-color 140ms;
}
.pager button:hover:not(:disabled) { background: var(--gold-soft); border-color: var(--gold); }
.pager button:disabled { opacity: 0.4; cursor: not-allowed; }
.pager button.active {
    background: var(--gold); color: #1F1A14; border-color: var(--gold); font-weight: 700;
}
.pager-ellipsis {
    color: var(--text-dim); padding: 0 4px;
    font-family: var(--font-body); font-size: 12px;
}

/* ---- Trend / aralık geçişi (7G / 30G, 24S…) ---- */
.trend-toggle { display: flex; gap: 6px; }
.trend-toggle button {
    appearance: none; border: 1px solid var(--erp-border-strong);
    background: transparent; color: var(--text-dim);
    padding: 5px 12px; border-radius: 6px; cursor: pointer;
    font-family: var(--font-body); font-size: 11px; font-weight: 600;
    letter-spacing: 0.04em; line-height: normal;
    transition: border-color 140ms, color 140ms, background 140ms;
}
/* Hover pager ile aynı dilde (gold) — aktif durumları zaten ikisi de gold'du */
.trend-toggle button:hover { background: var(--gold-soft); border-color: var(--gold); color: var(--text-primary); }
.trend-toggle button.active {
    background: var(--gold); border-color: var(--gold); color: #1F1A14;
}

/* ---- Callout (vurgulu sonuç / bilgi kutusu) ---- */
/* Seri No sonucu ve Depo ürün kutusu ayrı ayrı inline yazılıyordu; artık ortak. */
.callout {
    background: var(--gold-soft);
    border: 1px solid var(--gold);
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 18px;
}
.callout-label {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.callout-value {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}
/* Callout içindeki seri no / ürün kodu: kullanıcı etiketle ekranı karakter
   karakter karşılaştırıyor — mono burada işlevsel. */
.callout-value .mono { font-family: var(--font-mono); font-size: 15px; font-weight: 500; }

/* ---- Form mesaj satırları ----
   (eskiden Sorgulama/SeriNoTakibiAcma'da 10+ kez inline tekrarlanıyordu;
   eski inline hallerine birebir eşit — sadece tek yerden yönetiliyor) */
.form-error { margin-top: 12px; font-family: var(--font-body); font-size: var(--fs-sm); color: var(--danger); }
.form-hint  { margin-top: 4px;  font-family: var(--font-body); font-size: 11px; color: var(--text-dim); }
.form-hint-first { margin-top: 12px; }
.form-note  { margin-top: 4px;  font-family: var(--font-body); font-size: 11px; color: var(--gold); }
.form-note-gap { margin-top: 8px; }

/* ---- Tablo aksiyon hücresi (düzenle/sil, görüntüle/indir) ---- */
.td-actions { display: flex; gap: 8px; }

/* ---- Toast bildirimleri ---- */
.toast-stack {
    position: fixed;
    bottom: 22px; right: 22px;
    z-index: 200;
    display: flex; flex-direction: column; gap: 10px;
    max-width: min(360px, calc(100vw - 44px));
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    display: flex; align-items: center; gap: 10px;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border-strong);
    border-left: 3px solid var(--text-dim);
    border-radius: 10px;
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-primary);
    box-shadow: 0 12px 28px -10px rgba(0,0,0,0.35);
    animation: toast-in 0.28s cubic-bezier(.2,.85,.25,1) both;
}
.toast::before { font-size: 14px; line-height: 1; }
.toast-success { border-color: var(--gold); border-left-color: var(--gold); }
.toast-success::before { content: "✓"; color: var(--success); }
.toast-error { border-left-color: var(--danger); }
.toast-error::before { content: "!"; color: var(--danger); font-weight: 700; }
.toast-info { border-left-color: var(--cyan); }
.toast-info::before { content: "ⓘ"; color: var(--cyan); }
@keyframes toast-in {
    0%   { opacity: 0; transform: translateY(12px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   "NASIL ÇALIŞIR?" — sayfa kılavuzu butonu + uygulama içi modal
   (HowItWorks.razor). Her sayfanın .page-head sağında; tıklanınca
   o sayfanın kullanım kılavuzu modalde açılır.
   ============================================================ */
.howto-btn {
    flex: none; align-self: flex-end;
    display: inline-flex; align-items: center; gap: 8px;
    appearance: none; -webkit-appearance: none;
    background: var(--gold-soft);
    border: 1px solid var(--gold);
    color: var(--gold-text);
    padding: 8px 14px;
    border-radius: 8px;
    font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600;
    letter-spacing: var(--track-label); text-transform: uppercase;
    cursor: pointer; white-space: nowrap;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 160ms ease, box-shadow 200ms ease;
}
.howto-btn:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: #1a140a;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -10px var(--gold);
}
.howto-btn:active { transform: translateY(0); }
.howto-btn svg { flex: none; }

/* Modal */
.howto-overlay {
    position: fixed; inset: 0; z-index: 300;
    display: grid; place-items: center;
    padding: clamp(16px, 4vw, 48px);
    background: rgba(0, 0, 0, 0.62);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    animation: howto-fade 180ms ease;
}
@keyframes howto-fade { from { opacity: 0; } to { opacity: 1; } }
.howto-modal {
    width: min(1040px, 100%);
    height: min(90vh, 920px);
    display: flex; flex-direction: column;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border-strong);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 40px 100px -24px rgba(0, 0, 0, 0.6);
    animation: howto-rise 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes howto-rise { from { opacity: 0; transform: translateY(16px) scale(0.99); } to { opacity: 1; transform: none; } }
.howto-modal-head {
    flex: none;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--erp-border);
    background: var(--erp-surface);
}
.howto-modal-title {
    font-family: var(--font-display); font-size: var(--fs-lg);
    color: var(--text-primary); letter-spacing: 0.05em; text-transform: uppercase;
}
.howto-modal-title .accent { color: var(--gold-text); }
.howto-close {
    appearance: none; -webkit-appearance: none;
    width: 34px; height: 34px; flex: none;
    display: grid; place-items: center;
    background: transparent; border: 1px solid var(--erp-border);
    border-radius: 8px; cursor: pointer;
    color: var(--text-dim); font-size: 22px; line-height: 1;
    transition: background 160ms, border-color 160ms, color 160ms;
}
.howto-close:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger-text); }
.howto-modal-body { flex: 1; min-height: 0; position: relative; background: #0d0b14; }
.howto-frame { width: 100%; height: 100%; border: 0; display: block; }
.howto-state {
    position: absolute; inset: 0; display: grid; place-items: center;
    color: var(--text-dim); font-family: var(--font-body); font-size: 13px;
}
.howto-spinner {
    width: 40px; height: 40px; border-radius: 50%;
    border: 3px solid var(--erp-border-strong); border-top-color: var(--gold);
    animation: auth-spin 0.8s linear infinite;
}

@media (max-width: 720px) {
    .howto-btn span { display: none; }   /* mobilde yalnız ikon */
    .howto-btn { padding: 8px 10px; }
    .howto-modal { height: 92vh; border-radius: 10px; }
}

/* ---- Özel açılır liste (.fdrop) ----
   Native <select>'in açılır listesini işletim sistemi çizer ve temaya uydurulamaz
   (koyu temada beyaz "basic" liste — canlıda görüldü). Bu desen listeyi DOM içinde
   kendi panelimiz olarak çizer: kapalı hâl arama kutusuyla birebir, açık hâl
   erp panel yüzeyi + altın hover. Dışarı tıklayınca görünmez tam-ekran backdrop
   kapatır. Kullanım: Admin "yetkiye göre filtrele". */
.fdrop { position: relative; }
.fdrop-btn {
    appearance: none; -webkit-appearance: none;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: var(--font-body); font-size: 13px; line-height: normal;
    color: var(--input-text);
    outline: none; cursor: pointer; text-align: left;
    transition: border-color 180ms, box-shadow 180ms;
}
.fdrop-btn:hover { border-color: var(--erp-border-strong); }
.fdrop-btn:focus-visible, .fdrop-btn.acik { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(201, 162, 92, 0.15); }
.fdrop-btn svg { width: 14px; height: 14px; flex: none; color: var(--text-dim); transition: transform 180ms; }
.fdrop-btn.acik svg { transform: rotate(180deg); }
.fdrop-backdrop { position: fixed; inset: 0; z-index: 90; }
.fdrop-panel {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 100;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border-strong);
    border-radius: 10px;
    box-shadow: 0 22px 48px -16px rgba(0, 0, 0, 0.55);
    max-height: 320px; overflow-y: auto;
    padding: 6px;
    animation: fdrop-in 140ms ease;
}
@keyframes fdrop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.fdrop-grup {
    padding: 9px 10px 4px;
    font-family: var(--font-body); font-size: 10px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-dim);
}
.fdrop-item {
    appearance: none; -webkit-appearance: none;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%;
    background: none; border: none; border-radius: 7px;
    padding: 7px 10px;
    font-family: var(--font-body); font-size: 12.5px; line-height: 1.4;
    color: var(--text-primary);
    cursor: pointer; text-align: left;
    transition: background 120ms, color 120ms;
}
.fdrop-item:hover { background: var(--gold-soft); color: var(--gold-text); }
.fdrop-item.secili { color: var(--gold-text); font-weight: 700; }
.fdrop-item b { font-weight: 700; }

/* ---- Kullanıcı yetkileri tablosu: menü chip'leri ----
   Eskiden virgülle ayrılmış tek satırdı; 5-6 yetkili kullanıcıda okunmuyordu.
   Menü filtresi seçiliyken eşleşen chip altın vurgulanır (.is-match). */
.perm-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.perm-chip {
    font-family: var(--font-body); font-size: 10.5px; line-height: 1.3;
    color: var(--text-dim); background: var(--erp-surface-2, rgba(127, 127, 127, 0.08));
    border: 1px solid var(--erp-border); border-radius: 20px; padding: 2px 8px;
    white-space: nowrap;
}
.perm-chip.is-match {
    color: var(--gold-text); border-color: var(--gold); font-weight: 700;
    background: var(--gold-soft, rgba(212, 175, 106, 0.12));
}

/* ==================== KARGO DURUMU (Sipariş Detay sayfaları) ==================== */
/* Sonuç panel başlığındaki "Kargo Durumu" butonu + kargo modalı.
   Buton bilinçli olarak dikkat çekici (şirket için öne çıkan özellik): koyu zemin +
   HOLOGRAFİK AKAN YAZI (altın→beyaz→turkuaz, background-clip:text) + çevrede nabız
   gibi büyüyüp küçülen ışık + soldan sağa geçen huzme + kamyon ve altında akan yol
   şeridi. Renkler sabit hex — sidebar gibi her iki temada da aynı kalmalı.
   Not: yazı gradyanı için renk `transparent`; .kargo-btn üzerindeki `color` yalnız
   ikon ve yol şeridi (currentColor) içindir. */
.kargo-head { align-items: center; }
.kargo-head-left { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.kargo-btn {
    position: relative; overflow: hidden;
    appearance: none; -webkit-appearance: none;
    display: inline-flex; align-items: center; gap: 9px;
    height: 34px; padding: 0 17px; flex: none;
    border: 1px solid rgba(212, 175, 106, 0.42); border-radius: 999px; cursor: pointer;
    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
    letter-spacing: 0.13em; text-transform: uppercase; white-space: nowrap;
    color: #d4af6a;
    background: #1a1712;
    animation: kargo-glow 2.4s ease-in-out infinite;
    transition: transform 160ms;
}
/* Çevre ışığı — nabız (D seçeneğinin parlaması, C'nin koyu zeminiyle) */
@keyframes kargo-glow {
    0%, 100% { box-shadow: 0 0 14px -2px rgba(217, 173, 92, 0.5), 0 0 30px -6px rgba(217, 173, 92, 0.3); }
    50%      { box-shadow: 0 0 22px 1px rgba(240, 212, 146, 0.75), 0 0 46px -4px rgba(217, 173, 92, 0.55); }
}
/* Soldan sağa geçen ışık huzmesi */
.kargo-btn::before {
    content: ""; position: absolute; top: 0; bottom: 0; width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 240, 205, 0.22), transparent);
    transform: skewX(-18deg);
    animation: kargo-sweep 3.2s ease-in-out infinite;
}
@keyframes kargo-sweep { 0% { left: -55%; } 55%, 100% { left: 125%; } }
/* Alt kenarda akan yol şeridi */
.kargo-btn::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: repeating-linear-gradient(90deg, currentColor 0 8px, transparent 8px 18px);
    background-size: 18px 2px; opacity: 0.5;
    animation: kargo-road 0.7s linear infinite;
}
@keyframes kargo-road { to { background-position: -18px 0; } }
.kargo-btn svg, .kargo-btn span { position: relative; z-index: 1; }
.kargo-btn svg { width: 17px; height: 17px; flex: none; animation: kargo-drive 2.2s ease-in-out infinite; }
@keyframes kargo-drive { 0%, 100% { transform: translateX(0); } 45% { transform: translateX(4px); } }
/* Holografik akan yazı */
.kargo-btn span {
    background: linear-gradient(90deg, #d9ad5c, #ffffff, #22d3ee, #d9ad5c);
    background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: kargo-shift 4s linear infinite;
}
@keyframes kargo-shift { to { background-position: 300% 0; } }
.kargo-btn:hover { transform: translateY(-1px); border-color: rgba(240, 212, 146, 0.75); }
.kargo-btn:active { transform: translateY(0); }
/* Açık tema varyantı: koyu kapsül açık zeminde yabancı duruyordu (kullanıcı geri
   bildirimi). Aynı efekt seti (holografik yazı + nabız + huzme + yol) açık zemine
   uyarlanır: krem-altın zemin, koyu-altın→turkuaz akan yazı, sıcak parıltı. */
[data-theme="light"] .kargo-btn {
    color: #8a5a12;
    background: linear-gradient(135deg, #fff6e2, #f7e6bd);
    border-color: rgba(184, 135, 59, 0.55);
    animation-name: kargo-glow-light;
}
@keyframes kargo-glow-light {
    0%, 100% { box-shadow: 0 0 12px -2px rgba(194, 145, 62, 0.45), 0 0 26px -6px rgba(194, 145, 62, 0.28); }
    50%      { box-shadow: 0 0 20px 0 rgba(194, 145, 62, 0.65), 0 0 40px -4px rgba(194, 145, 62, 0.45); }
}
[data-theme="light"] .kargo-btn::before {
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.85), transparent);
}
[data-theme="light"] .kargo-btn span {
    background: linear-gradient(90deg, #8a5a12, #c2913e, #0e8ea8, #8a5a12);
    background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="light"] .kargo-btn:hover { border-color: #b8873b; }
@media (prefers-reduced-motion: reduce) {
    .kargo-btn, .kargo-btn::before, .kargo-btn::after, .kargo-btn svg, .kargo-btn span { animation: none; }
    .kargo-btn span { color: #e8cf9e; -webkit-text-fill-color: #e8cf9e; }
    [data-theme="light"] .kargo-btn span { color: #8a5a12; -webkit-text-fill-color: #8a5a12; }
}

/* Modal — howto-overlay/howto-modal iskeletini kullanır; kargo içeriği kompakt.
   ÜSTTEN hizalı (align-self:start), dikeyde ORTALANMAZ: içerik yüklenince modal
   büyür; ortalanmış olsaydı üst kenar yukarı "zıplar", uzun hareket geçmişinde
   başlık ekran üstünden taşardı. Üstten sabit başlayınca yalnız aşağı büyür. */
.kargo-modal {
    width: min(560px, 100%); height: auto;
    align-self: start;
    margin-top: clamp(16px, 6vh, 56px);
    max-height: min(86vh, 780px);
}
.kargo-modal-body {
    position: relative; overflow-y: auto;
    min-height: 150px; padding: 6px 18px 16px;
}
.kargo-sip {
    border: 1px solid var(--erp-border); border-radius: 10px;
    padding: 12px 14px; margin-top: 12px;
}
.kargo-sip-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kargo-sip-no { font-size: 13px; color: var(--text-primary); letter-spacing: 0.03em; }
.kargo-tasiyici {
    font-family: var(--font-body); font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--gold-text); border: 1px solid var(--erp-border-strong);
    border-radius: 20px; padding: 2px 9px;
}
.kargo-sip-meta { font-family: var(--font-body); font-size: 11.5px; color: var(--text-dim); }
.kargo-koli {
    border: 1px solid var(--erp-border); border-radius: 8px;
    padding: 9px 12px; margin-top: 8px;
}
.kargo-koli-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kargo-koli-etiket { font-family: var(--font-body); font-size: 11px; color: var(--text-dim); min-width: 56px; }
.kargo-takip {
    flex: 1; min-width: 130px;
    font-size: 13.5px; color: var(--gold-text); letter-spacing: 0.04em;
    user-select: all;   /* tıklayınca numaranın tamamı seçilsin */
}
.kargo-ikon {
    appearance: none; -webkit-appearance: none;
    width: 26px; height: 26px; flex: none;
    display: grid; place-items: center;
    background: transparent; border: 1px solid var(--erp-border-strong);
    border-radius: 6px; cursor: pointer; color: var(--text-dim); padding: 0;
    transition: border-color 160ms, color 160ms;
}
.kargo-ikon svg { width: 14px; height: 14px; }
.kargo-ikon:hover { border-color: var(--gold); color: var(--gold-text); }
/* DHL linki bilinçli olarak KÜÇÜK ve alt satırda: asıl bilgi (durum, teslim, hareket
   geçmişi) ekranda gösterildiği için bu yalnızca "resmî kaynağa git" opsiyonu. */
.kargo-alt { display: flex; justify-content: flex-end; margin-top: 9px; }
.kargo-link {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--font-body); font-size: 11px; text-decoration: none;
    color: var(--text-dim); border-bottom: 1px dotted var(--erp-border-strong);
    padding-bottom: 1px; transition: color 160ms, border-color 160ms;
}
.kargo-link svg { width: 12px; height: 12px; flex: none; }
.kargo-link:hover { color: var(--gold-text); border-color: var(--gold); }

/* Canlı durum rozeti (teslim = yeşil, yolda = amber). Renkler tema değişkenlerinden
   gelir (AdminLogs log-ok/log-preview ile aynı kaynak). */
.kargo-durum {
    flex: none; max-width: 100%;
    font-family: var(--font-body); font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.03em; line-height: 1.35;
    border-radius: 20px; padding: 3px 10px;
    border: 1px solid currentColor;
}
.kargo-durum-ok    { color: var(--success-text, #1f7a42); }
.kargo-durum-yolda { color: var(--warning-text, #8a6d0b); }

/* Özet ızgara — teslim/son hareket, tahmini teslim, varış, ölçü */
.kargo-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px 16px; margin-top: 10px; padding-top: 10px;
    border-top: 1px dashed var(--erp-border);
}
.kargo-lbl {
    font-family: var(--font-body); font-size: 10px; color: var(--text-dim);
    letter-spacing: 0.06em; text-transform: uppercase;
}
.kargo-val { font-family: var(--font-body); font-size: 12.5px; color: var(--text-primary); margin-top: 2px; }

/* Hareket geçmişi — yeniden eskiye; ilk nokta "canlı" halkalı */
.kargo-tl { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--erp-border); }
.kargo-ev { display: flex; gap: 10px; padding: 4px 0; }
.kargo-dot {
    width: 7px; height: 7px; border-radius: 50%; flex: none; margin-top: 5px;
    background: var(--erp-border-strong); position: relative;
}
.kargo-ev.son .kargo-dot { background: var(--gold); box-shadow: 0 0 0 3px rgba(212, 175, 106, 0.18); }
.kargo-ev-t { font-family: var(--font-body); font-size: 12px; color: var(--text-primary); line-height: 1.4; }
.kargo-ev-m { font-family: var(--font-body); font-size: 10.5px; color: var(--text-dim); margin-top: 1px; }

/* Modal başındaki dekoratif DHL kamyonu. Tekerlek dönüşü için transform-box:fill-box
   ŞART — SVG'de transform-origin varsayılan olarak viewBox merkezine göre çalışır,
   onsuz tekerlekler kendi ekseni yerine yörüngeye giriyor (canlıda görüldü). */
.kargo-truck { display: flex; justify-content: center; padding: 10px 0 2px; color: var(--gold); }
.kargo-truck svg { width: 150px; height: 42px; }
.kt-body  { fill: #e8cf9e; }
.kt-dhl   { fill: #8a5a12; font-family: var(--font-body); font-size: 10px; font-weight: 700; }
.kt-cab   { fill: #c2913e; }
.kt-glass { fill: #2a2f36; }
.kt-tyre  { fill: #22262c; stroke: var(--gold); stroke-width: 1.3; }
.kt-spoke { stroke: var(--gold); stroke-width: 0.85; }
.kt-road  { stroke: var(--gold); stroke-width: 1.6; opacity: 0.6; }
.kt-speed { opacity: 0.5; }
.kt-wheel { transform-box: fill-box; transform-origin: center; animation: kt-spin 1s linear infinite; }
@keyframes kt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kt-wheel { animation: none; } }
.kargo-yok {
    display: flex; align-items: flex-start; gap: 8px; margin-top: 9px;
    font-family: var(--font-body); font-size: 12px; line-height: 1.5; color: var(--text-dim);
}
.kargo-yok svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.kargo-not { margin: 12px 2px 0; font-family: var(--font-body); font-size: 11.5px; color: var(--text-dim); }


/* ============================================================
   DASHBOARD GRAFİK PANELLERİ — "AURORA + IŞIK KOŞUCUSU" ÇERÇEVESİ
   (panel önizlemesinden V1 + V5 karışımı; kullanıcı seçimi 2026-08-19.
   Kullanıcı isteğiyle koşucular SÜREKLİ koşar, hover beklemez.)
   Kapsam BİLEREK .trend-grid .panel — yalnız Dashboard'un grafik panelleri;
   sorgu sayfalarındaki .panel'lere bulaşmaz. Renkler --pnl-* tokenlarından
   (app.css, açık/koyu ayrı). @property gerektirir: desteklemeyen tarayıcıda
   koşucular köşede sabit kıvılcım, aurora çerçevesi sabit — görünüm bozulmaz.
   ============================================================ */
@property --bsKos   { syntax: '<angle>'; inherits: false; initial-value: 320deg; }
@property --pnlAci  { syntax: '<angle>'; inherits: false; initial-value: 215deg; }
@property --pnlKos1 { syntax: '<angle>'; inherits: false; initial-value: 320deg; }
@property --pnlKos2 { syntax: '<angle>'; inherits: false; initial-value: 140deg; }

.trend-grid .panel {
    position: relative;
    z-index: 0; /* ::before halesi panelin ARKASINDA (stacking context) */
    border: 1px solid transparent;
    background:
        linear-gradient(var(--erp-surface), var(--erp-surface)) padding-box,
        conic-gradient(from var(--pnlAci),
            transparent 0deg, var(--pnl-a) 70deg, var(--pnl-b) 150deg,
            transparent 220deg, var(--pnl-a) 300deg, transparent 360deg) border-box;
}
/* Hover'da çerçeve DÖNMEZ (kullanıcı 2026-08-19: "görüntü gidip geliyor gibi
   bir efekt" — dönen conic gradyan kenarı titretiyordu). Aurora çerçevesi
   sabit; hareket yalnızca koşan kometlerde ve nefes alan halede. */
/* Hover'daki panel stat şeridinin (z:3) ve kardeş panellerin (z:0) ÜSTÜNE
   çıkar — içindeki lejant balonu ancak böyle görünebiliyor. Stat kartının
   kendi balonunu bastırmaz: o balon yalnız kartın üzerindeyken açık ve o anda
   hiçbir panel hover'da değil. */
.trend-grid .panel:hover { z-index: 6; }

/* Nefes alan dış hale — yalnız opacity/transform animasyonu (kompozitör dostu).
   blur SABİT: filter'ı animasyonlamak pahalı, yalnız opaklık nefes alır. */
.trend-grid .panel::before {
    content: ""; position: absolute; inset: -14px; z-index: -1;
    border-radius: 24px; pointer-events: none;
    background:
        radial-gradient(46% 60% at 10% 0%, var(--pnl-halo-mavi), transparent 70%),
        radial-gradient(50% 62% at 92% 100%, var(--pnl-halo-altin), transparent 70%);
    filter: blur(10px);
    animation: pnl-nefes 6.5s ease-in-out infinite;
}
@keyframes pnl-nefes {
    0%, 100% { opacity: 0.40; transform: scale(0.985); }
    50%      { opacity: 0.95; transform: scale(1.012); }
}

/* Çift ışık koşucusu — TEK pseudo'da iki conic katman (V1 halesi ::before'u
   kullandığı için). Tek keyframe iki açıyı birden sürer: mavi +360°, altın
   −360° (zıt yön). SÜREKLİ koşar; hover yalnız parlaklığı artırır. */
.trend-grid .panel::after {
    content: ""; position: absolute; inset: -1px; border-radius: 13px;
    padding: 1.6px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    background:
        conic-gradient(from var(--pnlKos1),
            transparent 0 76%, var(--pnl-kuyruk) 91%, var(--pnl-bas) 97%, var(--pnl-uc) 98.6%, transparent 99.4%),
        conic-gradient(from var(--pnlKos2),
            transparent 0 86%, var(--pnl-altin-kuyruk) 95%, var(--pnl-altin-bas) 99%, transparent 100%);
    opacity: 0.8;
    transition: opacity 300ms;
    animation: pnl-kos 3.4s linear infinite;
}
.trend-grid .panel:hover::after { opacity: 1; }
@keyframes pnl-kos { to { --pnlKos1: 680deg; --pnlKos2: -220deg; } }

/* SENKRONU BOZ (kullanıcı 2026-08-19: "hepsi aynı senkronda kaymasın").
   Her panele farklı SÜRE + farklı NEGATİF gecikme: negatif gecikme animasyonu
   ortasından başlatır, yani ilk karede bile hiçbiri aynı yerde değil. Süreler
   birbirinin katı DEĞİL (3.4/4.1/2.9/4.7) — yoksa bir süre sonra tekrar
   üst üste binerler. */
.trend-grid .panel:nth-child(1)::after { animation-duration: 3.4s; animation-delay: -0.4s; }
.trend-grid .panel:nth-child(2)::after { animation-duration: 4.1s; animation-delay: -2.3s; }
.trend-grid:nth-of-type(2) .panel:nth-child(1)::after { animation-duration: 2.9s; animation-delay: -1.1s; }
.trend-grid:nth-of-type(2) .panel:nth-child(2)::after { animation-duration: 4.7s; animation-delay: -3.6s; }
/* Nefes alan hale de aynı mantıkla ayrışır */
.trend-grid .panel:nth-child(2)::before { animation-duration: 7.9s; animation-delay: -3.1s; }
.trend-grid:nth-of-type(2) .panel:nth-child(1)::before { animation-duration: 6.1s; animation-delay: -1.7s; }
.trend-grid:nth-of-type(2) .panel:nth-child(2)::before { animation-duration: 8.6s; animation-delay: -5.2s; }

/* Başlık altında akan ışık çizgisi (kesikli border yerine) */
.trend-grid .panel .panel-head { border-bottom: none; position: relative; padding-bottom: 13px; }
.trend-grid .panel .panel-head::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--pnl-cizgi-a) 30%, var(--pnl-cizgi-b) 65%, transparent);
    background-size: 220% 100%;
    opacity: 0.75;
    animation: pnl-akis 5.5s ease-in-out infinite alternate;
}
@keyframes pnl-akis { from { background-position: 0% 0; } to { background-position: 100% 0; } }

/* Aralık düğmeleri: seçili durum aurora gradyanı + yumuşak ışıma */
.trend-grid .trend-toggle button.active {
    background: var(--pnl-btn-bg);
    border-color: transparent;
    color: var(--pnl-btn-ink);
    box-shadow: 0 0 14px -2px var(--pnl-btn-isik), 0 0 4px rgba(255, 255, 255, 0.15);
}
.trend-grid .trend-toggle button:hover:not(.active) {
    border-color: var(--pnl-cizgi-a);
    color: var(--text-primary);
    background: transparent;
}

/* Hover'da grafikler sırayla nabız atar — mini-chart'ın inline piyano
   animation-delay'i kademeyi bedavaya verir */
.trend-grid .panel:hover .mini-chart-bar,
.trend-grid .panel:hover .hbar-bar { animation: pnl-nabiz 2.2s ease-in-out infinite; }
@keyframes pnl-nabiz {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.3) saturate(1.15); }
}
.trend-grid .panel:hover .hbar-row:nth-child(2n) .hbar-bar { animation-delay: 0.35s; }
.trend-grid .panel:hover .hbar-row:nth-child(3n) .hbar-bar { animation-delay: 0.7s; }
.trend-grid .panel:hover .donut-total { filter: drop-shadow(0 0 2px var(--pnl-btn-isik)); }

@media (prefers-reduced-motion: reduce) {
    .trend-grid .panel:hover,
    .trend-grid .panel::before,
    .trend-grid .panel::after,
    .trend-grid .panel .panel-head::after,
    .trend-grid .panel:hover .mini-chart-bar,
    .trend-grid .panel:hover .hbar-bar { animation: none; }
    .trend-grid .panel::before { opacity: 0.7; }
    .trend-grid .panel::after { opacity: 0.9; }
    .trend-grid .panel .panel-head::after { background-position: 50% 0; }
}

/* ============================================================
   MARKA HARİTASI — "GECE KADRANI" (Dashboard; treemap'in yerine, 2026-08-19)
   240° hız göstergesi: oransal marka bantları + bant ortasını gösteren iğneler
   + bantların altında bulanık gece aydınlatması. Açılış animasyonu SAF CSS:
   mk-ciz (bant dasharray 0→--l) ve mk-don (iğne 0→--na), ikisi de backwards
   fill + --d kademeli gecikme; Blazor JS çağrısı gerektirmez.
   ============================================================ */
.mk-sahne { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 2px; }
.mk-svg { width: 252px; max-width: 100%; flex-shrink: 0; overflow: visible;
    --mk-tik: rgba(167, 137, 80, 0.55);
    --mk-hover: rgba(74, 111, 196, 0.08);
}
[data-theme="dark"] .mk-svg {
    --mk-tik: rgba(208, 178, 126, 0.50);
    --mk-hover: rgba(127, 162, 232, 0.10);
}
/* Gece aydınlatması: bantların altında bulanık ışık yayı (blur SABİT — filter
   animasyonu pahalı, yalnız üstteki bant çizilir) */
.mk-halo { opacity: 0.25; filter: blur(2.5px); pointer-events: none; }
.mk-bant {
    opacity: 0.9;
    stroke-dasharray: var(--l) 999;
    animation: mk-ciz 950ms cubic-bezier(.25, .8, .3, 1) backwards;
    animation-delay: var(--d);
    transition: opacity 200ms;
}
@keyframes mk-ciz { from { stroke-dasharray: 0 999; } }
/* İğne: 210° başlangıcından bant ortasına süpürülür */
.mk-igne {
    transform: rotate(var(--na));
    transform-origin: 110px 104px;
    animation: mk-don 1050ms cubic-bezier(.3, .9, .35, 1.06) backwards;
    animation-delay: var(--d);
    transition: opacity 200ms;
}
@keyframes mk-don { from { transform: rotate(0deg); } }
.mk-igne line { stroke-width: 2; stroke-linecap: round; }
.mk-igne .uc { filter: drop-shadow(0 0 3.5px var(--iu)); }
.mk-tikler line { stroke: var(--mk-tik); stroke-width: 1.1; }
.mk-rakamlar text { font-family: var(--font-mono); font-size: 7px; fill: var(--text-dim); }
.mk-hub { fill: var(--erp-surface); stroke: var(--pnl-cizgi-a); stroke-width: 1; }
.mk-toplam { text-anchor: middle; font-family: var(--font-display); font-size: 15px; font-weight: 600; fill: var(--text-primary); }
.mk-toplam-alt { text-anchor: middle; font-family: var(--font-mono); font-size: 6px; letter-spacing: 0.2em; text-transform: uppercase; fill: var(--text-dim); }
/* Lejant hover → diğer bant/iğneler söner, seçili tam parlar */
.mk-svg.vurgulu .mk-bant:not(.aktif) { opacity: 0.18; }
.mk-svg.vurgulu .mk-igne:not(.aktif) { opacity: 0.15; }
.mk-svg.vurgulu .mk-bant.aktif { opacity: 1; }
.mk-lejant { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 190px; display: flex; flex-direction: column; gap: 6px; }
.mk-lejant li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; cursor: default; border-radius: 6px; padding: 2px 6px; transition: background 160ms; }
.mk-lejant li:hover { background: var(--mk-hover, rgba(74, 111, 196, 0.08)); }

/* --- Marka haritası lejantında "Diğer" kırılımı ---------------------------
   Sunucu ilk 9 markayı gösterip kalanları "Diğer"e katlıyor; o satırın üzerine
   gelince katlananlar burada açılır. İki kural:
   1) Balon lejant öğesinin İÇİNDE mutlak konumlu — `position: fixed` KULLANMA
      (.page-transition transform'u fixed'i kendi kutusuna bağlıyor, bkz.
      CLAUDE.md'deki tuzak notu).
   2) Görünürlüğü `.trend-grid .panel:hover { z-index: 6 }` sağlıyor (katman
      ölçeği). Balona z-index vermek TEK BAŞINA yetmez: panel kendi stacking
      context'inde 0'da duruyor ve stat şeridi 3'te — balon stat kartlarının
      arkasında kalıyordu (kullanıcı ekran görüntüsüyle bildirdi). */
.mk-lejant li.mk-diger { position: relative; cursor: help; }
.mk-diger-balon {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 20;
    min-width: 178px;
    /* Sunucu en fazla 14 üye gönderiyor → ~14×19 + başlık ≈ 315px. */
    max-height: 330px;
    overflow-y: auto;
    padding: 9px 11px;
    /* Balon çerçeve standardı — bkz. .bs-balon (mavi vurgu kenarı). */
    background: var(--erp-surface);
    border: 1px solid var(--pnl-cizgi-a);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
    opacity: 0; visibility: hidden;
    transform: translateY(4px);
    transition: opacity 150ms, transform 150ms, visibility 150ms;
    pointer-events: none;
}
.mk-lejant li.mk-diger:hover .mk-diger-balon {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.mk-diger-bas {
    font-family: var(--font-body); font-size: 9.5px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-dim); margin-bottom: 6px;
}
.mk-diger-sat { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; line-height: 1.65; }
.mk-diger-sat span:first-child { color: var(--text-primary); }
.mk-diger-sat span:last-child { color: var(--gold-text); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.mk-nokta { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.mk-adx { color: var(--text-primary); font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Sayı ve yüzde İKİ AYRI SAĞA HİZALI kolon. Tek span'de birleşiklerken yüzdenin
   genişliği değiştikçe ("%43" ↔ "%8,2") sayı kayıyordu. tabular-nums şart:
   orantılı rakamlarda 1 ile 8 farklı genişlikte, sabit kolonda da hiza bozulur. */
.mk-adet, .mk-pct {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
    flex: 0 0 auto;
}
.mk-adet { color: var(--text-primary); font-size: 11.5px; min-width: 46px; }
.mk-pct  { color: var(--text-dim);     font-size: 11px;   min-width: 40px; }

/* ============================================================
   SİPARİŞ KANALLARI — "METRO HATTI" (Dashboard; hbar listesinin yerine)
   Yatay ışıklı hat + istasyon durakları. Çap/ışıma = hacmin KAREKÖKÜ (inline
   --cap/--isik). Puls yalnız translateX anime eder (kompozitör dostu).
   ============================================================ */
.mh-sahne { position: relative; height: 176px; margin: 2px 6px 0;
    --mh-hat-a: rgba(74, 111, 196, 0.75);
    --mh-hat-b: rgba(167, 137, 80, 0.65);
    --mh-puls: #7fe3f7;
    --mh-hover: #4a6fc4;
}
[data-theme="dark"] .mh-sahne {
    --mh-hat-a: rgba(127, 162, 232, 0.8);
    --mh-hat-b: rgba(255, 208, 138, 0.55);
    --mh-puls: #e7eefc;
    --mh-hover: #a9c4f5;
}
.mh-ray {
    position: absolute; left: 10px; right: 10px; top: 50%; height: 3px;
    transform: translateY(-50%); border-radius: 2px; overflow: visible;
    background: linear-gradient(90deg, var(--mh-hat-a), var(--mh-hat-b) 55%, var(--mh-hat-a));
    box-shadow: 0 0 10px -2px var(--mh-hat-a);
}
.mh-puls {
    position: absolute; left: 0; top: -1.5px; width: 13%; height: 6px;
    border-radius: 3px; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--mh-puls), transparent);
    filter: drop-shadow(0 0 6px var(--mh-puls));
    animation: mh-gez 4.6s ease-in-out infinite;
    opacity: 0.9;
}
@keyframes mh-gez { from { transform: translateX(-110%); } to { transform: translateX(780%); } }
.mh-duraklar { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; }
.mh-durak { position: relative; display: flex; flex-direction: column; align-items: center; }
/* Etiket bölgeleri sabit yükseklik: almaşık üst/alt yerleşim çakışmayı önler */
.mh-ust, .mh-alt { height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1px; }
.mh-alt { justify-content: flex-start; }
.mh-baglanti { width: 1px; height: 9px; background: var(--erp-border-strong); }
.mh-ad { font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--text-primary); }
.mh-adet { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); white-space: nowrap; }
.mh-nokta {
    width: var(--cap); height: var(--cap); border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.65), var(--rk) 62%);
    border: 2px solid color-mix(in srgb, var(--rk) 65%, white);
    box-shadow: 0 0 var(--isik) calc(var(--isik) / 4) color-mix(in srgb, var(--rk) 55%, transparent);
    transition: transform 200ms cubic-bezier(.3, .9, .3, 1.3);
    flex-shrink: 0;
}
.mh-durak:hover .mh-nokta { transform: scale(1.16); }
.mh-durak:hover .mh-ad { color: var(--mh-hover); }
/* Terminal (en yoğun kanal): çift halka */
.mh-durak.terminal .mh-nokta { outline: 2px solid color-mix(in srgb, var(--rk) 45%, transparent); outline-offset: 3px; }

@media (max-width: 620px) { .mh-ad { font-size: 9.5px; } .mh-adet { font-size: 9px; } }
@media (prefers-reduced-motion: reduce) {
    .mk-bant, .mk-igne { animation: none; }
    .mh-puls { animation: none; opacity: 0; }
    .mh-nokta { transition: none; }
}

/* ============================================================
   İRSALİYE TRENDİ — "NEON NEHİR" (Dashboard; çubukların yerine, 2026-08-19)
   SVG eğri (Catmull-Rom→bezier) soldan sağa çizilir, altında ışık dolgusu
   nefes alır, uçta "şu an" noktası nabız atar.
   ÖNEMLİ: çizim animasyonu SAF CSS keyframe (nn-ciz) — JS sınıf çevirmesiyle
   yapılsaydı `document.hidden` iken requestAnimationFrame hiç çalışmadığı için
   grafik BOŞ kalırdı (Raporlar odometre dersinin aynısı, bkz. CLAUDE.md).
   Yol uzunluğu (--l) sunucuda POLİLİN yaklaşımıyla hesaplanır: getTotalLength()
   bir DOM API'si ve C#'ta yok; eğri için fark %1-2, geri sarma gözle aynı.
   ============================================================ */
.nn-sahne {
    --nn-izgara: rgba(0, 0, 0, 0.06);
    --nn-cizgi: #4a6fc4;
    --nn-uc: #7fa2e8;
    --nn-dolgu-a: rgba(74, 111, 196, 0.22);
    --nn-dolgu-b: rgba(74, 111, 196, 0.01);
}
[data-theme="dark"] .nn-sahne {
    --nn-izgara: rgba(255, 255, 255, 0.06);
    --nn-cizgi: #7fa2e8;
    --nn-uc: #a9c4f5;
    --nn-dolgu-a: rgba(127, 162, 232, 0.25);
    --nn-dolgu-b: rgba(127, 162, 232, 0.01);
}
.nn-sahne svg { width: 100%; display: block; overflow: visible; }
.nn-izgara line { stroke: var(--nn-izgara); stroke-width: 1; }
.nn-eksen text { font-family: var(--font-mono); font-size: 9.5px; fill: var(--text-dim); }
/* Çizgi iki katman: altta bulanık ışıma (blur SABİT), üstte çekirdek */
.nn-isik { fill: none; stroke: var(--nn-cizgi); stroke-width: 6; opacity: 0.30;
    filter: blur(4px); stroke-linecap: round; }
.nn-cizgi { fill: none; stroke: var(--nn-cizgi); stroke-width: 2.2; stroke-linecap: round;
    filter: drop-shadow(0 0 4px var(--nn-cizgi)); }
.nn-isik, .nn-cizgi {
    stroke-dasharray: var(--l);
    animation: nn-ciz 1200ms cubic-bezier(.3, .6, .25, 1) backwards;
}
@keyframes nn-ciz { from { stroke-dashoffset: var(--l); } to { stroke-dashoffset: 0; } }
/* Dolgu: çizgiden sonra belirir + hafif nefes */
.nn-dolgu {
    animation: nn-gir 600ms ease 700ms backwards, nn-nefes 5.5s ease-in-out 1300ms infinite;
}
@keyframes nn-gir { from { opacity: 0; } to { opacity: 1; } }
@keyframes nn-nefes { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } }
/* Uç nokta: çekirdek + nabız halesi (yalnız opacity/transform) */
.nn-uc-g { animation: nn-gir 300ms ease 1050ms backwards; }
.nn-uc-cek { fill: var(--nn-uc); filter: drop-shadow(0 0 4px var(--nn-uc)); }
.nn-uc-hale {
    fill: var(--nn-uc); opacity: 0.25;
    transform-origin: center; transform-box: fill-box;
    animation: nn-nabiz 2.2s ease-out infinite;
}
@keyframes nn-nabiz {
    0%   { opacity: 0.45; transform: scale(0.5); }
    70%  { opacity: 0;    transform: scale(1.6); }
    100% { opacity: 0;    transform: scale(1.6); }
}
/* Gezinme noktaları: görünmez geniş hedef + hover'da beliren değer */
.nn-nokta circle.hedef { fill: transparent; }
.nn-nokta circle.gorunur { fill: var(--nn-cizgi); opacity: 0; transition: opacity 140ms; }
.nn-nokta:hover circle.gorunur { opacity: 1; }
/* Hover balonu — tarayıcının gri <title> kutusu yerine kendi tasarımımız.
   Kutu ölçüsü sunucuda hesaplanıp inline geliyor (SVG'de otomatik ölçü yok).
   pointer-events:none ŞART: balon imlecin altına girip hover'ı kesmesin. */
.nn-tip { opacity: 0; transition: opacity 140ms; pointer-events: none; }
.nn-nokta:hover .nn-tip { opacity: 1; }
.nn-tip-kutu {
    fill: var(--erp-surface);
    stroke: var(--nn-cizgi);
    stroke-width: 1;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.30));
}
.nn-tip-yazi {
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    fill: var(--text-primary);
}
/* Aralık düğmeleri: neon sekme — aktifin altında ışıyan çizgi */
.trend-grid .nn-tog { display: flex; gap: 2px; }
.trend-grid .nn-tog button {
    appearance: none; border: none; background: transparent; cursor: pointer;
    padding: 5px 10px 7px; position: relative;
    font-family: var(--font-body); font-size: 11px; font-weight: 600;
    letter-spacing: 0.04em; color: var(--text-dim);
    transition: color 160ms;
}
.trend-grid .nn-tog button::after {
    content: ""; position: absolute; left: 8px; right: 8px; bottom: 1px; height: 2px;
    border-radius: 2px; background: var(--nn-tog-renk, #4a6fc4);
    opacity: 0; transform: scaleX(0.4);
    transition: opacity 200ms, transform 260ms cubic-bezier(.3, .9, .3, 1.3);
}
.trend-grid .nn-tog button:hover { color: var(--text-primary); }
.trend-grid .nn-tog button.active { color: var(--nn-tog-renk, #4a6fc4); }
.trend-grid .nn-tog button.active::after {
    opacity: 1; transform: scaleX(1);
    box-shadow: 0 0 8px var(--nn-tog-renk, #4a6fc4);
}
[data-theme="dark"] .trend-grid .nn-tog { --nn-tog-renk: #7fa2e8; }

@media (prefers-reduced-motion: reduce) {
    .nn-isik, .nn-cizgi, .nn-dolgu, .nn-uc-g, .nn-uc-hale { animation: none; }
    .nn-isik, .nn-cizgi { stroke-dashoffset: 0; }
    .nn-uc-hale { opacity: 0.3; }
}



/* ============================================================
   BEKLEYEN SEVKİYAT PANELİ — "IŞIK RAMPASI" (Dashboard, 2026-08-19)
   Donut'un yerine: tek yatay ışık rampası + çift okuma (956 / 1.309) +
   parantezlerle kaynak gösterimi + grup metrik şeridi.
   FİYAT YOKTUR — dashboard menü yetkisiz herkese açık, tutar yalnız
   Operasyon → Bekleyen Sevkiyat sayfasında (kullanıcı kararı). Veri de
   gelmiyor: DashboardService tutarı hiç istemiyor/taşımıyor.
   ============================================================ */
.ir-sahne {
    --g-satis:   #00a3c4;   /* mavi — ana iş */
    --g-servis:  #bd7f07;   /* altın — teknik servis */
    --g-diger:   #a855f7;   /* mor — artık kalanlar */
    --g-rezerve: #7c8496;   /* KURŞUN — kartta sayılmayan gruba paletten renk VERİLMEZ:
                               renksizlik tek başına "sayılmıyor" der */
    --hayalet-tarama: repeating-linear-gradient(135deg,
        rgba(124, 132, 150, 0.20) 0 2px, transparent 2px 6px);
    --hayalet-kenar: rgba(124, 132, 150, 0.55);
    --ir-mavi-metin: #3f66c0;
    --ir-mavi-soft: rgba(74, 111, 196, 0.10);

    min-height: 240px;   /* chart-panel-lg komşusuyla hizalı — şablon kaymasın */
    display: flex; flex-direction: column;
    padding-top: 2px;
}
[data-theme="dark"] .ir-sahne {
    --g-satis:   #7fa2e8;
    --g-servis:  #e6b04a;
    --g-diger:   #b57df0;
    --g-rezerve: #8b93a8;
    --hayalet-tarama: repeating-linear-gradient(135deg,
        rgba(139, 147, 168, 0.24) 0 2px, transparent 2px 6px);
    --hayalet-kenar: rgba(139, 147, 168, 0.50);
    --ir-mavi-metin: #7fa2e8;
    --ir-mavi-soft: rgba(127, 162, 232, 0.12);
}

/* 1 — ÇİFT OKUMA: kart sayısı (956) ve toplam (1.309) yan yana.
   Kullanıcı ikisinin farkını merak ediyor; tasarım bunu gizlemiyor. */
.ir-okuma { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.ir-blok { display: flex; flex-direction: column; gap: 1px; }
.ir-sayi {
    font-size: 31px; font-weight: 700; line-height: 1; letter-spacing: -0.02em;
    color: var(--text-primary);
    text-shadow: 0 0 18px color-mix(in srgb, var(--g-satis) 30%, transparent);
}
.ir-sayi2 { font-size: 19px; font-weight: 600; line-height: 1.35; color: var(--text-dim); }
.ir-alt { font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-dim); }
.ir-bolen { align-self: stretch; width: 1px; margin: 3px 0 4px;
    background: linear-gradient(180deg, transparent, var(--erp-border-strong), transparent); }
.ir-fark {
    margin-left: auto; align-self: center;
    display: inline-flex; align-items: baseline; gap: 6px;
    font-family: var(--font-mono); font-size: 13px; font-weight: 700;
    color: var(--gold-text);
    border: 1px dashed color-mix(in srgb, var(--gold) 60%, transparent);
    border-radius: 6px; padding: 4px 9px;
    background: var(--gold-soft);
}
.ir-fark i {
    font-family: var(--font-body); font-style: normal; font-size: 8.5px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85;
}

/* 2 — RAMPA. Oranlar flex-grow ile (flex-basis 0): boşluklar payların
   DIŞINDA kaldığı için genişlikler birebir orantılı olur. Yüzde genişlikle
   yapılınca 12px'lik gap payların içinden yeniyor ve parantezler kaymıyor. */
.ir-ray {
    display: flex; gap: 12px; align-items: center;
    height: 26px; margin-top: 13px;
    position: relative;
}
/* İki bölgenin arasına altın kesikli ayrım. Konum inline --ayrim'den gelir
   (kart payının yüzdesi) — CSS'e SABİT yazılmaz, gruplardan biri boşalırsa
   oran değişir. */
.ir-ray::before {
    content: ""; position: absolute; top: -3px; bottom: -3px;
    left: calc(var(--ayrim, 73%) - 6px); width: 0;
    border-left: 1px dashed color-mix(in srgb, var(--gold) 65%, transparent);
    pointer-events: none;
}
.ir-oby { display: flex; gap: 3px; align-self: stretch; min-width: 0; }
.ir-oby-haric { align-items: center; }
.ir-seg {
    position: relative; overflow: hidden; min-width: 3px;
    border-radius: 4px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--rk) 92%, white 8%),
        color-mix(in srgb, var(--rk) 62%, transparent));
    box-shadow: 0 0 12px -3px var(--rk), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    transform-origin: left center;
    animation: ir-ac 620ms cubic-bezier(.2, .85, .25, 1) backwards;
    animation-delay: var(--d);
    transition: filter 180ms, box-shadow 180ms;
}
@keyframes ir-ac { from { transform: scaleX(0); opacity: 0.25; } }
/* İçinden geçen ışık — yalnız translateX (kompozitör dostu) */
.ir-parla {
    position: absolute; inset: 0; width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent);
    animation: ir-gec 4.6s ease-in-out infinite;
    animation-delay: var(--pd);
}
@keyframes ir-gec {
    0%, 55%, 100% { transform: translateX(-140%); }
    30%           { transform: translateX(300%); }
}
/* HAYALET segment: renksiz + taramalı + kesikli VE daha kısa (%62 boy).
   Boy farkı tek başına "bu başka bir şey" der. */
.ir-seg.ir-hayalet {
    height: 62%;
    background: var(--hayalet-tarama), color-mix(in srgb, var(--g-rezerve) 14%, transparent);
    border: 1px dashed var(--hayalet-kenar);
    box-shadow: none;
    animation-delay: 620ms;
}
/* Metrik satırı hover'ında eşleşen segment öne çıkar */
.ir-ray.vurgulu .ir-seg { filter: saturate(0.35) brightness(0.85); opacity: 0.5; }
.ir-ray.vurgulu .ir-seg.aktif {
    filter: none; opacity: 1;
    box-shadow: 0 0 18px -2px var(--rk), inset 0 1px 0 rgba(255, 255, 255, 0.38);
}
.ir-ray.vurgulu .ir-seg.ir-hayalet.aktif { box-shadow: 0 0 14px -4px var(--g-rezerve); }

/* 3 — PARANTEZLER: iki sayının kaynağını fiziksel olarak gösterir.
   Rampayla BİREBİR aynı flex paylarını kullanır — hizayı garanti eden bu. */
/* Yükseklik 19px'ken metin ALTTAN KIRPILIYORDU (10px padding + ~13px satır
   sığmıyordu — kullanıcı ekran görüntüsüyle bildirdi). Sabit yükseklik yerine
   min-height: içerik ne kadarsa o kadar yer kaplar. */
.ir-parantez { display: flex; gap: 12px; min-height: 26px; margin-top: 7px; }
.ir-brk {
    position: relative; flex-shrink: 0; min-width: 0;
    padding-top: 10px; text-align: center;
    /* İçerik yalnızca sayı (etiketler kaldırıldı) — bu yüzden bir tık büyük ve
       tabular-nums: orantılı rakamlarda 1 ile 8 farklı genişlikte olduğu için
       iki parantezin sayıları göz kararı kaymış görünüyordu. */
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em; white-space: nowrap;
    /* clip DEĞİL ellipsis: dar bölgede yazı yarıdan kesilmek yerine "…" ile biter */
    overflow: hidden; text-overflow: ellipsis;
    line-height: 1.35;
    animation: ir-bel 420ms ease-out backwards 760ms;
}
.ir-brk::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
    border-top: 1px solid currentColor;
    border-left: 1px solid currentColor;
    border-right: 1px solid currentColor;
    opacity: 0.6;
}
.ir-brk-kart { color: var(--ir-mavi-metin); }
.ir-brk-haric { color: var(--gold-text); }
.ir-brk-haric::before { border-style: dashed; }
@keyframes ir-bel { from { opacity: 0; transform: translateY(-3px); } }

/* 4 — METRİK ŞERİDİ: 4 grup × 3 metrik (TUTAR YOK, bkz. blok başı notu) */
.ir-metrik { flex: 1; display: flex; flex-direction: column; margin-top: 13px; min-height: 0; }
.ir-mbas, .ir-msat {
    display: grid; grid-template-columns: 1.7fr 0.9fr 1fr 1.1fr;
    align-items: center; gap: 8px;
}
.ir-mbas {
    font-size: 8.5px; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--text-dim); font-weight: 700; padding-bottom: 5px;
    border-bottom: 1px solid var(--erp-border);
}
.ir-mbas span + span, .ir-msat span + span { text-align: right; }
.ir-msat {
    flex: 1; min-height: 0;
    font-size: 11.5px; color: var(--text-primary);
    border-bottom: 1px solid var(--erp-border);
    animation: ir-sat 420ms ease-out backwards;
    animation-delay: var(--d);
    transition: background 160ms;
}
.ir-msat:last-child { border-bottom: none; }
.ir-msat:hover { background: var(--ir-mavi-soft); }
@keyframes ir-sat { from { opacity: 0; transform: translateY(4px); } }
.ir-mad { display: flex; align-items: center; gap: 7px; font-weight: 600; min-width: 0; }
.ir-mad > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ir-nokta {
    width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0;
    background: linear-gradient(145deg, color-mix(in srgb, var(--rk) 55%, transparent), var(--rk));
    box-shadow: 0 0 6px -1px color-mix(in srgb, var(--rk) 70%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
/* HAYALET satır: kesikli sol kenar + taramalı zemin + soluk yazı */
.ir-msat.ir-hayalet-sat {
    color: var(--text-dim);
    border-left: 1px dashed var(--hayalet-kenar);
    padding-left: 8px; margin-left: -9px;
    background: var(--hayalet-tarama);
}
.ir-msat.ir-hayalet-sat .ir-nokta {
    background: var(--hayalet-tarama), color-mix(in srgb, var(--g-rezerve) 22%, transparent);
    border: 1px dashed var(--hayalet-kenar); box-shadow: none;
}
/* "kart dışı" çipi — altın kesikli */
.ir-kd {
    display: inline-block; vertical-align: 1px;
    font-family: var(--font-body); font-size: 8.5px; font-weight: 700;
    letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap;
    color: var(--gold-text);
    border: 1px dashed color-mix(in srgb, var(--gold) 55%, transparent);
    border-radius: 4px; padding: 1px 5px;
    background: var(--gold-soft);
}

@media (max-width: 620px) {
    .ir-sayi { font-size: 26px; }
    .ir-mbas, .ir-msat { grid-template-columns: 1.6fr 0.9fr 1fr; }
    .ir-mbas span:nth-child(4), .ir-msat span:nth-child(4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ir-seg, .ir-brk, .ir-msat { animation: none; }
    .ir-parla { animation: none; opacity: 0; }
}

/* ============================================================
   RAPOR İSKELETİ — veri bağlanana kadarki bölüm yer tutucuları
   (Fi; sayfalar Client/Pages/*.razor, plan docs/GM-ISTEKLERI.md)
   ============================================================ */
.rapor-yetkisiz {
    max-width: 480px; margin: 12vh auto 0; text-align: center;
    font-family: var(--font-body); font-size: 13px; color: var(--text-dim);
    padding: 26px; border: 1px dashed var(--erp-border-strong); border-radius: 14px;
}
.rapor-iskelet { display: flex; flex-direction: column; gap: 14px; }
.ri-panel {
    border: 1px solid var(--erp-border); border-radius: 14px;
    background: var(--erp-surface); overflow: hidden;
}
.ri-panel header {
    padding: 12px 16px;
    font-family: var(--font-body); font-size: 12px; font-weight: 700;
    letter-spacing: .05em; color: var(--text-primary);
    border-bottom: 1px solid var(--erp-border);
}
.ri-govde {
    display: grid; place-items: center; min-height: 96px;
    background:
        repeating-linear-gradient(-45deg, transparent 0 14px,
            var(--erp-row-zebra) 14px 28px);
}
.ri-govde span {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em;
    text-transform: uppercase; color: var(--text-dim); opacity: .6;
}


/* ============================================================
   RAPOR ORTAK DİLİ (sk-*) — İsviçre Finans / Sinyal Turuncu.
   TÜM rapor sayfaları bu sınıfları paylaşır. Kaynağı Satış &
   Karlılık'tı; bileşen stilleri sayfaya bağlı DOM'a girdiği için
   buraya taşındı (2026-08-28). Tema token'larıyla iki modda çalışır.
   ============================================================ */
    /* İsviçre Finans / Sinyal Turuncu (S5) — kart yok: kılcal ızgara +
       kalın kurallar + tipografi. Tema token'larıyla iki modda da çalışır. */
    .sk-meta{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 8px;
        font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;color:var(--text-dim)}
    .sk-eksik{color:var(--danger-text)}
    .sk-uyari{display:flex;align-items:center;gap:10px;padding:14px 0;margin-top:6px;
        border-top:1px solid var(--erp-border);border-bottom:1px solid var(--erp-border);
        font-size:12px;color:var(--text-dim)}
    .sk-hata{color:var(--danger-text)}
    .sk-nabiz{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none;
        animation:sk-nb 1.6s ease-in-out infinite}
    @keyframes sk-nb{0%,100%{opacity:.4}50%{opacity:1}}

    /* KPI şeridi: kalın alt kural + kılcal kolon ayrımları (kart yok) */
    .sk-kpiler{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr 1fr;
        border-bottom:1.5px solid var(--erp-kalin-cizgi,var(--text-primary));margin-bottom:0}
    .sk-kpi{display:flex;flex-direction:column;gap:2px;padding:8px 16px 9px;
        border-left:1px solid var(--erp-border)}
    .sk-kpi:first-child{border-left:0;padding-left:0}
    .sk-kpi-ad{font-size:9px;font-weight:800;letter-spacing:.15em;color:var(--text-dim)}
    .sk-kpi-deger{font-size:27px;font-weight:700;letter-spacing:-.04em;
        color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1.12}
    .sk-kpi:first-child .sk-kpi-deger{font-size:36px;color:var(--gold)}
    .sk-kpi-alt{font-size:10px;font-weight:500;color:var(--text-dim)}
    .sk-kpi-alt i{font-style:normal;opacity:.75}
    /* Geçen yılın AYNI dönemi (CEO 2026-09-03): kartın altında mono, sakin */
    /* Geçen yılın aynı dönemi — CEO 2026-09-03: mono font sayfa diliyle
       uyumsuzdu ve çok sönüktü. Gövde fontu + vurgu rengi (modla döner). */
    .sk-kpi-onceki{font-family:var(--font-body);font-size:10.5px;font-weight:600;
        letter-spacing:.01em;color:var(--gold-text);font-variant-numeric:tabular-nums}
    .art{color:var(--success-text)}
    .dus{color:var(--danger-text)}

    /* Bölümler: kılcal ızgara blokları */
    .sk-govde{display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:auto auto;min-height:0}
    .sk-blok{padding:10px 16px;border-left:1px solid var(--erp-border);
        border-bottom:1px solid var(--erp-border);display:flex;flex-direction:column;min-width:0;overflow:hidden}
    .sk-blok.b1{border-left:0;padding-left:0;grid-row:span 2;border-bottom:0}
    .sk-blok.b3{border-bottom:0}
    /* @@media Razor kaçışıyla kopyalanmıştı — düz CSS'te geçersizdi ve kural
       hiç çalışmıyordu (2026-08-29'da fark edildi). */
    @media (max-width:1100px){.sk-govde{grid-template-columns:1fr}.sk-blok{border-left:0;padding-left:0}.sk-blok.b1{grid-row:auto}}
    .sk-bolum-ad{font-size:9px;font-weight:800;letter-spacing:.16em;color:var(--text-primary);
        margin:8px 0 6px;display:flex;justify-content:space-between;gap:10px}
    .sk-sira{color:var(--gold);margin-right:7px}
    .sk-lejant{display:flex;align-items:center;gap:9px;font-size:8.5px;font-weight:500;
        letter-spacing:.02em;color:var(--text-dim);text-transform:none}
    .lj{display:inline-block;width:8px;height:8px;margin-right:3px;vertical-align:-1px}
    .lj-bar{background:var(--gold)}
    .lj-golge{background:var(--gecen-yil);opacity:.85}   /* önceki yıl — çubukla aynı */
    .lj-fifo{background:var(--text-primary);height:2.5px}
    .lj-ort{background:#9aa4c8;height:2.5px}

    .sk-grafik{flex:1;min-height:0}
    .sk-grafik svg{width:100%;height:auto;display:block;color:var(--text-primary)}

    /* Ürün grubu: grafiksel yatay barlar */
    .sk-gg{display:grid;grid-template-columns:106px 1fr 70px 42px;gap:8px;align-items:center;
        padding:3.5px 0;font-size:11px;font-weight:500;color:var(--text-primary)}
    .sk-gg-ad{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .sk-gg-bar{height:7px;background:var(--erp-row-hover);overflow:hidden}
    .sk-gg-bar i{display:block;height:100%;background:var(--gold)}
    .sk-gg-deger{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;font-size:10.5px}
    .sk-gg-marj{text-align:right;font-family:var(--font-mono);font-size:9px;color:var(--text-dim)}

    /* FIFO — ORT karşılaştırma */
    .sk-fo{flex:1;display:flex;align-items:center;gap:14px;padding:4px 0;white-space:nowrap}
    .sk-fo-kutu .a{font-size:8.5px;font-weight:800;letter-spacing:.14em;color:var(--text-dim)}
    .sk-fo-kutu .d{font-size:19px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
    .sk-fo-fark{margin-left:auto;text-align:right}
    .sk-fo-fark b{display:block;font-size:16px;font-weight:700;color:var(--gold)}
    .sk-fo-fark span{font-family:var(--font-mono);font-size:8.5px;color:var(--text-dim)}

    /* Negatif marj listesi */
    .sk-rk{display:grid;grid-template-columns:1fr 80px 46px;gap:8px;padding:3.5px 0;
        font-size:10.5px;font-weight:500;border-bottom:1px dotted var(--erp-border);color:var(--text-primary)}
    .sk-rk:last-child{border-bottom:0}
    .sk-rk-ad{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .sk-rk-kar,.sk-rk-marj{text-align:right;color:var(--danger-text);font-variant-numeric:tabular-nums;font-size:10px}
    .sk-bos{padding:16px 0;font-size:11.5px;color:var(--text-dim)}

/* --- mp-*: müşteri/marka satır dili (ortak; kaynak MusteriPerformansi) --- */
    .mp-satir{display:grid;grid-template-columns:132px 1fr 70px 42px 40px;gap:7px;align-items:center;
        padding:3.5px 0;font-size:10.5px;font-weight:500;color:var(--text-primary)}
    .mp-ad{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .mp-deger{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;font-size:10px}
    .mp-marj{text-align:right;font-family:var(--font-mono);font-size:9px;color:var(--text-dim)}
    .mp-yoy{text-align:right;font-size:9px;font-weight:700}
    .mp-adet{font-style:normal;font-size:8.5px;color:var(--text-dim)}

/* --- Sayfa stil bloklarından TAŞINAN ortaklar (2026-08-29) ---
   env-not UrunMarka'da, sk-rk-notr / um-ikili dört sayfada kullanılıyordu ama
   tanımları tek sayfanın <style> bloğundaydı: o sayfa render değilken stil
   DOM'da olmadığından yazılar bozuk görünüyordu (kullanıcının "Klasik ABC
   fontu bozuk" bildirimi). Bileşen stilinde ORTAK sınıf bırakılmaz. */
    .env-not{font-size:9px;letter-spacing:.04em;color:var(--text-dim);padding:6px 0 0;font-style:italic}
    .sk-rk-notr{text-align:right;font-variant-numeric:tabular-nums;font-size:10px;color:var(--text-primary)}
    .um-ikili{column-count:2;column-gap:22px}
    .um-ikili .sk-rk{break-inside:avoid}
    @media (max-width:1100px){.um-ikili{column-count:1}}

/* --- KPI şeritleri dar ekranda (eksikti: sabit 5-6 kolon telefonda eziliyordu) --- */
    @media (max-width:1100px){
        .sk-kpiler,.pano-kpiler{grid-template-columns:repeat(3,1fr) !important}
        .sk-kpi{padding:8px 10px 9px}
        .sk-kpi:nth-child(3n+1){border-left:0;padding-left:0}
    }
    @media (max-width:640px){
        .sk-kpiler,.pano-kpiler{grid-template-columns:repeat(2,1fr) !important}
        .sk-kpi{border-left:0;padding-left:0}
        .sk-kpi-deger{font-size:22px}
        .sk-kpi:first-child .sk-kpi-deger{font-size:26px}
    }

/* --- Tıklanabilir kırılım satırı (drill-down: satır → filtre çipi) --- */
    .tik{cursor:pointer;border-radius:3px;
        transition:background .14s, box-shadow .14s}
    .tik:hover{background:var(--gold-soft);box-shadow:-6px 0 0 0 var(--gold-soft), 6px 0 0 0 var(--gold-soft)}
    .tik:hover .sk-gg-ad,.tik:hover .mp-ad,.tik:hover .sk-rk-ad,.tik:hover .sf-ad{color:var(--gold-text)}

/* ============================================================
   GRAFİK TOOLTIP (.gtip — js/grafik.js doldurur/konumlar)
   [data-tip="Başlık|satır|satır"] taşıyan her öğede çalışır.
   ============================================================ */
.gtip{
    position:fixed;left:0;top:0;z-index:999;
    display:none;flex-direction:column;gap:3px;
    max-width:280px;padding:9px 12px 10px;
    background:var(--erp-surface);
    border:1px solid var(--erp-border-strong);
    border-top:2.5px solid var(--gold);
    box-shadow:0 14px 38px -10px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb, var(--gold) 10%, transparent);
    pointer-events:none;
}
.gtip.on{display:flex}
.gtip b{
    font-family:var(--font-body);font-size:10.5px;font-weight:800;
    letter-spacing:.05em;color:var(--text-primary);white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;max-width:256px;
}
.gtip span{
    font-family:var(--font-mono);font-size:10px;letter-spacing:.02em;
    color:var(--text-dim);font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* ============================================================
   DONUT (Donut.razor) — dilim renkleri --gseri-* (tema + sidebar
   moduna birlikte uyumlu, bkz. app.css).
   ============================================================ */
.gd-kap{display:flex;align-items:center;gap:12px;min-width:0}
.gd-svg{width:118px;height:118px;flex:none}
.gd-dilim{transition:opacity .15s, stroke-width .15s}
.gd-dilim:hover{opacity:.82;stroke-width:26}
.gd-tik{cursor:pointer}
circle.gd-c0{stroke:var(--gseri-1)} i.gd-c0{background:var(--gseri-1)}
circle.gd-c1{stroke:var(--gseri-3)} i.gd-c1{background:var(--gseri-3)}
circle.gd-c2{stroke:var(--gseri-4)} i.gd-c2{background:var(--gseri-4)}
circle.gd-c3{stroke:var(--gseri-2);stroke-opacity:.75} i.gd-c3{background:var(--gseri-2);opacity:.75}
circle.gd-c4{stroke:var(--gseri-5)} i.gd-c4{background:var(--gseri-5)}
circle.gd-c5{stroke:var(--gseri-6)} i.gd-c5{background:var(--gseri-6)}
.gd-merkez{font-size:17px;font-weight:700;letter-spacing:-.03em;
    fill:var(--text-primary);font-variant-numeric:tabular-nums}
.gd-merkez-alt{font-size:7.5px;font-weight:800;letter-spacing:.12em;fill:var(--text-dim)}
.gd-lejant{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.gd-lj{appearance:none;border:0;background:transparent;text-align:left;
    display:grid;grid-template-columns:8px 1fr auto auto;gap:6px;align-items:center;
    padding:2.5px 4px;font-family:var(--font-body);border-radius:3px;
    transition:background .14s}
.gd-lj:not(:disabled){cursor:pointer}
.gd-lj:not(:disabled):hover{background:var(--gold-soft)}
.gd-lj i{width:8px;height:8px;display:inline-block}
.gd-lj-ad{font-size:9.5px;font-weight:600;color:var(--text-primary);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gd-lj-deger{font-size:9px;font-weight:700;color:var(--text-primary);
    font-variant-numeric:tabular-nums;white-space:nowrap}
.gd-lj-pay{font-family:var(--font-mono);font-size:8.5px;color:var(--text-dim);
    font-variant-numeric:tabular-nums;min-width:30px;text-align:right}

/* Pano donut şeridi (mockup 1/7 alt sırası) */
.pano-donutlar{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
    border-top:1px solid var(--erp-border);margin-top:2px}
.pano-donut{padding:8px 16px 6px;border-left:1px solid var(--erp-border);min-width:0}
.pano-donut:first-child{border-left:0;padding-left:0}
@media (max-width:1100px){
    .pano-donutlar{grid-template-columns:1fr}
    .pano-donut{border-left:0;padding-left:0}
}

/* b3 bloğunun TAM GENİŞ hali: 3+ kolonlu alt şeritler dar sağ sütuna
   sığmadığında blok ızgaranın iki kolonuna da yayılır. */
    .sk-blok.b3.sk-b3-genis{grid-column:1 / -1;border-left:0;
        display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;
        border-top:1px solid var(--erp-border);padding-left:0}
    /* !important: kolon sayısını sayfalar inline style ile özelleştiriyor
       (3'lü/4'lü) — dar ekranda tek kolona inişi inline'a ezdirme. */
    @media (max-width:1100px){.sk-blok.b3.sk-b3-genis{grid-template-columns:1fr !important}}
.gd-lj.gd-pasif{cursor:default}
.gd-lj.gd-pasif:hover{background:transparent}

/* Pano dikey sıkılaştırma: donut satırı eklenince sayfa tek ekrana yaklaşsın */
.pano-donut .gd-svg{width:100px;height:100px}
.pano-donut{padding-top:4px;padding-bottom:2px}
.pano-donut .sk-bolum-ad{margin:4px 0 4px}

/* ============================================================
   IŞIK DOKUNUŞLARI (2026-08-29) — tüm site, tema + sidebar moduna
   uyumlu: renkler --gold ailesinden gelir (mod 2'de Klein mavisi,
   koyu/açık temada doğru ton). Hepsi süsleme katmanı — veri dili
   (İsviçre kılcal ızgara) değişmez; reduced-motion hepsini kapatır.
   ============================================================ */

/* 1 · KPI şeridi: kalın kural çizgisi boyunca süzülen ışık */
.sk-kpiler{position:relative;overflow:hidden}
.sk-kpiler::after{content:"";position:absolute;bottom:0;left:-160px;width:130px;height:2px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);
    animation:kpi-isik 7.5s ease-in-out infinite;pointer-events:none}
@keyframes kpi-isik{0%,55%{left:-160px}88%,100%{left:112%}}

/* 2 · KPI değerleri sayfa açılışında kademeli gelir (yalnız ilk render;
   filtre değişiminde öğe korunur, animasyon tekrarlamaz) */
.sk-kpi-deger{animation:deger-in .5s cubic-bezier(.2,.85,.25,1) backwards}
.sk-kpi:nth-child(2) .sk-kpi-deger{animation-delay:.05s}
.sk-kpi:nth-child(3) .sk-kpi-deger{animation-delay:.1s}
.sk-kpi:nth-child(4) .sk-kpi-deger{animation-delay:.15s}
.sk-kpi:nth-child(5) .sk-kpi-deger{animation-delay:.2s}
.sk-kpi:nth-child(6) .sk-kpi-deger{animation-delay:.25s}
.sk-kpi:nth-child(7) .sk-kpi-deger{animation-delay:.3s}
@keyframes deger-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* 3 · KPI hover: etiket vurgu rengini alır */
.sk-kpi-ad{transition:color .18s}
.sk-kpi:hover .sk-kpi-ad{color:var(--gold-text)}

/* 4 · Grafik öğeleri: üzerine gelince mod renginde ışıma */
.sk-grafik [data-tip]{transition:filter .15s}
.sk-grafik [data-tip]:hover{filter:drop-shadow(0 0 5px color-mix(in srgb, var(--gold) 65%, transparent))}
.gd-dilim:hover{filter:drop-shadow(0 0 6px color-mix(in srgb, var(--gold) 55%, transparent))}

/* 5 · Kırılım barları: satır hover'ında bar parlar */
.sk-gg-bar i{transition:filter .16s, box-shadow .16s}
.sk-gg:hover .sk-gg-bar i,.mp-satir:hover .sk-gg-bar i{
    filter:brightness(1.1);
    box-shadow:0 0 9px color-mix(in srgb, var(--gold) 45%, transparent)}

/* 6 · Liste satırları: yumuşak hover zemini (tıklanamayanlar dahil) */
.sk-rk{transition:background .14s}
.sk-rk:hover{background:var(--erp-row-hover)}

/* 7 · Bölüm numarası: blok hover'ında yanar */
.sk-sira{transition:text-shadow .2s}
.sk-blok:hover .sk-sira,.pano-donut:hover .sk-sira{
    text-shadow:0 0 9px color-mix(in srgb, var(--gold) 70%, transparent)}

/* 8 · Aktif menü hapı: mod renginde yumuşak dış ışıma (statik, nabızsız) */
.erp-nav-item.active{box-shadow:0 4px 16px -6px var(--erp-logo-isik-dis, rgba(226,67,30,.34)),
    0 0 22px -8px var(--erp-logo-isik-dis, rgba(226,67,30,.34))}

/* 9 · Kutular (akış/gün/sentetik/uyarı/aksiyon): hover'da kenar vurgusu + nefes */
.env-akis-kutu,.pano-akis-kutu,.fin-gun{transition:border-color .18s, box-shadow .18s}
.env-akis-kutu:hover,.pano-akis-kutu:hover,.fin-gun:hover{
    border-color:color-mix(in srgb, var(--gold) 55%, var(--erp-border));
    box-shadow:0 6px 18px -10px color-mix(in srgb, var(--gold) 42%, transparent)}
.pano-uyari,.mp-aksiyon{transition:transform .18s, box-shadow .18s}
.pano-uyari:hover,.mp-aksiyon:hover{transform:translateY(-1px);
    box-shadow:0 8px 20px -12px color-mix(in srgb, var(--gold) 50%, transparent)}

/* 10 · İçerik kaydırma çubuğu: temaya uyumlu ince (varsayılan gri blok kabaydı) */
.erp-content{scrollbar-width:thin;
    scrollbar-color:color-mix(in srgb, var(--text-dim) 38%, transparent) transparent}
.erp-content::-webkit-scrollbar{width:8px}
.erp-content::-webkit-scrollbar-thumb{border-radius:4px;
    background:color-mix(in srgb, var(--text-dim) 30%, transparent)}
.erp-content::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb, var(--gold) 55%, transparent)}
.erp-content::-webkit-scrollbar-track{background:transparent}

/* 11 · Rapor sayfaları da kademeli girer (page-transition'ın sk-* karşılığı) */
.page-transition .sk-kpiler{animation:page-child-in .32s cubic-bezier(.2,.85,.25,1) .05s 1 backwards}
.page-transition .sk-govde{animation:page-child-in .32s cubic-bezier(.2,.85,.25,1) .1s 1 backwards}
.page-transition .pano-donutlar{animation:page-child-in .32s cubic-bezier(.2,.85,.25,1) .16s 1 backwards}

/* 12 · Hareket duyarlılığı: süsleme animasyonları kapanır, veri aynı kalır */
@media (prefers-reduced-motion: reduce){
    .sk-kpiler::after{animation:none;opacity:0}
    .sk-kpi-deger,.page-transition .sk-kpiler,.page-transition .sk-govde,
    .page-transition .pano-donutlar{animation:none}
    .pano-uyari:hover,.mp-aksiyon:hover{transform:none}
}

/* ============================================================
   2026-08-29 akşam turu — kullanıcı geri bildirimleri
   ============================================================ */

/* Bölüm işareti: 01/02 numaraları kalktı (sayı karmaşası) — yerine
   İsviçre elması. .sk-sira seçicileri eski sayfalar için duruyor. */
.sk-isaret{display:inline-block;width:7px;height:7px;flex:none;
    background:var(--gold);transform:rotate(45deg);
    margin-right:9px;vertical-align:1px;
    transition:box-shadow .2s, transform .2s}
.sk-blok:hover .sk-isaret,.pano-donut:hover .sk-isaret{
    box-shadow:0 0 8px color-mix(in srgb, var(--gold) 70%, transparent)}

/* Veri kesiti şeridi: mono + geniş harf aralığı dandik duruyordu —
   gövde fontu, normal aralık (kullanıcı 2026-08-29). */
.sk-meta{font-family:var(--font-body) !important;font-size:10.5px !important;
    letter-spacing:0 !important;font-weight:500}
.sk-meta > span:first-child{color:var(--text-dim)}

/* Tooltip satırları: mono + harf aralığı kalktı — gövde fontu, düzgün ton. */
.gtip b{font-size:11.5px;letter-spacing:.01em}
.gtip span{font-family:var(--font-body);font-size:10.5px;letter-spacing:0;
    color:color-mix(in srgb, var(--text-primary) 78%, transparent);
    font-variant-numeric:tabular-nums}

/* Mod düğmeleri GERÇEKTEN ortalı: taban .sidebar-mode-toggle kuralındaki
   margin-left:auto sızıyordu ve çifti sağa itiyordu (kullanıcı bildirimi). */
.erp-logo-modlar .sidebar-mode-toggle{margin-left:0}

/* Eski altın (--amber) kalıntıları görünür öğelerde mod paletine bağlandı. */
.erp-logout:hover{color:var(--erp-sidebar-accent);background:rgba(255,255,255,0.03)}
.erp-hamburger:hover{border-color:var(--gold);color:var(--gold)}

/* Pano sinyal şeridi: solda dikkat, sağda yüksek performans. */
.pano-sinyaller{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:1100px){.pano-sinyaller{grid-template-columns:1fr}}
.pano-uyari.pano-one{border-left-color:var(--success-text, #2e9e5b);
    background:color-mix(in srgb, var(--success-text, #2e9e5b) 6%, transparent)}
.pano-uyari.pano-one b{color:var(--success-text, #2e9e5b)}

/* LoadingBlock metni hiç stillenmemişti. */
.loading-text{font-family:var(--font-body);font-size:12px;color:var(--text-dim)}

/* TemaDugmesi'nin scoped <style> bloğu .erp-logo-modlar'da flex item oluyor
   ve iki düğmeyi ~5px sola kaydırıyordu — ortalamayı bozmasın. */
.erp-logo-modlar > style{display:none !important}

/* Pano dikey mikro-sıkılaştırma 2. tur (kullanıcı: "çok az kaymış"):
   cari donut lejantı uzun adlarla 6 satır oldu + sinyal kartları sarabiliyor. */
.pano-donut .gd-lj{padding:1.5px 4px}
.pano-donut .gd-lj-ad{font-size:9px}
.pano-uyari{padding:7px 10px}
.pano-dikkat{gap:6px}
.pano-akis-kutu{padding:5px 10px}
.pano-b3-serit{padding-top:6px;padding-bottom:4px}
.pano-b3-serit .sk-bolum-ad{margin:2px 0 5px}

/* Akışta STOK OLMAYAN kutular (Forecast, Siparişler) — CEO 2026-09-03
   sırası bunları şeride soktu; kesik çerçeve + soluk zemin ile ayrılır ki
   toplam stoğa katıldıkları sanılmasın (açıklama tooltip'te). */
.env-akis-kutu.stok-degil,.pano-akis-kutu.stok-degil{
    border-style:dashed !important;opacity:.72}
.env-akis-kutu.stok-degil .ad,.pano-akis-kutu.stok-degil .a{font-style:italic}

/* Stok ayı payda seçici (CEO 2026-09-03) — KPI altında küçük ikili. */
.env-tempo{display:inline-flex;margin-top:3px;border:1px solid var(--erp-border-strong)}
.env-tempo button{appearance:none;border:0;cursor:pointer;background:transparent;
    padding:1.5px 7px;color:var(--text-dim);
    font-family:var(--font-body);font-size:8px;font-weight:800;letter-spacing:.1em;
    transition:background .15s,color .15s}
.env-tempo button.on{background:var(--gold);color:#fff}
.env-tempo button:hover:not(.on){color:var(--text-primary)}

/* En iyiler / en kötüler dörtlüsü (CEO 2026-09-03). Ortak sınıf: sayfa
   <style>'ında BIRAKILMAZ (CLAUDE.md dersi). */
.um-dortlu{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.um-dortlu-kutu{display:flex;flex-direction:column;gap:2px;min-width:0}
.um-dortlu-ad{font-family:var(--font-body);font-size:8.5px;font-weight:800;
    letter-spacing:.14em;color:var(--text-dim);padding-bottom:3px;margin-bottom:2px;
    border-bottom:1px solid var(--erp-border)}
.um-dortlu-ad.iyi{color:var(--success-text,#1f7a42)}
.um-dortlu-ad.kotu{color:var(--danger-text)}
@media (max-width:900px){.um-dortlu{grid-template-columns:1fr 1fr}}

/* Tedarikçi desteği kutuları — pozitif katkı (yeşil kenar), CEO 2026-09-03 */
.sk-fo-kutu.sk-destek{border-left:3px solid var(--success, #2e9e5b)}

/* =====================================================================
   BEKLEME BİLDİRİMİ + KUM SAATİ (CEO isteği 2026-09-03)
   BeklemeKatmani: sabit, ALT-orta (filtre çubuğunu örtmesin — dakikalar
   sürebilir), tıklamayı engellemez. LoadingBlock aynı
   kum saatini küçük kullanır. Kum --gold (modla döner), çerçeve currentColor.
   ===================================================================== */
.bekleme-katmani{position:fixed;bottom:22px;left:calc(50% + 86px);transform:translateX(-50%);z-index:210;
    display:flex;align-items:center;gap:14px;padding:11px 22px 11px 16px;
    background:var(--erp-surface);color:var(--text-primary);
    border:1.5px solid var(--gold);max-width:min(92vw,560px);pointer-events:none;
    box-shadow:0 0 0 1px color-mix(in srgb, var(--gold) 20%, transparent),
               0 12px 34px rgba(0,0,0,.22),
               0 0 26px color-mix(in srgb, var(--gold) 38%, transparent);
    animation:bekleme-gir .28s cubic-bezier(.2,.85,.25,1) both}
@media (max-width: 900px){.bekleme-katmani{left:50%}}   /* sidebar çekmecede → gerçek orta */
@keyframes bekleme-gir{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
.bekleme-metin{display:flex;flex-direction:column;gap:2px;font-family:var(--font-body)}
.bekleme-metin b{font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.bekleme-metin small{font-size:11px;color:var(--text-dim)}
.bekleme-metin small.bekleme-uyari{color:var(--danger-text);font-weight:700}
/* Yenileme hali: çerçeve nabız gibi ışır — "şu an kaynaktan okunuyor" */
.bekleme-katmani.yenileme{animation:bekleme-gir .28s cubic-bezier(.2,.85,.25,1) both,
    bekleme-nabiz 2.4s ease-in-out .3s infinite}
@keyframes bekleme-nabiz{
    0%,100%{box-shadow:0 0 0 1px color-mix(in srgb, var(--gold) 20%, transparent),0 12px 34px rgba(0,0,0,.22),0 0 18px color-mix(in srgb, var(--gold) 28%, transparent)}
    50%{box-shadow:0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent),0 12px 34px rgba(0,0,0,.22),0 0 34px color-mix(in srgb, var(--gold) 60%, transparent)}}

.kum-saati{display:inline-flex;color:var(--text-primary);flex:none}
.kum-saati-svg{width:26px;height:34px;display:block;transform-origin:50% 50%;
    animation:kum-don 2.4s ease-in-out infinite}
.kum-saati-kucuk .kum-saati-svg{width:16px;height:22px}
.kum-ust,.kum-alt{fill:var(--gold);transform-box:view-box}
.kum-ust{transform-origin:12px 5.6px;animation:kum-bosal 2.4s ease-in-out infinite}
.kum-alt{transform-origin:12px 26.4px;animation:kum-dol 2.4s ease-in-out infinite}
@keyframes kum-don{0%,78%{transform:rotate(0)}100%{transform:rotate(180deg)}}
@keyframes kum-bosal{0%{transform:scaleY(1)}76%,100%{transform:scaleY(.06)}}
@keyframes kum-dol{0%{transform:scaleY(.06)}76%,100%{transform:scaleY(1)}}
@media (prefers-reduced-motion: reduce){
    .kum-saati-svg,.kum-ust,.kum-alt,.bekleme-katmani.yenileme{animation:none}}