/* ==========================================================================
   ORTAK TEMA — tüm sayfalar bunu kullanır.
   Sayfaya özel stiller buraya YAZILMAZ, css/pages/ altına açılır.

   Aşağıdaki değişkenler tek gerçek kaynaktır. Tema rengini değiştirmek
   istersen --renk-ana'yı değiştir, uygulamanın tamamı döner.
   ========================================================================== */

/* Başlık/buton/rozet gibi "oyunsu" öğelerde kullanılan tek ağırlık (700) —
   self-host: Google Fonts CDN'e bağımlılık yok, tek küçük woff2 çifti
   (latin + Türkçe karakterler için latin-ext) bir kez indirilip cache'lenir.
   Gövde metni bilinçli olarak system-ui'de kalıyor (bkz. --yazi-tipi) —
   düşük donanımlı/kararsız internetli sınıf bilgisayarlarında ikinci bir
   font indirmeye gerek kalmasın diye. */
@font-face {
    font-family: 'Baloo 2';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/lib/fonts/baloo2/baloo2-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+0304, U+0308, U+0329, U+1E00-1E9F, U+2020, U+2113;
}

@font-face {
    font-family: 'Baloo 2';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/lib/fonts/baloo2/baloo2-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}

:root {
    /* Renkler — canlı mor ana renk + sıcak krem zemin ("candy" palet).
       Modül aksan renkleri (hızlı okuma/sayma, zihinden, sınav) kasıtlı
       olarak DEĞİŞMEDİ: renk körlüğü ayrımı için doğrulanmışlardı, bkz.
       aşağıdaki yorumlar. */
    --renk-ana: #7c3aed;
    --renk-ana-koyu: #6d28d9;
    --renk-ana-soluk: #f1e8fe;
    --renk-metin: #2a2438;
    --renk-metin-soluk: #786f8c;
    --renk-kenarlik: #ece3d8;
    --renk-arkaplan: #fcf2ed;
    --renk-yuzey: #ffffff;
    /* Kenar çubuğunun "yüzen kart" zemini — sayfa zemininden (peach) farklı,
       hafif lavanta ton. */
    --renk-sidebar: #e9dced;
    --renk-hata: #dc2626;
    --renk-hata-soluk: #fef2f2;
    --renk-basari: #15803d;
    --renk-basari-soluk: #f0fdf4;

    /* Modül aksan renkleri — kart şeridi, rozet ve sidebar ikonlarında
       kullanılır. Kalem/fosforlu kalem tonları: tüm yüzeyi boyayan bir
       gradyan değil, ince bir kimlik işareti. */
    --renk-hizli-okuma: #e3a008;
    --renk-hizli-okuma-soluk: #fbf0d9;
    /* Not: ilk seçilen #0e9f6e (yeşil), coral (#e85d75) ile renk körlüğü
       (deuteranopi) ayrımı testinde (dataviz palet doğrulayıcısı) EŞİK ALTI
       kaldı (ΔE 5.6, taban 6). Mavi-camgöbeği tona kaydırıldı — ayrım ΔE 9.5,
       tüm kontroller geçiyor. */
    --renk-hizli-sayma: #0891b2;
    --renk-hizli-sayma-soluk: #dcf1f6;
    --renk-zihinden: #e85d75;
    --renk-zihinden-soluk: #fbe4e8;
    --renk-sinav: #7c5cfc;
    --renk-sinav-soluk: #eee9ff;
    /* Aynı Farklı ve Yanan Kareler için eklendi — yukarıdaki dördü gibi
       dataviz palet doğrulayıcısından geçirilmedi, sadece renk tekerleğinde
       diğerlerinden (amber/cam-göbeği/mercan/mor) mümkün olduğunca uzak
       tonlar seçildi. Yayına çıkmadan önce doğrulanmalı. */
    --renk-ayni-farkli: #2563eb;
    --renk-ayni-farkli-soluk: #dbe7fd;
    --renk-yanan-kareler: #c026d3;
    --renk-yanan-kareler-soluk: #f7defb;

    /* Tek başına bir durum rengi — kategorik veri paletinin parçası değil,
       sadece "üst üste giriş" rozetinde kullanılıyor. */
    --renk-seri: #f97316;
    --renk-seri-soluk: #fff1e6;

    /* Tipografi — gövde metni system-ui'de: hiçbir ağ isteği yapmadan, en
       zayıf makinede bile anında render olur. Başlık/buton/rozet gibi
       "oyunsu" öğeler --yazi-tipi-oyunsu kullanır (yukarıdaki tek @font-face). */
    --yazi-tipi: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --yazi-tipi-oyunsu: 'Baloo 2', var(--yazi-tipi);
    --yazi-boyut-baslik: 1.5rem;
    --yazi-boyut-alt-baslik: 1.125rem;
    --yazi-boyut-normal: 0.9375rem;
    --yazi-boyut-kucuk: 0.8125rem;

    /* Ölçüler — köşeler eskisinden (8px) belirgin şekilde daha yuvarlak;
       gölgeler siyah yerine anahtar mor tona göre hafif tonlanmış. */
    --kose-yaricap: 16px;
    --bosluk: 1rem;
    --golge: 0 2px 8px rgba(124, 58, 237, .08);
    --golge-yuksek: 0 10px 24px rgba(124, 58, 237, .16);
    --kenar-genislik: 232px;
}

/* --- Temel -------------------------------------------------------------- */

html {
    font-size: 16px;
}

body {
    margin: 0;
    font-family: var(--yazi-tipi);
    font-size: var(--yazi-boyut-normal);
    color: var(--renk-metin);
    background: var(--renk-arkaplan);
}

h1, h2, h3 {
    margin: 0 0 .5rem;
    font-family: var(--yazi-tipi-oyunsu);
    font-weight: 700;
    color: var(--renk-metin);
}

h1 { font-size: var(--yazi-boyut-baslik); }
h2 { font-size: var(--yazi-boyut-alt-baslik); }
h3 { font-size: var(--yazi-boyut-normal); }

/* İkincil, dikkat çekmemesi gereken metin */
.soluk {
    color: var(--renk-metin-soluk);
    font-size: var(--yazi-boyut-kucuk);
}

/* Başlık altındaki açıklama metni */
.aciklama {
    margin: 0 0 1.5rem;
    font-size: var(--yazi-boyut-normal);
    color: var(--renk-metin-soluk);
}

a {
    color: var(--renk-ana);
    text-decoration: none;
}

a:hover {
    color: var(--renk-ana-koyu);
    text-decoration: underline;
}

/* --- Kenar çubuğu (sidebar) ----------------------------------------------
   Giriş yapılmış her sayfa .uygulama-govde içinde sabit genişlikte bir
   sidebar (.kenar-cubugu) + esnek içerik sütunundan (.icerik-alani) oluşur.
   Dar ekranda sidebar off-canvas'a döner; mevcut hamburger/panel açma-kapama
   JS'i (site.js → anaMenuTetiginiBagla) hiç değişmeden yeniden kullanılıyor,
   sadece id'ler (menuTetik/menuPanel) aynı kalıyor. */

.uygulama-govde {
    display: flex;
    align-items: flex-start;
    min-height: 100vh;
}

/* Kenar çubuğu artık kenara yapışık değil — etrafında boşluklu, yuvarlak
   köşeli "yüzen kart" (dik dikdörtgen, oval değil — kart uzun olduğu için
   köşe yarıçapı sabit kalıyor, tam stadium/pill olmuyor). */
.kenar-cubugu {
    display: flex;
    flex-direction: column;
    width: var(--kenar-genislik);
    flex-shrink: 0;
    height: calc(100vh - 2.5rem);
    margin: 1.25rem 0 1.25rem 1.25rem;
    position: sticky;
    top: 1.25rem;
    background: var(--renk-sidebar);
    border-radius: 24px;
    box-shadow: var(--golge);
    overflow: hidden;
}

/* --- Sidebar avatar yeri ---------------------------------------------------
   Şimdilik sadece yuvarlak bir yer tutucu: gerçek avatar seçimi (DiceBear
   vb.) ayrı bir iş — bu, o akışın oturacağı boşluğu şimdiden ayırıyor.
   Marka logosu kalktığı için kart avatarla açılıyor — üstte daha fazla boşluk. */
.kenar-avatar-alani {
    display: flex;
    justify-content: center;
    padding: 1.75rem 0 1.25rem;
}

.kenar-avatar-alani:hover {
    text-decoration: none;
}

.kenar-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--renk-yuzey);
    color: var(--renk-ana);
    font-size: 2.25rem;
    box-shadow: var(--golge);
}

/* --- Sidebar alt buton (Ayarlar) -------------------------------------------
   Kartla birleşmiyor — diğer menü öğeleriyle aynı hizada, kendi başına bir
   kapsül. Üstündeki ince ayırıcı onu nav listesinden ayırıyor. */
.kenar-ayirici {
    width: calc(100% - 1.75rem);
    margin: 0 .875rem .75rem;
    border: none;
    border-top: 1px solid rgba(124, 58, 237, .18);
}

.kenar-ayarlar-buton {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: calc(100% - 1.75rem);
    margin: 0 .875rem 1rem;
    padding: .625rem .875rem;
    border: none;
    border-radius: 14px;
    background: #ad91de;
    color: #fff;
    font-family: inherit;
    font-weight: 600;
    font-size: var(--yazi-boyut-normal);
    text-align: left;
    cursor: pointer;
}

.kenar-ayarlar-buton:hover {
    background: var(--renk-ana-koyu);
    color: #fff;
}

.icerik-alani {
    flex: 1;
    min-width: 0;
}

.marka {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: 1.25rem 1.25rem .875rem;
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--renk-metin);
}

.marka:hover {
    text-decoration: none;
}

.marka-logo {
    height: 34px;
    width: auto;
}

.kenar-menu {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .5rem .875rem;
    overflow-y: auto;
    flex: 1;
}

/* Her öğe kendi kapsülünde — birbirine yapışık liste değil, aralarında
   belirgin boşlukla ayrı ayrı duran satırlar (referans: Kahoot/EasyLearn
   tarzı dashboard sidebar'ları). */
.kenar-menu a,
.kenar-menu .dropdown-toggle {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    padding: .625rem .875rem;
    border-radius: 14px;
    color: var(--renk-metin-soluk);
    font-weight: 600;
    font-size: var(--yazi-boyut-normal);
    line-height: 1.3;
    background: none;
    border: none;
    text-align: left;
}

.kenar-menu a i,
.kenar-menu .dropdown-toggle i {
    width: 18px;
    flex-shrink: 0;
    text-align: center;
    font-size: .9375rem;
}

.kenar-menu a:hover,
.kenar-menu .dropdown-toggle:hover,
.kenar-menu .dropdown-toggle:focus,
.kenar-menu .dropdown-toggle.show {
    background: var(--renk-ana-soluk);
    color: var(--renk-ana-koyu);
    text-decoration: none;
}

/* Aktif sayfanın menü öğesi — dolu mor kapsül. İşaretleme _Layout.cshtml'de
   ViewContext.RouteData ile yapılıyor. */
.kenar-menu a.aktif {
    background: var(--renk-ana);
    color: #fff;
    box-shadow: var(--golge);
}

/* --- Mobil üst bar ---------------------------------------------------
   Masaüstünde gizli; sidebar off-canvas'a döndüğünde marka + hamburger
   için tek satırlık bir üst şerit gerekiyor. */
.mobil-ust-bar {
    display: none;
    align-items: center;
    gap: .75rem;
    height: 56px;
    padding: 0 1rem;
    background: var(--renk-yuzey);
    border-bottom: 1px solid var(--renk-kenarlik);
    position: sticky;
    top: 0;
    z-index: 30;
}

.mobil-ust-bar .marka {
    padding: 0;
}

.mobil-ust-bar .marka-logo {
    height: 28px;
}

/* --- Mobil menü tetiği (hamburger) --------------------------------------- */
.menu-tetik {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    margin-left: auto;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.menu-tetik span {
    display: block;
    height: 2px;
    background: var(--renk-metin);
    border-radius: 1px;
    transition: transform .15s ease, opacity .15s ease;
}

.menu-tetik[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-tetik[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.menu-tetik[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 900px) {
    .mobil-ust-bar {
        display: flex;
    }

    .menu-tetik {
        display: flex;
    }

    /* Kapalıyken ekran dışında duran off-canvas panel; "acik" sınıfı
       mevcut site.js tarafından ekleniyor/kaldırılıyor (id="menuPanel").
       Masaüstündeki "yüzen kart" boşluğu/köşe yuvarlaması burada iptal —
       dar ekranda panel tam yüksekliği kaplasın, kenarlardan taşmasın. */
    .kenar-cubugu {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 40;
        margin: 0;
        height: 100vh;
        border-radius: 0;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: var(--golge-yuksek);
    }

    .kenar-cubugu.acik {
        transform: translateX(0);
    }
}

.yetki-rozeti {
    padding: .125rem .5rem;
    border-radius: 999px;
    background: var(--renk-ana-soluk);
    color: var(--renk-ana-koyu);
    font-size: var(--yazi-boyut-kucuk);
    font-weight: 500;
}

.cikis-form {
    margin: 0;
}

/* Sidebar'daki nav alt menüleri (Ayarlar/Soru Bankası) ve içerik başlığındaki
   profil menüsü aynı dropdown görünümünü paylaşıyor. Dropdown/modal davranışı
   tamamen Bootstrap'ın kendi JS'i (bootstrap.bundle) üzerinden — data-bs-*
   attribute'ları yeterli, ek script yazılmadı. */
.kenar-cubugu .dropdown-menu,
.icerik-header .dropdown-menu {
    padding: .375rem;
    border: 1px solid var(--renk-kenarlik);
    border-radius: var(--kose-yaricap);
    box-shadow: var(--golge-yuksek);
}

.kenar-cubugu .dropdown-item,
.icerik-header .dropdown-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .5rem .75rem;
    border-radius: 6px;
    border: none;
    background: none;
    color: var(--renk-metin);
    font-size: var(--yazi-boyut-normal);
    text-align: left;
    cursor: pointer;
}

.kenar-cubugu .dropdown-item i,
.icerik-header .dropdown-item i {
    width: 16px;
    text-align: center;
    font-size: .875rem;
    color: var(--renk-metin-soluk);
}

.kenar-cubugu .dropdown-item:hover,
.kenar-cubugu .dropdown-item:focus,
.icerik-header .dropdown-item:hover,
.icerik-header .dropdown-item:focus {
    background: var(--renk-ana-soluk);
    color: var(--renk-ana-koyu);
}

/* --- İçerik üst şeridi ("görünmez" header) --------------------------------
   Arka planı ve kenarlığı yok — sayfa içeriğiyle aynı zeminde yüzer.
   Sağda profil (avatar + ad), solunda bildirim zili. Referans: Chaart tarzı
   dashboard'ların sağ üst köşesi. */

.icerik-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    max-width: 1140px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem 0;
}

.icerik-header-sol {
    min-width: 0;
}

.icerik-header-sag {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}

/* Sayfa başlığı (örn. "Merhaba, X 👋") bildirim/profille aynı satırda —
   normal h1'den daha küçük, bu dar şeride uysun diye. */
.icerik-karsilama {
    margin: 0;
    font-size: 1.375rem;
}

.bildirim-zili {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--renk-kenarlik);
    background: var(--renk-yuzey);
    color: var(--renk-metin-soluk);
    font-size: .9375rem;
    cursor: pointer;
}

.bildirim-zili:hover {
    color: var(--renk-ana);
    border-color: var(--renk-ana);
}

.profil-tetik {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .875rem .25rem .25rem;
    border-radius: 999px;
    border: 1px solid var(--renk-kenarlik);
    background: var(--renk-yuzey);
    cursor: pointer;
}

.profil-tetik:hover,
.profil-tetik[aria-expanded="true"] {
    border-color: var(--renk-ana);
}

.profil-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--renk-ana);
    color: #fff;
    font-weight: 700;
    font-size: .8125rem;
}

.profil-ad {
    font-weight: 500;
    font-size: var(--yazi-boyut-normal);
    color: var(--renk-metin);
    white-space: nowrap;
}

@media (max-width: 480px) {
    /* Dar ekranda sadece avatar kalsın, isim yer kaplamasın. */
    .profil-ad {
        display: none;
    }

    .profil-tetik {
        padding: .25rem;
    }
}

/* --- Hesabım modalı içeriği ------------------------------------------- */

.hesap-bilgi {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin: 0;
}

.hesap-bilgi-satir dt {
    font-size: var(--yazi-boyut-kucuk);
    color: var(--renk-metin-soluk);
    font-weight: 500;
}

.hesap-bilgi-satir dd {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--renk-metin);
}

/* --- Gövde -------------------------------------------------------------- */

.sayfa-govde {
    max-width: 1140px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

/* Başlık solda, işlem butonu sağda duran sayfa başlığı */
.baslik-satiri {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

/* --- Sekmeler -------------------------------------------------------------
   Alt çizgi yerine dolu "chip" tab: aktif sekme mor pill, pasifler zemine
   yakın nötr kapsül. Kart/rozet dilindeki pill diliyle tutarlı. */

.sekmeler {
    display: flex;
    gap: .375rem;
    margin: 1.25rem 0 1.25rem;
    padding: .3125rem;
    background: var(--renk-arkaplan);
    border-radius: 999px;
    overflow-x: auto;            /* dar ekranda sekmeler yatay kayar */
    overflow-y: hidden;
    width: fit-content;
    max-width: 100%;
}

.sekme {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    border-radius: 999px;
    color: var(--renk-metin-soluk);
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .12s ease, color .12s ease;
}

.sekme:hover {
    color: var(--renk-metin);
    text-decoration: none;
}

.sekme.aktif {
    background: var(--renk-ana);
    color: #fff;
}

.sekme.aktif:hover {
    color: #fff;
}

.sekme-sayi {
    min-width: 20px;
    padding: .05rem .375rem;
    border-radius: 999px;
    background: var(--renk-yuzey);
    color: var(--renk-metin-soluk);
    font-size: var(--yazi-boyut-kucuk);
    font-weight: 600;
    text-align: center;
}

.sekme.aktif .sekme-sayi {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

/* --- Bildirim ----------------------------------------------------------- */

.bildirim {
    margin-bottom: 1.25rem;
    padding: .625rem .875rem;
    border-radius: var(--kose-yaricap);
    border: 1px solid;
    font-size: var(--yazi-boyut-kucuk);
}

.bildirim-basarili {
    border-color: var(--renk-basari);
    background: var(--renk-basari-soluk);
    color: var(--renk-basari);
}

.bildirim-hata {
    border-color: var(--renk-hata);
    background: var(--renk-hata-soluk);
    color: var(--renk-hata);
}

.bildirim-bilgi {
    border-color: var(--renk-kenarlik);
    background: var(--renk-ana-soluk);
    color: var(--renk-ana-koyu);
}

/* --- Kart --------------------------------------------------------------- */

.kart {
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-kenarlik);
    border-radius: var(--kose-yaricap);
    padding: 1.5rem;
    box-shadow: var(--golge);
}

/* Form kartları sayfa genişliğini kaplamasın */
.kart.dar {
    max-width: 440px;
}

/* --- Butonlar -----------------------------------------------------------
   İmza etkileşim: hover'da hafif kalkma + renkli gölge büyümesi, basılınca
   "squish" (scale küçülme) — her buton, her sayfada aynı oyunsu his.
   transform/opacity/box-shadow değişimi compositor'da çalışır, GPU dostu;
   eski/düşük donanımlı sınıf bilgisayarlarında da ucuz. */

.btn-ana,
.btn-ikincil {
    display: inline-block;
    padding: .625rem 1.375rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--yazi-tipi-oyunsu);
    font-size: var(--yazi-boyut-normal);
    font-weight: 700;
    cursor: pointer;
    transition: background-color .12s ease, transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.btn-ana {
    background: var(--renk-ana);
    color: #fff;
    box-shadow: 0 4px 14px rgba(124, 58, 237, .28);
}

.btn-ana:hover {
    background: var(--renk-ana-koyu);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(124, 58, 237, .34);
}

.btn-ana:active {
    transform: scale(.96);
    box-shadow: 0 2px 8px rgba(124, 58, 237, .28);
}

.btn-ikincil {
    background: var(--renk-yuzey);
    border-color: var(--renk-kenarlik);
    color: var(--renk-metin);
}

.btn-ikincil:hover {
    background: var(--renk-arkaplan);
    border-color: var(--renk-ana);
    text-decoration: none;
    transform: translateY(-2px);
}

.btn-ikincil:active {
    transform: scale(.96);
}

.btn-tehlike {
    display: inline-block;
    padding: .625rem 1.375rem;
    border: 1px solid #fecaca;
    border-radius: 999px;
    color: var(--renk-hata);
    background: var(--renk-hata-soluk);
    font-family: var(--yazi-tipi-oyunsu);
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: transform .12s ease, border-color .12s ease;
}

.btn-tehlike:hover,
.btn-tehlike:focus-visible {
    border-color: var(--renk-hata);
    text-decoration: none;
    transform: translateY(-2px);
}

.btn-tehlike:active {
    transform: scale(.96);
}

/* Butona benzemeyen, bağlantı gibi görünen buton (çıkış gibi) */
.btn-baglanti {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--renk-metin-soluk);
    cursor: pointer;
}

.btn-baglanti:hover {
    color: var(--renk-ana);
    text-decoration: underline;
}

/* Form içinde ayrı bir bölüm (örn. sadece öğrenciye özel alanlar) */
.ogrenci-bolum {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--renk-kenarlik);
}

.bolum-basligi {
    margin-bottom: .875rem;
    font-size: var(--yazi-boyut-kucuk);
    font-weight: 600;
    color: var(--renk-metin-soluk);
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* Onay kutusu listesi */
.onay-listesi {
    display: flex;
    flex-direction: column;
    gap: .125rem;
}

.onay-satiri {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .5rem;
    margin: 0;
    border-radius: var(--kose-yaricap);
    font-weight: 400;
    cursor: pointer;
}

.onay-satiri:hover {
    background: var(--renk-arkaplan);
}

.onay-satiri input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--renk-ana);
    cursor: pointer;
}

.form-butonlar {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin-top: 1.25rem;
}

/* --- Formlar ------------------------------------------------------------ */

.form-alan {
    margin-bottom: 1rem;
}

.form-alan label {
    display: block;
    margin-bottom: .375rem;
    font-size: var(--yazi-boyut-kucuk);
    font-weight: 500;
    color: var(--renk-metin);
}

/* input:not([type]) şart: type yazılmamış bir input, [type="text"]
   seçicisiyle EŞLEŞMEZ ve stilsiz kalır (dar, çerçevesiz görünür). */
.form-alan input:not([type]),
.form-alan input[type="text"],
.form-alan input[type="password"],
.form-alan input[type="number"],
.form-alan input[type="email"],
.form-alan textarea,
.form-alan select {
    width: 100%;
    padding: .5rem .75rem;
    border: 1px solid var(--renk-kenarlik);
    border-radius: var(--kose-yaricap);
    font-family: inherit;
    font-size: var(--yazi-boyut-normal);
    color: var(--renk-metin);
    background: var(--renk-yuzey);
    box-sizing: border-box;
}

.form-alan textarea {
    line-height: 1.6;
    resize: vertical;
}

.form-alan input:focus,
.form-alan textarea:focus,
.form-alan select:focus {
    outline: none;
    border-color: var(--renk-ana);
    box-shadow: 0 0 0 3px var(--renk-ana-soluk);
}

/* Birden fazla küçük select'i tek satırda göstermek için (Konu/Soru
   formlarındaki Sınıf/Ders/Konu/Zorluk seçimi gibi). Dar ekranda
   flex-wrap ile alt alta düşer. */
.secim-satiri {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.secim-satiri .form-alan {
    flex: 1 1 160px;
    min-width: 140px;
}

/* Doğrulama hataları */
.alan-hatasi {
    display: block;
    margin-top: .25rem;
    font-size: var(--yazi-boyut-kucuk);
    color: var(--renk-hata);
}

.hata-kutusu {
    margin-bottom: 1rem;
    padding: .625rem .875rem;
    border: 1px solid var(--renk-hata);
    border-radius: var(--kose-yaricap);
    background: var(--renk-hata-soluk);
    color: var(--renk-hata);
    font-size: var(--yazi-boyut-kucuk);
}

.hata-kutusu ul {
    margin: 0;
    padding-left: 1.125rem;
}

/* input-validation-error: jQuery validation'ın hatalı alana eklediği sınıf */
input.input-validation-error {
    border-color: var(--renk-hata);
}

/* Filtre satırı: küçük select'ler ve "Yeni ..." butonu aynı satırda, buton
   en sağda (Soru Bankası / Test Oluştur listeleri). */
.filtre-satiri {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}

.filtre-form {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 0;
}

.filtre-form .form-alan {
    flex: 1 1 160px;
    min-width: 140px;
    margin-bottom: 0;
}

/* --- Test önizleme (A4 sayfa görünümü) ----------------------------------- */
/* PDF/Word çıktısıyla birebir aynı görünsün diye: beyaz A4 "kağıt" kutusu,
   içinde iki sütun (sol yarı / sağ yarı) — sunucu tarafında TestBelgeServisi
   ile aynı bölme mantığı (Chunk + yarım) view'da uygulanıyor. */
.a4-onizleme-alan {
    padding: 1.5rem;
    background: var(--renk-arkaplan);
    border-radius: var(--kose-yaricap);
    overflow-x: auto;
}

.a4-sayfa {
    width: 210mm;
    min-height: 297mm;
    margin: 0 auto 1.5rem;
    padding: 15mm;
    background: #fff;
    color: #111;
    box-shadow: 0 0 10px rgba(0, 0, 0, .15);
    box-sizing: border-box;
}

.a4-sayfa:last-child {
    margin-bottom: 0;
}

.a4-baslik {
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid #ccc;
    font-size: 14pt;
    font-weight: 700;
}

.a4-baslik div {
    font-size: 9pt;
    font-weight: 400;
}

.a4-sutunlar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.5rem;
}

.a4-soru {
    margin-bottom: .9rem;
    font-size: 11pt;
}

.a4-soru .sik {
    font-size: 10pt;
}

.a4-soru p {
    margin: .2rem 0;
}

.a4-resim {
    display: block;
    max-width: 2.8cm;
    max-height: 2.1cm;
    margin: .25rem 0;
}

.a4-resim-sik {
    display: inline-block;
    margin: 0 0 0 .25rem;
    vertical-align: middle;
}

/* --- Tablo -------------------------------------------------------------- */

.tablo {
    width: 100%;
    border-collapse: separate;   /* köşe yuvarlatma için gerekli */
    border-spacing: 0;
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-kenarlik);
    border-radius: var(--kose-yaricap);
}

/* Köşeleri "overflow: hidden" ile kesmiyoruz — kesseydik satırdaki
   üç nokta menüsü tablonun dışına taşamaz, görünmez olurdu.
   Bunun yerine köşe hücrelerini tek tek yuvarlıyoruz. */
.tablo thead tr:first-child th:first-child { border-top-left-radius: var(--kose-yaricap); }
.tablo thead tr:first-child th:last-child  { border-top-right-radius: var(--kose-yaricap); }
.tablo tbody tr:last-child td:first-child  { border-bottom-left-radius: var(--kose-yaricap); }
.tablo tbody tr:last-child td:last-child   { border-bottom-right-radius: var(--kose-yaricap); }

.tablo th,
.tablo td {
    padding: .625rem .875rem;
    text-align: left;
    border-bottom: 1px solid var(--renk-kenarlik);
}

.tablo th {
    background: var(--renk-arkaplan);
    font-size: var(--yazi-boyut-kucuk);
    font-weight: 600;
    color: var(--renk-metin-soluk);
    text-transform: uppercase;
    letter-spacing: .02em;
}

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

.tablo .sag,
.sag {
    text-align: right;
}

.tablo-soru-kolon {
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- İşlem menüsü (üç nokta) -------------------------------------------- */

.islem-menu {
    position: relative;          /* açılır liste buna göre konumlanır */
    display: inline-block;
    text-align: left;
}

.islem-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--kose-yaricap);
    background: none;
    color: var(--renk-metin-soluk);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
}

.islem-btn:hover,
.islem-menu.acik .islem-btn {
    background: var(--renk-arkaplan);
    border-color: var(--renk-kenarlik);
    color: var(--renk-metin);
}

.islem-liste {
    display: none;               /* .acik gelince görünür */
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 20;
    min-width: 150px;
    padding: .25rem;
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-kenarlik);
    border-radius: var(--kose-yaricap);
    box-shadow: var(--golge-yuksek);
}

.islem-menu.acik .islem-liste {
    display: block;
}

/* Liste içindeki bağlantı da form butonu da aynı görünsün */
.islem-liste a,
.islem-liste button {
    display: block;
    width: 100%;
    padding: .4rem .625rem;
    border: none;
    border-radius: calc(var(--kose-yaricap) - 2px);
    background: none;
    font-family: inherit;
    font-size: var(--yazi-boyut-normal);
    text-align: left;
    color: var(--renk-metin);
    cursor: pointer;
}

.islem-liste a:hover,
.islem-liste button:hover {
    background: var(--renk-arkaplan);
    color: var(--renk-metin);
    text-decoration: none;
}

.islem-liste button.tehlike {
    color: var(--renk-hata);
}

.islem-liste button.tehlike:hover {
    background: var(--renk-hata-soluk);
    color: var(--renk-hata);
}

.islem-liste form {
    margin: 0;
}

/* --- Dashboard kutuları ------------------------------------------------- */

.kutu-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--bosluk);
    margin-top: 1.5rem;
}

.kutu {
    display: block;
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-kenarlik);
    border-radius: var(--kose-yaricap);
    padding: 1.25rem;
    color: var(--renk-metin);
    transition: box-shadow .12s ease, border-color .12s ease;
}

.kutu:hover {
    border-color: var(--renk-ana);
    box-shadow: var(--golge-yuksek);
    color: var(--renk-metin);
    text-decoration: none;
}

/* --- Modül kartları (Modüller / Uygulamalar / Skor Tabloları) ------------- */

.modul-kutu {
    text-align: center;
}

/* Kart + köşedeki üç nokta. Nokta bağlantısı kartın İÇİNDE görünür ama
   DOM'da kardeşi: iç içe <a> geçersiz HTML ve tıklama hedefi karışıyor. */
.kutu-sarmal { position: relative; display: flex; }
.kutu-sarmal > .kutu { flex: 1; }
.kutu-ucnokta {
    position: absolute; right: .5rem; bottom: .5rem;
    width: 2rem; height: 2rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; color: #94a3b8; text-decoration: none;
}
.kutu-ucnokta:hover { background: #eef2ff; color: #4f46e5; }

.modul-ikon {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: .5rem;
    color: var(--renk-ana);
}

.modul-resim {
    width: 100%;
    max-height: 120px;
    object-fit: contain;
    margin-bottom: .5rem;
}

.kutu-baslik {
    font-weight: 600;
    margin-bottom: .25rem;
}

.kutu-aciklama {
    font-size: var(--yazi-boyut-kucuk);
    color: var(--renk-metin-soluk);
}

/* --- Ana sayfa panosu (Home/Index) ---------------------------------------
   Bu bölümün kartları rol bazlı gezinme kısayolları — puan/skor taşımıyor,
   o yüzden dört modül aksanından biriyle boyanmıyorlar; tek, sakin bir
   birincil renk kullanıyorlar. Modül aksan renkleri (Hızlı Okuma/Sayma,
   Zihinden Toplama, Sınav) kendi skor taşıyan kartlarına ayrılmış durumda —
   bu ileriki bir adım. */

.pano-karsilama {
    margin-bottom: 1.75rem;
}

.pano-karsilama h1 {
    margin-bottom: .25rem;
}

.pano-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .875rem;
}

.pano-kart {
    display: flex;
    align-items: center;
    gap: .875rem;
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-kenarlik);
    border-radius: 12px;
    padding: 1.125rem 1.25rem;
    color: var(--renk-metin);
    transition: transform .15s ease, border-color .15s ease;
}

.pano-kart:hover {
    border-color: var(--renk-ana);
    transform: translateY(-2px);
    color: var(--renk-metin);
    text-decoration: none;
}

.pano-ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--renk-ana-soluk);
    color: var(--renk-ana);
    font-size: 1.0625rem;
}

.pano-kart-metin {
    flex: 1;
    min-width: 0;
}

.pano-kart-baslik {
    font-weight: 600;
}

.pano-kart-aciklama {
    font-size: var(--yazi-boyut-kucuk);
    color: var(--renk-metin-soluk);
}

.pano-kart-ok {
    flex-shrink: 0;
    color: var(--renk-kenarlik);
    transition: transform .15s ease, color .15s ease;
}

.pano-kart:hover .pano-kart-ok {
    color: var(--renk-ana);
    transform: translateX(3px);
}

/* --- Puan rozeti ---------------------------------------------------------
   Uygulamanın imzası: puan/net/süre/sıra gibi ölçülebilir her değer bu
   rozetle gösterilir — sayfalar farklı olsa da göz her zaman aynı biçimi
   arar. Renk, ait olduğu modülün aksan rengine göre değişir
   (data-renk="hizli-okuma" | "hizli-sayma" | "zihinden" | "sinav"); yoksa
   birincil renge düşer. Bu bileşen henüz sadece tanımlı — kullanımı modül
   kartlarına geçildiğinde (sıradaki adım) başlıyor. */
.puan-rozeti {
    display: inline-flex;
    align-items: baseline;
    gap: .25rem;
    padding: .1875rem .5rem;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    font-family: var(--yazi-tipi-oyunsu);
    font-weight: 700;
    font-size: var(--yazi-boyut-kucuk);
    background: var(--renk-ana-soluk);
    color: var(--renk-ana-koyu);
}

.puan-rozeti[data-renk="hizli-okuma"] {
    background: var(--renk-hizli-okuma-soluk);
    color: #8a6004;
}

.puan-rozeti[data-renk="hizli-sayma"] {
    background: var(--renk-hizli-sayma-soluk);
    color: #0e6377;
}

.puan-rozeti[data-renk="zihinden"] {
    background: var(--renk-zihinden-soluk);
    color: #a8324a;
}

.puan-rozeti[data-renk="sinav"] {
    background: var(--renk-sinav-soluk);
    color: #5738c2;
}

.puan-rozeti[data-renk="ayni-farkli"] {
    background: var(--renk-ayni-farkli-soluk);
    color: #1d4ed8;
}

.puan-rozeti[data-renk="yanan-kareler"] {
    background: var(--renk-yanan-kareler-soluk);
    color: #a21caf;
}

.puan-rozeti-etiket {
    font-weight: 500;
    opacity: .8;
}

/* --- Modül hızlı erişim satırı ---------------------------------------------
   Eskiden dolgun mor "hero" kutusuydu — yeni bento diliyle çakışmasın diye
   düz bir başlık + kart satırına indirgendi. */

.op-hero-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.op-hero-ust h3 {
    margin: 0;
}

.op-hero-link {
    color: var(--renk-ana);
    font-size: .8125rem;
    font-weight: 600;
}

.op-hero-link:hover {
    color: var(--renk-ana-koyu);
}

.op-kart {
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-kenarlik);
    border-radius: 14px;
    padding: 1.25rem;
}

.op-hedef-kart {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
}

.op-hedef-ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--renk-seri-soluk);
    color: var(--renk-seri);
    font-size: 1.125rem;
}

.op-hedef-baslik {
    font-weight: 600;
}

.op-hedef-kart p {
    margin: 0;
    color: var(--renk-metin-soluk);
    font-size: var(--yazi-boyut-normal);
}

.op-hedef-buton {
    margin-top: .375rem;
}

.ik-aktivite-baslik {
    font-size: var(--yazi-boyut-kucuk);
    font-weight: 600;
    color: var(--renk-metin-soluk);
    margin-bottom: .75rem;
}

/* Tek çizgili SVG grafik — viewBox 0 0 700 160 sabit, preserveAspectRatio
   "none" ile kabın genişliğine yayılıyor (bkz. _HaftalikAktivite.cshtml). */
.ik-cizgi-grafik {
    display: block;
    width: 100%;
    height: 140px;
}

.ik-gun-etiketleri {
    display: flex;
    justify-content: space-between;
    padding: 0 .25rem;
    font-size: .6875rem;
    color: var(--renk-metin-soluk);
}

/* --- Modül hızlı oynama kartları (Ana sayfa · Hızlı erişim) ---------------
   Her kart doğrudan ilgili modülün zorluk seçme ekranına (Index) götürür.
   Seviye/puan verisi şimdilik sabit — Home/Index.cshtml'deki not bunu işaret
   ediyor. Renk kimliği üstteki ince şerit + ikon + puan rozetiyle taşınıyor;
   referans aldığımız tasarımdaki dolgun renkli kutular yerine bilinçli
   olarak ince bir aksan — "sade/minimal" hedefiyle çelişmesin diye. */

.modul-hizli-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .875rem;
    margin-bottom: 1.5rem;
}

.modul-hizli-kart {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-kenarlik);
    border-top: 3px solid transparent;
    border-radius: 12px;
    padding: 1rem;
    color: var(--renk-metin);
    transition: transform .15s ease, border-color .15s ease;
}

.modul-hizli-kart:hover {
    transform: translateY(-2px);
    color: var(--renk-metin);
    text-decoration: none;
}

.modul-hizli-kart[data-renk="hizli-okuma"] { border-top-color: var(--renk-hizli-okuma); }
.modul-hizli-kart[data-renk="hizli-sayma"] { border-top-color: var(--renk-hizli-sayma); }
.modul-hizli-kart[data-renk="zihinden"] { border-top-color: var(--renk-zihinden); }
.modul-hizli-kart[data-renk="sinav"] { border-top-color: var(--renk-sinav); }
.modul-hizli-kart[data-renk="ayni-farkli"] { border-top-color: var(--renk-ayni-farkli); }
.modul-hizli-kart[data-renk="yanan-kareler"] { border-top-color: var(--renk-yanan-kareler); }

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

.mhk-ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 9px;
    font-size: 1rem;
}

.modul-hizli-kart[data-renk="hizli-okuma"] .mhk-ikon { background: var(--renk-hizli-okuma-soluk); color: #8a6004; }
.modul-hizli-kart[data-renk="hizli-sayma"] .mhk-ikon { background: var(--renk-hizli-sayma-soluk); color: #0e6377; }
.modul-hizli-kart[data-renk="zihinden"] .mhk-ikon { background: var(--renk-zihinden-soluk); color: #a8324a; }
.modul-hizli-kart[data-renk="sinav"] .mhk-ikon { background: var(--renk-sinav-soluk); color: #5738c2; }
.modul-hizli-kart[data-renk="ayni-farkli"] .mhk-ikon { background: var(--renk-ayni-farkli-soluk); color: #1d4ed8; }
.modul-hizli-kart[data-renk="yanan-kareler"] .mhk-ikon { background: var(--renk-yanan-kareler-soluk); color: #a21caf; }

.mhk-baslik {
    font-family: var(--yazi-tipi-oyunsu);
    font-weight: 700;
    font-size: 1rem;
}

.mhk-ilerleme-cubuk {
    height: 6px;
    border-radius: 999px;
    background: var(--renk-arkaplan);
    overflow: hidden;
}

.mhk-ilerleme-dolu {
    height: 100%;
    border-radius: 999px;
}

.modul-hizli-kart[data-renk="hizli-okuma"] .mhk-ilerleme-dolu { background: var(--renk-hizli-okuma); }
.modul-hizli-kart[data-renk="hizli-sayma"] .mhk-ilerleme-dolu { background: var(--renk-hizli-sayma); }
.modul-hizli-kart[data-renk="zihinden"] .mhk-ilerleme-dolu { background: var(--renk-zihinden); }
.modul-hizli-kart[data-renk="sinav"] .mhk-ilerleme-dolu { background: var(--renk-sinav); }
.modul-hizli-kart[data-renk="ayni-farkli"] .mhk-ilerleme-dolu { background: var(--renk-ayni-farkli); }
.modul-hizli-kart[data-renk="yanan-kareler"] .mhk-ilerleme-dolu { background: var(--renk-yanan-kareler); }

.mhk-ilerleme-etiket {
    display: block;
    margin-top: .3125rem;
    font-size: .75rem;
    color: var(--renk-metin-soluk);
}

.mhk-alt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: .25rem;
    font-size: .8125rem;
    color: var(--renk-metin-soluk);
}

.modul-hizli-kart:hover .mhk-alt {
    color: var(--renk-ana);
}

/* --- Yardımcı sınıflar --------------------------------------------------- */

/* Birden çok sayfada JavaScript'in eleman göster/gizlemesi için.
   display:none yerine !important değil, doğrudan kural — çakışan bir
   display tanımı olmadığı sürece yeterli. */
.gizli {
    display: none;
}

/* Form alanının altındaki açıklama metni. Hata mesajından farklı:
   bu her zaman görünür, kullanıcıyı yönlendirir. */
.alan-ipucu {
    display: block;
    font-size: var(--yazi-boyut-kucuk);
    color: var(--renk-metin-soluk);
    margin-top: .25rem;
}

/* Tek onay kutulu form alanı — etiket kutunun sağında dursun. */
.onay-alan label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 400;
    cursor: pointer;
}

.onay-alan input[type="checkbox"] {
    width: auto;
    margin: 0;
}

/* Aktif / pasif gibi durum rozetleri. */
.rozet {
    display: inline-block;
    padding: .125rem .5rem;
    border-radius: 999px;
    font-size: var(--yazi-boyut-kucuk);
    font-weight: 600;
}

.rozet-acik {
    background: var(--renk-basari-soluk);
    color: var(--renk-basari);
}

.rozet-kapali {
    background: var(--renk-arkaplan);
    color: var(--renk-metin-soluk);
}

/* Sıra numarası gibi dar sütunlar. */
.dar-sutun {
    width: 3rem;
    text-align: center;
}

/* ---------------------------------------------------------------------------
   Oyun modülleri (ortak) — Hızlı Okuma ve Zihinden Toplama arasında paylaşılır.

   Buraya taşınma sebebi: ikinci sayfa (Zihinden Toplama) aynı sınıfları
   yüklemeye başlayınca site.css'e taşıma kuralı devreye girdi
   (docs/02-gelistirme-rehberi.md). Yalnızca "kelime" / "sayı" gibi modüle
   özel görsel kısımlar page CSS'lerinde kalıyor.
   --------------------------------------------------------------------------- */

/* --- Seviye kartları (Index) --------------------------------------------- */

.seviye-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--bosluk);
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

.seviye-kart {
    position: relative;
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-kenarlik);
    border-radius: var(--kose-yaricap);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.seviye-kart.pasif {
    opacity: .6;
}

.seviye-kart h2 {
    font-size: var(--yazi-boyut-alt-baslik);
    margin: 0;
}

.seviye-no {
    position: absolute;
    top: .75rem;
    right: 1rem;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--renk-ana-soluk);
}

.seviye-bilgi {
    display: flex;
    gap: 1.25rem;
    margin: 0;
    flex-wrap: wrap;
}

.seviye-bilgi dt {
    font-size: var(--yazi-boyut-kucuk);
    color: var(--renk-metin-soluk);
}

.seviye-bilgi dd {
    margin: 0;
    font-weight: 600;
}

.seviye-rekor {
    font-size: var(--yazi-boyut-kucuk);
    color: var(--renk-metin-soluk);
    margin: 0;
}

.seviye-kart .btn-ana {
    margin-top: auto;
    text-align: center;
}

/* --- Oyun alanı ----------------------------------------------------------- */

.oyun-alani {
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-kenarlik);
    border-radius: var(--kose-yaricap);
    margin-top: 1.5rem;
    padding: 2rem 1.5rem;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.oyun-ekran {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

/* DİKKAT — özgüllük tuzağı, bkz. hizli-okuma.css'in eski yorumu:
   .gizli site.css'te "display: none". .oyun-ekran da tek sınıf, aynı
   özgüllükte. İki sınıfı birleştirerek özgüllüğü artırıyoruz. */
.oyun-ekran.gizli {
    display: none;
}

.oyun-aciklama {
    max-width: 32rem;
    color: var(--renk-metin-soluk);
    margin: 0;
}

.oyun-ipucu {
    font-size: var(--yazi-boyut-kucuk);
    color: var(--renk-metin-soluk);
    margin: 0;
}

.btn-buyuk {
    padding: .75rem 2.5rem;
    font-size: 1.125rem;
}

/* Tablo satırı içindeki butonlar için. Önce odev.css'te tanımlıydı; üçüncü
   sayfa da ihtiyaç duyunca buraya taşındı — sayfaya özel değil, genel bir boy. */
.btn-kucuk {
    padding: .3rem .75rem;
    font-size: var(--yazi-boyut-kucuk);
}

.tur-bilgi {
    font-size: var(--yazi-boyut-kucuk);
    color: var(--renk-metin-soluk);
    letter-spacing: .05em;
    text-transform: uppercase;
}

.geri-sayim {
    font-family: var(--yazi-tipi-oyunsu);
    font-size: 5rem;
    font-weight: 700;
    color: var(--renk-ana);
    line-height: 1;
}

.tur-sonuc-rozet {
    font-family: var(--yazi-tipi-oyunsu);
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
}

.tur-sonuc-rozet.dogru {
    color: var(--renk-basari);
}

.tur-sonuc-rozet.yanlis {
    color: var(--renk-hata);
}

.tur-sonuc-metin {
    margin: 0;
    color: var(--renk-metin-soluk);
}

/* --- Oyun sonucu ---------------------------------------------------------- */

.sonuc-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: .75rem;
    width: 100%;
    max-width: 32rem;
}

.sonuc-kutu {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .75rem;
    border: 1px solid var(--renk-kenarlik);
    border-radius: var(--kose-yaricap);
}

.sonuc-kutu.vurgulu {
    border-color: var(--renk-ana);
    background: var(--renk-ana-soluk);
}

.sonuc-etiket {
    font-size: var(--yazi-boyut-kucuk);
    color: var(--renk-metin-soluk);
}

.sonuc-deger {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.sonuc-deger.dogru {
    color: var(--renk-basari);
}

.sonuc-deger.yanlis {
    color: var(--renk-hata);
}

.kayit-durumu {
    font-size: var(--yazi-boyut-kucuk);
    color: var(--renk-metin-soluk);
    margin: 0;
}

.kayit-durumu.basarili {
    color: var(--renk-basari);
}

.kayit-durumu.hatali {
    color: var(--renk-hata);
}

/* --- Skor tablosu --------------------------------------------------------- */

.skor-tablosu {
    margin-top: 2rem;
}

.skor-baslik {
    display: flex;
    align-items: baseline;
    gap: .75rem;
}

.skor-baslik h2 {
    font-size: var(--yazi-boyut-alt-baslik);
    margin: 0;
}

/* Native <button> chrome sıfırlama — arkaplan/köşe/renk zaten .sekme /
   .sekme.aktif'ten geliyor, burada ezilmiyor. */
.skor-tablosu .sekme {
    border: none;
    font-family: inherit;
    font-size: var(--yazi-boyut-normal);
    cursor: pointer;
}

.skor-tablosu .sekme:not(.aktif) {
    background: none;
}

.siram {
    margin: .75rem 0 .25rem;
    color: var(--renk-metin-soluk);
    font-size: var(--yazi-boyut-kucuk);
}

.bos-liste {
    padding: 1.5rem;
    text-align: center;
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-kenarlik);
    border-radius: var(--kose-yaricap);
}

.skor-liste .benim-satirim {
    background: var(--renk-ana-soluk);
}

.skor-liste .benim-satirim td {
    font-weight: 600;
}

.madalya {
    font-size: 1.125rem;
}

/* Tablo hücresi içindeki dar sayı girişi (Ayarlar → Modüller ekranı).
   Normal form girişleri tam genişlik kaplar; tabloda bu çok geniş kalıyor. */
.ayar-girisi {
    width: 6rem;
    text-align: right;
}

/* --- Öğrenci seçme modalı ----------------------------------------------
   Liste alanı bir sayfalık satıra sabitlendi: öğrenci sayısı değiştikçe
   modalın boyu zıplamıyor, sayfalama düğmeleri hep aynı yerde duruyor. */
.ogrenci-sec-filtre {
    display: flex;
    gap: .5rem;
    margin-bottom: .85rem;
}

.ogrenci-sec-filtre .form-select {
    flex: 0 0 11rem;
}

.ogrenci-sec-arama {
    position: relative;
    flex: 1;
}

.ogrenci-sec-arama i {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: .85rem;
}

.ogrenci-sec-arama input {
    width: 100%;
    padding: .45rem .75rem .45rem 2.1rem;
    border: 1px solid #d7dbe7;
    border-radius: .5rem;
    background: #fff;
}

.ogrenci-sec-arama input:focus {
    outline: none;
    border-color: #a5b4fc;
    box-shadow: 0 0 0 .2rem rgba(79, 70, 229, .12);
}

.ogrenci-sec-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    /* 6 satır × (satır yüksekliği + boşluk) */
    height: 21.75rem;
    overflow: hidden;
}

.ogrenci-sec-liste form {
    margin: 0;
}

.ogrenci-sec-satir {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem .7rem;
    border: 1px solid transparent;
    border-radius: .6rem;
    background: transparent;
    text-align: left;
}

.ogrenci-sec-satir:hover {
    background: #f5f6fb;
    border-color: #e0e7ff;
}

.ogrenci-sec-avatar {
    flex: 0 0 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #4f46e5;
    color: #fff;
    font-weight: 700;
}

.ogrenci-sec-metin {
    flex: 1;
    min-width: 0;
}

.ogrenci-sec-ad {
    display: block;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ogrenci-sec-bilgi {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: #64748b;
    font-size: .82rem;
}

.ogrenci-sec-etiket {
    padding: .05rem .4rem;
    border-radius: .3rem;
    background: #eef2ff;
    color: #4338ca;
    font-weight: 600;
    letter-spacing: .02em;
}

.ogrenci-sec-ok {
    color: #c7cbd8;
    font-size: .75rem;
}

.ogrenci-sec-satir:hover .ogrenci-sec-ok {
    color: #4f46e5;
}

.ogrenci-sec-bos {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: #94a3b8;
}

.ogrenci-sec-bos i {
    font-size: 1.5rem;
}

.ogrenci-sec-sayfalama {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .85rem;
    padding-top: .75rem;
    border-top: 1px solid #eceef5;
}

.ogrenci-sec-sayac {
    color: #64748b;
    font-size: .82rem;
}

.ogrenci-sec-sayfa-dugmeler {
    display: flex;
    gap: .35rem;
}

.sayfa-dugme {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d7dbe7;
    border-radius: .45rem;
    background: #fff;
    color: #475569;
    font-size: .75rem;
}

.sayfa-dugme:hover:not(:disabled) {
    background: #eef2ff;
    border-color: #a5b4fc;
    color: #4338ca;
}

.sayfa-dugme:disabled {
    opacity: .4;
}

/* --- Oynatma şeridi ----------------------------------------------------- */
/* Öğretmen bir öğrenci adına oynatırken her sayfanın üstünde durur. */
.oynatma-serit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 0 1rem;
    padding: .6rem 1rem;
    border-radius: .5rem;
    background: #eef2ff;
    color: #3730a3;
}

.oynatma-serit-eylemler {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.oynatma-serit-eylemler form {
    margin: 0;
}

/* Şeritteki eylemler buton görünümünde: bağlantı gibi durunca sayfa
   içeriğinin bir parçası sanılıyordu. */
.serit-dugme {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .85rem;
    border: 1px solid #c7d2fe;
    border-radius: .45rem;
    background: #fff;
    color: #3730a3;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.serit-dugme:hover {
    background: #e0e7ff;
    color: #312e81;
    text-decoration: none;
}

.serit-dugme-vurgulu {
    border-color: #4f46e5;
    background: #4f46e5;
    color: #fff;
}

.serit-dugme-vurgulu:hover {
    background: #4338ca;
    color: #fff;
}

/* --- Oynatma kayıt onayı ------------------------------------------------ */
.oynatma-onay-katman {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .45);
}

.oynatma-onay {
    background: #fff;
    border-radius: .75rem;
    padding: 1.5rem;
    max-width: 22rem;
    text-align: center;
    box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, .25);
}

.oynatma-onay-soru {
    margin-bottom: 1rem;
}

.oynatma-onay-butonlar {
    display: flex;
    gap: .75rem;
    justify-content: center;
}

/* --- Ek gösterge bölümü (Ana sayfa · öğrenci) -----------------------------
   Referans tasarımdaki gibi: soluk şeftali zemin (#fcf2ed) üzerinde her
   widget kendi beyaz/pastel kartında, aralarında boşluk ve gölgeyle net
   ayrışıyor. Masaüstünde 3 sütunlu bento; 700px altında tek sütuna düşer. */

/* Ayrı bir kutu zemini yok — sayfanın kendi zemini (--renk-arkaplan) zaten
   bu tonda, kartlar doğrudan onun üzerinde yüzüyor. */
.eg-bolum {
    margin-top: 1.5rem;
}

.eg-bolum-baslik {
    margin-bottom: 1rem;
}

/* Üstteki 4 özet kutusu — modül satırından önce, sayfa genişliğinde. */
.eg-ust-izgara {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.75rem;
}

@media (max-width: 700px) {
    .eg-ust-izgara {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Alt bento: solda geniş sütun (grafik üstte, aktiviteler altta), sağda dar
   sütun (hedef üstte, takvim altta) — referans tasarımdaki gibi. */
.eg-izgara {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
        "grafik   hedef"
        "aktivite takvim";
    gap: 1rem;
}

@media (max-width: 700px) {
    .eg-izgara {
        grid-template-columns: 1fr;
        grid-template-areas:
            "grafik"
            "hedef"
            "aktivite"
            "takvim";
    }
}

.eg-kart {
    background: var(--renk-yuzey);
    border-radius: var(--kose-yaricap);
    padding: 1.25rem;
    box-shadow: var(--golge);
}

.eg-kart-grafik { grid-area: grafik; }
.eg-kart-hedef {
    grid-area: hedef;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
}
.eg-kart-aktivite { grid-area: aktivite; }
.eg-kart-takvim { grid-area: takvim; background: #f1e8fe; }

.eg-kart-hedef p {
    margin: 0;
    color: var(--renk-metin-soluk);
    font-size: var(--yazi-boyut-normal);
}

.eg-kart-hedef .op-hedef-buton {
    margin-top: .375rem;
}

/* Üst özet kutuları — dört farklı pastel ton. */
.eg-kart-gunluk { background: #e3f9f0; }
.eg-kart-odev { background: #fff2d9; }
.eg-kart-basari { background: var(--renk-basari-soluk); }
.eg-kart-seri { background: var(--renk-seri-soluk); }

.eg-kart-baslik {
    font-family: var(--yazi-tipi-oyunsu);
    font-weight: 700;
    font-size: var(--yazi-boyut-normal);
    margin-bottom: 1rem;
}

/* --- Günlük/aylık stat kutuları (eg-kart-gunluk, eg-kart-odev) ----------- */

.eg-stat-ust {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .75rem;
}

.eg-stat-ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, .6);
    font-size: 1.0625rem;
}

.eg-stat-sayi {
    font-family: var(--yazi-tipi-oyunsu);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--renk-metin);
}

.eg-stat-etiket {
    font-size: var(--yazi-boyut-kucuk);
    color: var(--renk-metin-soluk);
}

/* Ödev kartı: verilen/yapılan iki sayı yan yana + ince ilerleme çubuğu. */
.eg-odev-satir {
    display: flex;
    justify-content: space-between;
    margin-bottom: .625rem;
}

.eg-odev-deger {
    display: block;
    font-family: var(--yazi-tipi-oyunsu);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--renk-metin);
}

.eg-odev-etiket {
    font-size: var(--yazi-boyut-kucuk);
    color: var(--renk-metin-soluk);
}

.eg-odev-cubuk {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .7);
    overflow: hidden;
}

.eg-odev-dolu {
    height: 100%;
    border-radius: 999px;
    background: var(--renk-seri);
}

/* --- Mini takvim ----------------------------------------------------------
   Sadece görüntüler — gezinme/işlem yok, "bu ay nasıl geçti" özeti. */

.eg-takvim-ust {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: .875rem;
}

.eg-takvim-ay {
    font-size: var(--yazi-boyut-kucuk);
    color: var(--renk-metin-soluk);
}

.eg-takvim-izgara {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .25rem;
    text-align: center;
}

.eg-takvim-gun-adi {
    font-size: .625rem;
    font-weight: 600;
    color: var(--renk-metin-soluk);
    padding-bottom: .25rem;
}

.eg-takvim-gun {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    border-radius: 8px;
    font-size: .75rem;
    color: var(--renk-metin);
}

.eg-takvim-gun.eg-bos {
    visibility: hidden;
}

.eg-takvim-gun.eg-oynanmis::after {
    content: '';
    position: absolute;
    bottom: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--renk-ana);
}

.eg-takvim-gun.eg-bugun {
    background: var(--renk-ana);
    color: #fff;
    font-weight: 700;
}

.eg-takvim-gun.eg-bugun.eg-oynanmis::after {
    background: #fff;
}

/* --- Son aktiviteler ------------------------------------------------------- */

.eg-aktivite-listesi {
    display: flex;
    flex-direction: column;
    gap: .125rem;
}

.eg-aktivite-satir {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem 0;
    border-bottom: 1px solid var(--renk-arkaplan);
}

.eg-aktivite-satir:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.eg-aktivite-ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    font-size: .875rem;
}

.eg-aktivite-metin {
    flex: 1;
    min-width: 0;
    font-size: var(--yazi-boyut-normal);
}

.eg-aktivite-zaman {
    flex-shrink: 0;
    font-size: var(--yazi-boyut-kucuk);
    color: var(--renk-metin-soluk);
    white-space: nowrap;
}

.eg-aktivite-ikon[data-renk="hizli-okuma"] { background: var(--renk-hizli-okuma-soluk); color: #8a6004; }
.eg-aktivite-ikon[data-renk="hizli-sayma"] { background: var(--renk-hizli-sayma-soluk); color: #0e6377; }
.eg-aktivite-ikon[data-renk="zihinden"] { background: var(--renk-zihinden-soluk); color: #a8324a; }
.eg-aktivite-ikon[data-renk="sinav"] { background: var(--renk-sinav-soluk); color: #5738c2; }