:root{
  --zemin:#f6f7f9; --panel:#ffffff; --cizgi:#e3e6ea; --yazi:#1c2430;
  --soluk:#63707f; --vurgu:#1f4e79; --hata-z:#fdeaea; --hata-y:#a01c1c;
}
@media (prefers-color-scheme: dark){
  :root{
    --zemin:#12161c; --panel:#1a2029; --cizgi:#2b3441; --yazi:#e6ebf2;
    --soluk:#93a1b1; --vurgu:#5b9bd5; --hata-z:#3a1e1e; --hata-y:#ff9d9d;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--zemin);color:var(--yazi);
     font:15px/1.5 system-ui,"Segoe UI",Arial,sans-serif}
a{color:var(--vurgu)}

.ust{display:flex;align-items:center;justify-content:space-between;gap:16px;
     padding:12px 20px;background:var(--panel);border-bottom:1px solid var(--cizgi)}
.marka{font-weight:700;letter-spacing:.3px}
.ust nav{display:flex;align-items:center;gap:16px}
.kul{color:var(--soluk);font-size:13px}
.cikis{color:var(--soluk)}

.icerik{max-width:1100px;margin:24px auto;padding:0 20px}
.giris-sayfa{min-height:100vh;display:grid;place-items:center;padding:20px}

.kart{background:var(--panel);border:1px solid var(--cizgi);border-radius:12px;padding:20px}
.giris{width:min(360px,100%);display:flex;flex-direction:column;gap:6px}
.giris h1{margin:0;font-size:22px}
.giris .alt{margin:0 0 12px;color:var(--soluk);font-size:13px}

label{font-size:13px;color:var(--soluk);display:block;margin-top:8px}
input,select{width:100%;padding:9px 10px;border:1px solid var(--cizgi);border-radius:8px;
             background:var(--zemin);color:var(--yazi);font:inherit}
input:focus,select:focus{outline:2px solid var(--vurgu);outline-offset:1px}
button{margin-top:14px;padding:10px 16px;border:0;border-radius:8px;
       background:var(--vurgu);color:#fff;font:inherit;font-weight:600;cursor:pointer}
button:disabled{opacity:.5;cursor:not-allowed}

.form-satir{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.form-satir>div{flex:1 1 130px}
.form-satir label{margin-top:0}
.form-satir button{margin-top:0}

.uyari{padding:10px 12px;border-radius:8px;margin-bottom:14px;font-size:14px}
.uyari.hata{background:var(--hata-z);color:var(--hata-y)}
.uyari.tamam{background:color-mix(in srgb, #2e8b57 14%, var(--panel));color:var(--yazi)}
.uyari a{color:inherit;font-weight:600}

.ozet{margin:18px 2px 8px;color:var(--soluk)}
.ozet strong{color:var(--yazi);font-size:16px}
.iz{margin-left:10px;font-size:12px;opacity:.7}
.bos{color:var(--soluk)}

.tablo-sar{overflow-x:auto;background:var(--panel);border:1px solid var(--cizgi);border-radius:12px}
table{border-collapse:collapse;width:100%;font-size:14px}
th{background:var(--vurgu);color:#fff;text-align:left;padding:9px 12px;
   font-weight:600;white-space:nowrap}
td{padding:9px 12px;border-top:1px solid var(--cizgi);white-space:nowrap}
tbody tr:hover td{background:var(--zemin)}
.ucuslar{white-space:normal;min-width:260px}
.bacak{display:inline-block;margin-right:10px}
.op{color:var(--soluk);font-size:12px;margin-left:3px}

.bilgi h2{margin:0 0 8px;font-size:17px}
.bilgi p{margin:6px 0;color:var(--soluk)}
code{background:var(--zemin);border:1px solid var(--cizgi);border-radius:5px;
     padding:1px 5px;font-size:13px}

/* --- tarife sayfasi --- */
h2.grup{margin:26px 0 6px;font-size:16px;letter-spacing:.3px;color:var(--vurgu)}
h3.sehir{margin:16px 0 6px;font-size:15px;font-weight:600;display:flex;
         align-items:baseline;gap:8px}
h3.sehir .kod{color:var(--soluk);font-weight:400;font-size:13px}
h3.sehir .adet{margin-left:auto;color:var(--soluk);font-weight:400;font-size:12px}
tr.gidis td{background:color-mix(in srgb, var(--vurgu) 7%, transparent)}
tr.gidis:hover td{background:color-mix(in srgb, var(--vurgu) 13%, transparent)}
td.saat{font-variant-numeric:tabular-nums;font-weight:600}
.dugme-alt{align-self:flex-end;padding:10px 14px;border-radius:8px;text-decoration:none;
           border:1px solid var(--cizgi);background:var(--panel);color:var(--yazi);
           font-weight:600;font-size:14px}
.dugme-alt:hover{border-color:var(--vurgu)}
.form-satir form{margin:0}

/* --- baglanti matrisi --- */
.rozet{display:inline-block;min-width:20px;padding:1px 7px;border-radius:20px;
       font-weight:700;font-size:12px;text-align:center;color:#0f1720}
.rozet.sA{background:#8fd19e}
.rozet.sB{background:#f2d16b}
.rozet.sC{background:#9ec5e8}
.rozet.sD{background:#c9cfd6}
.ozet .rozet{margin-right:6px}
td.urun{white-space:normal;min-width:230px}

/* --- tarama formu + durum kutusu, vietnam programi --- */
details.tarama{margin-bottom:16px}
details.tarama summary{cursor:pointer;font-weight:600;color:var(--vurgu)}
details.tarama form{margin-top:12px}
.onay-grup{display:flex;flex-wrap:wrap;gap:4px 14px;margin:4px 0 10px}
.onay{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--yazi)}
.onay input{width:auto;margin:0}
.alt-not{margin:10px 0 0;color:var(--soluk);font-size:13px}
.kart.durum{margin-bottom:16px;font-size:14px}
.kart.d-suruyor{border-left:4px solid var(--vurgu)}
.kart.d-bitti{border-left:4px solid #2e8b57}
.kart.d-hata,.kart.d-kesildi{border-left:4px solid var(--hata-y)}
pre.log{margin:10px 0 0;padding:10px;background:var(--zemin);border:1px solid var(--cizgi);
        border-radius:8px;font-size:12px;overflow-x:auto;max-height:220px}
td.islem{white-space:nowrap}
td.islem form{display:inline;margin-left:8px}
button.sil{margin:0;padding:4px 10px;background:transparent;border:1px solid var(--cizgi);
           color:var(--hata-y);font-size:13px}
button.sil:hover{border-color:var(--hata-y)}
button.ikincil{background:transparent;border:1px solid var(--cizgi);color:var(--yazi)}
button.ikincil:hover{border-color:var(--vurgu)}

/* --- kilavuz --- */
.kilavuz{max-width:820px;line-height:1.65}
.kilavuz h1{margin:0 0 6px;font-size:22px}
.kilavuz h2{margin:26px 0 8px;font-size:17px;color:var(--vurgu)}
.kilavuz h3{margin:16px 0 4px;font-size:15px}
.kilavuz p{margin:6px 0}
.kilavuz .formul{padding:10px 14px;background:var(--zemin);border:1px solid var(--cizgi);
                 border-radius:8px;font-weight:600}
.sinif-tablo{margin:8px 0;font-size:14px}
.sinif-tablo td{border:0;padding:4px 10px 4px 0;white-space:normal}