/* ===========================================================================
   Axion Bayi — Tasarım Sistemi (Claude Design token seti)
   Self-host IBM Plex Sans/Mono + light/dark token'lar + bileşen katmanı.
   =========================================================================== */

/* --- Fontlar (self-host, dış CDN yok) ------------------------------------ */
@font-face { font-family:'IBM Plex Sans'; src:url("../fonts/IBMPlexSans-Regular.5aaadb685d3c.woff2") format('woff2');  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Sans'; src:url("../fonts/IBMPlexSans-Medium.02ec16345450.woff2") format('woff2');   font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Sans'; src:url("../fonts/IBMPlexSans-SemiBold.51d76d33ef85.woff2") format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url("../fonts/IBMPlexMono-Regular.b51685c998a0.woff2") format('woff2');  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url("../fonts/IBMPlexMono-Medium.91abacd323ba.woff2") format('woff2');   font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url("../fonts/IBMPlexMono-SemiBold.7d69bd02da7b.woff2") format('woff2'); font-weight:600; font-style:normal; font-display:swap; }

/* --- LIGHT (varsayılan) --------------------------------------------------- */
:root {
  --font-sans:'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --radius-sm:4px; --radius:6px; --radius-lg:10px;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px;
  --row-py:10px; --card-pad:20px;
  --sidebar-w:240px; --topbar-h:56px;

  color-scheme:light;

  --bg:#F3F3F1; --surface:#FFFFFF; --surface-2:#F8F8F7; --surface-3:#EDEDEA;
  --border:#E3E3E0; --border-strong:#C7C7C3;
  --text:#1B1B19; --text-2:#5B5B57; --text-3:#8C8C87;

  /* primary = ACCENT (data-accent) tarafından belirlenir; varsayılan MAVI (light).
     data-accent yoksa (JS kapalı) bu değerler geçerli. Turuncu primary kaldırıldı. */
  --primary:#2D6CA8; --primary-hover:#245A8E; --primary-fg:#FFFFFF;
  --primary-soft:#E7F0FA; --primary-text:#28619A;

  --success:#1A7F37; --success-soft:#E2F2E7; --success-text:#156C2E;
  --danger:#C22F2F;  --danger-soft:#FBE9E9;  --danger-text:#B32424;
  --warning:#9A6700; --warning-soft:#FAF0D7; --warning-text:#7E5400;
  --info:#2166B0;    --info-soft:#E7F0FA;    --info-text:#1D5C9F;

  /* Yaşlandırma ısı kovası '61-90' (Cari Bakiye modalı). Sarı ile kırmızı
     ARASINDAKİ tek ara ton; primary DEĞİLDİR, başka hiçbir yerde kullanılmaz. */
  --yas-turuncu-soft:#F9E4D3; --yas-turuncu-text:#9C4A15;

  --shadow-sm:0 1px 2px rgba(20,20,18,.06);
  --shadow:0 4px 14px rgba(20,20,18,.08);
  --shadow-lg:0 16px 40px rgba(20,20,18,.18);
}

/* --- DARK ------------------------------------------------------------------ */
html[data-theme="dark"] {
  color-scheme:dark;

  --bg:#161615; --surface:#1E1E1C; --surface-2:#262624; --surface-3:#2F2F2C;
  --border:#383835; --border-strong:#4C4C48;
  --text:#EDEDEA; --text-2:#ACACA6; --text-3:#7D7D77;

  /* primary = ACCENT (data-accent); varsayılan MAVI (dark). Aşağıdaki accent
     kuralları kırmızı/yeşil için bunu ezer (dark kombinasyonları daha spesifik). */
  --primary:#6FA9E6; --primary-hover:#8ABAEC; --primary-fg:#0E1B2A;
  --primary-soft:#1E2C3D; --primary-text:#93BFEE;

  --success:#4EC072; --success-soft:#1E3326; --success-text:#72D394;
  --danger:#EF6E6E;  --danger-soft:#3B1F1F;  --danger-text:#F59090;
  --warning:#E0AE4D; --warning-soft:#3A2F15; --warning-text:#EBC470;
  --info:#6FA9E6;    --info-soft:#1E2C3D;    --info-text:#93BFEE;

  --yas-turuncu-soft:#3A2617; --yas-turuncu-text:#E3A472;

  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 4px 14px rgba(0,0,0,.5);
  --shadow-lg:0 16px 40px rgba(0,0,0,.6);
}

/* --- ACCENT (kullanıcı seçmeli primary) -----------------------------------
   data-accent = mavi | kirmizi | yesil (varsayılan mavi). Her accent'in
   light + dark primary token seti; dark kombinasyonları [data-theme="dark"]
   ile DAHA SPESİFİK olduğundan light kuralı ezer. success/danger/warning/info
   DEĞİŞMEZ (finans renkleri her accent'te aynı). Turuncu primary kullanılmaz. */

/* MAVI (varsayılan) */
html[data-accent="mavi"] {
  --primary:#2D6CA8; --primary-hover:#245A8E; --primary-soft:#E7F0FA; --primary-text:#28619A; --primary-fg:#FFFFFF; }
html[data-theme="dark"][data-accent="mavi"] {
  --primary:#6FA9E6; --primary-hover:#8ABAEC; --primary-soft:#1E2C3D; --primary-text:#93BFEE; --primary-fg:#0E1B2A; }

/* KIRMIZI */
html[data-accent="kirmizi"] {
  --primary:#B22525; --primary-hover:#9A1E1E; --primary-soft:#F9E7E7; --primary-text:#A62121; --primary-fg:#FFFFFF; }
html[data-theme="dark"][data-accent="kirmizi"] {
  --primary:#E96A6A; --primary-hover:#EF8484; --primary-soft:#3A1D1D; --primary-text:#F09A9A; --primary-fg:#2A0E0E; }

/* YESIL */
html[data-accent="yesil"] {
  --primary:#256E38; --primary-hover:#1D5A2D; --primary-soft:#E4F2E8; --primary-text:#20612F; --primary-fg:#FFFFFF; }
html[data-theme="dark"][data-accent="yesil"] {
  --primary:#5CBE7B; --primary-hover:#79CC93; --primary-soft:#1E3326; --primary-text:#7FD69B; --primary-fg:#0E2415; }

/* --- Temel kurallar -------------------------------------------------------- */
body { background:var(--bg); color:var(--text); font:14px/1.5 var(--font-sans); }
.font-mono, .mono, code, kbd { font-family:var(--font-mono); }

.tabular-nums, .num, td.num, th.num { font-variant-numeric:tabular-nums; }

:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }

a { color:inherit; }

/* Yapışkan tablo başlığı — TEK KURAL, offset 0.
   Tablolar overflow:auto sarmalayıcı div içinde; sticky'nin scrollport'u bu div'dir
   (viewport değil). Bu yüzden topbar offset'i (56px) anlamsız ve başlığı kabin içinde
   aşağı itip ilk satırların üstüne bindiriyordu. top:0 -> başlık kabin üstüne yapışır. */
thead th { position:sticky; top:0; background:var(--surface-2);
           box-shadow:inset 0 -1px 0 var(--border-strong); z-index:10; }
thead tr.filtre-row th { top:0; background:var(--surface); box-shadow:none; z-index:9; }

/* ===========================================================================
   Bileşen katmanı (şablonlar bu sınıfları kullanır; renkler token'dan gelir)
   =========================================================================== */

/* Kartlar / yüzeyler */
.card { background:var(--surface); border:1px solid var(--border);
        border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.card-pad { padding:var(--card-pad); }
.hairline { border-color:var(--border); }
.muted { color:var(--text-2); }
.muted-3 { color:var(--text-3); }

/* Butonlar */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
       border-radius:var(--radius); padding:.5rem .9rem; font-weight:500; font-size:.875rem;
       line-height:1.2; cursor:pointer; border:1px solid transparent;
       transition:background .12s, border-color .12s, color .12s, filter .12s; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-sm { padding:.35rem .6rem; font-size:.8rem; }
.btn-primary { background:var(--primary); color:var(--primary-fg); }
.btn-primary:hover:not(:disabled) { background:var(--primary-hover); }
.btn-success { background:var(--success); color:#fff; }
.btn-success:hover:not(:disabled) { filter:brightness(.94); }
.btn-outline { background:var(--surface); color:var(--text); border-color:var(--border-strong); }
.btn-outline:hover:not(:disabled) { background:var(--surface-2); }
.btn-ghost { background:transparent; color:var(--text-2); }
.btn-ghost:hover:not(:disabled) { background:var(--surface-3); color:var(--text); }

/* Ayarlar aç/kapa anahtarı (toggle switch) — accent'e (var(--primary)) bağlı */
.switch { position:relative; display:inline-block; width:44px; height:24px; flex:none; }
.switch input { position:absolute; opacity:0; width:0; height:0; }
.switch .kaydir { position:absolute; inset:0; cursor:pointer; background:var(--surface-3);
                  border:1px solid var(--border-strong); border-radius:999px; transition:background .15s, border-color .15s; }
.switch .kaydir::before { content:""; position:absolute; left:2px; top:2px; width:18px; height:18px;
                          background:#fff; border-radius:50%; box-shadow:var(--shadow-sm); transition:transform .15s; }
.switch input:checked + .kaydir { background:var(--primary); border-color:var(--primary); }
.switch input:checked + .kaydir::before { transform:translateX(20px); }
.switch input:focus-visible + .kaydir { outline:2px solid var(--primary); outline-offset:2px; }

/* Form alanları */
.field-label { display:block; font-size:.75rem; color:var(--text-2); margin-bottom:4px; }
.input, .select, .textarea {
  width:100%; background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:.5rem .7rem; font-size:.875rem; font-family:inherit; }
.input:focus, .select:focus, .textarea:focus { border-color:var(--primary); }
.input::placeholder, .textarea::placeholder { color:var(--text-3); }
.input-sm { padding:.3rem .5rem; font-size:.8rem; }

/* Şifre göster/gizle göz ikonu (input sağ iç kenarı) — token'larla; her tema+accent.
   İkon rengi text-3, hover'da text-2; klavye odağı accent (--primary). */
.sifre-goz { position:absolute; top:0; right:0; height:100%; display:flex; align-items:center;
             padding:0 .6rem; background:transparent; border:0; cursor:pointer; color:var(--text-3); }
.sifre-goz:hover { color:var(--text-2); }
.sifre-goz:focus-visible { outline:2px solid var(--primary); outline-offset:-2px; border-radius:var(--radius); }

/* Rozetler (soft zemin + text çifti) */
.badge { display:inline-flex; align-items:center; gap:.3rem;
         padding:.12rem .5rem; border-radius:999px; font-size:.75rem; font-weight:500;
         white-space:nowrap; }
.badge-info    { background:var(--info-soft);    color:var(--info-text); }
.badge-success { background:var(--success-soft); color:var(--success-text); }
.badge-warning { background:var(--warning-soft); color:var(--warning-text); }
.badge-danger  { background:var(--danger-soft);  color:var(--danger-text); }
.badge-neutral { background:var(--surface-3);    color:var(--text-2); }

/* Renk yardımcıları */
.text-danger  { color:var(--danger-text); }
.text-success { color:var(--success-text); }
.text-primary { color:var(--primary-text); }

/* Tablolar */
.table { width:100%; border-collapse:separate; border-spacing:0; font-size:.875rem; }
.table th { text-align:left; font-weight:600; color:var(--text-2);
            padding:var(--row-py) 16px; white-space:nowrap; }
.table td { padding:var(--row-py) 16px; white-space:nowrap;
            border-top:1px solid var(--border); color:var(--text); }
.table tbody tr.satir:hover td { background:var(--surface-2); }
.table tbody tr.satir.tiklanabilir { cursor:pointer; }
/* Panel kart satırı: tıklanabilir metrikte imleç + belirgin hover */
.panel-satir { cursor:pointer; }
.panel-satir:hover { background:var(--surface-3); }
.table .num { text-align:right; }
.table tfoot td { font-weight:600; background:var(--surface-2);
                  border-top:2px solid var(--border-strong); color:var(--text); }
.filtre-input { width:100%; min-width:6rem; background:var(--surface); color:var(--text);
                border:1px solid var(--border); border-radius:var(--radius-sm);
                padding:3px 6px; font-size:.75rem; font-weight:400; }
.filtre-input:focus { border-color:var(--primary); }

/* Cari Bakiye — SATIR değil HÜCRE drill-down: yalnız 'Bakiye' hücresi tıklanır.
   İNCE noktalı altı çizgi + imleç + hover'da hafif hücre vurgusu. Bilinçli
   olarak SADE: ikon yok, ek işaret yok — kolon kalabalıklaşmasın. */
/* DİKKAT (06.08.2026 düzeltmesi): çizgi DURAĞAN halde de görünmeli.
   1) `text-decoration-line` AÇIKÇA yazılır — kısayol (`text-decoration:underline`)
      da çizgiyi kurar ama kısayol TÜM longhand'leri başlangıç değerine sıfırlar;
      satırlar ileride yer değiştirirse style/thickness sessizce ölür.
   2) Çizgi rengi --border-strong İDİ (#C7C7C3): beyaz zeminde ~1.8:1 kontrast,
      1px noktalı çizgide fiilen görünmüyordu -> --text-3 (~3:1, iki temada da
      okunur). Kalınlık 1px ve ofset 3px korunuyor (ince ve sade). */
.table td.hucre-tiklanabilir {
  cursor:pointer;
  text-decoration-line:underline;
  text-decoration-style:dotted;
  text-decoration-thickness:1px;
  text-decoration-color:var(--text-3);
  text-underline-offset:3px;
}
.table td.hucre-tiklanabilir:hover { background:var(--surface-3);
  text-decoration-color:var(--primary); }

/* Kolon başlığı bilgi ikonu (ör. Cari Bakiye modalında 'Vade' açıklaması).
   Açıklama title/aria-label ile gelir; ayrı tooltip bileşeni yok. */
.bilgi-ikon { display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; margin-left:.3rem; border-radius:999px;
  background:var(--surface-3); color:var(--text-2); font-size:.62rem;
  font-weight:700; font-style:normal; cursor:help; vertical-align:middle; }
.bilgi-ikon:hover, .bilgi-ikon:focus { background:var(--primary-soft); color:var(--primary-text); }

/* Yaşlandırma ısı rozetleri (Cari Bakiye modalı): 90+ kırmızı, 61-90 turuncu,
   31-60 sarı, 0-30 nötr. Şeritte kova toplamları aynı renkleri kullanır. */
.yas-serit { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.yas-rozet, .yas-kova { display:inline-block; padding:.1rem .5rem; border-radius:999px;
  font-size:.75rem; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
.yas-notr    { background:var(--surface-3);        color:var(--text-2); }
.yas-sari    { background:var(--warning-soft);     color:var(--warning-text); }
.yas-turuncu { background:var(--yas-turuncu-soft); color:var(--yas-turuncu-text); }
.yas-kirmizi { background:var(--danger-soft);      color:var(--danger-text); }

/* Sayfa-içi sekme çubuğu (Ciro Raporu: Cari Bazında | Aylık Karşılaştırma).
   Sidebar'a öğe eklemeden iki görünüm arasında geçiş; aktif sekme accent'e bağlı. */
.sekme-bar { display:flex; flex-wrap:wrap; gap:2px; border-bottom:1px solid var(--border); }
.sekme { display:inline-block; padding:.5rem .9rem; font-size:.875rem; font-weight:500;
         color:var(--text-2); white-space:nowrap; margin-bottom:-1px;
         border-bottom:2px solid transparent; border-radius:var(--radius) var(--radius) 0 0; }
.sekme:hover { color:var(--text); background:var(--surface-2); }
.sekme.aktif { color:var(--primary-text); border-bottom-color:var(--primary); }

/* Yıl çoklu seçimi (Aylık Karşılaştırma) — checkbox kutucukları */
.yil-secim { display:flex; flex-wrap:wrap; gap:6px; }
.yil-kutu { display:inline-flex; align-items:center; gap:.35rem; cursor:pointer;
            padding:.42rem .7rem; font-size:.875rem; color:var(--text);
            background:var(--surface); border:1px solid var(--border);
            border-radius:var(--radius); font-variant-numeric:tabular-nums; }
.yil-kutu:hover { background:var(--surface-2); }
.yil-kutu:has(input:checked) { border-color:var(--primary); background:var(--primary-soft);
                               color:var(--primary-text); }

/* Fark rozeti: bir önceki SEÇİLİ yıla göre % değişim (değerin YANINDA).
   artis=yeşil, azalis=kırmızı, esit=nötr; soft/text çiftleri iki temada da okunur. */
.fark-rozet { display:inline-block; margin-left:.35rem; padding:.05rem .35rem;
              border-radius:999px; font-size:.7rem; font-weight:600;
              white-space:nowrap; font-variant-numeric:tabular-nums; }
.fark-rozet.artis  { background:var(--success-soft); color:var(--success-text); }
.fark-rozet.azalis { background:var(--danger-soft);  color:var(--danger-text); }
.fark-rozet.esit   { background:var(--surface-3);    color:var(--text-2); }

/* Dar ekran (mobil) tablo kısıtı — OPT-IN (.tablo-mobil-kompakt) + kolon gizleme.
   Yalnız <=640px (.brand-metin ile aynı kırılım); desktop birebir AYNI kalır.
   'mobil-gizli' hücreler gizlenir; kompakt hücre padding'i, tabular-nums (.num) korunur.
   Jenerik tablo diğer sayfaları ETKİLEMEZ (yalnız mobil_kolonlar veren ekranlar opt-in). */
@media (max-width:640px) {
  .mobil-gizli { display:none !important; }
  .tablo-mobil-kompakt .table th,
  .tablo-mobil-kompakt .table td { padding:6px 6px; }
  .tablo-mobil-kompakt .table { font-size:.8rem; }
  .tablo-mobil-kompakt .filtre-input { min-width:0; padding:2px 4px; }
}

/* Durumları (HTMX indicator) */
.htmx-indicator { opacity:0; transition:opacity .15s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity:1; }

/* Alpine gizleme (drawer/overlay ilk boyamada görünmesin) */
[x-cloak] { display:none !important; }

/* ---- Sol sidebar / layout ---- */
.sidebar { background:var(--surface); border-right:1px solid var(--border); width:var(--sidebar-w); }

/* Sidebar tam logo (temaya duyarlı) — görünürlük YALNIZ CSS'te; HTML'de inline
   display OLMAMALI (yoksa tema geçişi ezilir -> iki logo da görünür). */
.sidebar-logo-light { display:block; }
.sidebar-logo-dark  { display:none; }
html[data-theme="dark"] .sidebar-logo-light { display:none; }
html[data-theme="dark"] .sidebar-logo-dark  { display:block; }

/* İtalyan üç renk şeridi (logo altı) — DEKORATİF, tıklanmaz. Her tema ve
   accent'te SABİT (sabit hex; var(--primary) kullanmaz). Soldan yeşil/beyaz/kırmızı. */
.tricolor { width:180px; max-width:calc(100% - 2rem); height:3px; margin:0 auto;
            border-radius:2px; pointer-events:none;
            background:linear-gradient(to right,
              #256E38 0 33.333%, #FFFFFF 33.333% 66.666%, #B22525 66.666% 100%); }

/* Grup başlıkları: sade küçük uppercase etiket (zemin bandı/hairline YOK).
   UI turu 2'de eklenen tam-genişlik bant stili geri alındı (kullanıcı tercihi).
   Menü öğeleriyle hizalı yatay padding; AKTİF/link görünümü DEĞİŞMEZ. */
.sidebar-baslik { margin-top:16px; padding:4px 16px;
                  font-size:.66rem; letter-spacing:.12em;
                  text-transform:uppercase; color:var(--text-3); font-weight:600; }
.sidebar-baslik:first-child { margin-top:8px; }
.sidebar-link { display:block; padding:8px 16px; font-size:.875rem; color:var(--text-2);
                border-left:2px solid transparent; }
.sidebar-link:hover { background:var(--surface-3); color:var(--text); }
.sidebar-link.aktif { background:var(--primary-soft); color:var(--primary-text);
                      border-left-color:var(--primary); font-weight:500; }

/* Üst bar (desktop: içerik üstü, sol=sidebar genişliği kadar; mobil: tam genişlik) */
.ust-bar { background:var(--surface); border-bottom:1px solid var(--border); height:var(--topbar-h); }

/* Sağ üst kullanıcı menüsü */
.kullanici-trigger { display:flex; align-items:center; gap:8px; padding:5px 8px;
                     border-radius:var(--radius); background:transparent; cursor:pointer; }
.kullanici-trigger:hover { background:var(--surface-3); }
.dropdown { background:var(--surface); border:1px solid var(--border);
            border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); min-width:210px; }
.dropdown-item { display:block; width:100%; text-align:left; padding:9px 14px;
                 font-size:.875rem; color:var(--text-2); background:transparent; cursor:pointer; }
.dropdown-item:hover, .dropdown-item:focus-visible { background:var(--surface-3); color:var(--text); }
.dropdown-item.tehlike { color:var(--danger-text); }

/* Dropdown içi 'Tema Rengi' accent seçici (3 renk yuvarlağı) */
.dropdown-baslik { padding:8px 14px 2px; font-size:.68rem; letter-spacing:.1em;
                   text-transform:uppercase; color:var(--text-3); font-weight:600; }
.accent-secim { display:flex; gap:10px; padding:6px 14px 10px; }
.accent-nokta { width:22px; height:22px; border-radius:999px; cursor:pointer; padding:0;
                border:2px solid transparent; box-shadow:0 0 0 1px var(--border) inset;
                transition:transform .12s, border-color .12s; }
.accent-nokta:hover { transform:scale(1.1); }
.accent-nokta.secili { border-color:var(--text); }

/* Cari seçici, başlık satırının EN SAĞINA tam yaslanır. Yükleme göstergesi
   (#yukleniyor) akıştan ÇIKARILIR (absolute) — yoksa opacity:0 iken bile kutusu
   combobox'ın sağında yer kaplayıp boşluk bırakırdı. Yalnız cari-bar'a özgü;
   tarih_liste'deki aynı id'li gösterge (form akışında) ETKİLENMEZ. */
.cari-bar { position:relative; }
.cari-bar #yukleniyor { position:absolute; right:100%; margin-right:.5rem;
                        top:50%; transform:translateY(-50%); white-space:nowrap; }

/* Cari künye şeridi (başlık satırının altı; #icerik'in ilk öğesi).
   AYRAÇ CSS'TEN gelir: parça <span>'i yalnız DOLU alan için basılır, komşu
   parçanın önüne '·' konur -> boş alan artık ayraç üretemez ('— / —' çıkmaz).
   Negatif üst boşluk şeridi başlık satırına yaklaştırır (aynı satırın devamı
   gibi okunsun). Renkler token; ham hex YOK (dark modda da doğru). */
.kart-serit { display:flex; flex-wrap:wrap; align-items:center; gap:.25rem .5rem;
              margin:-.75rem 0 1.25rem; font-size:.8125rem; color:var(--text-2); }
.kart-serit .kart-parca + .kart-parca::before { content:"·"; margin-right:.5rem;
                                                color:var(--text-3); }
.kart-serit .kart-kod { font-weight:600; color:var(--text);
                        font-variant-numeric:tabular-nums; white-space:nowrap; }
.kart-serit .kart-detay { margin-left:.25rem; }

/* Tıklanabilir telefon (tel:) — şerit ve künye modalı. Tailwind preflight
   bağlantı alt çizgisini sıfırlar, `a{color:inherit}` da rengi eşitler: ayrı
   bir ipucu olmazsa numara düz metinden ayırt edilemez. Kalıp `.hucre-
   tiklanabilir` ile aynı (noktalı ince alt çizgi + token rengi). KISAYOL
   (`text-decoration:`) KULLANMA: tüm longhand'leri sıfırlar, sıra değişince
   stil sessizce ölür (06.08 dersi). */
.tel-link {
  cursor:pointer;
  text-decoration-line:underline;
  text-decoration-style:dotted;
  text-decoration-thickness:1px;
  text-decoration-color:var(--text-3);
  text-underline-offset:3px;
  white-space:nowrap;              /* numara satır sonunda bölünmesin */
}
.tel-link:hover { text-decoration-color:var(--primary); }

/* Aramalı cari combobox açılır listesi */
.cari-liste { position:absolute; left:0; right:0; margin-top:4px; z-index:40; max-height:16rem;
              overflow-y:auto; overflow-x:hidden; background:var(--surface); border:1px solid var(--border);
              border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:4px 0; }
.cari-opt { padding:8px 12px; font-size:.875rem; color:var(--text); cursor:pointer;
            white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cari-opt:hover, .cari-opt.aktif { background:var(--primary-soft); color:var(--primary-text); }
.cari-opt-bos { padding:8px 12px; font-size:.875rem; color:var(--text-3); }

/* Eski üst navbar sınıfları (geri uyum) */
.navbar { background:var(--surface); border-bottom:1px solid var(--border); }
.nav-link { padding:6px 12px; border-radius:var(--radius); white-space:nowrap; color:var(--text-2); }
.nav-link:hover { background:var(--surface-3); color:var(--text); }
.nav-link.aktif { background:var(--primary-soft); color:var(--primary-text); font-weight:500; }

/* Tema değiştir ikonu (light: ay göster, dark: güneş göster) */
.ikon-gun { display:none; }
html[data-theme="dark"] .ikon-ay  { display:none; }
html[data-theme="dark"] .ikon-gun { display:inline; }

/* Marka metni */
.brand-axion { color:var(--text); font-weight:600; letter-spacing:.02em; }
.brand-bayi  { color:var(--primary-text); font-weight:600; }
@media (max-width:640px){ .brand-metin { display:none; } }

/* Panel detay modalı iskelet (skeleton) yükleme çubukları — token'larla, iki
   temada da doğal (surface-3 zemin, surface-2 shimmer). Hafif kayan parıltı;
   hareket azaltma tercihinde statik. */
.iskelet { display:flex; flex-direction:column; gap:12px; padding:6px 0; }
.iskelet-cubuk { height:16px; border-radius:var(--radius);
  background:linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%);
  background-size:200% 100%; animation:iskelet-shimmer 1.3s ease-in-out infinite; }
@keyframes iskelet-shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce) { .iskelet-cubuk { animation:none; } }

/* Modal arka planı */
.modal-arka { background:rgba(0,0,0,.45); }
html[data-theme="dark"] .modal-arka { background:rgba(0,0,0,.65); }

/* Her iki temada da AÇIK yüzey (login kartı — logodaki siyah yazı için).
   NOT: primary ARTIK ezilmez — html'deki data-accent primary'si buraya da akar
   (login accent tutarlılığı). Yalnız yüzey/metin/border light'a sabitlenir. */
.tema-acik {
  --surface:#FFFFFF; --surface-2:#F8F8F7; --surface-3:#EDEDEA;
  --border:#E3E3E0; --border-strong:#C7C7C3;
  --text:#1B1B19; --text-2:#5B5B57; --text-3:#8C8C87;
  background:var(--surface); color:var(--text);
}

/* Login logosu: light'ta açık-plakalı orijinal; dark'ta beyaz-yazılı türev,
   plaka OLMADAN doğrudan koyu zeminde (data-theme ile seçilir). Görünürlük
   YALNIZ bu kurallarla; HTML'de inline display OLMAMALI (yoksa ezilir). */
.login-light { display:inline-block; }
.login-dark  { display:none; }
html[data-theme="dark"] .login-light { display:none; }
html[data-theme="dark"] .login-dark  { display:block; }