/* MehmetHocamMatematik.com — public arayüz
   Tasarım tokenları tek yerde. Mobil öncelikli. */

:root {
    --navy-900: #0F1B2D;
    --navy-800: #16273F;
    --navy-700: #1B3C6E;
    --navy-600: #2557A0;

    --teal-700: #0B6F72;
    --teal-600: #0E8F93;
    --teal-500: #12A7AB;
    --teal-050: #E2F1F1;

    --ink:      #14202F;
    --ink-2:    #3D4C61;
    --ink-3:    #6B7A90;

    --ground:   #F5F7FA;
    --surface:  #FFFFFF;
    --line:     #DCE3EC;
    --line-2:   #C3CEDD;

    --ok:       #15803D;
    --ok-bg:    #E8F5EC;
    --warn:     #9A5B12;
    --warn-bg:  #FBF0DF;
    --danger:   #B3261E;
    --danger-bg:#FCECEB;

    --radius:   8px;
    --radius-sm:5px;
    --shadow:   0 1px 2px rgba(15, 27, 45, .05), 0 10px 28px -20px rgba(15, 27, 45, .35);

    --font:     system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono:ui-monospace, "Cascadia Code", Consolas, monospace;

    --gutter:   16px;
    --container: 1120px;
}

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

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

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

img { max-width: 100%; height: auto; }
a { color: var(--teal-700); }
a:hover { color: var(--teal-600); }

h1, h2, h3 { line-height: 1.22; text-wrap: balance; margin: 0 0 .5em; letter-spacing: -.015em; }
h1 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); }
h2 { font-size: clamp(1.25rem, 3vw, 1.55rem); }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
.muted { color: var(--ink-3); }
.lead { font-size: 1.06rem; color: var(--ink-2); max-width: 62ch; }

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--navy-900); color: #fff; padding: 10px 16px;
}
.skip:focus { left: 8px; top: 8px; }

:focus-visible { outline: 2px solid var(--teal-600); outline-offset: 2px; border-radius: 3px; }

/* ---------------------------------------------------------- üst bar */

.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 30;
}
.header-inner {
    display: flex; align-items: center; gap: 12px;
    min-height: 62px; flex-wrap: wrap;
}
.brand {
    display: inline-flex; align-items: center; gap: 10px;
    text-decoration: none; color: var(--navy-900); margin-right: auto;
}
.brand-mark {
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border-radius: var(--radius-sm);
    background: var(--navy-700); color: #fff;
    font-weight: 700; font-size: .8rem;
}
.brand-text { font-size: .86rem; line-height: 1.15; color: var(--ink-2); }
.brand-text strong { display: block; font-size: 1.02rem; color: var(--navy-900); }

.nav-toggle {
    display: none; flex-direction: column; justify-content: center; gap: 4px;
    width: 42px; height: 42px; padding: 0; border: 0; background: none; cursor: pointer;
}
.nav-toggle span { display: block; width: 20px; height: 2px; margin-inline: auto; background: var(--ink); }

.site-nav { display: flex; align-items: center; gap: 18px; }
.site-nav > a {
    color: var(--ink-2); text-decoration: none; font-size: .92rem; font-weight: 500;
    padding: 6px 0; border-bottom: 2px solid transparent;
}
.site-nav > a:hover { color: var(--teal-700); border-bottom-color: var(--teal-600); }

.nav-search { display: flex; gap: 6px; }
.nav-search input {
    min-width: 170px; min-height: 38px; padding: 0 12px;
    font: inherit; font-size: .88rem;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--ground);
}
.nav-search input:focus { background: #fff; border-color: var(--teal-600); }
.nav-search button {
    min-height: 38px; padding: 0 14px; font: inherit; font-size: .86rem; font-weight: 600;
    color: #fff; background: var(--teal-600); border: 0; border-radius: var(--radius-sm); cursor: pointer;
}
.nav-search button:hover { background: var(--teal-500); }

/* ---------------------------------------------------------- hero */

.hero {
    background: linear-gradient(165deg, var(--navy-900), var(--navy-800) 60%, var(--navy-700));
    color: #fff;
}
.hero-inner { padding-block: clamp(44px, 8vw, 88px); }
.hero h1 { color: #fff; font-size: clamp(2rem, 6vw, 3.1rem); }
.eyebrow {
    font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--teal-500); margin-bottom: 14px; font-weight: 600;
}
.hero .lead { color: #C6D2E2; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Sayaçlar artık bağlantı: her biri karşılığı olan listeye gidiyor.
   Dar ekranda sarmalı, yoksa üç sayaç hero'yu yatay kaydırtır. */
.hero-stats { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 32px 0 0; }

.hero-stat {
    display: flex; flex-direction: column; gap: 2px;
    text-decoration: none; color: inherit;
    /* Dokunmatikte rahat hedef */
    min-height: 44px; justify-content: center;
    border-bottom: 2px solid transparent;
    transition: border-color .15s;
}
.hero-stat:hover { color: inherit; border-bottom-color: var(--teal-500); }
.hero-stat:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 3px; }

.hero-stat-label {
    font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #8FA3BF;
}
.hero-stat-value {
    font-size: 1.5rem; font-weight: 700;
    font-variant-numeric: tabular-nums; color: #fff;
}

/* ---------------------------------------------------------- butonlar */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 0 22px;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    font: inherit; font-weight: 600; font-size: .95rem;
    text-decoration: none; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--teal-600); color: #fff; }
.btn-primary:hover { background: var(--teal-500); color: #fff; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-ghost:hover { border-color: #fff; color: #fff; }
.btn-small { min-height: 38px; padding: 0 14px; font-size: .86rem; }

/* ---------------------------------------------------------- bölümler */

.section { padding-block: clamp(36px, 6vw, 64px); }
.section-tint { background: var(--surface); border-block: 1px solid var(--line); }
/* Sayfa içi ikinci derece bölüm. Üst üste gelen kart öbeklerini
   birbirinden ayıran ana boşluk burası; daraltılırsa iki liste tek
   bir uzun liste gibi okunmaya başlıyor. */
.section-inline { margin-top: 48px; }

.section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.section-head h2 { margin: 0; }
.section-head p { margin: 0; }
.section-more { font-size: .88rem; font-weight: 600; text-decoration: none; white-space: nowrap; }

.page-top { padding-block: 24px 64px; }
.page-header { margin-bottom: 22px; }
.page-header h1 { margin-bottom: .3em; }

/* ---------------------------------------------------------- breadcrumb */

.breadcrumb { margin-bottom: 16px; }
.breadcrumb ol {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    list-style: none; margin: 0; padding: 0;
    font-size: .8rem; color: var(--ink-3);
}
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--line-2); }
.breadcrumb a { color: var(--ink-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--teal-700); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--ink-2); }

/* ---------------------------------------------------------- sınav kartları */

.exam-grid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.exam-card {
    display: flex; flex-direction: column; gap: 4px;
    padding: 18px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    text-decoration: none; color: var(--ink);
    transition: border-color .15s ease, transform .15s ease;
}
.exam-card:hover { border-color: var(--teal-600); transform: translateY(-2px); color: var(--ink); }
.exam-name { font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; }
.exam-count { font-size: .8rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- soru kartları */

.card-grid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.q-card {
    display: flex; flex-direction: column; gap: 10px;
    padding: 16px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    transition: border-color .15s ease;
}
.q-card:hover { border-color: var(--line-2); }
.q-card-link { text-decoration: none; }
.q-card-title {
    margin: 0; font-size: .98rem; font-weight: 600; line-height: 1.4; color: var(--ink);
    overflow-wrap: anywhere;
}
.q-card-link:hover .q-card-title { color: var(--teal-700); }
.q-card-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: auto; }

/* Cikmis soru rozeti: "bu gercekten sinavda cikti" bilgisi one cikmali,
   ama renk tek basina tasiyici degil - rozetin metni de soyluyor. */
.q-chip-past { background: var(--teal-050); color: var(--teal-700); border-color: var(--teal-600); }

.q-tag {
    font-size: .72rem; font-weight: 600; text-decoration: none;
    color: var(--navy-700); background: #EDF2F9;
    padding: 2px 8px; border-radius: 10px;
}
.q-tag:hover { background: #E2EBF7; color: var(--navy-700); }
.q-chip {
    font-size: .7rem; color: var(--ink-3);
    border: 1px solid var(--line); border-radius: 10px; padding: 1px 8px;
    white-space: nowrap;
}
.q-chip.is-solved { color: var(--ok); background: var(--ok-bg); border-color: #C6E5D0; }

/* Okunma sayaci.
   Cercevesi YOK: bu bir rozet degil, yan bilgi. Cerceveli olsaydi
   zorluk/cozumlu rozetleriyle ayni agirlikta gorunur ve karti
   kalabaliklastirirdi. margin-left:auto ile satirin sonuna itiliyor,
   boylece rozetler kendi arasinda hizali kaliyor. */
.q-views {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: auto;
    font-size: .7rem; color: var(--ink-3); white-space: nowrap;
}
.q-views-icon {
    width: 14px; height: 14px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
}

.q-level-1 { color: var(--ok); border-color: #C6E5D0; }
.q-level-3 { color: var(--warn); border-color: #EBD7B4; }
.q-level-4 { color: var(--danger); border-color: #F0C9C6; }

/* ---------------------------------------------------------- test seçici */

/* İki sütun: solda konu listesi, sağda zorluk. Dar ekranda alt alta. */
.picker-cols {
    display: grid; gap: 22px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: start;
}
.picker-title {
    margin: 0 0 10px; font-size: .8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3);
}

/* Zorluk hapları: konu listesinin yanında durduğu için kart değil,
   satır içi etiket. Kart olsaydı iki sütun birbiriyle yarışırdı. */
.level-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* Ana sayfa "Test Seç": her sınav kendi sütununda (solda KPSS, sağda
   AGS); üstte sınav adı, altında zorluk hapları ve konu listesi. */
.exam-col-title { margin: 0 0 14px; font-size: 1.15rem; font-weight: 800; }
.exam-col-title a { color: var(--ink); text-decoration: none; }
.exam-col-title a:hover { color: var(--teal-700); text-decoration: underline; }
.exam-col-sub { margin-top: 22px; }
.level-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 12px; text-decoration: none;
    background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
    font-size: .88rem; color: var(--ink);
    min-height: 40px;
    transition: border-color .15s, background .15s;
}
.level-pill:hover { border-color: var(--teal-600); background: #F7FBFB; }
.level-pill:focus-visible { outline: 2px solid var(--teal-700); outline-offset: 2px; }
.level-pill-count {
    font-size: .75rem; font-weight: 700; color: var(--ink-3);
    background: #EDF2F9; border-radius: 999px; padding: 1px 7px;
    font-variant-numeric: tabular-nums;
}

/* Testi olmayan seviye: görünür ama tıklanmaz. Gizleseydik öğrenci
   böyle bir seviye olduğunu hiç bilmezdi. */
.level-pill.is-empty { opacity: .5; cursor: default; }

/* Testler sayfasindaki zorluk filtresi ayni haplari kullaniyor.
   Secili olan dolu: hangi filtrenin acik oldugu bir bakista belli. */
.level-row { margin: 18px 0 0; }
.level-pill.is-active {
    border-color: var(--teal-600); background: var(--teal-050);
    color: var(--teal-700); font-weight: 600;
}
.level-pill.is-active .level-pill-count { background: #FFF; color: var(--teal-700); }

/* ---------------------------------------------------------- konu seçici */

.topic-picker { margin: 24px 0 0; }

/* Konu test sayfasi: testler basligin hemen altinda, konu listesi
   ("Diger Konular") onlarin altinda. Testler ustte oldugu icin
   aradaki buyuk bosluk gerekmiyor; alttaki konu listesi ise asil
   listeden net ayrilsin. */
.section-inline.section-first { margin-top: 20px; }
.section-first ~ .topic-picker { margin-top: 48px; }

/* Bölüm başlığı ile altındaki kartlar arasında net bir boşluk.
   12px'te başlık kartlara yapışıyordu ve sayfa iç içe geçmiş
   görünüyordu — hangi kartın hangi başlığa ait olduğu okunmuyordu. */
.topic-picker-title {
    margin: 0 0 16px; font-size: .85rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3);
}

/* Numaralı konu listesi: 1'den başlayıp aşağı doğru iner.
   Numaralar <ol>'un kendisinden geliyor, CSS sayacından değil. */
.topic-list {
    margin: 0; padding: 0; list-style: none; counter-reset: konu;
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--surface); overflow: hidden;
}
.topic-row { counter-increment: konu; }
.topic-row + .topic-row { border-top: 1px solid var(--line); }

.topic-link {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px; text-decoration: none; color: var(--ink);
    font-size: .92rem;
    /* Dokunmatikte rahat hedef */
    min-height: 44px;
    transition: background .12s;
}
.topic-link::before {
    content: counter(konu) ".";
    flex: none; min-width: 26px;
    font-size: .8rem; font-weight: 700; color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
.topic-link:hover { background: #F7FBFB; }
.topic-link:focus-visible { outline: 2px solid var(--teal-700); outline-offset: -2px; }
.topic-name { overflow-wrap: anywhere; }

/* Test sayısı sağda; tabular-nums sayesinde alt alta hizalı kalıyor,
   göz tek sütun halinde tarayabiliyor. */
.topic-count {
    margin-left: auto; flex: none;
    font-size: .78rem; font-weight: 600; color: var(--ink-3);
    background: #EDF2F9; border-radius: 8px; padding: 2px 8px;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.topic-count-unit { font-weight: 400; }

.topic-row.is-active { background: var(--teal-050, #EAF6F5); }
.topic-row.is-active .topic-link { color: var(--teal-700); font-weight: 600; }
.topic-row.is-active .topic-link::before { color: var(--teal-700); }
.topic-row.is-active .topic-count { background: #FFF; color: var(--teal-700); }

.topic-picker-clear { margin: 10px 0 0; font-size: .85rem; }
.topic-picker-clear a { color: var(--ink-3); }

/* ---------------------------------------------------------- günün sorusu */

.daily {
    background: var(--surface); border: 1px solid var(--line);
    border-left: 3px solid var(--teal-600);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 22px; box-shadow: var(--shadow); max-width: 74ch;
}
.daily-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
/* Iki sinavin gunun sorusu yan yana: kart sutunu doldursun. */
.daily-cols .daily { max-width: none; height: 100%; display: flex; flex-direction: column; }
.daily-cols .daily .btn { align-self: flex-start; margin-top: auto; }
.daily-title { margin-bottom: .6em; font-size: 1.15rem; }
.daily-body { color: var(--ink-2); margin-bottom: 18px; overflow-x: auto; }
.daily-body p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- soru detayı */

.question {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: clamp(18px, 4vw, 32px);
    box-shadow: var(--shadow);
}
.question-head { margin-bottom: 18px; }
.question-head .q-card-meta { margin-bottom: 12px; }
.question-head h1 { font-size: clamp(1.35rem, 3.4vw, 1.75rem); margin: 0; }

.question-body {
    font-size: 1.05rem; color: var(--ink); line-height: 1.75;
    overflow-x: auto;
}
.question-body p:last-child { margin-bottom: 0; }

.question-figure { margin: 18px 0; text-align: center; }
.question-figure img {
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
}

.question-source { margin-top: 20px; font-size: .78rem; color: var(--ink-3); }

/* şıklar */
.options { list-style: none; margin: 22px 0 8px; padding: 0; display: grid; gap: 8px; }
.option-btn {
    display: flex; align-items: flex-start; gap: 12px; width: 100%;
    min-height: 48px; padding: 10px 14px;
    font: inherit; text-align: left; cursor: pointer;
    background: var(--ground); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    transition: border-color .15s ease, background-color .15s ease;
}
.option-btn:hover { border-color: var(--line-2); background: #fff; }
.option-key {
    flex: 0 0 auto; width: 26px; height: 26px;
    display: grid; place-items: center;
    font-weight: 700; font-size: .82rem;
    color: var(--navy-700); background: #fff;
    border: 1px solid var(--line); border-radius: 50%;
}
.option-text { flex: 1; overflow-wrap: anywhere; }
.option.is-chosen .option-btn { border-color: var(--navy-600); background: #EDF3FB; }
.option.is-chosen .option-key { background: var(--navy-600); color: #fff; border-color: var(--navy-600); }
.option.is-correct .option-btn { border-color: var(--ok); background: var(--ok-bg); }
.option.is-correct .option-key { background: var(--ok); color: #fff; border-color: var(--ok); }
.option-hint { font-size: .76rem; color: var(--ink-3); margin: 0 0 4px; }

/* çözüm — details/summary, JS'siz çalışır */
.solution {
    margin-top: 22px;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--ground); overflow: hidden;
}
.solution > summary {
    padding: 14px 18px; cursor: pointer;
    font-weight: 600; font-size: .95rem; color: var(--teal-700);
    list-style: none; user-select: none;
}
.solution > summary::-webkit-details-marker { display: none; }
.solution > summary::before {
    content: "▸"; display: inline-block; margin-right: 8px;
    transition: transform .15s ease;
}
.solution[open] > summary::before { transform: rotate(90deg); }
.solution > summary:hover { background: #EEF2F7; }
.solution-body {
    padding: 4px 18px 18px;
    border-top: 1px solid var(--line);
    background: var(--surface);
    overflow-x: auto;
}
.solution-body > *:first-child { margin-top: 14px; }
.solution-body p:last-child { margin-bottom: 0; }

.callout {
    margin-top: 22px; padding: 16px 18px;
    background: var(--warn-bg); border: 1px solid #EBD7B4; border-radius: var(--radius);
}
.callout h2 { font-size: 1rem; margin-bottom: .35em; color: var(--warn); }
.callout p { margin: 0; font-size: .9rem; color: var(--ink-2); }

/* önceki / sonraki */
.q-nav {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px;
}
.q-nav-item {
    display: flex; flex-direction: column; gap: 3px;
    padding: 14px 16px; text-decoration: none;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.q-nav-item:hover { border-color: var(--teal-600); }
.q-nav-item span { font-size: .74rem; color: var(--ink-3); }
.q-nav-item strong { font-size: .9rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
.q-nav-item.is-next { text-align: right; }

/* ---------------------------------------------------------- filtreler */

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chip-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 13px; font-size: .86rem; text-decoration: none;
    color: var(--ink-2); background: var(--surface);
    border: 1px solid var(--line); border-radius: 18px;
}
.chip-link:hover { border-color: var(--teal-600); color: var(--teal-700); }
.chip-link span {
    font-size: .72rem; font-variant-numeric: tabular-nums;
    color: var(--ink-3); background: var(--ground);
    padding: 0 6px; border-radius: 8px;
}

.filter-bar {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    padding: 10px 12px; margin-bottom: 18px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.filter-bar select {
    min-height: 38px; padding: 0 10px;
    font: inherit; font-size: .86rem; color: var(--ink);
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.filter-clear { font-size: .82rem; color: var(--ink-3); }

.search-box { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.search-box input {
    flex: 1 1 260px; min-height: 46px; padding: 0 14px;
    font: inherit; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
}
.search-box input:focus { border-color: var(--teal-600); }
.result-count { margin-bottom: 14px; font-size: .88rem; }

/* ---------------------------------------------------------- sayfalama */

.pagination {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    margin-top: 26px;
}
.page-btn, .page-num {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; min-height: 40px; padding: 0 12px;
    font-size: .88rem; text-decoration: none; color: var(--ink-2);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
    font-variant-numeric: tabular-nums;
}
.page-btn:hover, .page-num:hover { border-color: var(--teal-600); color: var(--teal-700); }
.page-num.is-current {
    background: var(--navy-700); border-color: var(--navy-700); color: #fff; font-weight: 600;
}
.page-gap { color: var(--ink-3); padding: 0 2px; }

/* ---------------------------------------------------------- boş durumlar */

.empty-state {
    padding: clamp(28px, 6vw, 52px);
    text-align: center;
    background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--radius);
}
.empty-state h2 { margin-bottom: .4em; }
.empty-state p { color: var(--ink-2); max-width: 52ch; margin-inline: auto; }

/* ---------------------------------------------------------- alt bilgi */

.site-footer {
    margin-top: auto;
    background: var(--navy-900); color: #A8B8CE;
    border-top: 1px solid var(--navy-800);
}
.footer-inner {
    display: flex; flex-wrap: wrap; gap: 20px 40px;
    align-items: center; justify-content: space-between;
    padding-block: 28px 34px;
}
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand .brand-mark { background: var(--teal-600); }
.footer-brand p { margin: 0; font-size: .88rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-links a { color: #A8B8CE; text-decoration: none; font-size: .88rem; }
.footer-links a:hover { color: #fff; }
/* Alt bilgideki sosyal baglantilar ve iletisim listesi. */
.footer-social { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 0; padding: 0; list-style: none; font-size: .82rem; }
.contact-list { margin: 0; padding: 0; list-style: none; line-height: 1.9; }
.contact-list a { font-weight: 500; }

/* Onay kutusunun altindaki KVKK notu: okunmali ama one cikmamali. */
.consent-note { margin: 6px 0 0; font-size: .78rem; color: var(--ink-3); line-height: 1.5; }

/* Yasal baglantilar: alt bilgide ayri bir satir, telif satirinin ustunde. */
.footer-legal {
    display: flex; flex-wrap: wrap; gap: 6px 16px;
    margin-top: 14px; font-size: .8rem;
}
.footer-legal a { color: var(--ink-3); }
.footer-legal a:hover { color: var(--teal-700); }

.footer-copy { margin: 0; font-size: .8rem; color: #7A8CA5; width: 100%; }

/* ---------------------------------------------------------- hata sayfaları */

.error-page { display: grid; place-items: center; flex: 1; padding-block: 48px; }
.error-inner { max-width: 56ch; text-align: center; }
.error-code {
    font-family: var(--font-mono); font-size: .8rem; letter-spacing: .18em;
    color: var(--teal-600); margin-bottom: 4px;
}
/* 404'teki arama kutusu ortada duruyor; sayfanin geri kalani zaten ortali. */
.error-search { justify-content: center; margin-top: 24px; }
.error-search input { flex: 1 1 240px; max-width: 320px; }
.error-links {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px;
    margin: 20px 0 0; padding: 0; list-style: none; font-size: .9rem;
}

.error-actions { margin-top: 24px; }
.error-detail {
    margin-top: 32px; padding: 16px; text-align: left;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
    font-family: var(--font-mono); font-size: .72rem; line-height: 1.5;
    white-space: pre-wrap; overflow-x: auto; color: var(--ink-2);
}

/* ---------------------------------------------------------- matematik */

/* KaTeX uzun formüllerde sayfayı yatay kaydırmasın */
.katex-display { overflow-x: auto; overflow-y: hidden; padding-block: 2px; }

/* ---------------------------------------------------------- mobil */

@media (max-width: 860px) {
    .nav-toggle { display: flex; }
    .site-nav {
        display: none; width: 100%;
        flex-direction: column; align-items: stretch; gap: 0;
        padding-bottom: 12px;
    }
    .site-nav.is-open { display: flex; }
    .site-nav > a {
        padding: 12px 0; border-bottom: 1px solid var(--line);
    }
    .nav-search { margin-top: 12px; }
    .nav-search input { flex: 1; min-width: 0; }
    .q-nav { grid-template-columns: 1fr; }
    .q-nav-item.is-next { text-align: left; }
}

@media (max-width: 480px) {
    .card-grid { grid-template-columns: 1fr; }
    .hero-stats { gap: 20px; }
    .footer-inner { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------- testler */

.t-card {
    display: flex; flex-direction: column; gap: 10px;
    padding: 18px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    transition: border-color .15s ease;
}
.t-card:hover { border-color: var(--teal-600); }
.t-card-link { text-decoration: none; }
.t-card-title { margin: 0; font-size: 1rem; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.t-card-link:hover .t-card-title { color: var(--teal-700); }
.t-card-desc { margin: 0; font-size: .85rem; color: var(--ink-3); }
.t-card-stats {
    display: flex; gap: 18px; margin: 0; padding: 10px 0;
    border-block: 1px solid var(--line);
}
.t-card-stats div { margin: 0; }
.t-card-stats dt {
    font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.t-card-stats dd {
    margin: 1px 0 0; font-size: .95rem; font-weight: 700;
    color: var(--navy-700); font-variant-numeric: tabular-nums;
}
/* Diger sayfalarda etiket hala dogrudan kartin icinde - bu kural kalmali,
   yoksa dikey flex'te etiket kartin tum genisligine yayilir. */
.t-card .q-tag { align-self: flex-start; }

/* Ana sayfadaki populer testlerde etiket solda, okunma sayaci sagda.
   Ikisini tasiyan satir; icindeki etiket artik yayilmiyor. */
.t-card-foot { display: flex; align-items: center; gap: 8px; }
.t-card-foot .q-tag { margin-right: auto; align-self: auto; }

/* Çipin içindeki sayı: kaç test olduğunu tıklamadan önce söylüyor. */
.chip-count {
    margin-left: 6px; font-size: .72rem; font-weight: 700;
    opacity: .7; font-variant-numeric: tabular-nums;
}

.chip-link.is-active {
    background: var(--navy-700); border-color: var(--navy-700); color: #fff;
}
.chip-link.is-active:hover { color: #fff; }

.test-header .q-tag { margin-bottom: 10px; }
.test-stats {
    display: flex; flex-wrap: wrap; gap: 26px; margin: 18px 0 0;
    padding: 14px 0; border-block: 1px solid var(--line);
}
.test-stats div { margin: 0; }
.test-stats dt { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.test-stats dd {
    margin: 2px 0 0; font-size: 1.2rem; font-weight: 700;
    color: var(--navy-700); font-variant-numeric: tabular-nums;
}
.test-note {
    padding: 12px 16px; margin-bottom: 20px;
    background: var(--teal-050); border: 1px solid #B6DEDF; border-radius: var(--radius);
    font-size: .88rem; color: #0B5F62;
}

.test-questions { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.test-question {
    padding: clamp(16px, 3vw, 24px);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.test-question-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.test-question-no {
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 30px; height: 30px;
    background: var(--navy-700); color: #fff;
    border-radius: 50%; font-weight: 700; font-size: .84rem;
    font-variant-numeric: tabular-nums;
}
.test-question-title {
    font-weight: 600; font-size: .98rem; color: var(--ink); text-decoration: none; line-height: 1.4;
}
.test-question-title:hover { color: var(--teal-700); }
.options-compact { margin-top: 14px; }
.option-btn.as-static { cursor: default; }
.option-btn.as-static:hover { border-color: var(--line); background: var(--ground); }
.test-back { margin-top: 26px; }

/* ---------------------------------------------------------- konu anlatımları */

.l-card {
    display: flex; flex-direction: column; gap: 8px;
    padding: 18px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    border-left: 3px solid var(--navy-600);
    transition: border-color .15s ease;
}
.l-card:hover { border-color: var(--line-2); border-left-color: var(--teal-600); }
.l-card-link { text-decoration: none; }
.l-card-title { margin: 0; font-size: 1rem; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.l-card-link:hover .l-card-title { color: var(--teal-700); }
.l-card-excerpt { margin: 0; font-size: .86rem; color: var(--ink-3); line-height: 1.55; }
.l-card-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: auto; }

.lesson {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: clamp(18px, 4vw, 40px);
    box-shadow: var(--shadow);
    max-width: 78ch;
}
.lesson-head { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.lesson-head .q-card-meta { margin-bottom: 12px; }
.lesson-head h1 { margin: 0 0 .4em; }
.lesson-head .lead { margin: 0; }

/* Uzun metin okunabilirligi: baslik araliklari ve satir uzunlugu */
/* Serbest sayfalar (KVKK, gizlilik...) konu anlatimiyla ayni tipografiyi
   kullaniyor; metin genisligi okunabilirlik icin siniri. */
.page-article { max-width: 72ch; margin: 0 auto 48px; }
.page-article h1 { margin-bottom: 20px; }

.lesson-body { font-size: 1.05rem; line-height: 1.8; color: var(--ink); overflow-x: auto; }
.lesson-body h3 { margin: 1.8em 0 .6em; font-size: 1.2rem; color: var(--navy-700); }
.lesson-body h4 { margin: 1.5em 0 .5em; font-size: 1.05rem; color: var(--navy-700); }
.lesson-body h3:first-child, .lesson-body h4:first-child { margin-top: 0; }
.lesson-body ul, .lesson-body ol { padding-left: 22px; margin-bottom: 1.2em; }
.lesson-body li { margin-bottom: .4em; }
.lesson-body blockquote {
    margin: 1.4em 0; padding: 12px 18px;
    background: var(--ground); border-left: 3px solid var(--teal-600);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--ink-2);
}
.lesson-body blockquote p:last-child { margin-bottom: 0; }
/* Bilgi ve uyari kutulari (konu anlatimlari). Eskiden bicimsizdi: "note" ve
   "warning" duz paragraf gibi gorunuyordu. span da olabilir, div de. */
.lesson-body :is(.note, .warning) {
    display: block; margin: 1.3em 0; padding: 12px 16px;
    border-radius: var(--radius-sm); border-left: 3px solid;
}
.lesson-body .note    { background: #E8F6F6; border-color: var(--teal-600); }
.lesson-body .warning { background: var(--warn-bg); border-color: var(--warn); }
.lesson-body :is(.note, .warning) > :last-child { margin-bottom: 0; }
.lesson-body :is(.note, .warning) ul { margin-bottom: .4em; }
/* Tablolar: konu anlatimi, soru metni, cozum ve gunun sorusu.
   Soru metnindeki tablo (grafik/tablo yorumlama sorulari) eskiden yalnizca
   konu anlatiminda bicimleniyordu; soruda cizgisiz, dagınık metin gibi
   gorunuyordu. Dar ekranda yatay kaydirilir, sayfa tasmaz. */
:is(.lesson-body, .question-body, .solution-body, .daily-body) table {
    border-collapse: collapse; margin: .8em 0 1.1em; font-size: .92rem;
    display: block; max-width: 100%; overflow-x: auto; width: max-content;
}
:is(.lesson-body, .question-body, .solution-body, .daily-body) :is(th, td) {
    padding: 8px 14px; border: 1px solid var(--line-2); text-align: center;
    white-space: nowrap;
}
:is(.lesson-body, .question-body, .solution-body, .daily-body) :is(th, td):first-child { text-align: left; }
:is(.lesson-body, .question-body, .solution-body, .daily-body) th { background: var(--ground); font-weight: 700; }
:is(.lesson-body, .question-body, .solution-body, .daily-body) tbody tr:nth-child(even) td { background: #FAFBFD; }
.lesson-body code {
    font-family: var(--font-mono); font-size: .88em;
    background: var(--ground); padding: 1px 5px; border-radius: 3px;
}
.lesson-body img { border-radius: var(--radius-sm); border: 1px solid var(--line); }
.lesson-body p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- talep formları */

.lead-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: start;
}
.lead-info { min-width: 0; }
.info-block { margin-bottom: 30px; }
.info-block h2 { font-size: 1.15rem; margin-bottom: .6em; }
.info-block p:last-child { margin-bottom: 0; }

.tick-list, .step-list { margin: 0; padding-left: 0; list-style: none; }
.tick-list li, .step-list li {
    position: relative; padding-left: 28px; margin-bottom: 10px; color: var(--ink-2);
}
.tick-list li::before {
    content: "✓"; position: absolute; left: 0; top: 0;
    color: var(--teal-600); font-weight: 700;
}
.step-list { counter-reset: step; }
.step-list li { counter-increment: step; }
.step-list li::before {
    content: counter(step);
    position: absolute; left: 0; top: 2px;
    display: grid; place-items: center;
    width: 20px; height: 20px;
    background: var(--navy-700); color: #fff;
    border-radius: 50%; font-size: .72rem; font-weight: 700;
}

.faq { border-bottom: 1px solid var(--line); }
.faq > summary {
    padding: 12px 0; cursor: pointer; font-weight: 600; font-size: .95rem;
    color: var(--ink); list-style: none;
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::before { content: "+"; margin-right: 10px; color: var(--teal-600); font-weight: 700; }
.faq[open] > summary::before { content: "−"; }
.faq p { margin: 0 0 14px; color: var(--ink-2); font-size: .92rem; }

.lead-form { position: sticky; top: 82px; }
.panel-form {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 22px; box-shadow: var(--shadow);
}
.panel-form h2 { font-size: 1.1rem; margin-bottom: 16px; }
.panel-form .field { margin-bottom: 14px; }
.panel-form label { display: block; margin-bottom: 5px; font-size: .84rem; font-weight: 600; color: var(--ink-2); }
.panel-form input[type="text"], .panel-form input[type="tel"], .panel-form input[type="email"],
.panel-form select, .panel-form textarea, .panel-form input[type="file"] {
    width: 100%; padding: 10px 12px; font: inherit; font-size: .92rem;
    color: var(--ink); background: #fff;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.panel-form input:focus, .panel-form select:focus, .panel-form textarea:focus { border-color: var(--teal-600); }
.panel-form input[type="text"], .panel-form input[type="tel"], .panel-form input[type="email"] { min-height: 44px; }
.panel-form textarea { resize: vertical; line-height: 1.5; }
.panel-form fieldset { border: 0; padding: 0; margin: 0 0 14px; }
.panel-form legend { padding: 0; margin-bottom: 5px; font-size: .84rem; font-weight: 600; color: var(--ink-2); }
.panel-form input[type="file"] { margin-bottom: 6px; font-size: .84rem; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.consent {
    display: flex; gap: 10px; align-items: flex-start;
    margin: 16px 0; font-size: .82rem; line-height: 1.5; color: var(--ink-2);
    font-weight: 400;
}
.consent input { margin-top: 3px; accent-color: var(--teal-600); flex: 0 0 auto; }
.form-hint { margin: 8px 0 0; font-size: .78rem; color: var(--ink-3); }

/* Bal kupu: ekranda yok ama display:none degil - bazi botlar onu atliyor */
.honeypot {
    position: absolute; left: -9999px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
}

.form-note { padding: 14px 16px; border-radius: var(--radius); margin-bottom: 16px; }
.form-note strong { display: block; margin-bottom: 4px; }
.form-note p, .form-note ul { margin: 0; font-size: .9rem; }
.form-note ul { padding-left: 18px; }
.form-note-ok { background: var(--ok-bg); border: 1px solid #C6E5D0; color: #14532D; }
.form-note-error { background: var(--danger-bg); border: 1px solid #F0C9C6; color: var(--danger); }

.cta-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.cta-card {
    padding: 24px; background: var(--ground);
    border: 1px solid var(--line); border-radius: var(--radius);
}
.cta-card h2 { font-size: 1.15rem; margin-bottom: .4em; }
.cta-card p { color: var(--ink-2); font-size: .92rem; }

@media (max-width: 900px) {
    .lead-layout { grid-template-columns: 1fr; }
    .lead-form { position: static; }
}

/* ---------------------------------------------------------- test çözme */

.solve-cta {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
    margin-bottom: 18px;
}
.solve-cta .muted { font-size: .86rem; }

.solve-head {
    display: flex; flex-wrap: wrap; gap: 16px;
    align-items: flex-start; justify-content: space-between; margin-bottom: 18px;
}
.solve-head h1 { margin-bottom: .2em; }
.solve-head p { margin: 0; }

.timer {
    display: flex; flex-direction: column; align-items: flex-end;
    padding: 10px 16px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.timer-label { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.timer-value {
    font-size: 1.5rem; font-variant-numeric: tabular-nums;
    color: var(--navy-700); line-height: 1.2;
}
.timer.is-low { border-color: #EBD7B4; background: var(--warn-bg); }
.timer.is-low .timer-value { color: var(--warn); }
.timer.is-out { border-color: #F0C9C6; background: var(--danger-bg); }
.timer.is-out .timer-value { color: var(--danger); }
.timer-note { display: block; margin-top: 2px; font-size: .68rem; color: var(--danger); }


/* Otomatik kayit durumu. Sessiz kalmasi gereken bir bilgi: ogrencinin
   dikkatini sorudan almamali, ama sorun varsa gorunmeli. */
.solve-status { margin: 0 0 12px; font-size: .78rem; color: var(--ink-3); min-height: 1.1em; }
.solve-status.is-saved  { color: var(--teal-600); }
.solve-status.is-failed { color: var(--warn); }

.solve-progress {
    margin: 0 0 14px; font-size: .86rem; color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.solve-options { border: 0; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.solve-option {
    display: flex; align-items: flex-start; gap: 12px;
    min-height: 48px; padding: 10px 14px;
    background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius-sm);
    cursor: pointer;
}
.solve-option:hover { border-color: var(--line-2); background: #fff; }
.solve-option input { margin-top: 4px; accent-color: var(--navy-600); flex: 0 0 auto; }
.solve-option:has(input:checked) { border-color: var(--navy-600); background: #EDF3FB; }
.solve-option.is-clear { background: transparent; border-style: dashed; min-height: 40px; }
.solve-option.is-clear .option-text { font-size: .84rem; color: var(--ink-3); }

.solve-submit {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 26px;
}

/* ---------------------------------------------------------- sonuç */

.score-card {
    display: flex; flex-wrap: wrap; gap: 28px; align-items: center;
    padding: clamp(20px, 4vw, 32px); margin-bottom: 10px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.score-main { display: flex; flex-direction: column; }
.score-value {
    font-size: clamp(2.6rem, 8vw, 3.6rem); font-weight: 700; line-height: 1;
    color: var(--navy-700); font-variant-numeric: tabular-nums;
}
.score-value small { font-size: .45em; margin-left: 2px; }
.score-label { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

.score-breakdown { display: flex; flex-wrap: wrap; gap: 26px; margin: 0; }
.score-breakdown div { margin: 0; }
.score-breakdown dt { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.score-breakdown dd {
    margin: 2px 0 0; font-size: 1.5rem; font-weight: 700;
    font-variant-numeric: tabular-nums; color: var(--ink);
}
.score-breakdown .is-correct dd { color: var(--ok); }
.score-breakdown .is-wrong dd { color: var(--danger); }

.review-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.review-item {
    padding: 16px 18px;
    background: var(--surface); border: 1px solid var(--line);
    border-left: 3px solid var(--line-2); border-radius: 0 var(--radius) var(--radius) 0;
}
.review-item.is-correct { border-left-color: var(--ok); }
.review-item.is-wrong { border-left-color: var(--danger); }
.review-item.is-empty { border-left-color: var(--warn); }

.review-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.review-no {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--ground); color: var(--ink-2);
    font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.review-title { font-weight: 600; font-size: .95rem; color: var(--ink); text-decoration: none; }
.review-title:hover { color: var(--teal-700); }
.review-state {
    margin-left: auto; font-size: .72rem; padding: 1px 9px;
    border-radius: 10px; border: 1px solid var(--line); color: var(--ink-3);
}
.is-correct .review-state { color: var(--ok); background: var(--ok-bg); border-color: #C6E5D0; }
.is-wrong .review-state { color: var(--danger); background: var(--danger-bg); border-color: #F0C9C6; }
.is-empty .review-state { color: var(--warn); background: var(--warn-bg); border-color: #EBD7B4; }

.review-answers { margin: 0; font-size: .86rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.review-item .solution { margin-top: 12px; }

/* ---------------------------------------------------- WhatsApp butonu */
/*
 * Sag altta sabit. Mobilde dikkat edilenler:
 *  - safe-area-inset: iPhone'un alt cubugunun altinda kalmasin
 *  - en az 48px dokunma hedefi
 *  - dar ekranda yalnizca ikon; "WhatsApp" yazisi 480px ustunde aciliyor
 *    (yazi dar ekranda icerigin uzerini kapatirdi)
 */
.wa-float {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    /* Kose dibinde degil, biraz yukarida: sayfa sonundaki baglantilarin
       ve telefonda tarayicinin alt cubugunun ustunde kalsin. */
    bottom: calc(max(16px, env(safe-area-inset-bottom)) + 64px);
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 52px;
    min-height: 52px;
    padding: 0 14px;
    border-radius: 999px;
    background: #25D366;
    color: #06331A;
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
    transition: transform .15s ease, box-shadow .15s ease;
}
.wa-float:hover,
.wa-float:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
    color: #06331A;
}
.wa-float-icon { width: 26px; height: 26px; flex: none; }
.wa-float-text { display: none; }

@media (min-width: 480px) {
    .wa-float-text { display: inline; }
}

/* Dar ekranda yalnizca yuvarlak ikon kalsin. */
@media (max-width: 479px) {
    .wa-float { padding: 0; justify-content: center; }
}

@media print {
    .wa-float { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .wa-float { transition: none; }
    .wa-float:hover, .wa-float:focus-visible { transform: none; }
}

/* --- site haritasi (/site-haritasi) --- */
.sitemap-block {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 18px;
}
.sitemap-block h2 { font-size: 1.15rem; margin: 0 0 10px; }
.sitemap-block h2 a { color: inherit; text-decoration: none; }
.sitemap-block h2 a:hover { color: var(--teal-700); }
.sitemap-pages {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px 16px;
}
.sitemap-quick { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 10px; font-weight: 600; }
.sitemap-tree { list-style: none; margin: 8px 0 0; padding: 0; }
.sitemap-tree > li { padding: 7px 0; border-top: 1px solid var(--line); }
.sitemap-tree > .sm-d1 { padding-left: 20px; }
.sitemap-tree > .sm-d2 { padding-left: 40px; }
.sitemap-tree > .sm-d3 { padding-left: 60px; }
.sitemap-tree > .sm-d4 { padding-left: 80px; }
.sitemap-topic { font-weight: 600; }
.sitemap-count { color: var(--ink-3); font-size: .82rem; margin-left: 6px; }
.sitemap-sub { font-size: .86rem; margin-left: 10px; }
.sitemap-lessons, .sitemap-tests ul {
    list-style: none;
    margin: 4px 0 0;
    padding: 0 0 0 14px;
    font-size: .9rem;
}
.sitemap-lessons li::before { content: "› "; color: var(--ink-3); }
.sitemap-tests { margin-top: 4px; font-size: .9rem; }
.sitemap-tests summary { cursor: pointer; color: var(--ink-2); }
.sitemap-tests li { padding: 2px 0; }
@media (max-width: 640px) {
    .sitemap-block { padding: 14px; }
    .sitemap-tree > .sm-d1 { padding-left: 12px; }
    .sitemap-tree > .sm-d2, .sitemap-tree > .sm-d3, .sitemap-tree > .sm-d4 { padding-left: 24px; }
}