:root {
    --ana: #1e3a8a;
    --ana-acik: #dbeafe;
    --metin: #111827;
    --soluk: #6b7280;
    --cizgi: #e5e7eb;
    --zemin: #f3f4f6;
    --kirmizi: #b91c1c;
    --yesil: #15803d;
    --radius: 10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--metin);
    background: var(--zemin);
}

a { color: var(--ana); }
h1 { font-size: 1.5rem; margin: .4em 0 .6em; }
h2 { font-size: 1.2rem; margin: 0 0 .6em; }
h3 { font-size: 1.05rem; margin: 1em 0 .5em; }
code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; }

.kap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* Üst bar */
.ust { background: var(--ana); color: #fff; }
.ust-ic { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
.marka { color: #fff; text-decoration: none; display: flex; flex-direction: column; line-height: 1.2; }
.marka .okul { font-size: .8rem; opacity: .85; }
.marka .uyg { font-size: 1.1rem; font-weight: 600; }
.ana-menu { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ana-menu a { color: #fff; text-decoration: none; padding: 6px 10px; border-radius: 6px; }
.ana-menu a:hover, .ana-menu a.aktif { background: rgba(255, 255, 255, .15); }
.ana-menu .kim { padding: 0 8px; opacity: .9; font-size: .9rem; }
.alt-menu { background: #fff; border-bottom: 1px solid var(--cizgi); }
.alt-menu .kap { display: flex; gap: 2px; overflow-x: auto; }
.alt-menu a { padding: 10px 12px; text-decoration: none; color: var(--metin); white-space: nowrap; border-bottom: 2px solid transparent; }
.alt-menu a.aktif, .alt-menu a:hover { border-bottom-color: var(--ana); color: var(--ana); }

main { padding-top: 16px; padding-bottom: 40px; }
.alt { color: var(--soluk); font-size: .85rem; padding-bottom: 24px; text-align: center; }
.alt .surum { display: block; font-size: .75rem; opacity: .8; margin-top: 2px; }

/* Kartlar */
.kart { background: #fff; border-radius: var(--radius); padding: 18px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.kart.dar { max-width: 420px; margin: 40px auto; }
.dar-orta { max-width: 640px; }
.kart-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.kart-izgara > .kart { margin-bottom: 0; }
.kart-izgara + * { margin-top: 16px; }

/* Bildirimler */
.bildirim { padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; border: 1px solid; }
.bildirim.basari { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.bildirim.hata { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.bildirim.bilgi { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.bildirim.uyari { background: #fffbeb; border-color: #fde68a; color: #92400e; }

/* Form */
label { display: block; margin-bottom: 12px; font-weight: 500; }
label.onay { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
label.onay input { margin-top: 4px; }
input[type=text], input:not([type]), input[type=email], input[type=password], input[type=datetime-local], input[type=file], select, textarea {
    display: block; width: 100%; margin-top: 4px; padding: 8px 10px; font: inherit;
    border: 1px solid #d1d5db; border-radius: 6px; background: #fff;
}
textarea { resize: vertical; min-width: 180px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ana-acik); border-color: var(--ana); }
fieldset { border: 1px solid var(--cizgi); border-radius: 8px; padding: 10px 14px; margin: 0 0 12px; }

button, .dugme {
    display: inline-block; padding: 8px 14px; font: inherit; font-weight: 500; cursor: pointer;
    border: 1px solid #d1d5db; border-radius: 6px; background: #fff; color: var(--metin); text-decoration: none;
}
button:hover, .dugme:hover { background: #f9fafb; }
button.birincil, .dugme.birincil { background: var(--ana); border-color: var(--ana); color: #fff; }
button.birincil:hover, .dugme.birincil:hover { background: #1e40af; }
button.tehlike { color: var(--kirmizi); border-color: #fecaca; }
button.tehlike:hover { background: #fef2f2; }
button.genis { width: 100%; padding: 11px; }
button.kucuk, .dugme.kucuk { padding: 4px 9px; font-size: .85rem; }
button:disabled { opacity: .6; cursor: default; }

.satir { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.satir > input, .satir > select, .satir label select { width: auto; margin-top: 0; }
.satir label { margin: 0; display: flex; gap: 6px; align-items: center; }
.satir-ici { display: inline; margin: 0; }
.izgara-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.izgara-form .tam { grid-column: 1 / -1; }

.ortala { text-align: center; }
.sag { text-align: right; white-space: nowrap; }
.soluk { color: var(--soluk); }

/* Tablolar */
.tablo-kap { overflow-x: auto; }
.tablo { width: 100%; border-collapse: collapse; }
.tablo th, .tablo td { padding: 8px 10px; border-bottom: 1px solid var(--cizgi); text-align: left; vertical-align: middle; }
.tablo th { font-size: .85rem; color: #374151; background: #f9fafb; white-space: nowrap; }
.tablo tr.pasif td { opacity: .5; }
.tablo td input, .tablo td select { margin-top: 0; }

/* Rozetler */
.rozet { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .78rem; font-weight: 600; vertical-align: middle; }
.rozet.yesil { background: #dcfce7; color: #166534; }
.rozet.mavi { background: #dbeafe; color: #1e40af; }
.rozet.mor { background: #ede9fe; color: #5b21b6; }
.rozet.gri { background: #f3f4f6; color: #4b5563; }
.rozet.kirmizi { background: #fee2e2; color: #991b1b; }

.sayac-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.sayac { background: #fff; border-radius: var(--radius); padding: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.sayac b { display: block; font-size: 1.5rem; color: var(--ana); }
.sayac span { color: var(--soluk); font-size: .85rem; }

.ilerleme { display: inline-block; width: 80px; height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; vertical-align: middle; }
.ilerleme span { display: block; height: 100%; background: var(--yesil); }

.liste { padding-left: 20px; }
.liste li { margin-bottom: 6px; }
.liste-kucuk { font-size: .9rem; max-height: 300px; overflow: auto; }
.adimlar li { margin-bottom: 6px; }
.etiket-listesi { display: flex; flex-wrap: wrap; gap: 6px; }
.etiket-listesi a { padding: 4px 10px; border: 1px solid var(--cizgi); border-radius: 999px; text-decoration: none; font-size: .9rem; }

/* Öğrenci ders listesi */
.ders-listesi { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ders-kutu { display: flex; flex-direction: column; padding: 12px 14px; border: 1px solid var(--cizgi); border-radius: 8px; text-decoration: none; color: var(--metin); }
.ders-kutu span { font-weight: 600; }
.ders-kutu small { color: var(--ana); }
a.ders-kutu:hover { border-color: var(--ana); background: #f8fafc; }
.ders-kutu.tamam { background: #f0fdf4; border-color: #bbf7d0; }
.ders-kutu.tamam small { color: var(--yesil); }

/* Öğrenci formu */
.soru { margin-bottom: 18px; }
.soru legend { font-weight: 600; padding: 0 4px; }
.soru .no { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; background: var(--ana); color: #fff; align-items: center; justify-content: center; font-size: .85rem; }
.secenekler { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 6px; }
.secenek { margin: 0; position: relative; }
.secenek input { position: absolute; opacity: 0; }
.secenek span { display: block; padding: 10px; border: 2px solid var(--cizgi); border-radius: 8px; text-align: center; cursor: pointer; font-weight: 400; }
.secenek input:focus-visible + span { outline: 2px solid var(--ana); }
.secenek.sA input:checked + span { border-color: #16a34a; background: #dcfce7; }
.secenek.sB input:checked + span { border-color: #0284c7; background: #e0f2fe; }
.secenek.sC input:checked + span { border-color: #d97706; background: #fef3c7; }
.secenek.sD input:checked + span { border-color: #dc2626; background: #fee2e2; }

/* Google ile giriş */
.dugme.google { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; margin-bottom: 4px; }
.ya-da { display: flex; align-items: center; gap: 10px; color: var(--soluk); font-size: .85rem; margin: 14px 0; }
.ya-da::before, .ya-da::after { content: ""; flex: 1; border-top: 1px solid var(--cizgi); }

/* Doğrulama kodu */
.captcha { margin-bottom: 12px; }
.captcha-resim { display: block; border: 1px solid var(--cizgi); border-radius: 6px; margin-bottom: 4px; }
.captcha > a { font-size: .85rem; }
.captcha label { margin-top: 8px; }
label small { display: block; font-weight: 400; margin-top: 2px; }

/* Düzeltme isteği */
details.duzeltme { margin-top: 18px; border-top: 1px solid var(--cizgi); padding-top: 12px; }
details.duzeltme summary { cursor: pointer; color: var(--ana); font-size: .92rem; }
details.duzeltme[open] summary { margin-bottom: 8px; }

/* Öğretmen değerlendirme tablosu */
.degerlendirme td { vertical-align: top; }
.degerlendirme td.ad { min-width: 160px; }
.degerlendirme .hucre { min-width: 120px; }
.degerlendirme .oz { font-size: .8rem; color: var(--soluk); margin-bottom: 4px; }
.degerlendirme select.harf-sec[data-v=A] { background: #dcfce7; }
.degerlendirme select.harf-sec[data-v=B] { background: #e0f2fe; }
.degerlendirme select.harf-sec[data-v=C] { background: #fef3c7; }
.degerlendirme select.harf-sec[data-v=D] { background: #fee2e2; }
.degerlendirme tr.kilitli { background: #f9fafb; }

/* Soru başlıkları sabit, öğrenci listesi kendi içinde kayar */
.tablo-kap.kaydir { max-height: calc(100vh - 110px); overflow: auto; border: 1px solid var(--cizgi); border-radius: 8px; margin-bottom: 12px; }
.degerlendirme thead th {
    position: sticky; top: 0; z-index: 2; background: #eef2f7; vertical-align: bottom;
    white-space: normal; line-height: 1.3; box-shadow: inset 0 -2px 0 #cbd5e1;
}
.degerlendirme th.kriter { min-width: 130px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.degerlendirme th .kno {
    display: inline-flex; width: 18px; height: 18px; border-radius: 50%; background: var(--ana); color: #fff;
    font-size: .7rem; align-items: center; justify-content: center; margin-right: 5px; vertical-align: 1px;
}

.arac-cubugu { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }

@media print {
    body { background: #fff; font-size: 12px; }
    .ust, .alt-menu, .alt, .yazdirma-gizle, form.satir-ici { display: none !important; }
    .kart { box-shadow: none; padding: 0; }
    main { padding: 0; }
    .kap { max-width: none; }
    .tablo-kap.kaydir { max-height: none; overflow: visible; border: 0; }
    .degerlendirme thead th { position: static; }
    table { page-break-inside: auto; }
    tr { page-break-inside: avoid; }
}