:root { --zemin:#f7f6f3; --kart:#fff; --yazi:#1d1d1b; --ikincil:#6b6a66; --cizgi:#e2e0da; --vurgu:#2f6db5; --iyi:#2e7d4f; --hata:#b5462f; }
@media (prefers-color-scheme: dark) { :root { --zemin:#191918; --kart:#232322; --yazi:#ecebe7; --ikincil:#a3a29d; --cizgi:#3a3936; --vurgu:#6aa0e0; } }
* { box-sizing:border-box; }
body { margin:0; font:15px/1.5 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; background:var(--zemin); color:var(--yazi); }
a { color:var(--vurgu); }
.ust { display:flex; align-items:center; justify-content:space-between; padding:12px 24px; border-bottom:1px solid var(--cizgi); background:var(--kart); }
.logo { font-weight:700; font-size:18px; text-decoration:none; color:var(--yazi); }
.ust nav { display:flex; gap:16px; align-items:center; } .ust nav form { margin:0; }
main { max-width:1180px; margin:0 auto; padding:24px 16px 64px; }
h1 { font-size:24px; margin:0; } h2 { font-size:17px; margin:0 0 12px; }
.baslik-satir { display:flex; align-items:center; gap:16px; justify-content:space-between; margin-bottom:8px; }
.alt { color:var(--ikincil); margin:0 0 20px; }
button, .dugme { background:var(--vurgu); color:#fff; border:0; border-radius:8px; padding:9px 16px; font:inherit; cursor:pointer; text-decoration:none; display:inline-block; }
button.bag, a.bag { background:none; color:var(--vurgu); border:1px solid var(--cizgi); border-radius:8px; padding:8px 14px; text-decoration:none; }
input, select, textarea { font:inherit; padding:7px 9px; border:1px solid var(--cizgi); border-radius:6px; background:var(--kart); color:var(--yazi); width:100%; }
textarea { font-family:ui-monospace, Menlo, monospace; font-size:13px; }
label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--ikincil); }
label.sec { flex-direction:row; align-items:center; gap:6px; } label.sec input { width:auto; }
.form fieldset { border:1px solid var(--cizgi); border-radius:10px; padding:16px; margin:0 0 16px; background:var(--kart); }
.form legend { font-weight:600; padding:0 6px; }
.izgara { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px; margin-bottom:12px; }
.izgara .genis { grid-column:span 2; }
.yon { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:8px 0 12px; font-size:13px; color:var(--ikincil); }
.kart { background:var(--kart); border:1px solid var(--cizgi); border-radius:10px; padding:16px; margin:0 0 16px; }
.satir-form { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; } .satir-form label { width:auto; }
.dugmeler { display:flex; gap:8px; margin-top:12px; } .dugmeler form { margin:0; }
.sekmeler { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 16px; position:sticky; top:0; background:var(--zemin); padding:8px 0; z-index:2; }
.sekmeler a { font-size:13px; padding:4px 10px; border:1px solid var(--cizgi); border-radius:999px; text-decoration:none; background:var(--kart); }
.cikti { background:var(--kart); border:1px solid var(--cizgi); border-radius:10px; padding:16px; margin:0 0 16px; overflow-x:auto; }
.cikti img { max-width:100%; height:auto; background:#fff; border-radius:6px; }
.md table { border-collapse:collapse; margin:8px 0 16px; font-size:14px; }
.md th, .md td { border:1px solid var(--cizgi); padding:5px 9px; text-align:left; vertical-align:top; }
.liste { width:100%; border-collapse:collapse; background:var(--kart); border:1px solid var(--cizgi); border-radius:10px; }
.liste th, .liste td { padding:10px 12px; border-bottom:1px solid var(--cizgi); text-align:left; }
.rozet { font-size:12px; padding:3px 9px; border-radius:999px; background:var(--cizgi); color:var(--yazi); white-space:nowrap; }
.rozet.bitti { background:#dcefe3; color:var(--iyi); } .rozet.hata { background:#f6e0da; color:var(--hata); } .rozet.çalışıyor { background:#e2ecf8; color:var(--vurgu); }
.giris { max-width:340px; margin:80px auto; background:var(--kart); border:1px solid var(--cizgi); border-radius:12px; padding:24px; }
.giris form { display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.hata { color:var(--hata); } .hata-kart pre, pre { white-space:pre-wrap; font-size:12px; }
details summary { cursor:pointer; font-weight:600; }
@media (max-width:640px) { .izgara .genis { grid-column:auto; } main { padding:16px; } }