:root{
  --zemin:#f4f6f4;
  --yuzey:#ffffff;
  --murekkep:#16211c;
  --soluk:#5f6f68;
  --cizgi:#dbe2de;
  --vurgu:#186a4a;
  --vurgu-soluk:#e6f1ec;
  --uyari:#9a5b06;
  --kirmizi:#a12c22;
  --r:6px;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--zemin);color:var(--murekkep);
  font:15px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0 0 8px;font-weight:650;letter-spacing:-.01em}

/* giriş */
.giris{min-height:100vh;display:grid;place-items:center;padding:24px}
.giris__kart{background:var(--yuzey);padding:32px;border-radius:var(--r);width:100%;max-width:340px;
  border:1px solid var(--cizgi);display:grid;gap:14px}
.giris__alt{margin:-6px 0 8px;color:var(--soluk);font-size:13px}
.giris__kart label{display:grid;gap:5px;font-size:13px;color:var(--soluk)}
.giris__kart input{padding:9px 11px;border:1px solid var(--cizgi);border-radius:var(--r);background:#fff}
.giris__kart button{padding:10px;border:0;border-radius:var(--r);background:var(--vurgu);color:#fff;font-weight:600;cursor:pointer}

/* üst çubuk */
.ust{display:flex;align-items:center;gap:20px;padding:0 20px;background:var(--yuzey);
  border-bottom:1px solid var(--cizgi);position:sticky;top:0;z-index:20;flex-wrap:wrap}
.ust__ad{font-weight:700;padding:14px 0;letter-spacing:-.02em}
.ust__sag{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:13px;color:var(--soluk)}
.sekmeler{display:flex;gap:2px;flex-wrap:wrap}
.sekmeler button{background:none;border:0;padding:16px 12px;cursor:pointer;color:var(--soluk);
  border-bottom:2px solid transparent;font-size:14px}
.sekmeler button:hover{color:var(--murekkep)}
.sekmeler button.aktif{color:var(--vurgu);border-bottom-color:var(--vurgu);font-weight:600}
.rozet{display:inline-block;min-width:18px;padding:1px 5px;border-radius:9px;background:var(--uyari);
  color:#fff;font-size:11px;font-weight:700;text-align:center;vertical-align:1px}

main{padding:22px 20px 60px;max-width:1180px;margin:0 auto}
section[data-icerik]{display:grid;gap:16px}

/* özet kutuları */
.kutular{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kutu{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r);padding:14px 16px}
.kutu b{display:block;font-size:26px;font-weight:700;line-height:1.2;letter-spacing:-.02em}
.kutu span{font-size:12.5px;color:var(--soluk)}
.kutu--uyari b{color:var(--uyari)}

/* satır / kontroller */
.satir{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ayrac{flex:1}
.satir input,.satir select,.form input,.form select{
  padding:8px 10px;border:1px solid var(--cizgi);border-radius:var(--r);background:#fff}
.satir input{min-width:200px}
button{padding:8px 14px;border:1px solid var(--cizgi);background:var(--yuzey);
  border-radius:var(--r);cursor:pointer}
button:hover{border-color:var(--soluk)}
button.birincil{background:var(--vurgu);border-color:var(--vurgu);color:#fff;font-weight:600}
button.birincil:hover{filter:brightness(1.08)}
button.baglanti{border:0;background:none;color:var(--vurgu);padding:8px 4px;text-decoration:underline}
button.tehlike{color:var(--kirmizi)}
button:disabled{opacity:.5;cursor:default}

.ipucu{margin:0;font-size:13px;color:var(--soluk)}
.hata{color:var(--kirmizi);font-size:13px;margin:0}
.cikti{background:#101a16;color:#dff0e7;padding:12px;border-radius:var(--r);font-size:12.5px;overflow:auto}

/* tablo */
.tablo{width:100%;border-collapse:collapse;background:var(--yuzey);
  border:1px solid var(--cizgi);border-radius:var(--r);overflow:hidden}
.tablo th,.tablo td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--cizgi);font-size:13.5px;vertical-align:top}
.tablo th{background:#eef2f0;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--soluk)}
.tablo tr:last-child td{border-bottom:0}
.tablo td.sayi{text-align:right;font-variant-numeric:tabular-nums}
.tablo a{color:var(--vurgu)}

/* yorum kartları */
.yorumListe{display:grid;gap:10px}
.yorumKart{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:12px 14px;display:grid;grid-template-columns:auto 1fr;gap:12px}
.yorumKart__govde{display:grid;gap:6px}
.yorumKart__ust{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:12.5px;color:var(--soluk)}
.yorumKart__isim{font-weight:600;color:var(--murekkep);font-size:13.5px}
.yorumKart__metin{margin:0;font-size:14px}
.yorumKart__urun{font-size:12px;color:var(--soluk)}
.yorumKart__not{font-size:12px;color:var(--uyari)}
.yorumKart__foto{display:flex;gap:6px;flex-wrap:wrap}
.yorumKart__foto img{width:56px;height:56px;object-fit:cover;border-radius:4px;border:1px solid var(--cizgi)}
.yildiz{color:#b8860b;letter-spacing:1px}

/* form */
.form{display:grid;gap:18px;background:var(--yuzey);border:1px solid var(--cizgi);
  border-radius:var(--r);padding:18px}
fieldset{border:0;border-top:1px solid var(--cizgi);padding:14px 0 0;margin:0;display:grid;gap:10px}
legend{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--soluk);padding:0 6px 0 0}
.form label{display:grid;gap:4px;font-size:13px;color:var(--soluk)}
.form label.onay{display:flex;align-items:center;gap:8px;color:var(--murekkep);font-size:14px}
.dortlu{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.kod{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r);padding:18px}
.kod pre{background:#101a16;color:#dff0e7;padding:12px;border-radius:var(--r);overflow:auto;font-size:12.5px;margin:0}

/* bildirim */
.bildirim{position:fixed;right:18px;bottom:18px;background:var(--murekkep);color:#fff;
  padding:11px 16px;border-radius:var(--r);font-size:13.5px;z-index:60;max-width:360px}
.bildirim.kotu{background:var(--kirmizi)}

:focus-visible{outline:2px solid var(--vurgu);outline-offset:2px}
@media (max-width:720px){
  .ust{gap:8px}
  .sekmeler button{padding:12px 8px;font-size:13px}
  .tablo th:nth-child(2),.tablo td:nth-child(2){display:none}
}

/* sıralanabilir tablo başlıkları */
.tablo.sirali th[data-sirala]{cursor:pointer;user-select:none;position:relative;padding-right:22px}
.tablo.sirali th[data-sirala]:hover{color:var(--murekkep)}
.tablo.sirali th[data-sirala]::after{
  content:'⇅';position:absolute;right:8px;opacity:.28;font-size:11px}
.tablo.sirali th.aktifSira{color:var(--vurgu)}
.tablo.sirali th.aktifSira[data-yon="asc"]::after{content:'▲';opacity:1;font-size:9px}
.tablo.sirali th.aktifSira[data-yon="desc"]::after{content:'▼';opacity:1;font-size:9px}

/* filtre satırı sayaçları */
.sayac{font-size:12.5px;color:var(--soluk);font-variant-numeric:tabular-nums}
.satir select{max-width:220px}

[hidden]{display:none !important}

[hidden]{display:none !important}