/* Destora — Cernora/Fabricore gri metalik tema. Token ve sınıf adları Cernora ile aynı;
   yalnızca marka bloğu ve bu ürüne özgü bileşenler (evrak listesi, limit çubuğu,
   kural seti görüntüleyici) eklendi. */
:root{
  --accent:#475569; --accent-ink:#334155; --accent-soft:#e6e9ef;
  --navy:#232a35; --ink:#232a35; --muted:#5c6470; --faint:#8a919d;
  --bg:#e9ecf1; --surface:#ffffff; --surface-2:#f1f3f7; --border:#d6dbe3; --border-strong:#c0c6d0;
  --ok:#16a34a; --ok-soft:#eef7f0; --caution:#b7791f; --caution-soft:#fbf6ea;
  --warn:#c2560c; --warn-soft:#fbf0e8; --danger:#dc2626; --danger-soft:#fbeeee;
  --radius:12px;
  --metal-kenar:#333c49;
  /* Yan menu ve ust cubuk AYNI iki degiskenden besleniyor: ekranin ustu
     artik iki farkli renkte parcaya bolunmuyor, tek bir koyu cerceve. */
  --yan-ust:#2b313d; --yan-alt:#20252f;
  --yan-metin:#c3c9d4; --yan-baslik:#eef1f6; --yan-soluk:#78828f;
  --vurgu-1:#3b82f6; --vurgu-2:#6d5efc;   /* etkin menu ve dolgu cubuklari */
  --metal-btn:linear-gradient(180deg,#5c6675 0%,#3d4757 100%);
  --metal-btn-hover:linear-gradient(180deg,#66707f 0%,#434e5f 100%);
  --metal-light:linear-gradient(180deg,#ffffff 0%,#e6eaf0 100%);
  --metal-icon:linear-gradient(145deg,#9aa4b4 0%,#4b5563 100%);
  --btn-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 -2px 0 rgba(0,0,0,.16) inset,0 3px 0 rgba(0,0,0,.12),0 8px 16px rgba(0,0,0,.14),0 2px 4px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body,#root{height:100%}
body{margin:0;background:var(--bg);color:var(--navy);
  font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.01em;color:var(--navy)}
.muted{color:var(--muted)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── Butonlar ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border-radius:8px;font-size:.85rem;font-weight:600;
  cursor:pointer;border:1px solid var(--border-strong);background:var(--metal-light);color:var(--navy);
  transition:all .13s;text-decoration:none;box-shadow:var(--btn-shadow);font-family:inherit}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(0,0,0,.1),0 2px 6px rgba(0,0,0,.12)}
.btn-primary{background:var(--metal-btn);border-color:var(--metal-kenar);color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.25)}
.btn-primary:hover{background:var(--metal-btn-hover)}
.btn-sm{padding:5px 12px;font-size:.8rem}
.btn-ghost{background:var(--surface);color:var(--muted);border:1px solid var(--border);box-shadow:0 2px 0 rgba(0,0,0,.06),0 6px 14px rgba(0,0,0,.08)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-success{background:var(--ok-soft);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 32%,var(--surface));box-shadow:0 2px 0 rgba(0,0,0,.05),0 5px 12px rgba(0,0,0,.07)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}

/* ── Inputs ── */
.input,select.input{width:100%;padding:9px 12px;border:1px solid var(--border-strong);border-radius:8px;font-size:.9rem;font-family:inherit;background:var(--surface);color:var(--navy)}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.label{display:block;font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:5px}
.field{margin-bottom:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}

/* ── Cards ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 1px 3px rgba(35,42,53,.07)}
.card-pad{padding:20px}
.card-h{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-h h3{font-size:1rem;font-weight:700}

/* ── Shell ── */
/* Kenar cubugunun genisligi TEK bir degiskende: hem izgara sutunu hem de
   kapatma dugmesinin yeri ondan okunuyor. Iki yerde ayri sayi tutulsaydi
   dugme kapanmada cubugun kenarindan kayardi. */
.shell{display:grid;grid-template-columns:var(--yan-genislik,250px) 1fr;height:100%;
  position:relative}
.yan-kapali .shell{--yan-genislik:66px}
.sidebar{background:linear-gradient(180deg,var(--yan-ust) 0%,var(--yan-alt) 100%);color:var(--yan-metin);display:flex;flex-direction:column;padding:16px 12px 0;gap:2px;box-shadow:inset -1px 0 0 rgba(0,0,0,.3);overflow:hidden}
/* Kaydırma yalnızca menüde: marka üstte, not altta sabit kalır. Menünün
   tamamını kaydırmak, ekran kısaldığında son kalemleri görünmez yapıyordu. */
#nav{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:2px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
#nav::-webkit-scrollbar{width:6px}
#nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}
#nav::-webkit-scrollbar-track{background:transparent}
.nav-sarmal{position:relative;flex:1 1 auto;min-height:0;display:flex}
.nav-sarmal::after{content:'';position:absolute;left:0;right:0;bottom:0;height:26px;
  background:linear-gradient(180deg,transparent 0%,var(--yan-alt) 90%);pointer-events:none;
  opacity:0;transition:opacity .2s}
.nav-sarmal.tasiyor::after{opacity:1}
.brand{display:flex;align-items:center;gap:11px;padding:4px 8px 14px;color:#fff}
.brand .logo{width:34px;height:34px;border-radius:9px;background:var(--metal-icon);display:grid;place-items:center;font-weight:800;color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 -2px 0 rgba(0,0,0,.25) inset,0 3px 6px rgba(0,0,0,.4)}
.brand .logo svg{width:20px;height:20px;display:block}
.brand b{font-size:1.08rem;letter-spacing:-.01em;display:block}
.brand small{display:block;font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#8892a3;margin-top:-2px}
.nav-group-title{font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#7a8598;padding:9px 12px 3px}
.nav-group-title:first-child{padding-top:2px}
.nav-item{display:flex;align-items:center;gap:9px;padding:4px 10px;border-radius:9px;color:#d3d9e4;font-size:.9rem;font-weight:600;cursor:pointer;transition:background .13s,color .13s,box-shadow .13s;border:none;background:none;font-family:inherit;width:100%;text-align:left}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-item.active{background:linear-gradient(135deg,var(--vurgu-1) 0%,var(--vurgu-2) 100%);color:#fff;box-shadow:0 2px 8px rgba(79,110,247,.3)}
/* IKON TABAGI DUZ. Onceden perspektif egimi, iki ic kabartma, bir dip
   cizgisi ve genis bir dis golge vardi: ikonlar menude duran plastik
   dugmeler gibi goruunuyordu. Kurumsal yazilimda ikon sessiz durur, dikkati
   BASLIK ceker. Simdi tek bir soluk zemin ve ince bir kenar var. */
.nav-item .i{width:28px;height:28px;flex:none;border-radius:8px;display:grid;place-items:center;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.075);
  color:#c2cadb;transition:background .13s,border-color .13s,color .13s}
.nav-item:hover .i{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.14);color:#fff}
.nav-item.active .i{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.28);color:#fff}
.nav-item .i svg{width:17px;height:17px}
.sidebar .spacer{flex:1}
.side-note{flex:none;font-size:.7rem;line-height:1.5;color:var(--yan-soluk);padding:8px 12px 12px;
  border-top:1px solid rgba(255,255,255,.07);margin-top:4px;display:flex;align-items:center;
  justify-content:space-between;gap:8px;flex-wrap:wrap}

.main-wrap{display:flex;flex-direction:column;min-width:0;overflow:auto}
.topbar{height:60px;background:linear-gradient(180deg,var(--yan-ust) 0%,var(--yan-alt) 100%);border-bottom:1px solid rgba(0,0,0,.32);display:flex;align-items:center;gap:14px;padding:0 22px;position:sticky;top:0;z-index:5}
.topbar .sp{flex:1}
.tenant{display:flex;align-items:center;gap:9px}
.tenant .label{margin:0;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase}
.tenant select{min-width:230px;padding:6px 10px;font-size:.85rem;font-weight:600}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--metal-icon);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.8rem;box-shadow:0 2px 5px rgba(0,0,0,.25)}
.content{padding:24px}
.page-h{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.page-h h1{font-size:1.5rem;font-weight:800}
.page-h .sub{color:var(--muted);font-size:.9rem;margin-top:2px}

/* ── KPI ── */
/* Sutun sayisini app.js hesapliyor (kpiDenkle): satirlari DENGELEYEREK.
   Once auto-fit izgaraydi ve 9 kutucuk 6+3 diye sariyor, ikinci satirin sagi
   uc kutuluk BOS kaliyordu. Sonra esnek satir denendi: delik kapandi ama son
   satirdaki iki kutu 694'er piksele sisti — kotusu. Dengeleme ikisini de
   cozuyor: 9 kutucuk 5+4 oluyor, kutular ESIT genislikte kaliyor ve en fazla
   tek bir bos yer kaliyor.
   Sutun sayisi gelmezse auto-fit'e dusuyor; JS calismasa da ekran bozulmaz. */
.kpi-grid{display:grid;gap:14px;margin-bottom:22px;
  grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.kpi{padding:18px 20px}
/* Etikete IKI SATIRLIK yer ayriliyor. "Bekleyen tahmini iade" gibi uzun
   basliklar ikinci satira tasiyor ve o kutucukta rakam 19 piksel asagi
   kayiyordu: ayni satirdaki buyuk rakamlar ayni cizgide durmuyordu. Goz bir
   satir rakami tararken hizadaki bu kaymayi hemen yakaliyor. Sabit yer,
   baslik bir satir da olsa ikisi de olsa rakami ayni yere koyuyor. */
.kpi>.k{font-size:.76rem;font-weight:600;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;line-height:1.55;min-height:3.1em;
  display:flex;align-items:flex-end}
.kpi>.v{font-size:2rem;font-weight:800;margin-top:6px;color:var(--accent-ink);font-variant-numeric:tabular-nums;line-height:1.1;white-space:nowrap}
/* Para tutarlari sayilardan uzun; kart genisligine sigsin diye bir kademe kucuk. */
.kpi.para>.v{font-size:1.45rem}
/* Para kartlari kirpilmasin: "168,3 milyon TL" buyuk puntoda dar sutuna
   sigmiyor ve nowrap yuzunden sessizce kesiliyordu. Sayi sutun genisligine
   gore kuculur; kesilmis bir rakam yanlis rakamdir. */
.kpi.para>.v{font-size:1.15rem}
/* Alt aciklamaya da iki satirlik yer. Aksi halde aciklamasi tasan TEK bir
   kutucuk butun satiri 19 piksel uzatiyor ve iki satir yan yana farkli
   boyda duruyordu. */
.kpi>.s{font-size:.76rem;color:var(--faint);margin-top:2px;line-height:1.55;min-height:3.1em}
.kpi.danger>.v{color:var(--danger)}
.kpi.warn>.v{color:var(--warn)}
.kpi.ok>.v{color:var(--ok)}

/* ── Tablo ── */
.tablewrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:.88rem}
.table th{text-align:left;padding:11px 16px;background:var(--surface-2);color:var(--muted);font-weight:600;font-size:.76rem;text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--border);white-space:nowrap}
.table td{padding:12px 16px;border-bottom:1px solid var(--border);vertical-align:top}
.table tr:last-child td{border-bottom:none}
.table tbody tr{cursor:pointer}
.table tbody tr:hover{background:var(--surface-2)}
.table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dosya-no{font-family:ui-monospace,'Cascadia Code',monospace;font-size:.76rem;font-weight:700;background:var(--surface-2);color:var(--navy);padding:2px 8px;border-radius:6px;white-space:nowrap}

/* ── Dosya satırı ──
   Liste 250 satıra kadar çıkıyor; okunabilirliği taşıyan şey renk kodu.
   Her destek kalemi kendi rengini alır (satır --kalem değişkeniyle gelir),
   sol şerit ve kalem rozeti o renkten türer. Böylece "hangi kalemler var"
   sorusu tabloyu okumadan cevaplanır. */
.table tbody tr[data-dosya] td{padding-top:10px;padding-bottom:10px}
.table tbody tr[data-dosya] td:first-child{border-left:3px solid var(--kalem,var(--border-strong))}
.table tbody tr[data-dosya]:hover{background:color-mix(in srgb,var(--kalem,#8a919d) 7%,var(--surface))}
.d-ust{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.kalem-pil{display:inline-flex;align-items:baseline;gap:5px;padding:2px 9px;border-radius:20px;
  font-size:.72rem;font-weight:800;letter-spacing:.01em;color:var(--kalem);
  background:color-mix(in srgb,var(--kalem) 11%,#fff);
  border:1px solid color-mix(in srgb,var(--kalem) 26%,#fff);white-space:nowrap}
.kalem-pil i{font-style:normal;font-weight:600;opacity:.65;font-size:.67rem}
.kur-ilerleme{height:8px;border-radius:5px;background:var(--surface-2);overflow:hidden;margin-top:10px}
.kur-ilerleme i{display:block;height:100%;background:var(--accent);border-radius:5px;transition:width .3s}
.kur-kod{font-family:ui-monospace,'Cascadia Code',monospace;font-weight:800;font-size:.86rem}
.kur-deger{font-variant-numeric:tabular-nums;font-weight:700}
.kur-eski{color:var(--caution)}
.kur-arama{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding:16px 20px}
.kur-arama .field{margin:0}
.kur-satir{margin:-4px 0 14px;padding:9px 12px;border-radius:8px;background:var(--surface-2);
  border:1px solid var(--border);font-size:.82rem;color:var(--muted);line-height:1.45}
.kur-satir b{color:var(--navy);font-variant-numeric:tabular-nums}
.birlik-no{font-family:ui-monospace,'Cascadia Code',monospace;font-size:.73rem;font-weight:600;
  color:var(--faint);white-space:nowrap;letter-spacing:.01em}
.marka-pil{padding:2px 8px;border-radius:20px;font-size:.69rem;font-weight:800;letter-spacing:.03em;
  background:var(--surface-2);color:var(--muted);border:1px solid var(--border);white-space:nowrap}
.d-baslik{margin-top:6px;font-weight:700;font-size:.92rem;line-height:1.3;color:var(--navy);max-width:64ch}
.d-alt{margin-top:4px;display:flex;flex-wrap:wrap;gap:2px 14px;font-size:.76rem;color:var(--muted)}
.d-alt .d-et{font-weight:600;color:var(--faint);margin-right:4px}
.d-alt .hedef{color:var(--accent-ink);font-weight:800;font-size:.66rem;letter-spacing:.04em;
  background:var(--accent-soft);padding:1px 6px;border-radius:20px;margin-left:4px}
.evrak-hucre{min-width:96px}
.arsiv-not{font-size:.7rem;font-weight:700;letter-spacing:.03em;color:var(--faint);background:var(--surface-2);border:1px solid var(--border);border-radius:20px;padding:1px 8px;display:inline-block;white-space:nowrap}
.evrak-say{font-weight:800;font-variant-numeric:tabular-nums}
.evrak-say.tam{color:var(--ok)}
.evrak-bar{margin:5px 0 0 auto;height:5px;width:80px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.evrak-bar i{display:block;height:100%;border-radius:4px;background:var(--caution);transition:width .2s}
.evrak-bar.tam i{background:var(--ok)}
.tutar-ana{font-weight:800;font-size:.95rem;color:var(--navy)}
.tutar-alt{color:var(--faint);font-size:.74rem;margin-top:1px}
.oran-pil{display:inline-block;margin-top:4px;padding:1px 8px;border-radius:20px;font-size:.69rem;
  font-weight:800;background:var(--accent-soft);color:var(--accent-ink)}
.oran-pil.gercek{background:var(--ok-soft);color:var(--ok)}

/* ── Rozetler ── */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:.74rem;font-weight:700;white-space:nowrap}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.caution{background:var(--caution-soft);color:var(--caution)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.danger{background:var(--danger-soft);color:var(--danger)}
.badge.accent{background:var(--accent-soft);color:var(--accent-ink)}
.badge.neutral{background:var(--surface-2);color:var(--muted)}

/* ── Limit çubuğu ── */
.limit-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.limit-bar{height:12px;border-radius:7px;background:var(--surface-2);overflow:hidden;border:1px solid var(--border)}
.limit-fill{height:100%;border-radius:7px;background:linear-gradient(90deg,var(--vurgu-1),var(--vurgu-2));transition:width .4s}
.limit-legend{display:flex;gap:20px;margin-top:12px;font-size:.8rem;color:var(--muted);flex-wrap:wrap}
.limit-legend b{display:block;color:var(--navy);font-size:.95rem;font-variant-numeric:tabular-nums}

/* ── Uyarı listesi ── */
.uyari{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--border);cursor:pointer}
.uyari:last-child{border-bottom:none}
.uyari:hover{background:var(--surface-2)}
.uyari .gun{width:62px;flex:none;text-align:center;font-weight:800;font-size:1.05rem;font-variant-numeric:tabular-nums;line-height:1.1}
.uyari .gun small{display:block;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.75}
.uyari .gun.danger{color:var(--danger)} .uyari .gun.warn{color:var(--warn)}
.uyari .gun.caution{color:var(--caution)} .uyari .gun.ok{color:var(--muted)}
.uyari .ana{flex:1;min-width:0}
.uyari .ana b{display:block;font-size:.9rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uyari .ana span{font-size:.78rem;color:var(--muted)}
.empty{padding:28px 20px;text-align:center;color:var(--faint);font-size:.88rem}

/* ── Evrak listesi ── */
.evrak{list-style:none;margin:0;padding:0}
.evrak li{display:flex;gap:12px;padding:12px 20px;border-bottom:1px solid var(--border);align-items:flex-start}
.evrak li:last-child{border-bottom:none}
.evrak li.done{background:var(--ok-soft)}
.evrak input[type=checkbox]{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--vurgu-1);cursor:pointer}
.evrak .ad{flex:1;min-width:0}
.evrak .ad b{font-weight:700;font-size:.9rem}
.evrak .ad .k{display:block;font-size:.77rem;color:var(--muted);margin-top:2px}
.evrak .ad .n{display:block;font-size:.77rem;color:var(--faint);margin-top:2px;font-style:italic}

/* ── Notlar ── */
.notlar{list-style:none;margin:0;padding:0}
.notlar > li{padding:10px 20px;border-bottom:1px solid var(--border);font-size:.85rem;color:var(--muted);line-height:1.5;position:relative;padding-left:36px}
.notlar > li:last-child{border-bottom:none}
.notlar > li::before{content:'§';position:absolute;left:20px;top:10px;color:var(--accent);font-weight:800}

/* ── Modal ── */
.overlay{position:fixed;inset:0;background:rgba(15,22,41,.45);display:grid;place-items:center;z-index:900;padding:24px}
.modal{background:var(--surface);border-radius:14px;width:min(720px,100%);max-height:90vh;overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.modal-h{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;background:var(--surface);z-index:1}
.modal-h h3{font-size:1.05rem}
.modal-b{padding:22px}
.modal-f{padding:16px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;position:sticky;bottom:0;background:var(--surface)}
.x{background:none;border:none;font-size:1.5rem;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px}
.x:hover{color:var(--navy)}

/* ── Hesap kutusu ── */
.hesap{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.hesap .satir{display:flex;justify-content:space-between;gap:12px;font-size:.86rem;color:var(--muted)}
.hesap .satir b{color:var(--navy);font-variant-numeric:tabular-nums}
.hesap .sonuc{border-top:1px dashed var(--border-strong);padding-top:8px;font-size:.95rem;font-weight:800;color:var(--navy)}
.hesap .sonuc b{color:var(--ok);font-size:1.15rem}

/* ── Kural seti ── */
.kural-kalem{margin-bottom:16px}
.kural-kalem .card-h .badge{margin-left:auto}
.kural-genel > li{display:flex;gap:14px;padding:12px 20px;border-bottom:1px solid var(--border);font-size:.86rem;line-height:1.5}
/* .notlar'ın § imi sol 20px'te duruyor; kural-genel sol boşluğu kaldırdığı için
   im etiketin üstüne biniyordu. Bu listede etiketin kendisi zaten ayraç. */
.kural-genel > li::before{content:none}
.kural-genel > li:last-child{border-bottom:none}
.kural-genel b{flex:none;width:150px;color:var(--navy)}
.kural-genel span{color:var(--muted)}
.sure-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:0;border-top:1px solid var(--border)}
.sure-grid div{padding:14px 18px;border-bottom:1px solid var(--border);border-right:1px solid var(--border)}
.sure-grid .n{font-size:1.35rem;font-weight:800;color:var(--accent-ink);line-height:1.1}
.sure-grid .a{font-size:.86rem;font-weight:700;margin-top:2px}
.sure-grid .d{font-size:.76rem;color:var(--muted);margin-top:3px;line-height:1.45}

@media (max-width:900px){
  .shell{grid-template-columns:64px 1fr}
  .brand b,.brand small,.nav-item span,.nav-group-title{display:none}
  .nav-item{justify-content:center}
  .grid2{grid-template-columns:1fr}
  .tenant select{min-width:150px}
}

/* ── Eksiklik bildirimi ── */
.btn-warn{background:var(--caution-soft);color:var(--caution);border:1px solid color-mix(in srgb,var(--caution) 32%,var(--surface));box-shadow:0 2px 0 rgba(0,0,0,.05),0 5px 12px rgba(0,0,0,.07)}
.btn-warn:hover{background:color-mix(in srgb,var(--caution-soft) 82%,var(--caution))}
.eksiklik-serit{display:flex;align-items:center;gap:16px;background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 30%,var(--surface));
  border-left:4px solid var(--warn);border-radius:10px;padding:14px 18px;margin-bottom:14px}
.eksiklik-serit>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.eksiklik-serit b{font-size:.9rem;color:var(--warn)}
.eksiklik-serit span{font-size:.82rem;color:var(--muted);line-height:1.45}
.eksiklik-serit span b{color:var(--navy);font-size:.82rem}

/* ── Ek belgeler ── */
.ekler{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
.ek{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:7px;padding:3px 4px 3px 9px;font-size:.78rem;max-width:100%}
.ek a{color:var(--accent-ink);font-weight:600;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.ek a:hover{text-decoration:underline}
.ek small{color:var(--faint);font-variant-numeric:tabular-nums;flex:none}
.ek-x{background:none;border:none;color:var(--faint);font-size:1rem;line-height:1;cursor:pointer;padding:1px 5px;border-radius:5px;flex:none}
.ek-x:hover{background:var(--danger-soft);color:var(--danger)}
.ek-ekle{background:none;border:1px dashed var(--border-strong);color:var(--muted);font-family:inherit;
  font-size:.76rem;font-weight:600;padding:4px 10px;border-radius:7px;cursor:pointer}
.ek-ekle:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
.evrak li.drop{background:var(--accent-soft);outline:2px dashed var(--accent);outline-offset:-3px}

/* ── Danışman görünümü ── */
.firma-et{color:var(--accent-ink);font-weight:800}
.satir-uyari{margin-top:6px;font-size:.76rem;color:var(--warn);background:var(--warn-soft);
  border:1px solid color-mix(in srgb,var(--warn) 30%,var(--surface));border-radius:6px;padding:4px 8px;line-height:1.4}
.eksiklik-serit.kural{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 30%,var(--surface));border-left-color:var(--danger)}
.eksiklik-serit.kural b{color:var(--danger)}

/* ── Hedef pazar saatleri ── */
.pazar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0;
  border-top:1px solid var(--border)}
.pazar{padding:14px 20px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);
  display:flex;flex-direction:column;gap:7px}
.pazar-ust{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pazar-ust b{font-size:.92rem;font-weight:700}
.pazar-bar{height:8px;border-radius:5px;background:var(--surface-2);border:1px solid var(--border);overflow:hidden}
.pazar-fill{height:100%;border-radius:5px;transition:width .4s}
.pazar-fill.ok{background:linear-gradient(90deg,var(--vurgu-1),var(--vurgu-2))}
.pazar-fill.warn{background:linear-gradient(90deg,#d97706,#f59e0b)}
.pazar-fill.danger{background:linear-gradient(90deg,#dc2626,#ef4444)}
.pazar-not{font-size:.76rem;color:var(--muted);line-height:1.45}

/* ── Alt limit ve kural etiketleri ── */
.limit-fill.alt{background:linear-gradient(90deg,#b7791f,#d9a441)}
.kalem-etiketler{display:flex;flex-wrap:wrap;gap:8px 20px;padding:11px 20px;
  background:var(--surface-2);border-bottom:1px solid var(--border);font-size:.78rem;color:var(--muted)}
.kalem-etiketler b{color:var(--navy);font-weight:700}
.kalem-etiketler i{font-style:normal;font-family:ui-monospace,'Cascadia Code',monospace;
  font-size:.72rem;color:var(--accent);background:var(--accent-soft);padding:1px 6px;border-radius:5px}
.kural-genel i.madde{font-style:normal;font-family:ui-monospace,'Cascadia Code',monospace;
  font-size:.72rem;color:var(--accent);background:var(--accent-soft);padding:1px 6px;border-radius:5px}

/* ── Yükümlülük satırı ── */
.uyari.tamam{opacity:.62}
.uyari .gun.ok{color:var(--ok)}
.uyari .btn{flex:none}

/* ── Toplu aktarma ── */
.birak{border:2px dashed var(--border-strong);border-radius:12px;padding:38px 24px;text-align:center;
  cursor:pointer;background:var(--surface-2);transition:border-color .13s,background .13s;
  display:flex;flex-direction:column;gap:6px}
.birak:hover,.birak.etkin{border-color:var(--accent);background:var(--accent-soft)}
.birak b{font-size:1rem}
.birak span{font-size:.83rem;color:var(--muted)}
tr.satir-hatali{background:var(--danger-soft)}
tr.satir-hatali td{border-bottom-color:color-mix(in srgb,var(--danger) 30%,var(--surface))}
.side-sifirla{display:block;margin-top:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  color:#aeb7c6;font-family:inherit;font-size:.72rem;font-weight:600;padding:6px 10px;border-radius:7px;cursor:pointer;width:100%}
.side-sifirla:hover{background:rgba(255,255,255,.13);color:#fff}

/* ── Mutabakat ── */
.kontrol{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--border);align-items:flex-start}
.kontrol:last-child{border-bottom:none}
.kontrol .im{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:.8rem;margin-top:1px}
.kontrol.ok .im{background:var(--ok-soft);color:var(--ok)}
.kontrol.uyari .im{background:var(--caution-soft);color:var(--caution)}
.kontrol.eksik .im{background:var(--danger-soft);color:var(--danger)}
.kontrol b{display:block;font-size:.86rem;font-weight:700}
.kontrol span{display:block;font-size:.82rem;color:var(--muted);line-height:1.45}
.kontrol .ayrinti{font-size:.78rem;color:var(--faint);margin-top:2px}

.kunye-liste{overflow-x:auto}
/* min-width 820 px pencereye sığmıyordu: TUTAR sütunu kesiliyor, kullanıcı
   yatay çubuğu bulup kaydırmak zorunda kalıyordu. Sütunlar daraltıldı ve dosya
   adı esneyen tek sütun yapıldı; tarih alanı tarayıcının takvim düğmesiyle
   birlikte sığacak kadar (128 px) bırakıldı. */
.kunye-satir{display:grid;
  grid-template-columns:minmax(120px,1.4fr) 116px 104px 128px 96px 34px;
  gap:6px;align-items:center;padding:9px 16px;border-bottom:1px solid var(--border);
  min-width:0}
.kunye-satir:last-child{border-bottom:none}
.kunye-satir .input{padding:5px 8px;font-size:.8rem}
.kunye-ad{min-width:0}
.kunye-ad a{display:block;font-size:.84rem;font-weight:700;color:var(--accent-ink);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kunye-ad a:hover{text-decoration:underline}
.kunye-ad span{display:block;font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kunye-pb{font-size:.78rem;font-weight:600}
.kunye-baslik{background:var(--surface-2);font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted);padding-top:8px;padding-bottom:8px}
.kunye-baslik div{white-space:nowrap}

/* ── Marka kırılımı ── */
.marka-liste{display:flex;flex-direction:column}
.marka{border-bottom:1px solid var(--border)}
.marka:last-child{border-bottom:none}
.marka-bas{display:flex;align-items:center;gap:14px;width:100%;padding:14px 20px;background:none;
  border:none;font-family:inherit;text-align:left;cursor:pointer;transition:background .12s}
.marka-bas:hover{background:var(--surface-2)}
.marka-bas .ok{color:var(--muted);font-size:.9rem;transition:transform .16s;flex:none}
.marka-bas .ok.acik{transform:rotate(90deg)}
.marka-ad{flex:1;min-width:0}
.marka-ad b{display:block;font-size:.95rem;font-weight:800;letter-spacing:-.01em}
.marka-ad span{display:block;font-size:.78rem;color:var(--muted);margin-top:1px}
.marka-sayilar{display:flex;gap:26px;flex:none}
.marka-sayilar span{font-size:.72rem;color:var(--muted);text-align:right;display:block}
.marka-sayilar b{display:block;font-size:1.05rem;font-weight:800;color:var(--navy);
  font-variant-numeric:tabular-nums;line-height:1.2}
.marka-govde{background:var(--surface-2);border-top:1px solid var(--border);padding-bottom:4px}
.marka-alt-baslik{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);padding:14px 20px 8px}
.marka-govde .pazar-grid{background:var(--surface);border-top:1px solid var(--border);
  border-bottom:1px solid var(--border)}
.marka-govde .tablewrap{background:var(--surface);border-top:1px solid var(--border)}
.marka-not{padding:12px 20px;font-size:.8rem;color:var(--warn);background:var(--warn-soft);
  border-top:1px solid var(--border)}
@media (max-width:900px){.marka-sayilar{display:none}}
.marka-ipucu{margin:0;padding:10px 20px 0;font-size:.76rem;color:var(--faint)}

/* ── Müşteri tanımları ── */
.tanim-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px 18px}
.tanim-izgara label{display:block;font-size:.78rem;font-weight:600;color:var(--muted)}
.tanim-izgara .input{margin-top:5px}
tr.ekle-satir{background:var(--surface-2)}
tr.ekle-satir td{padding-top:10px;padding-bottom:10px;vertical-align:middle}
tr.ekle-satir .input{padding:6px 9px;font-size:.82rem}
.onay{display:flex;align-items:center;gap:7px;font-size:.82rem;color:var(--muted);font-weight:600}
.onay input{width:16px;height:16px;accent-color:var(--vurgu-1);cursor:pointer}

/* ── Rapor ── */
.rapor-cubuk{display:inline-block;width:120px;height:10px;border-radius:6px;background:var(--surface-2);
  border:1px solid var(--border);overflow:hidden;vertical-align:middle;margin-right:9px}
.rapor-dolgu{height:100%;border-radius:6px}
.rapor-dolgu.ok{background:linear-gradient(90deg,#16a34a,#4ade80)}
.rapor-dolgu.warn{background:linear-gradient(90deg,#d97706,#f59e0b)}
.rapor-dolgu.danger{background:linear-gradient(90deg,#dc2626,#ef4444)}
.rapor-oran{font-variant-numeric:tabular-nums;font-weight:700;font-size:.84rem}
.rapor-oran.ok{color:var(--ok)} .rapor-oran.warn{color:var(--caution)} .rapor-oran.danger{color:var(--danger)}
.rapor-not{margin:0;padding:14px 20px;font-size:.82rem;line-height:1.6;color:var(--muted);
  background:var(--surface-2);border-top:1px solid var(--border)}
/* Oran hücresi: çubuk ile yüzde aynı satırda kalmalı */
.table td:has(.rapor-cubuk){white-space:nowrap}

/* Başlangıç tarihi girilmemiş pazarlar — onlarca olabildiği için kart değil,
   müşteri başına tek satır + ülke rozetleri. */
.eksik-satir{display:flex;gap:14px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--border)}
.eksik-satir:first-of-type{border-top:0}
.eksik-firma{min-width:210px;font-weight:600;font-size:.88rem}
.eksik-firma span{display:block;font-weight:400;font-size:.76rem;color:var(--muted)}
.eksik-rozetler{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:2px 9px;border-radius:20px;font-size:.76rem;border:1px solid var(--border);color:var(--muted);background:var(--surface-2)}

/* Red analizi çapraz süzgeci: kalem/tedarikçi/marka/yıl birbirini daraltır */
.arama-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:14px 20px}
/* .input kuralı width:100% veriyor; çubuktaki alanlar onu ezmezse her biri
   kendi satırına düşüyor ve arama çubuğu dört satır oluyordu. */
.arama-bar .input{width:auto}
.arama-bar .ara-giris{flex:1 1 260px;min-width:200px}
.arama-bar select.input{flex:0 0 auto;min-width:160px}
.arama-bar .btn{flex:0 0 auto}
.arama-not{padding:0 20px 14px;font-size:.82rem;color:var(--muted)}

/* ── Sayfa gezinme ── */
.sayfa-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 16px;background:var(--surface-2);border-bottom:1px solid var(--border);flex-wrap:wrap}
.sayfa-bar.alt{border-bottom:none;border-top:1px solid var(--border)}
.sayfa-bilgi{font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}
.sayfa-bilgi b{color:var(--navy)}
.sayfa-dugmeler{display:flex;align-items:center;gap:4px}
.sayfa-d{min-width:32px;height:30px;padding:0 8px;border-radius:7px;border:1px solid var(--border);
  background:var(--surface);color:var(--muted);font-size:.82rem;font-weight:700;cursor:pointer;
  font-family:inherit;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;
  justify-content:center;transition:all .12s}
.sayfa-d:hover:not(:disabled){background:var(--accent-soft);color:var(--accent-ink);border-color:var(--border-strong)}
.sayfa-d:disabled{opacity:.4;cursor:default}
.sayfa-d.secili{background:var(--metal-btn);border-color:var(--metal-kenar);color:#fff}
.sayfa-uc{color:var(--faint);padding:0 2px;font-size:.82rem}
.sayfa-boyut{display:flex;align-items:center;gap:7px;font-size:.8rem;color:var(--muted)}
.sayfa-boyut select{padding:4px 8px;border-radius:7px;border:1px solid var(--border);
  background:var(--surface);font-family:inherit;font-size:.8rem;color:var(--navy)}
.arama-not b{color:var(--text)}

/* Eksiklik karşılaştırması: iki kova yan yana, oranlar aynı ölçekte */
.eks-ikili{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:18px 20px}
.eks-kova{border:1px solid var(--border);border-radius:10px;padding:14px 16px;background:var(--surface)}
.eks-kova.kotu{border-color:color-mix(in srgb,var(--danger) 30%,var(--surface));background:var(--danger-soft)}
.eks-kova.iyi{border-color:color-mix(in srgb,var(--ok) 32%,var(--surface));background:var(--ok-soft)}
.eks-baslik{font-size:.8rem;font-weight:700;color:var(--muted);letter-spacing:.02em}
.eks-oran{font-size:1.9rem;font-weight:800;line-height:1.1;margin-top:4px;font-variant-numeric:tabular-nums}
.eks-kova.kotu .eks-oran{color:var(--danger)}
.eks-kova.iyi .eks-oran{color:var(--ok)}
.eks-alt{font-size:.78rem;color:var(--muted);margin-top:3px}
.eks-kova.tiklanir{cursor:pointer;transition:transform .12s,box-shadow .12s}
.eks-kova.tiklanir:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(35,42,53,.12)}
.eks-kova.secili{outline:2px solid var(--accent);outline-offset:2px}
.eks-sec{font-size:.72rem;font-weight:700;color:var(--accent);margin-top:8px}

/* Çekmecedeki dosya listesi */
.cek-ozet{padding:12px 18px;border-bottom:1px solid var(--border);background:var(--surface-2);
  font-size:.84rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 16px;align-items:center}
.cek-ozet b{color:var(--navy);font-variant-numeric:tabular-nums}
.cek-liste{display:flex;flex-direction:column}
.cek-satir{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:12px 18px;
  border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s}
.cek-satir:hover{background:var(--surface-2)}
.cek-ad{grid-column:1;font-weight:700;font-size:.9rem;line-height:1.3}
.cek-alt{grid-column:1;font-size:.78rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:2px 12px}
.cek-sag{grid-column:2;grid-row:1/3;text-align:right;display:flex;flex-direction:column;
  align-items:flex-end;gap:5px;justify-content:center}
.cek-tutar{font-weight:800;font-variant-numeric:tabular-nums;font-size:.9rem;white-space:nowrap}
.drawer-foot{padding:12px 18px;border-top:1px solid var(--border);background:var(--surface-2);
  display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* Panodaki sayilar birer kapi: tiklaninca o sayiyi ureten listeyi acar */
.kpi.tiklanir{cursor:pointer;transition:transform .12s,box-shadow .12s}
.kpi.tiklanir:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(35,42,53,.13)}
.kpi.tiklanir:active{transform:translateY(0)}
.kpi .git{font-size:.7rem;font-weight:700;color:var(--accent);opacity:0;transition:opacity .12s}
.kpi.tiklanir:hover .git{opacity:1}

/* Pano: Birlik'te bekleyenler */
.bekle-govde{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px 20px 6px}
.bekle-kutu{border:1px solid var(--border);border-radius:10px;padding:12px 14px;background:var(--surface-2)}
.bekle-kutu b{display:block;font-size:1.35rem;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}
.bekle-kutu .e{font-size:.76rem;color:var(--muted);font-weight:600}
.bekle-kutu .a{font-size:.74rem;color:var(--faint);margin-top:2px}
.bekle-risk{margin:10px 20px 0;padding:12px 14px;border-radius:10px;background:var(--danger-soft);
  border:1px solid color-mix(in srgb,var(--danger) 30%,var(--surface));display:flex;align-items:center;gap:12px;cursor:pointer}
.bekle-risk .n{font-size:1.5rem;font-weight:800;color:var(--danger);font-variant-numeric:tabular-nums}
.bekle-risk .t{font-size:.83rem;color:var(--text);line-height:1.4}
.bekle-risk:hover{filter:brightness(.98)}
@media (max-width:900px){.bekle-govde{grid-template-columns:1fr}}

.eks-sure{display:flex;flex-wrap:wrap;gap:8px 26px;padding:0 20px 16px;font-size:.83rem;color:var(--muted)}
.eks-sure b{color:var(--text);font-variant-numeric:tabular-nums}
@media (max-width:900px){.eks-ikili{grid-template-columns:1fr}}

.suzgec-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
.suzgec-bar .muted{font-size:.8rem}
.suzgec{display:inline-flex;align-items:center;gap:6px;padding:4px 5px 4px 12px;border-radius:20px;
  font-size:.79rem;font-weight:600;background:var(--accent-soft);color:var(--accent-ink)}
.suzgec span{font-weight:400;opacity:.75}
.suzgec button{border:0;background:transparent;color:inherit;cursor:pointer;font-size:1.05rem;
  line-height:1;padding:0 5px;opacity:.6}
.suzgec button:hover{opacity:1}
tr.tiklanir{cursor:pointer}
tr.tiklanir:hover{background:var(--surface-2)}
tr.secili{background:var(--accent-soft)}
tr.secili td b{color:var(--accent-ink)}
.yazim-not{font-size:.71rem;color:var(--muted);font-weight:400;white-space:nowrap}

/* Veri Kaynakları — sınırlar ve bulgular */
.sinir-liste{margin:0;padding-left:18px}
.sinir-liste li{margin:0 0 6px;line-height:1.5}
.sinir-liste li:last-child{margin-bottom:0}
.kaynak-uyari{background:var(--warn-soft);color:var(--warn);border-radius:8px;padding:7px 10px;font-size:.8rem;line-height:1.45;margin-bottom:6px}
.kaynak-bilgi{background:var(--surface-2);color:var(--muted);border-radius:8px;padding:7px 10px;font-size:.8rem;line-height:1.45}
.kural-genel code{font-family:ui-monospace,'Cascadia Code',monospace;font-size:.78rem;background:var(--surface-2);padding:1px 6px;border-radius:5px;word-break:break-all}

/* Yandan açılan çekmece — Cernora'daki desenin aynısı, tokenler zaten ortak. */
.drawer-root{position:fixed;inset:0;z-index:50;visibility:hidden;pointer-events:none}
.drawer-root.open{visibility:visible;pointer-events:auto}
.drawer-ov{position:absolute;inset:0;background:rgba(20,25,33,.4);opacity:0;transition:opacity .2s}
.drawer-root.open .drawer-ov{opacity:1}
.drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(600px,94vw);background:var(--surface);
  box-shadow:-10px 0 34px rgba(20,25,33,.28);transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;overflow:hidden}
.drawer-root.open .drawer-panel{transform:translateX(0)}
.drawer-head{display:flex;align-items:flex-start;gap:12px;padding:18px 22px;border-bottom:1px solid var(--border);background:var(--metal-light)}
.drawer-head h2{font-size:1.15rem;font-weight:800}
.drawer-head .x{margin-left:auto;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--muted);line-height:1;padding:0 4px}
.drawer-head .x:hover{color:var(--navy)}
.drawer-body{padding:20px 22px;overflow-y:auto;flex:1}
@media (prefers-reduced-motion:reduce){
  .drawer-panel{transition:none}.drawer-ov{transition:none}
}

/* Çekmece içindeki kaynak kartları */
.kk{border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:12px;background:var(--surface)}
.kk:last-child{margin-bottom:0}
.kk-ust{display:flex;align-items:center;gap:9px;margin-bottom:4px}
.kk-ust b{font-size:.92rem}
.kk-nokta{width:8px;height:8px;border-radius:50%;flex:none}
.kk-nokta.taze{background:var(--ok)}
.kk-nokta.eski{background:var(--warn)}
.kk-nokta.yok,.kk-nokta.kullanılmadı{background:var(--muted)}
.kk-nokta.elle{background:var(--accent)}
.kk-nokta.erisilemez{background:var(--danger)}
.kk-baslik{font-size:.84rem;color:var(--muted);margin-bottom:10px}
.kk-satir{display:flex;gap:12px;font-size:.8rem;padding:4px 0;border-top:1px solid var(--border)}
.kk-satir span:first-child{color:var(--muted);flex:none;width:180px}
.kk-satir span:last-child{color:var(--navy);font-weight:600}
.kk-alt{display:flex;align-items:center;gap:10px;margin-top:10px}
.kk-zaman{font-size:.74rem;color:var(--muted);margin-left:auto}

/* Panodaki zaman görünümleri */
.zaman-izgara{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;align-items:start}
@media (max-width:1100px){.zaman-izgara{grid-template-columns:1fr}}

/* Birlik'te bekleme yaşlandırması — sütunlar */
.yas-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:16px 20px 6px}
.yas{text-align:center;min-width:0}
.yas-cubuk{height:92px;display:flex;align-items:flex-end;justify-content:center;
  background:var(--surface-2);border-radius:8px;padding:5px;margin-bottom:8px}
.yas-dolgu{width:100%;border-radius:5px;min-height:3px}
.yas-dolgu.ok{background:var(--ok)}
.yas-dolgu.warn{background:var(--warn)}
.yas-dolgu.danger{background:var(--danger)}
.yas-n{font-size:1.15rem;font-weight:800;color:var(--navy);line-height:1.1}
.yas-ad{font-size:.72rem;color:var(--muted);margin-top:2px;line-height:1.3}
.yas-tutar{font-size:.72rem;color:var(--muted);opacity:.75;margin-top:2px}
.yas-kritik{color:var(--danger)}
.yas-uyari{color:var(--warn)}

/* Başvuru marjı — yatay çubuklar */
.marj-liste{padding:16px 20px}
.marj-satir{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.marj-satir:last-child{margin-bottom:0}
.marj-ad{font-size:.8rem;color:var(--muted);width:118px;flex:none}
.marj-bar{flex:1;height:10px;background:var(--surface-2);border-radius:6px;overflow:hidden}
.marj-dolgu{height:100%;border-radius:6px;min-width:4px}
.marj-dolgu.ok{background:var(--ok)}
.marj-dolgu.warn{background:var(--warn)}
.marj-dolgu.danger{background:var(--danger)}
.marj-n{font-size:.88rem;font-weight:700;color:var(--navy);width:34px;text-align:right;flex:none}

/* Dosya zaman çizelgesi — dikey ray */
.dz{border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px 18px;margin-bottom:18px;background:var(--surface-2)}
.dz-baslik{font-size:.78rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.dz-adim{display:flex;gap:12px;align-items:flex-start}
.dz-nokta{width:11px;height:11px;border-radius:50%;flex:none;margin-top:3px;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--border)}
.dz-nokta.ok{background:var(--ok)}
.dz-nokta.warn{background:var(--warn)}
.dz-nokta.danger{background:var(--danger)}
.dz-nokta.neutral{background:var(--muted)}
.dz-nokta.sinir{background:var(--surface);box-shadow:0 0 0 2px var(--accent)}
.dz-nokta.simdi{background:var(--accent)}
.dz-govde{flex:1;min-width:0}
.dz-ad{display:flex;gap:10px;align-items:baseline;font-size:.86rem;font-weight:700;color:var(--navy)}
.dz-tarih{margin-left:auto;font-weight:600;font-size:.8rem;color:var(--muted);white-space:nowrap}
.dz-not{font-size:.76rem;color:var(--muted);margin-top:1px;line-height:1.4}
.dz-ara{margin:2px 0 2px 5px;padding-left:18px;border-left:2px dotted var(--border);height:20px;
  display:flex;align-items:center}
.dz-ara span{font-size:.72rem;color:var(--muted);opacity:.85}

/* Tanım tablolarında satır içi düzenleme alanları */
.input-sm{padding:5px 8px;font-size:.82rem;height:auto;min-height:0}

/* Belge sürüm rozeti */
.ek-surum{border:1px solid var(--accent);background:var(--accent-soft);color:var(--accent-ink);
  border-radius:20px;font-size:.68rem;font-weight:800;padding:1px 7px;cursor:pointer;line-height:1.5}
.ek-surum:hover{background:var(--accent);color:#fff}

/* Giriş ekranı */
body.giris-modu{background:var(--bg);min-height:100vh}
.giris-sayfa{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.giris-kart{width:min(400px,100%);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:28px;box-shadow:0 12px 34px rgba(20,25,33,.10)}
.giris-marka{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.giris-logo{width:40px;height:40px;border-radius:11px;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.15rem}
.giris-marka b{display:block;font-size:1.05rem;color:var(--navy)}
.giris-marka span{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.giris-hata{background:var(--danger-soft);color:var(--danger);border-radius:8px;
  padding:9px 12px;font-size:.83rem;margin-bottom:12px}
.giris-not{font-size:.74rem;color:var(--muted);line-height:1.55;margin:16px 0 0}
.giris-not code{font-family:ui-monospace,'Cascadia Code',monospace;font-size:.72rem;
  background:var(--surface-2);padding:1px 5px;border-radius:4px;word-break:break-all}

/* ── Birlik postası ────────────────────────────────────────────────────────
   Ekran iki adımlı: solda yapıştırılan yazı ve onun ÇÖZÜMÜ, sağda işlenmiş
   yazıların arşivi. Çözüm kartı henüz uygulanmamış bir öneridir; bu yüzden
   kenarı vurgulu, arşiv satırları sakin. */
.posta-izgara{display:grid;grid-template-columns:1.05fr 1fr;gap:16px;align-items:start}
.posta-alan{width:calc(100% - 40px);margin:0 20px;padding:12px 14px;border:1px solid var(--border);
  border-radius:8px;background:var(--surface-2);color:var(--ink);resize:vertical;
  font-family:ui-monospace,'Cascadia Code',monospace;font-size:.78rem;line-height:1.6}
.posta-alan:focus{outline:2px solid var(--accent);outline-offset:1px;background:var(--surface)}
.posta-eylem{display:flex;align-items:center;gap:10px;padding:12px 20px}
.posta-cozum{border-left:3px solid var(--accent)}
.posta-kunye{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px 20px;
  border-bottom:1px solid var(--border)}
.posta-kunye .k{display:block;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--faint)}
.posta-kunye .v{font-weight:700;font-size:.86rem;font-variant-numeric:tabular-nums}
.posta-dosya{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;
  padding:12px 20px;border-bottom:1px solid var(--border)}
.posta-dosya.tiklanir{cursor:pointer}
.posta-dosya.tiklanir:hover{background:var(--surface-2)}
.posta-dosya-ad{font-weight:700;font-size:.9rem}
.posta-dosya.secilebilir{cursor:pointer;border-left:3px solid transparent}
.posta-dosya.secilebilir:hover{background:var(--surface-2)}
.posta-dosya.secilebilir.secili{border-left-color:var(--accent);background:var(--accent-soft)}
.posta-uyari{margin:14px 20px 0;padding:10px 12px;border-radius:8px;font-size:.83rem;
  line-height:1.55;background:var(--caution-soft);color:var(--caution)}
.posta-etiketler{display:flex;flex-wrap:wrap;gap:6px;padding:12px 20px 0}
.posta-etiketler.kucuk{padding:4px 0 0;grid-column:1}
.posta-etiket{border:1px solid var(--border-strong);background:var(--surface-2);color:var(--accent-ink);
  border-radius:20px;font-size:.7rem;font-weight:700;padding:2px 9px;cursor:help}
.posta-gerekce{padding:12px 20px 0}
.posta-gerekce .k{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.posta-gerekce p{margin:4px 0 0;padding:10px 12px;border-left:2px solid var(--border-strong);
  background:var(--surface-2);border-radius:0 8px 8px 0;font-size:.85rem;line-height:1.6}
.posta-ref{padding:14px 20px 0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.posta-ref .k{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);
  width:100%}
.posta-ref-no{font-family:ui-monospace,'Cascadia Code',monospace;font-size:.76rem;font-weight:700;
  border:1px solid var(--border-strong);border-radius:6px;padding:2px 8px;background:var(--surface-2)}
.posta-ref-no.tiklanir{cursor:pointer;border-color:var(--accent);color:var(--accent-ink)}
.posta-ref-no.tiklanir:hover{background:var(--accent);color:#fff}
.posta-ref-no.yok{color:var(--faint);border-style:dashed}
.posta-ref .rapor-not{padding:6px 0 0;width:100%}
.posta-onceki{margin:14px 20px 0;font-size:.8rem;color:var(--muted)}
.posta-etki{margin:14px 20px 0;padding:11px 13px;border-radius:8px;font-size:.84rem;line-height:1.6;
  background:var(--accent-soft);color:var(--accent-ink)}
.posta-sayac{display:flex;gap:16px;padding:10px 20px;border-bottom:1px solid var(--border);
  font-size:.82rem;color:var(--muted)}
.posta-satir-gerekce{grid-column:1;font-size:.78rem;line-height:1.5;color:var(--muted);
  margin-top:2px}
.posta-bitti{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 20px;margin-bottom:16px;border-left:3px solid var(--ok);font-size:.86rem}
@media (max-width:1180px){.posta-izgara{grid-template-columns:1fr}}

/* ── Yurt dışı birimler ────────────────────────────────────────────────────
   133 birim tek tabloya sığmaz; kart önce özet verir, sonra aranan satırları.
   "Adlandırılmamış" bir sayı değil bir iş listesi: tıklanıp süzülüyor. */
.birim-ozet{display:flex;flex-wrap:wrap;gap:6px 20px;padding:12px 20px;
  border-bottom:1px solid var(--border);font-size:.83rem;color:var(--muted)}
.birim-ozet b{color:var(--ink);font-variant-numeric:tabular-nums}
.birim-ozet .uyari b{color:var(--caution)}
.birim-ozet .tiklanir{cursor:pointer;text-decoration:underline dotted}
.birim-arac{display:flex;gap:10px;padding:12px 20px;align-items:center}
.birim-arac .input{flex:1}
.birim-adsiz{color:var(--faint);font-weight:600}
.birim-no{font-family:ui-monospace,'Cascadia Code',monospace;font-size:.7rem;color:var(--faint)}
.birim-daha{padding:10px 20px;border-top:1px solid var(--border)}
.dosya-birim{cursor:pointer;border-bottom:1px dotted var(--accent);color:var(--accent-ink)}
.dosya-birim:hover{color:var(--accent);border-bottom-style:solid}
/* HDN = harcama DOSYA numarası; altındaki küçük rozetler o dosyadaki beyanlar. */
.posta-ref-grup{display:inline-flex;align-items:center;gap:4px;padding:3px 4px 3px 0;
  border:1px solid var(--border);border-radius:8px;background:var(--surface-2)}
.posta-ref-grup .posta-ref-no{border:0;background:transparent;padding:2px 6px}
.posta-ref-beyan{font-family:ui-monospace,'Cascadia Code',monospace;font-size:.72rem;
  font-weight:700;border:1px solid var(--accent);border-radius:5px;padding:1px 6px;
  background:var(--surface);color:var(--accent-ink);cursor:pointer}
.posta-ref-beyan:hover{background:var(--accent);color:#fff}

/* ── Şirket profili ────────────────────────────────────────────────────────
   Profil şeridi: şirketin yapısı tek bakışta, her kutu kendi bölümüne götürür. */
.profil-serit{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:10px;margin-bottom:16px}
.profil-kutu{display:flex;flex-direction:column;gap:2px;padding:12px 14px;text-decoration:none;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  color:var(--ink);transition:border-color .12s,transform .12s}
.profil-kutu:hover{border-color:var(--accent);transform:translateY(-1px)}
.profil-kutu .n{font-size:1.35rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.profil-kutu .e{font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}

/* Satır içi düzenlenen alanlar tabloya gömülü görünsün, kutu gibi durmasın. */
.input.duz{border-color:transparent;background:transparent;padding:4px 6px;font-weight:700}
.input.duz:hover{border-color:var(--border)}
.input.duz:focus{border-color:var(--accent);background:var(--surface)}
.input.duz.num{text-align:right}
.input.kaydedildi{border-color:var(--ok);background:var(--ok-soft)}

.onay-satir{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;margin-bottom:12px;
  border:1px solid var(--border);border-radius:8px;background:var(--surface-2);
  font-size:.82rem;line-height:1.55;cursor:pointer}
.onay-satir input{margin-top:3px}

/* Karşı taraf dizini geniş çekmecede açılır: tablo dar panele sığmıyor. */
.drawer-panel.genis{width:min(860px,96vw)}
.kt-arac{display:flex;gap:8px;align-items:center;padding:12px 20px;flex-wrap:wrap}
.kt-arac .input{flex:1;min-width:160px}
.kt-arac + .cek-ozet + .tablewrap .btn{white-space:nowrap}

/* ── Aranabilir seçici ─────────────────────────────────────────────────────
   Native <datalist> yerine: 449 tedarikçiyi tarayıcı ekran boyunca döküyor,
   yüksekliği sınırlanamıyor ve içinde arama yapılamıyordu. */
.secici{position:relative}
.secici-liste{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 4px);
  max-height:260px;overflow-y:auto;background:var(--surface);
  border:1px solid var(--border-strong);border-radius:10px;
  box-shadow:0 12px 28px rgba(20,25,33,.16)}
.secici-bilgi{position:sticky;top:0;background:var(--surface-2);
  border-bottom:1px solid var(--border);padding:7px 12px;font-size:.73rem;
  letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.secici-satir{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--border)}
.secici-satir:last-child{border-bottom:0}
.secici-satir:hover,.secici-satir.vurgulu{background:var(--accent-soft)}
.secici-satir .ad{font-size:.84rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.secici-satir .bilgi{font-size:.73rem;color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.secici-satir.yeni{position:sticky;bottom:0;background:var(--surface);
  border-top:1px solid var(--border-strong)}
.secici-satir.yeni:hover,.secici-satir.yeni.vurgulu{background:var(--accent-soft)}
.uyari-satir{color:var(--caution);font-weight:600}
/* Dar sütunlarda gereksiz iç boşluk metni kesiyordu. */
.kunye-satir .input{min-width:0}
.kunye-satir input[type="date"]{padding-left:5px;padding-right:2px}
.kunye-baslik{font-size:.72rem;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}

/* ── Panorama ──────────────────────────────────────────────────────────────
   Bütün kırılımlar tek ekranda ve hepsi aynı süzgece bağlı. Çubuklar SVG değil
   düz DOM: ölçekleme tarayıcıya bırakılıyor, dar ekranda kendiliğinden akıyor. */
.pan-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px}
.pan-kart{display:flex;flex-direction:column}
.pan-liste{display:flex;flex-direction:column}
.pan-satir{padding:9px 20px;border-bottom:1px solid var(--border);cursor:pointer;
  transition:background .12s}
.pan-satir:last-child{border-bottom:0}
.pan-satir:hover{background:var(--surface-2)}
.pan-satir.secili{background:var(--accent-soft)}
.pan-satir.secili .pan-ad{color:var(--accent-ink)}
.pan-ust{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pan-ad{font-size:.85rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;min-width:0}
.pan-deger{font-size:.82rem;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.pan-cubuk{height:6px;border-radius:4px;background:var(--surface-2);margin:5px 0 4px;overflow:hidden}
.pan-cubuk i{display:block;height:100%;border-radius:4px;transition:width .25s}
.pan-alt{display:flex;gap:12px;font-size:.74rem;color:var(--muted);flex-wrap:wrap}
.pan-red{font-weight:700}
.pan-red.iyi{color:var(--ok)}
.pan-red.orta{color:var(--caution)}
.pan-red.kotu{color:var(--danger)}

.pan-suzgec{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px;
  padding:10px 14px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius)}
.pan-cip{border:1px solid var(--accent);background:var(--accent-soft);color:var(--accent-ink);
  border-radius:20px;padding:3px 11px;font-size:.78rem;font-weight:700;cursor:pointer}
.pan-cip:hover{background:var(--accent);color:#fff}

.pan-zaman-yuva{padding:12px 20px 0}
.pan-zaman{width:100%;height:auto;display:block}
.pan-yil-etiket{font-size:9px;fill:var(--faint)}
.pan-ay:hover rect{opacity:1}
.pan-lejant{display:flex;gap:16px;padding:6px 20px 12px;font-size:.76rem;color:var(--muted)}
.pan-lejant span{display:inline-flex;align-items:center;gap:6px}
.pan-lejant i{width:11px;height:11px;border-radius:3px;display:inline-block}
.pan-lejant i.cizgi{height:3px;border-radius:2px}

/* ── Dosya listesi hizalaması ──────────────────────────────────────────────
   Üst satır sabit sütunlarda: Birlik numarası olmayan kayıtta rozetler sola
   kayıyor, sütun boyunca hiçbir şey aynı hizada durmuyordu. */
.d-ust{display:grid;grid-template-columns:62px 78px max-content max-content;
  justify-content:start;align-items:center;gap:7px}
.birlik-no.bos{visibility:hidden}
/* Alt alanlar İKİ SIRADA: tek sırada sıkışınca Birlik dosya numarası kırpılıyordu
   ve numara tam olarak yazışmada aranan şey. Tedarikçi kendi satırında, kalan
   üç alan altında sabit sütunlarda. */
.d-alt{margin-top:4px;display:grid;
  grid-template-columns:minmax(0,24ch) minmax(0,22ch) auto;
  gap:2px 14px;font-size:.76rem;color:var(--muted)}
.d-alt .a1{grid-column:1 / -1}
.d-alt > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.d-firma{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:16ch}
@media (max-width:1180px){
  .d-alt{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .d-ust{grid-template-columns:62px 78px auto}
}

/* ── Rapor kurucu ──────────────────────────────────────────────────────────
   Danışmanın Excel'de kurduğu pivotun karşılığı: satır ▸ alt kırılım × sütun,
   ölçüler yan yana. Eksenleri kullanıcı seçiyor, hazır kalıp dayatılmıyor. */
.r-sekme{display:flex;gap:6px;margin-bottom:14px}
.r-sekme button{padding:7px 16px;border:1px solid var(--border);background:var(--surface);
  border-radius:8px;font-size:.85rem;font-weight:700;color:var(--muted);cursor:pointer}
.r-sekme button.acik{background:var(--navy);border-color:var(--navy);color:#fff}
.r-secim{margin-bottom:14px;padding:14px 18px}
.r-satir{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}
.r-satir + .r-satir{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.r-satir label{display:flex;flex-direction:column;gap:4px;font-size:.74rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.r-satir label .input,.r-satir select{min-width:190px;text-transform:none;letter-spacing:0}
.r-satir > .label{font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted)}
.r-onay{flex-direction:row !important;align-items:center;gap:6px !important;
  padding:4px 10px;border:1px solid var(--border);border-radius:20px;cursor:pointer;
  text-transform:none !important;letter-spacing:0 !important;font-size:.8rem !important;
  font-weight:600 !important;color:var(--ink) !important}
.r-onay.acik{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink) !important}
.r-hazir button{white-space:nowrap}

.r-tablo th.r-grup{text-align:center;border-left:2px solid var(--border-strong);
  font-size:.74rem;letter-spacing:.03em}
.r-tablo th.r-genel{background:var(--surface-2)}
.r-tablo th.r-olcu{font-size:.7rem;font-weight:600;white-space:nowrap}
.r-tablo td.r-ad{font-weight:700;font-size:.85rem;white-space:nowrap}
.r-tablo tr.r-alt td.r-ad{font-weight:600;color:var(--muted);font-size:.8rem}
.r-girinti{display:inline-block;width:18px}
.r-dosya{margin-left:8px;font-size:.7rem;font-weight:600;color:var(--faint);
  font-variant-numeric:tabular-nums}
.r-tablo td.r-toplam{background:var(--surface-2);font-weight:700}
.r-tablo tfoot td{border-top:2px solid var(--border-strong);background:var(--surface-2)}
.r-tablo td.num,.r-tablo th.num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* Liste mutabakatı: sapma olan satır göze çarpsın, olmayanlar tıklanabilir
   görünmesin — tablodaki genel `cursor:pointer` burada yanıltıcı olurdu. */
.table.mutabakat tbody tr{cursor:default}
.table.mutabakat tbody tr.mutabakat-sapma{cursor:pointer;background:var(--warn-soft)}
.table.mutabakat tbody tr.mutabakat-sapma td:first-child{border-left:3px solid var(--warn)}
.table.mutabakat tbody tr.mutabakat-sapma:hover{filter:brightness(.97)}

/* PANO — dikkat şeridi. Yalnızca sorun varken çizilir; boşken hiç yer
   kaplamaz, çünkü her gün görülen bir uyarı uyarı olmaktan çıkar. */
.dikkat-serit{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.dikkat{display:flex;align-items:baseline;gap:10px;padding:9px 13px;border-radius:9px;
  border:1px solid var(--border);background:var(--surface);cursor:pointer;font-size:.84rem}
.dikkat b{font-weight:700;white-space:nowrap}
.dikkat span{color:var(--muted);flex:1;line-height:1.4}
.dikkat em{font-style:normal;font-size:.76rem;color:var(--muted);white-space:nowrap}
.dikkat:hover{filter:brightness(.985)}
.dikkat.danger{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 30%,var(--surface))}
.dikkat.danger b{color:var(--danger)}
.dikkat.warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 30%,var(--surface))}
.dikkat.warn b{color:var(--warn)}
.dikkat.caution{background:var(--caution-soft);border-color:color-mix(in srgb,var(--caution) 30%,var(--surface))}
.dikkat.caution b{color:var(--caution)}

/* PANO — Birlik'te bekleyen özeti. Dört rakam yan yana: bağlı para,
   eksiklik bildirilmiş/bildirilmemiş, ortancayı aşmış olanlar. */
.bekleyen-ozet{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.bekleyen-ozet>div{padding:10px 12px;border-radius:9px;background:var(--surface-2)}
.bekleyen-ozet .k{font-size:.72rem;color:var(--muted);font-weight:600}
.bekleyen-ozet .v{font-size:1.25rem;font-weight:800;margin-top:2px}
.bekleyen-ozet .s{font-size:.72rem;color:var(--muted);margin-top:1px}
.bekleyen-ozet .riskli{background:var(--warn-soft)}
.bekleyen-ozet .riskli .v{color:var(--warn)}

/* Uc rakam yan yana: bagli tutar basliga tasindi, burada risk kaldi. */
.bekleyen-ozet.uclu{grid-template-columns:repeat(3,1fr)}

/* AYARLAR — kutucuklar. TeknopolCRM tile duzeni: renkli ikon karesi ustte,
   ad ve tek satirlik aciklama altta. Aciklama sart: "Veri Kaynaklari" tek
   basina hicbir sey anlatmiyor. */
.kutucuk-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:16px;margin-top:4px;max-width:920px}
.kutucuk{position:relative;display:flex;flex-direction:column;align-items:flex-start;
  gap:10px;padding:20px;border-radius:16px;cursor:pointer;text-align:left;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);
  transition:transform .14s,box-shadow .14s;font-family:inherit}
.kutucuk:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(35,42,53,.13)}
.kutucuk:active{transform:translateY(0)}
.kutucuk-ikon{width:46px;height:46px;border-radius:13px;display:flex;
  align-items:center;justify-content:center}
.kutucuk-ikon svg{width:23px;height:23px}
.kutucuk-ad{font-size:1rem;font-weight:700;color:var(--ink)}
.kutucuk-not{font-size:.78rem;color:var(--muted);line-height:1.45}
.kutucuk-rozet{position:absolute;top:14px;right:14px}

/* Rozet gorunumlu dugme: sayi tiklanabilir oldugunu belli etsin. */
.badge-dugme{border:none;cursor:pointer;font-family:inherit;font-size:.74rem;
  font-weight:700;padding:3px 10px;border-radius:20px}
.badge-dugme:hover{filter:brightness(.94)}

/* ── Guvenlik ve MFA ────────────────────────────────────────────────────── */
/* Serit: karta girmeye degmeyen ama gorulmesi gereken tek cumlelik durum. */
.serit{border-radius:9px;padding:10px 13px;font-size:.83rem;line-height:1.5;
  margin-bottom:12px;border:1px solid transparent}
.serit.ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-soft)}
.serit.warn{background:var(--warn-soft);color:var(--warn)}
.serit.caution{background:var(--caution-soft);color:var(--caution)}
.serit.danger{background:var(--danger-soft);color:var(--danger)}

/* Islem hucresi: dugmeler sigmadiginda alt satira aksin, tabloyu genisletmesin. */
.islem-hucre{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.btn-tehlike{color:var(--danger)}
.btn-tehlike:hover{background:var(--danger-soft)}

/* Kod girisi: alti hane okunakli ve genis aralikli olmali; kullanici telefonla
   ekran arasinda bakisirken hane kaydirmak en sik hata. */
.kod-girisi{font-size:1.5rem;letter-spacing:.5em;text-align:center;
  font-family:var(--mono,ui-monospace,monospace);padding:12px 8px;
  font-variant-numeric:tabular-nums}

.mfa-baslik{text-align:center;margin-bottom:18px}
.mfa-baslik h2{font-size:1.15rem;margin:0 0 5px}
.mfa-baslik p{margin:0;font-size:.84rem;color:var(--muted)}
.mfa-adim{margin:0 0 16px;padding-left:20px;font-size:.84rem;color:var(--muted);line-height:1.7}
.mfa-adim b{color:var(--ink)}
/* Karekodun zemini HER TEMADA beyaz kalmali: koyu temada tersine donen bir
   kare telefonla okutulamaz. */
.mfa-qr{display:flex;justify-content:center;background:#fff;border-radius:12px;
  padding:14px;border:1px solid var(--border)}
.mfa-qr svg{width:186px;height:186px;display:block}
.mfa-elle{margin-top:12px;font-size:.82rem;color:var(--muted)}
.mfa-elle summary{cursor:pointer;font-weight:600}
.mfa-elle p{margin:8px 0 6px}
.mfa-sir{display:block;font-family:var(--mono,ui-monospace,monospace);font-size:.95rem;
  letter-spacing:.08em;background:var(--surface-2);border-radius:8px;padding:10px;
  text-align:center;word-break:break-all;color:var(--ink)}
.mfa-dugmeler{display:flex;gap:8px;margin-top:10px}

.kurtarma-kutu{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;
  background:var(--surface-2);border-radius:10px;padding:13px;margin-top:12px}
.kurtarma-kutu code{font-family:var(--mono,ui-monospace,monospace);font-size:.92rem;
  letter-spacing:.04em;text-align:center;color:var(--ink);user-select:all}
@media(max-width:420px){.kurtarma-kutu{grid-template-columns:1fr}}

.ozet-satir{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:7px 0;border-bottom:1px solid var(--border);font-size:.85rem}
.ozet-satir:last-of-type{border-bottom:none}
.ozet-satir span{color:var(--muted)}
.kritik-sayi{color:var(--danger)}
.kutu-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
/* MFA adimlarinda kart genisler: 400 piksele karekod, adim listesi ve kod
   kutusu birlikte sigmiyor. */
.giris-kart.giris-genis{width:min(470px,100%)}

/* ── Giris ekrani marka kusagi ──────────────────────────────────────────── */
/* Merkezde yararlanicinin ana logosu, cevresinde agir agir donen kardes
   markalar. Yalnizca public/marka/marka.json varsa cizilir. */
.giris-markali{position:relative}
/* Kart 100vh'i asarsa (MFA kurulumu) flex ortalama ustten tasar ve o kisma
   kaydirilamaz. margin:auto hem ortalar hem tasmayi kaydirilabilir birakir. */
.giris-kart{margin:auto}

/* Kusak yalnizca yer varken gorunur. Dar ekranda halkanin yaricapi karti
   ezer; gizlemek, kucultup ust uste bindirmekten iyidir. */
.yorunge{display:none}
/* Uzun kartta (MFA kurulumu, kurtarma listesi) halka alt/ust kenardan karta
   biner. Kusagi kucultup ust uste bindirmektense o adimlarda gizliyoruz. */
.yorunge-yok .yorunge{display:none!important}
@media (min-width:1040px) and (min-height:680px){
  .yorunge{display:grid;place-items:center;position:absolute;inset:0;
    pointer-events:none;z-index:0;overflow:hidden}
}

.yorunge-halka{
  --yaricap:316px;
  --sure:96s;                 /* bir tur. Yavas olmasi kasitli: hareket fark
                                 edilsin ama parolayi yazan kisiden dikkat
                                 calmasin. */
  position:relative;width:0;height:0;
  animation:yorunge-don var(--sure) linear infinite;
}
@media (min-width:1320px){ .yorunge-halka{--yaricap:344px} }

/* Ogeyi acisina tasir. Kendisi 0x0; cocugu ORTALAMAK icin acik bir
   translate(-50%,-50%) gerekiyor — grid'in place-items:center kurali sifir
   olculu bir alanda tasan cocugu ortalamiyor, sol ust kosesini noktaya
   koyuyor. Sonucu: halka, rozetin yarisi kadar (79x33 piksel) kayik cizildi.
   Olcumle yakalandi; gozle bakinca "biraz sag" gorunuyordu, o kadar. */
.yorunge-yuva{
  position:absolute;top:0;left:0;width:0;height:0;
  transform:rotate(var(--aci)) translate(var(--yaricap)) rotate(calc(-1 * var(--aci)));
}
.yorunge-orta{position:absolute;top:0;left:0;transform:translate(-50%,-50%)}
/* Halkanin donusunu geri alir; logolar hep duz durur. */
.yorunge-oge{animation:yorunge-don var(--sure) linear infinite reverse}

/* Logolarin hepsi beyaz zeminli yatay yazi. Rozet HER TEMADA beyaz kalir:
   koyu temada saydam birakilirsa lacivert yazi lacivert zemine oturur. */
/* Logolar SAYDAM PNG (bkz. araclar/logo-hazirla.js). CSS karisim kipi
   DENENDI ve olmadi: halkanin transform/animation'i yeni bir yigin baglami
   aciyor, mix-blend-mode o baglamin disindaki sayfa zeminini goremiyor.
   PNG'lerde calisiyor gibi gorunuyordu ama onlar zaten saydamdi. */
.yorunge-oge img{
  display:block;width:calc(130px * var(--olcek, 1));height:auto;
  opacity:.55;                 /* zeminle akraba dursun, dikkat calmasin */
}

@keyframes yorunge-don{ from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* Hareketi azaltma tercihi: halka durur, logolar yerinde kalir. */
@media (prefers-reduced-motion:reduce){
  .yorunge-halka,.yorunge-oge{animation:none}
}

/* Kart kusagin ustunde durmali, yoksa logolar karta binebilir. */
.giris-markali .giris-kart{position:relative;z-index:1}

/* Yararlanicinin ana logosu — kartin en ustunde, urun adindan once. */
.giris-sahip{display:flex;flex-direction:column;align-items:center;padding-bottom:18px;margin-bottom:18px;
  border-bottom:1px solid var(--border)}
.giris-sahip img{width:calc(180px * var(--olcek, 1));height:auto}
/* Program logosu (TURQUALITY) yararlanicinin logosunun ALTINDA, ortada.
   Yazi yerine logo: ekranin ne oldugunu resmi isaretiyle soyluyor. */
.giris-program{display:block;margin-top:12px;width:calc(150px * var(--olcek, 1));height:auto}
/* Program logosu yoksa yaziya dusulur. */
.giris-urun{display:block;margin-top:10px;text-align:center;font-size:.7rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:600}
/* Islem dugmeleri: CRM'deki gibi cizgili, durumu rengiyle soyleyen kucuk
   dugmeler. Renk paleti Destora'nin kendi belirteclerinden — CRM'deki sabit
   hex degerleri koyu temada okunmaz hale gelirdi. */
.btn-ghost.iyi{color:var(--ok);border-color:var(--ok)}
.btn-ghost.uyari{color:var(--warn);border-color:var(--warn)}
.btn-ghost.tehlike{color:var(--danger);border-color:var(--danger)}
.btn-kirmizi{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-kirmizi:hover{filter:brightness(.93)}
.rozet-kucuk{margin-left:6px;font-size:.68rem;padding:2px 8px;vertical-align:middle}
/* Islem dugmeleri tek satirda kalmali: "Sil" alt satira dusunce satir yuksekligi
   iki katina cikiyor ve tablo duzensiz gorunuyor. */
.islem-hucre{flex-wrap:nowrap;white-space:nowrap}
.islem-hucre .btn{white-space:nowrap;flex:0 0 auto}
.table td .btn-sm{white-space:nowrap}
/* Optik kaydirma: logonun govdesini kutunun ortasina getirir. Deger yoksa
   hicbir sey olmaz. Yorungede img'ye uygulaniyor, .yorunge-oge'ye DEGIL —
   orada karsi-donus animasyonu var, transform'lar birbirini ezerdi. */
.yorunge-oge img,.giris-sahip img,.giris-program{
  transform:translate(var(--kx,0),var(--ky,0))
}

/* ── Giris dugmesi ──────────────────────────────────────────────────────── */
/* Kartin en belirgin ogesi ve markanin rengini tasiyor. Ton TEK bir
   degiskenden turuyor: ust parlaklik, alt kenar ve golge color-mix ile
   hesaplaniyor. Boylece baska bir yararlanicida marka.json'daki "renk"
   degisince butun katmanlar birlikte kayiyor — alti ayri hex elle
   guncellenmiyor. Deger yoksa lacivert varsayilan kullanilir. */
.giris-kart .btn-primary{
  --renk: var(--marka-renk, #0d3a66);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--renk) 78%, white) 0%,
    var(--renk) 52%,
    color-mix(in srgb, var(--renk) 88%, black) 100%);
  border:1px solid color-mix(in srgb, var(--renk) 62%, black);
  color:#fff;
  text-shadow:0 -1px 0 rgba(0,0,0,.35);
  letter-spacing:.01em;
  padding:11px 16px;
  /* Ustte ic parlaklik (isik yukaridan), altta KATI bir kenar: dugmenin
     kalinligi bu kati kenardan okunuyor, bulanik golgeden degil. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 3px 0 color-mix(in srgb, var(--renk) 55%, black),
    0 6px 16px color-mix(in srgb, var(--renk) 40%, transparent);
}
.giris-kart .btn-primary:hover{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--renk) 68%, white) 0%,
    color-mix(in srgb, var(--renk) 92%, white) 52%,
    var(--renk) 100%);
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 4px 0 color-mix(in srgb, var(--renk) 55%, black),
    0 9px 20px color-mix(in srgb, var(--renk) 45%, transparent);
}
/* Basilinca dugme kati kenarinin uzerine oturur: yukseklik 3px'ten 1px'e iner
   ve ayni miktarda asagi kayar, yani toplam yukseklik sabit kalir. */
.giris-kart .btn-primary:active{
  transform:translateY(2px);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.28),
    0 1px 0 color-mix(in srgb, var(--renk) 55%, black),
    0 2px 6px color-mix(in srgb, var(--renk) 35%, transparent);
}
.giris-kart .btn-primary:disabled{opacity:.65;transform:none}

/* ── Temalar ────────────────────────────────────────────────────────────── */
/* Her tema YALNIZCA belirtecleri yeniden tanimlar; bilesen kurallarina
   dokunmaz. Bir bilesen kendi rengini sabit yazarsa temalarin disinda kalir —
   yumusak zeminlerin yanindaki kenar renkleri bu yuzden color-mix'e cevrildi.
   Varsayilan (acik) :root'ta duruyor; buradakiler ondan sapan degerler. */

/* GECE — gercek koyu tema. Zemin saf siyah degil: uzun sure bakilan bir
   tabloda saf siyah uzerine beyaz metin, kenarlarda hayalet iz birakiyor. */
[data-tema="gece"]{
  --accent:#93a4bd; --accent-ink:#cbd5e5; --accent-soft:#2b3444;
  --navy:#e8ecf3; --ink:#e8ecf3; --muted:#98a3b4; --faint:#6f7a8b;
  --bg:#161a21; --surface:#1e232c; --surface-2:#252b36;
  --border:#333b48; --border-strong:#414b5a;
  --ok:#4ade80; --ok-soft:#16281d; --caution:#e3b341; --caution-soft:#2b2418;
  --warn:#f59e0b; --warn-soft:#2e2113; --danger:#f87171; --danger-soft:#2f1a1a;
  --metal-kenar:#11151b;
  --yan-ust:#1a1f27; --yan-alt:#12161c;
  --yan-metin:#aab3c2; --yan-baslik:#eef1f6; --yan-soluk:#6b7482;
  --metal-btn:linear-gradient(180deg,#39424f 0%,#262d37 100%);
  --metal-btn-hover:linear-gradient(180deg,#434d5c 0%,#2e3641 100%);
  --metal-light:linear-gradient(180deg,#2a303a 0%,#222831 100%);
  --metal-icon:linear-gradient(145deg,#5d6878 0%,#333b47 100%);
  --btn-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 -2px 0 rgba(0,0,0,.3) inset,
    0 3px 0 rgba(0,0,0,.3),0 8px 16px rgba(0,0,0,.4);
}
/* Koyu temada beyaz zeminli logolar ve karekod olduklari gibi kalir; onlarin
   kontrasti kendi beyazina bagli. */
[data-tema="gece"] .mfa-qr{background:#fff}

/* LACIVERT — acik ama serin. Kagit beyazi yerine hafif mavi kirili yuzeyler. */
[data-tema="lacivert"]{
  --accent:#3f5b86; --accent-ink:#27405f; --accent-soft:#e2e9f4;
  --navy:#1b2740; --ink:#1b2740; --muted:#57647d; --faint:#8590a5;
  --bg:#e4e9f2; --surface:#ffffff; --surface-2:#eef2f9;
  --border:#cfd8e8; --border-strong:#b6c2d8;
  --metal-kenar:#1d2b45;
  --yan-ust:#1f2f4d; --yan-alt:#16223a;
  --yan-metin:#b9c6dd; --yan-baslik:#f0f4fb; --yan-soluk:#6d7d99;
  --vurgu-1:#2f6fd0; --vurgu-2:#5b6ee0;
  --metal-btn:linear-gradient(180deg,#4a628a 0%,#2f4468 100%);
  --metal-btn-hover:linear-gradient(180deg,#556e98 0%,#374d75 100%);
  --metal-icon:linear-gradient(145deg,#8fa2c0 0%,#3f5680 100%);
}

/* KAGIT — sicak, dusuk kontrast. Gun boyu rapor okuyan icin. */
[data-tema="kagit"]{
  --accent:#7a6a55; --accent-ink:#5b4e3d; --accent-soft:#efe9df;
  --navy:#33291d; --ink:#33291d; --muted:#6b6052; --faint:#978c7c;
  --bg:#efe9dd; --surface:#fdfbf6; --surface-2:#f5efe4;
  --border:#ded4c3; --border-strong:#c9bda8;
  --metal-kenar:#3a3126;
  --yan-ust:#3c3427; --yan-alt:#2c261c;
  --yan-metin:#cfc4b0; --yan-baslik:#f7f2e8; --yan-soluk:#8a7f6c;
  --vurgu-1:#b07d3a; --vurgu-2:#8a6a4f;
  --metal-btn:linear-gradient(180deg,#6e6252 0%,#4c4436 100%);
  --metal-btn-hover:linear-gradient(180deg,#7a6d5c 0%,#564d3e 100%);
  --metal-icon:linear-gradient(145deg,#b3a691 0%,#5f5544 100%);
}

/* ── Ust cubuktaki kullanici dugmesi ────────────────────────────────────── */
/* Ad TAM gorunuyor. Eskiden yalnizca iki harflik bir daire vardi ve kimin
   girdigi ancak uzerine gelince anlasiliyordu. */
.kul-dugme{display:flex;align-items:center;gap:10px;padding:4px 10px 4px 4px;
  border-radius:999px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.07);color:var(--yan-baslik);cursor:pointer;
  font-family:inherit;transition:background .13s,border-color .13s;max-width:330px}
.kul-dugme:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.24)}
.kul-dugme[aria-expanded="true"]{background:rgba(255,255,255,.16)}
.kul-metin{display:flex;flex-direction:column;align-items:flex-start;
  line-height:1.25;min-width:0;text-align:left}
.kul-metin b{font-size:.83rem;font-weight:700;max-width:190px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kul-metin small{font-size:.67rem;color:var(--yan-metin);max-width:190px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kul-ok{width:15px;height:15px;color:var(--yan-metin);flex:none}
@media(max-width:820px){ .kul-metin{display:none} }

/* Avatar: harf ya da resim. Resim varsa background olarak biniyor, <img>
   olarak degil — kirpma, oranlama ve yuvarlaklik tek satirda cozuluyor. */
.avatar{background-size:cover;background-position:center;overflow:hidden;flex:none;padding:0}
.avatar.avatar-buyuk{width:52px;height:52px;font-size:1.05rem}

/* ── Profil cekmecesi ───────────────────────────────────────────────────── */
.cekmece-ov{position:fixed;inset:0;background:rgba(10,15,26,.42);z-index:60;
  opacity:0;transition:opacity .18s}
.cekmece-ov.acik{opacity:1}
.cekmece{position:fixed;top:0;right:0;bottom:0;width:min(410px,100%);z-index:61;
  background:var(--surface);border-left:1px solid var(--border);
  box-shadow:-14px 0 44px rgba(0,0,0,.22);display:flex;flex-direction:column;
  transform:translateX(102%);transition:transform .22s ease}
.cekmece.acik{transform:none}
@media(prefers-reduced-motion:reduce){
  .cekmece,.cekmece-ov{transition:none}
}
.cekmece-bas{display:flex;align-items:flex-start;gap:12px;padding:16px 16px 14px;
  border-bottom:1px solid var(--border);background:var(--surface-2)}
.cekmece-kimlik{min-width:0;flex:1;padding-top:2px}
.cekmece-bas-islem{display:flex;align-items:center;gap:6px;flex:none}
.cekmece-kimlik b{display:block;font-size:.98rem;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cekmece-kimlik small{display:block;font-size:.75rem;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cekmece-kimlik small.soluk{color:var(--faint);font-size:.72rem}
.cekmece-govde{flex:1;overflow-y:auto;padding:6px 16px 16px}
.cekmece-bolum{padding:12px 0;border-bottom:1px solid var(--border)}
.cekmece-bolum:first-child{padding-top:0}
.cekmece-bolum:last-child{border-bottom:none}
.cekmece-bolum h4{margin:0 0 10px;font-size:.7rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.cekmece-not{margin:8px 0 0;font-size:.74rem;color:var(--faint);line-height:1.5}
.cekmece-alt{display:flex;gap:8px;margin-top:4px}
.cekmece-alt .btn{flex:1}

/* Tema secici: renk orneklerine BAKARAK secilir, adini okuyarak degil. */
.tema-izgara{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.tema-kart{display:flex;align-items:center;gap:9px;padding:8px 10px;cursor:pointer;
  border:1.5px solid var(--border);border-radius:10px;background:var(--surface);
  font-size:.8rem;font-weight:600;color:var(--ink);font-family:inherit;
  transition:border-color .13s,background .13s}
.tema-kart:hover{background:var(--surface-2)}
.tema-kart.secili{border-color:var(--vurgu-1);background:var(--accent-soft)}
.tema-ornek{width:26px;height:26px;border-radius:7px;flex:none;
  border:1px solid rgba(0,0,0,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}

/* Profil resmi alani */
.avatar-duzen{display:flex;align-items:center;gap:14px}
.avatar-duzen .avatar{width:64px;height:64px;font-size:1.2rem}
.avatar-islem{display:flex;flex-direction:column;gap:6px;flex:1}
/* Musteri secici koyu ust cubukta duruyor; .input'un acik zemin varsayimini
   burada geri aliyoruz. Ok isareti de kendi rengini tasiyor, yoksa koyu
   zeminde kayboluyor. */
.topbar .tenant .label{color:var(--yan-metin)}
.topbar .tenant select.input{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.18);
  color:var(--yan-baslik);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.topbar .tenant select.input:hover{background:rgba(255,255,255,.15)}
.topbar .tenant select.input:focus{
  border-color:rgba(255,255,255,.4);
  box-shadow:0 0 0 3px rgba(255,255,255,.12);
}
/* Acilir listenin KENDISI isletim sisteminin cizdigi bir yuzey; oradaki
   secenekler koyu cubugun degil, sayfanin renklerini kullanmali. */
.topbar .tenant select.input option{background:var(--surface);color:var(--ink)}
@media(max-width:960px){ .topbar .tenant .label{display:none} }
/* Profil resmi ÇERÇEVEYE tıklanarak degisiyor. Ayri bir "Resim sec" dugmesi
   paneli kalabalklastiriyordu; ustune gelince cikan katman tiklanabilir
   oldugunu soyluyor. */
.avatar-dugme{position:relative;padding:0;border:2px solid var(--border);cursor:pointer;
  font-family:inherit;transition:border-color .13s}
.avatar-dugme:hover{border-color:var(--accent)}
/* Kose rozeti: tiklanabilirligi RESMI ORTMEDEN soyluyor. Onceki cozum,
   avatarin tam ortasina "Degistir" yaziyordu ve 52 piksellik bir portrede
   o yazi yuzun ustune biniyordu. */
.avatar-sarmal{position:relative;display:inline-block;flex:none;line-height:0}
.avatar-rozet{position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;
  border-radius:50%;display:grid;place-items:center;pointer-events:none;
  background:var(--surface);color:var(--muted);border:1.5px solid var(--border);
  box-shadow:0 1px 3px rgba(0,0,0,.18);transition:color .13s,border-color .13s}
.avatar-rozet svg{width:11px;height:11px}
.avatar-sarmal:hover .avatar-rozet{color:var(--accent);border-color:var(--accent)}

/* Baglanti gorunumlu kucuk dugme: "Resmi kaldir" gibi ikincil islemler icin.
   Tam bir dugme koymak, kaldirma islemini kaydetmekle ayni agirliga cikarirdi. */
.baglanti-dugme{background:none;border:none;padding:0;margin-top:4px;cursor:pointer;
  font-family:inherit;font-size:.72rem;font-weight:600;color:var(--danger);
  text-decoration:underline;text-underline-offset:2px}
.baglanti-dugme:hover{filter:brightness(.88)}

/* Kaydirmasiz sigsin diye alanlar biraz siklastirildi. Profil bir okuma
   ekrani degil; kaydirma cubugu cikinca tema ve cikis gorunmez oluyor. */
.cekmece .field{margin-bottom:9px}
.cekmece .cekmece-bolum h4{margin-bottom:8px}
.cekmece .tema-izgara{gap:8px}
.cekmece .tema-kart{padding:7px 9px}
.cekmece .ozet-satir{padding:5px 0;font-size:.82rem}
/* Harfler ayri bir cocukta; "Degistir" katmani onun ustune biniyor. */
.avatar-harf{display:grid;place-items:center;width:100%;height:100%}
/* Kisa degerler yan yana: unvan ve departman alt alta konunca panel
   kaydirmaya dusuyordu. Dar ekranda yine alt alta iniyorlar. */
.alan-ikili{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:420px){ .alan-ikili{grid-template-columns:1fr} }
/* Panel kaydirmasiz sigmali; aralikar son bir tik siklastirildi. */
.cekmece .field{margin-bottom:7px}
.cekmece .cekmece-bolum{padding:10px 0}
.cekmece .tema-kart{padding:6px 9px}
.cekmece-bas{padding-bottom:12px}
/* Kartlar ICERIGE gore hizalanir, esit yukseklige GERILMEZ. Varsayilan
   stretch, kisa karti uzun kartin boyuna cekip altinda bos bir alan
   birakiyordu. */
.kutu-izgara{align-items:start}
/* Guvenlik ekraninda uc kart: dar ekranda ikiye, sonra teke iner. */
.guvenlik-izgara{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
/* Cevrimici gostergesi: adin solunda kucuk bir nokta. Ayri bir sutun
   harcamiyor; kimin ekranin basinda oldugu bir bakista okunuyor. */
.cevrim-nokta{display:inline-block;width:8px;height:8px;border-radius:50%;
  margin-right:7px;vertical-align:middle;background:var(--border-strong);flex:none}
.cevrim-nokta.acik{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}
.cevrim-sayi{color:var(--ok)}
/* Kart govdesi. .card kendi ic bosluguna sahip degil — icindeki tablo tam
   genislikte olsun diye. Metin ve alan tasiyan kartlarda bu sarmal gerekiyor;
   yoksa satirlar kartin kenarina yapisiyor ve uzun bir deger (e-posta gibi)
   kartin disina tasiyor. */
.kart-govde{padding:14px 20px 16px}
.kart-govde .rapor-not{margin-bottom:0}
/* Uzun deger kirpilmak yerine sarsin: e-posta okunabilir kalmali. */
.ozet-satir span{flex:0 1 auto;min-width:0}
.ozet-satir b{min-width:0;text-align:right;overflow-wrap:anywhere}
/* Ayar gruplari: baslik + kisa bir gerekce satiri. Grup arasi bosluk, kutu
   arasi bosluktan belirgin sekilde buyuk — yoksa gruplama gorulmuyor. */
.ayar-grup{margin-bottom:26px}
.ayar-grup:last-child{margin-bottom:0}
.ayar-grup-bas{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:11px}
.ayar-grup-bas h3{margin:0;font-size:.98rem;font-weight:800;color:var(--ink)}
.ayar-grup-bas span{font-size:.78rem;color:var(--faint)}
/* Yan menudeki marka blogu — KOYU ZEMININ USTUNDE, ters renklerle.

   Once beyaz bir levha denendi; logolar kendi renklerinde duruyordu ama
   koyu menunun ortasinda parlak bir kart gibi durup dikkat caliyordu.

   Ters cevirme CSS ile yapiliyor, dosyalarin ayri bir "koyu zemin" surumu
   hazirlanarak DEGIL: firma logosu her kurulumda degisiyor ve her yeni
   musteride ikinci bir dosya hazirlamak gerekirdi. brightness(0) once
   goruntuyu tamamen siyaha indiriyor (renk ne olursa olsun), invert(1) de
   onu beyaza ceviriyor — sonucta hangi logo gelirse gelsin temiz beyaz bir
   siluet cikiyor. Saydam pikseller saydam kaliyor. */
.brand-markali{padding:6px 10px 16px;display:block}
.brand-levha{display:flex;flex-direction:column;align-items:center;gap:10px}
.brand-sahip,.brand-program{
  display:block;height:auto;
  filter:brightness(0) invert(1);
  transform:translate(var(--kx,0),var(--ky,0));
}
.brand-sahip{width:calc(132px * var(--olcek,1));opacity:.94}
/* Program logosu daha buyuk: ekranin neyin ekrani oldugunu o soyluyor. */
.brand-program{width:calc(124px * var(--olcek,1));opacity:.88}
.brand-ayrac{width:76px;height:1px;background:rgba(255,255,255,.16)}
/* Marka onizlemeleri: logonun gercekte duracagi iki zemin. Yan menu koyu
   oldugu icin oradaki onizleme de koyu — ters cevrilmis hali burada gorulmeli,
   kaydedip menuye bakarak degil. */
.marka-onizleme{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;min-height:112px;border-radius:10px;padding:14px;border:1px solid var(--border)}
.marka-onizleme.acik{background:#fff}
.marka-onizleme.koyu{background:linear-gradient(180deg,var(--yan-ust) 0%,var(--yan-alt) 100%)}
.marka-onizleme img{height:auto;display:block;max-width:100%}
.marka-onizleme img.ters{filter:brightness(0) invert(1);opacity:.92}
.marka-onizleme .marka-ayrac{width:70px;height:1px;background:rgba(255,255,255,.16)}
/* KISA PENCEREDE EZILME. Ust cubuk ve marka blogu birer flex cocugu ve
   varsayilan flex-shrink:1 tasiyorlar; pencere alcaldiginda ikisi de
   buzuluyordu. Ust cubuk 60 pikselden 43'e iniyor, marka blogu da menunun
   uzerine biniyordu — logonun ustten kesilmis gorunmesinin sebebi buydu.
   Ikisi de sabit; daralmasi gereken yer menu listesi, o da kayabiliyor. */
.topbar{flex:none}
.brand{flex:none}
.nav-sarmal{overflow-y:auto}
/* Alcak pencerede marka blogu kuculur. 636 piksellik bir pencerede blok 122
   piksel yiyor ve menu kayiyor — Pano gorunmez oluyor. Logolar kucultulunce
   liste tam sigiyor. Blok kaybolmuyor; yalnizca yer acacak kadar iniyor. */
@media (max-height:760px){
  .brand-markali{padding:4px 10px 10px}
  .brand-levha{gap:6px}
  .brand-sahip{width:calc(104px * var(--olcek,1))}
  .brand-program{width:calc(96px * var(--olcek,1))}
  .brand-ayrac{width:60px}
}

/* ── Haftalik ajanda ────────────────────────────────────────────────────── */
.ajanda-arac{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* Yedi gun yan yana. Dar ekranda tek sutuna inmiyor, YATAY kayiyor: haftanin
   sekli bozulunca "haftalik gorunum" olmaktan cikip listeye donuyor. */
.ajanda-izgara{display:grid;grid-template-columns:repeat(7,minmax(150px,1fr));
  gap:1px;background:var(--border);border-top:1px solid var(--border);overflow-x:auto}
/* Sabit 150 pikseldi: ajanda o zaman Hatirlatma ekranina gomulu bir kutuydu
   ve sayfayi uzatmamasi gerekiyordu. Artik kendi sayfasi, altinda da bos
   ekran kaliyordu — hafta ekranin kalanini doldursun. Cikarilan 340 piksel
   ustteki sabitler: ust cubuk + sayfa basligi + kart basligi + alttaki not.
   max() taban koyuyor: cok kisa bir pencerede gun kutusu okunmaz hale
   gelmesin, o zaman sayfa kaysin. */
.ajanda-gun{background:var(--surface);min-height:max(250px,calc(100vh - 340px));
  display:flex;flex-direction:column}
.ajanda-gun.hafta-sonu{background:var(--surface-2)}
.ajanda-gun.bugun{background:color-mix(in srgb,var(--vurgu-1) 7%,var(--surface))}
.ajanda-gun-bas{display:flex;align-items:baseline;justify-content:space-between;gap:6px;
  padding:8px 10px 6px;border-bottom:1px solid var(--border)}
.ajanda-gun-bas b{font-size:.78rem;color:var(--ink)}
.ajanda-gun-bas span{font-size:.72rem;color:var(--faint);font-variant-numeric:tabular-nums}
.ajanda-gun.bugun .ajanda-gun-bas b{color:var(--vurgu-1)}
.ajanda-gun-govde{flex:1;padding:7px;display:flex;flex-direction:column;gap:5px}

/* Kullanicinin girdigi is: solunda TUR RENGI. */
.ajanda-is{border-left:3px solid var(--tur);background:var(--surface-2);
  border-radius:5px;padding:5px 7px;cursor:pointer;font-size:.75rem;line-height:1.35}
.ajanda-is:hover{background:color-mix(in srgb,var(--tur) 12%,var(--surface-2))}
.ajanda-is b{display:block;font-weight:600;color:var(--ink)}
.ajanda-is span{display:block;color:var(--faint);font-size:.7rem}
.ajanda-is.tamam b{text-decoration:line-through;color:var(--faint);font-weight:500}
.ajanda-saat{color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}

/* Hesaplanan son tarih: RENKSIZ ve kesikli kenar — duzenlenemedigi bakinca
   anlasilsin. Kritik olanlar kirmiziya doner. */
.ajanda-sure{border:1px dashed var(--border-strong);border-radius:5px;
  padding:5px 7px;font-size:.75rem;line-height:1.35;cursor:pointer;
  background:transparent}
.ajanda-sure:hover{background:var(--surface-2)}
.ajanda-sure b{display:block;font-weight:600;color:var(--muted)}
.ajanda-sure span{display:block;color:var(--faint);font-size:.7rem}
.ajanda-sure.kritik{border-color:var(--danger);background:var(--danger-soft)}
.ajanda-sure.kritik b{color:var(--danger)}

/* Gunun altinda kalan bosluk sessiz bir ekleme dugmesi. Once YALNIZCA bos
   gunlerde vardi; gun kutusu kendi sayfasinda 150'den 550 piksele cikinca tek
   kayitli bir gunun altinda kocaman bir olu alan kaldi ve oraya tiklamak
   hicbir sey yapmiyordu. Simdi kalan bosluga yayiliyor (flex:1): dolu gune de
   tiklanarak kayit eklenebiliyor, ama "+" soluk kaldigi icin izgarayi
   kalabaliklastirmiyor. */
.ajanda-bos{border:none;background:none;color:var(--border-strong);cursor:pointer;
  font-size:1.05rem;font-family:inherit;padding:6px;border-radius:5px;line-height:1;
  flex:1;min-height:30px}
.ajanda-bos:hover{background:var(--surface-2);color:var(--accent)}
/* Marka tanimi gelene kadar blok gorunmez ama YER KAPLAR: display:none
   olsaydi menu yukari zipluyor, sonra geri iniyordu. */
.marka-bekliyor{visibility:hidden}

/* ── Pano yerlesimi (surukle-birak) ─────────────────────────────────────── */
/*
   Pano bloklari izgaranin DOGRUDAN cocugu: surukleme ozellikleri sarmalayiciya
   konuyor, karta degil. Karta konsaydi kartin icindeki tablo satirlari ve
   dugmeler de surukleme baslatirdi.
*/
.pano-blok{min-width:0;display:flex;flex-direction:column;position:relative}
.pano-blok>*{flex:1;margin:0}
/* Alt kartlar: iki ESIT sutun; "genis" olan blok ikisini birden kaplar.
   Eskiden 1.4/1 idi. Asimetrik izgarada bir kartin genisligi kacinci sirada
   oldugona bagli oluyor: kullanici karti tasidiginda yalnizca yeri degil boyu
   da degisiyordu. Surukle-birak varken sira degistirmek yalnizca YERI
   degistirmeli. */
.pano-kartlar{display:grid;grid-template-columns:1fr 1fr;gap:16px;
  align-items:start;margin-top:16px}
.pano-kartlar>.pano-blok.genis{grid-column:1 / -1}
/* Zaman gorunumu kendi verisini sonradan yaziyor; bos yuva yer kaplamasin. */
.pano-kartlar>.pano-blok:has(>#zamanYuva:empty){display:none}

/* Duzenleme kipi. Kesikli cerceve "burasi tasinabilir" diyor; kirmizi ya da
   vurgulu bir dolgu kullanilmadi, cunku kutucuklarin kendi renkleri (uyari,
   tehlike) anlam tasiyor ve duzenlerken de okunabilir kalmali. */
.pano-duzen-serit{background:var(--surface-2);border:1px dashed var(--border-strong);
  border-radius:10px;padding:10px 14px;margin-bottom:14px;
  font-size:.82rem;color:var(--muted);line-height:1.5}
.pano-duzen-serit p{margin:0}
/* Kaldirilanlar rafi. Ayri bir "ekle" penceresi yerine surekli gorunuyor:
   kullanici neyi cikardigini ve geri koyabilecegini ayni yerde goruyor. */
.pano-raf{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:9px;
  padding-top:9px;border-top:1px dashed var(--border)}
.pano-raf.bos{color:var(--faint);font-size:.78rem}
.pano-raf-baslik{font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--faint);margin-right:2px}
.pano-ekle{font-family:inherit;font-size:.78rem;font-weight:600;cursor:pointer;
  border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);
  border-radius:999px;padding:4px 11px;line-height:1.3}
.pano-ekle:hover{border-color:var(--accent);color:var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
/* Kaldirma dugmesi: blogun sag ust kosesi. Tutamak noktalarinin yerine geciyor
   (ikisi ayni koseye sigmaz), o yuzden duzenleme kipinde noktalar sola kayiyor. */
.pano-cikar{position:absolute;top:4px;right:4px;z-index:3;width:22px;height:22px;
  display:grid;place-items:center;cursor:pointer;font-family:inherit;
  font-size:1rem;line-height:1;border-radius:999px;
  border:1px solid var(--border-strong);background:var(--surface);color:var(--muted)}
.pano-cikar:hover{border-color:var(--danger);background:var(--danger-soft);
  color:var(--danger)}
.pano-duzenleme .pano-blok{cursor:grab;border-radius:12px;
  outline:1px dashed var(--border-strong);outline-offset:3px}
.pano-duzenleme .pano-blok:hover{outline-color:var(--accent)}
.pano-duzenleme .pano-blok.suruklenen{opacity:.4;cursor:grabbing}
/* Duzenlerken kartin ici tiklanmiyor: tek is var, tasimak. AMA kaldirma
   dugmesi HARIC — o da blogun dogrudan cocugu ve kurala dahil olunca tiklama
   altindaki karta gidiyor, dugme hic calismiyordu. */
.pano-duzenleme .pano-blok>*:not(.pano-cikar){pointer-events:none}
.pano-duzenleme .pano-blok .git{visibility:hidden}
/* Tutamak: kosede alti nokta. Ayri bir kulp degil, blogun tamami tutuluyor —
   isaret amacli. */
.pano-tut{position:absolute;top:9px;right:32px;z-index:2;width:14px;height:10px;
  pointer-events:none;
  background:radial-gradient(circle,var(--faint) 1.1px,transparent 1.2px) 0 0/5px 5px;
  opacity:.75}

/* ── Kutucuk renkleri ───────────────────────────────────────────────────── */
/*
   Ham hex SAKLANMIYOR, renk KODU sakleniyor. Zemin color-mix ile o anki
   yuzeye karistiriliyor: ayni kod acik temada soluk bir tonu, koyu temada
   koyu bir tonu veriyor ve yazi her ikisinde de okunur kaliyor. Kullanici
   serbest renk sesece koyu temada gormedigi bir rengi secebilirdi.
*/
[data-renk="mavi"]{--renk:#2f6fae}
[data-renk="turkuaz"]{--renk:#1f8a8a}
[data-renk="yesil"]{--renk:#2f7d5e}
[data-renk="sari"]{--renk:#b09122}
[data-renk="turuncu"]{--renk:#b8762f}
[data-renk="kirmizi"]{--renk:#b8433f}
[data-renk="mor"]{--renk:#7a5cb8}
[data-renk="gri"]{--renk:#5c6470}
.pano-blok[data-renk]>.card{
  background:color-mix(in srgb,var(--renk) 13%,var(--surface));
  border-color:color-mix(in srgb,var(--renk) 32%,var(--border))}
/* Kutucugun kendi rakam rengi (yesil/kirmizi) ANLAM tasiyor; zemin degisse de
   dokunulmuyor. Yalnizca ust etiket biraz koyulasiyor ki zeminden ayrilsin. */
.pano-blok[data-renk]>.card.kpi>.k{color:color-mix(in srgb,var(--renk) 70%,var(--ink))}

/* Palet: cekmecenin basliginin altinda ince bir serit. */
.drawer-renk{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  padding:10px 20px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.drawer-renk-baslik{font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--faint);margin-right:3px}
.renk-nokta{width:22px;height:22px;border-radius:999px;cursor:pointer;padding:0;
  border:1px solid var(--border-strong);background:var(--renk,var(--surface))}
/* Varsayilan: rengi olmayan nokta. Capraz cizgi "renk yok" diyor. */
.renk-nokta[data-renk=""]{background:
  linear-gradient(135deg,var(--surface) 45%,var(--border-strong) 45% 55%,var(--surface) 55%)}
.renk-nokta:hover{transform:scale(1.12)}
.renk-nokta.secili{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.renk-nokta:hover{transform:none}}

/* ── Kenar cubugunu kapat / ac ──────────────────────────────────────────── */
/*
   Dugme cubugun ICINDE degil, kabuga gore konumlanmis: cubukta overflow:hidden
   var (logo olceklemesi icin) ve kenarina tasan bir dugme kirpiliyordu.
   Sol degeri izgara sutunuyla ayni degiskenden geliyor, boylece kapali/acik
   fark etmeksizin tam kenarda duruyor.
*/
/* Dikeyde ORTADA. Once ustte sabit bir noktadaydi ve marka logosunun
   hizasina denk geliyordu; logo markadan markaya degisken boyutta oldugu icin
   bazilarinda uzerine binerdi. Orta nokta markadan bagimsiz. */
.yan-dugme{position:absolute;left:var(--yan-genislik,250px);top:50%;z-index:7;
  width:22px;height:22px;transform:translate(-50%,-50%);border-radius:999px;cursor:pointer;
  display:grid;place-items:center;padding:0;
  background:var(--vurgu-1);border:2px solid var(--yan-ust);color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.35);transition:background .13s}
.yan-dugme:hover{background:var(--vurgu-2)}
.yan-dugme svg{width:12px;height:12px;display:block;transition:transform .18s}
.yan-kapali .yan-dugme svg{transform:rotate(180deg)}

/* Kapali durum. Genislik degisince gerisi buradan: yazilar gizlenir, ikonlar
   ortalanir. Metinler display:none ile gidiyor; gorunurlugu kismak yer
   kaplamaya devam ederdi ve 66 piksele sigmazlardi. */
.yan-kapali .nav-item{justify-content:center;padding:4px}
.yan-kapali .nav-item>span:not(.i){display:none}
/* Grup basligi kapalida INCE BIR CIZGI oluyor: "Gunluk is / Analiz / Yonetim"
   ayrimi 66 pikselde yazilamaz ama gruplama bilgisi tamamen kaybolmamali. */
.yan-kapali .nav-group-title{font-size:0;letter-spacing:0;padding:0;height:1px;
  margin:9px 10px 7px;background:rgba(255,255,255,.11)}
.yan-kapali .nav-group-title:first-child{margin-top:2px}
/* Marka: yararlanicinin logosu kucuk kalir, TURQUALITY yazisi ve ayrac gider.
   Ikisi de 66 pikselde okunmuyor; okunmayan logo yer kaplamaktan baska is
   yapmaz. */
.yan-kapali .brand{padding:4px 0 12px}
.yan-kapali .brand-sahip{width:42px}
.yan-kapali .brand-program,.yan-kapali .brand-ayrac{display:none}
/* Yalnizca "Destora / Turquality" YAZI blogu gizleniyor. Once :last-child
   yaziliydi ve markali durumda logo levhasi (.brand-levha) da son cocuk
   oldugu icin LOGO da kayboluyordu: kapali menude ustte bos bir alan
   kaliyordu. */
.yan-kapali .brand>div:not(.logo):not(.brand-levha){display:none}
.yan-kapali .brand .logo{margin:0 auto}
/* Alttaki "Kural seti / Demoyu sifirla" kapalida gizli: ikisi de metin. */
.yan-kapali .side-note{display:none}
.yan-kapali .sidebar{padding-left:8px;padding-right:8px}

/* ── Surec semasi ───────────────────────────────────────────────────────── */
/*
   GERCEK akis semasi: kutular, karar elmasi ve dallar. Ilk surumu yatay bir
   kutucuk zinciriydi ve kullanici hakli olarak "bunlar zaten ustte var" dedi:
   panodaki KPI kutucuklarinin ayni sayilarini ok koyarak tekrar ediyordu.
   Semanin kattigi sey sayi degil SUREC — hangi dalin nereye gittigi, saatin
   nerede isledigi, hangi yolun donguye hangisinin cikisa vardigi.

   SVG cizgileri elle yerlestirildi; viewBox sabit, genislik kaba gore
   olcekleniyor. Dar ekranda kucultmek yerine YATAY KAYIYOR: 900 pikselllik
   bir sema 400 piksele sigdirilirsa yazilar okunmaz olur.
*/
.sema-sarmal{overflow-x:auto;padding-bottom:4px}
.sema{width:100%;min-width:760px;height:auto;display:block}
.sema-kutu{fill:var(--surface-2);stroke:var(--border);stroke-width:1}
.sema-elmas{fill:var(--surface-2);stroke:var(--border);stroke-width:1}
.sema-dugum{cursor:pointer}
.sema-dugum:hover .sema-kutu,.sema-dugum:hover .sema-elmas{stroke:var(--accent);stroke-width:1.6}
.sema-dugum:focus-visible .sema-kutu,.sema-dugum:focus-visible .sema-elmas{
  stroke:var(--accent);stroke-width:2}
.sema-dugum:focus{outline:none}
.sema-etiket{font-size:10.5px;font-weight:700;letter-spacing:.05em;fill:var(--muted)}
.sema-sayi{font-size:22px;font-weight:800;fill:var(--accent-ink);
  font-variant-numeric:tabular-nums}
.sema-sayi.ok{fill:var(--ok)}
.sema-sayi.warn{fill:var(--warn)}
.sema-sayi.danger{fill:var(--danger)}
.sema-sayi.accent{fill:var(--accent)}
.sema-alt{font-size:9.5px;fill:var(--faint)}
.sema-ok{fill:none;stroke:var(--border-strong);stroke-width:1.6}
/* Geri donus KESIKLI: ileri akis degil, donguye geri donus. */
.sema-donus{fill:none;stroke:var(--warn);stroke-width:1.4;stroke-dasharray:5 4}
.sema-dal{font-size:10px;font-weight:700;fill:var(--muted)}
.sema-donus-yazi{font-size:9px;fill:var(--warn)}

/* Ust sira: kutucuklarin da ustunde duran blok(lar). Surukleme bolgesi degil
   (bkz. panoUstSira), o yuzden pano-kartlar gibi bir izgaraya gerek yok. */
.pano-ust{display:flex;flex-direction:column;gap:16px;margin-bottom:14px}
.pano-ust>.pano-blok{width:100%}
/* Sema altindaki para seridi. Tutarlar KUTULARA yazilmiyor: ozette asama
   asama tutar yok, "yolda olan" rakam uc asamayi birden kapsiyor ve tek bir
   kutuya yazilirsa o asamanin tutari sanilir. */
.sema-para{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.sema-para-oge{flex:1 1 260px;display:flex;align-items:baseline;gap:9px;
  padding:10px 14px;border-radius:10px;background:var(--surface-2);
  border:1px solid var(--border)}
.sema-para-oge b{font-size:1.15rem;font-weight:800;color:var(--accent-ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.sema-para-oge.ok b{color:var(--ok)}
.sema-para-oge span{font-size:.76rem;color:var(--faint);line-height:1.45}
.sema-para-oge.danger b{color:var(--danger)}
/* Cekmece satirinda "Birlige sunuldu ... / N gundur bekliyor". Ayri satir,
   cunku ustteki kunye satiri (dosya no, kalem, marka, tedarikci) zaten dolu
   ve buraya sikistirmak ikisini de okunmaz yapiyordu. */
.cek-birlik{grid-column:1;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:3px;font-size:.76rem;color:var(--faint)}
.cek-birlik b{font-weight:700;color:var(--muted)}
/* Kural seti surumu ile UYGULAMA surumu yan yana ama ayri: biri mevzuatin
   surumu, digeri yazilimin. Karistirilmasinlar diye uygulama surumu solukca. */
.side-surum{display:block;width:100%;font-size:.68rem;color:var(--yan-soluk);opacity:.75;margin-top:2px}
.yan-kapali .side-surum{display:none}

/* ── Yayin ekrani ───────────────────────────────────────────────────────── */
/* Gunluk OLDUGU GIBI gosteriliyor: "oldu galiba" yeterli degil, deploy'un ne
   yaptigini gormek gerekiyor. Sabit genislikli yazi ve kendi kaydirmasi. */
.yayin-gunluk{margin:0;padding:14px 18px;max-height:340px;overflow:auto;
  font-family:ui-monospace,'Cascadia Code',Consolas,monospace;font-size:.76rem;
  line-height:1.5;white-space:pre-wrap;word-break:break-word;
  background:var(--surface-2);color:var(--ink);border-top:1px solid var(--border)}
.yayin-kayit{padding:12px 20px;border-bottom:1px solid var(--border)}
.yayin-kayit:last-child{border-bottom:none}
.yayin-kayit-bas{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.yayin-kayit-bas b{font-variant-numeric:tabular-nums}
.yayin-kayit-bas>span:last-child{font-weight:600;color:var(--ink)}
.yayin-kayit ul{margin:6px 0 0;padding-left:20px;font-size:.82rem;
  color:var(--muted);line-height:1.6}