/* ATÖLYE — arayüz stilleri. Dış font veya kütüphane yoktur. */

:root{
  --kagit:#f1f4f1;
  --yuzey:#ffffff;
  --yuzey-2:#f7f9f7;
  --murekkep:#14201b;
  --murekkep-2:#56645d;
  --cizgi:#d2dad5;
  --cizgi-2:#e6ebe8;
  --vurgu:#0e6a51;
  --vurgu-yumusak:#e2efe9;
  --uyari:#a6501d;
  --uyari-yumusak:#f6ebe1;
  --golge:0 1px 2px rgba(20,32,27,.07), 0 6px 20px rgba(20,32,27,.06);
  --yazi:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --tek:"Consolas","DejaVu Sans Mono","SFMono-Regular",Menlo,monospace;
  --r:5px;
}

/* GECE / GÜNDÜZ
 * ------------
 * Program eskiden yalnız işletim sisteminin ayarını izliyordu; bilgisayar
 * gece modundaysa gündüz görünümüne geçmenin yolu yoktu.
 *
 * Üç durum var ve `<html data-tema>` ile seçilir:
 *   (boş)    → sistemi izle
 *   gunduz   → her zaman açık
 *   gece     → her zaman koyu
 *
 * Koyu paletin kendisi de bir tık açıldı: #101512 fazla karanlıktı,
 * uzun süre bakınca yoruyordu.
 */
:root[data-tema="gece"],
:root[data-tema="gece"] body{color-scheme:dark}

@media (prefers-color-scheme: dark){
  /* Kullanıcı açıkça "gündüz" demediyse sistemi izle */
  :root:not([data-tema="gunduz"]){
    --kagit:#161c19; --yuzey:#1e2521; --yuzey-2:#263029;
    --murekkep:#e8efe9; --murekkep-2:#a1b0a7;
    --cizgi:#36423c; --cizgi-2:#2c3631;
    --vurgu:#5fd0ab; --vurgu-yumusak:#1b382f;
    --uyari:#e8a06c; --uyari-yumusak:#3a2b1e;
    --golge:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.3);
    color-scheme:dark;
  }
}

/* Elle seçilen gece: sistem ne derse desin */
:root[data-tema="gece"]{
  --kagit:#161c19; --yuzey:#1e2521; --yuzey-2:#263029;
  --murekkep:#e8efe9; --murekkep-2:#a1b0a7;
  --cizgi:#36423c; --cizgi-2:#2c3631;
  --vurgu:#5fd0ab; --vurgu-yumusak:#1b382f;
  --uyari:#e8a06c; --uyari-yumusak:#3a2b1e;
  --golge:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.3);
  color-scheme:dark;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;background:var(--kagit);color:var(--murekkep);
  font-family:var(--yazi);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--vurgu)}

/* ---------------------------------------------------------- iskelet */
#kabuk{display:flex;height:100%}
#yan{
  width:216px;flex:0 0 216px;background:var(--yuzey);border-right:1px solid var(--cizgi);
  display:flex;flex-direction:column;overflow-y:auto;
}
.marka{padding:16px 18px 14px;border-bottom:1px solid var(--cizgi)}
.marka b{display:block;font-size:16px;letter-spacing:.14em;font-weight:700;color:var(--vurgu)}
.marka span{display:block;font-size:11px;color:var(--murekkep-2);margin-top:2px}
.menu{padding:8px 0;flex:1}

/* Yan menü satırları: hem tek bağlantılar hem grup başlıkları.
   Yükseklik 44px'in altına düşmez — atölyede dokunmatikle de kullanılıyor. */
.menu a.tek,
.menu button.grup{
  display:flex;align-items:center;gap:8px;width:100%;
  min-height:44px;padding:10px 16px;
  color:var(--murekkep);text-decoration:none;text-align:left;
  font-size:14px;background:none;border:0;
  border-left:2px solid transparent;cursor:pointer;
}
.menu button.grup span:first-child{flex:1;min-width:0}
.menu button.grup .ok{
  font-size:17px;line-height:1;color:var(--murekkep-2);
  transition:transform .14s;flex:0 0 auto;
}
.menu button.grup[aria-expanded="true"] .ok{transform:translateX(2px)}
.menu a.tek:hover,
.menu button.grup:hover{background:var(--yuzey-2)}
.menu a.tek:focus-visible,
.menu button.grup:focus-visible{outline:2px solid var(--vurgu);outline-offset:-2px}
.menu a.tek.secili,
.menu button.grup.secili,
.menu button.grup[aria-expanded="true"]{
  background:var(--vurgu-yumusak);border-left-color:var(--vurgu);font-weight:600;
}

/* Yan menüden açılan panel. body içindedir: yan menünün kendi kaydırması
   kesmesin diye. */
.menu-panel{
  position:fixed;z-index:60;min-width:208px;max-width:min(300px,calc(100vw - 16px));
  max-height:calc(100vh - 16px);overflow-y:auto;
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r);
  box-shadow:var(--golge);padding:6px 0;
}
.menu-panel h4{
  margin:6px 14px 4px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--murekkep-2);font-weight:700;
}
.menu-panel a{
  display:flex;align-items:center;min-height:44px;padding:10px 16px;
  color:var(--murekkep);text-decoration:none;font-size:14px;
  border-left:2px solid transparent;
}
.menu-panel a:hover{background:var(--yuzey-2)}
.menu-panel a:focus-visible{outline:2px solid var(--vurgu);outline-offset:-2px}
.menu-panel a.secili{
  background:var(--vurgu-yumusak);border-left-color:var(--vurgu);font-weight:600;
}
.yan-alt{padding:12px 18px;border-top:1px solid var(--cizgi);font-size:12px;color:var(--murekkep-2)}

/* Gece/gündüz seçimi — yan menünün altında üç küçük düğme */
.tema-secim{display:flex;gap:2px;margin:8px 0 6px;
  background:var(--yuzey-2);border:1px solid var(--cizgi);border-radius:var(--r);padding:2px}
.tema-dugme{flex:1;min-width:0;padding:5px 4px;border:0;border-radius:3px;
  background:none;color:var(--murekkep-2);font-size:11px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tema-dugme:hover{color:var(--murekkep)}
.tema-dugme.secili{background:var(--yuzey);color:var(--murekkep);font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.12)}
.tema-dugme:focus-visible{outline:2px solid var(--vurgu);outline-offset:-2px}

#govde{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
#ust{
  display:flex;align-items:center;gap:12px;padding:0 20px;height:52px;
  border-bottom:1px solid var(--cizgi);background:var(--yuzey);flex:0 0 auto;
}
#ust h1{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em}
#ust .bosluk{flex:1}
#icerik{flex:1;overflow:auto;padding:20px 24px 60px}

/* ---------------------------------------------------------- bileşenler */
.dugme{
  border:1px solid var(--cizgi);background:var(--yuzey);border-radius:var(--r);
  padding:6px 13px;cursor:pointer;font-size:13.5px;
}
.dugme:hover{border-color:var(--murekkep-2)}
.dugme.ana{background:var(--vurgu);border-color:var(--vurgu);color:#fff;font-weight:600}
.dugme.ana:hover{opacity:.9}
.dugme.sessiz{border-color:transparent;color:var(--murekkep-2)}
.dugme.tehlike{color:var(--uyari);border-color:var(--uyari)}
.dugme:disabled{opacity:.45;cursor:default}

input[type=text],input[type=password],input[type=number],input[type=date],select,textarea{
  border:1px solid var(--cizgi);background:var(--yuzey);border-radius:var(--r);
  padding:6px 9px;width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--vurgu);outline-offset:-1px}
textarea{min-height:64px;resize:vertical}
label.onay{display:flex;align-items:center;gap:7px;cursor:pointer}
label.onay input{width:auto}

.arac{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.arac .ara{width:230px}
.not{
  border-left:2px solid var(--vurgu);background:var(--vurgu-yumusak);
  padding:9px 13px;border-radius:0 var(--r) var(--r) 0;font-size:13px;
  color:var(--murekkep);margin-bottom:16px;max-width:760px;
}

table.liste{width:100%;border-collapse:collapse;background:var(--yuzey);
  border:1px solid var(--cizgi);border-radius:var(--r);overflow:hidden}
table.liste th{
  text-align:left;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--murekkep-2);padding:9px 12px;border-bottom:1px solid var(--cizgi);
  background:var(--yuzey-2);white-space:nowrap;font-weight:700;
}
table.liste td{padding:8px 12px;border-bottom:1px solid var(--cizgi-2);vertical-align:middle}
table.liste tr:last-child td{border-bottom:0}
table.liste tbody tr:hover{background:var(--yuzey-2)}
table.liste td.sag,table.liste th.sag{text-align:right;font-variant-numeric:tabular-nums}
table.liste td.eylem{text-align:right;white-space:nowrap}
.pasif{opacity:.5}
.rozet{
  display:inline-block;font-size:11px;padding:1px 7px;border-radius:99px;
  background:var(--vurgu-yumusak);color:var(--vurgu);font-weight:600;
}
.rozet.gri{background:var(--cizgi-2);color:var(--murekkep-2)}
.kod{font-family:var(--tek);font-size:12.5px}
.bos{padding:40px;text-align:center;color:var(--murekkep-2);
  border:1px dashed var(--cizgi);border-radius:var(--r);background:var(--yuzey)}

/* ---------------------------------------------------------- kalıp */
#ortu{
  position:fixed;inset:0;background:rgba(10,18,15,.42);display:flex;
  align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto;z-index:50;
}
#ortu[hidden]{display:none}
.kalip{
  background:var(--yuzey);border-radius:8px;box-shadow:var(--golge);
  width:100%;max-width:560px;border:1px solid var(--cizgi);
}
.kalip.genis{max-width:1040px}
.kalip header{padding:16px 20px;border-bottom:1px solid var(--cizgi);
  display:flex;align-items:center;gap:12px}
.kalip header h3{margin:0;font-size:15px;font-weight:600}
.kalip .govde{padding:18px 20px;max-height:66vh;overflow:auto}
.kalip footer{padding:13px 20px;border-top:1px solid var(--cizgi);
  display:flex;gap:9px;justify-content:flex-end;align-items:center}
.kalip footer .sol{margin-right:auto}

.alanlar{display:grid;grid-template-columns:1fr 1fr;gap:13px 16px}
.alan{display:flex;flex-direction:column;gap:4px;min-width:0}
.alan.tam{grid-column:1 / -1}
.alan label{font-size:12px;color:var(--murekkep-2);font-weight:600}
.alan .yardim{font-size:11.5px;color:var(--murekkep-2)}

.hata{
  background:var(--uyari-yumusak);color:var(--uyari);border-left:2px solid var(--uyari);
  padding:8px 12px;border-radius:0 var(--r) var(--r) 0;font-size:13px;margin-bottom:12px;
}
#bildirim{
  position:fixed;right:18px;bottom:18px;background:var(--murekkep);color:var(--kagit);
  padding:10px 16px;border-radius:var(--r);box-shadow:var(--golge);z-index:80;font-size:13.5px;
}
#bildirim[hidden]{display:none}
#bildirim.kotu{background:var(--uyari);color:#fff}

/* ---------------------------------------------------------- giriş */
#giris{
  height:100%;display:flex;align-items:center;justify-content:center;background:var(--kagit);
}
#giris .kutu{
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:8px;
  padding:30px;width:330px;box-shadow:var(--golge);
}
#giris h2{margin:0 0 4px;font-size:20px;letter-spacing:.14em;color:var(--vurgu)}
#giris p{margin:0 0 20px;color:var(--murekkep-2);font-size:12.5px}
#giris .alan{margin-bottom:12px}

/* ---------------------------------------------------------- ağaç ekranı */
.bolum{margin-top:22px}
.bolum h3{
  margin:0 0 9px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--vurgu);font-weight:700;display:flex;align-items:center;gap:10px;
}
.bolum h3::after{content:"";flex:1;height:1px;background:var(--cizgi)}
.izgara{width:100%;border-collapse:collapse;background:var(--yuzey);
  border:1px solid var(--cizgi);border-radius:var(--r);overflow:hidden}
.izgara th{
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;text-align:left;
  color:var(--murekkep-2);padding:7px 8px;background:var(--yuzey-2);
  border-bottom:1px solid var(--cizgi);white-space:nowrap;font-weight:700;
}
.izgara td{padding:4px 6px;border-bottom:1px solid var(--cizgi-2)}
.izgara input,.izgara select{padding:4px 7px;border-color:transparent;background:transparent}
.izgara input:hover,.izgara select:hover{border-color:var(--cizgi)}
.izgara input:focus,.izgara select:focus{background:var(--yuzey)}
.izgara td.dar{width:78px}
.izgara td.orta{width:120px}
.sar{display:flex;gap:10px;flex-wrap:wrap}
.kutu{
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r);padding:14px 16px;
}
.ozet{display:flex;gap:26px;flex-wrap:wrap;margin-top:10px}
.ozet div span{display:block;font-size:11px;color:var(--murekkep-2);letter-spacing:.05em}
.ozet div b{font-size:19px;font-variant-numeric:tabular-nums}
.ozet div b.vurgulu{color:var(--vurgu)}

@media (max-width:760px){
  #yan{position:fixed;left:0;top:0;bottom:0;z-index:40;transform:translateX(-100%);
       transition:transform .18s}
  #yan.acik{transform:none}
  #icerik{padding:16px 14px 50px}
  .alanlar{grid-template-columns:1fr}
  #menu-dugme{display:inline-block !important}
}
#menu-dugme{display:none}

/* grafik */
.sutun{transition:opacity .12s}
.sutun:hover{opacity:.75;cursor:default}

/* Dar ekranda geniş tabloları yatay kaydırılabilir yapar. Olmadığında tablo
   sayfayı taşırıyor ve sağdaki sütunlar hiç görülemiyordu. */
.tablo-sar{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tablo-sar table{min-width:560px}
.liste tr.op td{color:var(--murekkep-2);font-size:13px}

/* Ürün seçimi: kutu + "diğer ürünler" anahtarı */
.urun-secim{display:flex;flex-direction:column;gap:4px;min-width:0}
.urun-secim .digeri{display:flex;align-items:center;gap:6px;font-size:11.5px;
  color:var(--murekkep-2);cursor:pointer;min-height:24px}
.urun-secim .digeri input{margin:0}

/* Terminalde başlamış (devam eden) operasyon */
.dugme.devam{background:var(--uyari-yumusak);border-color:var(--uyari);color:var(--uyari);
  font-weight:600}
.dugme.devam:hover{background:var(--uyari);color:var(--yuzey)}