/*
   site.css — giriş yapıldıktan sonraki sayfaların kabuğu ve ana sayfa.

   Renkler mobil uygulamanın paletinden (app/lib/core/theme/
   app_theme_colors.dart ve app_theme.dart): aynı lacivert, aynı mavi, aynı
   yeşil/kehribar aşama renkleri. Ölçüler birebir kopyalanmadı — dokunmatik
   için seçilmiş yükseklikler farede fazla iri, geniş ekranda tek sütun
   fazla dar kalıyor.

   KOYU TEMA VAR: uygulamada da var ve aynı değerleri kullanıyor.

   ÜÇ DURUM: Ayarlar'daki tema seçimi <html data-tema="acik|koyu"> yazıyor;
   "sistem" seçiliyken öznitelik HİÇ olmuyor ve karar
   `prefers-color-scheme`e kalıyor. Bu yüzden koyu değerler İKİ yerde
   tanımlı — biri sistem tercihi için (açık temayı SEÇMİŞ kullanıcıyı
   dışarıda bırakarak), biri açık seçim için. Renkler yalnızca medya
   sorgusunun içinde tanımlansaydı, koyu temayı elle seçen kullanıcı açık
   temada kalırdı.

   Mobilde de tema ayarlanabilir bir şey (`AppSettings.themeMode`); web'in
   yalnızca işletim sistemine uyması eksikti.
*/

:root {
    --lacivert: #22315F;
    --mavi: #4058D2;

    --zemin: #F7F8FB;
    --yuzey: #FFFFFF;
    --yuzey-soluk: #F2F4F8;
    --kenar: #E1E5ED;
    --yazi: #172038;
    --soluk: #60697A;
    --silik: #747C90;
    --golge: rgba(34, 49, 95, .07);
    --ust-yuzey: rgba(255, 255, 255, .94);
    --hero-yuzey: #EEF3FF;
    --hero-yazi: #172038;
    --hero-soluk: #66708A;

    /* Aşama renkleri — TEK İŞ İÇİN. Kehribar başka hiçbir yerde
       kullanılmıyor ki gördüğü yerde "burası bekliyor" demek olsun. */
    --tamam: #0F8F55;
    --bekleyen: #C27803;
    --bekleyen-halka: #FDF1D8;
    --bos: #A9B0C4;
    --hata: #B42318;
    --yuzey-ikincil: var(--yuzey-soluk);
}

/* Sistem tercihi — açık temayı AÇIKÇA seçmiş kullanıcıya uygulanmaz. */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="acik"]) {
        color-scheme: dark;
        --lacivert: #111A2D;
        --mavi: #7EA3E2;

        --zemin: #080D18;
        --yuzey: #121C30;
        --yuzey-soluk: #1B2942;
        --kenar: #34425D;
        --yazi: #F4F8FF;
        --soluk: #B9C5DA;
        --silik: #909DB5;
        --golge: rgba(0, 6, 28, .46);
        --ust-yuzey: rgba(9, 15, 28, .72);
        --hero-yuzey: #141F35;
        --hero-yazi: #F7FAFF;
        --hero-soluk: #B5C3DA;

        --tamam: #5FD79C;
        --bekleyen: #EFB247;
        --bekleyen-halka: #33260E;
        --bos: #5A657F;
        --hata: #FF8A80;
    }
}

/* Elle seçilen koyu tema — sistem ne derse desin. */
:root[data-tema="koyu"] {
    color-scheme: dark;
    --lacivert: #111A2D;
    --mavi: #7EA3E2;

    --zemin: #080D18;
    --yuzey: #121C30;
    --yuzey-soluk: #1B2942;
    --kenar: #34425D;
    --yazi: #F4F8FF;
    --soluk: #B9C5DA;
    --silik: #909DB5;
    --golge: rgba(0, 6, 28, .46);
    --ust-yuzey: rgba(9, 15, 28, .72);
    --hero-yuzey: #141F35;
    --hero-yazi: #F7FAFF;
    --hero-soluk: #B5C3DA;

    --tamam: #5FD79C;
    --bekleyen: #EFB247;
    --bekleyen-halka: #33260E;
    --bos: #5A657F;
    --hata: #FF8A80;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    background: var(--zemin);
    color: var(--yazi);
    font-family: "Outfit", sans-serif;
    font-size: 17px;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
button { color: inherit; }

/* Tarayıcı otomatik doldurması koyu temada alanları açık maviye
   çevirmesin; bütün form alanları seçili temanın yüzeyini korur. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--yazi);
    caret-color: var(--yazi);
    -webkit-box-shadow: 0 0 0 1000px var(--yuzey) inset;
    box-shadow: 0 0 0 1000px var(--yuzey) inset;
    transition: background-color 99999s ease-out 0s;
}

a { color: inherit; }

.simge-deposu { position: absolute; }

/* Klavyeyle gezene menüyü atlama kapısı; fareye görünmüyor. */
.atla {
    position: absolute;
    left: -9999px;
    z-index: 20;
    padding: 10px 16px;
    border-radius: 0 0 12px 0;
    background: var(--mavi);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.atla:focus { left: 0; top: 0; }

/* ── Üst çubuk ───────────────────────────────────────────────────── */
.ust-cubuk {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 68px;
    padding: 10px clamp(16px, 3vw, 42px);
    border-bottom: 1px solid var(--kenar);
    background: var(--ust-yuzey);
    color: var(--yazi);
    box-shadow: 0 1px 12px rgba(34, 49, 95, .04);
    backdrop-filter: blur(14px);
}

.ust-cubuk .marka {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.ust-cubuk .marka-yazisi { width: 94px; height: auto; }
.marka-yazisi-koyu { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="acik"]) .marka-yazisi-acik { display: none; }
    :root:not([data-tema="acik"]) .marka-yazisi-koyu { display: block; }
}
:root[data-tema="koyu"] .marka-yazisi-acik { display: none; }
:root[data-tema="koyu"] .marka-yazisi-koyu { display: block; }

.hesap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    font-size: 14px;
}

.hesap form { margin: 0; }

.avatar {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.avatar-harf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--mavi) 12%, var(--yuzey));
    color: var(--mavi);
    font-size: 14px;
    font-weight: 800;
}

.hesap-yazi {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.hesap-yazi .ad {
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hesap-yazi .eposta {
    overflow: hidden;
    color: var(--silik);
    font-size: 11.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cikis {
    padding: 7px 15px;
    border: 1px solid var(--kenar);
    border-radius: 999px;
    background: transparent;
    color: var(--yazi);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.cikis:hover { border-color: color-mix(in srgb, var(--mavi) 38%, var(--kenar)); background: var(--yuzey-soluk); }

/* ── Kabuk: yan menü + içerik ────────────────────────────────────── */
.kabuk {
    display: flex;
    align-items: flex-start;
    gap: clamp(24px, 3vw, 44px);
    max-width: 1360px;
    margin: 0 auto;
    padding: 34px clamp(18px, 3vw, 42px) 72px;
}

.icerik {
    flex: 1;
    /* min-width:0 OLMAZSA uzun sınav adı esnek kutuyu şişirip yan menüyü
       ekran dışına itiyor. */
    min-width: 0;
}

/* ── Menü ────────────────────────────────────────────────────────── */
.menu ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 13px;
    color: var(--soluk);
    font-weight: 600;
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}

.menu svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
}

.menu a:hover { background: var(--yuzey-soluk); color: var(--yazi); }

.menu a.acik { color: var(--mavi); font-weight: 800; }

/* Yan menü — geniş ekran. */
.yan-menu {
    position: sticky;
    top: 92px;
    flex: none;
    width: 214px;
    padding: 6px;
    border: 1px solid var(--kenar);
    border-radius: 14px;
    background: var(--yuzey);
    box-shadow: none;
}

.yan-menu ul { flex-direction: column; gap: 2px; }

.yan-menu a { padding: 11px 13px; font-size: 14.5px; }

.yan-menu a.acik { background: color-mix(in srgb, var(--mavi) 12%, transparent); }

/* Alt çubuk — dar ekran. Uygulamadaki YÜZEN çubuğun aynısı: kartlarla
   aynı dili konuşuyor, ekranın kenarına yapışmıyor. */
.alt-menu {
    display: none;
    position: fixed;
    right: 10px;
    bottom: 10px;
    left: 10px;
    z-index: 10;
    padding: 8px 6px;
    border: 1px solid var(--kenar);
    border-radius: 22px;
    background: var(--yuzey);
    box-shadow: 0 12px 32px rgba(34, 49, 95, .16);
}

.alt-menu ul { justify-content: space-between; }

.alt-menu li { flex: 1; }

.alt-menu a {
    flex-direction: column;
    gap: 4px;
    padding: 4px 2px;
    font-size: 11px;
    text-align: center;
}

.alt-menu a:hover { background: transparent; }

/* Seçili sekme ikonun ARKASINDAKİ hapla belli oluyor, çubuğun tamamını
   boyamadan. */
.alt-menu .menu-simge {
    display: inline-flex;
    padding: 5px 17px;
    border-radius: 15px;
}

.alt-menu a.acik .menu-simge {
    background: color-mix(in srgb, var(--mavi) 14%, transparent);
}

@media (max-width: 900px) {
    .yan-menu { display: none; }
    .alt-menu { display: block; }
    .kabuk { padding: 24px 18px 112px; }
    /* Telefonda e-posta satırı adın altında yer kaplıyor; kim olduğunu
       ad zaten söylüyor. */
    .hesap-yazi .eposta { display: none; }
}

@media (max-width: 560px) {
    .hesap-yazi { display: none; }
}

/* ── Ana sayfa: selamlama ────────────────────────────────────────── */
.karsilama {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 128px;
    min-height: 120px;
    padding: 30px 40px;
    border: 1px solid color-mix(in srgb, var(--mavi) 14%, var(--kenar));
    border-radius: 8px;
    background: linear-gradient(118deg, var(--hero-yuzey), color-mix(in srgb, var(--hero-yuzey) 70%, var(--yuzey)));
    color: var(--hero-yazi);
    overflow: hidden;
}

.karsilama-marka { flex: none; width: 64px; height: 64px; }

.karsilama h1 {
    margin: 0;
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 800;
    letter-spacing: -.3px;
}

.karsilama .marka-etiket {
    margin: 3px 0 0;
    color: var(--hero-soluk);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
}

/* ── Ana sayfa: iki durak ────────────────────────────────────────── */
/* Kartlar lacivertin alt kenarına BİNİYOR — uygulamadaki yerleşimin
   aynısı; iki bölüm arasında sınır değil, geçiş var. */
.duraklar {
    display: grid;
    position: relative;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin: 22px 0 0;
}

.durak {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 86px;
    padding: 18px;
    border: 1px solid var(--kenar);
    border-radius: 8px;
    background: var(--yuzey);
    box-shadow: none;
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease;
}

.durak:hover {
    border-color: color-mix(in srgb, var(--mavi) 40%, var(--kenar));
    transform: translateY(-1px);
    box-shadow: 0 12px 28px var(--golge);
}

.durak-no {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--mavi) 12%, transparent);
    color: var(--mavi);
    font-size: 13px;
    font-weight: 900;
}

.durak-yazi {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.durak-yazi strong {
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -.2px;
}

.durak-yazi small {
    margin-top: 1px;
    overflow: hidden;
    color: var(--soluk);
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.durak-ok {
    flex: none;
    width: 20px;
    height: 20px;
    fill: var(--kenar);
}

/* ── Ana sayfa: bölüm başlığı ────────────────────────────────────── */
.bolum-basligi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 44px 0 16px;
}

.bolum-basligi h2 {
    margin: 0;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 900;
    letter-spacing: -.2px;
}

.yeni-sinav {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mavi) 12%, transparent);
    color: var(--mavi);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.yeni-sinav:hover { background: color-mix(in srgb, var(--mavi) 20%, transparent); }

.yeni-sinav svg { width: 17px; height: 17px; fill: currentColor; }

/* ── Ana sayfa: sınav kartları ───────────────────────────────────── */
.sinavlar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
    gap: 16px;
}

.sinav-karti {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid var(--kenar);
    border-radius: 8px;
    background: var(--yuzey);
}

/* Okumaya hazır sınav çerçevesinden belli oluyor: sayfadaki tek dolu
   düğme de onun içinde. */
.sinav-karti.one-cikan {
    border-color: color-mix(in srgb, var(--mavi) 45%, transparent);
}

.sinav-karti header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.sinav-karti h3 {
    margin: 0;
    overflow: hidden;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.2px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sinav-karti time {
    flex: none;
    color: var(--soluk);
    font-size: 11.5px;
}

.alt-bilgi {
    margin: 4px 0 0;
    overflow: hidden;
    color: var(--soluk);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Aşama şeridi: Optik → Anahtar → Okuma ───────────────────────── */
.asama-seridi {
    display: flex;
    align-items: center;
    margin: 13px 0;
}

.asama {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
}

.asama-nokta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
}

.asama-nokta svg { width: 9px; height: 9px; fill: #fff; }

.asama.tamam { color: var(--tamam); }
.asama.tamam .asama-nokta { background: var(--tamam); }

.asama.sirada { color: var(--bekleyen); }

/* Sıradaki adımın halkası: gözün ilk gittiği yer olsun diye. */
.asama.sirada .asama-nokta { box-shadow: 0 0 0 3px var(--bekleyen-halka); }

.asama.bekleyen { color: var(--bos); }

.asama-cizgi {
    flex: 1;
    height: 1.5px;
    margin: 0 8px;
    border-radius: 1px;
    background: var(--kenar);
}

.asama-cizgi.tamam { background: color-mix(in srgb, var(--tamam) 55%, transparent); }

/* ── Düğmeler ────────────────────────────────────────────────────── */
.dugme-dolu,
.dugme-soluk {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: auto;
    padding: 11px 16px;
    border: 0;
    border-radius: 12px;
    box-shadow: none;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.dugme-dolu svg,
.dugme-soluk svg { width: 16px; height: 16px; fill: currentColor; }

.dugme-dolu {
    background: var(--mavi);
    color: #fff;
    cursor: pointer;
    transition: background-color .14s ease, filter .14s ease, transform .08s ease;
}
.dugme-dolu:hover:not(:disabled) { filter: brightness(1.14) saturate(1.08); }
.dugme-dolu:active:not(:disabled) { filter: brightness(.86); transform: scale(.97); }
.dugme-dolu:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--mavi) 38%, transparent);
    outline-offset: 3px;
}

.dugme-soluk {
    background: color-mix(in srgb, var(--mavi) 10%, transparent);
    color: var(--mavi);
}

.dugme-soluk:hover { background: color-mix(in srgb, var(--mavi) 18%, transparent); }

.dugme-cizgili {
    appearance: none;
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    border: 1px solid color-mix(in srgb, var(--mavi) 45%, transparent);
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: var(--mavi);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease, transform .08s ease;
}

.dugme-cizgili:hover:not(:disabled) {
    border-color: var(--mavi);
    background: color-mix(in srgb, var(--mavi) 18%, transparent);
}
.dugme-cizgili:active:not(:disabled) { transform: scale(.97); }
.dugme-cizgili:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--mavi) 30%, transparent);
    outline-offset: 3px;
}

/* ── Boş liste ve uyarı ──────────────────────────────────────────── */
.bos-liste {
    padding: 30px 22px;
    border: 1px solid var(--kenar);
    border-radius: 8px;
    background: var(--yuzey);
    text-align: center;
}

.bos-liste svg { width: 30px; height: 30px; fill: var(--mavi); }

.bos-liste p { margin: 8px 0 14px; font-weight: 800; }

.uyari {
    margin: 0;
    padding: 13px 15px;
    border: 1px solid color-mix(in srgb, var(--bekleyen) 45%, transparent);
    border-radius: 14px;
    background: var(--bekleyen-halka);
    color: var(--yazi);
    font-size: 13.5px;
}

/* ── Hazırlanacak bölüm sayfası ──────────────────────────────────── */
.hazirlanacak {
    max-width: 560px;
    margin: 40px auto;
    padding: 34px 30px;
    border: 1px solid var(--kenar);
    border-radius: 20px;
    background: var(--yuzey);
    text-align: center;
}

.hazirlanacak h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -.3px;
}

.hazirlanacak .aciklama {
    margin: 10px 0 20px;
    color: var(--soluk);
    line-height: 1.6;
}

.hazirlanacak .rozet {
    display: inline-block;
    margin: 0;
    padding: 7px 15px;
    border-radius: 999px;
    background: var(--bekleyen-halka);
    color: var(--bekleyen);
    font-size: 12.5px;
    font-weight: 800;
}

.hazirlanacak .yonlendirme {
    margin: 20px 0 0;
    color: var(--silik);
    font-size: 13.5px;
}

.hazirlanacak .yonlendirme a { color: var(--mavi); font-weight: 700; }

/* ── Şablon başlangıç yolları ─────────────────────────────────────── */
.hazir-suzgec { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 14px; margin: 0 auto 22px; padding: 18px; max-width: 1100px; background: var(--yuzey); border: 1px solid var(--kenar); border-radius: 16px; }
.hazir-suzgec label { display: grid; gap: 6px; color: var(--silik); font-size: 13px; font-weight: 600; }
.hazir-suzgec select { min-height: 44px; padding: 8px 12px; color: var(--yazi); background: var(--zemin); border: 1px solid var(--kenar); border-radius: 10px; }
.hazir-suzgec-alt { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; color: var(--silik); font-size: 13px; }
.metin-dugmesi { padding: 3px 0; color: var(--mavi); background: transparent; border: 0; font-weight: 600; cursor: pointer; }
.hazir-katalog { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1100px; margin: 0 auto; }
.hazir-kart { display: grid; grid-template-columns: 152px minmax(0, 1fr); gap: 20px; align-items: center; padding: 20px; background: var(--yuzey); border: 1px solid var(--kenar); border-radius: 18px; box-shadow: 0 8px 24px var(--golge); }
.hazir-kart .dugme-dolu { grid-column: 2; justify-content: center; text-decoration: none; }
.hazir-bilgi h2 { margin: 0 0 5px; font-size: 18px; }
.hazir-bilgi p { margin: 0; color: var(--silik); font-size: 13px; }
.hazir-bilgi ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.hazir-bilgi li { padding: 4px 8px; border-radius: 999px; background: var(--yuzey-soluk); color: var(--silik); font-size: 11px; font-weight: 700; }
.hazir-onizleme { grid-row: span 2; width: 152px; aspect-ratio: 210 / 297; overflow: hidden; background: #fff; border: 1px solid #ccd2df; border-radius: 7px; box-shadow: 0 5px 16px rgba(20, 35, 75, .12); }
.hazir-onizleme canvas { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; }

@media (max-width: 940px) { .hazir-katalog { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .hazir-suzgec { grid-template-columns: 1fr; }
  .hazir-suzgec-alt { grid-column: 1; }
  .hazir-kart { grid-template-columns: 108px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .hazir-onizleme { width: 108px; }
  .hazir-kart .dugme-dolu { grid-column: 1 / -1; }
}

.sihirbaz-formu { display: grid; gap: 14px; }
.sihirbaz-adim { display: grid; grid-template-columns: 42px minmax(220px, 1fr) repeat(2, minmax(120px, 180px)); gap: 18px; align-items: center; padding: 18px; border: 1px solid var(--kenar); border-radius: 16px; background: var(--yuzey); }
.sihirbaz-adim h2 { margin: 0 0 3px; font-size: 16px; }
.sihirbaz-adim p { margin: 0; color: var(--silik); font-size: 12px; }
.sihirbaz-adim label, .kodla-al label { display: grid; gap: 5px; color: var(--silik); font-size: 12px; font-weight: 700; }
.sihirbaz-adim input[type="number"], .sihirbaz-adim select, .kodla-al input { min-height: 42px; padding: 8px 10px; color: var(--yazi); background: var(--zemin); border: 1px solid var(--kenar); border-radius: 10px; }
.adim-no { display: grid; place-items: center; width: 36px; height: 36px; color: white; background: var(--mavi); border-radius: 12px; font-weight: 900; }
.sihirbaz-sec { display: flex !important; align-items: center; gap: 8px !important; color: var(--yazi) !important; }
.sihirbaz-sec input { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; }
.kimlik-adimi, .yerlesim-adimi { grid-template-columns: 42px minmax(220px, 1fr) minmax(420px, 1.25fr); }
.sihirbaz-kimlikler { display: grid; grid-template-columns: repeat(2, max-content); justify-content: end; gap: 24px; min-width: 0; }
.sihirbaz-kimlik-satiri { display: grid; grid-template-columns: max-content 150px; gap: 14px; align-items: center; min-width: 0; }
.sihirbaz-kimlik-satiri .sihirbaz-sec { align-self: center; min-height: 42px; margin-top: 18px; }
.sihirbaz-kimlik-satiri > label, .sihirbaz-yerlesim > label { min-width: 0; }
.sihirbaz-kimlik-satiri select, .sihirbaz-yerlesim select { width: 100%; }
.sihirbaz-yerlesim { display: grid; grid-template-columns: minmax(220px, 300px) max-content; justify-content: end; gap: 20px; align-items: end; min-width: 0; }
.sihirbaz-yerlesim .sihirbaz-sec { min-height: 42px; justify-content: flex-start; }
.sihirbaz-adim.son { grid-template-columns: 42px 1fr auto; }

.kodla-al { max-width: 560px; margin: 32px auto; padding: 30px; text-align: center; background: var(--yuzey); border: 1px solid var(--kenar); border-radius: 20px; box-shadow: 0 8px 24px var(--golge); }
.kodla-al > p { color: var(--silik); line-height: 1.55; }
.kodla-al form { display: grid; gap: 14px; margin-top: 24px; text-align: left; }
.kodla-al input { text-align: center; text-transform: uppercase; letter-spacing: .18em; font-size: 19px; font-weight: 900; }
.kod-simge { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 14px; color: var(--mavi); background: color-mix(in srgb, var(--mavi) 12%, transparent); border-radius: 16px; font-size: 26px; font-weight: 900; }

@media (max-width: 760px) {
  .sihirbaz-adim, .sihirbaz-adim.son { grid-template-columns: 42px 1fr; }
  .sihirbaz-adim > label, .sihirbaz-adim > button, .sihirbaz-kimlikler, .sihirbaz-yerlesim { grid-column: 2; }
  .sihirbaz-kimlikler { grid-template-columns: 1fr; }
  .sihirbaz-yerlesim { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (max-width: 480px) {
  .sihirbaz-kimlik-satiri, .sihirbaz-yerlesim { grid-template-columns: 1fr; }
  .sihirbaz-kimlik-satiri .sihirbaz-sec { margin-top: 0; }
}

/* ── Yardım ve Destek ─────────────────────────────────────────────── */
.destek-sayfa{display:grid;gap:18px;max-width:920px;margin:20px auto 0}.destek-obek,.destek-detay-baslik,.destek-form{padding:22px;background:var(--yuzey);border:1px solid var(--kenar);border-radius:18px;box-shadow:0 8px 24px var(--golge)}
.destek-obek h2,.destek-detay-baslik h2{margin:0 0 10px}.destek-arama input,.destek-form input,.destek-form select,.destek-form textarea,.destek-dialog textarea{width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid var(--kenar);border-radius:11px;background:var(--zemin);color:var(--metin);font:inherit}.faq-liste{display:grid;gap:8px;margin-top:14px}.faq{border:1px solid var(--kenar);border-radius:12px;padding:0 14px;background:var(--zemin)}.faq summary{padding:14px 0;font-weight:750;cursor:pointer}.faq p{white-space:pre-line;line-height:1.55;color:var(--soluk)}.faq a{display:inline-block;margin:0 0 14px;color:var(--mavi);font-weight:700}
.destek-talep-baslik{display:flex;align-items:center;justify-content:space-between;gap:16px}.dugme-dolu.pasif{opacity:.5;pointer-events:none}.destek-talep-listesi{display:grid;gap:10px}.destek-talep-karti{display:flex;justify-content:space-between;gap:18px;padding:17px;background:var(--yuzey);border:1px solid var(--kenar);border-radius:15px;color:var(--metin);text-decoration:none}.destek-talep-karti:hover{border-color:var(--mavi)}.destek-talep-karti h3{margin:9px 0 5px}.destek-talep-karti p,.destek-talep-karti time{margin:0;color:var(--soluk);font-size:.82rem}.destek-rozet,.destek-yeni{display:inline-block;padding:4px 8px;border-radius:99px;font-size:.72rem;font-weight:800}.destek-rozet{background:color-mix(in srgb,var(--mavi) 14%,transparent);color:var(--mavi)}.durum-answered{background:#e7f7ef;color:#148254}.durum-resolved,.durum-closed{background:var(--zemin);color:var(--soluk)}.destek-yeni{background:#fff0d6;color:#9b5b00}
.destek-form{display:grid;gap:18px}.destek-form label{display:grid;gap:7px;font-weight:750}.destek-form small{color:var(--soluk);font-weight:400}.destek-baglam,.destek-bilgi{padding:13px;border-radius:12px;background:var(--zemin);color:var(--soluk)}.destek-baglam p{margin:5px 0 0}.destek-onizlemeler{display:flex;gap:8px;flex-wrap:wrap}.destek-onizlemeler img{width:96px;height:72px;object-fit:cover;border-radius:9px;border:1px solid var(--kenar)}
.geri{color:var(--mavi);font-weight:750;text-decoration:none}.destek-kategori{margin-left:8px;color:var(--soluk);font-size:.8rem;font-weight:700}.destek-detay-baslik>div>p{color:var(--soluk)}.destek-detay-baslik details{margin-top:14px}.destek-detay-baslik dl div{display:grid;grid-template-columns:140px 1fr;gap:10px}.destek-detay-baslik dt{color:var(--soluk)}.destek-detay-baslik dd{margin:0;overflow-wrap:anywhere}.destek-yazisma{display:grid;gap:12px}.destek-mesaj{padding:16px;background:var(--yuzey);border:1px solid var(--kenar);border-radius:16px}.destek-mesaj.yonetici{background:color-mix(in srgb,var(--mavi) 8%,var(--yuzey));border-color:color-mix(in srgb,var(--mavi) 35%,var(--kenar))}.destek-mesaj header{display:flex;justify-content:space-between;gap:12px;color:var(--soluk);font-size:.8rem}.destek-mesaj p{white-space:pre-wrap;line-height:1.55}.destek-ekler{display:flex;gap:8px;flex-wrap:wrap}.destek-ekler img{width:150px;height:110px;object-fit:cover;border-radius:10px}.destek-yenile{text-align:center;color:var(--soluk);font-size:.8rem}.destek-eylemler{display:flex;justify-content:flex-end;gap:10px}.destek-eylemler form{margin:0}.destek-cozuldu{background:#148254}.destek-dialog{width:min(560px,calc(100% - 30px));border:1px solid var(--kenar);border-radius:18px;background:var(--yuzey);color:var(--metin)}.destek-dialog::backdrop{background:#101426aa}.destek-dialog form{display:grid;gap:13px}.dialog-kapat{justify-self:end;border:0;background:transparent;color:var(--metin);font-size:1.6rem;cursor:pointer}
@media(max-width:640px){.destek-obek,.destek-detay-baslik,.destek-form{padding:16px}.destek-talep-baslik,.destek-talep-karti{align-items:flex-start}.destek-talep-baslik{flex-direction:column}.destek-talep-karti time{white-space:nowrap}.destek-eylemler{display:grid;grid-template-columns:1fr 1fr}.destek-eylemler button{width:100%}.destek-detay-baslik dl div{grid-template-columns:1fr;gap:2px}}

.tuval .pdf-arka-plan { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; opacity: .88; }
.tuval > .blok, .tuval > .kayit-katmani { position: absolute; z-index: 2; }

/* Hareketi rahatsız edici bulan kullanıcı için animasyon yok. */
@media (prefers-reduced-motion: reduce) {
    .durak, .dugme-dolu { transition: none; }
    .durak:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════
   ŞABLONLAR

   Renkli tonlar mobil uygulamadan birebir (`forms_list_screen.dart`
   başlangıç yolu paletleri ve `eylem_sayfasi.dart` eylem renkleri). Her
   birinin açık ve koyu tema için ayrı değeri var: açık temada okunan bir
   ton koyu zeminde kararıyor.

   DURUM PALETİNDEN AYRI tutuldular. Uygulamada yeşil "tamamlandı",
   kehribar "bekliyor" demek; bir gezinme satırının o tonları taşıması
   olmayan bir durum bildirirdi.
   ════════════════════════════════════════════════════════════════════ */

:root {
    --mor: #6C4BD6;        /* sihirbaz — "kendiliğinden oluyor" hissi */
    --gok: #2F6FE0;        /* hazır şablonlar — uygulamanın kendi içeriği */
    --turkuaz: #0E8F86;    /* sıfırdan tasarla; "tamamlandı" yeşilinden uzak */
    --kiremit: #C2503A;    /* PDF için alışılmış renk */
    --erguvan: #A33F86;    /* paylaşım kodu — diğerlerinin arasında boş hue */
    --lacivert-yumusak: #3B4A7A;
    --kirmizi: #C24141;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="acik"]) {
        --mor: #A88CF5;
        --gok: #7FA9F2;
        --turkuaz: #4FC9BE;
        --kiremit: #EE8E77;
        --erguvan: #E99BD4;
        --lacivert-yumusak: #97A6D8;
        --kirmizi: #F08E8E;
    }
}

:root[data-tema="koyu"] {
    --mor: #A88CF5;
    --gok: #7FA9F2;
    --turkuaz: #4FC9BE;
    --kiremit: #EE8E77;
    --erguvan: #E99BD4;
    --lacivert-yumusak: #97A6D8;
    --kirmizi: #F08E8E;
}

/* ── Başlık ve arama ─────────────────────────────────────────────── */
.karsilama-sablon { justify-content: space-between; flex-wrap: wrap; gap: 14px 20px; }

.karsilama-sablon h1 { font-size: clamp(26px, 3vw, 38px); }

.ara {
    display: flex;
    position: relative;
    align-items: center;
    flex: 1;
    min-width: 220px;
    max-width: 340px;
}

.ara-simge {
    position: absolute;
    left: 12px;
    width: 18px;
    height: 18px;
    fill: var(--silik);
    pointer-events: none;
}

.ara input {
    width: 100%;
    padding: 10px 38px;
    border: 1px solid var(--kenar);
    border-radius: 8px;
    background: var(--yuzey);
    color: var(--yazi);
    font: inherit;
    font-size: 14px;
}

.ara input::placeholder { color: var(--silik); }

.ara input:focus {
    outline: none;
    border-color: var(--mavi);
    background: var(--yuzey);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mavi) 12%, transparent);
}

/* Tarayıcının kendi temizleme düğmesi bizimkiyle üst üste binerdi. */
.ara input::-webkit-search-cancel-button { display: none; }

.ara-temizle {
    display: inline-flex;
    position: absolute;
    right: 10px;
    padding: 4px;
    border-radius: 50%;
}

.ara-temizle svg { width: 16px; height: 16px; fill: var(--silik); }

.ara-temizle:hover { background: var(--yuzey-soluk); }

/* ── Başlangıç yolları ───────────────────────────────────────────── */
/* Ana sayfadaki duraklar gibi lacivertin alt kenarına biniyor. */
.yollar {
    position: relative;
    margin: 22px 0 0;
    padding: 8px;
    border: 1px solid var(--kenar);
    border-radius: 8px;
    background: var(--yuzey);
    box-shadow: none;
}

/* İkisi geniş ekranda yan yana, dar ekranda alt alta. Gruplama korunuyor:
   üstteki öbek hızlı yollar, alttaki tasarım işi. */
.yol-ikili {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}

.yol-ayirac {
    height: 1px;
    margin: 4px 10px;
    border: 0;
    background: var(--kenar);
}

.yol {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 10px;
    border-radius: 13px;
    text-decoration: none;
}

.yol:hover { background: var(--yuzey-soluk); }

.yol-birincil {
    padding: 14px 12px;
    background: var(--mavi);
    color: #fff;
}

.yol-birincil:hover { background: var(--mavi); filter: brightness(.94); }

.yol-simge {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    /* Renk satırın kendi paletinden; varsayılan mor. */
    background: color-mix(in srgb, var(--yol-renk, var(--mor)) 16%, transparent);
    color: var(--yol-renk, var(--mor));
}

.yol-simge svg { width: 19px; height: 19px; fill: currentColor; }

/* Birincil satırda zemin zaten mavi; üstüne ikinci bir renk alacalı yapardı. */
.yol-birincil .yol-simge { background: rgba(255, 255, 255, .18); color: #fff; }

.yol-hazir { --yol-renk: var(--gok); }
.yol-kod { --yol-renk: var(--erguvan); }
.yol-sifirdan { --yol-renk: var(--turkuaz); }
.yol-pdf { --yol-renk: var(--kiremit); }

.yol-yazi {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.yol-yazi strong { font-size: 15px; font-weight: 700; letter-spacing: -.2px; }

.yol-yazi small {
    margin-top: 1px;
    overflow: hidden;
    color: var(--soluk);
    font-size: 11.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yol-birincil .yol-yazi small { color: rgba(255, 255, 255, .72); }

.yol-ok { flex: none; width: 20px; height: 20px; fill: var(--kenar); }

.yol-birincil .yol-ok { fill: rgba(255, 255, 255, .8); }

/* ── Liste başlığındaki sayı ─────────────────────────────────────── */
.bolum-basligi .adet { color: var(--soluk); font-size: 12.5px; }

/* ── Şablon kartı ────────────────────────────────────────────────── */
.sablonlar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 16px;
}

.sablon-karti {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid var(--kenar);
    border-radius: 8px;
    background: var(--yuzey);
}

.sablon-ust { display: flex; gap: 13px; }

.sablon-yazi { flex: 1; min-width: 0; }

.sablon-yazi h3 {
    margin: 0 0 4px;
    overflow: hidden;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: -.2px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sablon-yazi h3 a { text-decoration: none; }
.sablon-yazi h3 a:hover { text-decoration: underline; }

/* ── Künye ───────────────────────────────────────────────────────── */
.kunye { margin: 0; }

.kunye > div { display: flex; align-items: baseline; gap: 6px; padding-top: 2px; }

.kunye dt {
    flex: none;
    /* Sabit genişlik: değerler hizalansın, göz tek dikey çizgide tarasın.
       En uzun etiket (Sorular) sığıyor. */
    width: 52px;
    color: var(--silik);
    font-size: 10px;
    font-weight: 700;
}

.kunye dd {
    margin: 0;
    overflow: hidden;
    color: var(--soluk);
    font-size: 11.5px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Şema ────────────────────────────────────────────────────────── */
/* Çerçeve SABİT: bazı kartlarda geometri gelmediğinde liste zıplamasın. */
.sema-kutusu {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 100px;
    border-radius: 9px;
    text-decoration: none;
}

.sema {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    width: auto;
}

.sema-kagit { fill: var(--yuzey); stroke: var(--kenar); stroke-width: 1; }

/* Cevap blokları formun kendi rengini alıyor (yoksa marka mavisi); kimlik
   blokları soluk kalıyor ki göz önce nerede cevap verileceğini bulsun. */
.blok-cevap { fill: var(--form-rengi, var(--mavi)); fill-opacity: .65; }
.blok-logo { fill: var(--form-rengi, var(--lacivert)); fill-opacity: .35; }
.blok-kimlik { fill: var(--form-rengi, var(--kenar)); fill-opacity: .55; }
.blok-bilgi { fill: var(--form-rengi, var(--kenar)); fill-opacity: .4; }

/* Sütun bölmeleri: bloğun içini kağıt renginde kesiyor. */
.sema-bosluk { fill: var(--yuzey); }

.sema-yok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 100px;
    border: 1px solid var(--kenar);
    border-radius: 6px;
    background: var(--yuzey-soluk);
}

.sema-yok svg { width: 26px; height: 26px; fill: var(--bos); }

/* ── Kart düğmeleri ──────────────────────────────────────────────── */
.sablon-eylemler {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--kenar);
}

.kart-eylem {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 6px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: var(--yuzey-soluk);
    color: var(--yazi);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.kart-eylem svg { width: 15px; height: 15px; flex: none; fill: currentColor; }

.kart-eylem:hover { border-color: var(--kenar); }

.kart-eylem.vurgulu {
    background: color-mix(in srgb, var(--mavi) 10%, transparent);
    color: var(--mavi);
}

.kart-eylem.vurgulu:hover {
    border-color: transparent;
    background: color-mix(in srgb, var(--mavi) 18%, transparent);
}

/* ── Şablon sayfası ──────────────────────────────────────────────── */
.geri { margin: 0 0 14px; font-size: 13.5px; font-weight: 700; }
.geri a { color: var(--mavi); text-decoration: none; }
.geri a:hover { text-decoration: underline; }

.sablon-sayfasi {
    padding: 22px 24px 24px;
    border: 1px solid var(--kenar);
    border-radius: 20px;
    background: var(--yuzey);
}

.sablon-sayfasi h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.3px;
}

.sablon-sayfasi .guncelleme { margin: 4px 0 18px; color: var(--soluk); font-size: 12.5px; }

.sablon-sayfasi-govde {
    display: grid;
    grid-template-columns: minmax(200px, 260px) 1fr;
    gap: 26px;
    align-items: start;
}

@media (max-width: 720px) {
    .sablon-sayfasi-govde { grid-template-columns: 1fr; }
}

.sema-buyuk { text-align: center; }

.sema-buyuk .sema {
    width: 100%;
    height: auto;
    max-height: 420px;
}

.sema-buyuk .sema-yok { width: 100%; height: 200px; }

.sema-not { margin: 10px 0 0; color: var(--silik); font-size: 12px; line-height: 1.5; }

.sablon-sayfasi-yazi .kunye { margin-bottom: 22px; }
.sablon-sayfasi-yazi .kunye dt { width: 62px; font-size: 11px; }
.sablon-sayfasi-yazi .kunye dd { font-size: 13px; white-space: normal; }

.sablon-sayfasi-yazi h2 {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: -.2px;
}

.islemler { margin: 0; padding: 0; list-style: none; }

/* Satırın kendisi TIKLANABİLİR ögenin ta kendisi: eylem bir <button> ya da
   <a>, çevresinde ayrıca tıklanmayan bir kabuk yok. Erişilebilirlik
   gereği — klavyeyle gezen kullanıcı satırın tamamını odaklıyor. */
.islem-dugme {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 10px 8px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.islem-dugme:hover { background: var(--yuzey-soluk); }

.islem-dugme:focus-visible { outline: 2px solid var(--mavi); outline-offset: 1px; }

.islemler li.oncesinde-ayirac {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--kenar);
}

/* Geometri sınamasından geçemeyen şablonda kağıda dokunan eylemler.
   GİZLENMİYOR, SÖNDÜRÜLÜYOR: kaybolan bir düğme "böyle bir şey yok" der,
   oysa var — yalnızca bu şablonda güvenli değil.

   TIKLANABİLİR KALIYOR (`pointer-events` kapatılmıyor, `disabled` da
   verilmiyor): basınca sebebi durum şeridinde tekrar yazılsın. Devre dışı
   bir düğme hiçbir olay üretmez ve kullanıcı neden çalışmadığını bir daha
   öğrenemez. */
.islem-kapali {
    opacity: .45;
    cursor: not-allowed;
}

.islem-simge {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--islem-renk) 16%, transparent);
    color: var(--islem-renk);
}

.islem-simge svg { width: 18px; height: 18px; fill: currentColor; }

.islem-kiremit { --islem-renk: var(--kiremit); }
.islem-erguvan { --islem-renk: var(--erguvan); }
.islem-mor { --islem-renk: var(--mor); }
.islem-turkuaz { --islem-renk: var(--turkuaz); }
.islem-lacivert { --islem-renk: var(--lacivert-yumusak); }
.islem-kirmizi { --islem-renk: var(--kirmizi); }

.islem-yazi { display: flex; flex: 1; flex-direction: column; min-width: 0; }

.islem-yazi strong { font-size: 14px; font-weight: 700; }

.islem-yazi small { margin-top: 1px; color: var(--soluk); font-size: 11.5px; }

.islemler .rozet {
    flex: none;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bekleyen-halka);
    color: var(--bekleyen);
    font-size: 11px;
    font-weight: 800;
}

.sablon-sayfasi-yazi .yonlendirme {
    margin: 18px 0 0;
    color: var(--silik);
    font-size: 13px;
}

/* ════════════════════════════════════════════════════════════════════
   SIFIRDAN TASARLA — tuval

   Blok Ekle penceresindeki öbek renkleri mobildeki `add_block_screen.dart`
   → `_BlockGroup.accent` değerleri. Koyu tema karşılıkları burada
   türetildi: mobilde bu ekran koyu temada da açık zeminli çalışıyor,
   web'de sayfanın geri kalanıyla uyumlu olmalı.
   ════════════════════════════════════════════════════════════════════ */

:root {
    --obek-cevap: #4058D2;
    --obek-ogrenci: #0F7A72;
    --obek-sinav: #7253C7;
    --obek-icerik: #B66808;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="acik"]) {
        --obek-cevap: #7A8CE8;
        --obek-ogrenci: #4FC9BE;
        --obek-sinav: #A88CF5;
        --obek-icerik: #E9A94A;
    }
}

:root[data-tema="koyu"] {
    --obek-cevap: #7A8CE8;
    --obek-ogrenci: #4FC9BE;
    --obek-sinav: #A88CF5;
    --obek-icerik: #E9A94A;
}

/* ── Üst çubuk ───────────────────────────────────────────────────── */
.tasarim-cubuk {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 14px;
}

.tasarim-cubuk h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.3px;
}

.tasarim-cubuk p { margin: 4px 0 0; color: var(--soluk); font-size: 13.5px; }

.tasarim-eylemler { display: flex; gap: 8px; flex-wrap: wrap; }

.tasarim-eylemler .dugme-dolu,
.tasarim-eylemler .kart-eylem {
    border: 1px solid transparent;
    font-family: inherit;
    cursor: pointer;
}

.tasarim-eylemler .kart-eylem { border-color: var(--kenar); }

.tasarim .uyari { margin-bottom: 18px; }

/* ── Gövde: tuval + özellikler ───────────────────────────────────── */
.tasarim-govde {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 22px;
    align-items: start;
}

@media (max-width: 860px) {
    .tasarim-govde { grid-template-columns: 1fr; }
}

.tuval-sarmal {
    padding: 16px;
    border: 1px solid var(--kenar);
    border-radius: 18px;
    background: var(--yuzey-soluk);
}

/* Kağıt A4 oranında; bloklar yüzdeyle konumlandığı için pencere boyutu
   değişince JS'in yeniden hesap yapmasına gerek yok. */
.tuval {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    aspect-ratio: 210 / 297;
    border: 1px solid var(--kenar);
    border-radius: 4px;
    background: #fff;
    /* Hücre ızgarası: blokların neye yapıştığı görünsün. */
    background-image:
        linear-gradient(to right, rgba(34, 49, 95, .07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(34, 49, 95, .07) 1px, transparent 1px);
    background-size: calc(100% / 49.645) calc(100% / 70.213);
    box-shadow: 0 6px 20px var(--golge);
    touch-action: none;
    overflow: hidden;
}

.tuval-not {
    margin: 12px 0 0;
    color: var(--silik);
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
}

kbd {
    padding: 1px 6px;
    border: 1px solid var(--kenar);
    border-radius: 5px;
    background: var(--yuzey);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
}

/* ── Tuvaldeki blok ──────────────────────────────────────────────── */
.blok {
    display: flex;
    position: absolute;
    flex-direction: column;
    justify-content: space-between;
    padding: 2px 3px;
    border: 1px solid;
    border-radius: 2px;
    overflow: hidden;
    cursor: grab;
    user-select: none;
}

.blok:focus-visible { outline: 2px solid var(--mavi); outline-offset: 1px; }

.blok.suruklenen { cursor: grabbing; opacity: .85; }

.blok.secili {
    box-shadow: 0 0 0 2px var(--mavi);
    z-index: 2;
}

/* ── Özellikler paneli ───────────────────────────────────────────── */
.ozellikler {
    position: sticky;
    top: 76px;
    padding: 16px 16px 18px;
    border: 1px solid var(--kenar);
    border-radius: 18px;
    background: var(--yuzey);
}

@media (max-width: 860px) {
    .ozellikler { position: static; }
}

.ozellikler h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: -.2px;
}

.ozellik-olcu { margin: 3px 0 14px; color: var(--soluk); font-size: 12px; }

.ozellikler .kunye { margin-top: 10px; }

.ozellik-alanlar { display: flex; flex-direction: column; gap: 10px; }

.ozellik-alan { display: flex; flex-direction: column; gap: 4px; }

.ozellik-alan > span {
    color: var(--silik);
    font-size: 12px;
    font-weight: 700;
}

.ozellik-alan input,
.ozellik-alan select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--kenar);
    border-radius: 10px;
    background: var(--yuzey);
    color: var(--yazi);
    font: inherit;
    font-size: 14.5px;
}

.ozellik-alan input:focus,
.ozellik-alan select:focus {
    outline: none;
    border-color: var(--mavi);
}

.ozellik-ipucu {
    margin: 14px 0 0;
    color: var(--silik);
    font-size: 12px;
    line-height: 1.55;
}

.dugme-yikici {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    margin-top: 16px;
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, var(--kirmizi) 45%, transparent);
    border-radius: 11px;
    background: transparent;
    color: var(--kirmizi);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.dugme-yikici svg { width: 16px; height: 16px; fill: currentColor; }

.dugme-yikici:hover { background: color-mix(in srgb, var(--kirmizi) 10%, transparent); }

/* ── Blok Ekle penceresi ─────────────────────────────────────────── */
.blok-penceresi {
    width: min(560px, calc(100vw - 32px));
    max-height: min(660px, calc(100vh - 48px));
    padding: 0;
    border: 1px solid var(--kenar);
    border-radius: 20px;
    background: var(--yuzey);
    color: var(--yazi);
    overflow: hidden;
}

.blok-penceresi::backdrop { background: rgba(10, 16, 32, .55); }

.blok-penceresi-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 16px 18px;
    border-bottom: 1px solid var(--kenar);
    background: var(--lacivert);
    color: #fff;
}

.blok-penceresi-ust h2 { margin: 0; font-size: 17px; font-weight: 800; }

.pencere-kapat {
    display: inline-flex;
    padding: 7px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    cursor: pointer;
}

.pencere-kapat svg { width: 18px; height: 18px; fill: #fff; }

.pencere-kapat:hover { background: rgba(255, 255, 255, .28); }

.blok-ara {
    display: flex;
    position: relative;
    align-items: center;
    padding: 14px 18px 8px;
}

.blok-ara .ara-simge {
    position: absolute;
    left: 30px;
    width: 17px;
    height: 17px;
    fill: var(--silik);
    pointer-events: none;
}

.blok-ara input {
    width: 100%;
    padding: 9px 12px 9px 36px;
    border: 1px solid var(--kenar);
    border-radius: 11px;
    background: var(--yuzey-soluk);
    color: var(--yazi);
    font: inherit;
    font-size: 14px;
}

.blok-ara input:focus { outline: none; border-color: var(--mavi); }

.blok-listesi {
    padding: 6px 18px 18px;
    overflow-y: auto;
    max-height: calc(min(660px, 100vh - 48px) - 132px);
}

.blok-obek + .blok-obek { margin-top: 16px; }

.blok-obek h3 {
    margin: 0 0 6px;
    color: var(--silik);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.blok-secenekler { display: flex; flex-direction: column; gap: 4px; }

.blok-secenek {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.blok-secenek:hover { border-color: var(--kenar); background: var(--yuzey-soluk); }

.blok-secenek:focus-visible { outline: 2px solid var(--mavi); outline-offset: 1px; }

.blok-secenek-simge {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--obek-renk) 16%, transparent);
    color: var(--obek-renk);
}

.blok-secenek-simge svg { width: 18px; height: 18px; fill: currentColor; }

.obek-Cevap { --obek-renk: var(--obek-cevap); }
.obek-Ogrenci { --obek-renk: var(--obek-ogrenci); }
.obek-Sinav { --obek-renk: var(--obek-sinav); }
.obek-Icerik { --obek-renk: var(--obek-icerik); }

.blok-secenek-yazi { display: flex; flex-direction: column; min-width: 0; }

.blok-secenek-yazi strong { font-size: 14.5px; font-weight: 700; letter-spacing: -.2px; }

.blok-secenek-yazi small { margin-top: 1px; color: var(--soluk); font-size: 11.5px; }

.blok-bos { margin: 18px 0; color: var(--silik); font-size: 13.5px; text-align: center; }

/* ── Kimlik çubuğu ve kayıt durumu ───────────────────────────────── */
.kimlik-cubugu {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
    padding: 14px 16px;
    border: 1px solid var(--kenar);
    border-radius: 16px;
    background: var(--yuzey);
}

.kimlik-cubugu .ozellik-alan { flex: 1; min-width: 200px; }

.kimlik-cubugu .kod-alani { flex: 0 0 150px; min-width: 130px; }

.kimlik-cubugu .kod-alani input { font-family: "Outfit", sans-serif; }

.kimlik-cubugu .dugme-dolu {
    border: 1px solid transparent;
    font-family: inherit;
    cursor: pointer;
}

.kimlik-cubugu .dugme-dolu:disabled { opacity: .6; cursor: progress; }

.form-ayar-cubugu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin: 0 0 12px;
    padding: 12px 16px;
    border: 1px solid var(--kenar);
    border-radius: 16px;
    background: var(--yuzey);
}
.blok-renk-satiri { display: flex; align-items: center; gap: 8px; }
.blok-renk-satiri input[type="color"] { flex: 0 0 44px; height: 38px; padding: 3px; cursor: pointer; }
.blok-renk-satiri .kart-eylem { width: auto; min-height: 38px; padding: 7px 10px; font: inherit; font-size: 12px; }
.blok-renk-eylemleri { display: flex; flex-wrap: wrap; gap: 6px; }
.blok-renk-eylemleri .kart-eylem { width: auto; padding: 6px 8px; font: inherit; font-size: 11.5px; }
.form-ayar-cubugu > p { margin: 0 0 0 auto; color: var(--silik); font-size: 12px; }
.form-ayar-grubu { display: flex; align-items: center; gap: 10px; }
.form-ayar-grubu > span { color: var(--silik); font-size: 12px; font-weight: 700; }
.boyut-secimi { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--yuzey-soluk); }
.boyut-secimi button {
    padding: 6px 11px; border: 0; border-radius: 8px; background: transparent;
    color: var(--soluk); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.boyut-secimi button.secili { background: var(--yuzey); color: var(--mavi); box-shadow: 0 1px 4px var(--golge); }
.renk-secimi { display: flex; align-items: center; gap: 7px; }
.renk-secimi button, .ozel-renk {
    display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
    border: 2px solid var(--yuzey); border-radius: 50%; background: var(--secim-rengi); cursor: pointer;
    box-shadow: 0 0 0 1px var(--kenar);
}
.renk-secimi button.secili { box-shadow: 0 0 0 2px var(--mavi); }
.ozel-renk { overflow: hidden; background: conic-gradient(#f33,#ff3,#3f3,#3ff,#33f,#f3f,#f33); }
.ozel-renk input { width: 36px; height: 36px; opacity: 0; cursor: pointer; }
.kagit-secimi { padding: 7px 9px; border: 1px solid var(--kenar); border-radius: 9px; background: var(--yuzey); color: var(--yazi); font: inherit; font-size: 13px; }
.yon-dugmesi { width: auto; min-height: 34px; padding: 6px 10px; font: inherit; font-size: 12px; }
@media (max-width: 700px) { .form-ayar-cubugu > p { width: 100%; margin-left: 0; } }

.kayit-durumu {
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 700;
}

.kayit-durumu.tamam {
    border-color: color-mix(in srgb, var(--tamam) 45%, transparent);
    background: color-mix(in srgb, var(--tamam) 12%, transparent);
    color: var(--tamam);
}

.kayit-durumu.bekliyor {
    border-color: color-mix(in srgb, var(--bekleyen) 45%, transparent);
    background: var(--bekleyen-halka);
    color: var(--bekleyen);
}

.kayit-durumu.hata {
    border-color: color-mix(in srgb, var(--kirmizi) 45%, transparent);
    background: color-mix(in srgb, var(--kirmizi) 12%, transparent);
    color: var(--kirmizi);
}

/* ── Blok içi çizim ──────────────────────────────────────────────── */
/* Blok artık dolu bir kutu değil, kağıda basılacak hâlin şeması: başlık
   bandı, satır numaraları, yazma kutusu ve balonlar. Zemin BEYAZ kalıyor
   — kağıt beyaz. */
.blok {
    padding: 0;
    background: #fff;
    overflow: hidden;
}

.blok-cizim { display: block; width: 100%; height: 100%; }

.ci-baslik,
.ci-bolum-baslik { fill: var(--blok-baslik, color-mix(in srgb, var(--blok-renk) 13%, #fff)); }

.ci-alternatif { fill: var(--blok-alternatif, color-mix(in srgb, var(--blok-renk) 20%, #fff)); }

.ci-baslik-yazi {
    fill: var(--blok-renk);
    font-weight: 700;
    text-anchor: middle;
}

.ci-balon {
    fill: none;
    stroke: var(--blok-renk);
    stroke-width: .2;
}

.ci-balon-yazi {
    fill: var(--blok-renk);
    text-anchor: middle;
}

.ci-etiket { fill: var(--blok-renk); text-anchor: end; }

.ci-kutu { fill: none; stroke: var(--blok-renk); stroke-width: .25; }

.ci-cizgi { stroke: var(--blok-renk); stroke-width: .18; }

/* Aile renkleri: şemadakiyle aynı ayrım — cevap alanları marka mavisi,
   kimlik blokları lacivert, logo kehribar, bilgi alanı turkuaz. */
.blok.cevap { --blok-renk: #4058D2; border-color: color-mix(in srgb, #4058D2 55%, transparent); }
.blok.kimlik { --blok-renk: #22315F; border-color: color-mix(in srgb, #22315F 40%, transparent); }
.blok.logo { --blok-renk: #B66808; border-color: color-mix(in srgb, #B66808 50%, transparent); }
.blok.bilgi { --blok-renk: #0F7A72; border-color: color-mix(in srgb, #0F7A72 45%, transparent); }

/* Logo ve metin bloğunun çizecek içi yok; adı ortada dursun. */
.blok.logo .ci-baslik,
.blok.bilgi .ci-baslik { fill: color-mix(in srgb, var(--blok-renk) 10%, #fff); }

/* Çakışma deseni içeriğin ÜSTÜNE biniyor; blok beyaz olduğu için
   arkaplan yerine ayrı bir katman gerekiyordu. */
.blok.cakisma { border-color: var(--kirmizi); }

.blok.cakisma::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(45deg,
        transparent 0 4px,
        color-mix(in srgb, var(--kirmizi) 26%, transparent) 4px 8px);
}

/* ── Yalnızca mobilde eklenebilen bloklar ────────────────────────── */
.blok-secenek:disabled { opacity: .45; cursor: not-allowed; }

.blok-secenek:disabled:hover { border-color: transparent; background: transparent; }

.blok-secenek-yazi em { font-style: normal; font-weight: 700; }

/* Tuval biraz daha geniş: balonların ve satır numaralarının okunabilmesi
   için 520 px'te kağıt fazla küçük kalıyordu. */
.tuval { max-width: 620px; }

/* ── Kayıt katmanı: siyah çerçeve, köşe kareleri, hizalama şeridi ──
   Tuvalin ÜSTÜNDE duruyor ve dokunulamıyor — mobildeki `IgnorePointer`
   katmanın karşılığı. Ölçü birimi doğrudan milimetre (viewBox kağıdın
   kendisi), bu yüzden kalınlıklar da mm cinsinden; kağıt küçüldükçe
   çizgiler de kağıtla birlikte inceliyor.

   RENK KOŞULSUZ SİYAH: bunlar dekoratif çizgi değil, taramanın kağıdı
   bulduğu çapa. Tema rengine bağlanırsa koyu temada başka bir şey
   gösterirdik. */
.kayit-katmani {
    position: absolute;
    inset: 0;
    z-index: 3; /* seçili blok 2'de; çerçeve onun da üstünde kalmalı */
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.ky-cerceve { fill: none; stroke: #000; }

.ky-kose,
.ky-serit { fill: #000; }

/* ── Ön izleme penceresi ─────────────────────────────────────────── */
.onizleme-penceresi {
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    padding: 0;
    border: 1px solid var(--kenar);
    border-radius: 20px;
    background: var(--yuzey);
    color: var(--yazi);
    overflow: hidden;
}

.onizleme-penceresi::backdrop { background: rgba(10, 16, 32, .55); }

.onizleme-govde {
    max-height: calc(100vh - 140px);
    padding: 18px;
    overflow: auto;
}

.onizleme-not {
    margin: 14px auto 0;
    max-width: 460px;
    color: var(--soluk);
    font-size: 12.5px;
    line-height: 1.65;
    text-align: center;
}

.onizleme-not strong { color: var(--yazi); font-weight: 800; }

/* Kağıt: ızgara zemini ve yuvarlatma yok — basılan sayfa düz beyaz.
   Blok rengi ve dönüşümlü açık bantlar doğrudan optikSayfa.js tarafından
   mobildeki palet oranlarıyla verilir. */
/* Kağıdın TAMAMI bir ekranda görünmeli — ön izlemenin bütün derdi bu.
   Yükseklik pencereye göre veriliyor, genişliği `aspect-ratio` türetiyor. */
.onizleme-kagit {
    width: auto;
    max-width: 100%;
    height: min(760px, calc(100vh - 190px));
    border-radius: 0;
    background-image: none;
    /* Tuvalde sürükleme için kapalı; burada sürüklenecek bir şey yok ve
       kapalı kalırsa uzun kağıt parmakla kaydırılamıyor. */
    touch-action: auto;
}

.onizleme-kagit .blok {
    --blok-renk: #000;
    border-color: rgba(0, 0, 0, .55);
    cursor: default;
}

.onizleme-kagit .ci-etiket { fill: var(--blok-renk); }

/* ── Tuvalde ArUco işareti ───────────────────────────────────────────
   Aile renklerine BAĞLANMIYOR: desen kağıtta siyah-beyaz basılıyor ve
   tespit tam bu karşıtlığa dayanıyor. Beyaz zemin de deseni saran sessiz
   bölge — başlık bandının gri dolgusu oraya taşarsa işaret okunmaz. */
.ci-aruco-zemin { fill: #fff; }

.ci-aruco { fill: #000; }

/* ── Ön izleme penceresinin indirme çubuğu ───────────────────────── */
.onizleme-eylemler {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.onizleme-eylemler .dugme-dolu,
.onizleme-eylemler .kart-eylem {
    border: 1px solid transparent;
    font-family: inherit;
    cursor: pointer;
}

.onizleme-eylemler .kart-eylem { border-color: var(--kenar); }

.onizleme-govde .kayit-durumu { margin: 12px auto 0; max-width: 460px; }

/* ── Paylaşım kodları ────────────────────────────────────────────────
   Kod listesi düğmenin ALTINDA: kod üretmek tek seferlik bir iş değil,
   öğretmen hangi kodların hâlâ geçerli olduğunu görebilmeli. */
.kod-listesi {
    margin: 2px 0 0 53px;   /* simge kutusu (34) + boşluk (11) + iç pay */
    padding: 0;
    list-style: none;
}

.kod-satiri {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
}

.kod-satiri code {
    padding: 3px 9px;
    border: 1px solid var(--kenar);
    border-radius: 7px;
    background: var(--yuzey-soluk);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
}

.kod-kopyala,
.kod-iptal {
    padding: 3px 9px;
    border: 1px solid var(--kenar);
    border-radius: 7px;
    background: transparent;
    color: var(--soluk);
    font: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
}

.kod-kopyala:hover { border-color: var(--mavi); color: var(--mavi); }

.kod-iptal:hover { border-color: var(--kirmizi); color: var(--kirmizi); }

.kod-bos { padding: 5px 0; color: var(--silik); font-size: 12px; }

/* ── Adını değiştir penceresi ────────────────────────────────────── */
.ad-penceresi {
    width: min(420px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid var(--kenar);
    border-radius: 20px;
    background: var(--yuzey);
    color: var(--yazi);
    overflow: hidden;
}

.ad-penceresi::backdrop { background: rgba(10, 16, 32, .55); }

.ad-penceresi-govde {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 18px;
}

.ad-penceresi-govde .ozellik-alan { flex: 1; }

.ad-penceresi-govde .dugme-dolu {
    border: 1px solid transparent;
    font-family: inherit;
    cursor: pointer;
}

/* ── Kartın durum şeridi ─────────────────────────────────────────── */
.kart-durumu { margin: 10px 0 0; font-size: 12.5px; }

/* ── Çıktı seçim penceresi ───────────────────────────────────────────
   "A4 mi, sadece çerçeve mi". İki seçenek yan yana ve her biri kendi ön
   izlemesini taşıyor — fark cümleyle değil resimle anlatılıyor. */
.cikti-penceresi {
    width: min(560px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid var(--kenar);
    border-radius: 20px;
    background: var(--yuzey);
    color: var(--yazi);
    overflow: hidden;
}

.cikti-penceresi::backdrop { background: rgba(10, 16, 32, .55); }

.cikti-secenekler {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 18px;
}

@media (max-width: 520px) {
    .cikti-secenekler { grid-template-columns: 1fr; }
}

.cikti-secenek {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 12px 12px;
    border: 1px solid var(--kenar);
    border-radius: 16px;
    background: var(--yuzey-soluk);
    color: inherit;
    font: inherit;
    text-align: center;
    cursor: pointer;
}

.cikti-secenek:hover { border-color: var(--mavi); }

.cikti-secenek:focus-visible { outline: 2px solid var(--mavi); outline-offset: 2px; }

/* Ön izlemeler AYNI YÜKSEKLİKTE duruyor, genişlik oranından geliyor:
   A4 seçeneği ince ve uzun, kırpılmış olan daha dolu görünüyor. Fark
   böyle okunuyor. */
.cikti-onizleme {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 132px;
    margin-bottom: 8px;
}

.cikti-onizleme svg {
    display: block;
    border: 1px solid var(--kenar);
    box-shadow: 0 3px 10px var(--golge);
}

.cikti-secenek strong { font-size: 14px; font-weight: 800; }

.cikti-secenek small {
    color: var(--soluk);
    font-size: 11.5px;
    line-height: 1.5;
}

.cikti-olcu {
    margin-top: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--yuzey);
    color: var(--silik);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════════════
   AYARLAR

   Öbekler kart değil, ayrılmış bölümler: sayfada yedi ayrı kutu yan yana
   durunca hangisinin neyle ilgili olduğu kayboluyordu.
   ════════════════════════════════════════════════════════════════════ */
.ayarlar {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 880px;
    margin: 24px auto 0;
}

.ayarlar-baslik {
    width: 100%;
    max-width: 880px;
    margin-inline: auto;
}

.ayar-obek {
    padding: clamp(20px, 3vw, 30px);
    border: 1px solid var(--kenar);
    border-radius: 8px;
    background: var(--yuzey);
}

.ayar-obek h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -.2px;
}

.ayar-aciklama {
    margin: 5px 0 16px;
    color: var(--soluk);
    font-size: 14px;
    line-height: 1.6;
}

.ayar-ipucu {
    margin: 12px 0 0;
    color: var(--silik);
    font-size: 13.5px;
    line-height: 1.6;
}

.ayar-ipucu strong { color: var(--soluk); }

/* İki sütun geniş ekranda; kurum bilgilerinin çoğu kısa alan. */
.ayar-alanlar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
}

@media (max-width: 620px) {
    .ayar-alanlar { grid-template-columns: 1fr; }
}

.ayar-alanlar input[readonly] {
    background: var(--yuzey-soluk);
    color: var(--soluk);
    cursor: default;
}

.ayar-eylemler { display: flex; margin-top: 16px; }

.ayar-eylemler .dugme-dolu {
    border: 1px solid transparent;
    font-family: inherit;
    cursor: pointer;
}

.ayar-obek .kayit-durumu { margin: 12px 0 0; }

/* ── Radyo listeleri ─────────────────────────────────────────────── */
/* AYARLAR VE SINAV MODÜLÜ ORTAK kullanıyor: puanlama kipi, iptal kipi ve
   tema seçimi aynı görünen üçlü. Ayrı yazılsalardı biri değişip diğeri
   kalırdı; sınıf adları o yüzden yan yana duruyor. */
.ayar-secim,
.radyo-listesi {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.ayar-secim legend,
.radyo-listesi legend {
    padding: 0 0 8px;
    color: var(--soluk);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ayar-radyo,
.radyo {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 13px;
    border: 1px solid var(--kenar);
    border-radius: 13px;
    cursor: pointer;
}

.ayar-radyo:hover,
.radyo:hover { border-color: var(--mavi); }

.ayar-radyo:has(input:checked),
.radyo:has(input:checked) {
    border-color: var(--mavi);
    background: color-mix(in srgb, var(--mavi) 8%, transparent);
}

.ayar-radyo:has(input:focus-visible),
.radyo:has(input:focus-visible) {
    outline: 2px solid var(--mavi);
    outline-offset: 1px;
}

.ayar-radyo input,
.radyo input { margin: 2px 0 0; accent-color: var(--mavi); }

.ayar-radyo span,
.radyo span { display: flex; flex-direction: column; gap: 2px; }

.ayar-radyo strong,
.radyo strong { font-size: 15px; font-weight: 700; }

.ayar-radyo small,
.radyo small { color: var(--soluk); font-size: 13px; line-height: 1.5; }

/* ════════════════════════════════════════════════════════════════════
   SINAVLAR

   Kart, mobildeki `exam_card.dart` ile aynı iskelet: ad, alt alta künye,
   sağ üstte tarih, altta eylemler. Ölçüler farklı — dokunmatik için
   seçilmiş yükseklikler farede fazla iri.

   ARŞİV AYNI SINIFLARI KULLANIYOR. İki liste tek kısmi görünümden
   çiziliyor; ayrı stiller yazılsaydı zamanla ayrışırlardı.
   ════════════════════════════════════════════════════════════════════ */

/* `hidden` ÖZNİTELİĞİ SINIF KURALINA YENİLİYOR. Tarayıcının kendi
   `[hidden] { display: none }` kuralı bir sınıf seçicisinden daha zayıf;
   `.iptal-karti { display: flex }` gibi bir kural onu sessizce eziyor ve
   gizlenmesi gereken kutu ekranda kalıyor (denemede yakalandı). Bu modülde
   gizlenen ögelerin çoğu `display` taşıyan bir sınıfa da sahip, o yüzden
   kural bir kez ve açıkça yazılıyor. */
[hidden] { display: none !important; }

/* ── Süzgeç çipleri ──────────────────────────────────────────────── */
.suzgecler {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 4px 14px;
}

.suzgec {
    padding: 8px 15px;
    border: 1px solid var(--kenar);
    border-radius: 11px;
    background: var(--yuzey);
    color: var(--soluk);
    font-size: 12.5px;
    font-weight: 800;
    text-decoration: none;
}

.suzgec:hover { border-color: var(--mavi); }

.suzgec.acik {
    border-color: var(--mavi);
    background: var(--mavi);
    color: #fff;
}

/* ── Sınav kartı ─────────────────────────────────────────────────── */
.sinav-listesi { display: flex; flex-direction: column; gap: 16px; }

.sinav-satiri {
    padding: 15px 16px 13px;
    border: 1px solid var(--kenar);
    border-radius: 17px;
    background: var(--yuzey);
}

.sinav-satiri-ust { display: flex; align-items: flex-start; gap: 12px; }

.sinav-satiri-yazi { flex: 1; min-width: 0; }

.sinav-satiri h3 {
    margin: 0 0 8px;
    font-size: 15.5px;
    font-weight: 900;
    letter-spacing: -.2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Künye ALT ALTA ve etiketler sabit genişlikte: değerler tek hizada
   başlıyor, göz tek sütunda aşağı iniyor. Yan yana yazılınca ayrı
   bilgiler tek cümleye benziyordu. */
.sinav-kunye { margin: 0; }

.sinav-kunye > div { display: flex; gap: 8px; padding-bottom: 3px; }

.sinav-kunye dt {
    flex: 0 0 92px;
    color: var(--silik);
    font-size: 11.5px;
    font-weight: 600;
}

.sinav-kunye dd {
    margin: 0;
    min-width: 0;
    font-size: 11.5px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sinav-kunye .deger-tamam { color: var(--tamam); }
.sinav-kunye .deger-mavi { color: var(--mavi); }

.sinav-tarih {
    flex: none;
    padding-top: 2px;
    color: var(--silik);
    font-size: 11px;
    font-weight: 600;
}

.sinav-satiri-eylemler {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.sinav-satiri-eylemler .kart-eylem { flex: 0 0 auto; padding-inline: 16px; }

.sinav-satiri-eylemler .kart-eylem.bekleyen {
    background: var(--bekleyen-halka);
    border-color: color-mix(in srgb, var(--bekleyen) 40%, transparent);
    color: var(--bekleyen);
}

.sinav-not {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 11px 0 0;
    color: var(--silik);
    font-size: 12px;
    line-height: 1.5;
}

.sinav-not svg { width: 15px; height: 15px; flex: none; fill: var(--silik); }

/* ── Kart menüsü (details) ───────────────────────────────────────── */
/* Açılıp kapanması için JavaScript gerekmiyor ve klavyeyle açılıyor. */
.kart-menu { position: relative; margin-left: auto; }

.kart-menu summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 100%;
    min-height: 38px;
    border: 1px solid var(--kenar);
    border-radius: 11px;
    cursor: pointer;
    list-style: none;
}

.kart-menu summary::-webkit-details-marker { display: none; }

.kart-menu summary:hover { border-color: var(--mavi); }

.kart-menu summary svg { width: 18px; height: 18px; fill: var(--soluk); }

.kart-menu-liste {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 5;
    width: 268px;
    padding: 6px;
    border: 1px solid var(--kenar);
    border-radius: 15px;
    background: var(--yuzey);
    box-shadow: 0 14px 34px var(--golge);
}

.kart-menu-liste > * {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 11px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.kart-menu-liste > *:hover { background: var(--yuzey-soluk); }

.kart-menu-liste svg { width: 17px; height: 17px; flex: none; margin-top: 2px; fill: var(--mavi); }

.kart-menu-liste span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.kart-menu-liste strong { font-size: 13px; font-weight: 700; }

.kart-menu-liste small { color: var(--soluk); font-size: 11.5px; line-height: 1.4; }

/* Yıkıcı eylem kırmızı: kullanıcı listeyi okurken hangisinin geri
   alınamayacağını renkten de görüyor. */
.kart-menu-liste .yikici svg { fill: var(--kirmizi); }
.kart-menu-liste .yikici strong { color: var(--kirmizi); }

/* ── Geri alma şeridi ────────────────────────────────────────────── */
/* Arşive gönderme onay SORMUYOR; bunun yerine bir teklif duruyor.
   Kendi kendine kapanıyor: bir teklif, cevaplanmadan da geçip gitmeli. */
.geri-al-seridi {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: calc(100vw - 32px);
    padding: 12px 14px 12px 18px;
    border-radius: 14px;
    background: var(--lacivert);
    color: #fff;
    font-size: 13.5px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .28);
    transform: translateX(-50%);
}

.geri-al-seridi button {
    padding: 7px 13px;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 10px;
    background: none;
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.geri-al-seridi button:hover { background: rgba(255, 255, 255, .14); }

@media (max-width: 900px) {
    /* Alt menü çubuğu orada duruyor; şerit onun üstüne çıkıyor. */
    .geri-al-seridi { bottom: 92px; }
}

.bos-aciklama {
    max-width: 480px;
    margin: 0 auto 16px;
    color: var(--soluk);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════════════
   SINAV FORMU

   Zorunlu iki alan (ad + şablon) açıkta; puanlama ve isteğe bağlı
   bilgiler katlanır bölümlerde KAPALI başlıyor. Hepsinin çalışan bir
   varsayılanı var ve hiçbiri kaydetmeyi engellemiyor — açıkken form
   kalabalık görünüyor ve asıl iş ikinci plana düşüyordu.
   ════════════════════════════════════════════════════════════════════ */
.sinav-formu {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 720px;
    margin: 24px auto 0;
}

.sinav-formu-baslik,
.sinav-formu-baslik ~ .uyari {
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
}

.sinav-formu-baslik ~ .uyari { margin-top: 24px; margin-bottom: 0; }

.form-obek {
    padding: 18px 20px 20px;
    border: 1px solid var(--kenar);
    border-radius: 18px;
    background: var(--yuzey);
}

.form-obek h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -.2px;
}

.form-obek .ozellik-alan { margin-top: 14px; }

.ozellik-alan textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--kenar);
    border-radius: 10px;
    background: var(--yuzey);
    color: var(--yazi);
    font: inherit;
    font-size: 14.5px;
    resize: vertical;
}

.ozellik-alan textarea:focus { outline: none; border-color: var(--mavi); }
.ozellik-alan small { color: var(--silik); font-weight: 400; }

.sablon-ozeti {
    margin: 8px 0 0;
    color: var(--mavi);
    font-size: 13.5px;
    font-weight: 700;
}

.alan-notu {
    margin: 8px 0 0;
    color: var(--silik);
    font-size: 13px;
    line-height: 1.55;
}

.ipucu-simge { width: 15px; height: 15px; vertical-align: -2px; fill: currentColor; }

/* ── Katlanır bölüm ──────────────────────────────────────────────── */
/* Başlıktaki özet KAPALIYKEN de görünüyor: bölümü açmadan içindeki
   ayarların ne olduğu okunabilsin diye. */
.katlanir { padding: 0; }

.katlanir > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
}

.katlanir > summary::-webkit-details-marker { display: none; }

.katlanir > summary::after {
    content: "";
    width: 9px;
    height: 9px;
    margin-left: auto;
    border-right: 2px solid var(--soluk);
    border-bottom: 2px solid var(--soluk);
    transform: rotate(45deg) translate(-2px, -2px);
}

.katlanir[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.katlanir-baslik { display: flex; align-items: center; gap: 12px; min-width: 0; }

.katlanir-baslik > svg { width: 20px; height: 20px; flex: none; fill: var(--mavi); }

.katlanir-baslik > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.katlanir-baslik strong { font-size: 15.5px; font-weight: 800; }

.katlanir-baslik small { color: var(--soluk); font-size: 13px; line-height: 1.45; }

.katlanir-icerik {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 20px 20px;
}

.katlanir-icerik .ozellik-alan { margin: 0; }

.puan-alanlari.ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

@media (max-width: 560px) {
    .puan-alanlari.ikili { grid-template-columns: 1fr; }
}

/* ── Anahtar (switch) satırı ─────────────────────────────────────── */
.anahtar-satiri {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--kenar);
    border-radius: 14px;
    cursor: pointer;
}

.anahtar-satiri > span { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.anahtar-satiri strong { font-size: 14.5px; font-weight: 700; }

.anahtar-satiri small { color: var(--soluk); font-size: 13px; line-height: 1.45; }

.anahtar-kutu { width: 20px; height: 20px; accent-color: var(--mavi); }

.ceza-ayrinti { display: flex; flex-direction: column; gap: 10px; }

/* ── İptal özeti (formda yalnızca okunuyor) ──────────────────────── */
.iptal-ozeti {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 14px;
    border: 1px solid var(--kenar);
    border-radius: 14px;
    background: var(--yuzey-soluk);
}

.iptal-ozeti strong { display: block; font-size: 13.5px; font-weight: 700; }

.iptal-ozeti small { display: block; margin-top: 3px; color: var(--soluk); font-size: 12px; }

.iptal-kitapciklar { margin: 8px 0 0; padding: 0; list-style: none; }

.iptal-kitapciklar li { display: flex; gap: 8px; font-size: 12px; }

.iptal-kitapciklar span { color: var(--silik); }

.iptal-kitapciklar code { color: var(--kirmizi); font-weight: 700; }

.form-kaydet { display: flex; align-items: center; gap: 12px; }

.form-kaydet .dugme-dolu {
    margin: 0;
    border: 1px solid transparent;
    font-family: inherit;
    cursor: pointer;
}

/* ════════════════════════════════════════════════════════════════════
   CEVAP ANAHTARI

   Soru ızgarası BİR KEZ çiziliyor; kitapçık sekmeleri yalnızca seçili
   şıkları ve sayaçları değiştiriyor (bkz. anahtar.js).
   ════════════════════════════════════════════════════════════════════ */
.anahtar { max-width: 760px; margin: 24px auto 0; }

.anahtar-baslik,
.anahtar-baslik ~ .bilgi-seridi,
.anahtar-baslik ~ .bos-liste {
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
}

.anahtar-baslik ~ .bilgi-seridi,
.anahtar-baslik ~ .bos-liste { margin-top: 24px; margin-bottom: 0; }

.kitapcik-sekmeleri {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.kitapcik-sekme {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border: 1px solid var(--kenar);
    border-radius: 12px;
    background: var(--yuzey);
    color: var(--soluk);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.kitapcik-sekme:hover { border-color: var(--mavi); }

.kitapcik-sekme.acik {
    border-color: var(--mavi);
    background: var(--mavi);
    color: #fff;
}

.kitapcik-sayac { font-size: 11px; font-weight: 600; opacity: .85; }

.bilgi-seridi {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 14px;
    padding: 13px 15px;
    border: 1px solid color-mix(in srgb, var(--mavi) 30%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--mavi) 8%, transparent);
    font-size: 13px;
    line-height: 1.55;
}

.bilgi-seridi svg { width: 18px; height: 18px; flex: none; margin-top: 1px; fill: var(--mavi); }

/* ── İlerleme kartı ──────────────────────────────────────────────── */
.anahtar-ilerleme {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px 14px;
    padding: 15px 17px;
    border: 1px solid var(--kenar);
    border-radius: 17px;
    background: var(--yuzey);
}

.ilerleme-yazi { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.ilerleme-yazi strong { font-size: 15px; font-weight: 800; }

.ilerleme-yazi small { color: var(--soluk); font-size: 12.5px; }

.ilerleme-sayi { color: var(--mavi); font-size: 15px; font-weight: 800; }

.anahtar-ilerleme.tamam .ilerleme-sayi { color: var(--tamam); }

.ilerleme-cubuk {
    grid-column: 1 / -1;
    height: 7px;
    border-radius: 999px;
    background: var(--yuzey-soluk);
    overflow: hidden;
}

.ilerleme-cubuk span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--mavi);
}

.anahtar-ilerleme.tamam .ilerleme-cubuk span { background: var(--tamam); }

/* ── Toplu cevap girişi ─────────────────────────────────────────── */
.toplu-anahtar-karti {
    width: 100%; display: flex; align-items: center; gap: 12px;
    margin-top: 12px; padding: 14px; border: 1px solid var(--kenar);
    border-radius: 17px; background: var(--yuzey); color: var(--yazi);
    font: inherit; text-align: left; cursor: pointer;
}
.toplu-anahtar-karti:hover { border-color: var(--mavi); }
.toplu-anahtar-karti > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; gap: 2px; }
.toplu-anahtar-karti strong { font-size: 14.5px; font-weight: 800; }
.toplu-anahtar-karti small { color: var(--soluk); font-size: 12.5px; }
.toplu-anahtar-simge {
    display: grid; place-items: center; width: 40px; height: 40px; flex: none;
    border-radius: 12px; background: color-mix(in srgb, var(--mavi) 12%, transparent);
    color: var(--mavi); font-size: 23px; line-height: 1;
}
.toplu-anahtar-ok { color: var(--soluk); font-size: 25px; }
.toplu-anahtar-dialog {
    width: min(600px, calc(100% - 28px)); padding: 0; border: 1px solid var(--kenar);
    border-radius: 20px; background: var(--yuzey); color: var(--yazi);
}
.toplu-anahtar-dialog::backdrop { background: #080d1dcc; backdrop-filter: blur(2px); }
.toplu-anahtar-form { position: relative; display: grid; gap: 14px; padding: 24px; }
.toplu-anahtar-form .dialog-kapat { position: absolute; top: 12px; right: 14px; }
.toplu-anahtar-form h2 { margin: 0; font-size: 20px; }
.toplu-anahtar-form h2 + p { margin: 4px 0 0; color: var(--soluk); font-size: 13px; font-weight: 600; }
.toplu-anahtar-yardim { margin: 0; color: var(--soluk); font-size: 13px; line-height: 1.5; }
.toplu-anahtar-form label { font-size: 12.5px; font-weight: 750; }
.toplu-anahtar-form textarea {
    width: 100%; box-sizing: border-box; resize: vertical; min-height: 118px;
    padding: 13px 14px; border: 1px solid var(--kenar); border-radius: 13px;
    background: var(--zemin); color: var(--yazi); font: 600 15px/1.6 Outfit, sans-serif;
    letter-spacing: .08em;
}
.toplu-anahtar-form textarea:focus { outline: 2px solid color-mix(in srgb, var(--mavi) 35%, transparent); border-color: var(--mavi); }
.toplu-anahtar-not { margin: 0; padding: 10px 12px; border-radius: 11px; background: var(--bekleyen-halka); color: var(--bekleyen); font-size: 12.5px; }
.toplu-anahtar-durum { min-height: 22px; color: var(--soluk); font-size: 12.5px; line-height: 1.45; }
.toplu-anahtar-durum.hata { color: var(--kirmizi); }
.toplu-anahtar-durum.tamam { color: var(--tamam); }
.toplu-anahtar-eylemler { display: flex; justify-content: flex-end; gap: 9px; }
.toplu-anahtar-eylemler button { margin: 0; font-family: inherit; }
@media (max-width: 560px) {
    .toplu-anahtar-form { padding: 22px 16px 16px; }
    .toplu-anahtar-eylemler { flex-direction: column-reverse; }
    .toplu-anahtar-eylemler button { width: 100%; }
}

/* ── İptal kartı ─────────────────────────────────────────────────── */
.iptal-karti {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 12px;
    padding: 15px 17px;
    border: 1px solid color-mix(in srgb, var(--kirmizi) 35%, transparent);
    border-radius: 17px;
    background: color-mix(in srgb, var(--kirmizi) 7%, transparent);
}

.iptal-basligi strong { display: block; font-size: 14px; font-weight: 800; }

.iptal-basligi small { display: block; margin-top: 3px; color: var(--soluk); font-size: 12.5px; }

/* ── Soru kartları ───────────────────────────────────────────────── */
.sorular { margin-top: 18px; }

.blok-basligi {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0 10px;
    padding: 12px 14px;
    border: 1px solid var(--kenar);
    border-radius: 14px;
    background: var(--yuzey-soluk);
}

.blok-tur {
    color: var(--mavi);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.blok-basligi strong {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blok-adet {
    flex: none;
    padding: 4px 9px;
    border: 1px solid var(--kenar);
    border-radius: 999px;
    background: var(--yuzey);
    font-size: 10.5px;
    font-weight: 700;
}

.soru-karti {
    margin-bottom: 10px;
    padding: 13px 14px;
    border: 1px solid color-mix(in srgb, var(--mavi) 28%, transparent);
    border-radius: 16px;
    background: var(--yuzey);
}

/* Cevabı girilmemiş soru kehribar: sayfada gözle taranınca eksikler
   kendiliğinden öne çıkıyor. Uygulamanın "bekliyor" rengiyle aynı. */
.soru-karti.eksik { border-color: color-mix(in srgb, var(--bekleyen) 45%, transparent); }

.soru-karti.iptal {
    border-color: color-mix(in srgb, var(--kirmizi) 35%, transparent);
    background: color-mix(in srgb, var(--kirmizi) 6%, transparent);
}

.soru-karti header { display: flex; align-items: center; gap: 10px; }

.soru-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 11px;
    background: color-mix(in srgb, var(--mavi) 12%, transparent);
    color: var(--mavi);
    font-size: 13px;
    font-weight: 800;
}

.soru-karti.eksik .soru-no {
    background: var(--bekleyen-halka);
    color: var(--bekleyen);
}

.soru-baslik { flex: 1; font-size: 13.5px; font-weight: 800; }

.soru-secim {
    padding: 4px 10px;
    border: 1px solid color-mix(in srgb, var(--mavi) 30%, transparent);
    border-radius: 999px;
    color: var(--mavi);
    font-size: 10.5px;
    font-weight: 800;
}

.soru-karti.eksik .soru-secim {
    border-color: color-mix(in srgb, var(--bekleyen) 40%, transparent);
    background: var(--bekleyen-halka);
    color: var(--bekleyen);
}

.soru-iptal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: none;
    border: 1px solid var(--kenar);
    border-radius: 9px;
    background: none;
    cursor: pointer;
}

.soru-iptal svg { width: 15px; height: 15px; fill: var(--silik); }

.soru-iptal:hover { border-color: var(--kirmizi); }
.soru-iptal:hover svg { fill: var(--kirmizi); }

.soru-iptal[aria-pressed="true"] {
    border-color: var(--kirmizi);
    background: color-mix(in srgb, var(--kirmizi) 14%, transparent);
}

.soru-iptal[aria-pressed="true"] svg { fill: var(--kirmizi); }

/* Alternatif kipi: bir soruda birden çok şık tek başına doğru
   sayılabiliyor. Kapalıyken satır sessiz duruyor. */
.alternatif-satiri {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 11px;
    padding: 9px 11px;
    border: 1px solid var(--kenar);
    border-radius: 12px;
    cursor: pointer;
}

.alternatif-satiri input { margin-top: 2px; accent-color: var(--mavi); }

.alternatif-satiri span { display: flex; flex-direction: column; gap: 2px; }

.alternatif-satiri strong { font-size: 12.5px; font-weight: 700; }

.alternatif-satiri small { color: var(--soluk); font-size: 11.5px; line-height: 1.4; }

.alternatif-satiri:has(input:checked) {
    border-color: var(--mavi);
    background: color-mix(in srgb, var(--mavi) 7%, transparent);
}

.siklar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }

.sik {
    min-width: 46px;
    padding: 10px 12px;
    border: 1px solid var(--kenar);
    border-radius: 11px;
    background: var(--yuzey);
    color: var(--yazi);
    font: inherit;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
}

.sik:hover { border-color: var(--mavi); }

.sik[aria-pressed="true"] {
    border-color: var(--mavi);
    background: var(--mavi);
    color: #fff;
}

.sik:disabled { opacity: .45; cursor: default; }

/* İptal edilen soruda şıklar sönüyor ve yerini ne olacağını söyleyen
   satır alıyor: "iptal" tek başına puanın ne olduğunu söylemiyor. */
.iptal-notu { display: none; margin: 11px 0 0; color: var(--kirmizi); font-size: 12.5px; }
.iptal-notu p { margin: 0; }
.iptal-kip-secimi { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.iptal-kip-secimi button {
    border: 1px solid var(--kenar);
    border-radius: 999px;
    background: var(--zemin);
    color: var(--silik);
    padding: 7px 10px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.iptal-kip-secimi button[aria-pressed="true"] {
    border-color: var(--kirmizi);
    background: color-mix(in srgb, var(--kirmizi) 9%, var(--zemin));
    color: var(--kirmizi);
}

.soru-karti.iptal .alternatif-satiri,
.soru-karti.iptal .siklar { display: none; }

.soru-karti.iptal .iptal-notu { display: block; }

.anahtar-kaydet {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 18px;
    padding: 14px 0;
    background: linear-gradient(to top, var(--zemin) 70%, transparent);
}

.anahtar-kaydet .kayit-durumu { flex: 1; margin: 0; }

.anahtar-kaydet .dugme-dolu {
    margin: 0;
    border: 1px solid transparent;
    font-family: inherit;
    cursor: pointer;
}

/* ════════════════════════════════════════════════════════════════════
   SONUÇLAR
   ════════════════════════════════════════════════════════════════════ */
.sonuc-ozeti {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 15px 10px;
    border: 1px solid var(--kenar);
    border-radius: 18px;
    background: var(--yuzey);
}

.sonuc-ozeti > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    border-left: 1px solid var(--kenar);
}

.sonuc-ozeti > div:first-child { border-left: 0; }

.sonuc-ozeti strong { font-size: 20px; font-weight: 900; }

.sonuc-ozeti .vurgulu { color: var(--mavi); }

.sonuc-ozeti span { color: var(--silik); font-size: 10.5px; font-weight: 700; }

.puanlama-bilgisi { margin-top: 16px; max-width: 720px; }

.puan-satirlari { margin: 0; }

.puan-satirlari > div { padding: 10px 0; border-top: 1px solid var(--kenar); }

.puan-satirlari > div:first-child { border-top: 0; padding-top: 0; }

.puan-satirlari dt { color: var(--silik); font-size: 11.5px; font-weight: 700; }

.puan-satirlari dd { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; }

.iptal-satiri { display: block; }

.sonuc-arac-cubugu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

/* Arama kutusu lacivert şeridin DIŞINDA duruyor; oradaki beyaz üzerine
   yazılmış biçim burada okunmaz. */
.sonuc-arac-cubugu .ara input {
    border-color: var(--kenar);
    background: var(--yuzey);
    color: var(--yazi);
}

.sonuc-arac-cubugu .ara input::placeholder { color: var(--silik); }

.sonuc-arac-cubugu .ara-simge { fill: var(--silik); }

.sirala-form { display: flex; align-items: center; gap: 8px; }

.sirala-form label { display: inline-flex; align-items: center; gap: 7px; }

.sirala-form svg { width: 16px; height: 16px; fill: var(--silik); }

.sirala-form select {
    padding: 9px 10px;
    border: 1px solid var(--kenar);
    border-radius: 11px;
    background: var(--yuzey);
    color: var(--yazi);
    font: inherit;
    font-size: 13px;
}

.gizli-etiket {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.bolum-basligi button.dugme-cizgili {
    gap: 6px;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

.bolum-basligi button.dugme-cizgili svg { width: 15px; height: 15px; fill: currentColor; }

/* ── Öğrenci satırı ──────────────────────────────────────────────── */
.sonuc-listesi { display: flex; flex-direction: column; gap: 8px; }

.ogrenci-satiri {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid var(--kenar);
    border-radius: 15px;
    background: var(--yuzey);
}

.ogrenci-satiri.secili {
    border-color: var(--mavi);
    background: color-mix(in srgb, var(--mavi) 7%, transparent);
}

.ogrenci-sec input { width: 18px; height: 18px; accent-color: var(--mavi); }

.ogrenci-yazi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.ogrenci-yazi strong {
    font-size: 14.5px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ogrenci-yazi small { color: var(--soluk); font-size: 11.5px; font-weight: 600; }

.ogrenci-yazi:hover strong { color: var(--mavi); }

.ogrenci-sayaclar { display: flex; flex-wrap: wrap; gap: 6px; }

.rozet {
    padding: 4px 9px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 800;
}

.rozet.dogru { background: color-mix(in srgb, var(--tamam) 14%, transparent); color: var(--tamam); }
.rozet.yanlis { background: color-mix(in srgb, var(--kirmizi) 14%, transparent); color: var(--kirmizi); }
.rozet.bos { background: var(--yuzey-soluk); color: var(--silik); }
.rozet.coklu { background: color-mix(in srgb, var(--bekleyen) 16%, transparent); color: var(--bekleyen); }
.rozet.iptal { background: color-mix(in srgb, var(--kirmizi) 10%, transparent); color: var(--kirmizi); }

.ogrenci-puan { display: flex; flex-direction: column; align-items: flex-end; }

.ogrenci-puan strong { font-size: 18px; font-weight: 900; }

.ogrenci-puan small { color: var(--silik); font-size: 10.5px; font-weight: 600; }

.satir-sil {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: color-mix(in srgb, var(--kirmizi) 10%, transparent);
    cursor: pointer;
}

.satir-sil svg { width: 15px; height: 15px; fill: var(--kirmizi); }

.satir-sil:hover { border-color: color-mix(in srgb, var(--kirmizi) 45%, transparent); }

@media (max-width: 700px) {
    /* Dar ekranda sayaçlar alt satıra iniyor; puan ve silme sağda kalıyor. */
    .ogrenci-satiri { grid-template-columns: auto 1fr auto auto; }
    .ogrenci-sayaclar { grid-column: 2 / -1; }
}

/* ── Seçim çubuğu ────────────────────────────────────────────────── */
.secim-cubugu {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 12px 16px;
    border: 1px solid var(--kenar);
    border-radius: 15px;
    background: var(--yuzey);
    box-shadow: 0 -6px 24px var(--golge);
}

.secim-cubugu span { flex: 1; font-size: 13.5px; font-weight: 800; }

.secim-cubugu .dugme-cizgili {
    background: none;
    font-family: inherit;
    cursor: pointer;
}

.secim-cubugu .dugme-yikici { width: auto; margin: 0; }

/* ════════════════════════════════════════════════════════════════════
   ÖĞRENCİ SONUCU
   ════════════════════════════════════════════════════════════════════ */
.ogrenci-ozeti {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-bottom: 16px;
    padding: 16px 12px;
    border: 1px solid var(--kenar);
    border-radius: 18px;
    background: var(--yuzey);
}

@media (max-width: 700px) {
    .ogrenci-ozeti { grid-template-columns: repeat(3, 1fr); gap: 14px 8px; }
}

.ogrenci-ozeti > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.ogrenci-ozeti strong { font-size: 19px; font-weight: 900; }

.ogrenci-ozeti span { color: var(--silik); font-size: 10.5px; font-weight: 700; }

.ogrenci-puan-kutusu strong { color: var(--mavi); }

.olcum.dogru strong { color: var(--tamam); }
.olcum.yanlis strong { color: var(--kirmizi); }
.olcum.coklu strong { color: var(--bekleyen); }

.uyari-karti {
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--bekleyen) 40%, transparent);
    border-radius: 16px;
    background: var(--bekleyen-halka);
}

.uyari-karti h2 { margin: 0 0 8px; font-size: 14px; font-weight: 800; }

.uyari-karti ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }

/* ── Okuma görüntüleri ───────────────────────────────────────────── */
/* Halkalar SVG katmanında: konumlar sunucudan hazır geliyor ve çizim
   ölçekle birlikte kendiliğinden büyüyüp küçülüyor. */
.okuma-gorseli { margin: 0 0 18px; }

.okuma-gorseli figcaption {
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 800;
}

.gorsel-kutusu {
    position: relative;
    width: 100%;
    border: 1px solid var(--kenar);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.gorsel-kutusu img { display: block; width: 100%; height: 100%; }

.balon-katmani {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.balon-katmani circle {
    fill: none;
    stroke: #22DD88;
    stroke-width: 2.4;
    vector-effect: non-scaling-stroke;
}

/* ── Soru soru sonuç ─────────────────────────────────────────────── */
.cevap-aciklamasi { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }

.cevaplar { display: flex; flex-direction: column; gap: 8px; }

.cevap-karti {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid var(--kenar);
    border-left-width: 4px;
    border-radius: 14px;
    background: var(--yuzey);
}

.cevap-karti.dogru { border-left-color: var(--tamam); }
.cevap-karti.yanlis { border-left-color: var(--kirmizi); }
.cevap-karti.coklu { border-left-color: var(--bekleyen); }
.cevap-karti.bos { border-left-color: var(--bos); }
.cevap-karti.iptal { border-left-color: var(--kirmizi); opacity: .72; }

.cevap-yazi { display: flex; flex-wrap: wrap; gap: 4px 18px; min-width: 0; }

.cevap-satiri { display: inline-flex; align-items: baseline; gap: 6px; }

.cevap-etiket { color: var(--silik); font-size: 11px; font-weight: 700; }

.cevap-satiri strong { font-size: 13.5px; font-weight: 800; }

.sik-cipleri { display: flex; gap: 4px; }

.sik-cip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--kenar);
    border-radius: 7px;
    color: var(--silik);
    font-size: 11px;
    font-weight: 700;
}

/* Anahtar ince çerçeveyle, öğrencinin işareti dolu zeminle: ikisi aynı
   şıkta buluşuyorsa doğru cevabın nasıl verildiği tek bakışta okunuyor. */
.sik-cip.anahtar { border-color: var(--tamam); color: var(--tamam); }

.sik-cip.isaretli {
    border-color: var(--mavi);
    background: var(--mavi);
    color: #fff;
}

.cevap-durumu { font-size: 11.5px; font-weight: 800; }

.cevap-karti.dogru .cevap-durumu { color: var(--tamam); }
.cevap-karti.yanlis .cevap-durumu,
.cevap-karti.iptal .cevap-durumu { color: var(--kirmizi); }
.cevap-karti.coklu .cevap-durumu { color: var(--bekleyen); }
.cevap-karti.bos .cevap-durumu { color: var(--silik); }

.cevap-uyarisi {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--bekleyen);
    font-size: 11.5px;
}

@media (max-width: 640px) {
    .cevap-karti { grid-template-columns: auto 1fr auto; }
    .sik-cipleri { grid-column: 2 / -1; }
}
.sonuc-eylemleri {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.tehlike-obegi {
    border-color: color-mix(in srgb, #B42318 42%, var(--kenar));
}

.dugme-tehlike {
    min-height: 42px;
    border: 1px solid #B42318;
    border-radius: 10px;
    padding: 0 18px;
    color: #fff;
    background: #B42318;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.dugme-tehlike:hover { background: #912018; }
.dugme-tehlike:disabled { opacity: .55; cursor: wait; }

.tutorial-yardim {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 90;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: var(--lacivert, #22315F);
    box-shadow: 0 8px 24px rgb(0 0 0 / 24%);
    font: 600 22px/1 "Outfit", sans-serif;
    cursor: pointer;
}

.tutorial-pencere {
    width: min(480px, calc(100vw - 32px));
    border: 1px solid var(--kenar);
    border-radius: 18px;
    padding: 24px;
    color: var(--yazi);
    background: var(--yuzey);
    box-shadow: 0 28px 70px rgb(0 0 0 / 30%);
}

.tutorial-pencere::backdrop { background: rgb(12 18 38 / 58%); }
.tutorial-baslik, .tutorial-alt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.tutorial-baslik button {
    border: 0;
    color: var(--soluk);
    background: transparent;
    font: 400 28px/1 "Outfit", sans-serif;
    cursor: pointer;
}
.tutorial-rozet { color: var(--mavi); font-size: 11px; font-weight: 800; letter-spacing: .09em; }
.tutorial-pencere h2 { margin: 20px 0 8px; }
.tutorial-pencere p { min-height: 54px; margin: 0 0 24px; color: var(--soluk); line-height: 1.55; }
.tutorial-alt > div { display: flex; gap: 8px; }
.tutorial-pencere .dugme-cizgili:disabled {
    border-color: color-mix(in srgb, var(--mavi) 28%, transparent);
    background: color-mix(in srgb, var(--mavi) 10%, transparent);
    color: color-mix(in srgb, var(--mavi) 68%, var(--soluk));
    opacity: 1;
    cursor: default;
}
.tutorial-sayac { color: var(--soluk); font-size: 13px; }
.tutorial-vurgu { outline: 3px solid var(--mavi) !important; outline-offset: 5px; }

@media (max-width: 720px) {
    .sonuc-eylemleri { justify-content: stretch; }
    .sonuc-eylemleri > * { flex: 1 1 auto; justify-content: center; }
    .tutorial-yardim { right: 14px; bottom: 82px; }
}

/* ── Yasal metinler ve alt bilgi ──────────────────────────────────── */

/* Uzun metin. Satır uzunluğu 68 karakter civarında tutuluyor: tam genişlik
   bırakılsaydı göz satır sonundan bir sonraki satırın başına dönerken
   yerini kaybederdi. */
.yasal {
    max-width: 46rem;
    margin: 32px auto 56px;
    padding: 0 4px;
    line-height: 1.75;
    color: var(--yazi);
}

.yasal h1 {
    margin: 0 0 4px;
    font-size: 27px;
    font-weight: 900;
    letter-spacing: -.4px;
}

.yasal h2 {
    margin: 34px 0 10px;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -.2px;
}

.yasal h3 {
    margin: 22px 0 8px;
    font-size: 15px;
    font-weight: 800;
    color: var(--soluk);
}

.yasal p { margin: 0 0 13px; }
.yasal ul { margin: 0 0 15px; padding-left: 22px; }
.yasal li { margin-bottom: 7px; }
.yasal a { color: var(--mavi); }

.yasal-tarih {
    margin: 0 0 24px !important;
    color: var(--silik);
    font-size: 13px;
}

/* Kurumsal bilgiler doldurulmadan yayına çıkmasın diye. Göz ardı
   edilemeyecek kadar belirgin olmali — yayina cikmis bir placeholder
   metnin bedeli, metnin hic olmamasindan yuksek. */
.yasal-uyari {
    margin: 0 0 24px !important;
    padding: 14px 16px;
    border: 2px solid #B42318;
    border-radius: 12px;
    background: rgba(180, 35, 24, .08);
    line-height: 1.6;
}

.yasal-uyari code {
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--yuzey-soluk);
    font-size: .92em;
}

.site-alt-bilgi {
    padding: 22px 20px 30px;
    border-top: 1px solid var(--kenar);
    color: var(--silik);
    font-size: 13px;
    text-align: center;
}

.site-alt-bilgi a { color: var(--soluk); }
.site-alt-bilgi span { margin: 0 8px; }

/* ── Ortak responsive toparlama ────────────────────────────────────
   İçerik masaüstünde nefes alır; tablette yan menü kalkar; telefonda
   başlık, arama, kart ve eylemler tek sütuna iner. */
@media (max-width: 760px) {
    .karsilama,
    .karsilama-sablon {
        align-items: flex-start;
        flex-direction: column;
        height: auto;
        min-height: 0;
        padding: 28px 24px;
    }

    .karsilama-marka { width: 52px; height: 52px; }
    .karsilama .marka-etiket { line-height: 1.5; }
    .ara { width: 100%; min-width: 0; max-width: none; }
    .duraklar, .sinavlar, .sablonlar, .hazir-katalog { grid-template-columns: 1fr; }
    .yol-ikili { grid-template-columns: 1fr; }
    .bolum-basligi { align-items: flex-start; flex-wrap: wrap; }
    .ayarlar { max-width: none; }

    .destek-talep-karti,
    .sinav-satiri,
    .sablon-ust { min-width: 0; }
}

@media (max-width: 560px) {
    .ust-cubuk { min-height: 60px; padding: 8px 14px; }
    .ust-cubuk .marka { gap: 7px; }
    .ust-cubuk .marka > img:first-child { width: 30px; height: 30px; }
    .ust-cubuk .marka-yazisi { width: 78px; }
    .hesap { gap: 8px; }
    .cikis { padding: 7px 11px; }
    .kabuk { padding: 18px 14px 108px; }

    .karsilama,
    .karsilama-sablon { padding: 24px 20px; border-radius: 6px; }
    .karsilama h1, .karsilama-sablon h1 { font-size: 26px; }
    .duraklar, .yollar { margin-top: 14px; }
    .durak { min-height: 78px; padding: 15px; }
    .durak-yazi small, .yol-yazi small { overflow: visible; white-space: normal; }
    .sinav-karti, .sablon-karti, .ayar-obek, .bos-liste { padding: 17px; }
    .bolum-basligi { margin-top: 32px; }
    .bolum-basligi h2 { font-size: 19px; }

    .asama { font-size: 10.5px; }
    .asama-cizgi { margin-inline: 5px; }
    .dugme-dolu, .dugme-soluk, .dugme-cizgili { min-height: 44px; }

    .site-alt-bilgi { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; padding-bottom: 96px; }
    .site-alt-bilgi span { display: none; }
    .yasal { margin-top: 18px; padding-inline: 6px; font-size: 15px; line-height: 1.7; }
    .yasal h1 { font-size: 25px; }
}

/* ── Sınıflar ve öğrenci listeleri ─────────────────────────────── */
.liste-ust-eylem { display:flex; justify-content:flex-end; margin-top:24px; }
.sinif-kartlari { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; margin-top:24px; }
.sinif-karti { display:flex; justify-content:space-between; gap:18px; padding:22px; border:1px solid var(--kenar); border-radius:8px; background:var(--yuzey); }
.sinif-karti > a { flex:1; text-decoration:none; }.sinif-karti h2{margin:0 0 5px;font-size:18px}.sinif-karti p{margin:0 0 12px;color:var(--soluk);font-size:14px}.sinif-karti > div{display:flex;align-items:flex-start;gap:8px}.sinif-karti form{margin:0}
.sinif-dar,.sinif-formu{width:100%;max-width:760px;margin-inline:auto}.sinif-formu{margin-top:24px}.sinif-formu>.ozellik-alan,.sinif-formu>.ayar-alanlar{margin-top:16px}.sinif-formu>.dugme-dolu{justify-self:start;width:max-content;margin-top:20px}.sinif-formu input,.sinif-formu textarea{background:var(--yuzey);color:var(--yazi)}
.sinif-araclari{display:flex;align-items:flex-start;flex-wrap:wrap;gap:12px;margin-top:24px}.sinif-araclari>.ara{margin-right:auto}.sinif-araclari details{position:relative}.mini-form{display:grid;gap:12px;min-width:min(420px,calc(100vw - 48px));margin-top:10px;padding:18px;border:1px solid var(--kenar);border-radius:8px;background:var(--yuzey)}.mini-form input{min-height:44px;padding:10px 12px;border:1px solid var(--kenar);border-radius:8px;background:var(--yuzey);color:var(--yazi)}.mini-form>.dugme-dolu{justify-self:start;width:max-content}
.ogrenci-listesi{display:grid;gap:12px;margin-top:24px}.ogrenci-karti{display:flex;align-items:center;gap:16px;padding:15px 18px;border:1px solid var(--kenar);border-radius:8px;background:var(--yuzey)}.ogrenci-karti>a{display:grid;grid-template-columns:120px 1fr;flex:1;gap:14px;text-decoration:none}.ogrenci-karti span{color:var(--soluk)}
.sonuc-gecmis{display:grid;grid-template-columns:1fr auto;gap:4px 16px;margin-top:12px;padding:16px;border:1px solid var(--kenar);border-radius:8px;background:var(--yuzey);text-decoration:none}.sonuc-gecmis span{color:var(--soluk)}.sonuc-gecmis em{grid-column:2;grid-row:1/3;color:var(--mavi);font-style:normal}
.sonuc-kapsami{display:flex;gap:8px;margin:18px 0}.sonuc-kapsami a{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--kenar);border-radius:999px;color:var(--soluk);font-weight:700;text-decoration:none}.sonuc-kapsami a.secili{border-color:var(--mavi);background:color-mix(in srgb,var(--mavi) 13%,var(--yuzey));color:var(--mavi)}.sonuc-kapsami span{display:inline-grid;min-width:22px;height:22px;padding:0 6px;place-items:center;border-radius:999px;background:var(--yuzey-soluk);font-size:12px}.girmeyen-listesi .ogrenci-satiri{grid-template-columns:auto 1fr}.girdi-durumu{display:inline-flex;align-items:center;align-self:center;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:800}.girdi-durumu.girmedi{background:color-mix(in srgb,var(--bekleyen) 15%,transparent);color:var(--bekleyen)}
.kota-ozeti{display:grid;gap:8px;margin-top:16px}.kota-ozeti>div{display:flex;justify-content:space-between;gap:16px;color:var(--soluk)}.kota-ozeti progress{width:100%;height:9px;border:0;border-radius:999px;overflow:hidden;background:var(--yuzey-soluk);accent-color:var(--mavi)}.kota-doldu{display:grid;gap:6px;margin-top:16px;padding:15px 17px;border:1px solid color-mix(in srgb,var(--kirmizi) 45%,var(--kenar));border-radius:12px;background:color-mix(in srgb,var(--kirmizi) 9%,var(--yuzey));color:var(--metin)}.kota-doldu strong{color:var(--kirmizi)}.kota-doldu p{margin:0;color:var(--soluk);line-height:1.55}
.arsiv-kartlari{margin-top:24px}.sablon-eylemler{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap}.sablon-eylemler form{display:flex;min-width:0;margin:0}.sablon-eylemler form .kart-eylem{width:auto;padding-inline:16px}

/* Sonuç Excel kapsam seçicisi */
.xlsx-secim { position: relative; }
.xlsx-secim > summary { list-style: none; cursor: pointer; user-select: none; }
.xlsx-secim > summary::-webkit-details-marker { display: none; }
.xlsx-secim[open] > summary { border-color: var(--mavi); color: var(--mavi); }
.xlsx-secim-menu { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; display: grid; width: min(330px, calc(100vw - 32px)); padding: 7px; background: var(--yuzey); border: 1px solid var(--kenar); border-radius: 14px; box-shadow: 0 14px 34px var(--golge); }
.xlsx-secim-menu a, .xlsx-secim-kapali { display: grid; gap: 2px; padding: 11px 12px; color: var(--yazi); border-radius: 9px; text-decoration: none; }
.xlsx-secim-menu a:hover { background: var(--yuzey-soluk); }
.xlsx-secim-menu strong { font-size: 14px; font-weight: 600; }
.xlsx-secim-menu small { color: var(--silik); font-size: 12px; line-height: 1.35; }
.xlsx-secim-kapali { opacity: .62; }

@media (max-width: 620px) {
  .xlsx-secim, .xlsx-secim > summary { width: 100%; }
  .xlsx-secim-menu { right: auto; left: 0; }
}
.kayitli-sinif-secimi{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-top:10px}.kayitli-sinif-secimi label{display:flex;align-items:center;gap:10px;min-height:48px;padding:11px 13px;border:1px solid var(--kenar);border-radius:8px;background:var(--yuzey);cursor:pointer}.kayitli-sinif-secimi input{width:18px;height:18px;flex:0 0 auto}.kayitli-sinif-secimi span{display:flex;flex-direction:column}.kayitli-sinif-secimi small{color:var(--soluk)}
.aktarma-onizleme{max-width:1000px}.aktarma-tablosu{overflow:auto;margin-top:18px;border:1px solid var(--kenar);border-radius:8px}.aktarma-tablosu table{width:100%;border-collapse:collapse;min-width:720px}.aktarma-tablosu th,.aktarma-tablosu td{padding:12px 14px;border-bottom:1px solid var(--kenar);text-align:left}.aktarma-tablosu th{background:var(--yuzey-ikincil);font-weight:600}.aktarma-tablosu tr:last-child td{border-bottom:0}.aktarma-tablosu .hatali-satir td{color:var(--hata);background:color-mix(in srgb,var(--hata) 7%,transparent)}.aktarma-onizleme .form-eylemleri{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
@media(max-width:700px){.sinif-karti{flex-direction:column}.sinif-karti>div{flex-wrap:wrap}.ogrenci-karti>a{grid-template-columns:1fr}.sinif-araclari>.ara{width:100%;margin-right:0}.mini-form{min-width:calc(100vw - 56px)}}

@media (max-width: 390px) {
    .alt-menu { right: 6px; bottom: 6px; left: 6px; padding-inline: 2px; }
    .alt-menu .menu-simge { padding-inline: 12px; }
    .alt-menu a { font-size: 10px; }
    .ust-cubuk .marka-yazisi { width: 70px; }
    .avatar { width: 29px; height: 29px; }
}

/* ════════════════════════════════════════════════════════════════════
   UYGULAMA KABUĞU — sabit sol menü + sade üst çubuk
   ════════════════════════════════════════════════════════════════════ */
:root { --menu-genislik: 248px; }

/* Kısa sayfalarda alt bilgiyi içerikten hemen sonra havada bırakma. */
body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.kabuk { flex: 1 0 auto; }

.uygulama-menusu {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: var(--menu-genislik);
    border-right: 1px solid var(--kenar);
    background: var(--yuzey);
    transition: transform .2s ease;
}

.menu-marka-satiri {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
    padding: 10px 14px 10px 18px;
    border-bottom: 1px solid var(--kenar);
}

.menu-marka-satiri .marka {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    text-decoration: none;
}

.menu-logo-toggle {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.menu-marka-satiri .marka-yazisi { width: 98px; height: auto; }

.uygulama-menusu .yan-menu {
    position: static;
    width: auto;
    margin: 0;
    padding: 18px 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.uygulama-menusu .yan-menu a { min-height: 46px; padding: 11px 13px; border-radius: 8px; }
.uygulama-menusu .yan-menu a.acik { background: color-mix(in srgb, var(--mavi) 11%, transparent); }

.uygulama-girisli .ust-cubuk,
.uygulama-girisli .kabuk,
.uygulama-girisli .site-alt-bilgi {
    margin-left: var(--menu-genislik);
    transition: margin-left .2s ease;
}

.uygulama-girisli .kabuk {
    display: block;
    width: auto;
    max-width: none;
    margin-right: 0;
}

/* İçerik, menüden sonra kalan kullanılabilir alanın tam ortasında durur. */
.uygulama-girisli .icerik {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
}

/* Liste sayfalarında başlık, başlangıç kutuları ve sonuç kartları
   arasında aynı dikey ritim kullanılır. */
.karsilama + .yollar,
.karsilama + .bos-liste,
.karsilama + .uyari,
.karsilama + .bolum-basligi,
.yollar + .bos-liste,
.yollar + .uyari,
.yollar + .bolum-basligi {
    margin-top: 24px;
}
.menu-kapali .uygulama-menusu { transform: translateX(-100%); }
.menu-kapali .ust-cubuk,
.menu-kapali .kabuk,
.menu-kapali .site-alt-bilgi { margin-left: 0; }

.ust-sol { display: flex; align-items: center; min-width: 42px; }

.menu-ac {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--yazi);
    cursor: pointer;
}

.menu-ac:hover { background: var(--yuzey-soluk); }
.menu-ac span { display: block; width: 18px; height: 1.5px; border-radius: 2px; background: currentColor; }
.menu-ac img { display: block; width: 32px; height: 32px; }

/* Menü açıkken kapatma düğmesi zaten menünün içindedir. */
.uygulama-girisli:not(.menu-kapali) .menu-ac { display: none; }
.uygulama-girisli:not(.menu-kapali) .ust-sol { min-width: 0; }

.sadece-x,
.dialog-kapat,
.pencere-kapat,
[data-tutorial-kapat] {
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.sadece-x {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--soluk);
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
}

.sadece-x:hover,
.sadece-x:focus,
.sadece-x:focus-visible,
.dialog-kapat:hover,
.dialog-kapat:focus,
.dialog-kapat:focus-visible,
.pencere-kapat:hover,
.pencere-kapat:focus,
.pencere-kapat:focus-visible,
[data-tutorial-kapat]:hover,
[data-tutorial-kapat]:focus,
[data-tutorial-kapat]:focus-visible {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--yazi);
    opacity: .72;
}

.hesap-menusu { position: relative; }
.hesap-menusu summary {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 5px 8px;
    border-radius: 9px;
    cursor: pointer;
    list-style: none;
}
.hesap-menusu summary::-webkit-details-marker { display: none; }
.hesap-menusu summary:hover { background: var(--yuzey-soluk); }
.hesap-adi { max-width: 180px; overflow: hidden; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.hesap-ok { width: 17px; height: 17px; fill: var(--soluk); transform: rotate(90deg); transition: transform .15s ease; }
.hesap-menusu[open] .hesap-ok { transform: rotate(-90deg); }
.hesap-acilir {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    width: min(260px, calc(100vw - 28px));
    padding: 10px;
    border: 1px solid var(--kenar);
    border-radius: 10px;
    background: var(--yuzey);
    box-shadow: 0 16px 40px var(--golge);
}
.hesap-eposta { display: block; padding: 7px 9px 11px; overflow: hidden; border-bottom: 1px solid var(--kenar); color: var(--silik); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.hesap-acilir form { margin: 6px 0 0; }
.hesap-cikis { width: 100%; padding: 10px; border: 0; border-radius: 7px; background: transparent; color: var(--yazi); font-weight: 700; text-align: left; cursor: pointer; }
.hesap-cikis:hover { background: var(--yuzey-soluk); color: var(--mavi); }

.menu-perdesi { display: none; }

.site-alt-bilgi {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 10px 16px;
    background: var(--yuzey);
    font-size: 11.5px;
    line-height: 1.2;
}

@media (max-width: 900px) {
    .uygulama-menusu { width: min(286px, calc(100vw - 54px)); transform: translateX(-100%); box-shadow: 18px 0 48px rgba(12, 20, 43, .18); }
    .menu-acik .uygulama-menusu { transform: translateX(0); }
    .uygulama-girisli .ust-cubuk,
    .uygulama-girisli .kabuk,
    .uygulama-girisli .site-alt-bilgi { margin-left: 0; }
    .menu-perdesi { position: fixed; inset: 0; z-index: 25; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(11, 16, 32, .38); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
    .menu-acik .menu-perdesi { display: block; opacity: 1; pointer-events: auto; }
    .uygulama-menusu .yan-menu { display: block; }
    .menu-ac { display: inline-flex !important; }
    .menu-acik .menu-ac { visibility: hidden; }
    .site-alt-bilgi { padding-bottom: 10px; }
    .menu-kapat-simge svg { display: none; }
    .menu-kapat-simge::before {
        content: "×";
        font-size: 23px;
        font-weight: 400;
        line-height: 1;
    }
}

@media (max-width: 560px) {
    .hesap-adi { max-width: 122px; }
    .site-alt-bilgi { gap: 5px 10px; min-height: 36px; padding: 9px 10px; }
}

/* ════════════════════════════════════════════════════════════════════
   2026 AÇIK GÖRÜNÜM — dashboard, uygulama kabuğu ve mağaza penceresi
   ════════════════════════════════════════════════════════════════════ */
.ekran-okuyucu {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body.uygulama-girisli {
    --menu-genislik: clamp(232px, 19vw, 286px);
    --menu-ofset: 0px;
    background:
        radial-gradient(circle at 24% 8%, rgba(189, 215, 255, .25), transparent 26%),
        linear-gradient(145deg, #fff 0%, #f8fbff 48%, #fff 100%);
}

.uygulama-girisli .uygulama-menusu {
    top: 0;
    bottom: 0;
    left: var(--menu-ofset);
    width: var(--menu-genislik);
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background:
        radial-gradient(ellipse at 10% 96%, rgba(116, 169, 255, .31), transparent 34%),
        radial-gradient(ellipse at 110% 86%, rgba(199, 220, 255, .42), transparent 31%),
        rgba(247, 251, 255, .94);
    box-shadow: none;
    backdrop-filter: blur(18px);
}

.uygulama-girisli .menu-marka-satiri {
    height: 80px;
    padding: 15px 20px 10px 24px;
    border-bottom: 0;
}

.uygulama-girisli .menu-marka-satiri .marka { gap: 12px; }
.uygulama-girisli .menu-marka-satiri .marka > img:first-child { width: 37px; height: 37px; }
.uygulama-girisli .menu-marka-satiri .marka-yazisi { width: 108px; }

.menu-kapat {
    display: inline-grid;
    flex: none;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #274484;
    line-height: 1;
    cursor: pointer;
}
.menu-kapat-simge {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
}
.menu-kapat-simge svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
    transform: rotate(180deg);
}
.menu-kapat:hover { background: rgba(24, 104, 236, .08); }

.menu-arama,
.genel-arama {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(221, 231, 246, .78);
    background: rgba(255, 255, 255, .78);
    color: #6d82bd;
    box-shadow: 0 10px 30px rgba(53, 99, 166, .05);
}

.menu-arama {
    height: 48px;
    margin: 8px 18px 16px;
    padding: 0 16px;
    border-radius: 14px;
}

.menu-arama svg,
.genel-arama svg { flex: none; width: 20px; height: 20px; fill: currentColor; }

.menu-arama input,
.genel-arama input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #0a174d;
    font: inherit;
}

.menu-arama input { font-size: 14px; }
.menu-arama input::placeholder,
.genel-arama input::placeholder { color: #7d93cc; opacity: 1; }

.uygulama-girisli .uygulama-menusu .yan-menu { padding: 0 18px 20px; }
.uygulama-girisli .uygulama-menusu .yan-menu ul { gap: 6px; }
.uygulama-girisli .uygulama-menusu .yan-menu a {
    min-height: 54px;
    gap: 14px;
    padding: 10px 16px;
    border: 1px solid rgba(229, 236, 247, .75);
    border-radius: 14px;
    background: rgba(255, 255, 255, .72);
    color: #0b174d;
    font-size: 15px;
    font-weight: 500;
    box-shadow: 0 7px 25px rgba(53, 99, 166, .035);
}

.uygulama-girisli .uygulama-menusu .yan-menu a:hover {
    border-color: rgba(31, 112, 239, .15);
    background: rgba(242, 247, 255, .96);
}

.uygulama-girisli .uygulama-menusu .yan-menu a.acik {
    border-color: transparent;
    background: linear-gradient(100deg, rgba(215, 231, 255, .96), rgba(191, 216, 255, .68));
    color: #0769e8;
    font-weight: 600;
}

.uygulama-girisli .yan-menu .menu-simge { display: inline-flex; flex: none; }
.uygulama-girisli .yan-menu svg { width: 23px; height: 23px; color: #405886; }
.uygulama-girisli .yan-menu a.acik svg { color: #0870ed; }
.uygulama-girisli .yan-menu .menu-ok { width: 19px; height: 19px; margin-left: auto; color: #31549a; }

.uygulama-girisli .ust-cubuk,
.uygulama-girisli .kabuk,
.uygulama-girisli .site-alt-bilgi {
    margin-left: calc(var(--menu-genislik) + var(--menu-ofset));
    margin-right: 0;
}

.uygulama-girisli .ust-cubuk {
    top: 0;
    min-height: 78px;
    padding: 12px clamp(22px, 2.5vw, 34px);
    border: 0;
    border-radius: 0;
    background: rgba(250, 252, 255, .6);
    box-shadow: none;
}

.genel-arama {
    width: min(420px, 43vw);
    height: 46px;
    padding: 0 18px;
    border-radius: 16px;
}
.genel-arama input { font-size: 14px; }

.ust-eylemler { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); margin-left: auto; }
.bildirim-simgesi { display: inline-grid; width: 42px; height: 42px; place-items: center; color: #050b52; }
.bildirim-simgesi svg { width: 26px; height: 26px; fill: currentColor; }
.uygulama-girisli .hesap-menusu summary { gap: 13px; padding: 5px 0; }
.uygulama-girisli .hesap-menusu summary:hover { background: transparent; }
.uygulama-girisli .avatar { width: 42px; height: 42px; }
.uygulama-girisli .avatar-harf {
    background: linear-gradient(135deg, #a028d8, #7626b4);
    color: #fff;
    font-size: 19px;
    font-weight: 500;
}
.uygulama-girisli .hesap-adi { max-width: 180px; color: #070d43; font-size: 14px; font-weight: 500; }
.uygulama-girisli .hesap-ok { width: 19px; height: 19px; fill: #173781; }

.uygulama-girisli .kabuk {
    flex: 1 0 auto;
    padding: 12px clamp(22px, 2.5vw, 34px) 22px;
    border: 0;
    background: transparent;
}

.uygulama-girisli .icerik { max-width: none; }

.uygulama-girisli .karsilama {
    position: relative;
    justify-content: space-between;
    height: 180px;
    padding: 28px 32px;
    border: 1px solid rgba(192, 215, 249, .8);
    border-radius: 18px;
    background:
        radial-gradient(circle at 86% 52%, rgba(255, 255, 255, .8) 0 10%, transparent 10.2% 17%, rgba(214, 231, 255, .52) 17.2% 25%, transparent 25.2%),
        radial-gradient(circle at 75% 105%, rgba(212, 230, 255, .58), transparent 32%),
        linear-gradient(118deg, rgba(255, 255, 255, .86), rgba(219, 234, 255, .9));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}

.karsilama-yazi { position: relative; z-index: 1; }
.uygulama-girisli .karsilama .marka-etiket {
    margin: 0 0 16px;
    color: #6986c7;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
}
.uygulama-girisli .karsilama h1 {
    color: #050942;
    font-size: clamp(32px, 3.2vw, 42px);
    font-weight: 600;
    letter-spacing: -1.8px;
    line-height: 1;
}
.karsilama-alt { margin: 11px 0 0; color: #7892ce; font-size: 19px; line-height: 1.2; }
.karsilama-gorsel {
    display: grid;
    position: relative;
    z-index: 1;
    flex: 0 0 150px;
    height: 100%;
    place-items: center;
}
.uygulama-girisli .karsilama-marka {
    width: 82px;
    height: 82px;
    filter: drop-shadow(0 12px 20px rgba(24, 89, 183, .18));
}

.uygulama-girisli .duraklar { gap: 14px; margin-top: 20px; }
.uygulama-girisli .durak {
    min-height: 94px;
    gap: 17px;
    padding: 14px 16px;
    border-color: #e4ebf6;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(53, 99, 166, .04);
}
.durak-simge {
    display: inline-grid;
    flex: none;
    width: 66px;
    height: 66px;
    place-items: center;
    border-radius: 16px;
}
.durak-simge svg { width: 34px; height: 34px; fill: currentColor; }
.durak-simge-mavi { background: linear-gradient(145deg, #e7f1ff, #d6e7ff); color: #076ff0; }
.durak-simge-mor { background: linear-gradient(145deg, #eee5ff, #e0d3ff); color: #832de8; }
.uygulama-girisli .durak-yazi strong { color: #080d48; font-size: 18px; font-weight: 600; }
.uygulama-girisli .durak-yazi small { margin-top: 5px; color: #5f79bd; font-size: 14px; }
.uygulama-girisli .durak-ok { width: 21px; height: 21px; fill: #24488e; }

.uygulama-girisli .bolum-basligi { margin: 32px 0 14px; }
.uygulama-girisli .bolum-basligi h2 { color: #080d48; font-size: 24px; font-weight: 600; }
.uygulama-girisli .yeni-sinav {
    gap: 8px;
    min-height: 44px;
    padding: 8px 18px;
    border-radius: 15px;
    background: rgba(224, 236, 255, .78);
    color: #086ce8;
    font-size: 14px;
    font-weight: 500;
}
.uygulama-girisli .yeni-sinav svg { width: 20px; height: 20px; }
.uygulama-girisli .sinavlar { display: flex; flex-direction: column; gap: 16px; }
.uygulama-girisli .sinav-karti {
    min-height: 160px;
    padding: 18px 26px;
    border-color: #e3ebf6;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(53, 99, 166, .035);
}
.uygulama-girisli .sinav-karti.one-cikan { border-color: #dce8f7; }
.uygulama-girisli .sinav-karti h3 { color: #080d48; font-size: 16px; font-weight: 600; }
.uygulama-girisli .sinav-karti time { color: #7189c8; font-size: 13px; }
.uygulama-girisli .alt-bilgi { margin-top: 5px; color: #7089c9; font-size: 13px; }
.uygulama-girisli .asama-seridi { margin: 10px 0 12px; }
.uygulama-girisli .asama { gap: 7px; font-size: 13px; font-weight: 500; }
.uygulama-girisli .asama-nokta { width: 20px; height: 20px; border-width: 2px; }
.uygulama-girisli .asama-nokta svg { width: 15px; height: 15px; }
.uygulama-girisli .asama-cizgi { height: 2px; margin-inline: 14px; }
.uygulama-girisli .dugme-dolu,
.uygulama-girisli .dugme-soluk {
    min-height: 44px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
}
.uygulama-girisli .dugme-dolu svg,
.uygulama-girisli .dugme-soluk svg { width: 21px; height: 21px; }

.uygulama-girisli .site-alt-bilgi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 12px clamp(22px, 2.5vw, 34px);
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #7690cc;
    font-size: 13px;
    box-shadow: none;
}
.alt-bilgi-baglantilari { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0; }
.uygulama-girisli .site-alt-bilgi a,
.mobil-uygulama-ac { color: #7690cc; text-decoration: none; }
.mobil-uygulama-ac { padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer; }
.uygulama-girisli .site-alt-bilgi a:hover,
.mobil-uygulama-ac:hover { color: #086ce8; }
.uygulama-girisli .site-alt-bilgi small { color: #7690cc; font-size: 13px; }

.mobil-uygulama-dialog {
    width: min(820px, calc(100vw - 40px));
    max-width: none;
    max-height: calc(100vh - 40px);
    padding: 0;
    overflow: auto;
    border: 0;
    border-radius: 25px;
    background: transparent;
    color: #09204e;
    box-shadow: 0 30px 90px rgba(5, 19, 52, .28);
}
.mobil-uygulama-dialog::backdrop { background: rgba(23, 44, 80, .65); backdrop-filter: blur(7px); }
.mobil-dialog-icerik {
    position: relative;
    padding: 38px 44px 36px;
    overflow: hidden;
    border-radius: 25px;
    background:
        radial-gradient(circle at 99% 8%, rgba(213, 234, 255, .7), transparent 28%),
        radial-gradient(circle at 78% 43%, rgba(255, 255, 255, .96), transparent 27%),
        linear-gradient(140deg, #fff, #f9fcff);
}
.mobil-dialog-icerik::after {
    position: absolute;
    top: -130px;
    right: -92px;
    width: 310px;
    height: 430px;
    border-radius: 48%;
    background: rgba(220, 238, 255, .58);
    content: "";
    transform: rotate(-25deg);
    pointer-events: none;
}
.mobil-dialog-kapat {
    display: inline-grid;
    position: absolute;
    top: 33px;
    right: 36px;
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #657693;
    cursor: pointer;
}
.mobil-dialog-kapat:hover { background: rgba(20, 55, 108, .08); }
.mobil-dialog-kapat svg { width: 28px; height: 28px; fill: currentColor; }
.mobil-dialog-marka { display: flex; position: relative; z-index: 1; align-items: center; gap: 18px; }
.mobil-dialog-marka img:first-child {
    width: 68px;
    height: 68px;
    padding: 8px;
    border-radius: 18px;
    background: #edf6ff;
    box-shadow: 0 8px 20px rgba(23, 84, 166, .14);
}
.mobil-dialog-marka img:last-child { width: 150px; height: auto; }
.mobil-dialog-icerik h2 { position: relative; z-index: 1; margin: 34px 0 24px; color: #0b6ae6; font-size: 44px; font-weight: 600; letter-spacing: -1px; }
.mobil-dialog-icerik > p { position: relative; z-index: 1; margin: 0 0 24px; color: #536989; font-size: 18px; line-height: 1.4; }
.mobil-ozellikler { display: grid; position: relative; z-index: 1; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
.mobil-ozellikler span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 52px;
    padding: 10px 14px;
    border-radius: 999px;
    background: #edf5ff;
    color: #0c2859;
    font-size: 15px;
    white-space: nowrap;
}
.mobil-ozellikler svg { flex: none; width: 28px; height: 28px; fill: #0874ed; }
.magaza-baglantilari { display: grid; position: relative; z-index: 1; grid-template-columns: 1fr 1fr; gap: 24px; }
.magaza {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: 90px;
    padding: 16px 22px;
    border: 2px solid #dce6f4;
    border-radius: 20px;
    background: rgba(255, 255, 255, .72);
    color: #0b2b66;
    text-decoration: none;
    transition: transform .14s ease, border-color .14s ease, background-color .14s ease;
}
.magaza:hover { transform: translateY(-2px); border-color: #7db8ff; background: #f4f9ff; }
.magaza.app-store { border-color: #70affb; background: rgba(232, 244, 255, .68); }
.magaza > svg { flex: none; width: 42px; height: 42px; fill: currentColor; }
.magaza > .google-play-isareti .play-yesil { fill: #34a853; }
.magaza > .google-play-isareti .play-mavi { fill: #4285f4; }
.magaza > .google-play-isareti .play-kirmizi { fill: #ea4335; }
.magaza > .google-play-isareti .play-sari { fill: #fbbc04; }
.magaza > span { display: flex; flex-direction: column; }
.magaza small { color: #1974dc; font-size: 14px; font-weight: 700; letter-spacing: 1.6px; }
.magaza strong { font-size: 24px; font-weight: 600; line-height: 1.15; }

.menu-kapali .uygulama-girisli .uygulama-menusu { transform: translateX(-110%); }
body.menu-kapali .ust-cubuk,
body.menu-kapali .kabuk,
body.menu-kapali .site-alt-bilgi { margin-left: 0; border: 0; border-radius: 0; }

@media (max-width: 1120px) {
    .uygulama-girisli .karsilama { height: 165px; }
    .uygulama-girisli .karsilama h1 { font-size: 34px; }
    .karsilama-alt { font-size: 17px; }
    .uygulama-girisli .durak { min-height: 88px; gap: 14px; }
    .durak-simge { width: 60px; height: 60px; }
    .durak-simge svg { width: 31px; height: 31px; }
    .uygulama-girisli .durak-yazi strong { font-size: 17px; }
    .uygulama-girisli .durak-yazi small { font-size: 13px; }
    .mobil-ozellikler { gap: 10px; }
    .mobil-ozellikler span { gap: 8px; padding-inline: 10px; font-size: 14px; }
}

@media (max-width: 900px) {
    body.uygulama-girisli { --menu-ofset: 0px; }
    .uygulama-girisli .uygulama-menusu { top: 0; bottom: 0; left: 0; width: min(326px, calc(100vw - 54px)); border-radius: 0 26px 26px 0; }
    .uygulama-girisli .ust-cubuk,
    .uygulama-girisli .kabuk,
    .uygulama-girisli .site-alt-bilgi { margin-right: 0; margin-left: 0; }
    .uygulama-girisli .ust-cubuk { top: 0; min-height: 72px; border: 0; border-radius: 0; }
    .uygulama-girisli .kabuk { border-right: 0; }
    .uygulama-girisli .site-alt-bilgi { border-right: 0; border-bottom: 0; border-radius: 0; }
    .genel-arama { width: min(420px, 50vw); }
    .uygulama-girisli .menu-marka-satiri { padding-left: 28px; }
    .mobil-dialog-icerik { padding: 40px; }
}

@media (max-width: 760px) {
    .genel-arama { display: none; }
    .uygulama-girisli .ust-cubuk { padding-inline: 18px; }
    .ust-eylemler { margin-left: auto; }
    .uygulama-girisli .kabuk { padding: 18px 18px 28px; }
    .uygulama-girisli .karsilama { align-items: center; flex-direction: row; height: 156px; padding: 24px; }
    .uygulama-girisli .karsilama .marka-etiket { margin-bottom: 14px; font-size: 12px; }
    .uygulama-girisli .karsilama h1 { font-size: 32px; }
    .karsilama-alt { margin-top: 10px; font-size: 17px; }
    .karsilama-gorsel { flex-basis: 110px; }
    .uygulama-girisli .karsilama-marka { width: 76px; height: 76px; }
    .uygulama-girisli .duraklar { grid-template-columns: 1fr; }
    .uygulama-girisli .sinav-karti { padding: 20px; }
    .uygulama-girisli .site-alt-bilgi { align-items: center; flex-direction: column; justify-content: center; gap: 10px; padding: 18px; }
    .mobil-dialog-icerik { padding: 34px 28px 30px; }
    .mobil-dialog-icerik h2 { margin: 34px 0 20px; font-size: 42px; }
    .mobil-dialog-icerik > p { font-size: 18px; }
    .mobil-ozellikler { grid-template-columns: 1fr; }
    .magaza-baglantilari { grid-template-columns: 1fr; }
    .magaza { min-height: 90px; }
}

@media (max-width: 520px) {
    .bildirim-simgesi { display: none; }
    .uygulama-girisli .hesap-adi { display: none; }
    .uygulama-girisli .karsilama { height: auto; min-height: 168px; }
    .karsilama-gorsel { display: none; }
    .uygulama-girisli .durak { min-height: 92px; padding: 14px; }
    .durak-simge { width: 62px; height: 62px; border-radius: 16px; }
    .uygulama-girisli .durak-yazi strong { font-size: 17px; }
    .uygulama-girisli .bolum-basligi h2 { font-size: 23px; }
    .uygulama-girisli .yeni-sinav { min-height: 44px; padding-inline: 16px; font-size: 14px; }
    .uygulama-girisli .asama { gap: 5px; font-size: 12px; }
    .uygulama-girisli .asama-nokta { width: 19px; height: 19px; }
    .uygulama-girisli .asama-cizgi { margin-inline: 5px; }
    .mobil-uygulama-dialog { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
    .mobil-dialog-icerik { padding: 28px 20px 24px; }
    .mobil-dialog-kapat { top: 18px; right: 18px; }
    .mobil-dialog-marka img:first-child { width: 54px; height: 54px; }
    .mobil-dialog-marka img:last-child { width: 120px; }
    .mobil-dialog-icerik h2 { font-size: 36px; }
    .mobil-dialog-icerik > p { font-size: 16px; }
    .mobil-ozellikler span { min-height: 50px; font-size: 15px; }
    .magaza { min-height: 76px; padding: 14px 20px; }
    .magaza > svg { width: 40px; height: 40px; }
    .magaza strong { font-size: 23px; }
}

/* ── Son oran ve köşe düzeltmeleri ──────────────────────────────── */
.uygulama-girisli .tutorial-yardim { bottom: 78px; }

.uygulama-girisli .uygulama-menusu .yan-menu a {
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
}

.uygulama-girisli .uygulama-menusu .yan-menu a:hover {
    border: 0;
    background: rgba(221, 233, 250, .52);
}

.uygulama-girisli .uygulama-menusu .yan-menu a.acik {
    border: 0;
    background: linear-gradient(100deg, rgba(215, 231, 255, .88), rgba(195, 218, 252, .58));
}

.uygulama-girisli .karsilama-sablon h1 {
    color: #0a164d;
    font-weight: 600;
    letter-spacing: -.55px;
}

.uygulama-girisli .karsilama-sablon .marka-etiket {
    margin: 10px 0 0;
}

.uygulama-girisli .karsilama,
.uygulama-girisli .durak,
.uygulama-girisli .sinav-karti,
.uygulama-girisli .sablon-karti,
.uygulama-girisli .sinav-satiri,
.uygulama-girisli .sinif-karti,
.uygulama-girisli .ogrenci-karti,
.uygulama-girisli .ayar-obek,
.uygulama-girisli .bos-liste,
.uygulama-girisli .uyari,
.uygulama-girisli .uyari-karti,
.uygulama-girisli .destek-obek,
.uygulama-girisli .destek-talep-karti,
.uygulama-girisli .destek-detay-baslik,
.uygulama-girisli .mini-form,
.uygulama-girisli .sonuc-gecmis,
.uygulama-girisli .aktarma-tablosu,
.uygulama-girisli .hazirlanacak {
    border-radius: 10px;
}

.uygulama-girisli .menu-arama,
.uygulama-girisli .genel-arama,
.uygulama-girisli .ara input,
.uygulama-girisli input:not([type="radio"]):not([type="checkbox"]),
.uygulama-girisli select,
.uygulama-girisli textarea {
    border-radius: 8px;
}

.uygulama-girisli .dugme-dolu,
.uygulama-girisli .dugme-soluk,
.uygulama-girisli .dugme-cizgili,
.uygulama-girisli .kart-eylem,
.uygulama-girisli .yeni-sinav {
    border-radius: 9px;
}

.mobil-uygulama-dialog {
    width: min(700px, calc(100vw - 40px));
    border-radius: 16px;
}

.mobil-dialog-icerik {
    padding: 30px 34px 28px;
    border-radius: 16px;
}

.mobil-dialog-marka { gap: 14px; }
.mobil-dialog-marka img:first-child { width: 56px; height: 56px; border-radius: 12px; }
.mobil-dialog-marka img:last-child { width: 126px; }
.mobil-dialog-icerik > p { margin: 28px 0 20px; font-size: 16px; }
.mobil-ozellikler { gap: 10px; margin-bottom: 20px; }
.mobil-ozellikler span { min-height: 46px; padding: 8px 10px; border-radius: 12px; font-size: 13px; }
.mobil-ozellikler svg { width: 23px; height: 23px; }
.magaza-baglantilari { gap: 16px; }
.magaza { min-height: 78px; padding: 13px 17px; border-radius: 12px; }
.magaza > svg { width: 36px; height: 36px; }
.magaza small { font-size: 11px; }
.magaza strong { font-size: 21px; }
.mobil-dialog-kapat { top: 20px; right: 20px; }

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="acik"]) .uygulama-girisli .karsilama-sablon h1 { color: #e7ebf4; }
}

:root[data-tema="koyu"] .uygulama-girisli .karsilama-sablon h1 { color: #e7ebf4; }

@media (max-width: 720px) {
    .uygulama-girisli .tutorial-yardim { bottom: 74px; }
    .mobil-uygulama-dialog { width: calc(100vw - 24px); }
    .mobil-dialog-icerik { padding: 26px 22px 22px; }
    .mobil-dialog-icerik > p { margin-top: 24px; }
}

/* ── Geniş ekran ve tipografi dengesi ───────────────────────────── */
.uygulama-girisli .tutorial-yardim { bottom: 60px; }

.uygulama-girisli .icerik h1,
.uygulama-girisli .icerik h2,
.uygulama-girisli .icerik h3,
.uygulama-girisli .icerik legend {
    font-weight: 600;
}

.uygulama-girisli .icerik h4,
.uygulama-girisli .icerik h5,
.uygulama-girisli .icerik h6,
.uygulama-girisli .icerik strong,
.uygulama-girisli .icerik b,
.uygulama-girisli .icerik dt,
.uygulama-girisli .icerik th,
.uygulama-girisli .dugme-dolu,
.uygulama-girisli .dugme-soluk,
.uygulama-girisli .dugme-cizgili,
.uygulama-girisli .kart-eylem,
.uygulama-girisli .yeni-sinav {
    font-weight: 500;
}

@media (min-width: 1600px) {
    .uygulama-girisli .ust-cubuk,
    .uygulama-girisli .kabuk,
    .uygulama-girisli .site-alt-bilgi {
        padding-right: clamp(36px, 2.6vw, 64px);
        padding-left: clamp(36px, 2.6vw, 64px);
    }
}

@media (max-width: 720px) {
    .uygulama-girisli .tutorial-yardim { bottom: 68px; }
}

/* ════════════════════════════════════════════════════════════════════
   YENİ KABUĞUN AÇIK / KOYU TEMA YÜZEYLERİ
   Hard-coded açık renk bırakmamak için bütün yenilenen parçalar aynı
   semantik yüzey değişkenlerini kullanır.
   ════════════════════════════════════════════════════════════════════ */
body.uygulama-girisli {
    --app-arka-plan:
        radial-gradient(ellipse 52% 38% at 0% 0%, rgba(233, 245, 255, .38), transparent 72%),
        linear-gradient(rgba(255, 255, 255, .52), rgba(248, 252, 255, .44)),
        url("/img/pastel-isik-yumusak-dalgalar.png");
    --app-kabuk: rgba(250, 252, 255, .38);
    --app-sidebar: linear-gradient(180deg, rgba(251, 253, 255, .18), rgba(242, 248, 255, .1));
    --app-kart: #fff;
    --app-girdi: rgba(255, 255, 255, .82);
    --app-kenar: #dfe8f4;
    --app-baslik: #0a164d;
    --app-soluk: #667ba8;
    --app-hover: rgba(221, 233, 250, .52);
    --app-aktif: linear-gradient(100deg, rgba(215, 231, 255, .88), rgba(195, 218, 252, .58));
    --app-hero:
        radial-gradient(circle at 96% 18%, rgba(140, 191, 255, .08), transparent 42%),
        linear-gradient(118deg, rgba(255, 255, 255, .3), rgba(225, 239, 255, .18));
    --app-modal:
        radial-gradient(circle at 99% 8%, rgba(213, 234, 255, .7), transparent 28%),
        linear-gradient(140deg, #fff, #f9fcff);
    --app-simge-mavi: linear-gradient(145deg, #e7f1ff, #d6e7ff);
    --app-simge-mor: linear-gradient(145deg, #eee5ff, #e0d3ff);
    --app-modal-sekil: rgba(220, 238, 255, .58);
    --app-modal-etiket: #edf5ff;
    --app-magaza: rgba(255, 255, 255, .72);
    --app-magaza-hover: #f4f9ff;
    --app-magaza-vurgu: rgba(232, 244, 255, .68);
}

:root[data-tema="koyu"] body.uygulama-girisli {
    --app-arka-plan:
        linear-gradient(rgba(5, 10, 22, .91), rgba(8, 14, 28, .93)),
        url("/img/pastel-isik-yumusak-dalgalar.png");
    --app-kabuk: rgba(8, 14, 27, .2);
    --app-sidebar: linear-gradient(180deg, rgba(12, 20, 37, .2), rgba(7, 13, 25, .1));
    --app-kart: rgba(17, 27, 47, .86);
    --app-girdi: rgba(24, 36, 58, .84);
    --app-kenar: #34425d;
    --app-baslik: #f4f8ff;
    --app-soluk: #b9c5da;
    --app-hover: rgba(105, 132, 177, .14);
    --app-aktif: linear-gradient(100deg, rgba(69, 95, 138, .42), rgba(49, 70, 108, .34));
    --app-hero:
        radial-gradient(circle at 96% 18%, rgba(98, 132, 181, .08), transparent 42%),
        linear-gradient(118deg, rgba(18, 29, 49, .34), rgba(27, 41, 67, .22));
    --app-modal:
        radial-gradient(circle at 99% 8%, rgba(89, 124, 176, .2), transparent 28%),
        linear-gradient(140deg, #18243a, #101827);
    --app-simge-mavi: linear-gradient(145deg, rgba(27, 114, 232, .36), rgba(14, 68, 153, .62));
    --app-simge-mor: linear-gradient(145deg, rgba(132, 63, 216, .34), rgba(75, 42, 146, .6));
    --app-modal-sekil: rgba(83, 118, 170, .14);
    --app-modal-etiket: rgba(46, 65, 96, .64);
    --app-magaza: rgba(20, 31, 52, .88);
    --app-magaza-hover: rgba(31, 45, 72, .92);
    --app-magaza-vurgu: rgba(34, 53, 84, .88);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="acik"]) body.uygulama-girisli {
        --app-arka-plan:
            linear-gradient(rgba(5, 10, 22, .91), rgba(8, 14, 28, .93)),
            url("/img/pastel-isik-yumusak-dalgalar.png");
        --app-kabuk: rgba(8, 14, 27, .2);
        --app-sidebar: linear-gradient(180deg, rgba(12, 20, 37, .2), rgba(7, 13, 25, .1));
        --app-kart: rgba(17, 27, 47, .86);
        --app-girdi: rgba(24, 36, 58, .84);
        --app-kenar: #34425d;
        --app-baslik: #f4f8ff;
        --app-soluk: #b9c5da;
        --app-hover: rgba(105, 132, 177, .14);
        --app-aktif: linear-gradient(100deg, rgba(69, 95, 138, .42), rgba(49, 70, 108, .34));
        --app-hero:
            radial-gradient(circle at 96% 18%, rgba(98, 132, 181, .08), transparent 42%),
            linear-gradient(118deg, rgba(18, 29, 49, .34), rgba(27, 41, 67, .22));
        --app-modal:
            radial-gradient(circle at 99% 8%, rgba(89, 124, 176, .2), transparent 28%),
            linear-gradient(140deg, #18243a, #101827);
        --app-simge-mavi: linear-gradient(145deg, rgba(27, 114, 232, .36), rgba(14, 68, 153, .62));
        --app-simge-mor: linear-gradient(145deg, rgba(132, 63, 216, .34), rgba(75, 42, 146, .6));
        --app-modal-sekil: rgba(83, 118, 170, .14);
        --app-modal-etiket: rgba(46, 65, 96, .64);
        --app-magaza: rgba(20, 31, 52, .88);
        --app-magaza-hover: rgba(31, 45, 72, .92);
        --app-magaza-vurgu: rgba(34, 53, 84, .88);
    }
}

body.uygulama-girisli {
    background: var(--app-arka-plan);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.uygulama-girisli .uygulama-menusu {
    background: var(--app-sidebar);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    backdrop-filter: saturate(105%);
}
.uygulama-girisli .ust-cubuk { background: var(--app-kabuk); }
.uygulama-girisli .kabuk,
.uygulama-girisli .site-alt-bilgi { background: transparent; }

.uygulama-girisli .menu-arama,
.uygulama-girisli .genel-arama,
.uygulama-girisli .ara input,
.uygulama-girisli input:not([type="radio"]):not([type="checkbox"]),
.uygulama-girisli select,
.uygulama-girisli textarea {
    border-color: var(--app-kenar);
    background: var(--app-girdi);
    color: var(--yazi);
    box-shadow: none;
}

.uygulama-girisli .menu-arama,
.uygulama-girisli .genel-arama,
.uygulama-girisli .menu-arama input::placeholder,
.uygulama-girisli .genel-arama input::placeholder,
.uygulama-girisli .ara input::placeholder { color: var(--app-soluk); }

.uygulama-girisli .menu-kapat,
.uygulama-girisli .yan-menu a,
.uygulama-girisli .hesap-adi { color: var(--yazi); }
.uygulama-girisli .uygulama-menusu .yan-menu a { color: var(--yazi); }
.uygulama-girisli .yan-menu .menu-etiket { color: inherit; }
.uygulama-girisli .hesap-ok { fill: var(--app-soluk); }
.uygulama-girisli .yan-menu a:hover { background: var(--app-hover); }
.uygulama-girisli .yan-menu a.acik,
.uygulama-girisli .uygulama-menusu .yan-menu a.acik { background: var(--app-aktif); color: var(--mavi); }
.uygulama-girisli .yan-menu svg,
.uygulama-girisli .yan-menu .menu-ok { color: var(--app-soluk); }
.uygulama-girisli .yan-menu a.acik svg { color: var(--mavi); }

.uygulama-girisli .karsilama {
    border-color: var(--app-kenar);
    background: var(--app-hero);
    box-shadow: none;
    backdrop-filter: saturate(105%);
}

.uygulama-girisli .icerik,
.uygulama-girisli .icerik h1,
.uygulama-girisli .icerik h2,
.uygulama-girisli .icerik h3,
.uygulama-girisli .bolum-basligi h2,
.uygulama-girisli .durak-yazi strong,
.uygulama-girisli .sinav-karti h3 { color: var(--app-baslik); }

.uygulama-girisli .karsilama .marka-etiket,
.uygulama-girisli .karsilama-alt,
.uygulama-girisli .durak-yazi small,
.uygulama-girisli .alt-bilgi,
.uygulama-girisli .sinav-karti time { color: var(--app-soluk); }

.uygulama-girisli .durak,
.uygulama-girisli .sinav-karti,
.uygulama-girisli .sablon-karti,
.uygulama-girisli .sinav-satiri,
.uygulama-girisli .sinif-karti,
.uygulama-girisli .ogrenci-karti,
.uygulama-girisli .ayar-obek,
.uygulama-girisli .bos-liste,
.uygulama-girisli .uyari-karti,
.uygulama-girisli .destek-obek,
.uygulama-girisli .destek-talep-karti,
.uygulama-girisli .destek-detay-baslik,
.uygulama-girisli .mini-form,
.uygulama-girisli .sonuc-gecmis,
.uygulama-girisli .aktarma-tablosu,
.uygulama-girisli .hazirlanacak {
    border-color: var(--app-kenar);
    background: var(--app-kart);
    color: var(--yazi);
    box-shadow: none;
}

.uygulama-girisli .durak:hover { border-color: color-mix(in srgb, var(--mavi) 45%, var(--app-kenar)); }
.uygulama-girisli .durak-ok { fill: var(--app-soluk); }
.uygulama-girisli .durak-simge-mavi { background: var(--app-simge-mavi); }
.uygulama-girisli .durak-simge-mor { background: var(--app-simge-mor); }
.uygulama-girisli .yeni-sinav { background: var(--app-aktif); color: var(--mavi); }
.uygulama-girisli .site-alt-bilgi,
.uygulama-girisli .site-alt-bilgi a,
.uygulama-girisli .site-alt-bilgi small,
.uygulama-girisli .mobil-uygulama-ac { color: var(--app-soluk); }

.bos-liste .bos-aciklama {
    max-width: 480px;
    margin: 0 auto 16px;
    text-align: center;
}

.mobil-uygulama-dialog { color: var(--yazi); }
.mobil-dialog-icerik { background: var(--app-modal); }
.mobil-dialog-icerik::after { background: var(--app-modal-sekil); }
.mobil-dialog-kapat { color: var(--app-soluk); }
.mobil-dialog-marka img:first-child { background: var(--app-girdi); }
.mobil-dialog-icerik h2,
.mobil-ozellikler svg { color: var(--mavi); fill: var(--mavi); }
.mobil-dialog-icerik > p { color: var(--app-soluk); }
.mobil-ozellikler span { background: var(--app-modal-etiket); color: var(--app-baslik); }
.magaza { border-color: var(--app-kenar); background: var(--app-magaza); color: var(--app-baslik); }
.magaza:hover { border-color: var(--mavi); background: var(--app-magaza-hover); }
.magaza.app-store,
.magaza.google-play { border-color: var(--mavi); background: var(--app-magaza-vurgu); }
.magaza small { color: var(--mavi); }
.magaza .google-play-isareti { fill: initial; }

.mobil-dialog-marka .marka-yazisi { width: 126px; height: auto; }
.uygulama-girisli .tutorial-yardim { background: var(--mavi); color: #fff; }

/* ── Masaüstünde daraltılmış ikon menüsü ────────────────────────── */
@media (min-width: 901px) {
    body.uygulama-girisli { --menu-dar-genislik: 76px; }

    .uygulama-girisli .uygulama-menusu {
        overflow: visible;
        transition: width .2s ease, transform .2s ease, background-color .2s ease;
    }

    .uygulama-girisli .menu-marka-satiri { position: relative; }

    body.menu-kapali .uygulama-menusu {
        width: var(--menu-dar-genislik);
        transform: none;
    }

    body.menu-kapali .menu-marka-satiri {
        justify-content: center;
        height: 72px;
        padding: 12px;
    }

    body.menu-kapali .menu-marka-satiri .marka { gap: 0; }
    body.menu-kapali .menu-marka-satiri .marka > img:first-child { width: 38px; height: 38px; }
    body.menu-kapali .menu-marka-satiri .marka-yazisi { display: none; }

    body.menu-kapali .menu-kapat {
        position: absolute;
        top: 20px;
        right: -13px;
        width: 26px;
        height: 26px;
        border: 1px solid var(--app-kenar);
        border-radius: 7px;
        background: var(--app-kart);
        color: var(--app-soluk);
        box-shadow: 0 3px 10px var(--golge);
    }
    body.menu-kapali .menu-kapat-simge svg { transform: none; }

    body.menu-kapali .menu-arama {
        justify-content: center;
        width: 42px;
        height: 42px;
        margin: 8px auto 14px;
        padding: 0;
        border-radius: 9px;
    }

    body.menu-kapali .menu-arama input,
    body.menu-kapali .menu-arama .ekran-okuyucu { display: none; }

    body.menu-kapali .uygulama-menusu .yan-menu { padding: 0 14px 18px; }
    body.menu-kapali .uygulama-menusu .yan-menu ul { gap: 6px; }
    body.menu-kapali .uygulama-menusu .yan-menu a {
        justify-content: center;
        width: 48px;
        min-height: 48px;
        padding: 0;
        border-radius: 10px;
    }

    body.menu-kapali .uygulama-menusu .yan-menu .menu-etiket,
    body.menu-kapali .uygulama-menusu .yan-menu .menu-ok { display: none; }
    body.menu-kapali .uygulama-menusu .yan-menu svg { width: 23px; height: 23px; }

    body.menu-kapali .ust-cubuk,
    body.menu-kapali .kabuk,
    body.menu-kapali .site-alt-bilgi {
        margin-left: var(--menu-dar-genislik);
        border: 0;
        border-radius: 0;
    }

    .uygulama-girisli .menu-ac { display: none !important; }
}

/* ── Kompakt masaüstü ölçeği ──────────────────────────────────────
   Geniş ekranı doldururken bileşenleri gereksiz yere büyütmez. */
body.uygulama-girisli { --menu-genislik: clamp(210px, 16vw, 250px); }

.uygulama-girisli .menu-marka-satiri {
    height: 68px;
    padding: 12px 16px 8px 20px;
}
.uygulama-girisli .menu-marka-satiri .marka > img:first-child { width: 33px; height: 33px; }
.uygulama-girisli .menu-marka-satiri .marka-yazisi { width: 96px; }
.uygulama-girisli .menu-kapat { width: 32px; height: 32px; font-size: 21px; }
.uygulama-girisli .menu-arama {
    height: 42px;
    margin: 6px 15px 12px;
    padding-inline: 13px;
}
.uygulama-girisli .uygulama-menusu .yan-menu { padding: 0 15px 16px; }
.uygulama-girisli .uygulama-menusu .yan-menu ul { gap: 4px; }
.uygulama-girisli .uygulama-menusu .yan-menu a {
    min-height: 46px;
    gap: 12px;
    padding: 8px 13px;
    font-size: 14px;
}
.uygulama-girisli .yan-menu svg { width: 21px; height: 21px; }

.uygulama-girisli .ust-cubuk {
    min-height: 66px;
    padding: 9px clamp(18px, 2vw, 28px);
}
.uygulama-girisli .avatar { width: 38px; height: 38px; }
.uygulama-girisli .avatar-harf { font-size: 17px; }
.uygulama-girisli .kabuk { padding: 10px clamp(18px, 2vw, 28px) 18px; }

.uygulama-girisli .karsilama {
    height: 146px;
    min-height: 0;
    padding: 22px 26px;
}
.uygulama-girisli .karsilama .marka-etiket {
    margin-bottom: 12px;
    font-size: 11px;
    letter-spacing: 1.7px;
}
.uygulama-girisli .karsilama h1 { font-size: clamp(28px, 2.7vw, 36px); }
.uygulama-girisli .karsilama-alt { margin-top: 9px; font-size: 16px; }

.uygulama-girisli .duraklar { gap: 12px; margin-top: 14px; }
.uygulama-girisli .durak {
    min-height: 76px;
    gap: 13px;
    padding: 10px 13px;
}
.uygulama-girisli .durak-simge { width: 52px; height: 52px; border-radius: 12px; }
.uygulama-girisli .durak-simge svg { width: 28px; height: 28px; }
.uygulama-girisli .durak-yazi strong { font-size: 16px; }
.uygulama-girisli .durak-yazi small { margin-top: 3px; font-size: 12.5px; }
.uygulama-girisli .durak-ok { width: 18px; height: 18px; }

.uygulama-girisli .bolum-basligi { margin: 24px 0 10px; }
.uygulama-girisli .bolum-basligi h2 { font-size: 21px; }
.uygulama-girisli .yeni-sinav {
    min-height: 38px;
    padding: 6px 14px;
    font-size: 13px;
}
.uygulama-girisli .sinavlar,
.uygulama-girisli .sinav-listesi { gap: 12px; }
.uygulama-girisli .sinav-karti {
    min-height: 128px;
    padding: 14px 20px;
}
.uygulama-girisli .sinav-karti h3 { font-size: 15px; }
.uygulama-girisli .asama-seridi { margin: 8px 0 9px; }

.uygulama-girisli .sablon-karti,
.uygulama-girisli .sinav-satiri,
.uygulama-girisli .sinif-karti,
.uygulama-girisli .ogrenci-karti,
.uygulama-girisli .ayar-obek,
.uygulama-girisli .bos-liste,
.uygulama-girisli .uyari-karti,
.uygulama-girisli .destek-obek,
.uygulama-girisli .destek-talep-karti {
    padding: 14px 16px;
}

.uygulama-girisli .site-alt-bilgi {
    min-height: 44px;
    padding: 9px clamp(18px, 2vw, 28px);
    font-size: 12px;
}
.uygulama-girisli .site-alt-bilgi small { font-size: 12px; }

.uygulama-girisli .anahtar-kaydet {
    padding-block: 12px;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.uygulama-girisli .anahtar-kaydet .dugme-dolu {
    border-color: transparent;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--mavi) 16%, transparent);
}

/* Ayarlar sayfasında etiket, kontrol ve ardışık gruplar birbirine
   yapışmadan aynı dikey ritmi kullanır. */
.uygulama-girisli .ayarlar .ayar-aciklama { margin: 7px 0 18px; }
.uygulama-girisli .ayarlar .ayar-alanlar { row-gap: 16px; }
.uygulama-girisli .ayarlar .ozellik-alan { gap: 7px; }
.uygulama-girisli .ayarlar .ozellik-alan > span { line-height: 1.35; }
.uygulama-girisli .ayarlar .ozellik-alan small {
    display: block;
    margin-top: 1px;
    line-height: 1.45;
}
.uygulama-girisli .ayarlar .ayar-secim legend { padding-bottom: 10px; }
.uygulama-girisli .ayarlar .ayar-secim + .ayar-alanlar,
.uygulama-girisli .ayarlar .ayar-alanlar + .anahtar-satiri { margin-top: 16px; }
.uygulama-girisli .ayarlar .ayar-secim + .ayar-ipucu { margin-top: 16px; }
.uygulama-girisli .ayarlar .ayar-obek > h2 + .kunye { margin-top: 14px; }

.mobil-uygulama-dialog { width: min(640px, calc(100vw - 40px)); }
.mobil-dialog-icerik { padding: 26px 30px 24px; }
.mobil-ozellikler { gap: 9px; margin-bottom: 16px; }
.mobil-ozellikler span { min-height: 36px; padding: 6px 9px; }
.mobil-ozellikler svg { width: 20px; height: 20px; }
.magaza-baglantilari { gap: 14px; }
.magaza { min-height: 58px; padding: 9px 14px; }
.magaza > svg { width: 30px; height: 30px; }
.magaza small { font-size: 10px; }
.magaza strong { font-size: 18px; }

@media (min-width: 901px) {
    body.uygulama-girisli { --menu-dar-genislik: 68px; }
    body.menu-kapali .menu-marka-satiri { height: 66px; padding: 11px; }
    body.menu-kapali .menu-marka-satiri .marka > img:first-child { width: 34px; height: 34px; }
    body.menu-kapali .menu-arama { width: 38px; height: 38px; margin-bottom: 11px; }
    body.menu-kapali .uygulama-menusu .yan-menu { padding-inline: 10px; }
    body.menu-kapali .uygulama-menusu .yan-menu a { width: 44px; min-height: 44px; }
    body.menu-kapali .uygulama-menusu .yan-menu svg { width: 21px; height: 21px; }
}

@media (max-width: 1120px) {
    .uygulama-girisli .karsilama { height: 140px; }
    .uygulama-girisli .karsilama h1 { font-size: 31px; }
    .uygulama-girisli .karsilama-alt { font-size: 15px; }
    .uygulama-girisli .durak { min-height: 72px; }
}

@media (max-width: 760px) {
    body.uygulama-girisli { background-attachment: scroll; }
    .uygulama-girisli .ust-cubuk { min-height: 62px; padding-inline: 15px; }
    .uygulama-girisli .kabuk { padding: 14px 15px 22px; }
    .uygulama-girisli .karsilama { height: auto; min-height: 132px; padding: 20px; }
    .uygulama-girisli .karsilama h1 { font-size: 29px; }
    .uygulama-girisli .durak { min-height: 70px; }
    .uygulama-girisli .sinav-karti { padding: 14px 16px; }
}

@media (max-width: 520px) {
    .uygulama-girisli .karsilama { min-height: 126px; }
    .uygulama-girisli .karsilama .marka-etiket { margin-bottom: 10px; }
    .uygulama-girisli .durak { min-height: 68px; padding: 9px 11px; }
    .uygulama-girisli .durak-simge { width: 48px; height: 48px; }
    .uygulama-girisli .bolum-basligi h2 { font-size: 20px; }
}