/* SmartSera Maliyet — MOBİL ÖNCELİKLİ.
   Taban stiller telefon içindir; >=1024px'te tablo görünümü açılır.
   Tema: sistem tercihine uyar (light dark). */
:root{
  color-scheme: light dark;
  --bg:#f7f8f5; --yzey:#fff; --yzey2:#f0f2ec; --cizgi:#d9ded1;
  --ink:#1b1f16; --sonuk:#5f6a53; --acc:#3f7a12; --acc-ink:#fff;
  --bek:#8a6a12; --bek-bg:#fdf3d6; --sip:#1d5f8a; --sip-bg:#dceefb;
  --gel:#2c6b34; --gel-bg:#dcf0de; --uyari:#a4400f; --uyari-bg:#fdece2;
  --golge:0 1px 3px rgba(20,30,10,.08),0 4px 14px rgba(20,30,10,.05);
  --r:12px; --dokun:44px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#12140f; --yzey:#1b1e17; --yzey2:#232720; --cizgi:#333a2c;
    --ink:#e8ebe0; --sonuk:#9aa48b; --acc:#8fc93a; --acc-ink:#12140f;
    --bek:#e0a030; --bek-bg:#2e2716; --sip:#6db3e0; --sip-bg:#16232e;
    --gel:#6fbf5e; --gel-bg:#17281a; --uyari:#f08a5d; --uyari-bg:#2e1d15;
    --golge:0 1px 3px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.3);
  }
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  padding-bottom:env(safe-area-inset-bottom);
  overflow-wrap:anywhere;               /* uzun tedarikçi/link taşmasın */
}
/* Rakamlar hizalı — para sütunları kayarsa okunmaz */
.para,.sayi,td.para,th.para{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

button,input,select,textarea{font:inherit;color:inherit}
/* 16px: iOS 16px altında odaklanınca otomatik yakınlaştırır */
input,select,textarea{
  font-size:16px;background:var(--yzey);border:1px solid var(--cizgi);
  border-radius:10px;padding:11px 12px;width:100%;min-height:var(--dokun);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acc);outline-offset:-1px}
button{
  min-height:var(--dokun);min-width:var(--dokun);border:1px solid var(--cizgi);
  background:var(--yzey);border-radius:10px;padding:10px 16px;cursor:pointer;
}
button:active{transform:translateY(1px)}
button.bas{background:var(--acc);color:var(--acc-ink);border-color:transparent;font-weight:600}
button.tehlike{color:var(--uyari);border-color:var(--uyari)}
button.duz{border-color:transparent;background:transparent;padding:10px 8px}
a{color:var(--acc)}

/* ---------------- üst bant: kaydırınca kalır ---------------- */
.ust{
  position:sticky;top:0;z-index:40;background:var(--bg);
  padding:calc(env(safe-area-inset-top) + 8px) 12px 8px;
  border-bottom:1px solid var(--cizgi);
}
.ust-sr1{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.logo{width:28px;height:28px;flex:none}
.baslik{font-size:16px;font-weight:650;letter-spacing:-.2px;flex:1}
.kur-bant{
  font-size:12px;color:var(--sonuk);display:flex;flex-wrap:wrap;gap:6px;
  align-items:center;font-variant-numeric:tabular-nums;
}
.rozet-bayat{background:var(--bek-bg);color:var(--bek);border-radius:20px;
  padding:2px 9px;font-size:11px;font-weight:600}
.toplam-kutu{display:flex;gap:8px;margin-top:8px;overflow-x:auto;scrollbar-width:none}
.toplam-kutu::-webkit-scrollbar{display:none}
.tk{
  background:var(--yzey);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:8px 12px;flex:1;min-width:104px;box-shadow:var(--golge)
}
.tk .k{font-size:11px;color:var(--sonuk);text-transform:uppercase;letter-spacing:.4px}
.tk .v{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:1px}
.tk.ana .v{color:var(--acc)}
.uyari-serit{
  background:var(--uyari-bg);color:var(--uyari);border-radius:10px;
  padding:8px 12px;margin-top:8px;font-size:13px;font-weight:600;
  display:flex;align-items:center;gap:8px
}

/* ---------------- gövde ---------------- */
main{padding:12px;max-width:1400px;margin:0 auto}
.arac{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.arac input[type=search]{flex:1;min-width:180px}
.arac select{width:auto;min-width:132px;flex:0 1 auto}

/* akordeon: 11 bölüm kapalı başlar */
.bolum{background:var(--yzey);border:1px solid var(--cizgi);border-radius:var(--r);
  margin-bottom:10px;overflow:hidden;box-shadow:var(--golge)}
.bolum>summary{
  list-style:none;cursor:pointer;padding:13px 14px;display:flex;
  align-items:center;gap:10px;min-height:var(--dokun);
}
.bolum>summary::-webkit-details-marker{display:none}
.bolum>summary:hover{background:var(--yzey2)}
.ok{transition:transform .18s;color:var(--sonuk);flex:none}
.bolum[open] .ok{transform:rotate(90deg)}
.b-ad{font-weight:650;flex:1;font-size:14.5px}
.b-adet{font-size:11.5px;color:var(--sonuk);background:var(--yzey2);
  border-radius:20px;padding:2px 8px;flex:none}
.b-tut{font-weight:700;font-variant-numeric:tabular-nums;font-size:14px;flex:none}
.b-govde{border-top:1px solid var(--cizgi);padding:8px}

/* ---- MOBİL: her kalem KART. Yatay kaydırma YOK. ---- */
.kart{
  background:var(--yzey2);border:1px solid var(--cizgi);border-radius:10px;
  padding:11px 12px;margin-bottom:8px
}
.kart:last-child{margin-bottom:0}
.k-ust{display:flex;gap:8px;align-items:flex-start}
.k-ad{font-weight:600;flex:1;line-height:1.35}
.k-spec{font-size:12.5px;color:var(--sonuk);margin-top:2px}
.k-hesap{
  display:flex;align-items:baseline;gap:6px;margin-top:9px;
  font-variant-numeric:tabular-nums;flex-wrap:wrap
}
.k-hesap .carp{color:var(--sonuk);font-size:13px}
.k-hesap .tut{margin-left:auto;font-weight:700;font-size:16px}
.k-alt{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;align-items:center}
.rozet{font-size:11.5px;border-radius:20px;padding:3px 9px;font-weight:600;white-space:nowrap}
.r-ted{background:var(--yzey);color:var(--sonuk);border:1px solid var(--cizgi)}
.r-b{background:var(--bek-bg);color:var(--bek)}
.r-s{background:var(--sip-bg);color:var(--sip)}
.r-g{background:var(--gel-bg);color:var(--gel)}
.r-eksik{background:var(--uyari-bg);color:var(--uyari)}
.r-para{background:var(--sip-bg);color:var(--sip)}
.tahmin{color:var(--bek);font-size:12px;cursor:help}  /* ver=0 işareti */
.k-esdeger{font-size:11.5px;color:var(--sonuk);font-variant-numeric:tabular-nums}
.kart.eksik{border-color:var(--uyari);background:var(--uyari-bg)}

/* ---- GENİŞ EKRAN: tablo ---- */
.tablo{display:none;width:100%;border-collapse:collapse;font-size:13.5px}
.tablo th{
  text-align:left;padding:8px 10px;border-bottom:2px solid var(--cizgi);
  color:var(--sonuk);font-size:11.5px;text-transform:uppercase;letter-spacing:.4px
}
.tablo td{padding:9px 10px;border-bottom:1px solid var(--cizgi);vertical-align:top}
.tablo tr:last-child td{border-bottom:none}
.tablo tr:hover td{background:var(--yzey2)}
.tablo tr.eksik td{background:var(--uyari-bg)}
@media (min-width:1024px){
  .kart{display:none}
  .tablo{display:table}
  main{padding:16px 20px}
  .toplam-kutu .tk{min-width:150px}
}

/* ---------------- yardımcılar ---------------- */
.bos{text-align:center;padding:38px 18px;color:var(--sonuk)}
.bos .bs{font-size:34px;margin-bottom:8px;opacity:.55}
.iskelet{background:linear-gradient(90deg,var(--yzey2) 25%,var(--cizgi) 37%,var(--yzey2) 63%);
  background-size:400% 100%;animation:kay 1.3s ease infinite;border-radius:8px;height:64px;margin-bottom:8px}
@keyframes kay{0%{background-position:100% 50%}100%{background-position:0 50%}}
.yukleniyor-tam{display:flex;flex-direction:column;align-items:center;
  justify-content:center;min-height:70vh;gap:14px;color:var(--sonuk)}
.spin{width:26px;height:26px;border:3px solid var(--cizgi);border-top-color:var(--acc);
  border-radius:50%;animation:don .8s linear infinite}
@keyframes don{to{transform:rotate(360deg)}}
.tost{
  position:fixed;left:50%;transform:translateX(-50%) translateY(140%);
  bottom:calc(env(safe-area-inset-bottom) + 18px);z-index:90;
  background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:24px;
  font-size:14px;font-weight:600;transition:transform .26s;max-width:92vw;text-align:center
}
.tost.gor{transform:translateX(-50%) translateY(0)}
.tost.hata{background:var(--uyari);color:#fff}

/* giriş / kayıt */
.orta{max-width:400px;margin:8vh auto;padding:0 16px}
.kutu{background:var(--yzey);border:1px solid var(--cizgi);border-radius:16px;
  padding:22px;box-shadow:var(--golge)}
.alan{margin-bottom:13px}
.alan label{display:block;font-size:12.5px;color:var(--sonuk);margin-bottom:5px;font-weight:600}
.hata-kutu{background:var(--uyari-bg);color:var(--uyari);border-radius:10px;
  padding:10px 12px;font-size:13.5px;margin-bottom:13px;font-weight:600}
.bilgi-kutu{background:var(--sip-bg);color:var(--sip);border-radius:10px;
  padding:12px 14px;font-size:13.5px;margin-bottom:13px}

/* düzenleme: mobilde tam ekran, masaüstünde yan panel */
.panel{position:fixed;inset:0;z-index:70;background:var(--bg);overflow-y:auto;
  padding:calc(env(safe-area-inset-top) + 12px) 14px calc(env(safe-area-inset-bottom) + 90px)}
.panel-ust{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.panel-ust h2{font-size:17px;flex:1}
.panel-alt{position:fixed;left:0;right:0;bottom:0;display:flex;gap:10px;
  padding:12px 14px calc(env(safe-area-inset-bottom) + 12px);
  background:var(--yzey);border-top:1px solid var(--cizgi)}
.panel-alt button{flex:1}
@media (min-width:1024px){
  .panel{left:auto;width:460px;border-left:1px solid var(--cizgi);box-shadow:-8px 0 30px rgba(0,0,0,.16)}
  .panel-alt{left:auto;width:460px}
}
/* alt gezinme — mobilde parmak erişimi */
.gez{position:sticky;bottom:0;z-index:35;display:flex;gap:4px;background:var(--yzey);
  border-top:1px solid var(--cizgi);padding:6px 8px calc(env(safe-area-inset-bottom) + 6px)}
.gez button{flex:1;flex-direction:column;gap:2px;display:flex;align-items:center;
  border:none;background:transparent;font-size:11px;color:var(--sonuk);padding:6px 2px}
.gez button.etkin{color:var(--acc);font-weight:700}
.gez .ikon{font-size:19px;line-height:1}
@media (min-width:1024px){.gez{display:none}}
.mst-gez{display:none}
@media (min-width:1024px){.mst-gez{display:flex;gap:6px}}

.satir{display:flex;gap:10px;align-items:center}
.sag{margin-left:auto}
.kucuk{font-size:12.5px;color:var(--sonuk)}
.liste-basi{display:flex;align-items:center;gap:8px;margin:14px 0 8px}
.liste-basi h2{font-size:15px}