/* ============================================================
   OKUL SÜPER-APP — ANA STİL DOSYASI
   ============================================================ */

/* ── TEMA DEĞİŞKENLERİ ── */
:root {
    --birincil: #1F4E5F;
    --birincil-acik: rgba(31, 78, 95, 0.09);
    --birincil-koyu: #163A47;
    --basari: #4A7C3F;
    --basari-acik: rgba(74, 124, 63, 0.10);
    --uyari: #A8601C;
    --uyari-acik: rgba(168, 96, 28, 0.10);
    --hata: #B3382C;
    --hata-acik: rgba(179, 56, 44, 0.09);
    --mor: #7A4A86;
    --mor-acik: rgba(122, 74, 134, 0.10);

    --bg-ana: #F6F2EA;
    --bg-kart: rgba(255, 253, 249, 0.88);
    --bg-sidebar: rgba(255, 253, 249, 0.94);
    --sidebar-kenar: rgba(60, 48, 32, 0.09);
    --kenar: rgba(60, 48, 32, 0.11);
    --kenar-hover: rgba(60, 48, 32, 0.20);

    --metin-ana: #24201B;
    --metin-ikincil: #554E45;
    --metin-ucuncul: #8A8177;

    --sidebar-genislik: 240px;
    --topbar-yukseklik: 60px;
    --border-radius: 14px;
    --border-radius-lg: 20px;
    --gecis: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);

    --golge-soft: 0 8px 24px -6px rgba(82, 62, 34, 0.06),
                  0 2px 6px -2px rgba(16, 24, 40, 0.05);
    --golge-hover: 0 16px 32px -8px rgba(82, 62, 34, 0.10),
                   0 4px 10px -3px rgba(82, 62, 34, 0.06);
    --blur: 24px;
    /* ⚠️ EMOJİ YEDEĞİ ŞART (20 Tem 2026). Bu yığında emoji fontu yoktu ve
       Windows'ta 'Segoe UI Variable Display' ⏳ (U+23F3) gibi simgeleri
       KAPSAMADIĞI için tarayıcı KUTU basıyordu — Ömer Öğrenci 360'ın sekme
       çubuğunda gördü. Projede 85 yerde emoji kullanılıyor; yığının sonuna
       emoji fontu eklemek hepsini birden düzeltiyor. */
    --font-baslik: -apple-system, BlinkMacSystemFont,
                   'Segoe UI Variable Display', 'Segoe UI', sans-serif,
                   'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji';
}

[data-theme="dark"] {
    --birincil: #2997FF;
    --birincil-acik: rgba(41, 151, 255, 0.12);
    --birincil-koyu: #63B2FF;
    --basari: #30D158;
    --basari-acik: rgba(48, 209, 88, 0.12);
    --uyari: #FFB340;
    --uyari-acik: rgba(255, 179, 64, 0.10);
    --hata: #FF6961;
    --hata-acik: rgba(255, 105, 97, 0.10);
    --mor: #BF5AF2;
    --mor-acik: rgba(191, 90, 242, 0.12);

    --bg-ana: #0A0A0C;
    --bg-kart: rgba(28, 28, 30, 0.88);
    --bg-sidebar: rgba(20, 20, 22, 0.95);
    --sidebar-kenar: rgba(255, 255, 255, 0.07);
    --kenar: rgba(255, 255, 255, 0.08);
    --kenar-hover: rgba(255, 255, 255, 0.16);

    --metin-ana: #F5F5F7;
    --metin-ikincil: #B9B9BE;
    --metin-ucuncul: #7C7C82;

    --golge-soft: 0 12px 30px rgba(0, 0, 0, 0.45),
                  0 2px 8px rgba(0, 0, 0, 0.35);
    --golge-hover: 0 20px 40px rgba(0, 0, 0, 0.60),
                   0 4px 12px rgba(0, 0, 0, 0.40);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
html, body {
    height: 100%;
    height: -webkit-fill-available;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif,
                 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji';
    background: var(--bg-ana);
    color: var(--metin-ana);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ── LAYOUT ── */
.sidebar {
    position: fixed;
    top: 0; left: 0;
    width: var(--sidebar-genislik);
    height: 100vh;
    height: -webkit-fill-available;
    height: 100dvh;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--sidebar-kenar);
    display: flex;
    flex-direction: column;
    z-index: 100;
    overflow-y: auto;
}

.main-wrapper {
    margin-left: var(--sidebar-genislik);
    height: 100vh;
    height: -webkit-fill-available;
    height: 100dvh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── SIDEBAR ── */
.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 16px;
    border-bottom: 1px solid var(--sidebar-kenar);
}

.sidebar-logo-icon {
    width: 32px; height: 32px;
    background: var(--birincil);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: white;
    font-size: 18px;
    flex-shrink: 0;
}

.sidebar-logo-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--birincil);
}

.sidebar-nav {
    flex: 1;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--metin-ikincil);
    transition: var(--gecis);
}

.nav-item:hover {
    background: var(--birincil-acik);
    color: var(--birincil);
}

.nav-item.aktif {
    background: var(--birincil-acik);
    color: var(--birincil);
    font-weight: 500;
}

.nav-item i { font-size: 18px; flex-shrink: 0; }

/* ── SIDEBAR AÇILIR GRUP ("Öğretim") ── */
.nav-grup { display: flex; flex-direction: column; }
.nav-grup-baslik {
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 14px;
}
.nav-grup-ok {
    margin-left: auto;
    font-size: 16px !important;
    opacity: .6;
    transition: transform .2s ease;
}
.nav-grup.acik .nav-grup-ok { transform: rotate(180deg); }
.nav-grup-icerik {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    max-height: 0;
    opacity: .5;
    margin-left: 27px;
    border-left: 1.5px solid var(--sidebar-kenar);
    transition: max-height .25s ease, opacity .25s ease;
}
/* 10 Ağu: 340px sınırı 9. kalemi (Gelişim Değerlendirme) KIRPIYORDU —
   grup büyüdükçe son kalemler görünmez oluyordu. Cömert tavan; kayma
   sidebar'ın kendi overflow'unda. */
.nav-grup.acik .nav-grup-icerik { max-height: 900px; opacity: 1; }
.nav-grup-icerik .nav-item { font-size: 13px; }

.sidebar-alt {
    padding: 8px 8px 16px;
    border-top: 1px solid var(--sidebar-kenar);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-item-cikis:hover {
    background: var(--hata-acik);
    color: var(--hata);
}

/* ── TOPBAR ── */
.topbar {
    height: var(--topbar-yukseklik);
    background: var(--bg-kart);
    border-bottom: 1px solid var(--kenar);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 50;
}

.topbar-sol { display: flex; align-items: center; gap: 12px; }
.topbar-sag { display: flex; align-items: center; gap: 8px; }

.spotlight-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: var(--bg-ana);
    border: 1px solid var(--kenar);
    border-radius: 8px;
    font-size: 13px;
    color: var(--metin-ikincil);
    transition: var(--gecis);
    width: 280px;
}

.spotlight-btn:hover {
    border-color: var(--birincil);
    color: var(--metin-ana);
}

.spotlight-btn kbd {
    margin-left: auto;
    font-size: 11px;
    background: var(--kenar);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: inherit;
}

.tema-btn, .bildirim-btn {
    width: 36px; height: 36px;
    border-radius: 8px;
    border: 1px solid var(--kenar);
    background: transparent;
    color: var(--metin-ikincil);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    transition: var(--gecis);
}

.tema-btn:hover, .bildirim-btn:hover {
    background: var(--bg-ana);
    color: var(--metin-ana);
}

.kullanici-menu {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--kenar);
    cursor: pointer;
    transition: var(--gecis);
}

.kullanici-menu:hover { background: var(--bg-ana); }

.kullanici-avatar {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--birincil-acik);
    color: var(--birincil);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

.kullanici-bilgi { display: flex; flex-direction: column; }
.kullanici-ad { font-size: 13px; font-weight: 500; color: var(--metin-ana); }
.kullanici-rol { font-size: 11px; color: var(--metin-ikincil); }

/* ── SAYFA İÇERİK ── */
.sayfa-icerik {
    flex: 1;
    min-height: 0;
    padding: 28px 32px;
    overflow-y: auto;
}

.sayfa-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}
/* 🆕 13 Eki 2026 (Fable F2) — dar ekranda başlık ile düğmeleri sığmazsa düğmeler ALT SATIRA iner; eskiden küçülüp
   başlığın ve adres satırının üstüne biniyordu (390 px'te «Sil» başlığın üstündeydi). */
@media (max-width: 768px) {
    .sayfa-baslik { flex-wrap: wrap; gap: 12px; }
    .sayfa-baslik > * { min-width: 0; }
    /* 15 Eki (test F34): başlığın düğme grubu da kendi içinde alt satıra iner — Öğretmen İşleri'nde 6 düğme tek
       satırda yana taşıyordu (yatay kaydırma çubuğu). Satır içi `display:flex` yazan gruplara da işler. */
    .sayfa-baslik > div { flex-wrap: wrap; }
}
/* 15 Eki (test F27): bildirim paneli çanın SAĞ kenarına bağlıydı; telefonda çanın sağında profil düğmesi olduğundan
   panel sola taşıp yarısı ekran dışında kalıyordu («…ildirimler»). Dar ekranda ekrana sabit, iki yandan 8 px. */
@media (max-width: 600px) {
    #canPanel { position: fixed !important; left: 8px !important; right: 8px !important;
                top: calc(var(--topbar-yukseklik) + 4px) !important; width: auto !important; }
}
/* 15 Eki (test F33): profil harfleri (KX) tıklanır görünüp tepkisizdi → düğme: telefonda menünün altındaki «Profil»
   bölümünü açar, geniş ekranda şifre ekranına gider (base.html profilAc). Kutunun geri kalanı düğme değildir. */
.kullanici-menu { cursor: default; }
.kullanici-avatar.profil-dugme { border: none; padding: 0; font-family: inherit; cursor: pointer; }
/* 15 Eki (test F32): arama penceresindeki «Esc» dokununca da kapatır. */
.spotlight-input-wrap kbd.spotlight-kapat { cursor: pointer; }

.baslik {
    font-size: 22px;
    font-weight: 600;
    color: var(--metin-ana);
}

.alt-baslik {
    font-size: 14px;
    color: var(--metin-ikincil);
    margin-top: 2px;
}

/* ── METRİK KARTLAR ── */
.metrik-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.metrik-kart {
    background: var(--bg-kart);
    border: 1px solid var(--kenar);
    border-radius: var(--border-radius-lg);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: var(--gecis);
}

.metrik-kart:hover {
    border-color: var(--kenar-hover);
    transform: translateY(-1px);
}

.metrik-ikon {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.metrik-bilgi { display: flex; flex-direction: column; }
.metrik-sayi { font-size: 26px; font-weight: 600; color: var(--metin-ana); }
.metrik-etiket { font-size: 13px; color: var(--metin-ikincil); }

/* ── KARTLAR ── */
.kart {
    background: var(--bg-kart);
    border: 1px solid var(--kenar);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.kart-baslik {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--metin-ana);
    border-bottom: 1px solid var(--kenar);
}

.kart-icerik { padding: 20px; }

/* 🔴 20 Tem 2026 — DOLGULU KART.
   `.kart` BİLEREK dolgusuzdur: boşluk `.kart-baslik` (14/20) ve
   `.kart-icerik` (20) içinden gelir. Veli Portalı ve yardımcı
   ekranlar içeriği doğrudan `.kart` içine koyduğu için metin kartın
   YUVARLAK KÖŞESİNE YAPIŞIYORDU (Ömer ekranda gördü). Bu sınıf o
   ekranlar için dolguyu kartın kendisine verir; başlık kullanılırsa
   negatif kenar boşluğuyla kenara kadar uzanmayı sürdürür. */
.kart-dolgulu { padding: 20px; }
.kart-dolgulu > .kart-baslik { margin: -20px -20px 16px; }
.kart-dolgulu > .kart-baslik:only-child { margin-bottom: -20px; }

/* ── GRID ── */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* ── FLASH MESAJLAR ── */
.flash-container {
    padding: 12px 24px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.flash {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--border-radius);
    font-size: 14px;
    font-weight: 500;
}

.flash-basari {
    background: var(--basari-acik);
    color: var(--basari);
    border: 1px solid #A7F3D0;
}

.flash-hata {
    background: var(--hata-acik);
    color: var(--hata);
    border: 1px solid #FECDD3;
}

.flash-uyari {
    background: var(--uyari-acik);
    color: var(--uyari);
    border: 1px solid #FDE68A;
}

.flash-kapat {
    margin-left: auto;
    background: none;
    border: none;
    color: inherit;
    opacity: 0.6;
    padding: 2px;
    display: flex;
}

/* ── FORMLAR ── */
.form-grup { margin-bottom: 16px; }

.form-etiket {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--metin-ana);
    margin-bottom: 6px;
}

.form-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.form-input-wrap i {
    position: absolute;
    left: 12px;
    color: var(--metin-ucuncul);
    font-size: 18px;
    pointer-events: none;
}

.form-input {
    width: 100%;
    padding: 10px 12px 10px 38px;
    border: 1px solid var(--kenar);
    border-radius: var(--border-radius);
    background: var(--bg-kart);
    color: var(--metin-ana);
    font-size: 14px;
    transition: var(--gecis);
}

.form-input:focus {
    outline: none;
    border-color: var(--birincil);
    box-shadow: 0 0 0 3px rgba(91, 106, 240, 0.1);
}

.sifre-goster {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: var(--metin-ucuncul);
    font-size: 18px;
    display: flex;
    padding: 0;
    cursor: pointer;
}
/* 28 Eki (Test Koleji): yukarıdaki `.form-input-wrap i` kuralı göz simgesini de yakalıyordu → simge düğmenin
   DIŞINA (kutunun sağ kenarının ötesine) itiliyor, düğmenin kutusu 0×0 kalıyor, simgenin üstünü sağ sütun örtüyordu:
   «şifreyi göster» tıklanamıyordu. Düğmenin içindeki simge yerinde durur. */
.sifre-goster i {
    position: static;
}

/* ── BUTONLAR ── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: var(--border-radius);
    font-size: 14px;
    font-weight: 500;
    border: 1px solid transparent;
    transition: var(--gecis);
}

.btn-birincil {
    background: var(--birincil);
    color: white;
    border-color: var(--birincil);
}

.btn-birincil:hover { background: var(--birincil-koyu); }

.btn-ikincil {
    background: transparent;
    color: var(--metin-ana);
    border-color: var(--kenar);
}

.btn-ikincil:hover { background: var(--bg-ana); }

.btn-hata {
    background: var(--hata-acik);
    color: var(--hata);
    border-color: #FECDD3;
}

.btn-hata:hover { background: #FFE4E6; }

/* ── GİRİŞ SAYFASI ── */
.giris-sayfasi {
    background: var(--bg-ana);
    min-height: 100vh;
}

.giris-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}

.giris-sol {
    background: var(--birincil);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
}

.giris-sol-icerik { max-width: 420px; }

.giris-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 48px;
}

.giris-logo-icon {
    width: 40px; height: 40px;
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    color: white;
}

.giris-logo span {
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.giris-baslik {
    font-size: 32px;
    font-weight: 700;
    color: white;
    line-height: 1.3;
    margin-bottom: 16px;
}

.giris-alt {
    font-size: 15px;
    color: rgba(255,255,255,0.75);
    margin-bottom: 40px;
    line-height: 1.7;
}

.giris-ozellikler {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.giris-ozellik {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,0.9);
    font-size: 14px;
}

.giris-ozellik i {
    font-size: 20px;
    color: rgba(255,255,255,0.7);
}

.giris-sag {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
}

.giris-form-wrap { width: 100%; max-width: 380px; }

.giris-form-baslik {
    font-size: 26px;
    font-weight: 700;
    color: var(--metin-ana);
    margin-bottom: 6px;
}

.giris-form-alt {
    font-size: 14px;
    color: var(--metin-ikincil);
    margin-bottom: 28px;
}

.btn-giris {
    width: 100%;
    padding: 12px;
    background: var(--birincil);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--gecis);
    margin-top: 8px;
}

.btn-giris:hover { background: var(--birincil-koyu); }

.giris-alt-not {
    font-size: 12px;
    color: var(--metin-ucuncul);
    text-align: center;
    margin-top: 20px;
}

/* ── SPOTLIGHT ── */
.spotlight-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 200;
    backdrop-filter: blur(2px);
}

.spotlight-overlay.acik { display: block; }

.spotlight-modal {
    display: none;
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 560px;
    max-width: 90vw;
    background: var(--bg-kart);
    border: 1px solid var(--kenar);
    border-radius: var(--border-radius-lg);
    z-index: 201;
    overflow: hidden;
}

.spotlight-modal.acik { display: block; }

.spotlight-input-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--kenar);
}

.spotlight-input-wrap i {
    font-size: 20px;
    color: var(--metin-ikincil);
    flex-shrink: 0;
}

.spotlight-input-wrap input {
    flex: 1;
    border: none;
    background: none;
    font-size: 15px;
    color: var(--metin-ana);
    outline: none;
}

.spotlight-input-wrap kbd {
    font-size: 11px;
    background: var(--bg-ana);
    padding: 2px 8px;
    border-radius: 4px;
    color: var(--metin-ikincil);
    border: 1px solid var(--kenar);
    font-family: inherit;
}

.spotlight-sonuclar { max-height: 360px; overflow-y: auto; }

/* ── BADGE ── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.badge-mavi { background: var(--birincil-acik); color: var(--birincil); }
.badge-yesil { background: var(--basari-acik); color: var(--basari); }
.badge-turuncu { background: var(--uyari-acik); color: var(--uyari); }
.badge-kirmizi { background: var(--hata-acik); color: var(--hata); }
.badge-gri { background: var(--bg-ana); color: var(--metin-ikincil); border: 1px solid var(--kenar); }
/* 🔴 20 Tem 2026: `badge-hata` ve `badge-uyari` şablonlarda KULLANILIYOR
   ama CSS'te TANIMLI DEĞİLDİ — ödev durum rozetleri (gecikti/bekliyor)
   renksiz, düz gri çıkıyordu. Renk isimli kardeşlerinin (kirmizi/turuncu)
   anlam isimli karşılıkları: aynı değerler, ayrışmasın diye tek satırda. */
.badge-hata { background: var(--hata-acik); color: var(--hata); }
.badge-uyari { background: var(--uyari-acik); color: var(--uyari); }

/* Mobil menü düğmesi — masaüstünde gizli, dar ekranda görünür. */
.menu-dugmesi { display: none; align-items: center; justify-content: center;
    width: 38px; height: 38px; border: none; background: transparent;
    border-radius: 10px; cursor: pointer; color: var(--metin-ana);
    font-size: 20px; margin-right: 4px; }
.menu-dugmesi:hover { background: var(--bg-ana); }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    /* 🔴 20 Tem 2026: sidebar burada KOŞULSUZ gizleniyordu ve yerine
       hiçbir şey konmuyordu — telefonda kullanıcı menüsüz VE ÇIKIŞSIZ
       kalıyordu. Veli Portalı asıl telefonda kullanılacağı için bu
       tek başına portalı kullanılamaz kılıyordu.
       Çözüm: menü düğmesiyle AÇILIR panel (üst bara `menuAc()` kondu). */
    .sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 1200;
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: 0 0 40px rgba(0,0,0,.18);
    }
    .sidebar.acik { transform: translateX(0); }
    .sidebar-perde {
        position: fixed; inset: 0; background: rgba(0,0,0,.35);
        z-index: 1199; display: none;
    }
    .sidebar-perde.acik { display: block; }
    .menu-dugmesi { display: inline-flex !important; }
    .main-wrapper { margin-left: 0; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .giris-container { grid-template-columns: 1fr; }
    .giris-sol { display: none; }
    .spotlight-btn { width: auto; }
    .spotlight-btn span { display: none; }
    /* 🆕 12 Eki 2026 (Fable E3) — dar ekranda üst çubuk SIĞAR (390 px'te sağ kenar ~600 px'e taşıyordu):
       arama yalnız simge, ad/rol gizli (menünün altındaki «Profil»de), selam kısalır. */
    .topbar { padding: 0 10px; gap: 6px; }
    .topbar-sol { min-width: 0; flex: 1 1 auto; gap: 6px; }
    .topbar-selam span { overflow: hidden; text-overflow: ellipsis; }
    .topbar-sag { gap: 6px; flex-shrink: 0; }
    .spotlight-btn { min-width: 0 !important; padding: 7px 10px; }
    .spotlight-btn kbd { display: none; }
    .kullanici-bilgi { display: none; }
    .kullanici-menu { padding: 4px 6px; gap: 6px; }
    .kullanici-menu > a { margin-left: 2px !important; }
    .mobil-profil { display: block; border-top: 1px solid var(--kenar); margin: 8px 0 4px; padding-top: 8px; }
}
@media (max-width: 480px) {
    .topbar-selam { display: none !important; }
    .tema-btn { display: none; }          /* tema menüde: «Profil» bloğu */
}
@media (min-width: 769px) { .mobil-profil { display: none; } }   /* geniş ekranda profil üst çubukta */
.mobil-profil .mp-kisi { display: flex; align-items: center; gap: 10px; padding: 6px 22px 8px; }
.mobil-profil .mp-ad { display: flex; flex-direction: column; font-size: 13px; line-height: 1.25; min-width: 0; }
.mobil-profil .mp-ad small { font-size: 11px; color: var(--metin-ikincil); }
.mobil-profil .mp-tema { width: calc(100% - 20px); background: transparent; border: none; text-align: left; cursor: pointer; font: inherit; }
/* ── TABLO ── */
.tablo {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.tablo thead tr {
    border-bottom: 1px solid var(--kenar);
}

.tablo th {
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--metin-ikincil);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tablo td {
    padding: 14px 16px;
    color: var(--metin-ana);
    border-bottom: 1px solid var(--kenar);
}

.tablo tbody tr:last-child td { border-bottom: none; }

.tablo tbody tr:hover { background: var(--bg-ana); }

/* ── DRAWER ── */
.drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 150;
    backdrop-filter: blur(2px);
}

.drawer-overlay.acik { display: block; }

.drawer {
    position: fixed;
    top: 0;
    right: -560px;
    width: 520px;
    height: 100vh;
    background: var(--bg-kart);
    border-left: 1px solid var(--kenar);
    z-index: 151;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}

.drawer.acik { right: 0; }

.drawer-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--kenar);
    font-size: 16px;
    font-weight: 600;
    color: var(--metin-ana);
}

.drawer-kapat {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--kenar);
    background: transparent;
    color: var(--metin-ikincil);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: var(--gecis);
}

.drawer-kapat:hover {
    background: var(--bg-ana);
    color: var(--metin-ana);
}

.drawer-icerik {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
}

.drawer-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--kenar);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ── FORM INPUT SADE (drawer içi) ── */
.form-input-sade {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--kenar);
    border-radius: var(--border-radius);
    background: var(--bg-kart);
    color: var(--metin-ana);
    font-size: 14px;
    transition: var(--gecis);
}

.form-input-sade:focus {
    outline: none;
    border-color: var(--birincil);
    box-shadow: 0 0 0 3px rgba(91, 106, 240, 0.1);
}

.form-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--kenar);
    border-radius: var(--border-radius);
    background: var(--bg-kart);
    color: var(--metin-ana);
    font-size: 14px;
    resize: vertical;
    transition: var(--gecis);
}

.form-textarea:focus {
    outline: none;
    border-color: var(--birincil);
    box-shadow: 0 0 0 3px rgba(91, 106, 240, 0.1);
}

/* ── BOŞ DURUM ── */
.bos-durum {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 32px;
    gap: 16px;
    color: var(--metin-ikincil);
    text-align: center;
}

.bos-durum i {
    font-size: 48px;
    opacity: 0.3;
}

.bos-durum p {
    font-size: 15px;
}

/* ── BUTON SM ── */
.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}
/* ── KAMPÜS KARTLARI ── */
.kampus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.kampus-kart {
    background: var(--bg-kart);
    border: 1px solid var(--kenar);
    border-radius: var(--border-radius-lg);
    padding: 20px;
    cursor: pointer;
    transition: var(--gecis);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.kampus-kart:hover {
    border-color: var(--birincil);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(91,106,240,0.1);
}

.kampus-kart-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kampus-ikon {
    width: 40px;
    height: 40px;
    background: var(--birincil-acik);
    color: var(--birincil);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.kampus-kart-bilgi { flex: 1; }

.kampus-ad {
    font-size: 16px;
    font-weight: 600;
    color: var(--metin-ana);
    margin-bottom: 4px;
}

.kampus-sehir {
    font-size: 13px;
    color: var(--metin-ikincil);
    display: flex;
    align-items: center;
    gap: 4px;
}

.kampus-kart-alt {
    display: flex;
    gap: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--kenar);
}

.kampus-stat {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--metin-ikincil);
}

/* ── BİLGİ SATIRI (drawer içi) ── */
.bilgi-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--kenar);
}

.bilgi-satir:last-child { border-bottom: none; }

.bilgi-etiket {
    font-size: 13px;
    color: var(--metin-ikincil);
    display: flex;
    align-items: center;
    gap: 6px;
}

.bilgi-deger {
    font-size: 13px;
    font-weight: 500;
    color: var(--metin-ana);
}
/* ── ÖĞRETMEN KARTI ── */
.ogretmen-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--birincil-acik);
    color: var(--birincil);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
}

.ogretmen-avatar-lg {
    width: 52px;
    height: 52px;
    font-size: 18px;
    border-radius: 14px;
}
/* ─── KAYIT & ADAY MODÜLÜ ─────────────────────────────────────────── */

.istat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.istat-kart {
    background: var(--kart-bg);
    border: 1px solid var(--kenar);
    border-radius: 12px;
    padding: 1.2rem;
    text-align: center;
}

.istat-sayi {
    font-size: 2rem;
    font-weight: 700;
    color: var(--metin);
    line-height: 1;
}

.istat-etiket {
    font-size: 0.78rem;
    color: var(--metin-ikincil);
    margin-top: 0.4rem;
}

.istat-mavi .istat-sayi { color: #3b82f6; }
.istat-turuncu .istat-sayi { color: var(--uyari); }
.istat-yesil .istat-sayi { color: var(--basari); }
.istat-mor .istat-sayi { color: var(--birincil); }
.istat-kirmizi .istat-sayi { color: var(--hata); }

.filtre-bar {
    margin-bottom: 1.5rem;
}

.filtre-form {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.uyari-kutu {
    padding: 1rem 1.2rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
}

.uyari-yesil {
    background: rgba(18, 183, 106, 0.1);
    border: 1px solid rgba(18, 183, 106, 0.3);
    color: var(--basari);
}

.btn-yesil {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    background: var(--basari);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}

.btn-yesil:hover {
    opacity: 0.9;
}

.btn-kirmizi {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    background: var(--hata);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}

.btn-kirmizi:hover {
    opacity: 0.9;
}

.badge-mor {
    background: rgba(91, 106, 240, 0.15);
    color: var(--birincil);
}

/* ============================================================
   T0 — YENİ KABUK (Glass)  ·  17.07.2026
   Sınıf adları ve yerleşim ölçüleri DEĞİŞMEDİ; bu katman yalnız
   görünümü yeniler. Dış bağımlılık yok: fontlar sistem fontudur.
   Katman silinirse eski görünüm geri gelir.
   ============================================================ */

/* Zemin: çok hafif renkli ışıma — sayfaya derinlik verir */
body {
    background:
        radial-gradient(1100px 560px at 88% -12%, var(--birincil-acik), transparent 60%),
        radial-gradient(900px 520px at -12% 112%, var(--mor-acik), transparent 55%),
        var(--bg-ana);
}

/* Başlık tipografisi: sistem fontu, sıkı harf aralığı */
h1, h2, h3, .kart-baslik, .baslik, .sidebar-logo-text {
    font-family: var(--font-baslik);
    letter-spacing: -0.02em;
}

/* Cam yüzeyler: kenar menü + üst bar */
.sidebar {
    background: var(--bg-sidebar);
    backdrop-filter: blur(var(--blur)) saturate(130%);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(130%);
}
.topbar {
    background: var(--bg-sidebar);
    backdrop-filter: blur(var(--blur)) saturate(130%);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(130%);
    border-bottom: 1px solid var(--sidebar-kenar);
}

/* Menü öğeleri: hap görünümü, yumuşak vurgular */
.nav-item {
    border-radius: 12px;
    margin: 2px 10px;
    transition: var(--gecis);
}
.nav-item.aktif { box-shadow: inset 0 0 0 1px var(--kenar); }

/* Kartlar: buzlu cam + yumuşak çift gölge (zıplamaz, derinleşir) */
.kart {
    background: var(--bg-kart);
    backdrop-filter: blur(var(--blur)) saturate(120%);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(120%);
    border: 1px solid var(--kenar);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--golge-soft);
    transition: box-shadow 0.25s ease;
}
.kart:hover { box-shadow: var(--golge-hover); }

/* Butonlar: dolgun köşe, birincilde renkli gölge */
.btn { border-radius: 12px; font-weight: 600; transition: var(--gecis); }
.btn:active { transform: translateY(1px); }
.btn-birincil { box-shadow: 0 6px 14px -6px rgba(31, 78, 95, 0.42); }
.btn-birincil:hover { box-shadow: 0 10px 20px -8px rgba(31, 78, 95, 0.52); }
.btn-yesil { box-shadow: 0 6px 14px -6px rgba(36, 138, 61, 0.40); }
.btn-kirmizi { box-shadow: 0 6px 14px -6px rgba(223, 27, 18, 0.40); }
[data-theme="dark"] .btn-birincil,
[data-theme="dark"] .btn-yesil,
[data-theme="dark"] .btn-kirmizi { box-shadow: none; }

/* Rozetler: hap biçimi */
.badge { border-radius: 999px; font-weight: 600; }

/* Form elemanları: yumuşak köşe + belirgin odak halkası */
.form-input, .form-input-sade, .form-textarea {
    border-radius: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-input:focus, .form-input-sade:focus, .form-textarea:focus {
    border-color: var(--birincil);
    box-shadow: 0 0 0 4px var(--birincil-acik);
    outline: none;
}

/* Tablolar: satırda nazik vurgulama */
tbody tr { transition: background 0.15s ease; }
tbody tr:hover { background: var(--birincil-acik); }

/* Flash mesajları ve çekmece: kabuk diliyle uyum */
.flash { border-radius: var(--border-radius); box-shadow: var(--golge-soft); }
.drawer {
    border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
    box-shadow: var(--golge-hover);
}

/* ── YENİ YARDIMCILAR (denetim turunda kullanılacak) ── */
/* İstatistik kartı: <div class="stat-kart"><div class="stat-ikon">..ikon..</div>
   <div><div class="stat-sayi">48</div><div class="stat-etiket">Özlük</div></div></div> */
.stat-kart {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
}
.stat-ikon {
    width: 48px; height: 48px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    background: var(--birincil-acik);
    color: var(--birincil);
    flex-shrink: 0;
}
.stat-ikon.yesil { background: var(--basari-acik); color: var(--basari); }
.stat-ikon.mor { background: var(--mor-acik); color: var(--mor); }
.stat-ikon.turuncu { background: var(--uyari-acik); color: var(--uyari); }
.stat-sayi {
    font-family: var(--font-baslik);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.stat-etiket { font-size: 13px; color: var(--metin-ikincil); }

.btn-circle {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid var(--kenar);
    background: var(--bg-kart);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 17px;
    color: var(--metin-ikincil);
    transition: var(--gecis);
}
.btn-circle:hover { color: var(--birincil); border-color: var(--kenar-hover); }

/* Kaydırma çubuğu: ince ve nazik */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
    background: rgba(127, 127, 127, 0.35);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-track { background: transparent; }

/* Eski tarayıcı sigortası: cam desteklenmiyorsa yüzeyler düz olur */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .kart, .topbar { background: #FFFFFF; }
    .sidebar { background: #FAFAFC; }
    [data-theme="dark"] .kart,
    [data-theme="dark"] .topbar { background: #1C1C1E; }
    [data-theme="dark"] .sidebar { background: #141416; }
}

/* Hareket azaltma tercihi olan kullanıcıya saygı */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}


/* 🆕 24 Eki gece (Zor Test Koleji B9) — pasif düğme pasif GÖRÜNÜR (eskiden etkinle aynıydı: opaklık 1, el imleci) */
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* ============================================================
   T1 — GLOBAL BİLDİRİM & ONAY BİLEŞENİ  ·  Ö1
   Tarayıcı alert/confirm yasak — bunlar kullanılır.
   ============================================================ */
.toast-kap {
    position: fixed;
    top: calc(var(--topbar-yukseklik) + 14px);
    right: 18px;
    /* 14 Eki (Fable H1): bildirim pencerelerin (kroki 1000 · dosya/mesaj 10000+) ve onayın ÜSTÜNDE görünmeli —
       500 iken pencere içindeki işlemin sonucu pencerenin arkasında kalıyordu. */
    z-index: 100006;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(380px, 92vw);
}
.toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 16px;
    border-radius: var(--border-radius);
    background: var(--bg-kart);
    backdrop-filter: blur(var(--blur)) saturate(120%);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(120%);
    border: 1px solid var(--kenar);
    border-left: 4px solid var(--birincil);
    box-shadow: var(--golge-hover);
    font-size: 13px;
    color: var(--metin-ana);
    animation: toast-gir 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.toast.basari { border-left-color: var(--basari); }
.toast.basari i { color: var(--basari); }
.toast.hata { border-left-color: var(--hata); }
.toast.hata i { color: var(--hata); }
.toast.uyari { border-left-color: var(--uyari); }
.toast.uyari i { color: var(--uyari); }
.toast.bilgi i { color: var(--birincil); }
.toast i { font-size: 17px; margin-top: 1px; flex-shrink: 0; }
.toast.kayboluyor { opacity: 0; transform: translateX(12px); transition: all 0.3s ease; }
/* 🆕 12 Eki (Fable K15) — her bildirimde kapatma; kalıcı olan kullanıcı kapatana kadar durur */
.toast .toast-metin { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast .toast-kapat { flex-shrink: 0; margin: -4px -6px -4px 4px; padding: 2px 6px; font: inherit; font-size: 18px;
    line-height: 1; color: var(--metin-ikincil); background: none; border: none; border-radius: 6px; cursor: pointer; }
.toast .toast-kapat:hover { color: var(--metin-ana); background: var(--bg-ana); }
.toast.kalici { max-height: 45vh; overflow-y: auto; }
/* 🆕 14 Eki (Fable S1) — bildirimdeki tek tık eylem («Geri al») */
.toast .toast-eylem { flex-shrink: 0; align-self: center; padding: 4px 10px; font: inherit; font-size: 12.5px;
    font-weight: 600; color: var(--birincil); background: none; border: 1px solid var(--birincil); border-radius: 7px;
    cursor: pointer; }
.toast .toast-eylem:hover { background: var(--birincil); color: #fff; }
@keyframes toast-gir {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: none; }
}

.onay-perde {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 12, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    /* 14 Eki (Fable H1): onay HER sayfa penceresinin üstünde olmalı — kroki penceresi 1000, dosya/mesaj pencereleri
       10000–100002. 600 iken kroki içindeki «Sil»in onayı pencerenin ARKASINDA açılıyordu (silme fiilen kullanılamıyordu).
       Davet penceresi 100002 (DOM'a sonradan eklenir, eşit değerde üstte kalırdı) · gelen davet kartı 100003.
       Arama paneli/küçük arama penceresi (999998+) bilerek daha üstte. */
    z-index: 100005;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: toast-gir 0.15s ease;
}
.onay-kutu {
    width: min(420px, 90vw);
    background: var(--bg-kart);
    backdrop-filter: blur(var(--blur)) saturate(120%);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(120%);
    border: 1px solid var(--kenar);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--golge-hover);
    padding: 22px;
}
.onay-kutu .onay-ikon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    background: var(--uyari-acik);
    color: var(--uyari);
    margin-bottom: 12px;
}
.onay-kutu h3 {
    margin: 0 0 6px;
    font-size: 16px;
    font-family: var(--font-baslik);
    letter-spacing: -0.01em;
}
.onay-kutu p { margin: 0 0 18px; font-size: 13px; color: var(--metin-ikincil); }
.onay-kutu .onay-butonlar { display: flex; justify-content: flex-end; gap: 8px; }

/* 🖼 2 EKİ — SORU GÖRSELLERİ SAYDAM (saydam_gorsel.py: kâğıt beyazı her yerde gider). Açık temada fark yok
   (beyaz zeminde aslı birebir). KARANLIK temada siyah çizgi koyu zeminde okunmaz → arkalarına beyaz kâğıt.
   Tasarım Atölyesi'nin sayfası (.at-sayfa) HARİÇ: orada kâğıdın rengi görünmeli (ekran = kâğıt). */
[data-theme="dark"] img[src*="/soru-gorsel/"] { background: #fff; }
[data-theme="dark"] img[src*="/sinav-atolyesi/gorsel/"]:not(.at-sayfa img) { background: #fff; }

/* 🆕 13 Eki (Fable toplu AŞAMA 6.8) — aranabilir seçici (base.html seciciAraKur) */
.secici-ara{margin-bottom:6px;}
.secici-ara-bilgi{display:block;margin-top:4px;font-size:12px;color:var(--metin-ikincil);}
.secici-ara-bilgi[hidden]{display:none;}

/* 15 Eki (Ömer: «kaydetmeden yazarken uyarsın, inline olsun, ayrı bir uyarı değil»): doğum alanının ALTINDA satır içi
   yaş yazısı — öğrenci kaydı ve Kayıt Kabul formu. Hesap kayıt kapısının aynısı (kayit_kurallari.yas_canli). */
.yas-canli { font-size: 12px; margin-top: 4px; line-height: 1.4; color: var(--metin-ikincil); }
.yas-canli[data-durum="uygun"] { color: var(--basari); }
.yas-canli[data-durum="nedenle"], .yas-canli[data-durum="disinda"] { color: var(--uyari); }
.yas-canli[data-durum="red"] { color: var(--hata); }

/* 🏫 3 Kas — OKULUN KENDİ ÇIKTISI MEB'inkinden ayrı renkte (Ömer: «renkleri farklı olsun ki MEB dışı olduğu anlaşılsın») — TEK tanım;
   Gelişim ekranları ve Sınav Atölyesi «Kazanımlar» kullanır. Renk tek başına yetmez (renk körlüğü · siyah-beyaz çıktı) → her zaman
   «okul» etiketiyle. Mor: düzey renklerinden (kırmızı · turuncu · mavi · yeşil) ayrı. */
:root { --okul-renk: #6D28D9; --okul-zemin: rgba(109,40,217,.08); --okul-kenar: rgba(109,40,217,.45); }
[data-theme="dark"] { --okul-renk: #C4B5FD; --okul-zemin: rgba(196,181,253,.10); --okul-kenar: rgba(196,181,253,.45); }
.okul-rozet { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap;
    color: var(--okul-renk); background: var(--okul-zemin); border: 1px solid var(--okul-kenar); vertical-align: 1px; }
.okul-kod { color: var(--okul-renk); }
.okul-cikti { border-left: 3px solid var(--okul-kenar); padding-left: 6px; }