/* Inter (6 temanın yazı yığını + Tema v3) ve Space Grotesk (Nova başlık) — YEREL (2026-10-29, kullanıcı kararı "yazı tipi dosyası bir kez indirilip
   sunucuya konsun"): Google Fonts'tan bir kez indirildi (SIL OFL), latin + latin-ext (Türkçe) değişken woff2, public/fonts/ (adında içerik özeti,
   sunucu bir yıl değişmez önbellekler). Google'a yazı tipi isteği gitmez. Eskiden fonts.googleapis.com @import'uydu.
   themes.css TÜM sayfalarda yüklendiği için (index.html shared.css yüklemiyor) burada; font gelmezse IBM Plex Sans / sistem yığını. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/inter-400-800-latin-ext-34b9c504.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/inter-400-800-latin-3100e775.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/space-grotesk-400-700-latin-ext-952dddb4.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/space-grotesk-400-700-latin-06408904.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* Sayfa geneli hidden kuralı (2026-10-11, B002). HTML `hidden` özniteliği UA stilinde display:none'dur ve
   herhangi bir yazar kuralı (.btn{display:flex}, .dp-kart{display:grid} …) onu sessizce ezer; öğe "gizli"
   işaretli olduğu hâlde görünür kalır. Bu kural öznitelikle gizlemeyi her yerde geçerli kılar.
   themes.css'te çünkü index.html shared.css YÜKLEMİYOR; themes.css tüm panel sayfalarında, index.html'de ve
   terminal/index.html'de yüklü. Taramada (50 sayfanın yüklü DOM'u + HTML/JS şablonlarındaki 382 hidden
   etiketi) hidden taşıyıp bilerek görünür tutulan öğe bulunmadı; düzelen tuzaklar: pazaryeri yönetici düğmeleri,
   sosyal-satis #okAyarBtn, whatsapp-kutu #wkSohbetIc, kargo-kontrol/muhasebe "Sütun eşleştirme" kartları,
   otomasyon #otCDaha, stok-bekleme #sbVaryasyonAlan, musteriler #muAltBilgiUyari, komut paleti .kp-onek.
   Özgüllük bilerek en düşükte (0,1,0): yazdırmada gösterilen #thYazdirAlani / #pyKartBaski / terminal
   #ekranKilavuz kimlikli !important kurallarla kazanmaya devam eder. */
[hidden]{display:none !important;}

/* wspanel — 3 seçilebilir tema (Koyu, Açık, Modern). Her blok sadece renk değişkenlerini
   geçersiz kılar (fontlar/boşluklar shared.css / index.html'in temel :root'unda kalır),
   böylece tüm sayfalarda (shared.css kullanan sayfalar + index.html'in kendi kopyası)
   aynı değişken adları üzerinden anında uygulanır. data-theme yoksa "dark" (Kontrol Odası)
   ile birebir aynı olan taban :root değerleri kullanılır. */

:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0A0F1A; --surface:#101728; --surface-2:#151D33; --surface-3:#1B2440;
  --ink:#E4EAF6; --ink-muted:#8290AC;
  --accent:#31D2C6; --accent-contrast:#04211D; --accent-soft:#132E2B;
  --line:#212C48; --line-soft:#182140;
  --good:#38CC82; --warn:#E8B33D; --critical:#F0555A;
  --sb-bg:#080C15; --sb-hover:#131A2C; --sb-line:#1B233B;
}

:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F5F7FB; --surface:#FFFFFF; --surface-2:#EEF2F7; --surface-3:#E2EBF0;
  --ink:#0F172A; --ink-muted:#647488;
  --accent:#2563EB; --accent-contrast:#FFFFFF; --accent-soft:#E7EFFE;
  --line:#E2EBF0; --line-soft:#EDF2F6;
  --good:#16A34A; --warn:#D97706; --critical:#DC2626;
  --sb-bg:#FFFFFF; --sb-hover:#F0F4F9; --sb-line:#E2EBF0;
}

/* Modern Tema — pastel/glassmorphism. ÖNEMLİ: --surface/--surface-2/--surface-3 kasıtlı
   olarak YARI SAYDAM (önceki sürümde tamamen opaktı — bu yüzden aşağıdaki backdrop-filter
   hiçbir şeyi görünür şekilde bulandırmıyordu, "koyu temadan farksız" şikayetinin asıl
   nedeni buydu). Yarı saydamlığın arkasında bulanıklaşacak bir şey olsun diye body'ye
   pastel bir gradient arka plan eklendi — cam panellerin üzerinde gerçekten "buğulu"
   bir görünüm oluşuyor. */
:root[data-theme="modern"]{
  color-scheme:light;
  --bg:#F3EFFC; --surface:rgba(255,255,255,.62); --surface-2:rgba(243,236,255,.55); --surface-3:rgba(230,218,252,.55);
  --ink:#332B54; --ink-muted:#8A81AC;
  --accent:#A78BFA; --accent-contrast:#2E2350; --accent-soft:rgba(167,139,250,.18);
  --line:rgba(139,92,246,.20); --line-soft:rgba(139,92,246,.12);
  --good:#22C55E; --warn:#F59E0B; --critical:#F43F5E;
  --sb-bg:rgba(255,255,255,.55); --sb-hover:rgba(167,139,250,.12); --sb-line:rgba(139,92,246,.18);
}
[data-theme="modern"] body{
  background:
    radial-gradient(1100px 700px at 12% -8%, rgba(244,114,182,.20), transparent 60%),
    radial-gradient(1000px 650px at 100% 8%, rgba(167,139,250,.24), transparent 55%),
    radial-gradient(900px 600px at 40% 110%, rgba(125,211,252,.18), transparent 55%),
    var(--bg);
  background-attachment:fixed;
}
[data-theme="modern"] .sidebar,
[data-theme="modern"] .topbar{
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
}
[data-theme="modern"] .card,
[data-theme="modern"] .kmodal,
[data-theme="modern"] .modal{
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 8px 32px -12px rgba(139,92,246,.25);
}
/* "Butonlar cam efektli olsun" — bulanık, yarı saydam, ince beyaz kenarlıklı camsı butonlar */
[data-theme="modern"] .btn,
[data-theme="modern"] .sync-btn,
[data-theme="modern"] .quick-tool-btn,
[data-theme="modern"] .icon-btn,
[data-theme="modern"] .theme-swatch{
  backdrop-filter:blur(10px) saturate(160%);
  -webkit-backdrop-filter:blur(10px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="modern"] .btn-primary{
  background:linear-gradient(135deg, rgba(167,139,250,.75), rgba(244,114,182,.65));
  color:#2E2350;
  border:1px solid rgba(255,255,255,.7);
}
[data-theme="modern"] .btn-primary:hover{filter:saturate(1.2) brightness(1.03);}
[data-theme="modern"] .btn-secondary{
  background:rgba(255,255,255,.4);
  color:var(--ink);
}

/* ============================================================================
   Faz 2 temaları — Command Deck / Forge / Copilot / Neural / Kernel.
   Bunlar da (yukarıdaki 3 tema gibi) SADECE görsel kimliği değiştiriyor:
   renk paleti, tipografi, kart köşe/kenarlık/gölge dili ve yoğunluk. Sayfaların
   HTML yerleşimi (hangi kart nerede) temaya göre DEĞİŞMEZ — o yapısal bir şey,
   CSS değişkeniyle yapılamaz.
   ========================================================================= */

/* ---- Command Deck — sıkı, mavi vurgulu operasyon kokpiti ---- */
:root[data-theme="command"]{
  color-scheme:dark;
  --font-display:"Inter","Segoe UI",system-ui,sans-serif;
  --font-body:"Inter","Segoe UI",system-ui,sans-serif;
  --bg:#0A0C10; --surface:#111419; --surface-2:#161A21; --surface-3:#1D222B;
  --ink:#E8ECF2; --ink-muted:#66707F;
  --accent:#4D8DFF; --accent-contrast:#FFFFFF; --accent-soft:rgba(77,141,255,.14);
  --line:#20262F; --line-soft:#171C23;
  --good:#2FBF71; --warn:#E6A642; --critical:#E2554C;
  --sb-bg:#111419; --sb-hover:#161A21; --sb-line:#20262F;
}
[data-theme="command"] .card,
[data-theme="command"] .kmodal,
[data-theme="command"] .modal{border-radius:8px;}
[data-theme="command"] .btn,
[data-theme="command"] .quick-tool-btn,
[data-theme="command"] .sync-btn,
[data-theme="command"] .icon-btn{border-radius:6px;}
[data-theme="command"] .card-label{letter-spacing:.09em;}

/* ---- Forge Workspace — sıcak kömür + kehribar ---- */
:root[data-theme="forge"]{
  color-scheme:dark;
  --font-display:"Inter","Segoe UI",system-ui,sans-serif;
  --font-body:"Inter","Segoe UI",system-ui,sans-serif;
  --bg:#16171A; --surface:#1C1E22; --surface-2:#212429; --surface-3:#282C32;
  --ink:#F0F1F3; --ink-muted:#787E88;
  --accent:#F0A63C; --accent-contrast:#16171A; --accent-soft:rgba(240,166,60,.16);
  --line:#2C3037; --line-soft:#24272D;
  --good:#5CC98A; --warn:#F0A63C; --critical:#E8607A;
  --sb-bg:#1C1E22; --sb-hover:#282C32; --sb-line:#383E46;
}
[data-theme="forge"] .card,
[data-theme="forge"] .kmodal,
[data-theme="forge"] .modal{border-radius:12px;}
[data-theme="forge"] .btn,
[data-theme="forge"] .quick-tool-btn,
[data-theme="forge"] .sync-btn,
[data-theme="forge"] .icon-btn{border-radius:9px;}
[data-theme="forge"] .btn-primary{font-weight:700;}

/* ---- Copilot Deck — açık, mor vurgulu asistan teması ---- */
:root[data-theme="copilot"]{
  color-scheme:light;
  --font-display:"Inter","Segoe UI",system-ui,sans-serif;
  --font-body:"Inter","Segoe UI",system-ui,sans-serif;
  --bg:#F7F7FB; --surface:#FFFFFF; --surface-2:#F1F1F8; --surface-3:#E7E7F2;
  --ink:#14142B; --ink-muted:#83839F;
  --accent:#5B3DF5; --accent-contrast:#FFFFFF; --accent-soft:#EFECFF;
  --line:#E3E3EE; --line-soft:#EEEEF6;
  --good:#199E5C; --warn:#C07D10; --critical:#CF3B3B;
  --sb-bg:#FFFFFF; --sb-hover:#F1F1F8; --sb-line:#E3E3EE;
}
[data-theme="copilot"] .card,
[data-theme="copilot"] .kmodal,
[data-theme="copilot"] .modal{
  border-radius:13px;
  box-shadow:0 2px 14px -10px rgba(20,20,43,.28);
}
[data-theme="copilot"] .btn,
[data-theme="copilot"] .quick-tool-btn,
[data-theme="copilot"] .sync-btn,
[data-theme="copilot"] .icon-btn{border-radius:9px;}
[data-theme="copilot"] .btn-primary{font-weight:600;}

/* ---- Neural Ops — mesh gradient + cam paneller ---- */
:root[data-theme="neural"]{
  color-scheme:dark;
  --font-display:"Inter","Segoe UI",system-ui,sans-serif;
  --font-body:"Inter","Segoe UI",system-ui,sans-serif;
  --bg:#070810; --surface:rgba(255,255,255,.04); --surface-2:rgba(255,255,255,.065); --surface-3:rgba(255,255,255,.10);
  --ink:#E9EBF5; --ink-muted:#666D8C;
  --accent:#818CF8; --accent-contrast:#070810; --accent-soft:rgba(129,140,248,.20);
  --line:rgba(255,255,255,.09); --line-soft:rgba(255,255,255,.055);
  --good:#34D399; --warn:#FBBF24; --critical:#FB7185;
  --sb-bg:rgba(9,10,22,.74); --sb-hover:rgba(255,255,255,.07); --sb-line:rgba(255,255,255,.10);
}
[data-theme="neural"] body{
  background:
    radial-gradient(1000px 560px at 82% -14%, rgba(129,140,248,.24), transparent 62%),
    radial-gradient(760px 520px at 4% 104%, rgba(34,211,238,.17), transparent 60%),
    radial-gradient(620px 420px at 50% 46%, rgba(232,121,249,.08), transparent 70%),
    var(--bg);
  background-attachment:fixed;
}
[data-theme="neural"] .sidebar,
[data-theme="neural"] .topbar{
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
}
[data-theme="neural"] .card,
[data-theme="neural"] .kmodal,
[data-theme="neural"] .modal{
  border-radius:14px;
  backdrop-filter:blur(10px) saturate(150%);
  -webkit-backdrop-filter:blur(10px) saturate(150%);
}
[data-theme="neural"] .btn,
[data-theme="neural"] .quick-tool-btn,
[data-theme="neural"] .sync-btn,
[data-theme="neural"] .icon-btn{border-radius:9px;}

/* ---- Kernel Command — kömür + elektrik turuncusu ---- */
:root[data-theme="kernel"]{
  color-scheme:dark;
  --font-display:"Inter","Segoe UI",system-ui,sans-serif;
  --font-body:"Inter","Segoe UI",system-ui,sans-serif;
  --bg:#0E0F12; --surface:#16181D; --surface-2:#1C1F26; --surface-3:#252932;
  --ink:#ECEEF2; --ink-muted:#6B727F;
  --accent:#FF6B1A; --accent-contrast:#0E0F12; --accent-soft:rgba(255,107,26,.15);
  --line:#232730; --line-soft:#1B1E25;
  --good:#2FB673; --warn:#E0B13C; --critical:#EF4F4F;
  --sb-bg:#16181D; --sb-hover:#1C1F26; --sb-line:#2F343F;
}
[data-theme="kernel"] .card,
[data-theme="kernel"] .kmodal,
[data-theme="kernel"] .modal{border-radius:11px;}
[data-theme="kernel"] .btn,
[data-theme="kernel"] .quick-tool-btn,
[data-theme="kernel"] .sync-btn,
[data-theme="kernel"] .icon-btn{border-radius:7px;}
[data-theme="kernel"] .btn-primary{font-weight:700;}

/* ---- Kontrast — sıcak antrasit zemin + zümrüt-altın ikili vurgu. Kullanıcı isteği:
   önceki 8 temanın "ince ayar"ları yetersiz bulundu, "gerçek köklü bir tasarım" istendi
   (bkz. proje hafızası, 2026-09-05). --warn burada bilinçli olarak amber/altın tonunda —
   hem gerçek uyarı durumlarını hem de "gold" vurgu rolünü (Forge Workspace'teki gibi)
   aynı anda karşılıyor, ayrı bir özel değişken eklemeye gerek kalmadı. Fraunces gibi yeni
   bir display fontu EKLENMEDİ — shared.css'teki tüm fontlar dışarıdan yüklenmeden, base64
   @font-face ile gömülü (bkz. proje kuralı: dış bağımlılık yok); bu tutarlılığı bozmamak
   için mevcut IBM Plex Sans/Mono korundu, "köklü" fark palet + yükseklik/köşe diliyle
   sağlandı. */
:root[data-theme="kontrast"]{
  color-scheme:dark;
  --bg:#121110; --surface:#191715; --surface-2:#201D19; --surface-3:#28241F;
  --ink:#F2EFEA; --ink-muted:#8F8B82;
  --accent:#2FBFA0; --accent-contrast:#04211D; --accent-soft:#173630;
  --line:#2A2621; --line-soft:#211E19;
  --good:#34C98E; --warn:#C6A15C; --critical:#D4685C;
  --sb-bg:#0D0C0B; --sb-hover:#201D19; --sb-line:#2A2621;
}
[data-theme="kontrast"] .card,
[data-theme="kontrast"] .kmodal,
[data-theme="kontrast"] .modal{
  border-radius:16px;
  box-shadow:var(--elev-2), inset 0 1px 0 rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.06);
}
[data-theme="kontrast"] .menu-item.active{
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow:none;
  color:var(--accent);
  font-weight:600;
}
[data-theme="kontrast"] .menu-item.active svg{color:var(--accent); opacity:1;}
[data-theme="kontrast"] .quick-tool-btn,
[data-theme="kontrast"] .btn,
[data-theme="kontrast"] .sync-btn,
[data-theme="kontrast"] .icon-btn{border-radius:999px;}
[data-theme="kontrast"] .btn-primary{
  box-shadow:0 4px 14px -4px color-mix(in srgb, var(--accent) 50%, transparent);
}

/* ============================================================================
   Aydınlık Stüdyo (studio) — klasik "modern SaaS paneli" görsel dili.
   Kullanıcı isteği (2026-09-22): geniş boşluklar, çok açık gri zemin üzerinde
   saf beyaz kartlar, ince/zarif gölgeler, belirgin indigo vurgu, Inter
   tipografisi ve her etkileşimli öğede yumuşak hover/focus geçişleri.

   NEDEN TEMA OLARAK: panelde 27 statik HTML sayfası var ve hepsi themes.css'i
   yüklüyor (index.html shared.css'i yüklemiyor ama themes.css'i yüklüyor) —
   yani burası tüm sayfalara tek noktadan ulaşan YEGANE katman. Görsel dili
   buraya yazmak, 27 sayfayı tek tek elden geçirmeden bütün paneli değiştiriyor
   ve mevcut 9 temanın hiçbirini bozmuyor (kullanıcı beğenmezse tek tıkla eski
   temasına dönüyor).

   Bu blok diğer temalardan farklı olarak sadece renk değişkenlerini değil,
   YOĞUNLUK ve YERLEŞİM ölçeklerini de (--space-*, --topbar-h, yarıçaplar,
   gölgeler) geçersiz kılıyor — "nefes alan boşluk" isteğinin tek tek kurallara
   dağılmadan uygulanabildiği yer burası.
   ========================================================================= */
:root[data-theme="studio"]{
  color-scheme:light;
  --font-display:"Inter","IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --font-body:"Inter","IBM Plex Sans","Segoe UI",system-ui,sans-serif;

  /* Zemin #F9FAFB, yuzeyler saf beyaz — derinlik renk farkindan degil,
     golge + ince kenarliktan geliyor. */
  --bg:#F9FAFB; --surface:#FFFFFF; --surface-2:#F3F4F6; --surface-3:#E5E7EB;
  --ink:#111827; --ink-muted:#5F6672; /* #6B7280 → #5F6672: #F3F4F6 seg zemininde 4.39 → 5.26 (WCAG AA) */
  --accent:#4F46E5; --accent-contrast:#FFFFFF; --accent-soft:#EEF2FF;
  --line:#E5E7EB; --line-soft:#F3F4F6;
  --good:#059669; --warn:#D97706; --critical:#DC2626;
  --sb-bg:#FFFFFF; --sb-hover:#F3F4F6; --sb-line:#E5E7EB;

  /* Golgeler saf siyah yerine mavi-griden (#101828) turetildi — acik zeminde
     saf siyah golge "kirli" gorunuyor, gri-mavi golge kagit gibi temiz duruyor. */
  --elev-1:0 1px 2px rgba(16,24,40,.05);
  --elev-2:0 4px 12px -2px rgba(16,24,40,.08), 0 2px 6px -2px rgba(16,24,40,.04);
  --elev-3:0 20px 40px -12px rgba(16,24,40,.16), 0 8px 16px -8px rgba(16,24,40,.08);
  --ring:0 0 0 4px rgba(79,70,229,.16);

  --radius-sm:8px; --radius-md:10px; --radius-lg:14px; --radius-xl:18px;

  /* Bosluk olcegi yukari kaydirildi — bu tek blok, olcegi kullanan HER
     bilesende (content padding'i, kart ic bosluklari, sidebar, modal)
     eszamanli olarak ferahlama sagliyor. */
  --space-3:14px; --space-4:20px; --space-5:28px; --space-6:40px; --space-7:56px;
  --topbar-h:72px; --sidebar-w:268px;
}

/* ---- yuzeyler: beyaz kart + ince kenarlik + zarif golge ---- */
[data-theme="studio"] .card,
[data-theme="studio"] .kmodal,
[data-theme="studio"] .modal,
[data-theme="studio"] .filter-panel,
[data-theme="studio"] .record-card{
  border-radius:var(--radius-lg);
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--elev-1);
}
[data-theme="studio"] .card{padding:var(--space-5);}
/* index.html'deki .card::before vurgu seridi bu dilde gereksiz gorsel gurultu —
   hiyerarsi tipografiyle kuruluyor, renkli cizgiyle degil. */
[data-theme="studio"] .card::before{display:none;}
[data-theme="studio"] .card:hover,
[data-theme="studio"] .record-card:hover{
  box-shadow:var(--elev-2);
  border-color:#D1D5DB;
  transform:translateY(-1px);
}
[data-theme="studio"] .modal{box-shadow:var(--elev-3);}
[data-theme="studio"] .modal-backdrop{background:rgba(16,24,40,.45);}

/* ---- tipografi: baslik / deger / etiket arasindaki fark netlestirildi ---- */
[data-theme="studio"] body{letter-spacing:-.005em;}
[data-theme="studio"] .card-label{
  font-family:var(--font-body);
  font-size:12.5px; font-weight:600; letter-spacing:.01em;
  text-transform:none; color:var(--ink-muted);
}
[data-theme="studio"] .card-value{
  font-weight:700; font-size:32px; letter-spacing:-.025em;
  text-shadow:none; margin-top:var(--space-2);
}
[data-theme="studio"] .modal-title{font-weight:700; letter-spacing:-.02em; font-size:18px;}
[data-theme="studio"] .topbar-heading h1{font-size:16px; font-weight:700; letter-spacing:-.015em;}
[data-theme="studio"] .field label{
  text-transform:none; letter-spacing:0; font-size:12.5px; font-weight:600; color:var(--ink);
}
[data-theme="studio"] .record-title{font-size:14.5px; font-weight:600;}

/* ---- sidebar: sinir yerine zemin farkiyla ayrisan, pill'li navigasyon ---- */
[data-theme="studio"] .sidebar{border-right:1px solid var(--line);}
[data-theme="studio"] .menu-item,
[data-theme="studio"] .menu-group-toggle{
  border-radius:var(--radius-md); padding:10px 12px; font-size:14px; font-weight:500;
}
[data-theme="studio"] .menu-item:hover,
[data-theme="studio"] .menu-group-toggle:hover{background:var(--sb-hover); color:var(--ink);}
/* Aktif sayfa: soluk indigo pill + indigo metin. Eski inset serit kaldirildi —
   bu dilde vurgu renkle veriliyor, cizgiyle degil. */
[data-theme="studio"] .menu-item.active{
  background:var(--accent-soft); color:var(--accent); font-weight:600; box-shadow:none;
}
[data-theme="studio"] .menu-item.active svg{color:var(--accent); opacity:1;}
[data-theme="studio"] .menu-item.active .badge-count{
  background:#FFFFFF; color:var(--accent); border-color:#C7D2FE;
}

/* ---- topbar: daha yuksek, alt kenarligi neredeyse gorunmez ---- */
[data-theme="studio"] .topbar{
  background:var(--surface); border-bottom:1px solid var(--line);
}
[data-theme="studio"] .search input{
  background:var(--surface-2); border-color:transparent;
  border-radius:var(--radius-md); padding-top:10px; padding-bottom:10px; font-size:14px;
  transition:background 160ms var(--ease), border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
[data-theme="studio"] .search input:focus{
  background:var(--surface); border-color:var(--accent); box-shadow:var(--ring);
}

/* ---- butonlar ve alanlar: yumusak kose, belirgin ana eylem ---- */
[data-theme="studio"] .btn,
[data-theme="studio"] .sync-btn,
[data-theme="studio"] .quick-tool-btn,
[data-theme="studio"] .icon-btn,
[data-theme="studio"] .modal-close,
[data-theme="studio"] .logout-btn,
[data-theme="studio"] .pagination button{border-radius:var(--radius-md);}
[data-theme="studio"] .btn{padding:10px 18px; font-size:14px; font-weight:600;}
[data-theme="studio"] .btn-primary{box-shadow:0 1px 2px rgba(16,24,40,.05);}
[data-theme="studio"] .btn-primary:hover:not(:disabled){
  filter:none; background:#4338CA;
  box-shadow:0 4px 12px -2px rgba(79,70,229,.35);
}
[data-theme="studio"] .btn-secondary{background:var(--surface); border-color:#D1D5DB; color:var(--ink);}
[data-theme="studio"] .btn-secondary:hover:not(:disabled){
  background:var(--surface-2); border-color:#9CA3AF; color:var(--ink);
}
[data-theme="studio"] .sync-btn{
  background:var(--surface); border-color:#D1D5DB; font-family:var(--font-body); font-size:13px;
}
[data-theme="studio"] .field input,
[data-theme="studio"] .field select,
[data-theme="studio"] .field textarea{
  background:var(--surface); border-radius:var(--radius-md); padding:10px 13px; font-size:14px;
  transition:border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
[data-theme="studio"] .field input:focus,
[data-theme="studio"] .field select:focus,
[data-theme="studio"] .field textarea:focus{box-shadow:var(--ring);}

/* ---- rozetler: dolgun renk yerine acik zeminli, okunakli etiketler ---- */
[data-theme="studio"] .pill{
  font-family:var(--font-body); text-transform:none; letter-spacing:0;
  font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:var(--radius-pill);
}
[data-theme="studio"] .avatar{background:var(--accent-soft); color:var(--accent); border-color:#C7D2FE;}

/* Tema secicideki renk noktasi. Diger temalarin noktalari shared.css VE
   index.html'de ayri ayri duruyor (index shared.css yuklemiyor); yenisini
   buraya koymak iki dosyayi senkron tutma zorunlulugunu ortadan kaldiriyor. */
.swatch-dot[data-t="studio"]{background:linear-gradient(135deg,#F9FAFB 50%,#4F46E5 50%);}

/* NOT — logo invert'i: shared.css ve index.html'deki
   `:root:not([data-theme="light"]):not([data-theme="modern"]) .brand-logo{filter:invert(1)}`
   kurali ACIK temalarin adini tek tek saymak zorunda oldugundan, yeni bir acik tema
   eklendiginde (copilot ve simdi studio) logoyu beyaza cevirip beyaz sidebar'da
   gorunmez yapiyordu. Burada `[data-theme="studio"] .brand-logo{filter:none}` ile
   ezmeyi DENEDIM ve ise YARAMADI: kaynak kural hem daha ozgul (:root + iki :not)
   hem de index.html'de sayfa-ici <style> blogunda, yani harici themes.css'ten sonra
   geliyor. Bu yuzden duzeltme iki dosyadaki kuralin kendisine (dislama listesine
   copilot + studio eklenerek) yapildi. Yeni bir ACIK tema eklenirse oraya da eklenmeli. */

/* ---- studio: tablolar ve kucuk etiketler ----
   Kullanici istegi (2026-09-22, ikinci tur): "menuler ve tablolar arasinda nefes
   alacak genis bosluklar" + "yazilari daha okunakli yap".

   Tablolar panelde sayfa basina ayri ayri sinifliyor (.af-tablo, .ig-table,
   .karlilik-table, .ai-kontor-tablo ...) — hepsini tek tek hedeflemek kirilgan
   oldugu icin burada CIPLAK th/td/tbody uzerinden gidiliyor. Sayfa-ozel kurallar
   daha ozgul olup bu degerleri ezerse bir sey BOZULMAZ, sadece o tablo kendi
   yogunlugunda kalir; ezmedigi her yerde tablo ferahlar. Satir hover'i ise
   neredeyse hicbir sayfada tanimli degildi, bu yuzden her yerde etkili. */
/* Seciciler `:root` ile baslıyor — ZORUNLU. `[data-theme="studio"] table th`
   ozgullugu (0,1,2), sayfa-ici `table.depo-tablo th` ile TAM ESIT kaliyordu ve
   esitlikte sayfanin <style> blogu sonra geldigi icin o kazaniyordu (olculdu:
   padding 8px 10px olarak kaliyordu). `:root` one eklenince (0,2,2) oluyor.
   Padding bilerek olculu (10px 12px): panelde cok sutunlu genis tablolar var,
   daha buyuk bir deger onlari yatay tasmaya sokabilirdi. */
:root[data-theme="studio"] table{border-collapse:separate; border-spacing:0;}
:root[data-theme="studio"] table th,
:root[data-theme="studio"] table td{padding:10px 12px;}
:root[data-theme="studio"] table th{
  font-family:var(--font-body); font-size:12px; font-weight:600;
  letter-spacing:.02em; color:var(--ink-muted);
  background:var(--surface-2); border-bottom:1px solid var(--line);
}
:root[data-theme="studio"] table tbody tr{transition:background 140ms var(--ease);}
:root[data-theme="studio"] table tbody tr:hover{background:var(--surface-2);}

/* Kucuk "uppercase + monospace" etiketler paneldeki en yaygin okunabilirlik
   sorunuydu (11px, harf araligi genis, mono). Ortak olan .l / baslik desenleri
   normal agirlikta ve normal yazimda gosteriliyor; SAYI gosteren kardes
   elemanlara dokunulmuyor, onlarin tabular-nums hizasi korunuyor. */
[data-theme="studio"] .hero-stat .l,
[data-theme="studio"] .depo-ozet-kutu .l,
[data-theme="studio"] .depo-adet-kars-kutu .l,
[data-theme="studio"] .ei-ozet-stat .l,
[data-theme="studio"] .ai-kontor-stat .l,
[data-theme="studio"] .fin-stat .fin-label,
[data-theme="studio"] .detail-section-title,
[data-theme="studio"] .ir-section-title{
  font-family:var(--font-body); text-transform:none; letter-spacing:0;
  font-size:12.5px; font-weight:500; color:var(--ink-muted);
}

/* ============================================================================
   GENİŞ EKRAN SEÇENEKLERİ (kullanıcı isteği 2026-09-26, 32" monitör için)

   Panelde 960px üstünde hiç düzen kuralı YOKTU: 2560px'de sipariş/ürün kartları
   tek sütunda 2202px'e esniyor, kart içi bilgi hücreleri 521px oluyordu
   (ölçüldü). Yatay taşma yok ama geniş alanın çoğu boşa gidiyordu.

   Üç seçenek de BAĞIMSIZ ve varsayılan KAPALI; sidebar'daki "Geniş Ekran"
   bölümünden tek tek açılıp kapatılıyor, seçim localStorage'da kalıcı.
   Kapalıyken tek bir kural bile uygulanmıyor — mevcut davranış birebir korunuyor.

   Eşik 1900px: 1920x1080 ekranlar da faydalansın ama 1600px'lik dizüstülerde
   iki sütun sıkışmasın diye. Sınır seçeneği eşiksiz (her genişlikte çalışır,
   zaten dar ekranda max-width devreye girmez).
   ========================================================================= */

/* ---- 1) Liste sayfalarında iki sütun ----
   Siparişler ve Ürünler aynı .record-list kapsayıcısını kullanıyor (ikisi de
   #recordList), İade Talepleri ise #esListe. align-items:start şart — grid
   varsayılanı stretch, farklı yükseklikteki kartlar birbirine uyacak şekilde
   gerilip boş alan bırakırdı. */
@media (min-width:1900px){
  html[data-genis-liste="1"] .record-list,
  html[data-genis-liste="1"] #esListe{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:10px;
    align-items:start;
  }
}

/* ---- 2) İçeriğe genişlik sınırı ----
   Satır uzunluğunu okunabilir tutar; kenarlarda simetrik boşluk kalır.
   Eşiksiz: dar ekranda max-width zaten devreye girmez. */
html[data-genis-sinir="1"] .content{
  max-width:1700px;
  margin-left:auto;
  margin-right:auto;
  width:100%;
}

/* ---- 3) Dashboard'da satırları yan yana ----
   Dashboard'da kart SAYISI sabit olduğu için "sütun artırmak" tek başına işe
   yaramaz (row1'de zaten 2 kart var). Asıl kazanç kart SATIRLARINI yan yana
   getirmek.

   DİKKAT: kart satırları .content'in doğrudan çocuğu DEĞİL, .card-grid
   sarmalayıcısının içinde. İlk denemede .content grid'e alınmıştı; o zaman
   .card-grid tek sütuna (1089px) sıkışıp içeriği dikeyde UZATTI ve sayfa
   3752px'den 3856px'e ÇIKTI (ölçüldü). Grid'e alınması gereken .card-grid'in
   kendisi.

   .list-grid, .card.wide ve harita zaten .card-grid'in DIŞINDA, .content
   seviyesinde ve tam genişlikteler — onlara dokunulmuyor. */
@media (min-width:1900px){
  html[data-genis-pano="1"] .card-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:var(--space-4);
    align-items:start;
  }
}

/* ---- Sidebar'daki seçici ---- */
.genis-ekran-blok{margin:14px 12px 0; padding-top:14px; border-top:1px solid var(--sb-line);}
.genis-ekran-baslik{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-muted); font-family:var(--font-mono); margin-bottom:8px;
}
.genis-ekran-secenek{
  display:flex; align-items:flex-start; gap:8px; padding:6px 4px;
  font-size:12px; color:var(--ink-muted); cursor:pointer; line-height:1.35;
}
.genis-ekran-secenek:hover{color:var(--ink);}
.genis-ekran-secenek input{margin-top:2px; flex:none; cursor:pointer;}
.genis-ekran-not{
  font-size:10.5px; color:var(--ink-muted); opacity:.75;
  margin-top:6px; line-height:1.4;
}
/* Daraltılmış sidebar'da (ikon-only) blok gizleniyor — etiketleri sığmaz. */
html[data-sidebar="collapsed"] .genis-ekran-blok{display:none;}
/* Pano görünümü seçici (Tema v2.0, 2026-10-04) */
.pano-secici{width:100%; min-width:0; padding:7px 9px; border-radius:var(--radius-sm, 8px); border:1px solid var(--sb-line, var(--line)); background:var(--surface-2, transparent); color:var(--ink); font-size:12.5px; font-weight:600; cursor:pointer;}
.pano-secici:focus{outline:2px solid var(--accent); outline-offset:1px;}


/* ============================================================================
   NOVA · Teknoloji (nova) — 2026-10-03 gece turu, kullanıcı isteği: "temayı görsel olarak
   iyileştir, daha modern ve teknolojik bir hava kat; sabah bambaşka bir panel".
   Görsel dil: derin lacivert-siyah zemin üzerinde ince ızgara + camgöbeği/mor ışık
   lekeleri; yarı saydam cam paneller (backdrop-blur), ince ışıklı kenarlıklar, neon
   gradyan birincil buton, parlayan vurgu çizgileri, Space Grotesk başlıklar (daktilo
   font YOK — kullanıcı kuralı). Yalnız görsel kimlik: sayfa yerleşimi değişmez, diğer
   10 tema aynen durur; tema seçicisinden tek tıkla geri dönülür. Tüm değerler themes.css
   sözlüğüyle (--elev/--radius/--ease/--space) uyumlu olduğu için her sayfada aynı anda
   uygulanır.
   ========================================================================= */
:root[data-theme="nova"]{
  color-scheme:dark;
  --font-display:"Space Grotesk","Inter","IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --font-body:"Inter","IBM Plex Sans","Segoe UI",system-ui,sans-serif;

  --bg:#070B14; --surface:rgba(13,20,38,.78); --surface-2:rgba(19,28,52,.78); --surface-3:rgba(26,37,66,.82);
  --ink:#E6EDFF; --ink-muted:#8A9BC0;
  --accent:#22D3EE; --accent-contrast:#04121A; --accent-soft:rgba(34,211,238,.14);
  --line:rgba(120,160,255,.16); --line-soft:rgba(120,160,255,.10);
  --good:#34D399; --warn:#FBBF24; --critical:#FB7185;
  --sb-bg:rgba(7,11,20,.72); --sb-hover:rgba(34,211,238,.08); --sb-line:rgba(120,160,255,.14);

  --nova-violet:#8B5CF6; --nova-cyan:#22D3EE; --nova-pink:#F472B6;
  --elev-1:0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px -16px rgba(0,0,0,.7);
  --elev-2:0 1px 0 rgba(255,255,255,.06) inset, 0 16px 40px -18px rgba(34,211,238,.25), 0 10px 30px -14px rgba(0,0,0,.7);
  --elev-3:0 1px 0 rgba(255,255,255,.06) inset, 0 30px 80px -24px rgba(139,92,246,.35), 0 24px 60px -20px rgba(0,0,0,.8);
  --ring:0 0 0 4px rgba(34,211,238,.22);
  --radius-sm:10px; --radius-md:12px; --radius-lg:16px; --radius-xl:22px;
  --space-3:14px; --space-4:20px; --space-5:26px; --space-6:38px; --space-7:54px;
  --topbar-h:70px; --sidebar-w:264px;
}

/* ---- zemin: ışık lekeleri + ince ızgara (sabit, hareketsiz — performans) ---- */
[data-theme="nova"] body{
  background:
    radial-gradient(1200px 700px at -10% -10%, rgba(34,211,238,.16), transparent 60%),
    radial-gradient(1000px 650px at 110% 0%, rgba(139,92,246,.22), transparent 55%),
    radial-gradient(900px 600px at 50% 120%, rgba(244,114,182,.10), transparent 55%),
    linear-gradient(rgba(120,160,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,160,255,.045) 1px, transparent 1px),
    var(--bg);
  background-size:auto, auto, auto, 44px 44px, 44px 44px, auto;
  background-attachment:fixed;
  letter-spacing:-.004em;
}

/* ---- cam paneller ---- */
[data-theme="nova"] .sidebar,
[data-theme="nova"] .topbar{
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
}
[data-theme="nova"] .topbar{border-bottom:1px solid var(--line); box-shadow:0 10px 30px -24px rgba(34,211,238,.35);}
[data-theme="nova"] .sidebar{border-right:1px solid var(--sb-line);}
[data-theme="nova"] .card,
[data-theme="nova"] .kmodal,
[data-theme="nova"] .modal,
[data-theme="nova"] .filter-panel,
[data-theme="nova"] .record-card,
[data-theme="nova"] .dp-kart,
[data-theme="nova"] .mu-kpi > div,
[data-theme="nova"] .kk-kpi > button,
[data-theme="nova"] .chat-card,
[data-theme="nova"] .ia-kural,
[data-theme="nova"] .ot2-panel,
[data-theme="nova"] .kk-tablo-sar,
[data-theme="nova"] .ia-tablo-sar,
[data-theme="nova"] .ef-tablo-sar{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--elev-1);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  transition:transform var(--dur, .18s) var(--ease, ease), box-shadow var(--dur, .18s) var(--ease, ease), border-color .18s;
}
[data-theme="nova"] .card:hover,
[data-theme="nova"] .record-card:hover,
[data-theme="nova"] .kk-kpi > button:hover,
[data-theme="nova"] .mu-kpi > div:hover{
  box-shadow:var(--elev-2);
  border-color:rgba(34,211,238,.35);
  transform:translateY(-2px);
}
/* kart üst vurgu şeridi: neon gradyan ışık çizgisi */
[data-theme="nova"] .card::before{
  content:''; position:absolute; left:14px; right:14px; top:0; height:2px; border-radius:999px;
  background:linear-gradient(90deg, transparent, var(--nova-cyan), var(--nova-violet), transparent);
  opacity:.9; filter:drop-shadow(0 0 6px rgba(34,211,238,.6));
}
[data-theme="nova"] .card{position:relative; overflow:hidden; padding:var(--space-5);}
[data-theme="nova"] .modal{box-shadow:var(--elev-3); border-color:rgba(120,160,255,.26);}
[data-theme="nova"] .modal-backdrop{background:rgba(3,6,14,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);}
[data-theme="nova"] .modal-head{border-bottom:1px solid var(--line); background:linear-gradient(180deg, rgba(34,211,238,.06), transparent);}

/* ---- tipografi ---- */
[data-theme="nova"] .card-label{font-family:var(--font-body); font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted);}
[data-theme="nova"] .card-value{
  font-family:var(--font-display); font-weight:700; font-size:34px; letter-spacing:-.02em; margin-top:var(--space-2);
  background:linear-gradient(135deg, #FFFFFF 0%, #BFEFFF 55%, #C4B5FD 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none;
}
[data-theme="nova"] .modal-title,
[data-theme="nova"] .topbar-heading h1,
[data-theme="nova"] .chat-head h2,
[data-theme="nova"] h1, [data-theme="nova"] h2{font-family:var(--font-display); letter-spacing:-.02em;}
[data-theme="nova"] .topbar-heading h1{font-size:17px; font-weight:700;}
[data-theme="nova"] .topbar-sub{color:var(--ink-muted);}
[data-theme="nova"] .field label{text-transform:none; letter-spacing:0; font-size:12.5px; font-weight:600; color:var(--ink);}

/* ---- butonlar: neon gradyan birincil, cam ikincil ---- */
[data-theme="nova"] .btn,
[data-theme="nova"] .sync-btn,
[data-theme="nova"] .quick-tool-btn,
[data-theme="nova"] .icon-btn,
[data-theme="nova"] .theme-swatch{border-radius:var(--radius-sm); transition:transform var(--dur, .18s) var(--ease, ease), box-shadow var(--dur, .18s) var(--ease, ease), filter .18s;}
[data-theme="nova"] .btn-primary{
  background:linear-gradient(135deg, var(--nova-cyan), var(--nova-violet) 85%);
  color:#06101C; border:1px solid rgba(255,255,255,.18); font-weight:700;
  box-shadow:0 8px 24px -10px rgba(34,211,238,.6), 0 2px 8px -4px rgba(139,92,246,.6);
}
[data-theme="nova"] .btn-primary:hover{filter:brightness(1.08) saturate(1.1); transform:translateY(-1px); box-shadow:0 12px 30px -10px rgba(34,211,238,.7), 0 4px 12px -4px rgba(139,92,246,.7);}
[data-theme="nova"] .btn-secondary,
[data-theme="nova"] .quick-tool-btn,
[data-theme="nova"] .sync-btn{
  background:rgba(255,255,255,.04); color:var(--ink); border:1px solid var(--line);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
[data-theme="nova"] .btn-secondary:hover,
[data-theme="nova"] .quick-tool-btn:hover{border-color:rgba(34,211,238,.45); background:rgba(34,211,238,.08); box-shadow:0 0 0 1px rgba(34,211,238,.15), 0 8px 20px -14px rgba(34,211,238,.5);}

/* ---- sidebar: aktif menü ışıklı ---- */
[data-theme="nova"] .menu-item{border-radius:10px; transition:background .15s, color .15s;}
[data-theme="nova"] .menu-item.active{
  background:linear-gradient(90deg, rgba(34,211,238,.18), rgba(139,92,246,.10));
  color:#FFFFFF; box-shadow:inset 3px 0 0 var(--nova-cyan), 0 0 24px -10px rgba(34,211,238,.6);
}
[data-theme="nova"] .menu-item:hover{background:var(--sb-hover);}
[data-theme="nova"] .badge-count{background:rgba(34,211,238,.14); color:var(--nova-cyan); border:1px solid rgba(34,211,238,.28);}
[data-theme="nova"] .brand{border-bottom:1px solid var(--sb-line);}

/* ---- girdi alanları ve tablolar ---- */
[data-theme="nova"] input, [data-theme="nova"] select, [data-theme="nova"] textarea{color-scheme:dark;}
[data-theme="nova"] input:focus, [data-theme="nova"] select:focus, [data-theme="nova"] textarea:focus{box-shadow:var(--ring) !important; border-color:var(--nova-cyan) !important;}
[data-theme="nova"] table th{background:rgba(13,20,38,.9); color:var(--ink-muted); letter-spacing:.06em; font-size:11px; text-transform:uppercase;}
[data-theme="nova"] table tbody tr:hover{background:rgba(34,211,238,.06);}
[data-theme="nova"] ::selection{background:rgba(34,211,238,.35);}
[data-theme="nova"] *::-webkit-scrollbar{width:10px; height:10px;}
[data-theme="nova"] *::-webkit-scrollbar-thumb{background:rgba(120,160,255,.18); border-radius:999px; border:2px solid transparent; background-clip:padding-box;}
[data-theme="nova"] *::-webkit-scrollbar-thumb:hover{background:rgba(34,211,238,.35); background-clip:padding-box;}

/* ---- rozetler / durum renkleri: ışıklı ---- */
[data-theme="nova"] .kk-rozet, [data-theme="nova"] .ia-rozet, [data-theme="nova"] .ot2-pill{box-shadow:0 0 14px -6px var(--r, rgba(34,211,238,.6));}
[data-theme="nova"] .sync-toast{background:rgba(13,20,38,.92); border:1px solid rgba(34,211,238,.35); color:var(--ink); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 12px 40px -14px rgba(34,211,238,.5);}

/* ---- erişilebilirlik / düşük güç: hareket azaltma tercihi ---- */
@media (prefers-reduced-motion: reduce){
  [data-theme="nova"] .card:hover, [data-theme="nova"] .record-card:hover, [data-theme="nova"] .btn-primary:hover{transform:none;}
}

/* ---- Mobil: kutular ekranı doldursun (kullanıcı isteği 2026-10-06: "mobil versiyonda
   kutucukların ekranı tam kaplamasını istiyorum, kenarlarındaki boşluk fazla").
   Tema kuralları (ör. Nova: .card iç boşluğu --space-5 = 26px, .content 20px) 2026-09-13'teki
   mobil sıkıştırmayı (.card 12px 14px) özgüllükle eziyordu. html[data-theme] öneki her
   temanın [data-theme="…"] .card kuralından baskın gelir. ---- */
/* ---- Mobil: üst çubuk yapışkan ve OPAK (kullanıcı 2026-10-09: "sayfanın en üst tarafında bir buğuluk").
   iPhone Safari (iOS 26) durum çubuğunun altından geçen içeriği bulanıklaştırıp en üstteki rengi oraya yayıyor;
   kaydırınca kartlar/düğmeler saatin altında buğulu görünüyordu. Üst çubuk en üstte sabit ve opak kalınca
   durum çubuğu bölgesi çubuğun düz rengini alır. Yarı saydam tema yüzeyi (Nova cam) düz zeminin üstüne
   bindirilir → görünüm aynı, arkası görünmez. z-index: menü çekmecesi (110), arka perde (100) ve
   pencerelerin (≥200) altında; sayfa içi öğelerin üstünde. Tüm panel sayfalarında üst çubuk .main'in ilk çocuğu
   (ölçüldü: 40 sayfa, 70 px; Siparişler iki satır 101 px). ---- */
@media (max-width:840px){
  html[data-theme] .main > .topbar{position:sticky; top:0; z-index:45; background:linear-gradient(var(--surface), var(--surface)), var(--bg);}
}
@media (max-width:640px){
  html[data-theme] .content{padding-left:6px; padding-right:6px;}
  html[data-theme] .topbar{padding-left:6px; padding-right:6px;}
  html[data-theme] .card{padding:14px 12px;}
}

/* ==== MOBİL DÜZEN DESENİ (2026-10-09) — araç çubukları, sekmeler, süzgeçler ====
   Kullanıcı (iPhone): "buton taşmalarından dolayı sayfa düzensiz görünüyor". Sorun: araç çubukları
   flex-wrap ile farklı genişlikte düğmeleri 2-3 satıra dağıtıyor, satır sonlarında boşluk kalıyordu.
   Tek kaynak burası (themes.css 40 panel sayfasının hepsinde ve index.html'de yüklü; shared.css
   index.html'de yüklü değil). Sınıf temelli ve isteğe bağlı: sayfa kabına sınıfı ekler, ≤640 px'te devreye
   girer, masaüstü hiç değişmez. Ayrıntı + örnekler: scratchpad mt/desen.md.
   html[data-theme] öneki: sayfa içi kuralları (.x-toolbar .btn gibi 0,2,0) ezmek için.

   .mobil-arac        → eşit sütunlu düzen (varsayılan 2 sütun). flex + flex-basis: gizli (display:none)
                        öğeler sayılmaz, son satırdaki öğeler satırı eşit paylaşır → satır sonunda boşluk kalmaz.
     .ma-3 / .ma-4    → 3 ya da 4 sütun (4: yalnız ikon/kısa etiketli düğmeler için)
     > .ma-tam        → öğe tam genişlik (birincil eylem); .ma-once ile ilk sıraya alınır
     > .ma-gizle      → mobilde gizlenir (masaüstüne özgü ikincil eylem)
   .mobil-sekme       → tek satır, yatay kaydırmalı sekme/görünüm çubuğu, kaydırma çubuğu gizli, sağ kenar solması
   .mobil-suzgec      → süzgeç satırı 2 sütun ızgara; > .ms-tam tam genişlik (arama kutusu); girdiler 16 px (iOS yakınlaştırmaz)
   [data-kisa="…"]    → mobilde düğme metni yerine kısa etiket (ikon korunur; font-size:0 + ::after).
                        Düğmenin ikonu px ile boyutlu olmalı (em değil). data-kisa="" → yalnız ikon (title/aria-label şart). */
@media (max-width:640px){
  html[data-theme] .mobil-arac{display:flex; flex-wrap:wrap; align-items:stretch; justify-content:flex-start; gap:6px; width:100%;}
  html[data-theme] .mobil-arac > *{
    flex:1 1 calc((100% - 6px) / 2); min-width:0; max-width:none; margin:0;
    min-height:40px; box-sizing:border-box;
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding-left:8px; padding-right:8px; white-space:nowrap; text-align:center;
  }
  html[data-theme] .mobil-arac.ma-3 > *{flex-basis:calc((100% - 12px) / 3);}
  html[data-theme] .mobil-arac.ma-4 > *{flex-basis:calc((100% - 18px) / 4);}
  html[data-theme] .mobil-arac > .ma-tam{flex-basis:100%;}
  html[data-theme] .mobil-arac > .ma-once{order:-1;}
  html[data-theme] .mobil-arac > .ma-gizle,
  html[data-theme] :is(.mobil-arac, .mobil-sekme, .mobil-suzgec) > [hidden]{display:none !important;}
  /* bilgi şeridi (metin + düğmeler aynı kapta, ör. "Kapsam: … [Nasıl çalışır?] [Şimdi tara]"): metin/rozet
     gibi etkileşimsiz çocuk tam satır olur, boş ayırıcı (.bosluk, boş span) gizlenir, düğmeler ızgaraya girer */
  html[data-theme] .mobil-arac > :not(button, a, select, input, textarea, label, .btn, .seg, [role=group], [role=tablist], [role=button], .ma-hucre){
    flex-basis:100%; justify-content:flex-start; text-align:left; white-space:normal; min-height:0; padding-left:0; padding-right:0; display:block;
  }
  html[data-theme] .mobil-arac > :is(.bosluk, .spacer, .ara-bosluk):not(.ma-hucre),
  html[data-theme] .mobil-arac > span:empty, html[data-theme] .mobil-arac > div:empty{display:none !important;}
  html[data-theme] .mobil-arac > * > svg{flex:none;}
  html[data-theme] .mobil-arac > a{text-decoration:none;}
  /* araç çubuğu içindeki bölümlü seçici / görünüm düğmeleri: hücreyi doldurur, düğmeler eşit */
  html[data-theme] .mobil-arac > :is(.seg, [role=group], [role=tablist]){display:flex; flex-wrap:nowrap; padding:2px; gap:2px;}
  html[data-theme] .mobil-arac > :is(.seg, [role=group], [role=tablist]) > *{flex:1 1 0; min-width:0; min-height:34px; display:inline-flex; align-items:center; justify-content:center; padding-left:4px; padding-right:4px;}
  html[data-theme] .mobil-arac > :is(input, select){font-size:16px;}

  html[data-theme] .mobil-sekme{
    display:flex; flex-wrap:nowrap !important; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; max-width:100%; gap:4px;
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 24px), transparent);
            mask-image:linear-gradient(to right, #000 calc(100% - 24px), transparent);
    padding-right:20px;
  }
  html[data-theme] .mobil-sekme::-webkit-scrollbar{display:none;}
  html[data-theme] .mobil-sekme > *{flex:none; white-space:nowrap; min-height:40px; display:inline-flex; align-items:center;}

  html[data-theme] .mobil-suzgec{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; width:100%; align-items:end;}
  html[data-theme] .mobil-suzgec > *{min-width:0; width:100%; max-width:none; margin:0; box-sizing:border-box;}
  html[data-theme] .mobil-suzgec > .ms-tam, html[data-theme] .mobil-suzgec > :last-child:nth-child(odd):not(.ms-yarim){grid-column:1 / -1;}
  html[data-theme] .mobil-suzgec :is(input:not([type=checkbox]):not([type=radio]), select, textarea){width:100%; min-width:0; min-height:40px; font-size:16px; box-sizing:border-box;}
  html[data-theme] .mobil-suzgec > :is(button, .btn, a){min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:6px;}

  /* üst çubuk ikon düğmeleri 36 px: görünüm/yerleşim aynı kalsın diye dokunma alanı görünmez kenarla 40 px'e
     büyütülür (üst çubuk 360 px'te dolu; düğmeyi büyütmek arama kutusunu daraltırdı).
     inset dolgu kutusuna göredir: 1 px kenarlıkla -2px yalnız 38 px veriyordu (2026-10-11 elementFromPoint ölçümü) → -3px = 40 px. */
  html[data-theme] .topbar .icon-btn::before{content:''; position:absolute; inset:-3px; border-radius:inherit;}

  /* kısa etiket */
  html[data-theme] [data-kisa]:is(.mobil-arac *, .mobil-sekme *, .mobil-suzgec *, .mobil-kisa){font-size:0 !important; letter-spacing:0; gap:0 !important;}
  html[data-theme] [data-kisa]:is(.mobil-arac *, .mobil-sekme *, .mobil-suzgec *, .mobil-kisa)::after{content:attr(data-kisa); font-size:13px; line-height:1.2; margin-left:6px;}
  html[data-theme] [data-kisa=""]:is(.mobil-arac *, .mobil-sekme *, .mobil-suzgec *, .mobil-kisa)::after{display:none;}
  html[data-theme] [data-kisa]:is(.mobil-arac *, .mobil-sekme *, .mobil-suzgec *, .mobil-kisa) > :not(svg):not(.kt-sayac):not([class*=sayac]):not([class*=rozet]){display:none;}
  html[data-theme] [data-kisa]:is(.mobil-arac *, .mobil-sekme *, .mobil-suzgec *, .mobil-kisa) > :is(.kt-sayac, [class*=sayac], [class*=rozet]){font-size:10px; order:2;}
  html[data-theme] [data-kisa]:is(.mobil-arac *, .mobil-sekme *, .mobil-suzgec *, .mobil-kisa) > svg{width:16px; height:16px;}
}

/* ==== A DOĞRULAMA DÜZELTMELERİ (2026-10-09) — pencere alt satırı, dokunma alanları, kaydırmalı tablo ====
   Bulgular 390 px ölçümünden: pencere kapat düğmesi 176/176 pencerede 32x32, alt satır düğmeleri 38 px ve
   farklı genişlikte düğmeler sağa yaslı düzensiz iki satıra kırılıyordu; <a class="btn"> metni altı çiziliydi;
   kaydırmalı ana tablolarda sağda devam eden sütunların ipucu yoktu. */
a.btn, a.btn:hover{text-decoration:none;}
@media (max-width:640px){
  /* pencere alt eylem satırı: .mobil-arac gibi eşit 2 sütun; tek kalan son düğme satırı doldurur.
     Durum yazısı (save-status vb.) tam satır, boşken gizli. Satır içi display:none düğmeler gizli kalır. */
  html[data-theme] .modal-foot{justify-content:flex-start; gap:6px;}
  html[data-theme] .modal-foot > :is(button, a, .btn){
    flex:1 1 calc((100% - 6px) / 2); min-width:0; min-height:40px; margin-left:0; margin-right:0; box-sizing:border-box;
    text-align:center;
  }
  /* display'e dokunulmaz (sınıfla gizlenen düğmeler gizli kalsın); yalnız <a> düğmeyi dikeyde ortalamak için */
  html[data-theme] .modal-foot > a.btn:not([hidden]){display:inline-flex; align-items:center; justify-content:center; gap:6px;}
  html[data-theme] .modal-foot > :is(button, a, .btn)[hidden]{display:none !important;}
  html[data-theme] .modal-foot > :not(button, a, .btn){flex:1 1 100%; min-width:0; text-align:left;}
  html[data-theme] .modal-foot > :is(span, div):empty{display:none;}
  /* kapat düğmesi görünümü aynı (32x32), dokunma alanı görünmez kenarla 44 px (1 px kenarlık: dolgu kutusundan -7px; 2026-10-30, önce 40) */
  html[data-theme] .modal-close{position:relative;}
  html[data-theme] .modal-close::before{content:''; position:absolute; inset:-7px; border-radius:inherit;}
  /* üst çubuk menü düğmesi 38x38 → dokunma alanı 40 px (yerleşim değişmez; 1 px kenarlık: dolgu kutusundan -2px) */
  html[data-theme] .menu-toggle{position:relative;}
  html[data-theme] .menu-toggle::before{content:''; position:absolute; inset:-2px; border-radius:inherit;}
  /* üst çubuktaki komut paleti (.kp-tetik) ve İşler (.is-tetik) tetikleri telefonda 36x36 ve her sayfada var:
     görünüm aynı, dokunma alanı görünmez kenarla 40 px (2026-10-11 mobil tarama; .icon-btn ile aynı yöntem) */
  html[data-theme] .topbar :is(.kp-tetik, .is-tetik){position:relative;}
  html[data-theme] .topbar :is(.kp-tetik, .is-tetik)::before{content:''; position:absolute; inset:-3px; border-radius:inherit;}

  /* .mobil-tablo: yatay kaydırmalı tablo kabı. shell.js sağda/solda gizli içerik varken .mt-sag/.mt-sol
     ekler; o kenar solarak "devamı var" ipucu verir (kaydırma sonunda solma kalkar, son sütun kesilmez). */
  html[data-theme] .mobil-tablo{overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;}
  html[data-theme] .mobil-tablo.mt-sag{
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  html[data-theme] .mobil-tablo.mt-sol{
    -webkit-mask-image:linear-gradient(to left, #000 calc(100% - 20px), transparent);
            mask-image:linear-gradient(to left, #000 calc(100% - 20px), transparent);
  }
  html[data-theme] .mobil-tablo.mt-sol.mt-sag{
    -webkit-mask-image:linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 28px), transparent);
            mask-image:linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 28px), transparent);
  }
}
/* satır içi metin ikonu (emoji yerine; shell.js WS_SATIR_*) — A doğrulaması 2026-10-09 */
.ws-satir-ikon{width:1em; height:1em; flex:none; vertical-align:-.14em; margin-right:.3em; display:inline-block;}
@media (max-width:640px){
  /* katlanır süzgeç paneli (ürünler, iade talepleri…): selectler 36 px'ti → 40 px, 16 px yazı (iOS yakınlaştırmaz) */
  html[data-theme] .filter-body .field :is(select, input:not([type=checkbox]):not([type=radio])){min-height:40px; font-size:16px;}
}

/* ==== TESLİM SÜRESİ TAHMİNİ (2026-10-10) — shell.js TeslimTahmini çizicisi + Kargo Kontrol "Teslim süreleri" sekmesi ====
   Ton: --tt-r. Metin rengi ton + mürekkep karışımı (--tt-p: mavi %60, yeşil/amber %45): açık temada koyulaşır, koyu/Nova temada
   açılır. Oranlar ölçüldü (2026-10-10): nova, studio, light, dark, kontrast ve modern temalarında rozet metni ve "az veri" en az 4,5:1.
   Aşama: kargoda/hazırlanıyor mavi · dağıtımda yeşil · gecikti amber · düşük güven soluk + kesik kenar (sözleşme §8.2).
   Güven göstergesi: 3 çubuk (düşük 1 · orta 2 · yüksek 3 dolu). Mobil (en çok 640 px): rozet satır kırar, sekme tablosu kart
   listesine döner, kenar 6 px (.content kuralı). Alt tablo açılınca sayfa kaydırılmaz. */
.tt-rozet{--tt-r:#3b82f6; --tt-p:60%; display:inline-flex; align-items:center; gap:5px; max-width:100%; min-width:0; box-sizing:border-box; padding:3px 9px;
  border-radius:999px; font-size:11px; font-weight:700; line-height:1.25; white-space:nowrap; vertical-align:middle; font-variant-numeric:tabular-nums;
  color:color-mix(in srgb, var(--tt-r) var(--tt-p), var(--ink)); background:color-mix(in srgb, var(--tt-r) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--tt-r) 36%, transparent);}
.tt-rozet > svg{width:12px; height:12px; flex:none;}
.tt-rozet .tt-metin{min-width:0; overflow:hidden; text-overflow:ellipsis;}
.tt-rozet.dagitimda, .tt-rozet.teslim{--tt-r:var(--good); --tt-p:45%;}
.tt-rozet.gecikti, .tt-rozet.teslim.gec{--tt-r:var(--warn); --tt-p:45%;}
.tt-rozet.teslim.erken{--tt-r:#3b82f6; --tt-p:60%;}
/* düşük güven: soluk (opaklık .75) + kesik kenar; metin neredeyse mürekkep (%10 ton) ki opaklıktan sonra da 4,5:1 kalsın */
.tt-rozet.dusuk{opacity:.75; border-style:dashed; color:color-mix(in srgb, var(--tt-r) 10%, var(--ink));}
/* "az veri": 9,5 px — metin mürekkep rengi, zemin hafif mürekkep tonu (ton rengini almaz; düşük güven opaklığında da okunur) */
.tt-az{font-style:normal; font-size:9.5px; font-weight:800; letter-spacing:.02em; line-height:1.3; padding:1px 6px; border-radius:999px; flex:none;
  color:var(--ink); background:color-mix(in srgb, var(--ink) 8%, transparent);}
/* pencerelerde (hzl "Tahmini Teslim" alanı, detay) rozet metni üç noktayla kesilmez, satır kırar */
.dp-alan .tt-rozet, .tt-detay .tt-rozet{white-space:normal; border-radius:14px;}
.dp-alan .tt-rozet .tt-metin, .tt-detay .tt-rozet .tt-metin{overflow:visible; text-overflow:clip; overflow-wrap:anywhere;}
.tt-guven{display:inline-flex; align-items:flex-end; gap:1.5px; height:11px; flex:none;}
.tt-guven i{display:block; width:3px; border-radius:1px; background:color-mix(in srgb, currentColor 24%, transparent);}
.tt-guven i:nth-child(1){height:4px;} .tt-guven i:nth-child(2){height:7.5px;} .tt-guven i:nth-child(3){height:11px;}
.tt-guven.g-dusuk i:nth-child(1), .tt-guven.g-orta i:nth-child(-n+2), .tt-guven.g-yuksek i{background:currentColor;}
.tt-guven-sar{display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-size:12px; color:var(--ink);}
.tt-guven-sar .tt-guven{color:color-mix(in srgb, var(--good) 72%, var(--ink));}
.tt-guven-sar.g-orta .tt-guven{color:color-mix(in srgb, #3b82f6 72%, var(--ink));}
.tt-guven-sar.g-dusuk .tt-guven{color:color-mix(in srgb, var(--warn) 72%, var(--ink));}
/* sipariş kartı: rozet sipariş adı sütununun içinde, adın ALTINDA kendi satırında (kronoloji şeridinin yüksekliğindeki boşluğa
   oturur). Kronolojinin yanında flex:none dururken 1200-1440 px'te adı iki satıra indiriyor, şeridi daraltıp etiketlerini
   bindiriyordu (inceleme 2026-10-10). Ad sütunundan geniş olamaz; dar sütunda metin kesilmez, mobilde satır kırar. */
.order-name > .tt-rozet{display:flex; width:fit-content; margin-top:5px;}
/* detay penceresi (siparisler.html #odTeslimTahmini) */
.od-teslim{margin:-4px 0 12px; min-width:0;}
/* termin satırı görünürken onunla tek grup gibi dursun (.modal-body aralığı 18 px + termin alt boşluğu 12 px) */
.od-termin:not([hidden]) + .od-teslim{margin-top:-24px;}
.od-teslim[hidden], .tt-detay [hidden]{display:none !important;}
.tt-detay{display:flex; flex-direction:column; gap:5px; min-width:0;}
.tt-detay .tt-ust{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; min-width:0;}
.tt-detay .tt-ust > .tt-rozet{font-size:12.5px; padding:5px 12px; gap:6px;}
.tt-detay .tt-ust > .tt-rozet > svg{width:14px; height:14px;}
.tt-gunler{display:inline-flex; flex-wrap:wrap; gap:4px; min-width:0;}
.tt-gun{display:inline-flex; align-items:baseline; gap:4px; font-size:11.5px; line-height:1.3; padding:3px 8px; border-radius:7px; white-space:nowrap;
  border:1px solid var(--line); color:color-mix(in srgb, var(--ink-muted) 60%, var(--ink)); background:var(--surface-2); font-variant-numeric:tabular-nums;}
.tt-gun b{font-weight:700; color:var(--ink);}
.tt-gun.olasi{color:var(--ink); border-color:color-mix(in srgb, #3b82f6 60%, transparent); background:color-mix(in srgb, #3b82f6 14%, var(--surface));
  box-shadow:0 0 0 2px color-mix(in srgb, #3b82f6 16%, transparent);}
.tt-detay.tt-dagitimda .tt-gun.olasi{border-color:color-mix(in srgb, var(--good) 60%, transparent); background:color-mix(in srgb, var(--good) 14%, var(--surface)); box-shadow:none;}
.tt-gun.tatil{opacity:.55;}
.tt-aciklama{font-size:12.5px; line-height:1.45; color:var(--ink); overflow-wrap:anywhere;}
.tt-soluk{font-size:11.5px; line-height:1.4; color:var(--ink-muted); overflow-wrap:anywhere;}
.tt-hzl-alt{margin-top:-4px;}
.tt-gecikme{font-size:12px; line-height:1.45; color:color-mix(in srgb, var(--warn) 45%, var(--ink)); overflow-wrap:anywhere;}
.tt-link{color:var(--accent); font-weight:700; text-decoration:underline; text-underline-offset:2px;}

/* ---- Kargo Kontrol → Teslim süreleri (.ts-*) ---- */
#kkPanelTs [hidden], #tsAyarModal [hidden], .ts-uyari[hidden], .ts-ptt[hidden], .ts-tani[hidden]{display:none !important;}
#kkPanelTs:not([hidden]){display:flex; flex-direction:column; gap:10px;}
.ts-seg{display:inline-flex; align-items:stretch; padding:2px; gap:2px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line); flex:none;}
.ts-seg button{appearance:none; border:0; background:transparent; color:color-mix(in srgb, var(--ink-muted) 60%, var(--ink)); font:inherit; font-size:12.5px; font-weight:700; padding:6px 16px;
  border-radius:8px; cursor:pointer; transition:background var(--dur, .15s) var(--ease, ease), color var(--dur, .15s) var(--ease, ease);}
.ts-seg button:hover{color:var(--ink);}
.ts-seg button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--elev-1, 0 1px 2px rgba(0,0,0,.18));}
.ts-ara{flex:0 1 200px; min-width:0;}
/* sıralama seçicisi yalnız mobilde (tablo kart listesine dönünce başlık düğmeleri gizlenir); 640 px altında .mobil-arac görünür yapar */
.ts-sira-sec{display:none;}
.ts-meta{font-size:12.5px; color:var(--ink-muted); min-width:0;}
/* üst şerit (masaüstü): meta metni kendi satırına iner, firma seçici + arama + düğmeler tek satırda kalır (eskiden 1280-1440 px'te
   "Ayarlar" / "Şimdi hesapla" tek başına alt satıra düşüyordu). 640 px altında .mobil-arac düzeni geçerli. */
@media (min-width:641px){
  #tsUst > .ts-meta{order:9; flex-basis:100%;}
}
.ts-ozet{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px;}
.ts-kutu{background:var(--surface); border:1px solid var(--line); border-top:4px solid var(--k, #3b82f6); border-radius:var(--radius-lg, 14px); padding:11px 13px;
  display:flex; flex-direction:column; gap:3px; min-width:0; box-shadow:var(--elev-1, none);}
.ts-kutu .l{font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-muted); overflow-wrap:anywhere;}
.ts-kutu .v{font-size:22px; font-weight:800; line-height:1.15; font-variant-numeric:tabular-nums; overflow-wrap:anywhere;}
.ts-kutu .v small{font-size:13px; font-weight:700; color:var(--ink-muted);}
.ts-kutu .a{font-size:11.5px; line-height:1.35; color:var(--ink-muted); overflow-wrap:anywhere;}
.ts-uyari{display:flex; align-items:flex-start; gap:8px; padding:9px 12px; border-radius:12px; font-size:12.5px; line-height:1.45; overflow-wrap:anywhere;
  background:color-mix(in srgb, var(--warn) 11%, transparent); border:1px solid color-mix(in srgb, var(--warn) 45%, transparent); color:var(--ink);}
.ts-uyari.kirmizi{background:color-mix(in srgb, var(--critical) 11%, transparent); border-color:color-mix(in srgb, var(--critical) 50%, transparent);}
.ts-uyari.bilgi{background:color-mix(in srgb, #3b82f6 9%, transparent); border-color:color-mix(in srgb, #3b82f6 38%, transparent);}
.ts-uyari > svg{width:16px; height:16px; flex:none; margin-top:1px; color:color-mix(in srgb, var(--warn) 72%, var(--ink));}
.ts-uyari.kirmizi > svg{color:var(--critical);} .ts-uyari.bilgi > svg{color:#3b82f6;}
.ts-uyari > div{min-width:0;}
.ts-ptt{display:flex; flex-direction:column; gap:8px; padding:11px 13px; border-radius:var(--radius-lg, 14px); background:var(--surface); border:1px solid var(--line);
  border-left:4px solid #8b5cf6; box-shadow:var(--elev-1, none);}
.ts-ptt-ust{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;}
.ts-ptt-ust b{font-size:12.5px;}
.ts-ptt-metin{font-size:12.5px; line-height:1.45; color:var(--ink); overflow-wrap:anywhere; flex:1 1 320px; min-width:0;}
.ts-ptt .btn{padding:6px 12px; font-size:12.5px;}
.ts-ilerleme{height:7px; border-radius:999px; background:var(--surface-2); overflow:hidden;}
.ts-ilerleme > i{display:block; height:100%; border-radius:999px; background:#8b5cf6;}
.ts-tablo-sar{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg, 14px); overflow:auto; box-shadow:var(--elev-1, none);}
.kk-tablo.ts-tablo{min-width:900px;}
.kk-tablo.ts-tablo th button{appearance:none; border:0; background:transparent; padding:0; font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit;
  cursor:pointer; display:inline-flex; align-items:center; gap:4px; white-space:nowrap;}
.kk-tablo.ts-tablo th button:hover{color:var(--ink);}
.kk-tablo.ts-tablo th[aria-sort] button{color:var(--ink);}
.kk-tablo.ts-tablo th .ts-yon{display:inline-block; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor;}
.kk-tablo.ts-tablo th[aria-sort="ascending"] .ts-yon{transform:rotate(180deg);}
.kk-tablo.ts-tablo th:not([aria-sort]) .ts-yon{opacity:0;}
.kk-tablo.ts-tablo th.sayi button{justify-content:flex-end;}
.kk-tablo.ts-tablo .ts-ac{appearance:none; border:0; background:transparent; padding:0; font:inherit; font-weight:700; color:var(--ink); cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; text-align:left;}
.kk-tablo.ts-tablo .ts-ac::before{content:''; width:6px; height:6px; border-right:2px solid var(--ink-muted); border-bottom:2px solid var(--ink-muted);
  transform:rotate(-45deg); transition:transform var(--dur, .15s) var(--ease, ease); flex:none;}
.kk-tablo.ts-tablo .ts-ac[aria-expanded="true"]::before{transform:rotate(45deg);}
.kk-tablo.ts-tablo .ts-ac:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;}
.kk-tablo.ts-tablo tr.ts-acik > td{background:color-mix(in srgb, var(--accent) 6%, transparent);}
.kk-tablo.ts-tablo tr.ts-alt-satir{cursor:default;}
.kk-tablo.ts-tablo tr.ts-alt-satir:hover{background:transparent;}
.kk-tablo.ts-tablo tr.ts-alt-satir > td{padding:4px 12px 12px 30px; white-space:normal; background:color-mix(in srgb, var(--accent) 4%, transparent);}
.ts-ilce-not{font-size:12px; color:var(--ink-muted); padding:6px 0;}
.kk-tablo.ts-ilce-tablo{min-width:0; width:100%; font-size:12px; background:var(--surface); border:1px solid var(--line-soft); border-radius:10px; border-collapse:separate; border-spacing:0;}
.kk-tablo.ts-ilce-tablo th{position:static; font-size:10.5px; padding:7px 10px;}
.kk-tablo.ts-ilce-tablo td{padding:6px 10px;}
.kk-tablo.ts-ilce-tablo tbody tr{cursor:default;}
.ts-aralik{display:inline-flex; align-items:center; gap:8px; white-space:nowrap;}
.ts-aralik b{font-variant-numeric:tabular-nums; min-width:26px;}
.ts-iz{--ts-hucre:6; position:relative; display:block; width:84px; height:8px; flex:none; border-radius:999px;
  background:repeating-linear-gradient(to right, var(--surface-2) 0 calc(100% / var(--ts-hucre) - 1px), var(--line) calc(100% / var(--ts-hucre) - 1px) calc(100% / var(--ts-hucre)));
  box-shadow:inset 0 0 0 1px var(--line);}
.ts-bant{position:absolute; top:0; bottom:0; border-radius:999px; background:color-mix(in srgb, #3b82f6 50%, transparent);}
.ts-nokta{position:absolute; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:color-mix(in srgb, #3b82f6 80%, var(--ink));
  box-shadow:0 0 0 2px var(--surface);}
.ts-oran{display:inline-flex; align-items:center; gap:7px; white-space:nowrap; font-variant-numeric:tabular-nums;}
.ts-oran-iz{display:block; width:48px; height:6px; border-radius:999px; background:var(--surface-2); overflow:hidden; box-shadow:inset 0 0 0 1px var(--line);}
.ts-oran-iz > i{display:block; height:100%; background:color-mix(in srgb, var(--good) 70%, transparent);}
.ts-oran > span:last-child{min-width:34px; text-align:right;}
.ts-fark{font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap;}
.ts-fark.arti{color:color-mix(in srgb, var(--warn) 45%, var(--ink));} .ts-fark.eksi{color:color-mix(in srgb, var(--good) 45%, var(--ink));} .ts-fark.sifir{color:var(--ink-muted); font-weight:600;}
.ts-yok{color:var(--ink-muted);}
.ts-bos{padding:26px 16px; text-align:center; color:var(--ink-muted); font-size:13px; line-height:1.5;}
.ts-not{margin:0; font-size:12px; line-height:1.5; color:var(--ink-muted); overflow-wrap:anywhere;}
.ts-not b{color:var(--ink);}
.ts-tani{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg, 14px); box-shadow:var(--elev-1, none);}
.ts-tani > summary{cursor:pointer; padding:10px 13px; font-size:12.5px; font-weight:700; color:var(--ink-muted); list-style-position:inside;}
.ts-tani[open] > summary{border-bottom:1px solid var(--line);}
.ts-tani-ic{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:10px; padding:12px 13px;}
.ts-tani-blok{min-width:0; border:1px solid var(--line-soft); border-radius:10px; padding:8px 10px; background:var(--surface-2);}
.ts-tani-blok h4{margin:0 0 6px; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-muted);}
.ts-tani-blok dl{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 10px; margin:0; font-size:12px;}
.ts-tani-blok dt{color:var(--ink-muted); overflow-wrap:anywhere; min-width:0;}
.ts-tani-blok dd{margin:0; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; max-width:180px;}
.ts-tani-ic > .ts-uyari{grid-column:1 / -1;}
@media (max-width:1100px){
  .ts-ozet{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width:640px){
  .tt-rozet{white-space:normal; max-width:100%;}
  .tt-rozet .tt-metin{overflow:visible; text-overflow:clip; overflow-wrap:anywhere;}
  .tt-detay .tt-ust > .tt-rozet{font-size:12px; padding:4px 10px;}
  .ts-ozet{gap:6px;}
  .ts-kutu{padding:9px 10px;}
  .ts-kutu .v{font-size:19px;}
  .ts-ptt-metin{flex-basis:100%;}
  #tsUst > .ts-ara, #tsUst > .ts-sira-sec{text-align:left; justify-content:flex-start;}
  .kk-tablo.ts-tablo > tbody > tr.ts-acik{background:color-mix(in srgb, var(--accent) 7%, var(--surface));}
  .kk-tablo.ts-tablo > tbody > tr.ts-acik > td{background:transparent;}
  /* tablo, kart listesine döner */
  .ts-tablo-sar{overflow:visible; background:transparent; border:0; box-shadow:none; border-radius:0;}
  .kk-tablo.ts-tablo, .kk-tablo.ts-tablo > tbody{display:block; min-width:0; width:100%;}
  .kk-tablo.ts-tablo > thead{display:none;}
  .kk-tablo.ts-tablo > tbody > tr{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px 10px; padding:10px 12px; margin-bottom:6px;
    background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--elev-1, none);}
  .kk-tablo.ts-tablo > tbody > tr > td{display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:0; border:0; white-space:normal; min-width:0; text-align:left;}
  .kk-tablo.ts-tablo > tbody > tr > td::before{content:attr(data-l); font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-muted);}
  .kk-tablo.ts-tablo > tbody > tr > td.ts-ad{grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between; gap:8px;}
  .kk-tablo.ts-tablo > tbody > tr > td.ts-ad::before{display:none;}
  .kk-tablo.ts-tablo .ts-ac{min-height:36px;}
  .kk-tablo.ts-tablo > tbody > tr.ts-alt-satir{display:block; padding:0 0 4px 10px; margin-top:-2px; background:transparent; border:0; box-shadow:none;}
  .kk-tablo.ts-tablo > tbody > tr.ts-alt-satir > td{display:block; padding:0; background:transparent;}
  .kk-tablo.ts-tablo > tbody > tr.ts-alt-satir > td::before{display:none;}
  .kk-tablo.ts-tablo > tbody > tr > td.ts-bos-hucre{grid-column:1 / -1;}
  .kk-tablo.ts-tablo > tbody > tr > td.ts-bos-hucre::before{display:none;}
  .kk-tablo.ts-ilce-tablo, .kk-tablo.ts-ilce-tablo > tbody{display:block; border:0; background:transparent;}
  .kk-tablo.ts-ilce-tablo > thead{display:none;}
  .kk-tablo.ts-ilce-tablo > tbody > tr{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:4px 8px; padding:8px 10px; margin-top:6px;
    background:var(--surface-2); border:1px solid var(--line-soft); border-radius:10px;}
  .kk-tablo.ts-ilce-tablo > tbody > tr > td{display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:0; border:0; white-space:normal; min-width:0; text-align:left;}
  .kk-tablo.ts-ilce-tablo > tbody > tr > td::before{content:attr(data-l); font-size:9.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-muted);}
  .kk-tablo.ts-ilce-tablo > tbody > tr > td.ts-ad{grid-column:1 / -1; font-weight:700;}
  .kk-tablo.ts-ilce-tablo > tbody > tr > td.ts-ad::before{display:none;}
  .ts-iz{width:64px;}
  .ts-tani-ic{grid-template-columns:1fr; padding:10px;}
}