/* ============================================================================
   İNLANGU — TASARIM SİSTEMİ
   ----------------------------------------------------------------------------
   Tek kaynak. Yeni ekran yazarken BURADAKİ sınıfları kullan, sayfaya özel stil
   yazma (platform kuralı: kabul edilen tasarım tekrar kullanılır).

   Ilkeler
     1. Dokunmatik once: her tıklanabilir yüzey en az 44px.
     2. Ölçek: 4px ızgara (--u1 = 4px). Boşluklar bu ölçekten seçilir.
     3. Renk: marka mavisi + nane; gramer renkleri yalnız kart metninde veri olarak.
        Bootstrap mavisi (#0d6efd / #2563EB) hiçbir yerde kullanılmaz.
     4. Tema: açık varsayılan, koyu tema [data-tema="koyu"] ile.
     5. Erişilebilirlik: odak halkası görünür, hareket azaltma desteklenir,
        renk tek başına anlam taşımaz (ikon + metin eşlik eder).
     6. Dış bağımlılık yok: font sistem yığını, ikonlar yerel (lib/bootstrap-icons).
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENLAR */
:root {
    /* Marka */
    --mavi: #0077CC;
    --mavi-koyu: #005FA6;
    --mavi-acik: #2A97E8;
    --mavi-yumusak: #E7F2FB;
    --nane: #17B978;
    --nane-koyu: #12925F;
    --nane-yumusak: #E2F7EE;
    --altin: #E2A400;
    --altin-yumusak: #FDF3DC;
    --mercan: #E2622F;
    --mercan-yumusak: #FCEDE5;
    --mor: #7A5AF8;
    --mor-yumusak: #EFEBFE;
    --kirmizi: #D9453C;
    --kirmizi-yumusak: #FBEAE8;

    /* Gramer renkleri (veri vurgusu, lejantta açıklanır) */
    --g-der: #3292E7;
    --g-die: #FF4F4C;
    --g-das: #00E676;
    --g-cogul: #FF6699;
    --g-fiil: #FBC02D;
    --g-edat: #9CE5EE;
    --g-sifat: #39CBDD;

    /* Yazı ağırlığı ölçeği — ham sayı yazmak yerine bunlar kullanılır.
       🔴 ÖLÇÜLDÜ (27.08.2026): dosyada 47 sayısal ağırlığın TAMAMI 600 ve üzeriydi,
       tek bir 400/500 yoktu; %66'sı 800-900 aralığındaydı. Üstelik Segoe UI'da
       800 ile 900 BİREBİR AYNI çiziliyor (64px'te ikisi de 532,41px genişlik) —
       yani üç kademe sanılan şey gerçekte tek kademeydi ve o da ailenin en ağırı.
       Gövde ile vurgu arasında en fazla iki kademe olsun. */
    --ag-normal: 400;   /* gövde, açıklama, ikincil liste metni */
    --ag-orta: 600;     /* etiket, rozet, sekme, menü, sayaç */
    --ag-kalin: 700;    /* başlık, düğme, aktif durum, birincil vurgu */
    --ag-rakam: 800;    /* YALNIZ çok büyük rakam — birkaç yer */

    /* Yüzeyler — açık tema */
    --zemin: #F6F8FB;
    --zemin-2: #EDF1F7;
    --yuzey: #FFFFFF;
    --yuzey-2: #F3F6FA;
    --cizgi: #DFE6EE;
    --cizgi-koyu: #C7D2DE;
    --metin: #16202B;
    --metin-2: #48586B;
    /* Soluk metin: beyaz üzerinde ölçülen kontrast 4,87:1 (WCAG AA küçük yazı eşiği 4,5).
       Daha açık bir gri (#79879A) 3,66:1 veriyordu ve alt bilgideki küçük yazılar okunmuyordu. */
    --metin-3: #64728A;
    --ters-metin: #FFFFFF;

    /* Gölge ve derinlik */
    --golge-1: 0 1px 2px rgba(16, 32, 48, .06);
    --golge-2: 0 2px 6px rgba(16, 32, 48, .07), 0 8px 24px rgba(16, 32, 48, .06);
    --golge-3: 0 12px 40px rgba(16, 32, 48, .16);
    --lip: 0 4px 0 0;                 /* butonun alt kalınlığı */

    /* Yuvarlaklık */
    --r-xs: 8px;
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-xl: 28px;
    --r-tam: 999px;

    /* Ölçek (4px ızgara) */
    --u1: 4px;  --u2: 8px;  --u3: 12px; --u4: 16px; --u5: 20px;
    --u6: 24px; --u8: 32px; --u10: 40px; --u12: 48px; --u16: 64px;

    /* Yazı */
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
            "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --font-baslik: var(--font);
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

    /* Hareket */
    --gecis-hizli: .14s cubic-bezier(.2, .8, .3, 1);
    --gecis: .22s cubic-bezier(.2, .8, .3, 1);
    --yay: .38s cubic-bezier(.34, 1.42, .5, 1);

    /* Katmanlar */
    --z-yan: 40;
    --z-ust: 50;
    --z-alt-menu: 60;
    --z-ders: 90;
    --z-katman: 100;
    --z-toast: 120;

    /* Ölçüler */
    --yan-genislik: 248px;
    --yan-dar: 88px;
    --sag-genislik: 344px;
    --ust-yukseklik: 60px;
    --alt-yukseklik: 62px;
}

:root[data-tema="koyu"] {
    --mavi: #3B9EEA;
    --mavi-koyu: #2A80C4;
    --mavi-acik: #6FBAF3;
    --mavi-yumusak: #10283C;
    --nane: #2FD79A;
    --nane-koyu: #22A87A;
    --nane-yumusak: #0E2C22;
    --altin: #F5C13B;
    --altin-yumusak: #33280A;
    --mercan: #F58254;
    --mercan-yumusak: #331B10;
    --mor: #9C82FF;
    --mor-yumusak: #201A3C;
    --kirmizi: #F0655C;
    --kirmizi-yumusak: #351614;

    --zemin: #0D151E;
    --zemin-2: #111B26;
    --yuzey: #16212E;
    --yuzey-2: #1C2938;
    --cizgi: #26364A;
    --cizgi-koyu: #34475E;
    --metin: #E9F0F7;
    --metin-2: #AEBECF;
    --metin-3: #7D8FA4;
    --ters-metin: #0D151E;

    --golge-1: 0 1px 2px rgba(0, 0, 0, .4);
    --golge-2: 0 2px 6px rgba(0, 0, 0, .45), 0 10px 28px rgba(0, 0, 0, .38);
    --golge-3: 0 14px 44px rgba(0, 0, 0, .6);
}

/* ---------------------------------------------------------------- 2. TEMEL */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--metin);
    background: var(--zemin);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior-y: none;
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-baslik);
    /* Etiket/rozet zaten 600; başlık da 600 olursa ekranda üç kademe yerine tek
       kademe kalıyor. Ölçek: gövde 400 · etiket 600 · başlık 700. */
    font-weight: var(--ag-kalin);
    letter-spacing: -.02em;
    line-height: 1.15;
    margin: 0 0 .5em;
    color: var(--metin);
}

h1 { font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.2rem); }
h2 { font-size: clamp(1.45rem, 1rem + 1.5vw, 2.2rem); }
h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); }
h4 { font-size: 1.05rem; font-weight: 600; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--mavi); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg, video { max-width: 100%; height: auto; display: block; }

hr { border: 0; border-top: 1px solid var(--cizgi); margin: var(--u6) 0; }

::selection { background: var(--mavi); color: #fff; }

/* Odak: klavyeyle gezenler görsün, fareyle tıklayanı rahatsız etmesin */
:focus { outline: none; }
:focus-visible {
    outline: 3px solid var(--mavi);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}
/* Programatik odaklanan başlık etrafındaki beyaz çerçeve (platform kuralı) */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none !important; box-shadow: none !important; }

/* Ekran okuyucuya özel */
.gorsel-gizli {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.atla-baglantisi {
    position: absolute; left: -9999px; top: 0; z-index: var(--z-toast);
    background: var(--mavi); color: #fff; padding: var(--u3) var(--u5);
    border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.atla-baglantisi:focus { left: 0; }

/* ---------------------------------------------------------------- 3. YERLEŞİM */
.kap { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: var(--u5); }
.kap-dar { width: 100%; max-width: 780px; margin: 0 auto; padding-inline: var(--u5); }
.kap-orta { width: 100%; max-width: 960px; margin: 0 auto; padding-inline: var(--u5); }

.izgara { display: grid; gap: var(--u5); }
.izgara-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.izgara-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.izgara-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.izgara-oto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.satir { display: flex; align-items: center; gap: var(--u3); }
.satir-arasi { justify-content: space-between; }
.satir-orta { justify-content: center; }
.satir-sar { flex-wrap: wrap; }
.sutun { display: flex; flex-direction: column; gap: var(--u3); }
.esnek { flex: 1 1 auto; min-width: 0; }

@media (max-width: 900px) {
    .izgara-3, .izgara-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .izgara-2, .izgara-3, .izgara-4 { grid-template-columns: minmax(0, 1fr); }
}

/* Boşluk yardımcıları */
.mt1{margin-top:var(--u1)}.mt2{margin-top:var(--u2)}.mt3{margin-top:var(--u3)}
.mt4{margin-top:var(--u4)}.mt6{margin-top:var(--u6)}.mt8{margin-top:var(--u8)}.mt12{margin-top:var(--u12)}
.mb1{margin-bottom:var(--u1)}.mb2{margin-bottom:var(--u2)}.mb3{margin-bottom:var(--u3)}
.mb4{margin-bottom:var(--u4)}.mb6{margin-bottom:var(--u6)}.mb8{margin-bottom:var(--u8)}
.m0{margin:0}

/* Metin yardımcıları */
.mut { color: var(--metin-2); }
.mut-2 { color: var(--metin-3); }
.kucuk { font-size: .875rem; }
.minik { font-size: .78rem; }
.kalin { font-weight: var(--ag-orta); }
.cok-kalin { font-weight: var(--ag-kalin); }
.orta-yazi { text-align: center; }
.sag-yazi { text-align: right; }
.tek-satir { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iki-satir {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.gizli { display: none !important; }
@media (max-width: 860px) { .mobil-gizle { display: none !important; } }
@media (min-width: 861px) { .masaustu-gizle { display: none !important; } }

/* ---------------------------------------------------------------- 4. BUTONLAR */
.btn {
    --btn-bg: var(--mavi);
    --btn-lip: var(--mavi-koyu);
    --btn-yazi: #fff;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--u2);
    min-height: 46px; padding: var(--u3) var(--u6);
    font: inherit; font-weight: 600; letter-spacing: .01em;
    line-height: 1.1; text-align: center; text-decoration: none;
    color: var(--btn-yazi); background: var(--btn-bg);
    border: 0; border-radius: var(--r-md);
    box-shadow: var(--lip) var(--btn-lip);
    cursor: pointer;
    transition: transform var(--gecis-hizli), background var(--gecis-hizli), box-shadow var(--gecis-hizli), opacity var(--gecis-hizli);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.btn:hover { text-decoration: none; filter: brightness(1.05); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--btn-lip); }
.btn:disabled, .btn[aria-disabled="true"] {
    opacity: .45; cursor: not-allowed; transform: none; filter: none;
}
.btn i { font-size: 1.1em; line-height: 1; }

.btn-ana { --btn-bg: var(--mavi); --btn-lip: var(--mavi-koyu); }
.btn-nane { --btn-bg: var(--nane); --btn-lip: var(--nane-koyu); }
.btn-altin { --btn-bg: var(--altin); --btn-lip: #B98700; --btn-yazi: #21160A; }
.btn-mercan { --btn-bg: var(--mercan); --btn-lip: #B84D22; }
.btn-tehlike { --btn-bg: var(--kirmizi); --btn-lip: #AE342C; }

.btn-cizgi {
    --btn-yazi: var(--metin);
    background: var(--yuzey);
    box-shadow: inset 0 0 0 2px var(--cizgi), var(--lip) var(--cizgi);
}
.btn-cizgi:hover { box-shadow: inset 0 0 0 2px var(--mavi), var(--lip) var(--cizgi); color: var(--mavi); filter: none; }
.btn-cizgi:active { box-shadow: inset 0 0 0 2px var(--cizgi); }

.btn-hayalet {
    --btn-yazi: var(--metin-2);
    background: transparent; box-shadow: none;
}
.btn-hayalet:hover { background: var(--yuzey-2); color: var(--metin); filter: none; }
.btn-hayalet:active { transform: none; box-shadow: none; }

.btn-kucuk { min-height: 38px; padding: var(--u2) var(--u4); font-size: .875rem; border-radius: var(--r-sm); }
.btn-buyuk { min-height: 58px; padding: var(--u4) var(--u10); font-size: 1.06rem; }
.btn-blok { display: flex; width: 100%; }

/* Yuvarlak ikon butonu */
.ikon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none;
    border: 0; border-radius: var(--r-tam);
    background: transparent; color: var(--metin-2);
    font-size: 1.15rem; cursor: pointer;
    transition: background var(--gecis-hizli), color var(--gecis-hizli), transform var(--gecis-hizli);
    -webkit-tap-highlight-color: transparent;
}
.ikon-btn:hover { background: var(--yuzey-2); color: var(--metin); }
.ikon-btn:active { transform: scale(.92); }
.ikon-btn.dolu { background: var(--mavi-yumusak); color: var(--mavi); }

/* ---------------------------------------------------------------- 5. FORMLAR */
.alan-etiket {
    display: block; font-weight: 600; font-size: .9rem;
    color: var(--metin-2); margin-bottom: var(--u2);
}
.girdi, .secim, .cok-satir {
    width: 100%; font: inherit; color: var(--metin);
    padding: var(--u3) var(--u4); min-height: 48px;
    background: var(--yuzey);
    border: 2px solid var(--cizgi); border-radius: var(--r-sm);
    transition: border-color var(--gecis-hizli), box-shadow var(--gecis-hizli);
}
.cok-satir { min-height: 110px; resize: vertical; }
.girdi::placeholder, .cok-satir::placeholder { color: var(--metin-3); }
.girdi:focus, .secim:focus, .cok-satir:focus {
    outline: none; border-color: var(--mavi);
    box-shadow: 0 0 0 4px var(--mavi-yumusak);
}
.girdi.hatali { border-color: var(--kirmizi); }
.secim {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--metin-3) 50%),
                      linear-gradient(135deg, var(--metin-3) 50%, transparent 50%);
    background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: var(--u10);
}

.anahtar { display: inline-flex; align-items: center; gap: var(--u3); cursor: pointer; user-select: none; }
.anahtar input { position: absolute; opacity: 0; width: 0; height: 0; }
.anahtar-govde {
    width: 50px; height: 30px; flex: none; border-radius: var(--r-tam);
    background: var(--cizgi-koyu); position: relative; transition: background var(--gecis);
}
.anahtar-govde::after {
    content: ""; position: absolute; top: 3px; left: 3px;
    width: 24px; height: 24px; border-radius: 50%;
    background: #fff; box-shadow: var(--golge-1);
    transition: transform var(--yay);
}
.anahtar input:checked + .anahtar-govde { background: var(--nane); }
.anahtar input:checked + .anahtar-govde::after { transform: translateX(20px); }
.anahtar input:focus-visible + .anahtar-govde { outline: 3px solid var(--mavi); outline-offset: 2px; }

/* ---------------------------------------------------------------- 6. YÜZEYLER */
.kart {
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--r-lg);
    box-shadow: var(--golge-1);
}
.kart-ic { padding: var(--u6); }
.kart-sik { padding: var(--u4); }
.kart-tikla {
    cursor: pointer;
    transition: transform var(--gecis-hizli), box-shadow var(--gecis-hizli), border-color var(--gecis-hizli);
}
.kart-tikla:hover { transform: translateY(-2px); box-shadow: var(--golge-2); border-color: var(--cizgi-koyu); }

.rozet {
    display: inline-flex; align-items: center; gap: var(--u1);
    padding: var(--u1) var(--u3); border-radius: var(--r-tam);
    font-size: .78rem; font-weight: 600; letter-spacing: .01em;
    background: var(--mavi-yumusak); color: var(--mavi-koyu);
    white-space: nowrap;
}
:root[data-tema="koyu"] .rozet { color: var(--mavi-acik); }
.rozet-nane { background: var(--nane-yumusak); color: var(--nane-koyu); }
:root[data-tema="koyu"] .rozet-nane { color: var(--nane); }
.rozet-altin { background: var(--altin-yumusak); color: #8A6500; }
:root[data-tema="koyu"] .rozet-altin { color: var(--altin); }
.rozet-mercan { background: var(--mercan-yumusak); color: #A8471E; }
:root[data-tema="koyu"] .rozet-mercan { color: var(--mercan); }
.rozet-mor { background: var(--mor-yumusak); color: #5B3FD1; }
:root[data-tema="koyu"] .rozet-mor { color: var(--mor); }
.rozet-gri { background: var(--yuzey-2); color: var(--metin-2); }
.rozet-kirmizi { background: var(--kirmizi-yumusak); color: #A5322B; }
:root[data-tema="koyu"] .rozet-kirmizi { color: var(--kirmizi); }

.bilgi-kutu {
    display: flex; gap: var(--u3); align-items: flex-start;
    padding: var(--u4); border-radius: var(--r-md);
    background: var(--mavi-yumusak); color: var(--metin);
    border-left: 4px solid var(--mavi);
    font-size: .94rem;
}
.bilgi-kutu i { color: var(--mavi); font-size: 1.15rem; flex: none; margin-top: 1px; }
.bilgi-uyari { background: var(--altin-yumusak); border-left-color: var(--altin); }
.bilgi-uyari i { color: #A57900; }
.bilgi-hata { background: var(--kirmizi-yumusak); border-left-color: var(--kirmizi); }
.bilgi-hata i { color: var(--kirmizi); }
.bilgi-basari { background: var(--nane-yumusak); border-left-color: var(--nane); }
.bilgi-basari i { color: var(--nane-koyu); }

/* Boş durum */
.bos-durum { text-align: center; padding: var(--u12) var(--u5); color: var(--metin-2); }
.bos-durum i { font-size: 2.6rem; color: var(--metin-3); display: block; margin-bottom: var(--u4); }
.bos-durum h3 { color: var(--metin); }

/* ---------------------------------------------------------------- 7. İLERLEME */
.ilerleme {
    height: 14px; background: var(--zemin-2); border-radius: var(--r-tam);
    overflow: hidden; position: relative;
}
.ilerleme > span {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--nane), var(--nane-koyu));
    border-radius: var(--r-tam);
    transition: width var(--gecis);
    position: relative;
}
/* Üstteki ince parlaklık: yüzeye hacim verir */
.ilerleme > span::after {
    content: ""; position: absolute; inset: 3px 6px auto 6px; height: 3px;
    background: rgba(255, 255, 255, .38); border-radius: var(--r-tam);
}
.ilerleme-ince { height: 8px; }
.ilerleme-ince > span::after { display: none; }
.ilerleme-mavi > span { background: linear-gradient(90deg, var(--mavi-acik), var(--mavi)); }
.ilerleme-altin > span { background: linear-gradient(90deg, #F5C13B, var(--altin)); }

/* Halka gösterge (günlük hedef) */
.halka { display: block; transform: rotate(-90deg); }
.halka circle { fill: none; stroke-linecap: round; }
.halka .iz { stroke: var(--zemin-2); }
.halka .dolgu { stroke: var(--altin); transition: stroke-dashoffset .5s cubic-bezier(.2,.8,.3,1); }
.halka-kutu { position: relative; display: inline-grid; place-items: center; }
.halka-kutu .icerik {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-weight: 600; font-size: .82rem; text-align: center; line-height: 1.1;
}

/* Sayaç şeridi (XP, seri, lig) */
.olcum {
    display: inline-flex; align-items: center; gap: var(--u2);
    font-weight: 600; font-size: .95rem; color: var(--metin);
    padding: var(--u2) var(--u3); border-radius: var(--r-sm);
    transition: background var(--gecis-hizli);
}
.olcum i { font-size: 1.2rem; }
.olcum.seri i { color: var(--mercan); }
.olcum.xp i { color: var(--altin); }
.olcum.lig i { color: var(--mavi); }
.olcum.tekrar i { color: var(--nane); }
.olcum:hover { background: var(--yuzey-2); }
.olcum.sonuk { color: var(--metin-3); }
.olcum.sonuk i { color: var(--metin-3); }

/* ---------------------------------------------------------------- 8. UYGULAMA KABUĞU */
.kabuk {
    display: grid;
    grid-template-columns: var(--yan-genislik) minmax(0, 1fr) var(--sag-genislik);
    min-height: 100vh;
    min-height: 100dvh;
}

/* Sol raf */
.yan-menu {
    position: sticky; top: 0; align-self: start;
    height: 100vh; height: 100dvh;
    display: flex; flex-direction: column; gap: var(--u1);
    padding: var(--u5) var(--u3);
    background: var(--yuzey);
    border-right: 1px solid var(--cizgi);
    z-index: var(--z-yan);
    overflow-y: auto;
}
.yan-logo { display: flex; align-items: center; gap: var(--u2); padding: var(--u2) var(--u3) var(--u6); }
.yan-logo img { height: 30px; width: auto; }
.yan-baglanti {
    display: flex; align-items: center; gap: var(--u3);
    min-height: 50px; padding: var(--u2) var(--u3);
    border-radius: var(--r-md);
    color: var(--metin-2); font-weight: 600; font-size: .95rem;
    text-transform: uppercase; letter-spacing: .02em;
    border: 2px solid transparent;
    transition: background var(--gecis-hizli), color var(--gecis-hizli), border-color var(--gecis-hizli);
}
.yan-baglanti:hover { background: var(--yuzey-2); color: var(--metin); text-decoration: none; }
.yan-baglanti i { font-size: 1.4rem; width: 28px; text-align: center; flex: none; }
.yan-baglanti.aktif {
    background: var(--mavi-yumusak); color: var(--mavi-koyu);
    border-color: color-mix(in srgb, var(--mavi) 42%, transparent);
}
:root[data-tema="koyu"] .yan-baglanti.aktif { color: var(--mavi-acik); }
.yan-baglanti .sayac {
    margin-left: auto; background: var(--nane); color: #fff;
    border-radius: var(--r-tam); padding: 1px 8px; font-size: .74rem;
}
.yan-ayirac { height: 1px; background: var(--cizgi); margin: var(--u3) var(--u3); }

/* Sağ panel */
.sag-panel {
    padding: var(--u6) var(--u5) var(--u12);
    display: flex; flex-direction: column; gap: var(--u5);
    position: sticky; top: 0; align-self: start;
    max-height: 100vh; overflow-y: auto;
}

/* Orta içerik */
.icerik {
    padding: var(--u8) var(--u6) var(--u16);
    min-width: 0;
}
.icerik-dar { max-width: 720px; margin: 0 auto; }

/* Mobil üst çubuk */
.ust-serit {
    display: none;
    position: sticky; top: 0; z-index: var(--z-ust);
    align-items: center; justify-content: space-between; gap: var(--u3);
    height: var(--ust-yukseklik); padding: 0 var(--u4);
    background: color-mix(in srgb, var(--yuzey) 92%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--cizgi);
}

/* Mobil alt menü */
.alt-menu {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-alt-menu);
    height: calc(var(--alt-yukseklik) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--yuzey);
    border-top: 1px solid var(--cizgi);
    box-shadow: 0 -2px 14px rgba(16, 32, 48, .07);
}
.alt-menu-ic { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: var(--alt-yukseklik); }
.alt-baglanti {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--metin-3); font-size: .68rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .02em;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}
.alt-baglanti:hover { text-decoration: none; }
.alt-baglanti i { font-size: 1.5rem; }
.alt-baglanti.aktif { color: var(--mavi); }
.alt-baglanti .nokta {
    position: absolute; top: 8px; right: calc(50% - 16px);
    width: 8px; height: 8px; border-radius: 50%; background: var(--mercan);
    border: 2px solid var(--yuzey);
}

@media (max-width: 1180px) {
    .kabuk { grid-template-columns: var(--yan-dar) minmax(0, 1fr) var(--sag-genislik); }
    .yan-baglanti { justify-content: center; }
    .yan-baglanti span, .yan-logo span { display: none; }
    .yan-baglanti .sayac { position: absolute; margin: 0; transform: translate(14px, -14px); }
    .yan-baglanti { position: relative; }
}
@media (max-width: 1000px) {
    .kabuk { grid-template-columns: var(--yan-dar) minmax(0, 1fr); }
    .sag-panel { display: none; }
}
@media (max-width: 860px) {
    .kabuk { grid-template-columns: minmax(0, 1fr); }
    .yan-menu { display: none; }
    .ust-serit { display: flex; }
    .alt-menu { display: block; }
    .icerik { padding: var(--u5) var(--u4) calc(var(--alt-yukseklik) + var(--u12)); }
}

/* ---------------------------------------------------------------- 9. KAMU KABUĞU */
.site-ust {
    position: sticky; top: 0; z-index: var(--z-ust);
    background: color-mix(in srgb, var(--zemin) 88%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--cizgi);
}
.site-ust-ic { display: flex; align-items: center; justify-content: space-between; gap: var(--u5); height: 68px; }
.site-logo { display: flex; align-items: center; gap: var(--u2); font-weight: 700; font-size: 1.3rem; color: var(--metin); }
.site-logo img { height: 32px; }
.site-menu { display: flex; align-items: center; gap: var(--u5); }
.site-menu a.bag { color: var(--metin-2); font-weight: 600; font-size: .95rem; }
.site-menu a.bag:hover { color: var(--mavi); text-decoration: none; }

.site-alt {
    background: var(--yuzey); border-top: 1px solid var(--cizgi);
    padding: var(--u12) 0 var(--u8); margin-top: var(--u16);
}
.site-alt-izgara { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--u8); }
.site-alt h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--metin-3); margin-bottom: var(--u3); }
.site-alt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--u2); }
.site-alt a { color: var(--metin-2); font-size: .93rem; }
.site-alt a:hover { color: var(--mavi); }
.site-alt-son {
    margin-top: var(--u8); padding-top: var(--u5);
    border-top: 1px solid var(--cizgi);
    display: flex; justify-content: space-between; gap: var(--u4); flex-wrap: wrap;
    color: var(--metin-3); font-size: .84rem;
}
@media (max-width: 860px) {
    .site-alt-izgara { grid-template-columns: repeat(2, 1fr); gap: var(--u6); }
}
@media (max-width: 520px) {
    .site-alt-izgara { grid-template-columns: 1fr; }
}

/* Mobil menü çekmecesi */
.cekmece {
    position: fixed; inset: 0; z-index: var(--z-katman);
    background: rgba(9, 16, 24, .5);
    opacity: 0; pointer-events: none; transition: opacity var(--gecis);
}
.cekmece.acik { opacity: 1; pointer-events: auto; }
.cekmece-govde {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 86vw);
    background: var(--yuzey); padding: var(--u5);
    display: flex; flex-direction: column; gap: var(--u2);
    transform: translateX(100%); transition: transform var(--gecis);
    overflow-y: auto;
}
.cekmece.acik .cekmece-govde { transform: none; }
.cekmece-govde a {
    padding: var(--u3) var(--u4); border-radius: var(--r-md);
    color: var(--metin); font-weight: 600;
}
.cekmece-govde a:hover { background: var(--yuzey-2); text-decoration: none; }

/* ---------------------------------------------------------------- 10. TANITIM */
.hero { padding: clamp(var(--u12), 6vw, 96px) 0 var(--u16); position: relative; overflow: hidden; }
.hero-izgara { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--u16); align-items: center; }
.hero h1 { margin-bottom: var(--u5); }
.hero .vurgu { color: var(--mavi); }
.hero .alt-yazi { font-size: clamp(1.02rem, .95rem + .4vw, 1.22rem); color: var(--metin-2); max-width: 44ch; margin-bottom: var(--u8); }
.hero-btnlar { display: flex; gap: var(--u3); flex-wrap: wrap; }
.hero-guven { display: flex; gap: var(--u5); flex-wrap: wrap; margin-top: var(--u6); color: var(--metin-2); font-size: .9rem; }
.hero-guven span { display: inline-flex; align-items: center; gap: var(--u2); }
.hero-guven i { color: var(--nane); }

/* Arka plandaki yumuşak ışık — düz beyazı kırar */
.hero::before {
    content: ""; position: absolute; z-index: -1;
    width: 780px; height: 780px; right: -240px; top: -320px;
    background: radial-gradient(circle, color-mix(in srgb, var(--mavi) 16%, transparent) 0%, transparent 62%);
    border-radius: 50%;
}
.hero::after {
    content: ""; position: absolute; z-index: -1;
    width: 560px; height: 560px; left: -240px; bottom: -300px;
    background: radial-gradient(circle, color-mix(in srgb, var(--nane) 14%, transparent) 0%, transparent 62%);
    border-radius: 50%;
}

@media (max-width: 940px) {
    .hero-izgara { grid-template-columns: 1fr; gap: var(--u10); }
    .hero { padding-top: var(--u10); }
}

.bolum { padding: clamp(var(--u12), 5vw, 88px) 0; }
.bolum-zemin { background: var(--yuzey); }
.bolum-bas { max-width: 660px; margin: 0 auto var(--u10); text-align: center; }
.bolum-bas p { color: var(--metin-2); font-size: 1.06rem; }

.sayilar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--u4); }
.sayi-kutu { text-align: center; padding: var(--u6) var(--u4); }
.sayi-kutu .rakam {
    font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); font-weight: 700;
    color: var(--mavi); line-height: 1; letter-spacing: -.03em;
}
.sayi-kutu .etiket { color: var(--metin-2); font-size: .9rem; margin-top: var(--u2); font-weight: 500; }

.ozellik { padding: var(--u6); }
.ozellik .simge {
    width: 52px; height: 52px; border-radius: var(--r-md);
    display: grid; place-items: center; font-size: 1.5rem;
    background: var(--mavi-yumusak); color: var(--mavi);
    margin-bottom: var(--u4);
}
.ozellik .simge.nane { background: var(--nane-yumusak); color: var(--nane-koyu); }
.ozellik .simge.altin { background: var(--altin-yumusak); color: #A57900; }
.ozellik .simge.mor { background: var(--mor-yumusak); color: #5B3FD1; }
.ozellik .simge.mercan { background: var(--mercan-yumusak); color: #A8471E; }
.ozellik p { color: var(--metin-2); margin: 0; }

/* Karşılaştırma tablosu */
.karsilastir { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--cizgi);
    border: 1px solid var(--cizgi); border-radius: var(--r-lg); overflow: hidden; }
.karsilastir > div { background: var(--yuzey); padding: var(--u5) var(--u6); }
.karsilastir .bas { display: flex; align-items: center; gap: var(--u2); font-weight: 600; margin-bottom: var(--u2); }
.karsilastir .oteki { color: var(--metin-2); }
.karsilastir .oteki .bas { color: var(--metin-3); }
.karsilastir .biz .bas { color: var(--nane-koyu); }
:root[data-tema="koyu"] .karsilastir .biz .bas { color: var(--nane); }
@media (max-width: 700px) { .karsilastir { grid-template-columns: 1fr; } }

/* SSS */
.sss-oge { border-bottom: 1px solid var(--cizgi); }
.sss-oge summary {
    list-style: none; cursor: pointer; padding: var(--u5) 0;
    font-weight: 600; font-size: 1.05rem;
    display: flex; align-items: center; justify-content: space-between; gap: var(--u4);
}
.sss-oge summary::-webkit-details-marker { display: none; }
.sss-oge summary::after {
    content: "\F282"; font-family: bootstrap-icons; font-size: 1rem;
    color: var(--metin-3); transition: transform var(--gecis); flex: none;
}
.sss-oge[open] summary::after { transform: rotate(180deg); }
.sss-govde { padding-bottom: var(--u5); color: var(--metin-2); max-width: 68ch; }

/* Fiyat kartı */
.fiyat-kart { display: flex; flex-direction: column; padding: var(--u8); position: relative; }
.fiyat-kart.one-cikan { border: 2px solid var(--mavi); box-shadow: var(--golge-2); }
.fiyat-kart .tutar { font-size: 2.6rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; margin: var(--u4) 0 var(--u1); }
.fiyat-kart .tutar small { font-size: 1rem; font-weight: 600; color: var(--metin-3); }
.fiyat-kart ul { list-style: none; margin: var(--u5) 0; padding: 0; display: grid; gap: var(--u3); }
.fiyat-kart li { display: flex; gap: var(--u3); align-items: flex-start; color: var(--metin-2); font-size: .95rem; }
.fiyat-kart li i { color: var(--nane); flex: none; margin-top: 3px; }
.fiyat-kart .btn { margin-top: auto; }
.fiyat-etiket {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: var(--mavi); color: #fff; padding: var(--u1) var(--u4);
    border-radius: var(--r-tam); font-size: .76rem; font-weight: 600; white-space: nowrap;
}

/* ---------------------------------------------------------------- 11. KART METNİ */
/*
   Kart metinlerindeki renkler gramer bilgisidir (der/die/das, fiil, edat).
   İçerik yıllar önce koyu zemin için seçilmiş; açık temada bazıları (açık yeşil,
   buz mavisi) beyaz üzerinde okunmuyor. Renk bilgisini bozmadan okunurluğu
   düzeltmek için tüm metne tek bir parlaklık düzeltmesi uygulanır.
*/
.renkli { line-height: 1.4; }
.renkli span, .renkli font { font-weight: inherit; }
:root:not([data-tema="koyu"]) .renkli { filter: brightness(.68) saturate(1.25); }
:root[data-tema="koyu"] .renkli { filter: brightness(1.12); }

.lejant { display: flex; flex-wrap: wrap; gap: var(--u3) var(--u5); }
.lejant span { display: inline-flex; align-items: center; gap: var(--u2); font-size: .88rem; color: var(--metin-2); }
.lejant .nokta { width: 14px; height: 14px; border-radius: 5px; flex: none; }
:root:not([data-tema="koyu"]) .lejant .nokta { filter: brightness(.78) saturate(1.2); }

/* Örnek kart (tanıtım) */
.ornek-kart {
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-xl);
    box-shadow: var(--golge-2); padding: var(--u8); text-align: center;
}
.ornek-kart .on { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); font-weight: 600; }
.ornek-kart .arka { font-size: 1.15rem; color: var(--metin-2); margin-top: var(--u2); }

/* ---------------------------------------------------------------- 12. ÖĞRENME YOLU */
.unite-bas {
    position: sticky; top: var(--u4); z-index: 5;
    display: flex; align-items: center; justify-content: space-between; gap: var(--u4);
    padding: var(--u5) var(--u6); margin-bottom: var(--u10);
    border-radius: var(--r-lg); color: #fff;
    background: var(--unite-renk, var(--mavi));
    box-shadow: 0 4px 0 0 color-mix(in srgb, var(--unite-renk, var(--mavi)) 72%, #000);
}
.unite-bas h2 { color: #fff; margin: 0; font-size: 1.25rem; }
.unite-bas .alt { opacity: .88; font-size: .88rem; font-weight: 500; }
.unite-bas .btn-cizgi {
    --btn-yazi: #fff; background: rgba(255, 255, 255, .16);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45);
}
.unite-bas .btn-cizgi:hover { background: rgba(255, 255, 255, .26); color: #fff; box-shadow: inset 0 0 0 2px #fff; }

/* Yılan yol: düğümler ortadan sağa/sola salınır.
   🔴 Kaydırma SATIRA değil, satırın içindeki düğüm sütununa uygulanır.
   Satır tam genişlikte olduğu için onu kaydırmak dar ekranda sayfayı yana taşırdı
   (375px'te ölçüldü: 13px yatay kaydırma çıkıyordu). */
.yol { display: flex; flex-direction: column; align-items: center; gap: var(--u5); padding-bottom: var(--u12); overflow-x: clip; }
.yol-satir { display: flex; justify-content: center; width: 100%; }
.yol-satir > * { transition: transform var(--gecis); }
.yol-satir[data-kaydir="0"] > * { transform: translateX(0); }
.yol-satir[data-kaydir="1"] > * { transform: translateX(58px); }
.yol-satir[data-kaydir="2"] > * { transform: translateX(88px); }
.yol-satir[data-kaydir="3"] > * { transform: translateX(58px); }
.yol-satir[data-kaydir="4"] > * { transform: translateX(0); }
.yol-satir[data-kaydir="5"] > * { transform: translateX(-58px); }
.yol-satir[data-kaydir="6"] > * { transform: translateX(-88px); }
.yol-satir[data-kaydir="7"] > * { transform: translateX(-58px); }
@media (max-width: 520px) {
    .yol-satir[data-kaydir="1"] > *, .yol-satir[data-kaydir="3"] > * { transform: translateX(34px); }
    .yol-satir[data-kaydir="2"] > * { transform: translateX(52px); }
    .yol-satir[data-kaydir="5"] > *, .yol-satir[data-kaydir="7"] > * { transform: translateX(-34px); }
    .yol-satir[data-kaydir="6"] > * { transform: translateX(-52px); }
}

.dugum {
    --d-renk: var(--cizgi-koyu);
    --d-lip: var(--cizgi-koyu);
    position: relative;
    width: 74px; height: 68px; flex: none;
    display: grid; place-items: center;
    border: 0; border-radius: 50% / 46%;
    background: var(--d-renk);
    box-shadow: 0 7px 0 0 var(--d-lip);
    color: #fff; font-size: 1.7rem;
    cursor: pointer;
    transition: transform var(--gecis-hizli), box-shadow var(--gecis-hizli), filter var(--gecis-hizli);
    -webkit-tap-highlight-color: transparent;
}
.dugum:hover { filter: brightness(1.07); }
.dugum:active { transform: translateY(5px); box-shadow: 0 2px 0 0 var(--d-lip); }
.dugum:disabled { cursor: not-allowed; filter: none; }

.dugum.acik { --d-renk: var(--mavi); --d-lip: var(--mavi-koyu); }
.dugum.devam { --d-renk: var(--mavi); --d-lip: var(--mavi-koyu); }
.dugum.bitti { --d-renk: var(--nane); --d-lip: var(--nane-koyu); }
.dugum.altin { --d-renk: var(--altin); --d-lip: #B98700; color: #2A1D05; }
.dugum.kilitli { --d-renk: var(--zemin-2); --d-lip: var(--cizgi-koyu); color: var(--metin-3); }
:root[data-tema="koyu"] .dugum.kilitli { --d-renk: var(--yuzey-2); }

/* Düğümün etrafındaki ilerleme halkası */
.dugum-sarmal { position: relative; display: grid; place-items: center; }
.dugum-halka { position: absolute; width: 96px; height: 96px; pointer-events: none; transform: rotate(-90deg); }
.dugum-halka .iz { stroke: var(--cizgi); }
.dugum-halka .dolgu { stroke: var(--nane); transition: stroke-dashoffset .6s ease; }

.dugum-etiket {
    margin-top: var(--u2); text-align: center;
    font-size: .78rem; font-weight: 600; color: var(--metin-2);
    max-width: 120px;
}
.dugum-rozet {
    position: absolute; top: -6px; right: -6px;
    min-width: 22px; height: 22px; padding: 0 5px;
    border-radius: var(--r-tam); background: var(--mercan); color: #fff;
    font-size: .7rem; font-weight: 600; display: grid; place-items: center;
    border: 2px solid var(--zemin);
}

/* "Buradasın" balonu */
.simdi-balon {
    position: absolute; top: -46px; left: 50%; transform: translateX(-50%);
    background: var(--yuzey); color: var(--mavi);
    border: 2px solid var(--mavi);
    padding: var(--u1) var(--u3); border-radius: var(--r-sm);
    font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    white-space: nowrap;
    animation: zipla 1.8s ease-in-out infinite;
}
.simdi-balon::after {
    content: ""; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: var(--mavi); border-bottom: 0;
}
@keyframes zipla {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, -6px); }
}

/* Düğüm açılır kutusu */
.dugum-kutu {
    position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
    width: 268px; z-index: 12;
    background: var(--dk-renk, var(--mavi)); color: #fff;
    border-radius: var(--r-lg); padding: var(--u5);
    box-shadow: 0 6px 0 0 color-mix(in srgb, var(--dk-renk, var(--mavi)) 70%, #000), var(--golge-3);
    text-align: center;
    animation: kutu-ac .16s ease-out;
}
.dugum-kutu::before {
    content: ""; position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
    border: 9px solid transparent; border-bottom-color: var(--dk-renk, var(--mavi)); border-top: 0;
}
.dugum-kutu h4 { color: #fff; margin: 0 0 var(--u1); }
.dugum-kutu p { opacity: .9; font-size: .86rem; margin: 0 0 var(--u4); }
.dugum-kutu .btn {
    --btn-bg: #fff; --btn-lip: rgba(0, 0, 0, .22); --btn-yazi: var(--dk-renk, var(--mavi));
}
@keyframes kutu-ac { from { opacity: 0; transform: translate(-50%, -8px); } }

/* Ünite geçiş çubuğu */
.unite-gezinme {
    display: flex; align-items: center; justify-content: space-between; gap: var(--u3);
    margin-bottom: var(--u6);
}

/* ---------------------------------------------------------------- 13. DERS OYNATICI */
.ders {
    position: fixed; inset: 0; z-index: var(--z-ders);
    display: flex; flex-direction: column;
    background: var(--zemin);
}
.ders-ust {
    display: flex; align-items: center; gap: var(--u4);
    padding: var(--u4) var(--u5);
    padding-top: calc(var(--u4) + env(safe-area-inset-top));
    flex: none;
}
.ders-ust .ilerleme { flex: 1; }
.ders-govde {
    flex: 1; overflow-y: auto;
    display: flex; flex-direction: column;
    padding: var(--u4) var(--u5) var(--u12);
}
.ders-ic { width: 100%; max-width: 640px; margin: 0 auto; flex: 1; display: flex; flex-direction: column; }
.ders-alt {
    flex: none; border-top: 2px solid var(--cizgi);
    background: var(--yuzey);
    padding: var(--u5);
    padding-bottom: calc(var(--u5) + env(safe-area-inset-bottom));
    transition: background var(--gecis);
}
.ders-alt-ic {
    width: 100%; max-width: 640px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: var(--u4);
}

.ders-yonerge { font-size: 1.28rem; font-weight: 600; margin-bottom: var(--u6); }
.ders-soru {
    font-size: clamp(1.5rem, 1.1rem + 2vw, 2.4rem); font-weight: 600;
    line-height: 1.3; margin-bottom: var(--u4);
}
.ders-soru-kucuk { font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); }
.ders-alt-metin { color: var(--metin-2); font-size: .95rem; }

/* Şıklar */
.secenekler { display: grid; gap: var(--u3); margin-top: var(--u5); }
.secenekler.ikili { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.secenek {
    display: flex; align-items: center; gap: var(--u3);
    width: 100%; min-height: 62px; padding: var(--u4) var(--u5);
    /* 🔴 Blok ağırlığı GÖVDE ağırlığıdır. Eskiden burada 600 vardı ve kartın İÇİNDEKİ
       her şey — açıklama satırı dâhil — kalın çıkıyordu; ekranda hiyerarşi kalmıyordu
       ("0 / 20 ders tamamlandı" ile "Ders akışı" aynı ağırlıktaydı). Başlığı kalınlaştıran
       şey içerideki .kalin sınıfıdır, kabın kendisi değil. */
    text-align: left; font: inherit; font-size: 1.05rem; font-weight: var(--ag-normal);
    color: var(--metin); background: var(--yuzey);
    border: 2px solid var(--cizgi); border-radius: var(--r-md);
    box-shadow: 0 4px 0 0 var(--cizgi);
    cursor: pointer;
    transition: border-color var(--gecis-hizli), background var(--gecis-hizli), transform var(--gecis-hizli), box-shadow var(--gecis-hizli);
    -webkit-tap-highlight-color: transparent;
}
.secenek:hover:not(:disabled) { background: var(--yuzey-2); }
.secenek:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--cizgi); }
.secenek .no {
    width: 26px; height: 26px; flex: none; border-radius: var(--r-xs);
    display: grid; place-items: center; font-size: .78rem;
    border: 2px solid var(--cizgi); color: var(--metin-3);
}
.secenek.secili { border-color: var(--mavi); background: var(--mavi-yumusak); box-shadow: 0 4px 0 0 var(--mavi); color: var(--mavi-koyu); }
.secenek.secili .no { border-color: var(--mavi); color: var(--mavi); }
:root[data-tema="koyu"] .secenek.secili { color: var(--mavi-acik); }
.secenek.dogru { border-color: var(--nane); background: var(--nane-yumusak); box-shadow: 0 4px 0 0 var(--nane); }
.secenek.yanlis { border-color: var(--kirmizi); background: var(--kirmizi-yumusak); box-shadow: 0 4px 0 0 var(--kirmizi); }
.secenek:disabled { cursor: default; }

/* Kelime taşları (cümle kurma) */
.cumle-alani {
    min-height: 120px; margin-top: var(--u5);
    border-top: 2px solid var(--cizgi); border-bottom: 2px solid var(--cizgi);
    padding: var(--u4) 0;
    display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--u2);
}
.cumle-havuz { display: flex; flex-wrap: wrap; gap: var(--u2); margin-top: var(--u6); min-height: 56px; }
.tas {
    display: inline-flex; align-items: center;
    min-height: 46px; padding: var(--u2) var(--u4);
    font: inherit; font-size: 1.02rem; font-weight: 600; color: var(--metin);
    background: var(--yuzey); border: 2px solid var(--cizgi);
    border-radius: var(--r-sm); box-shadow: 0 3px 0 0 var(--cizgi);
    cursor: pointer;
    transition: transform var(--gecis-hizli), opacity var(--gecis-hizli), box-shadow var(--gecis-hizli);
    -webkit-tap-highlight-color: transparent;
}
.tas:hover:not(:disabled) { background: var(--yuzey-2); }
.tas:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 0 var(--cizgi); }
.tas.kullanildi { opacity: 0; pointer-events: none; }
.tas.bosluk { visibility: hidden; }

/* Eşleştirme */
.eslestir { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--u3); margin-top: var(--u5); }
.eslestir .secenek { min-height: 58px; justify-content: center; text-align: center; }
.eslestir .secenek.esitlendi {
    border-color: var(--nane); background: var(--nane-yumusak);
    box-shadow: 0 4px 0 0 var(--nane); opacity: .55; cursor: default;
}

/* Cevap şeridi */
.cevap-serit {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: var(--u5);
    padding-bottom: calc(var(--u5) + env(safe-area-inset-bottom));
    border-top: 2px solid transparent;
    /* Küçük kayma + soluklaşma. Bilinçli olarak ekran dışından GELMEZ:
       animasyon donarsa (sekme arka planda, çok yavaş cihaz, azaltılmış hareket)
       şerit görünmez kalırdı ve kullanıcı "Devam" düğmesini bulamazdı. */
    animation: serit-yukari .22s cubic-bezier(.2, .8, .3, 1);
}
.cevap-serit.dogru { background: var(--nane-yumusak); border-top-color: color-mix(in srgb, var(--nane) 45%, transparent); }
.cevap-serit.yanlis { background: var(--kirmizi-yumusak); border-top-color: color-mix(in srgb, var(--kirmizi) 45%, transparent); }
.cevap-serit-ic { width: 100%; max-width: 640px; margin: 0 auto; display: flex; align-items: center; gap: var(--u4); flex-wrap: wrap; }
.cevap-simge {
    width: 46px; height: 46px; flex: none; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.5rem; color: #fff;
}
.cevap-serit.dogru .cevap-simge { background: var(--nane); }
.cevap-serit.yanlis .cevap-simge { background: var(--kirmizi); }
.cevap-baslik { font-size: 1.2rem; font-weight: 700; margin: 0; }
.cevap-serit.dogru .cevap-baslik { color: var(--nane-koyu); }
.cevap-serit.yanlis .cevap-baslik { color: #A5322B; }
:root[data-tema="koyu"] .cevap-serit.dogru .cevap-baslik { color: var(--nane); }
:root[data-tema="koyu"] .cevap-serit.yanlis .cevap-baslik { color: var(--kirmizi); }
.cevap-aciklama { color: var(--metin-2); font-size: .95rem; margin: 2px 0 0; }
.cevap-serit .btn { margin-left: auto; }
@keyframes serit-yukari { from { transform: translateY(14px); opacity: 0; } }

/* Ses düğmesi */
.ses-btn {
    display: inline-grid; place-items: center;
    width: 62px; height: 62px; flex: none;
    border: 0; border-radius: var(--r-md);
    background: var(--mavi); color: #fff; font-size: 1.5rem;
    box-shadow: 0 4px 0 0 var(--mavi-koyu);
    cursor: pointer;
    transition: transform var(--gecis-hizli), box-shadow var(--gecis-hizli);
}
.ses-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--mavi-koyu); }
.ses-btn.kucuk { width: 44px; height: 44px; font-size: 1.1rem; border-radius: var(--r-sm); }
.ses-btn.yavas { background: var(--yuzey); color: var(--mavi); box-shadow: inset 0 0 0 2px var(--cizgi), 0 4px 0 0 var(--cizgi); }
.ses-btn.calisiyor { animation: ses-nabiz .8s ease-in-out infinite; }
@keyframes ses-nabiz { 50% { transform: scale(1.06); } }

/* Ders sonu */
.sonuc-ekran { text-align: center; padding: var(--u10) var(--u5); }
.sonuc-ekran .kupa { font-size: 4rem; color: var(--altin); animation: zipla-bir .6s var(--yay); }
@keyframes zipla-bir { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.sonuc-kutular { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--u3); margin: var(--u8) 0; }
.sonuc-kutu {
    border-radius: var(--r-md); padding: 2px;
    background: var(--sk-renk, var(--altin));
}
.sonuc-kutu .ic {
    background: var(--yuzey); border-radius: calc(var(--r-md) - 2px);
    padding: var(--u3) var(--u2); text-align: center;
}
.sonuc-kutu .baslik {
    background: var(--sk-renk, var(--altin)); color: #fff;
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    padding: 2px; border-radius: calc(var(--r-md) - 2px) calc(var(--r-md) - 2px) 0 0;
}
.sonuc-kutu .deger { font-size: 1.4rem; font-weight: 700; color: var(--sk-renk, var(--altin)); }
@media (max-width: 480px) { .sonuc-kutular { grid-template-columns: repeat(3, 1fr); gap: var(--u2); } }

/* ---------------------------------------------------------------- 14. LİG / GÖREV / ROZET */
.lig-basamaklar { display: flex; gap: var(--u3); overflow-x: auto; padding: var(--u2) 0 var(--u4); }
.lig-basamak {
    flex: none; width: 62px; text-align: center; opacity: .35;
    transition: opacity var(--gecis);
}
.lig-basamak.aktif { opacity: 1; }
.lig-basamak .madalya {
    width: 52px; height: 52px; margin: 0 auto var(--u1);
    border-radius: 50%; display: grid; place-items: center;
    font-size: 1.4rem; color: #fff;
    background: var(--lig-renk, var(--mavi));
    box-shadow: 0 3px 0 0 color-mix(in srgb, var(--lig-renk, var(--mavi)) 70%, #000);
}
.lig-basamak .ad { font-size: .68rem; font-weight: 600; color: var(--metin-2); }

.lig-satir {
    display: flex; align-items: center; gap: var(--u4);
    padding: var(--u3) var(--u4); border-radius: var(--r-md);
    transition: background var(--gecis-hizli);
}
.lig-satir + .lig-satir { border-top: 1px solid var(--cizgi); border-radius: 0; }
.lig-satir.ben { background: var(--mavi-yumusak); border-radius: var(--r-md); border-top-color: transparent; }
.lig-satir .sira { width: 30px; text-align: center; font-weight: 700; color: var(--metin-3); flex: none; }
.lig-satir.ben .sira { color: var(--mavi); }
.lig-satir .avatar {
    width: 40px; height: 40px; flex: none; border-radius: 50%;
    display: grid; place-items: center; font-weight: 700; color: #fff; font-size: .95rem;
}
.lig-satir .xp { margin-left: auto; font-weight: 600; color: var(--metin-2); white-space: nowrap; }
.lig-ayirac {
    display: flex; align-items: center; gap: var(--u3);
    margin: var(--u3) 0; font-size: .74rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
}
.lig-ayirac::before, .lig-ayirac::after { content: ""; height: 2px; flex: 1; background: currentColor; opacity: .35; }
.lig-ayirac.yukselme { color: var(--nane-koyu); }
.lig-ayirac.dusme { color: var(--kirmizi); }
:root[data-tema="koyu"] .lig-ayirac.yukselme { color: var(--nane); }

.gorev-satir { display: flex; align-items: center; gap: var(--u4); padding: var(--u4) 0; }
.gorev-satir + .gorev-satir { border-top: 1px solid var(--cizgi); }
.gorev-simge {
    width: 46px; height: 46px; flex: none; border-radius: var(--r-md);
    display: grid; place-items: center; font-size: 1.3rem; color: #fff;
    background: var(--gorev-renk, var(--altin));
}
.gorev-satir.tamam .gorev-simge { background: var(--nane); }
.gorev-satir.tamam .gorev-ad { text-decoration: line-through; color: var(--metin-3); }
.gorev-ad { font-weight: 600; font-size: .96rem; margin-bottom: var(--u2); }
.gorev-sayac { font-size: .8rem; font-weight: 600; color: var(--metin-3); white-space: nowrap; }

.rozet-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--u4); }
.rozet-kart { text-align: center; padding: var(--u5) var(--u4); }
.rozet-madalya {
    width: 72px; height: 72px; margin: 0 auto var(--u3); border-radius: 50%;
    display: grid; place-items: center; font-size: 2rem; color: #fff;
    background: var(--rz-renk, var(--mavi));
    box-shadow: 0 4px 0 0 color-mix(in srgb, var(--rz-renk, var(--mavi)) 70%, #000);
}
.rozet-kart.kilitli .rozet-madalya { background: var(--zemin-2); color: var(--metin-3); box-shadow: 0 4px 0 0 var(--cizgi); }
.rozet-kademe {
    display: inline-flex; gap: 3px; margin-top: var(--u2);
}
.rozet-kademe i { font-size: .7rem; color: var(--cizgi-koyu); }
.rozet-kademe i.dolu { color: var(--altin); }

/* Isı haritası (çalışma takvimi) */
.isi-harita { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: 3px; overflow-x: auto; padding-bottom: var(--u2); }
.isi-gun { width: 14px; height: 14px; border-radius: 4px; background: var(--zemin-2); }
.isi-gun[data-yogunluk="1"] { background: color-mix(in srgb, var(--nane) 28%, var(--zemin-2)); }
.isi-gun[data-yogunluk="2"] { background: color-mix(in srgb, var(--nane) 52%, var(--zemin-2)); }
.isi-gun[data-yogunluk="3"] { background: color-mix(in srgb, var(--nane) 76%, var(--zemin-2)); }
.isi-gun[data-yogunluk="4"] { background: var(--nane); }

/* Sütun grafik */
.sutun-grafik { display: flex; align-items: flex-end; gap: var(--u2); height: 140px; }
.sutun-grafik .sutun-oge { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--u1); height: 100%; justify-content: flex-end; }
.sutun-grafik .cubuk {
    width: 100%; max-width: 34px; border-radius: var(--r-xs) var(--r-xs) 0 0;
    background: linear-gradient(180deg, var(--mavi-acik), var(--mavi));
    min-height: 4px; transition: height var(--gecis);
}
.sutun-grafik .etiket { font-size: .68rem; color: var(--metin-3); font-weight: 600; }

/* Sözlük listesi */
.sozluk-satir {
    display: flex; align-items: center; gap: var(--u4);
    padding: var(--u4); border-bottom: 1px solid var(--cizgi);
}
.sozluk-satir:last-child { border-bottom: 0; }
.sozluk-satir .on { font-weight: 600; font-size: 1.05rem; }
.sozluk-satir .arka { color: var(--metin-2); font-size: .92rem; }
.guc-cubuk { width: 52px; height: 6px; border-radius: var(--r-tam); background: var(--zemin-2); overflow: hidden; flex: none; }
.guc-cubuk > span { display: block; height: 100%; background: var(--nane); border-radius: var(--r-tam); }

/* Sekmeler */
.sekmeler { display: flex; gap: var(--u2); overflow-x: auto; border-bottom: 2px solid var(--cizgi); margin-bottom: var(--u5); }
.sekme {
    flex: none; padding: var(--u3) var(--u4); margin-bottom: -2px;
    border: 0; background: transparent; font: inherit; font-weight: 600; font-size: .92rem;
    color: var(--metin-3); border-bottom: 3px solid transparent; cursor: pointer;
    white-space: nowrap;
}
.sekme:hover { color: var(--metin); }
.sekme.aktif { color: var(--mavi); border-bottom-color: var(--mavi); }

/* ---------------------------------------------------------------- 15. KATMAN / TOAST */
.katman {
    position: fixed; inset: 0; z-index: var(--z-katman);
    display: grid; place-items: center; padding: var(--u5);
    background: rgba(9, 16, 24, .55);
    animation: solgun-ac .16s ease-out;
}
.katman-govde {
    width: min(480px, 100%); max-height: 86vh; overflow-y: auto;
    background: var(--yuzey); border-radius: var(--r-xl);
    box-shadow: var(--golge-3); padding: var(--u8);
    animation: katman-ac .22s var(--yay);
}
@keyframes solgun-ac { from { opacity: 0; } }
@keyframes katman-ac { from { opacity: 0; transform: scale(.94) translateY(10px); } }

.toast-yuva {
    position: fixed; z-index: var(--z-toast);
    left: 50%; transform: translateX(-50%);
    top: calc(var(--u5) + env(safe-area-inset-top));
    display: flex; flex-direction: column; gap: var(--u2);
    width: min(420px, calc(100vw - var(--u8)));
    pointer-events: none;
}
.toast {
    display: flex; align-items: center; gap: var(--u3);
    padding: var(--u3) var(--u5); border-radius: var(--r-md);
    background: var(--yuzey); box-shadow: var(--golge-2);
    border-left: 4px solid var(--mavi);
    font-weight: 600; font-size: .93rem;
    animation: toast-in .26s var(--yay);
    pointer-events: auto;
}
.toast.basari { border-left-color: var(--nane); }
.toast.basari i { color: var(--nane); }
.toast.uyari { border-left-color: var(--altin); }
.toast.uyari i { color: var(--altin); }
.toast.hata { border-left-color: var(--kirmizi); }
.toast.hata i { color: var(--kirmizi); }
.toast i { font-size: 1.2rem; flex: none; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-14px); } }

/* Konfeti (ders sonu kutlaması) */
.konfeti { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-toast); overflow: hidden; }
.konfeti i {
    position: absolute; top: -20px; width: 9px; height: 15px; border-radius: 2px;
    animation: konfeti-dus linear forwards;
}
@keyframes konfeti-dus {
    to { transform: translateY(105vh) rotate(680deg); opacity: .2; }
}

/* ---------------------------------------------------------------- 16. HAREKET */
.beliren { animation: belir .4s ease-out both; }
@keyframes belir { from { opacity: 0; transform: translateY(12px); } }
.kayan-1 { animation-delay: .06s; }
.kayan-2 { animation-delay: .12s; }
.kayan-3 { animation-delay: .18s; }

.nabiz { animation: nabiz 1.6s ease-in-out infinite; }
@keyframes nabiz { 50% { transform: scale(1.05); } }

.sallan { animation: salla .4s; }
@keyframes salla {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-7px); }
    40%, 60% { transform: translateX(7px); }
}

.yukleniyor {
    width: 22px; height: 22px; border-radius: 50%;
    border: 3px solid var(--cizgi); border-top-color: var(--mavi);
    animation: don .8s linear infinite;
}
@keyframes don { to { transform: rotate(360deg); } }

/* İskelet (yükleme) */
.iskelet {
    background: linear-gradient(90deg, var(--zemin-2) 25%, var(--yuzey-2) 50%, var(--zemin-2) 75%);
    background-size: 200% 100%;
    animation: iskelet-kay 1.4s ease-in-out infinite;
    border-radius: var(--r-sm);
}
@keyframes iskelet-kay { to { background-position: -200% 0; } }

/* Kullanıcı hareket azaltma istediyse tüm süslemeler durur */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}
/* Kullanıcı ayarlardan animasyonu kapattıysa */
:root[data-animasyon="kapali"] *, :root[data-animasyon="kapali"] *::before {
    animation: none !important;
    transition-duration: .001ms !important;
}

/* ---------------------------------------------------------------- 17. YAZDIRMA */
@media print {
    .yan-menu, .sag-panel, .alt-menu, .site-ust, .ust-serit, .btn, .ikon-btn { display: none !important; }
    body { background: #fff; color: #000; }
    .kabuk { grid-template-columns: 1fr; }
}

/* ================================================================
   REKLAM ENGELLEYİCİ PERDESİ + DERS SESİ YÜKLEME
   Ücretsiz kat reklam geliriyle ayakta duruyor; engelleyici açıkken
   uygulama kullanılamaz. Ücretli üyede bu perde hiç çalışmaz.
   ================================================================ */
body.reklam-engelli > .kabuk { filter: blur(4px); pointer-events: none; user-select: none; }

#reklam-engel-perde {
    position: fixed; inset: 0; z-index: 9000;
    display: flex; align-items: center; justify-content: center;
    padding: 1.25rem; background: rgba(6, 14, 26, .82); backdrop-filter: blur(2px);
}

.reklam-engel-kutu {
    max-width: 460px; width: 100%; text-align: center;
    background: var(--yuzey, #fff); color: var(--metin, #0f1b2a);
    border-radius: 16px; padding: 2rem 1.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

.reklam-engel-kutu > i { font-size: 2.6rem; color: #c4283a; display: block; margin-bottom: .6rem; }
.reklam-engel-kutu h2 { font-size: 1.25rem; margin: 0 0 .6rem; }
.reklam-engel-kutu p { margin: 0 0 .8rem; line-height: 1.5; }
.reklam-engel-kutu .kucuk { font-size: .85rem; opacity: .75; }
.reklam-engel-dugmeler { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }

/* ---- ders sesi indirme göstergesi ---- */
#ses-yukleme {
    position: fixed; inset: 0; z-index: 8500;
    display: flex; align-items: center; justify-content: center;
    padding: 1.25rem; background: rgba(6, 14, 26, .78);
}

.ses-yukleme-kutu {
    max-width: 340px; width: 100%; text-align: center;
    background: var(--yuzey, #fff); color: var(--metin, #0f1b2a);
    border-radius: 16px; padding: 1.6rem 1.4rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

.ses-yukleme-kutu p { margin: .5rem 0 0; }
.ses-yukleme-kutu .kucuk { font-size: .82rem; opacity: .75; }

.ses-yukleme-halka {
    width: 42px; height: 42px; margin: 0 auto;
    border: 3px solid rgba(0, 105, 184, .22); border-top-color: #0069b8;
    border-radius: 50%; animation: ses-doner .8s linear infinite;
}

@keyframes ses-doner { to { transform: rotate(360deg); } }

.ses-yukleme-cubuk {
    height: 6px; border-radius: 999px; background: rgba(0, 0, 0, .1);
    overflow: hidden; margin: .9rem 0 .5rem;
}

.ses-yukleme-cubuk > span { display: block; height: 100%; width: 0; background: #0069b8; transition: width .2s ease; }

/* ---- kart ile butonlar arasındaki reklam yuvası ---- */
.reklam-yuva {
    display: flex; align-items: center; justify-content: center;
    min-height: 60px; margin: 0 auto; padding: .35rem 0;
    width: 100%; max-width: 720px; overflow: hidden;
}

.reklam-yuva .reklam-etiket {
    font-size: .68rem; letter-spacing: .04em; text-transform: uppercase;
    opacity: .55; margin-bottom: .2rem; display: block; text-align: center;
}

/* ============================================================================
   KELİMESİ KELİMESİNE ÇÖZÜMLEME
   Hedef dildeki her sözcüğün altında birebir Türkçe karşılığı durur. Amaç öğrencinin
   yabancı dilin KENDİ dizilişini görmesi; bu yüzden karşılıklar sözcük sözcük hizalı
   sütunlar hâlindedir, akıcı bir cümle gibi değil.
   Sözcük sayısı kartlara göre değiştiği için satır kendiliğinden sarar.
   ========================================================================== */
.cozumleme {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--u1) var(--u3);
    padding: var(--u3) var(--u4);
    background: var(--yuzey-2);
    border: 1px solid var(--cizgi);
    border-radius: var(--r-xs);
}

.cozumleme .coz {
    display: inline-flex; flex-direction: column; align-items: center;
    /* 1.25 sıkışıktı; iki satır arası nefes alsın. */
    line-height: 1.45;
}

/* 🔴 HİYERARŞİ: üstteki ALMANCA sözcük öğretilen şeydir; baskın olan o olmalı.
   Önce tersi yazılmıştı — Türkçe karşılık hem daha büyük hem daha koyuydu, göz
   öğrenilecek sözcüğe değil çevirisine gidiyordu (27.08.2026 ölçümü). */
.cozumleme .coz-de {
    font-size: 1rem; font-weight: var(--ag-orta); color: var(--metin);
}

.cozumleme .coz-tr {
    font-size: .85rem; font-weight: var(--ag-normal); color: var(--metin-3);
}

/* 🔴 Tarayıcı varsayılanı `strong, b { font-weight: bolder }`. Bu, 700 ağırlıklı bir kabın
   içinde metni 900'e (Segoe UI Black) çıkarır ve vurgu "bağırma"ya döner. Sabitlenir. */
strong, b {
    font-weight: var(--ag-kalin);
}

/* ============================================================================
   TEMALAR
   Benzer eğitim/uzun-okuma uygulamalarının (Kindle, Word Immersive Reader, Anki,
   GitHub Dark Dimmed) sunduğu temalar tarandı ve beş ölçütle puanlandı:
   uzun okumada göz yorgunluğu · metin kontrastı (WCAG) · gece kullanımı ·
   renk körlüğü · kurumsal duruş. Sekiz adaydan ilk dört seçildi.

     Yumuşak Koyu   24/25   nötr, düşük parlaklık — halelenme yapmayan koyu
     Sıcak Koyu     23/25   gece; zeminde mavi payı %5
     Kâğıt (sepya)  22/25   uzun okuma; ışık çıkışı 0,831 (mevcut açık tema 0,956)
     Yüksek Kontrast 18/25  erişilebilirlik gereği (21:1)
   Solarized ELENDİ: gövde kontrastı 4,13:1 ile AA eşiğini bile geçmiyor.

   🔴 Koyu temalar bilinçli olarak 11-13:1 bandında tutuldu; 15:1 üstü oranlar
   koyu zeminde halelenme (halation) yapıp uzun okumayı yoruyor.
   🔴 Bootstrap mavisi ve türevleri hiçbir palette YOK.
   ========================================================================== */

:root[data-tema="kagit"], :root[data-tema="kagit"] { /* data-ton="acik" */
  --mavi: #0A5F92; --mavi-koyu: #07496F; --mavi-acik: #2E86BF; --mavi-yumusak: #E3EDF3;
  --nane: #0E7550; --nane-koyu: #0A5B3E; --nane-yumusak: #DFEDE2;
  --altin: #9C6E12; --altin-yumusak: #F3E7C6; --altin-yazi: #7A5400;
  --mercan: #8F3510; --mercan-yumusak: #F6E3D5; --mercan-yazi: #8F3510;
  --mor: #57409E; --mor-yumusak: #E8E4F2; --mor-yazi: #4A3589;
  --kirmizi: #A83229; --kirmizi-yumusak: #F6E1DD; --kirmizi-yazi: #93221C;
  --zemin: #EFE6D6; --zemin-2: #E5DAC6; --yuzey: #FAF4E8; --yuzey-2: #F2EADA;
  --cizgi: #DCCDB2; --cizgi-koyu: #8E7F66;
  --metin: #2E2620; --metin-2: #574A3C; --metin-3: #6E6152; --ters-metin: #FFFFFF;
  --golge-1: 0 1px 2px rgba(60,45,25,.08);
  --golge-2: 0 2px 6px rgba(60,45,25,.09), 0 8px 24px rgba(60,45,25,.08);
  --golge-3: 0 12px 40px rgba(60,45,25,.20);
}

:root[data-tema="yumusak-koyu"] { /* data-ton="koyu" */
  --mavi: #5AA6DE; --mavi-koyu: #3E86BB; --mavi-acik: #8FC6EC; --mavi-yumusak: #16293A;
  --nane: #3CBE8C; --nane-koyu: #2C9670; --nane-yumusak: #132C23;
  --altin: #D9AD4E; --altin-yumusak: #2E2611; --altin-yazi: #E0B96A;
  --mercan: #E08A5E; --mercan-yumusak: #2E1F16; --mercan-yazi: #E89B72;
  --mor: #B48AD8; --mor-yumusak: #251D33; --mor-yazi: #C4A2E4;
  --kirmizi: #E27168; --kirmizi-yumusak: #301B19; --kirmizi-yazi: #EC8B83;
  --zemin: #141A21; --zemin-2: #191F27; --yuzey: #1D242D; --yuzey-2: #242C37;
  --cizgi: #333E4B; --cizgi-koyu: #64717F;
  --metin: #D6DCE4; --metin-2: #A6B1BE; --metin-3: #8B96A4; --ters-metin: #10161C;
  --golge-1: 0 1px 2px rgba(0,0,0,.38);
  --golge-2: 0 2px 6px rgba(0,0,0,.42), 0 10px 28px rgba(0,0,0,.34);
  --golge-3: 0 14px 44px rgba(0,0,0,.55);
}

:root[data-tema="sicak-koyu"] { /* data-ton="koyu" */
  --mavi: #6FA8CF; --mavi-koyu: #4F87AD; --mavi-acik: #9AC8E2; --mavi-yumusak: #1B242B;
  --nane: #4FB98A; --nane-koyu: #38916A; --nane-yumusak: #182720;
  --altin: #DFAE4E; --altin-yumusak: #2C2312; --altin-yazi: #E5BC6C;
  --mercan: #E08A5E; --mercan-yumusak: #2C1E15; --mercan-yazi: #E89B72;
  --mor: #B693DE; --mor-yumusak: #261E33; --mor-yazi: #C7ABE8;
  --kirmizi: #DC7264; --kirmizi-yumusak: #2C1B17; --kirmizi-yazi: #E88C80;
  --zemin: #17130F; --zemin-2: #1D1813; --yuzey: #221C16; --yuzey-2: #2A231C;
  --cizgi: #3B322A; --cizgi-koyu: #776A55;
  --metin: #E4D9C9; --metin-2: #B3A695; --metin-3: #94887A; --ters-metin: #17130F;
  --golge-1: 0 1px 2px rgba(0,0,0,.42);
  --golge-2: 0 2px 6px rgba(0,0,0,.46), 0 10px 28px rgba(0,0,0,.38);
  --golge-3: 0 14px 44px rgba(0,0,0,.60);
}

:root[data-tema="yuksek-kontrast"] { /* data-ton="acik" */
  --mavi: #00457C; --mavi-koyu: #00305A; --mavi-acik: #0A67AF; --mavi-yumusak: #E6EFF6;
  --nane: #00563A; --nane-koyu: #003D29; --nane-yumusak: #E4F0EA;
  --altin: #805800; --altin-yumusak: #F5EDD8; --altin-yazi: #5E4100;
  --mercan: #7C2205; --mercan-yumusak: #F7E7DF; --mercan-yazi: #7C2205;
  --mor: #3B1E8F; --mor-yumusak: #EAE6F6; --mor-yazi: #3B1E8F;
  --kirmizi: #A8000A; --kirmizi-yumusak: #F8E4E3; --kirmizi-yazi: #8A0008;
  --zemin: #FFFFFF; --zemin-2: #EFEFEF; --yuzey: #FFFFFF; --yuzey-2: #F4F4F4;
  --cizgi: #8C8C8C; --cizgi-koyu: #333333;
  --metin: #000000; --metin-2: #1C1C1C; --metin-3: #3A3A3A; --ters-metin: #FFFFFF;
  --golge-1: 0 0 0 1px #333333; --golge-2: 0 0 0 2px #333333; --golge-3: 0 0 0 3px #000000;
}

/* Tema seçicideki küçük önizleme: zemin + yüzey + metin rengi tek karede. */
.tema-ornek {
    width: 38px; height: 38px; flex: none; border-radius: var(--r-xs);
    border: 1px solid var(--cizgi);
    background: linear-gradient(135deg, var(--o-zemin) 0 55%, var(--o-yuzey) 55% 100%);
    position: relative; overflow: hidden;
}

.tema-ornek::after {
    content: ""; position: absolute; left: 7px; right: 7px; top: 15px; height: 3px;
    border-radius: 2px; background: var(--o-metin); opacity: .75;
}