/* ==========================================================================
   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;
    /* Durum rozetleri için uyarı tonu — modül kimlik renginden (--renk-hizli-okuma)
       bilerek ayrı: aynı değeri taşısa da anlamı farklı, biri değişince öbürü
       yanlışlıkla peşinden gitmesin. */
    --renk-uyari: #e3a008;

    /* 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;
    --renk-goz-takip: #0d9488;
    --renk-goz-takip-soluk: #ccfbf1;

    /* 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);
    /* Dar ekranda 200px'e iner, geniş (2K/4K) ekranda 232px'i geçmez —
       sidebar büyük ekranlarda içerik payını yemesin diye orantılı küçülür. */
    --kenar-genislik: clamp(200px, 13vw, 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);
    overflow: hidden;
}

.kenar-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* --- 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-x: hidden;
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--renk-ana) 32%, transparent) transparent;
    /* Görünür alt kenarda sabit perde — taşan öğe olduğunu kaydırmadan da gösterir. */
    box-shadow: inset 0 -1.35rem .85rem -.35rem var(--renk-sidebar);
}

.kenar-menu::-webkit-scrollbar {
    width: 5px;
}

.kenar-menu::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.kenar-menu::-webkit-scrollbar-track {
    background: transparent;
    margin: .75rem 0;
}

.kenar-menu::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--renk-ana) 32%, transparent);
    border-radius: 999px;
}

.kenar-menu::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--renk-ana) 52%, transparent);
}

/* 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);
}

/* Menü öğesinin sağındaki sayaç (şu an: açık yarışma sayısı). Bildirim
   zilinin rozetiyle aynı dil — orada konumlandırma mutlak, burada satırın
   sonuna itiliyor. */
.menu-rozet {
    margin-left: auto;
    min-width: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--renk-hata);
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}

/* Aktif kapsülün üstünde kırmızı rozet okunmuyor; beyaz zemine dönüyor. */
.kenar-menu a.aktif .menu-rozet {
    background: #fff;
    color: var(--renk-ana);
}

/* --- 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: min(94vw, 1700px);
    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);
}

.oynatma-profil {
    position: relative;
    flex-shrink: 0;
}

.oynatma-profil-tetik {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: .25rem 1rem;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

.oynatma-profil-tetik:hover,
.oynatma-profil-tetik[aria-expanded="true"] {
    background: #e0e7ff;
}

.oynatma-profil-ad {
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icerik-header .oynatma-profil-menu.dropdown-menu {
    display: none;
    flex-direction: row;
    align-items: center;
    gap: .5rem;
    min-width: 100%;
    width: max-content;
    padding: .5rem;
    margin: .25rem 0 0;
    background: #eef2ff;
    border-color: #c7d2fe;
    inset: auto 0 auto auto;
    transform: none;
}

.icerik-header .oynatma-profil-menu.dropdown-menu.show {
    display: flex;
}

.oynatma-profil-menu form {
    margin: 0;
}

.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;
    overflow: hidden;
}

.profil-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.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: min(94vw, 1700px);
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.sayfa-govde-sik {
    padding: .6rem 1.5rem 1rem;
}

.sayfa-govde-sik .baslik-satiri h1 {
    margin: 0;
    font-size: 1.35rem;
}

.sayfa-govde-sik .baslik-satiri .aciklama {
    margin: .15rem 0 0;
    font-size: .9rem;
}

.icerik-alani:has(.sayfa-govde-sik) .icerik-header {
    padding-top: .75rem;
}

/* 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;
    margin: 0 0 .5rem;
}

/* --- 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;
    text-decoration: none;
    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 input[type="date"],
.form-alan input[type="datetime-local"],
.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 input[type="date"]:focus,
.form-alan input[type="datetime-local"]: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);
}

/* Tarih/saat girişinin takvim simgesi varsayılan olarak soluk gri; ana renge
   çekince alan tıklanabilir göründüğünü belli ediyor. */
.form-alan input[type="date"]::-webkit-calendar-picker-indicator,
.form-alan input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .6;
}

.form-alan input[type="date"]::-webkit-calendar-picker-indicator:hover,
.form-alan input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Şifre: inputun içinde göz, yanında üret/kopyala. Giriş sayfası da
   aynı gözü kullanır — ikinci sayfa ihtiyaç duyunca buraya taşındı. */
.sifre-satiri {
    display: flex;
    align-items: stretch;
    gap: .5rem;
}

.sifre-girdi-kutusu {
    position: relative;
    flex: 1;
    min-width: 0;
}

.sifre-girdi-kutusu input {
    padding-right: 2.5rem;
}

.sifre-goster-dugme {
    position: absolute;
    top: 50%;
    right: .375rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--renk-metin-soluk);
    cursor: pointer;
}

.sifre-goster-dugme:hover {
    color: var(--renk-ana);
}

.sifre-goster-dugme:focus-visible {
    outline: 2px solid var(--renk-ana);
    outline-offset: 1px;
}

.sifre-goster-dugme svg {
    width: 20px;
    height: 20px;
}

.sifre-goster-cizgi {
    transition: opacity .1s ease;
}

.sifre-goster-dugme[aria-pressed="true"] .sifre-goster-cizgi {
    opacity: 0;
}

.sifre-yan-dugme {
    flex: 0 0 2.5rem;
    width: 2.5rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Yan yana form alanları. Dar ekranda tek sütuna iner — alanlar
   .form-alan olduğu için kendi alt boşluklarını zaten taşıyorlar. */
.form-izgara {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
}

@media (max-width: 720px) {
    .form-izgara { grid-template-columns: 1fr; }
}

/* Tek başına bir alandan geniş olması gereken satır (ör. başlık). */
.form-izgara .tam-satir { grid-column: 1 / -1; }

/* asp-validation-summary boşken bile <ul><li hidden> basar. :not(:empty)
   o yüzden her GET'te kırmızı kutu çiziyordu (yarışma formundaki "patlak
   çizgi"). Geçerli özet gizlenir; hata gelince sınıf
   validation-summary-errors olur ve kutu görünür. */
.validation-summary-valid {
    display: none;
}

/* Sayfa başlığı + sağdaki eylem düğmeleri. */
.sayfa-baslik {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.sayfa-baslik h1 { margin-bottom: .25rem; }

.baslik-eylemler {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

/* Başlık eylemlerindeki formlar düğme gibi hizalansın. */
.baslik-eylemler form { margin: 0; }

/* 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);
}

.tamam-kutusu {
    margin-bottom: 1rem;
    padding: .625rem .875rem;
    border: 1px solid var(--renk-basari);
    border-radius: var(--kose-yaricap);
    background: var(--renk-basari-soluk);
    color: var(--renk-basari);
    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;
}

/* Çok seçimli öğrenci listesi (ödev formu + yarışma açma formu). */
.ogrenci-filtre-seridi {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.ogrenci-secim-listesi {
    display: grid;
    gap: .35rem;
    max-height: 300px;
    overflow-y: auto;
    padding: .75rem;
    border: 1px solid var(--renk-kenarlik);
    border-radius: var(--kose-yaricap);
    background: var(--renk-arkaplan);
}

.ogrenci-secim-satiri,
.toplu-sec {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
}

.toplu-sec {
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--renk-kenarlik);
    margin-bottom: .25rem;
}

.ogrenci-secim-satiri.gizli {
    display: none;
}

.secim-ozeti {
    margin-left: auto;
    font-weight: 400;
}

/* --- 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;
}

/* --- Avatar (DiceBear) ---------------------------------------------------
   Sunucu hiçbir görsel işlemez/depolamaz: <img> doğrudan DiceBear CDN'ine
   gidiyor, kayıtlı olan tek şey seed metni (Kullanici.AvatarSeed). */

.avatar-sutunu {
    width: 2.5rem;
}

.satir-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--renk-arkaplan);
    color: var(--renk-metin-soluk);
    overflow: hidden;
}

.satir-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Kullanıcı formundaki avatar seed girdisi + rastgele üret + canlı önizleme */
.avatar-form-satiri {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
}

.avatar-onizleme {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--renk-arkaplan);
    color: var(--renk-metin-soluk);
    font-size: 1.75rem;
    overflow: hidden;
}

.avatar-onizleme img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-form-alanlari {
    display: flex;
    flex: 1;
    align-items: flex-end;
    gap: .625rem;
}

.avatar-form-alanlari .form-alan {
    flex: 1;
    margin: 0;
}

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

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

/* Alıştırmalar / skor / geçmiş kartları: 4 sütun sabit. Böylece üst listedeki
   iki kart, grup içindeki dördüyle aynı boyutta ve aynı ızgara hücresinde durur. */
.modul-kart-izgara {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
    .modul-kart-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .modul-kart-izgara { grid-template-columns: 1fr; }
}

.izgara-sayfalama {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 1rem;
}

.izgara-sayfalama .sayfa-dugme {
    width: auto;
    height: auto;
    min-height: 2rem;
    padding: .25rem .75rem;
}

.baslik-geri {
    display: inline-flex;
    align-items: center;
    margin-right: .4rem;
    color: var(--renk-metin-soluk);
    text-decoration: none;
    font-size: .7em;
    vertical-align: middle;
}
.baslik-geri:hover {
    color: var(--renk-ana);
    text-decoration: none;
}

.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-sarmal:has(.islem-menu.acik) { z-index: 3; }
.kutu-ucnokta {
    position: absolute; right: .5rem; bottom: .5rem;
}
.kutu-ucnokta .islem-btn {
    width: 2rem; height: 2rem;
    border: none;
    background: none;
    color: #94a3b8;
    text-decoration: none;
}
.kutu-ucnokta .islem-btn:hover,
.kutu-ucnokta.islem-menu.acik .islem-btn {
    background: #eef2ff;
    color: #4f46e5;
    border-color: transparent;
}
.kutu-ucnokta .islem-liste {
    top: auto;
    bottom: calc(100% + 4px);
}

.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[data-renk="goz-takip"] {
    background: var(--renk-goz-takip-soluk);
    color: #0f766e;
}

.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;
    text-decoration: none;
}

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

.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;
}

/* Öğrenci + öğretmen/veli panosu · haftalık aktivite. Saf CSS çubuk:
   önceki SVG çizgi grafik sabit viewBox (700x160) yüzünden dar ekranda
   taşıyordu. Sütun flex; öğretmen/veli'de serbest+ödev aynı kutuda
   üst üste (column + justify-end). */
.ik-bar-grafik {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .5rem;
    height: 140px;
    padding: 0 .25rem;
}

.ik-bar-sutun {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    min-width: 0;
    height: 100%;
    gap: .375rem;
}

.ik-bar-deger {
    font-size: .6875rem;
    font-weight: 600;
    color: var(--renk-metin-soluk);
}

.ik-bar-kutu {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    max-width: 28px;
    flex: 1;
    background: var(--renk-arkaplan);
    border-radius: 6px;
    overflow: hidden;
}

.ik-bar-dolu {
    width: 100%;
    min-height: 3px;
    background: var(--renk-ana);
}

.ik-bar-kutu > .ik-bar-dolu:first-child {
    border-radius: 6px 6px 0 0;
}

.ik-bar-dolu-odev {
    background: var(--renk-sinav);
}

.ik-bar-etiket {
    font-size: .6875rem;
    color: var(--renk-metin-soluk);
}

/* Veli 30 günlük görünüm: 30 etiket/sayı sığmaz, yalnız çubuk. */
.ik-bar-grafik-yogun {
    gap: 2px;
}

.ik-bar-grafik-yogun .ik-bar-kutu {
    max-width: none;
}

@media (max-width: 480px) {
    .ik-bar-grafik { gap: .25rem; height: 110px; }
    .ik-bar-kutu { max-width: 20px; }
    .ik-bar-deger, .ik-bar-etiket { font-size: .625rem; }
    .ik-bar-grafik-yogun .ik-bar-kutu { max-width: none; }
}

/* --- 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); }
.modul-hizli-kart[data-renk="goz-takip"] { border-top-color: var(--renk-goz-takip); }

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

.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; }
.modul-hizli-kart[data-renk="goz-takip"] .mhk-ikon { background: var(--renk-goz-takip-soluk); color: #0f766e; }

.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); }
.modul-hizli-kart[data-renk="goz-takip"] .mhk-ilerleme-dolu { background: var(--renk-goz-takip); }

.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.kilitli {
    opacity: .55;
}

.seviye-kart.kilitli .btn-ana {
    pointer-events: none;
}

.seviye-kart.kilit-yeni-acildi {
    animation: kilit-parlama 1.4s ease;
    border-color: var(--renk-basari);
    box-shadow: 0 0 0 3px var(--renk-basari-soluk);
}

@keyframes kilit-parlama {
    0%   { transform: scale(.96); box-shadow: 0 0 0 0 var(--renk-basari-soluk); }
    40%  { transform: scale(1.03); }
    100% { transform: scale(1); }
}

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

.seviye-kart.aktif-tirmanis {
    border-color: var(--renk-ana);
}

.seviye-kart.tamamlandi .seviye-no::after {
    content: " ✓";
    font-size: 1rem;
    color: var(--renk-ana);
}

.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-baslat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    margin-top: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-kenarlik);
    border-radius: var(--kose-yaricap);
}

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

.oyun-baslat .baslat-cift {
    width: 100%;
    max-width: 32rem;
    flex-direction: row;
    margin-top: 0;
}

.oyun-baslat .baslat-btn {
    width: auto;
    flex: 1;
}

body:has(.modul-pano) {
    background: #faf8fc;
}

.icerik-alani:has(.modul-pano) {
    background: #faf8fc;
}

.modul-pano {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    margin-top: .25rem;
}

.modul-pano-ust,
.modul-pano-alt {
    display: grid;
    gap: .9rem;
    align-items: stretch;
}

.modul-pano-ust {
    grid-template-columns: 1fr 1.4fr;
}

.modul-pano-alt {
    grid-template-columns: 1.7fr .95fr;
}

.modul-oyun-kart,
.modul-istatistik-kart,
.modul-onceki-kart,
.modul-gelisim-kart {
    box-sizing: border-box;
    border-radius: 22px;
}

.modul-oyun-kart {
    position: relative;
    overflow: hidden;
    min-height: clamp(11rem, 17vh, 13.5rem);
    padding: 1.4rem 1.6rem 1.25rem;
    background-color: #FCE4CA;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 100%;
}

.modul-oyun-metin {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 52%;
}

.modul-oyun-kart h1 {
    margin: 0 0 .4rem;
    font-size: 1.3rem;
}

.modul-oyun-kart p {
    margin: 0;
    color: var(--renk-metin-soluk);
    font-size: .85rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.modul-basla-uyari {
    margin: auto 0 0;
    padding: .55rem .7rem;
    background: rgba(255, 255, 255, .88);
    border-radius: var(--kose-yaricap);
}

.modul-basla-dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: max-content;
    margin-top: auto;
    padding: .7rem 1.3rem;
    border: none;
    border-radius: 13px;
    background: var(--renk-ana);
    color: #fff;
    font-family: var(--yazi-tipi-oyunsu);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
}

.modul-basla-dugme:hover,
.modul-basla-dugme:focus-visible {
    background: var(--renk-ana-koyu);
    color: #fff;
    text-decoration: none;
}

.modul-basla-dugme:focus-visible {
    outline: 2px solid var(--renk-ana-koyu);
    outline-offset: 2px;
}

.modul-oyun-kart .baslat-cift {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-top: auto;
    width: 100%;
    max-width: 16rem;
}

.modul-oyun-kart .baslat-btn {
    width: 100%;
    border: none;
    border-radius: 13px;
    padding: .7rem 1rem;
}

.modul-oyun-kart .baslat-abakus {
    background: var(--renk-ana);
    color: #fff;
}

.modul-oyun-kart .baslat-mental {
    background: var(--renk-sinav);
    color: #fff;
}

.modul-oyun-kart .baslat-btn:hover,
.modul-oyun-kart .baslat-btn:focus-visible {
    color: #fff;
    text-decoration: none;
    filter: brightness(1.06);
}

.modul-istatistik-kart,
.modul-onceki-kart {
    padding: 1.25rem 1.5rem;
    background: var(--renk-yuzey);
    border: 1px solid #ece8f2;
}

.modul-istatistik-kart {
    display: flex;
    flex-direction: column;
}

.modul-istatistik-kart h2,
.modul-onceki-kart h2,
.modul-gelisim-kart h2 {
    margin: 0 0 .9rem;
    font-size: 1.1rem;
}

.modul-istatistikler {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .85rem;
    /* Kart, resimli kart ile aynı yüksekliğe gerilebilir (align-items:
       stretch); ama içindeki 4 kutu buna göre uzamasın — kutular kendi
       içeriğine göre kalsın, aradaki boşluk üstte/altta eşit dağılsın. */
    margin-top: auto;
    margin-bottom: auto;
}

.modul-istatistik {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.15rem .5rem;
    border: 1px solid #eeeaf3;
    border-radius: 17px;
    text-align: center;
    overflow: hidden;
}

.modul-istatistik-ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0 auto .75rem;
    border-radius: 50%;
    background: var(--renk-ana-soluk);
    color: var(--renk-ana);
    font-size: 1.1rem;
}

.modul-istatistik-etiket {
    display: block;
    color: var(--renk-metin-soluk);
    font-size: var(--yazi-boyut-kucuk);
}

.modul-istatistik-deger {
    display: block;
    margin-top: .4rem;
    font-family: var(--yazi-tipi-oyunsu);
    font-size: clamp(1.05rem, 1.7vw, 1.4rem);
    font-weight: 700;
    white-space: nowrap;
}

.modul-onceki-tablo {
    --onceki-kolon: 1.5fr .7fr .7fr .7fr .85fr;
}

.modul-onceki-tablo.tip-var {
    --onceki-kolon: 1.4fr .6fr .7fr .55fr .65fr .8fr;
}

.modul-onceki-baslik,
.modul-onceki-satir {
    display: grid;
    grid-template-columns: var(--onceki-kolon);
    align-items: center;
    gap: .5rem;
}

.modul-onceki-baslik {
    padding: 1rem 1.05rem;
    border-radius: 14px;
    background: #faf8fc;
    color: var(--renk-metin-soluk);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.modul-onceki-satir {
    margin-top: .4rem;
    padding: .7rem 1.05rem;
    border: 1px solid #eeeaf3;
    border-radius: 14px;
    font-size: .87rem;
}

/* Sabit yükseklik: veri 0/1/2/3 satır olsa da kart boyu değişmesin.
   Kısa ekranlarda biraz daha az yer kaplasın diye vh'a göre de kısılabilir. */
.modul-onceki-satirlar {
    position: relative;
    min-height: clamp(7rem, 13vh, 8.3rem);
}

.modul-onceki-bos-ic {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    text-align: center;
}

.modul-onceki-puan {
    color: var(--renk-ana);
    font-weight: 700;
}

.modul-onceki-sayfalama {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    height: 2.5rem;
    margin-top: .6rem;
}

.onceki-sayfa-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #eeeaf3;
    border-radius: 50%;
    background: #fff;
    color: var(--renk-metin);
    cursor: pointer;
}

.onceki-sayfa-btn:hover:not(:disabled) {
    border-color: var(--renk-ana);
    color: var(--renk-ana);
}

.onceki-sayfa-btn:disabled {
    color: var(--renk-metin-soluk);
    opacity: .45;
    cursor: default;
}

.onceki-sayfa-durum {
    min-width: 3.5rem;
    color: var(--renk-metin-soluk);
    font-size: .82rem;
    text-align: center;
}

.modul-gecmis-hepsi {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: max-content;
    margin: .6rem auto 0;
    padding: .6rem 1.1rem;
    border: 1px solid #e3dcf2;
    border-radius: 12px;
    background: #fff;
    color: var(--renk-ana);
    font-weight: 600;
}

.modul-gecmis-hepsi:hover {
    background: var(--renk-ana-soluk);
    color: var(--renk-ana-koyu);
    text-decoration: none;
}

.modul-gelisim-kart {
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.5rem;
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-kenarlik);
}

.modul-gelisim-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.modul-gelisim-baslik h2 {
    margin: 0;
}

.modul-gelisim-etiket {
    padding: .35rem .7rem;
    border: 1px solid #e6dff1;
    border-radius: 9px;
    background: #fff;
    font-size: var(--yazi-boyut-kucuk);
}

.modul-gelisim-cizim {
    margin: .85rem 0;
}

.modul-gelisim-bos {
    margin: 2rem 0 1rem;
    text-align: center;
}

.modul-gelisim-not {
    margin: auto 0 0;
    padding: .75rem 1rem;
    border-radius: 14px;
    background: #eee2ff;
    color: var(--renk-metin);
    font-size: .82rem;
    line-height: 1.5;
}

.modul-gelisim-not i {
    margin-right: .35rem;
    color: var(--renk-ana);
}

@media (max-width: 1100px) {
    .modul-pano-ust,
    .modul-pano-alt {
        grid-template-columns: 1fr;
    }

    .modul-oyun-metin {
        max-width: 70%;
    }

    .modul-istatistikler {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 800px) {
    .modul-oyun-kart {
        background-position: right -2rem center;
    }

    .modul-oyun-metin {
        max-width: 100%;
    }

    .modul-onceki-baslik {
        display: none;
    }

    .modul-onceki-satir,
    .modul-onceki-tablo.tip-var .modul-onceki-satir {
        grid-template-columns: 1fr 1fr;
        gap: .55rem .75rem;
    }
}

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

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

/* Sabit HUD: kart yüksekliği kilitli, alt üç kutu yerinde kalır. */
.oyun-alani.oyun-alani-oturum {
    box-sizing: border-box;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 1rem 1.1rem .85rem;
    height: calc(100vh - 11.25rem);
    min-height: 22rem;
    margin-top: .5rem;
    margin-bottom: 1rem;
}

.oyun-alani-oturum .oyun-sahne {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    overflow: auto;
}

.oyun-alani-oturum .oyun-sahne > .oyun-ekran:not(.gizli) {
    width: 100%;
    min-height: 100%;
    justify-content: center;
}

.oyun-bilgi {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: .75rem;
    width: 100%;
    flex-shrink: 0;
    margin-top: 1rem;
}

.oyun-bilgi-kutu {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 7.5rem;
    padding: .65rem .75rem;
    border: 1px solid var(--renk-kenarlik);
    border-radius: var(--kose-yaricap);
    background: var(--renk-arkaplan);
}

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

.oyun-bilgi-deger {
    font-family: var(--yazi-tipi-oyunsu);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    word-break: break-word;
}

.oyun-bilgi-tur .tur-kutulari {
    display: grid;
    grid-template-columns: repeat(5, 1.55rem);
    grid-template-rows: repeat(2, 1.55rem);
    gap: .3rem;
    justify-content: center;
    min-height: calc(2 * 1.55rem + .3rem);
}

.oyun-bilgi-tur .tur-kutu {
    width: 1.55rem;
    height: 1.55rem;
    font-size: .85rem;
}

.oyun-bilgi-tur .can-gostergesi {
    margin: .15rem 0 0;
    min-height: .9rem;
}

.can-gostergesi {
    display: flex;
    justify-content: center;
    gap: .45rem;
    margin: 0;
    min-height: .9rem;
}

.can {
    box-sizing: border-box;
    width: .9rem;
    height: .9rem;
    border-radius: 50%;
    border: 2px solid var(--renk-kenarlik);
    background: var(--renk-yuzey);
}

.can-yanik {
    border-color: var(--renk-hata);
    background: var(--renk-hata);
}

.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;
}

.tur-kutulari {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem;
    margin: 0;
}

.tur-kutulari.gizli {
    display: none;
}

.tur-kutu {
    box-sizing: border-box;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--renk-kenarlik);
    border-radius: .35rem;
    font-family: var(--yazi-tipi-oyunsu);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    background: var(--renk-yuzey);
    color: transparent;
}

.tur-kutu.dogru {
    border-color: var(--renk-basari);
    background: var(--renk-basari-soluk);
    color: var(--renk-basari);
}

.tur-kutu-emoji {
    width: 1.15rem;
    height: 1.15rem;
}

.tur-kutu.yanlis {
    border-color: var(--renk-hata);
    background: var(--renk-hata-soluk);
    color: var(--renk-hata);
}

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

.seviye-kart .tur-kutulari {
    justify-content: flex-start;
    margin-top: .35rem;
}

.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-rozet-emoji {
    width: 4rem;
    height: 4rem;
}

.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);
}

.oturum-ozeti {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .4rem 1.5rem;
    margin: 0;
    width: 100%;
    max-width: 22rem;
    text-align: left;
}

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

.oturum-ozeti dd {
    margin: 0;
    font-weight: 700;
    text-align: right;
}

/* --- 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;
    overflow: hidden;
}

.ogrenci-sec-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.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 profili ---------------------------------------------------- */
/* Öğretmen bir öğrenci adına oynatırken profilin altına yapışır. */
.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: inherit;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.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);
    }
}

/* 2 sütun bu genişlikte de sıkışıyor — "Bu ay ödevler" gibi başlıklar
   2 satıra bölünüyor, "yapılan"/"verilen" etiketleri birbirine yapışıyor.
   Tek sütuna düşünce her kart kendi genişliğinde rahat nefes alıyor. */
@media (max-width: 420px) {
    .eg-ust-izgara {
        grid-template-columns: 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 {
    /* Grid/flex öğeleri varsayılan min-width:auto ile içeriğinin doğal
       genişliğinden küçülmüyor — dar ekranda "Bu ay ödevler" gibi metinler
       kartı ızgara sütunundan taşırıyordu. 0 ile metin normal şekilde
       satır kırabiliyor. */
    min-width: 0;
    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; }
.eg-aktivite-ikon[data-renk="ayni-farkli"] { background: var(--renk-ayni-farkli-soluk); color: #1d4ed8; }
.eg-aktivite-ikon[data-renk="yanan-kareler"] { background: var(--renk-yanan-kareler-soluk); color: #a21caf; }
.eg-aktivite-ikon[data-renk="goz-takip"] { background: var(--renk-goz-takip-soluk); color: #0f766e; }

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


/* --- Öğretmen panosu (Ana sayfa · Ogretmen rolü) -------------------------
   Öğrenci panosunun (eg-*) görsel diliyle aynı: beyaz yüzey, yumuşak gölge,
   soluk metin. Ayrı önek kullanmamızın sebebi ızgara yapısının farklı
   olması — burada iki eşit sütun var, orada bento. */

.op-pano-izgara {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
    .op-pano-izgara {
        grid-template-columns: 1fr;
    }
}

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

.op-pano-ust {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: .75rem;
}

.op-pano-ust .op-pano-baslik {
    margin-bottom: 0;
}

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

.op-pano-link {
    font-size: var(--yazi-boyut-kucuk);
    color: var(--renk-ana);
}

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

.op-satir-listesi {
    display: flex;
    flex-direction: column;
}

.op-satir {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto auto;
    align-items: center;
    gap: .5rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--renk-kenarlik);
    font-size: var(--yazi-boyut-normal);
}

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

.op-satir-baglanti {
    color: var(--renk-metin);
}

.op-satir-baglanti:hover {
    color: var(--renk-metin);
    text-decoration: none;
    background: var(--renk-arkaplan);
}

/* Uzun öğrenci/ödev adları sütunu taşırmasın; ızgara sabit kalsın. */
.op-satir-ad,
.op-satir-modul {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.op-satir-ad {
    font-weight: 600;
}

.op-satir-modul,
.op-satir-zaman,
.op-satir-tarih {
    color: var(--renk-metin-soluk);
    font-size: var(--yazi-boyut-kucuk);
}

.op-satir-puan {
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Her satır kendi ızgarası olduğu için auto sütunlar kayıyordu:
   "10" ile "800" farklı genişlikte, zaman metni de ("dün" / "6 saat önce"). */
.op-satir-islem {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 3.5rem 8rem;
}

.op-satir-islem .op-satir-zaman {
    text-align: right;
    white-space: nowrap;
}

.op-satir-yuzde {
    font-size: var(--yazi-boyut-kucuk);
    font-weight: 600;
    text-align: right;
    min-width: 2.75rem;
}

.op-rozet {
    display: inline-block;
    padding: .0625rem .375rem;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 600;
}

.op-rozet-odev {
    background: var(--renk-sinav-soluk);
    color: var(--renk-sinav);
}

.op-ilerleme-cubuk {
    display: block;
    height: 6px;
    min-width: 60px;
    border-radius: 999px;
    background: var(--renk-kenarlik);
    overflow: hidden;
}

.op-ilerleme-dolu {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--renk-ana);
}

.op-grafik-kart {
    background: var(--renk-yuzey);
    border-radius: var(--kose-yaricap);
    padding: 1.25rem;
    box-shadow: var(--golge);
    margin-bottom: 1.5rem;
}

.op-grafik-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .75rem;
}

.op-legend {
    display: flex;
    gap: .875rem;
    font-size: var(--yazi-boyut-kucuk);
    color: var(--renk-metin-soluk);
}

.op-legend-oge {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}

.op-legend-cizgi {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.op-legend-serbest {
    background: var(--renk-ana);
}

.op-legend-odev {
    background: var(--renk-sinav);
}

/* Modül kartındaki haftalık sayım rozeti — öğrenci panosundaki puan
   rozetinin öğretmen karşılığı (puan yerine kaç kez oynandığı). */
.op-hafta-rozeti {
    display: inline-flex;
    align-items: baseline;
    gap: .25rem;
    padding: .1875rem .5rem;
    border-radius: 999px;
    background: var(--renk-arkaplan);
    color: var(--renk-metin-soluk);
    font-weight: 600;
    font-size: var(--yazi-boyut-kucuk);
}

.op-hafta-rozeti-etiket {
    font-weight: 400;
    font-size: .6875rem;
}

/* --- Öğretmen panosu · grafik + takvim satırı -----------------------------
   Öğrenci panosundaki .eg-izgara ile aynı 2fr/1fr oranı, sağdaki dar
   sütunda takvim. */

.op-ust-izgara {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
    .op-ust-izgara {
        grid-template-columns: 1fr;
    }
}

/* Kart artık ızgaranın hücresi; alt boşluğu ızgara gap'i veriyor. */
.op-ust-izgara > .op-grafik-kart {
    margin-bottom: 0;
}

/* --- Haftalık yarışma + seviye kutlaması -------------------------------- */

.etkinlik-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    padding: .875rem 1.125rem;
    border: 1px solid var(--renk-ana);
    border-radius: var(--kose-yaricap);
    background: var(--renk-ana-soluk);
}

.etkinlik-banner p {
    margin: 0;
}

.etkinlik-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.25rem;
}

@media (max-width: 700px) {
    .etkinlik-form {
        grid-template-columns: 1fr;
    }
}

.tablo tr.benim-satirim td {
    background: var(--renk-ana-soluk);
    font-weight: 600;
}

.sira-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    font-weight: 700;
}

.sira-no.sira-1 { background: #fef3c7; color: #92400e; }
.sira-no.sira-2 { background: #e5e7eb; color: #374151; }
.sira-no.sira-3 { background: #ffedd5; color: #9a3412; }

.kilit-acilisi {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin: .75rem 0 0;
    padding: .625rem .875rem;
    border-radius: var(--kose-yaricap);
    background: var(--renk-basari-soluk);
    color: var(--renk-basari);
    font-weight: 600;
    animation: kilit-ac 0.7s ease;
}

@keyframes kilit-ac {
    0%   { transform: scale(.85) rotate(-8deg); opacity: 0; }
    60%  { transform: scale(1.06) rotate(2deg); }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

.kutlama-yagmur {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 80;
    overflow: hidden;
}

.kutlama-parcacik {
    position: absolute;
    top: -12px;
    width: 8px;
    height: 14px;
    border-radius: 2px;
    animation-name: kutlama-dus;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes kutlama-dus {
    to {
        transform: translateY(110vh) rotate(540deg);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .seviye-kart.kilit-yeni-acildi,
    .kilit-acilisi,
    .kutlama-parcacik {
        animation: none;
    }
}

/* Havai fişek: oturum bitince kutlama-yağmurundan daha şaşaalı, ~3.5-4 sn
   süren tek seferlik gösteri — üç katman: patlama (parıltı + dışa saçılan
   parçacıklar), yukarıdan düşen konfeti, alttan fırlayıp düşen emoji
   "roketleri" (DiceBear fun-emoji, seed rastgele). JS sadece konum/renk/
   zamanlama atıyor, hareketin kendisi CSS custom property'lerle (--dx/--dy,
   --ex/--er) yönlendiriliyor. */
.havai-fisek-katman {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 85;
    overflow: hidden;
}

.havai-fisek-patlama {
    position: absolute;
    width: 0;
    height: 0;
}

.havai-fisek-parlama {
    position: absolute;
    top: -100px;
    left: -100px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--hf-renk, #fff) 0%, transparent 70%);
    animation: havai-fisek-parlama-anim .6s ease-out forwards;
}

.havai-fisek-parcacik {
    position: absolute;
    top: 0;
    left: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--hf-renk, #fff);
    animation: havai-fisek-sacil 1.5s cubic-bezier(.25, .65, .35, 1) forwards;
}

.havai-fisek-konfeti {
    position: absolute;
    top: -12px;
    width: 10px;
    height: 16px;
    border-radius: 2px;
    animation-name: havai-fisek-konfeti-dus;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.havai-fisek-emoji-roket {
    position: absolute;
    bottom: -40px;
    width: 42px;
    height: 42px;
    animation-name: havai-fisek-emoji-firlat;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

@keyframes havai-fisek-parlama-anim {
    0%   { transform: scale(0); opacity: 1; }
    100% { transform: scale(1); opacity: 0; }
}

@keyframes havai-fisek-sacil {
    0%   { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; }
}

@keyframes havai-fisek-konfeti-dus {
    to {
        transform: translateY(110vh) rotate(680deg);
        opacity: 0;
    }
}

@keyframes havai-fisek-emoji-firlat {
    0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    45%  { transform: translate(var(--ex, 0px), -60vh) rotate(var(--er, 180deg)); opacity: 1; }
    100% { transform: translate(calc(var(--ex, 0px) * 1.6), 12vh) rotate(calc(var(--er, 180deg) * 1.6)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .havai-fisek-parlama,
    .havai-fisek-parcacik,
    .havai-fisek-konfeti,
    .havai-fisek-emoji-roket {
        animation: none;
        display: none;
    }
}

/* Bildirim paneli — Bootstrap dropdown yerine elle açılıp kapanıyor: panel
   içindeki bağlantılara tıklanınca kapanma davranışı farklı. */
.bildirim-alani {
    position: relative;
}

.bildirim-rozet {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--renk-hata);
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}

.bildirim-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1000;
    width: min(360px, calc(100vw - 2rem));
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-kenarlik);
    border-radius: var(--kose-yaricap);
    box-shadow: var(--golge-yuksek);
    overflow: hidden;
}

.bildirim-panel-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem .85rem;
    border-bottom: 1px solid var(--renk-kenarlik);
    font-weight: 700;
}

.bildirim-hepsi-okundu {
    border: 0;
    background: none;
    color: var(--renk-ana);
    font-size: var(--yazi-boyut-kucuk);
    cursor: pointer;
}

.bildirim-liste {
    max-height: 360px;
    overflow-y: auto;
}

.bildirim-satir {
    display: flex;
    gap: .6rem;
    padding: .65rem .85rem;
    border-bottom: 1px solid var(--renk-kenarlik);
    color: var(--renk-metin);
    text-decoration: none;
}

.bildirim-satir:hover {
    background: var(--renk-arkaplan);
    /* Satır bir <a>; genel a:hover kuralı olmasaydı alt çizgi gelmezdi. */
    text-decoration: none;
}

.bildirim-satir.okunmamis {
    border-left: 3px solid var(--renk-ana);
}

.bildirim-satir-ikon {
    color: var(--renk-ana);
}

.bildirim-satir-govde {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.bildirim-satir-zaman,
.bildirim-yukleniyor,
.bildirim-bos {
    font-size: var(--yazi-boyut-kucuk);
    color: var(--renk-metin-soluk);
}

.bildirim-yukleniyor,
.bildirim-bos {
    padding: 1rem .85rem;
}

.bildirim-panel-alt {
    display: block;
    padding: .6rem;
    text-align: center;
    border-top: 1px solid var(--renk-kenarlik);
    font-size: var(--yazi-boyut-kucuk);
}

.bildirim-sayfa-liste {
    padding: 0;
}

.bildirim-sayfa-liste .bildirim-satir:last-child {
    border-bottom: none;
}

/* /Bildirim sayfasının sayfa gezinmesi. Modül panosundaki sayfalama kendi
   kartına özel ölçülerde; burada ortak buton görünümü yeniden kuruluyor. */
.bildirim-sayfalama {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin-top: 1rem;
}

.bildirim-sayfalama .sayfa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--renk-kenarlik);
    border-radius: var(--kose-yaricap);
    background: var(--renk-yuzey);
    color: var(--renk-ana);
}

.bildirim-sayfalama .sayfa-btn:hover {
    border-color: var(--renk-ana);
    text-decoration: none;
}

.bildirim-sayfalama .sayfa-btn.pasif {
    color: var(--renk-metin-soluk);
    opacity: .5;
}

.bildirim-sayfalama .sayfa-durum {
    font-size: var(--yazi-boyut-kucuk);
    color: var(--renk-metin-soluk);
}