:root{
  --kagit:#f0f2ee; --yuzey:#fafbf9; --cizgi:#d4dad3;
  --murekkep:#16211f; --soluk:#5c6a66; --cok-soluk:#8b9793;
  --vurgu:#0b5f56; --vurgu-zemin:#e0eae7;
  --okra:#8a6410; --okra-zemin:#f2ead6;
  --iyi:#2c6a45; --kotu:#8f3222;
}
@media (prefers-color-scheme:dark){
  :root{
    --kagit:#111816; --yuzey:#18211f; --cizgi:#2b3835;
    --murekkep:#dde5e1; --soluk:#93a29d; --cok-soluk:#6b7a76;
    --vurgu:#5bbfae; --vurgu-zemin:#16302c;
    --okra:#d6a94e; --okra-zemin:#2e2717;
    --iyi:#6bbd8b; --kotu:#e08163;
  }
}
*{box-sizing:border-box}
body{margin:0; background:var(--kagit); color:var(--murekkep);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:15px; line-height:1.55}
a{color:var(--vurgu)}
.rakam{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-variant-numeric:tabular-nums}

/* üst şerit */
.ust{border-bottom:2px solid var(--murekkep); background:var(--yuzey)}
.ust .ic{max-width:1180px; margin:0 auto; padding:14px 24px; display:flex; flex-wrap:wrap;
  align-items:baseline; gap:6px 26px}
.marka{font-family:Georgia,serif; font-size:20px; text-decoration:none; color:var(--murekkep)}
.marka span{color:var(--vurgu)}
nav{display:flex; gap:20px; margin-left:auto; flex-wrap:wrap}
nav a{text-decoration:none; color:var(--soluk); font-size:14px; padding:2px 0;
  border-bottom:2px solid transparent}
nav a:hover{color:var(--murekkep)}
nav a.aktif{color:var(--murekkep); border-bottom-color:var(--vurgu); font-weight:600}
.cip{background:var(--okra); color:var(--kagit); font-size:11px; font-weight:700;
  border-radius:9px; padding:1px 7px; margin-left:5px}
@media (prefers-color-scheme:dark){ .cip{color:#1a1408} }

main{max-width:1180px; margin:0 auto; padding:28px 24px 80px}
h1{font-family:Georgia,serif; font-weight:400; font-size:30px; margin:0 0 4px; letter-spacing:-.01em}
h2{font-family:Georgia,serif; font-weight:400; font-size:21px; margin:38px 0 12px}
.aciklama{color:var(--soluk); font-size:14px; margin:0 0 22px; max-width:70ch}

/* bildirim */
.bildirim{border:1px solid var(--vurgu); background:var(--vurgu-zemin); color:var(--murekkep);
  padding:11px 15px; margin:0 0 20px; font-size:14px; border-radius:2px}
.bildirim.hata{border-color:var(--kotu); background:transparent; color:var(--kotu)}

/* rakam bandı */
.band{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:1px;
  background:var(--cizgi); border:1px solid var(--cizgi); margin-bottom:22px}
.hucre{background:var(--yuzey); padding:15px 17px}
.hucre .k{font-size:11px; letter-spacing:.08em; color:var(--soluk)}
.hucre .v{font-family:ui-monospace,Consolas,monospace; font-variant-numeric:tabular-nums;
  font-size:25px; line-height:1.15; margin-top:5px; letter-spacing:-.02em}
.hucre .n{font-size:12px; color:var(--cok-soluk); margin-top:2px}

/* yükleme alanı */
.yukleme{border:2px dashed var(--cizgi); background:var(--yuzey); padding:26px; margin-bottom:26px}
.yukleme h2{margin:0 0 6px; font-size:20px}
.yukleme p{margin:0 0 16px; color:var(--soluk); font-size:13.5px; max-width:64ch}
.yukleme form{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
input[type=file]{font:inherit; font-size:13.5px; max-width:100%}
input[type=file]::file-selector-button{font:inherit; font-size:13px; padding:7px 13px; cursor:pointer;
  border:1px solid var(--cizgi); background:var(--kagit); color:var(--murekkep); border-radius:2px; margin-right:10px}
input[type=text],input[type=date],input[type=number],select{font:inherit; font-size:13.5px;
  padding:6px 9px; border:1px solid var(--cizgi); background:var(--yuzey);
  color:var(--murekkep); border-radius:2px; max-width:100%}
button{font:inherit; font-size:13.5px; font-weight:600; padding:8px 16px; cursor:pointer;
  border:1px solid var(--vurgu); background:var(--vurgu); color:var(--kagit); border-radius:2px}
button.sade{background:transparent; color:var(--soluk); border-color:var(--cizgi); font-weight:400}
@media (prefers-color-scheme:dark){ button{color:#0d1614} button.sade{color:var(--soluk)} }
:focus-visible{outline:2px solid var(--vurgu); outline-offset:2px}

/* tablo */
.kaydir{overflow-x:auto; border:1px solid var(--cizgi); background:var(--yuzey)}
table{border-collapse:collapse; width:100%; font-size:13.5px}
th{text-align:left; font-size:11px; letter-spacing:.07em; color:var(--soluk); font-weight:600;
  padding:10px 12px; border-bottom:1px solid var(--murekkep); white-space:nowrap}
td{padding:9px 12px; border-bottom:1px solid var(--cizgi); vertical-align:top}
tbody tr:last-child td{border-bottom:none}
.sag{text-align:right}
.ad{font-weight:500}
.kucuk{font-size:12px; color:var(--soluk)}
.bos{padding:30px; text-align:center; color:var(--cok-soluk); font-size:14px;
  border:1px solid var(--cizgi); background:var(--yuzey)}

.rozet{display:inline-block; font-size:11px; font-weight:600; letter-spacing:.03em;
  padding:2px 7px; border:1px solid; border-radius:2px; white-space:nowrap}
.r-iyi{color:var(--iyi); border-color:var(--iyi)}
.r-bekle{color:var(--okra); border-color:var(--okra); background:var(--okra-zemin)}
.r-notr{color:var(--soluk); border-color:var(--cizgi)}

/* eşleştirme kartı */
.soru{border:1px solid var(--okra); background:var(--okra-zemin); padding:16px 18px; margin-bottom:12px}
.soru .baslik{font-family:Georgia,serif; font-size:19px; margin-bottom:3px}
.soru .det{font-size:13px; color:var(--soluk); margin-bottom:13px}
.soru form{display:flex; flex-wrap:wrap; gap:9px; align-items:center}
.soru label{font-size:12.5px; color:var(--soluk); display:flex; align-items:center; gap:5px}
.ayrac{color:var(--cok-soluk); font-size:12px}
.cubuk{display:block; height:6px; background:var(--cizgi); position:relative; min-width:64px; overflow:hidden}
.cubuk i{position:absolute; inset:0 auto 0 0; background:var(--vurgu)}

/* kategori şeridi */
.kat-serit{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 18px}
.kat{font-size:12.5px; text-decoration:none; color:var(--soluk); padding:5px 11px;
  border:1px solid var(--cizgi); background:var(--yuzey); border-radius:2px; white-space:nowrap}
.kat:hover{color:var(--murekkep); border-color:var(--soluk)}
.kat.aktif{background:var(--vurgu); border-color:var(--vurgu); color:var(--kagit); font-weight:600}
@media (prefers-color-scheme:dark){ .kat.aktif{color:#0d1614} }
.kat .adet{font-size:11px; opacity:.7; margin-left:5px}

/* satır işlem butonları */
.islem{white-space:nowrap; display:flex; gap:5px; align-items:center; flex-wrap:wrap}
.islem form{display:inline}
.dgm{font:inherit; font-size:12px; font-weight:400; padding:3px 9px; cursor:pointer;
  border:1px solid var(--cizgi); background:var(--yuzey); color:var(--soluk);
  border-radius:2px; text-decoration:none; display:inline-block; list-style:none}
.dgm:hover{color:var(--murekkep); border-color:var(--soluk)}
.dgm.sil{color:var(--kotu); border-color:var(--cizgi)}
.dgm.sil:hover{border-color:var(--kotu)}
tr.tiklanir{cursor:pointer}
tr.tiklanir:hover{background:var(--vurgu-zemin)}

/* katlanır bölümler */
.katla{margin:0 0 20px; border:1px solid var(--cizgi); background:var(--yuzey); padding:0 15px}
.katla summary{cursor:pointer; padding:11px 0; font-size:13.5px; color:var(--soluk)}
.katla[open] summary{border-bottom:1px solid var(--cizgi); margin-bottom:13px}
.satir-form{display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin:0 0 13px}
.katla .satir-form{margin-bottom:15px}
details.mini{display:inline-block}
details.mini summary{list-style:none}
details.mini summary::-webkit-details-marker{display:none}
details.mini .satir-form{margin:7px 0 0; padding:9px; border:1px solid var(--cizgi);
  background:var(--kagit); position:relative; z-index:2}
td .satir-form{margin:0}

/* oturum bilgisi */
.oturum{display:flex; align-items:center; gap:10px; font-size:12.5px; width:100%;
  padding-top:8px; margin-top:2px; border-top:1px solid var(--cizgi)}
.oturum .kim{font-weight:600; color:var(--murekkep)}
.oturum .rol{color:var(--soluk); border:1px solid var(--cizgi); border-radius:2px;
  padding:1px 7px; font-size:11px; letter-spacing:.03em}
.oturum a{margin-left:auto; color:var(--soluk); text-decoration:none;
  border:1px solid var(--cizgi); border-radius:2px; padding:3px 10px}
.oturum a:hover{color:var(--murekkep); border-color:var(--soluk)}
@media (min-width:900px){
  .oturum{width:auto; border-top:none; padding-top:0; margin-left:20px}
  .oturum a{margin-left:6px}
}