:root{
  --ana:#1d4ed8; --koyu:#1e293b; --acik:#f1f5f9; --vurgu:#f59e0b;
  --yesil:#16a34a; --kirmizi:#dc2626; --cizgi:#e2e8f0;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--koyu);
  background:#fff;line-height:1.7;font-size:17px}
.kap{max-width:960px;margin:0 auto;padding:0 16px}
a{color:var(--ana)}
h1{font-size:1.9rem;margin:24px 0 12px;line-height:1.3}
h2{font-size:1.4rem;margin:28px 0 10px;color:var(--ana)}
h3{font-size:1.15rem;margin:20px 0 8px}
p{margin:10px 0}
ul,ol{margin:10px 0 10px 24px}
li{margin:5px 0}
main{min-height:60vh;padding-bottom:40px}

.ust{background:#fff;border-bottom:2px solid var(--cizgi);position:sticky;top:0;z-index:50}
.ust-ic{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px 16px}
.logo{font-size:1.5rem;font-weight:800;text-decoration:none;color:var(--koyu)}
.logo span{color:var(--ana)}
.ust nav{display:flex;gap:4px;flex-wrap:wrap}
.ust nav a{text-decoration:none;color:var(--koyu);padding:8px 12px;border-radius:8px;font-weight:600;font-size:.95rem}
.ust nav a:hover{background:var(--acik);color:var(--ana)}

.kahraman{background:linear-gradient(135deg,#1d4ed8,#3b82f6);color:#fff;border-radius:16px;
  padding:36px 24px;margin:24px 0;text-align:center}
.kahraman h1{color:#fff;margin-top:0}
.kahraman p{opacity:.95;max-width:640px;margin:10px auto}

.kartlar{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:20px 0}
.kart{border:1px solid var(--cizgi);border-radius:14px;padding:20px;background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.05);text-decoration:none;color:var(--koyu);display:block}
.kart:hover{border-color:var(--ana);box-shadow:0 4px 14px rgba(29,78,216,.12)}
.kart h3{margin-top:0;color:var(--ana)}
.kart p{font-size:.95rem;color:#475569}

.kutu{background:var(--acik);border:1px solid var(--cizgi);border-radius:14px;padding:20px;margin:20px 0}
.uyari{background:#fffbeb;border:1px solid #fde68a;border-radius:12px;padding:14px 16px;margin:16px 0;font-size:.95rem}

table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.95rem}
th,td{border:1px solid var(--cizgi);padding:9px 12px;text-align:left}
th{background:var(--acik)}
.tablo-kaydir{overflow-x:auto}

label{font-weight:600;display:block;margin:10px 0 4px}
input[type=number]{width:100%;max-width:160px;padding:10px;border:1px solid #cbd5e1;
  border-radius:8px;font-size:1rem}
.form-satir{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
button,.dugme{background:var(--ana);color:#fff;border:none;border-radius:10px;padding:12px 24px;
  font-size:1rem;font-weight:700;cursor:pointer;margin-top:14px;display:inline-block;text-decoration:none}
button:hover,.dugme:hover{background:#1e40af}
.sonuc{background:#eff6ff;border:2px solid var(--ana);border-radius:12px;padding:16px;
  margin-top:16px;font-size:1.05rem;display:none}
.sonuc strong{color:var(--ana)}

.soru{border:1px solid var(--cizgi);border-radius:12px;padding:16px;margin:14px 0}
.soru-metin{font-weight:600;margin-bottom:10px}
.secenek{display:block;padding:9px 12px;margin:6px 0;border:1px solid var(--cizgi);
  border-radius:8px;cursor:pointer;font-size:.97rem}
.secenek:hover{background:var(--acik)}
.secenek input{margin-right:8px}
.dogru-sec{background:#f0fdf4;border-color:var(--yesil)}
.yanlis-sec{background:#fef2f2;border-color:var(--kirmizi)}
.aciklama{display:none;background:var(--acik);border-radius:8px;padding:10px;margin-top:8px;font-size:.92rem}

.alt{background:var(--koyu);color:#cbd5e1;margin-top:40px;padding:28px 0;font-size:.9rem}
.alt a{color:#93c5fd;text-decoration:none;margin-right:14px}
.alt-baglanti{margin-bottom:12px}
.alt-not{margin:6px 0;opacity:.85}

@media(max-width:600px){
  body{font-size:16px}
  h1{font-size:1.5rem}
  .kahraman{padding:26px 16px}
}