:root {
  --turuncu: #F0541F;
  --turuncu-2: #FF7A2E;
  --turuncu-soft: rgba(240, 84, 31, 0.12);
  --bg: #0e1116;
  --bg-2: #151a21;
  --panel: #1b2129;
  --panel-2: #222a34;
  --kenar: #2a323d;
  --metin: #e7ebf0;
  --metin-2: #9aa5b1;
  --metin-3: #6b7683;
  --mavi: #6E9BF0;
  --poz: #35c07f;
  --neg: #ef6a5e;
  --tablo-bg: #12161c;
  --r: 14px;
  --r-lg: 20px;
  --golge: 0 6px 24px rgba(0, 0, 0, 0.35);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: radial-gradient(1200px 500px at 15% -10%, #1a2230 0%, var(--bg) 55%) fixed;
  color: var(--metin);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2c3542; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #37424f; }

/* ---------- topbar ---------- */
.topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 12px 22px;
  background: rgba(20, 25, 32, 0.7);
  border-bottom: 1px solid var(--kenar);
  backdrop-filter: blur(8px);
}
.brand { display: flex; align-items: center; gap: 12px; }
.logo {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--turuncu), var(--turuncu-2));
  border-radius: 11px; color: #fff; font-size: 18px;
  box-shadow: 0 4px 14px rgba(240, 84, 31, 0.4);
}
.brand-title { font-weight: 650; font-size: 15px; letter-spacing: .2px; }
.brand-sub { font-size: 11px; color: var(--metin-3); }
.tabs { display: flex; gap: 4px; margin-left: 10px; background: var(--bg-2); padding: 4px; border-radius: 12px; border: 1px solid var(--kenar); }
.tab {
  border: 0; background: transparent; color: var(--metin-2);
  padding: 8px 16px; border-radius: 9px; font-size: 13px; font-weight: 550; cursor: pointer;
  transition: all .16s ease;
}
.tab:hover { color: var(--metin); }
.tab.aktif { background: var(--panel-2); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.topbar-right { margin-left: auto; }
.durum { font-size: 12px; color: var(--metin-3); }

/* ---------- content ---------- */
#content { flex: 1; overflow-y: auto; padding: 26px; }
.view { max-width: 1120px; margin: 0 auto; animation: yumusak .22s ease; }
@keyframes yumusak { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.baslik-sat { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.baslik-sat h1 { font-size: 22px; font-weight: 300; letter-spacing: .3px; }
.baslik-sat .alt { color: var(--metin-3); font-size: 13px; }

/* ---------- Fon Sepetim hero kart (turuncu + neon hover) ---------- */
.sepet-hero {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 26px; border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1.5px solid var(--turuncu);
  cursor: pointer; transition: box-shadow .22s ease, transform .12s ease;
  box-shadow: 0 0 0 1px rgba(240,84,31,.05);
}
.sepet-hero:hover {
  box-shadow: 0 0 0 1px var(--turuncu), 0 0 22px 2px rgba(240, 84, 31, .45), 0 0 60px 6px rgba(240, 84, 31, .22);
  transform: translateY(-1px);
}
.sepet-hero .sol .t1 { font-size: 20px; font-weight: 650; }
.sepet-hero .sol .t2 { font-size: 13px; color: var(--metin-2); margin-top: 3px; }
.ok-daire {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--metin); display: grid; place-items: center;
  font-size: 20px; color: var(--metin); transition: all .18s ease;
}
.sepet-hero:hover .ok-daire { border-color: var(--turuncu); color: var(--turuncu); transform: translateX(3px); }
.ok-alt { font-size: 11px; color: var(--metin-3); text-align: center; margin-top: 6px; }

/* ---------- kart / panel ---------- */
.panel {
  background: var(--panel); border: 1px solid var(--kenar);
  border-radius: var(--r); box-shadow: var(--golge);
}
.panel-bas { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 8px; }
.pb-sag { display: flex; align-items: center; gap: 12px; }
.panel-bas h2 { font-size: 15px; font-weight: 600; }
.mt { margin-top: 18px; }

/* ---------- arama ---------- */
.arama {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-2); border: 1px solid var(--kenar);
  border-radius: 11px; padding: 0 12px; margin: 0 20px;
}
.arama:focus-within { border-color: var(--turuncu); }
.arama .ico { color: var(--metin-3); }
.arama input {
  flex: 1; background: transparent; border: 0; outline: 0;
  color: var(--metin); font-size: 14px; padding: 12px 4px; user-select: text;
}
.arama input::placeholder { color: var(--metin-3); }

/* ---------- sonuç listesi ---------- */
.sonuc { max-height: 340px; overflow-y: auto; margin: 8px 12px 14px; }
.sonuc .satir {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 9px;
}
.sonuc .satir:hover { background: var(--panel-2); }
.sonuc .kod { font-weight: 650; width: 52px; color: var(--metin); }
.sonuc .ad { flex: 1; color: var(--metin-2); font-size: 12.5px; }
.sonuc .bos { color: var(--metin-3); padding: 14px; font-size: 13px; }

/* ---------- butonlar ---------- */
.btn {
  border: 0; border-radius: 11px; padding: 11px 18px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .15s ease; color: #fff;
}
.btn-turuncu { background: var(--turuncu); box-shadow: 0 4px 14px rgba(240,84,31,.35); }
.btn-turuncu:hover { background: var(--turuncu-2); }
.btn-yesil { background: #2f9e6a; }
.btn-yesil:hover { background: #36b47a; }
.btn-mavi { background: var(--mavi); }
.mail-alici {
  height: 34px; min-width: 190px; padding: 0 11px;
  background: var(--panel-2); border: 1px solid var(--kenar); border-radius: 10px;
  color: var(--metin); font-size: 12.5px; outline: none; transition: border-color .15s;
}
.mail-alici::placeholder { color: var(--metin-3); }
.mail-alici:focus { border-color: var(--mavi); }
.bol-sec { height: 32px; padding: 0 8px; background: var(--panel-2); border: 1px solid var(--kenar); border-radius: 8px; color: var(--metin); font-size: 13px; cursor: pointer; }
.bol-sec:focus { outline: none; border-color: var(--mavi); }
.bol-i { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--metin-3); color: var(--metin-2); font-size: 11px; font-style: italic; font-weight: 700; cursor: help; user-select: none; flex: none; }
.bol-i:hover { border-color: var(--mavi); color: var(--mavi); }

/* --- Fon Icerigi & Net Akim sayfasi --- */
.ic-fonbas { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; padding: 0 4px; }
.ic-fonkod { font-size: 22px; font-weight: 800; color: var(--mavi); margin-right: 10px; }
.ic-fonad { font-size: 15px; color: var(--metin); }
.ic-fonmeta { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--metin-2); }
.ic-fonmeta b { color: var(--metin); }
.ic-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.ic-panel { margin: 0; }
.ic-barlar { padding: 12px 20px 18px; }
.ic-bar-sat { margin-bottom: 11px; }
.ic-bar-ust { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.ic-bar-ad { color: var(--metin); }
.ic-bar-yuzde { color: var(--metin-2); font-variant-numeric: tabular-nums; }
.ic-bar-yol { height: 9px; background: var(--tablo-bg); border-radius: 6px; overflow: hidden; }
.ic-bar-dol { height: 100%; border-radius: 6px; transition: width .35s ease; }
.ic-akim { padding: 12px 16px 18px; }
.ic-ozet { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ic-ozet-kart { flex: 1; min-width: 120px; background: var(--panel-2); border: 1px solid var(--kenar); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.ic-ozet-et { font-size: 11px; color: var(--metin-3); }
.ic-ozet-deg { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ic-ozet-deg.poz { color: var(--poz); }
.ic-ozet-deg.neg { color: var(--neg); }
.ic-grafik-sar { background: var(--tablo-bg); border-radius: 10px; padding: 8px 8px 6px; }
.ic-grafik { width: 100%; height: 120px; display: block; }
.ic-getiri { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.ic-getiri-kart { flex: 1; min-width: 110px; background: var(--panel); border: 1px solid var(--kenar); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.ic-getiri-et { font-size: 12px; color: var(--metin-3); }
.ic-getiri-deg { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--metin); }
.ic-getiri-deg.poz { color: var(--poz); }
.ic-getiri-deg.neg { color: var(--neg); }
.ic-cache { color: var(--mavi); font-size: 12px; }
.ic-fonmeta #icYenile { padding: 5px 10px; font-size: 11px; }

/* --- Fon Bilgileri (kunye) paneli --- */
.ic-kunye-yuva { margin-bottom: 16px; }
.kunye-bekle { padding: 20px; text-align: center; color: var(--metin-2); font-size: 13px; }
.kunye-govde { padding: 4px 20px 18px; }
.kunye-aciklama { font-size: 13px; color: var(--metin-2); line-height: 1.55; margin-bottom: 14px; }
.kunye-dev { background: none; border: 0; color: var(--turuncu-2); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 0 0 0 4px; }
.kunye-dev:hover { text-decoration: underline; }
.kunye-ackaynak { font-size: 10.5px; color: var(--metin-3); margin-top: 5px; }
.kunye-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; }
.kunye-sat { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--kenar); font-size: 13px; }
.kunye-et { color: var(--metin-2); flex: none; }
.kunye-deg { color: var(--metin); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; word-break: break-word; }
.kunye-bos { color: var(--metin-3); font-weight: 400; }
.kunye-yok .kunye-et { color: var(--metin-3); }
.kunye-durum-sar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.kunye-durum { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.kunye-durum.acik { color: var(--poz); background: rgba(53, 192, 127, 0.12); }
.kunye-durum.kapali { color: var(--neg); background: rgba(239, 106, 94, 0.12); }
.kunye-not { font-size: 11px; color: var(--metin-3); }
@media (max-width: 720px) { .kunye-grid { grid-template-columns: 1fr; } }

/* --- Fon Karsilastirma --- */
.ks-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 12px; margin-bottom: 4px; }
.ks-kart { position: relative; background: var(--panel); border: 1px solid var(--kenar); border-radius: 12px; padding: 14px 14px 12px; }
.ks-kart-x { position: absolute; top: 8px; right: 10px; color: var(--metin-3); cursor: pointer; font-size: 13px; line-height: 1; }
.ks-kart-x:hover { color: var(--neg); }
.ks-kart-kod { font-weight: 800; color: var(--mavi); font-size: 15px; }
.ks-kart-ad { font-size: 12px; color: var(--metin-2); margin-top: 3px; line-height: 1.35; }
.ks-kart-tur { display: inline-block; margin-top: 8px; font-size: 10.5px; color: var(--metin-3); border: 1px solid var(--kenar); border-radius: 6px; padding: 2px 7px; }
.ks-grafik-sar { background: var(--tablo-bg); border-radius: 10px; padding: 8px; margin: 0 4px; }
.ks-grafik { width: 100%; height: 260px; display: block; }
.ks-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 12px 8px 2px; }
.ks-leg { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--metin); }
.ks-leg-renk { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
.ks-leg b { font-variant-numeric: tabular-nums; margin-left: 2px; }
.ks-eks { fill: var(--metin-3); font-size: 10px; }
.ks-tahmin { color: var(--metin-3); font-size: 10px; margin-left: 1px; cursor: help; }
.ks-tahmin-not { padding: 10px 20px 14px; font-size: 11.5px; color: var(--metin-3); line-height: 1.45; }
.ks-tahmin-not b { color: var(--metin-2); }

/* --- KAP bono dokumu paneli --- */
.kap-icerik { padding: 12px 20px 18px; }
.kap-giris p { color: var(--metin-2); font-size: 13px; line-height: 1.5; margin-bottom: 12px; }
.kap-giris b { color: var(--metin); }
.kap-bekle { padding: 22px; text-align: center; color: var(--metin-2); font-size: 13.5px; }
.kap-hata { color: var(--turuncu-2); font-size: 13px; margin: 6px 0 10px; }
.kap-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--metin-2); margin-bottom: 10px; }
.kap-meta b { color: var(--metin); }
.kap-meta #kapYenile { padding: 4px 9px; font-size: 11px; margin-left: auto; }
.kap-bolum { margin-bottom: 10px; border: 1px solid var(--kenar); border-radius: 10px; overflow: hidden; }
.kap-bolum summary { cursor: pointer; padding: 10px 14px; background: var(--panel-2); font-size: 13.5px; font-weight: 600; color: var(--metin); user-select: none; }
.kap-bolum summary:hover { color: var(--mavi); }
.kap-bolum[open] summary { border-bottom: 1px solid var(--kenar); }
/* .tablo-sar (asagida) overflow:hidden tanimliyor ve kaynak sirasinda SONRA geliyor;
   iki-class secici ile specificity yukseltilir ki scroll GERCEKTEN calissin. */
.tablo-sar.kap-tablo { max-height: 420px; overflow-y: auto; border-radius: 0; border: none; }
.kap-tablo table { font-size: 12px; }
.kap-tablo thead th { position: sticky; top: 0; z-index: 2; background: var(--panel-2); }
.kap-isin { font-family: Consolas, monospace; font-size: 11.5px; white-space: nowrap; }
.kap-kalan { color: var(--metin-3); font-size: 11px; }
.kap-toplam td { font-weight: 700; color: var(--metin); background: var(--panel-2); border-top: 1px solid var(--kenar); }
.kap-ozet { margin: 2px 0 12px; }
.kap-ozet .ic-ozet-deg { font-size: 13.5px; }
.kap-kons { padding: 10px 14px 14px; }
.kap-kons-sat { display: grid; grid-template-columns: 220px 1fr 230px; gap: 10px; align-items: center; margin-bottom: 7px; }
.kap-kons-ad { font-size: 12.5px; color: var(--metin); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kap-kons-yol { height: 8px; background: var(--tablo-bg); border-radius: 5px; overflow: hidden; }
.kap-kons-dol { height: 100%; background: var(--mavi); border-radius: 5px; }
.kap-kons-deg { font-size: 11.5px; color: var(--metin-2); text-align: right; font-variant-numeric: tabular-nums; }
.kap-filtre { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 10px; }
.kap-arama { margin: 0; max-width: 260px; }
.kap-cipler { display: flex; gap: 6px; flex-wrap: wrap; }
.kap-cip { cursor: pointer; user-select: none; }
.kap-cip-kapali { opacity: .35; text-decoration: line-through; }

/* --- gunluk getiri dagilimi (fon icerigi + karsilastirma) --- */
.dag-cubuk { display: flex; height: 26px; border-radius: 8px; overflow: hidden; margin: 6px 0 14px; background: var(--tablo-bg); font-size: 12px; font-weight: 700; }
.dag-poz { background: var(--poz); color: #06281a; display: flex; align-items: center; justify-content: center; min-width: 0; }
.dag-neg { background: var(--neg); color: #2a0a08; display: flex; align-items: center; justify-content: center; min-width: 0; }
.dag-kartlar { margin-bottom: 2px; }
.dag-kartlar .ic-ozet-deg small { display: block; font-size: 10.5px; color: var(--metin-3); font-weight: 400; margin-top: 1px; }
.dag-mini { display: inline-block; width: 54px; height: 7px; background: var(--tablo-bg); border-radius: 4px; overflow: hidden; vertical-align: middle; margin-right: 7px; }
.dag-mini-poz { height: 100%; background: var(--poz); border-radius: 4px; }
.dag-mini-et { font-variant-numeric: tabular-nums; }
.ks-grafik { cursor: crosshair; }
.ks-tip { position: absolute; top: 10px; background: var(--panel-2); border: 1px solid var(--kenar); border-radius: 8px; padding: 8px 10px; font-size: 12px; pointer-events: none; box-shadow: var(--golge); z-index: 5; min-width: 132px; }
.ks-tip-tar { color: var(--metin-2); font-size: 11px; margin-bottom: 5px; }
.ks-tip-sat { display: flex; align-items: center; gap: 6px; padding: 1.5px 0; }
.ks-tip-renk { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.ks-tip-sat b { margin-left: auto; font-variant-numeric: tabular-nums; padding-left: 10px; }
.satir.tikla { cursor: pointer; border-radius: 8px; }
.satir.tikla:hover { background: var(--panel-2); }
.btn-hayalet {
  background: transparent; border: 1px solid var(--kenar); color: var(--metin-2);
}
.btn-hayalet:hover { border-color: var(--turuncu); color: var(--turuncu); }
.btn-mini { padding: 7px 12px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn-satir { display: flex; gap: 10px; flex-wrap: wrap; }
.link { color: var(--turuncu); cursor: pointer; font-weight: 600; font-size: 13px; }
.link:hover { color: var(--turuncu-2); }

/* ---------- sepet sekmeleri ---------- */
.sekmeler { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.sekme {
  padding: 8px 14px; border-radius: 10px; font-size: 13px; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--kenar); color: var(--metin-2);
}
.sekme:hover { color: var(--metin); }
.sekme.aktif { background: var(--turuncu-soft); border-color: var(--turuncu); color: var(--turuncu); font-weight: 600; }
.sekme .say { opacity: .7; margin-left: 5px; font-size: 11px; }

/* ---------- sepet kartları (Fon Sepetleri sayfası) ---------- */
.sepet-kart {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; margin-bottom: 12px; border-radius: var(--r-lg);
  background: var(--panel); border: 1.5px solid var(--turuncu);
  cursor: pointer; transition: box-shadow .22s ease, transform .12s ease;
}
.sepet-kart:hover {
  box-shadow: 0 0 0 1px var(--turuncu), 0 0 18px 1px rgba(240,84,31,.4), 0 0 46px 4px rgba(240,84,31,.18);
  transform: translateY(-1px);
}
.sepet-kart .t1 { font-size: 17px; font-weight: 650; }
.sepet-kart .t2 { font-size: 12px; color: var(--metin-2); margin-top: 2px; }
.sepet-kart .sag { display: flex; flex-direction: column; align-items: center; }

/* ---------- TCMB kur kartları ---------- */
.kur-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.kur-kart {
  flex: 0 0 auto; padding: 14px 20px; border-radius: var(--r);
  background: var(--panel); border: 1px solid var(--kenar);
}
.kur-kart .k-bas { font-size: 12px; color: var(--metin-3); margin-bottom: 8px; }
.kur-kart .k-degerler { display: flex; gap: 22px; }
.kur-kart .k-lbl { font-size: 10px; color: var(--metin-3); display: inline-flex; align-items: center; gap: 3px; }
.k-kopya { color: var(--metin-3); cursor: pointer; opacity: .45; display: inline-flex; transition: opacity .15s, color .15s; }
.k-kopya:hover { opacity: 1; color: var(--mavi); }
.kur-kart .k-val { font-size: 19px; font-weight: 650; }
.kur-tarih { margin-left: auto; align-self: center; font-size: 12px; color: var(--metin-3); }

/* ---------- kontrol şeridi ---------- */
.kontrol { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.kontrol .arama { margin: 0; max-width: 280px; }
.toggle {
  border: 1px solid var(--kenar); background: var(--bg-2); color: var(--metin-2);
  border-radius: 9px; padding: 8px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.toggle.aktif { background: var(--turuncu-soft); border-color: var(--turuncu); color: var(--turuncu); }
.kontrol .sag { margin-left: auto; display: flex; gap: 10px; }

/* ---------- yükleniyor çubuğu ---------- */
.yuk-bar { height: 3px; border-radius: 3px; overflow: hidden; background: var(--kenar); margin-bottom: 10px; }
.yuk-bar > i { display: block; height: 100%; width: 35%; border-radius: 3px; background: var(--turuncu);
  animation: kay 1s linear infinite; }
@keyframes kay { from { transform: translateX(-120%); } to { transform: translateX(360%); } }

/* ---------- tablo ---------- */
.tablo-sar { border-radius: var(--r); overflow: hidden; border: 1px solid var(--kenar); background: var(--tablo-bg); }
table { width: 100%; border-collapse: collapse; }
thead th {
  position: sticky; top: 0; background: #1a1f26; color: var(--metin-2);
  font-size: 12px; font-weight: 600; text-align: left; padding: 12px 16px; cursor: pointer;
  border-bottom: 1px solid var(--kenar); white-space: nowrap;
}
thead th:hover { color: var(--metin); }
thead th.say, tbody td.say { text-align: right; }
thead th.mid, tbody td.mid { text-align: center; }
tbody td { padding: 11px 16px; font-size: 13px; border-bottom: 1px solid rgba(42,50,61,.5); }
tbody tr:hover { background: rgba(255,255,255,.03); }
tbody .kod { font-weight: 650; }
tbody .ad { color: var(--metin-2); }
td.poz { color: var(--poz); font-weight: 600; }
td.neg { color: var(--neg); font-weight: 600; }
.tablo-not { font-size: 11px; color: var(--metin-3); margin-top: 10px; line-height: 1.5; }
.tablo-bos { padding: 40px; text-align: center; color: var(--metin-3); }

/* ---------- Listem kartları (sepet detay) ---------- */
.fon-kart {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 10px;
  background: var(--panel); border: 1px solid var(--kenar); border-radius: var(--r);
  cursor: pointer; transition: border-color .15s;
}
.fon-kart:hover { border-color: #3a4350; }
.fon-kart.secili { border-color: var(--turuncu); background: var(--turuncu-soft); }
.chk {
  width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--metin-3);
  display: grid; place-items: center; flex-shrink: 0; transition: all .15s;
}
.fon-kart.secili .chk { background: var(--turuncu); border-color: var(--turuncu); }
.chk svg { opacity: 0; }
.fon-kart.secili .chk svg { opacity: 1; }
.fon-kart .fk-kod { font-weight: 650; font-size: 15px; }
.fon-kart .fk-ad { font-size: 12.5px; color: var(--metin-2); margin-top: 2px; }
.fon-kart .fk-tur { margin-left: auto; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px; background: var(--bg-2); color: var(--metin-2); }
/* surukle-birak siralama */
.fon-kart { touch-action: pan-y; }
.fk-orta { flex: 1; min-width: 0; }
.fk-tut { color: var(--metin-3); font-size: 18px; cursor: grab; flex-shrink: 0; line-height: 1; user-select: none; letter-spacing: -2px; }
.fk-ipucu { font-size: 11.5px; color: var(--metin-3); margin-bottom: 10px; padding: 0 2px; }
.fk-ipucu b { color: var(--metin-2); }
.fon-kart.suruk { opacity: .92; box-shadow: var(--golge); z-index: 20; position: relative; border-color: var(--mavi); pointer-events: none; }
.fon-kart.fk-hedef-ust { box-shadow: inset 0 3px 0 var(--mavi); }
.fon-kart.fk-hedef-alt { box-shadow: inset 0 -3px 0 var(--mavi); }
body.suruk-mod { cursor: grabbing; user-select: none; }
body.suruk-mod .fon-kart { transition: none; }

/* ---------- modal (Fon Ekle) ---------- */
.modal-kat { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: grid; place-items: center; z-index: 50; }
.modal-kat[hidden] { display: none; }   /* hidden iken tiklamalari yutmasin (grid, hidden'i eziyordu) */
.modal { width: 560px; max-width: 92vw; max-height: 82vh; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--kenar); border-radius: var(--r-lg); box-shadow: 0 20px 60px rgba(0,0,0,.5); overflow: hidden; }
.modal-bas { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--kenar); }
.modal-bas h3 { font-size: 15px; font-weight: 600; }
.kapat { cursor: pointer; color: var(--metin-3); font-size: 20px; }
.kapat:hover { color: var(--metin); }

/* ---------- toast ---------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--panel-2); color: var(--metin); padding: 12px 20px; border-radius: 12px;
  border: 1px solid var(--kenar); box-shadow: var(--golge); font-size: 13px; opacity: 0;
  transition: all .25s ease; z-index: 60; pointer-events: none;
}
.toast.goster { transform: translateX(-50%) translateY(0); opacity: 1; }
.empty-hint { color: var(--metin-3); font-size: 13px; padding: 14px; }

/* ---------- klasor-sekmeli sepet paneli (evrak ucu) ---------- */
.klasor { margin-top: 22px; }
.klasor-sekmeler { display: flex; gap: 0; align-items: flex-end; padding-left: 10px; flex-wrap: wrap; }
.klasor-sek {
  padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer;
  background: var(--bg-2); color: var(--metin-2);
  border: 1px solid var(--kenar); border-bottom: none;
  border-radius: 10px 10px 0 0; margin-bottom: -1px;   /* panele bitisik */
  transition: color .15s, background .15s;
}
.klasor-sek:hover { color: var(--metin); }
.klasor-sek .say { opacity: .6; margin-left: 6px; font-size: 11px; font-weight: 500; }
.klasor-sek.aktif {                                    /* secili: panele BITISIK, tablodan KALIN turuncu cerceve */
  padding: 11px 22px; font-size: 14px;
  background: var(--panel); color: var(--turuncu);
  border: 4px solid var(--turuncu); border-bottom: none;
  border-radius: 12px 12px 0 0; margin-bottom: -2px;   /* panelin ust turuncu kenarini ort -> kesintisiz */
  box-shadow: 0 -4px 16px rgba(240, 84, 31, .25);
  position: relative; z-index: 2;
}
.klasor-sek.yeni { color: var(--turuncu); background: transparent; border: 1px solid transparent; border-bottom: none; }
.klasor-sek.yeni:hover { background: var(--bg-2); }
.klasor-panel {                                        /* tablo: NORMAL genislikte turuncu cerceve (sekmeden ince) */
  background: var(--panel); border: 2px solid var(--turuncu);
  border-radius: 0 14px 14px 14px; padding: 14px;
}
.klasor-panel .kontrol { margin-bottom: 10px; }
.klasor-panel .tablo-sar { max-height: 460px; overflow-y: auto; }

/* ---------- fon karsilastirma ---------- */
.donem { display: flex; gap: 6px; flex-wrap: wrap; }
.ks-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 16px; }
.ks-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  background: var(--turuncu-soft); border: 1px solid var(--turuncu); color: var(--turuncu);
  border-radius: 20px; font-size: 13px; font-weight: 600;
}
.ks-chip .x { cursor: pointer; opacity: .7; }
.ks-chip .x:hover { opacity: 1; }
.fon-satir { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; }
.fon-satir:hover { background: var(--panel-2); }
.fon-satir .fs-kod { font-weight: 650; width: 54px; }
.fon-satir .fs-ad { flex: 1; color: var(--metin-2); font-size: 12.5px; }
.fon-satir .fs-tur { font-size: 11px; color: var(--metin-3); padding: 3px 9px; background: var(--bg-2); border-radius: 12px; }