:root{
  --bg:#f2f1ee; --panel:#ffffff; --mürekkep:#1d2126; --soluk:#6b7280;
  --cizgi:#dedbd4; --vurgu:#8a3324; --vurgu-acik:#f6ece8;
  --iyi:#2f6f4f; --uyari:#a8630f; --kotu:#a33224;
  --golge:0 1px 2px rgba(20,20,20,.05), 0 6px 20px rgba(20,20,20,.06);
  --r:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",Inter,system-ui,-apple-system,Arial,sans-serif;
  background:var(--bg); color:var(--mürekkep); font-size:14px; line-height:1.45;
}
h1,h2,h3{margin:0; font-weight:650; letter-spacing:-.01em}
.gizli{display:none !important}
small{color:var(--soluk); font-weight:400}

/* ---------------- üst bar ---------------- */
.ust{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 20px; background:var(--panel); border-bottom:1px solid var(--cizgi);
  position:sticky; top:0; z-index:20;
}
.marka{display:flex; align-items:center; gap:12px}
.logo{
  width:38px;height:38px;display:grid;place-items:center;border-radius:9px;
  background:var(--vurgu); color:#fff; font-size:20px;
}
.marka h1{font-size:17px}
.marka p{margin:1px 0 0; font-size:12.5px; color:var(--soluk)}
.ust-aksiyon{display:flex; gap:8px}

/* ---------------- butonlar ---------------- */
.btn{
  font:inherit; border:1px solid var(--cizgi); background:#fff; color:var(--mürekkep);
  padding:8px 14px; border-radius:8px; cursor:pointer; transition:.14s;
}
.btn:hover{background:#f7f6f3; border-color:#c9c5bc}
.btn.birincil{background:var(--vurgu); border-color:var(--vurgu); color:#fff; font-weight:600}
.btn.birincil:hover{background:#73291d}
.btn.ikincil{background:#fff}
.btn.kucuk{padding:5px 10px; font-size:12.5px; border-radius:7px}
.btn.tehlike{color:var(--kotu); border-color:#e7d3cf}

/* ---------------- yerleşim ---------------- */
.govde{display:grid; grid-template-columns:380px minmax(0,1fr); gap:16px; padding:16px; align-items:start}
@media(max-width:1080px){ .govde{grid-template-columns:1fr} }

.panel{
  background:var(--panel); border:1px solid var(--cizgi); border-radius:var(--r);
  box-shadow:var(--golge); position:sticky; top:74px; max-height:calc(100vh - 90px); overflow:auto;
}
@media(max-width:1080px){ .panel{position:static; max-height:none} }

.blok{padding:14px 16px; border-bottom:1px solid var(--cizgi)}
.blok:last-child{border-bottom:0}
.blok h2{font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--soluk); margin-bottom:10px}
.blok-basi{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.blok-basi h2{margin:0}

label{display:block; font-size:12.5px; color:var(--soluk); margin-bottom:8px}
input,select{
  width:100%; font:inherit; font-size:13.5px; color:var(--mürekkep);
  padding:7px 9px; margin-top:3px; border:1px solid var(--cizgi); border-radius:7px; background:#fff;
}
input:focus,select:focus{outline:2px solid var(--vurgu-acik); border-color:var(--vurgu)}
.satir{display:flex; gap:8px}
.satir>label{flex:1; min-width:0}
.onay-grup{display:flex; gap:14px; flex-wrap:wrap}
.onay{display:flex; align-items:center; gap:6px; margin:0; cursor:pointer}
.onay input{width:auto; margin:0}
.ipucu{font-size:12px; color:var(--soluk); margin:8px 0 0; line-height:1.4}

.segment{display:flex; background:#f2f1ee; border-radius:8px; padding:3px; margin-bottom:12px}
.segment button{
  flex:1; font:inherit; font-size:12.5px; border:0; background:transparent;
  padding:6px; border-radius:6px; cursor:pointer; color:var(--soluk);
}
.segment button.aktif{background:#fff; color:var(--mürekkep); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.07)}

/* ---------------- kontur editörü ---------------- */
.ciz-arac{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:7px}
.ciz-arac .satir-ic{display:flex; align-items:center; gap:5px; margin:0; white-space:nowrap}
.ciz-arac .satir-ic select{width:auto; margin:0}
.ciz-arac input[type=number]{margin:0}
.mini-etiket{font-size:12px; color:var(--soluk)}
.segment.kucuk-seg{margin:0; flex:none; width:auto}
.segment.kucuk-seg button{padding:5px 10px; font-size:12px}
.kontur-kap{
  border:1px solid var(--cizgi); border-radius:9px; overflow:hidden; background:#fbfaf8;
  touch-action:none; user-select:none;
}
.kontur-svg{display:block; width:100%; height:290px; cursor:crosshair}
.kontur-durum{font-size:12px; color:var(--soluk); margin-top:7px; line-height:1.45}
.kontur-durum b{color:var(--mürekkep)}

/* ---------------- daire kartları ---------------- */
.daire-kart{border:1px solid var(--cizgi); border-radius:9px; padding:10px; margin-bottom:9px; background:#fcfbf9}
.daire-kart .ust-sat{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.daire-kart .ust-sat .no{
  width:22px;height:22px;border-radius:6px;background:var(--vurgu-acik);color:var(--vurgu);
  display:grid;place-items:center;font-size:11.5px;font-weight:700; flex:none;
}
.daire-kart .ust-sat .sil{margin-left:auto}
.mini-onaylar{display:grid; grid-template-columns:1fr 1fr; gap:2px 10px; margin-top:6px}
.mini-onaylar .onay{font-size:12px}

/* ---------------- sonuç ---------------- */
.sonuc{min-width:0}
.bosluk{
  background:var(--panel); border:1px solid var(--cizgi); border-radius:var(--r);
  padding:70px 24px; text-align:center; box-shadow:var(--golge);
}
.bosluk-ic{max-width:460px; margin:0 auto}
.buyuk-ikon{font-size:40px; color:#cdc8bd; display:block; margin-bottom:10px}
.bosluk h3{font-size:16px; margin-bottom:6px}
.bosluk p{color:var(--soluk); font-size:13.5px; margin:0}

.ozet{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:12px}
.ozet-kutu{background:var(--panel); border:1px solid var(--cizgi); border-radius:9px; padding:10px 12px; box-shadow:var(--golge)}
.ozet-kutu .etiket{font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--soluk)}
.ozet-kutu .deger{font-size:19px; font-weight:670; margin-top:2px}
.ozet-kutu .alt{font-size:12px; color:var(--soluk)}
.ozet-kutu.iyi{border-color:#c9e0d2} .ozet-kutu.kotu{border-color:#e7cbc6}

.sekmeler{display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap}
.sekme{
  background:var(--panel); border:1px solid var(--cizgi); border-radius:9px; padding:8px 13px;
  cursor:pointer; display:flex; align-items:center; gap:9px; transition:.14s;
}
.sekme:hover{border-color:#c3bdb1}
.sekme.aktif{border-color:var(--vurgu); background:var(--vurgu-acik)}
.sekme .ad{font-weight:600; font-size:13px}
.sekme .tip{font-size:11.5px; color:var(--soluk)}
.sekme .skor{
  font-size:12px; font-weight:700; padding:2px 7px; border-radius:20px;
  background:#eef0ee; color:var(--mürekkep);
}
.sekme .skor.iyi{background:#e2f0e8; color:var(--iyi)}
.sekme .skor.orta{background:#fbf0dd; color:var(--uyari)}
.sekme .skor.kotu{background:#f8e4e0; color:var(--kotu)}

.plan-alani{background:var(--panel); border:1px solid var(--cizgi); border-radius:var(--r); box-shadow:var(--golge); overflow:hidden; margin-bottom:12px}
.plan-arac{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; border-bottom:1px solid var(--cizgi); flex-wrap:wrap}
.plan-arac>span{font-size:13px; font-weight:600}
.arac-butonlar{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.ayirac{width:1px; height:20px; background:var(--cizgi); margin:0 3px}
.plan-kutu{background:#fbfaf8; overflow:auto; max-height:78vh; padding:10px; display:grid; place-items:center}
.plan-kutu svg{display:block; width:100%; height:auto}
#planIc{width:100%; transition:width .12s}

.kartlar{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px}
@media(max-width:820px){ .kartlar{grid-template-columns:1fr} }
.kart{background:var(--panel); border:1px solid var(--cizgi); border-radius:var(--r); padding:14px 16px; box-shadow:var(--golge); margin-bottom:12px}
.kart h3{font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--soluk); margin-bottom:10px; display:flex; align-items:center; gap:8px}
.rozet{background:#f0eee9; color:var(--soluk); border-radius:20px; padding:1px 8px; font-size:11.5px; letter-spacing:0}
.rozet.var{background:#fbf0dd; color:var(--uyari)}

.olcum{margin-bottom:8px}
.olcum-ust{display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:3px}
.olcum-ust b{font-variant-numeric:tabular-nums}
.cubuk{height:6px; background:#efedea; border-radius:4px; overflow:hidden}
.cubuk i{display:block; height:100%; background:var(--iyi); border-radius:4px}
.cubuk i.orta{background:var(--uyari)} .cubuk i.kotu{background:var(--kotu)}

.uyari-liste{margin:0; padding-left:18px; max-height:230px; overflow:auto; font-size:12.8px; color:#4b5158}
.uyari-liste li{margin-bottom:5px}
.uyari-liste.bos{list-style:none; padding:0; color:var(--iyi)}

table{width:100%; border-collapse:collapse; font-size:12.8px}
th,td{text-align:left; padding:6px 8px; border-bottom:1px solid #eeece7}
th{font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--soluk); font-weight:600}
td.sayi,th.sayi{text-align:right; font-variant-numeric:tabular-nums}
tr.toplam td{font-weight:700; border-top:2px solid var(--cizgi); border-bottom:0}

.daire-ozet{border:1px solid var(--cizgi); border-radius:9px; margin-bottom:9px; overflow:hidden}
.daire-ozet>summary{
  cursor:pointer; padding:9px 12px; background:#fbfaf8; display:flex; align-items:center; gap:10px;
  font-size:13px; list-style:none;
}
.daire-ozet>summary::-webkit-details-marker{display:none}
.daire-ozet>summary::before{content:'▸'; color:var(--soluk); transition:.15s}
.daire-ozet[open]>summary::before{transform:rotate(90deg)}
.daire-ozet .rozet-tip{background:var(--vurgu-acik); color:var(--vurgu); border-radius:5px; padding:1px 7px; font-size:11.5px; font-weight:600}
.daire-ozet .sag{margin-left:auto; color:var(--soluk); font-size:12.3px}
.daire-ozet table{margin:0}
.kucuk-not{color:var(--uyari); font-size:11.5px}

.kontrol-sat{display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid #eeece7; font-size:13px}
.kontrol-sat:last-child{border-bottom:0}
.durum{font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:20px}
.durum.ok{background:#e2f0e8; color:var(--iyi)}
.durum.no{background:#f8e4e0; color:var(--kotu)}
.kontrol-sat .aciklama{color:var(--soluk); font-size:12.3px; margin-left:auto; text-align:right}

.yukleniyor{
  position:fixed; inset:0; background:rgba(245,244,241,.75); backdrop-filter:blur(2px);
  display:grid; place-items:center; gap:12px; z-index:50; font-size:14px; color:var(--soluk);
  grid-auto-flow:row;
}
.spin{width:30px;height:30px;border:3px solid #ddd9d1;border-top-color:var(--vurgu);border-radius:50%;animation:d 0.8s linear infinite}
@keyframes d{to{transform:rotate(360deg)}}

.hata-kutu{background:#fdf1ef; border:1px solid #edd0ca; color:#7d2b1e; padding:12px 14px; border-radius:9px; margin-bottom:12px; font-size:13px}

@media print{
  .ust,.panel,.sekmeler,.plan-arac,.kartlar,.yukleniyor{display:none !important}
  .govde{display:block; padding:0}
  .plan-alani{border:0; box-shadow:none}
  .plan-kutu{max-height:none; overflow:visible}
  body{background:#fff}
}