:root {
  --zemin: #f5f6f8; --kart: #fff; --yazi: #1b1f27; --soluk: #6b7280; --cizgi: #e3e6eb;
  --ana: #2563eb; --iyi: #15803d; --iyi-z: #dcfce7; --kotu: #b91c1c; --kotu-z: #fee2e2; --orta: #b45309; --orta-z: #fef3c7;
}
@media (prefers-color-scheme: dark) {
  :root {
    --zemin: #111418; --kart: #1a1e25; --yazi: #e7e9ee; --soluk: #9aa3b2; --cizgi: #2a303a;
    --ana: #5b8cff; --iyi: #4ade80; --iyi-z: #12331f; --kotu: #f87171; --kotu-z: #3b1717; --orta: #fbbf24; --orta-z: #3a2c0b;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--zemin); color: var(--yazi); font: 15px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--ana); text-decoration: none; }
a:hover { text-decoration: underline; }
header { display: flex; align-items: center; gap: 24px; padding: 10px 20px; background: var(--kart); border-bottom: 1px solid var(--cizgi); flex-wrap: wrap; }
.marka { font-weight: 700; color: var(--yazi); }
nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
nav a { padding: 6px 12px; border-radius: 8px; color: var(--soluk); }
nav a.secili { background: var(--zemin); color: var(--yazi); font-weight: 600; }
.sayac { background: var(--orta-z); color: var(--orta); border-radius: 10px; padding: 1px 7px; font-size: 12px; }
main { max-width: 1100px; margin: 0 auto; padding: 20px 16px 60px; }
h1 { font-size: 22px; margin: 0 0 4px; }
h1 small { color: var(--soluk); font-weight: 400; font-size: 15px; }
h2 { font-size: 16px; margin: 28px 0 10px; }
.kart h2 { margin-top: 0; }
.ust { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.soluk, small { color: var(--soluk); }
.soluk { margin: 2px 0 12px; }
.bos { color: var(--soluk); padding: 24px; text-align: center; background: var(--kart); border: 1px dashed var(--cizgi); border-radius: 12px; }
.bilgi { background: var(--iyi-z); color: var(--iyi); padding: 10px 14px; border-radius: 10px; }
.uyari { background: var(--kotu-z); color: var(--kotu); padding: 10px 14px; border-radius: 10px; }
.uyari-yazi { color: var(--kotu); }
.kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 12px; padding: 16px; margin-bottom: 14px; }
.iki-kart { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.form { display: flex; flex-direction: column; gap: 12px; }
.form > label, .yan label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--soluk); }
.yan { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
label.tek { display: flex; flex-direction: row; align-items: center; gap: 8px; color: var(--yazi); font-size: 15px; padding: 3px 0; }
input, select, textarea { font: inherit; color: var(--yazi); background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 8px; padding: 8px 10px; max-width: 100%; }
input[type=checkbox], input[type=radio] { width: auto; }
textarea { resize: vertical; }
fieldset { border: 1px solid var(--cizgi); border-radius: 10px; padding: 10px 14px; margin: 0; }
legend { color: var(--soluk); font-size: 13px; padding: 0 6px; }
.secim { margin-top: 8px; }
.secim .liste { max-height: 260px; overflow: auto; margin-top: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
button, .dugme { font: inherit; font-weight: 600; cursor: pointer; background: var(--ana); color: #fff; border: 1px solid var(--ana); border-radius: 8px; padding: 8px 14px; display: inline-block; white-space: nowrap; }
.dugme:hover { text-decoration: none; }
button.ikincil, .dugme.ikincil { background: transparent; color: var(--yazi); border-color: var(--cizgi); }
button.duz { background: none; border: none; color: var(--soluk); padding: 6px 8px; font-weight: 400; }
.form > button { align-self: flex-start; }
.satir, .ara { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
table { width: 100%; border-collapse: collapse; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 12px; overflow: hidden; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--soluk); font-weight: 600; }
tr:last-child td { border-bottom: none; }
.sag { text-align: right; font-variant-numeric: tabular-nums; }
.duz-tablo { border: none; }
.duz-tablo th { text-transform: none; letter-spacing: 0; font-size: 14px; width: 260px; }
.rozet { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 10px; background: var(--zemin); color: var(--soluk); white-space: nowrap; }
.rozet.iyi { background: var(--iyi-z); color: var(--iyi); }
.rozet.kotu { background: var(--kotu-z); color: var(--kotu); }
.rozet.orta, .rozet.takip { background: var(--orta-z); color: var(--orta); }
.cubuk { display: inline-block; width: 80px; height: 6px; background: var(--zemin); border-radius: 3px; overflow: hidden; vertical-align: middle; margin-right: 6px; }
.cubuk i { display: block; height: 100%; background: var(--iyi); }
.ozet { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ozet div { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 12px; padding: 12px 14px; }
.ozet b { display: block; font-size: 24px; }
.ozet span { color: var(--soluk); font-size: 13px; }
.ozet .iyi b { color: var(--iyi); } .ozet .kotu b { color: var(--kotu); } .ozet .orta b { color: var(--orta); }
.suzgec { display: flex; gap: 6px; margin: 14px 0; flex-wrap: wrap; }
.suzgec button { background: var(--kart); color: var(--soluk); border-color: var(--cizgi); font-weight: 400; padding: 5px 12px; }
.suzgec button.secili { color: var(--yazi); border-color: var(--ana); font-weight: 600; }
.gonderi { font-size: 14px; }
.iki, .karsi { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
.iki img, .karsi img { max-width: 100%; max-height: 360px; border-radius: 8px; display: block; }
pre { white-space: pre-wrap; word-break: break-word; font: inherit; margin: 8px 0 0; color: var(--soluk); }
summary { cursor: pointer; font-weight: 600; }
.alan { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.alan small { display: block; }
.kart.form .alan { border-bottom: 1px solid var(--cizgi); padding-bottom: 8px; }
body.giris { display: grid; place-items: center; min-height: 100vh; }
body.giris .kart { width: min(340px, 92vw); display: flex; flex-direction: column; gap: 14px; }
body.giris label { display: flex; flex-direction: column; gap: 4px; color: var(--soluk); font-size: 13px; }
@media (max-width: 640px) { .iki, .karsi, .yan { grid-template-columns: 1fr; } th, td { padding: 8px; } }

.kucuk-gorsel { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; display: block; }
.mini-gorsel { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; }
.ilerleme { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cubuk.buyuk { flex: 1; height: 10px; border-radius: 5px; margin: 0; }
.iyi-yazi { color: var(--iyi); font-weight: 600; }
.govde { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.govde aside { position: sticky; top: 12px; max-height: 80vh; overflow: auto; }
.govde aside h2 { margin-top: 0; }
.suzgec input { margin-left: auto; padding: 5px 10px; }
.okart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.okart[data-d=paylasti] { border-left: 4px solid var(--iyi); }
.okart[data-d=sildi] { border-left: 4px solid var(--kotu); }
.okart[data-d=onay] { border-left: 4px solid var(--orta); }
.okart-ust { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.kanit { display: flex; gap: 12px; align-items: flex-start; margin-top: 10px; padding: 10px; background: var(--zemin); border-radius: 10px; }
.kanit img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; display: block; }
.kanit-govde { flex: 1; min-width: 0; font-size: 14px; }
.kanit-govde .soluk { margin: 0; }
.kanit details { margin-top: 4px; }
.kanit summary { font-weight: 400; color: var(--soluk); font-size: 13px; }
.izlenen { margin-top: 8px; font-size: 13px; color: var(--soluk); }
.hareket { display: flex; gap: 10px; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--cizgi); }
.hareket:last-child { border-bottom: none; }
.hareket time { color: var(--soluk); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hareket.iyi span { color: var(--iyi); } .hareket.kotu span { color: var(--kotu); }
@media (max-width: 900px) { .govde { grid-template-columns: 1fr; } .govde aside { position: static; max-height: none; } .kanit { flex-wrap: wrap; } }

.dkart { display: flex; gap: 14px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 12px; padding: 12px; margin-bottom: 10px; color: var(--yazi); }
.dkart:hover { text-decoration: none; border-color: var(--ana); }
.dkart img, .dkart .gorselsiz { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; background: var(--zemin); flex-shrink: 0; }
.dkart-govde { flex: 1; min-width: 0; }
.dkart .ilerleme { margin: 6px 0; }
.dkart .soluk { margin: 0; font-size: 13px; }
.sayilar { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; }
.sayilar .ayrinti { margin-left: auto; color: var(--ana); font-weight: 600; }
.orta-yazi { color: var(--orta); font-weight: 600; }

header { position: sticky; top: 0; z-index: 5; }
.marka { font-size: 16px; letter-spacing: -.01em; }
.marka::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--ana); margin-right: 8px; }
.ozet b.kucuk { font-size: 17px; line-height: 36px; }
.dugme.secili { border-color: var(--ana); color: var(--ana); }
.cubuk.dusuk i { background: var(--kotu); }
.baglanti { display: flex; gap: 14px; align-items: center; }
.baglanti div { display: flex; flex-direction: column; }
.baglanti span { font-size: 14px; margin-top: 2px; }
.nokta { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.nokta.acik { background: var(--iyi); box-shadow: 0 0 0 4px var(--iyi-z); }
.nokta.kapali { background: var(--kotu); box-shadow: 0 0 0 4px var(--kotu-z); }
.alan .rozet { margin-left: 6px; }
h2 .sayac { vertical-align: middle; }
tbody tr:hover { background: color-mix(in srgb, var(--ana) 5%, transparent); }

/* Sol menü */
body.panel { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.yan { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 14px; padding: 18px 14px; background: var(--kart); border-right: 1px solid var(--cizgi); }
.yan .marka { font-size: 17px; padding: 4px 8px 6px; }
.yan svg { width: 18px; height: 18px; flex-shrink: 0; }
.yan .yeni { display: flex; align-items: center; justify-content: center; gap: 8px; }
.yan nav { flex-direction: column; flex: 1; gap: 2px; flex-wrap: nowrap; }
.yan nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; }
.yan nav a:hover { background: var(--zemin); text-decoration: none; color: var(--yazi); }
.yan nav a.secili { background: color-mix(in srgb, var(--ana) 12%, transparent); color: var(--ana); }
.yan nav .sayac { margin-left: auto; }
.yan-alt { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--cizgi); padding-top: 12px; }
.yan-durum { display: flex; flex-direction: column; gap: 6px; padding: 6px 10px; color: var(--yazi); font-size: 13px; border-radius: 9px; }
.yan-durum:hover { background: var(--zemin); text-decoration: none; }
.yan-durum span { display: flex; align-items: center; gap: 10px; }
.yan-durum .nokta { width: 8px; height: 8px; box-shadow: none; }
.cikis { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 9px; }
.cikis:hover { background: var(--zemin); color: var(--yazi); }
body.panel main { max-width: 1240px; width: 100%; margin: 0; padding: 26px 32px 60px; }
@media (max-width: 860px) {
  body.panel { display: block; }
  .yan { position: sticky; height: auto; flex-direction: row; align-items: center; gap: 8px; padding: 8px 10px; border-right: none; border-bottom: 1px solid var(--cizgi); overflow-x: auto; z-index: 5; }
  .yan .marka, .yan-durum, .yan .yeni span, .cikis span { display: none; }
  .yan .yeni { padding: 8px; }
  .yan nav { flex-direction: row; }
  .yan nav a { white-space: nowrap; padding: 8px 10px; }
  .yan-alt { border-top: none; padding-top: 0; }
  body.panel main { padding: 16px 14px 50px; }
}