/* ══════════════════════════════════════════════════════════════════════
   grammar-module.css
   YDT Master Pro — stil.css'den ayrıştırıldı
   Bu dosya stil.css @import zinciri ile yüklenir.
   ══════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════
   GRAMMAR MODULE — Tüm stiller
════════════════════════════════════════════════════ */

/* ── Sidebar: Grammar açılır alt menü ── */
.sb-grammar-parent {
    justify-content: flex-start;
}
.sb-grammar-arrow {
    margin-left: auto;
    font-size: 1rem;
    color: var(--ink3);
    transition: transform .2s;
    line-height: 1;
}
.sb-grammar-parent.open .sb-grammar-arrow {
    transform: rotate(90deg);
}
.sb-grammar-sub-menu {
    margin: 0 8px 6px 8px;
    border-radius: 10px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    overflow: hidden;
}
.sb-sub-item {
    display: flex; align-items: center; gap: var(--gap-tight);
    width: 100%; padding: 8px 12px 8px 14px;
    border: none; background: none; cursor: pointer;
    font-size: .78rem; font-weight: 600; color: var(--ink2);
    font-family: inherit; text-align: left;
    border-bottom: 1px solid var(--border);
    transition: background .12s, color .12s;
}
.sb-sub-item:last-child { border-bottom: none; }
.sb-sub-item:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.sb-sub-item.active { background: var(--color-primary-soft); color: var(--color-primary); font-weight: 800; }
.sb-sub-item-highlight { font-weight: 800; }
.sb-sub-dot {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}

/* ── Grammar Full Page ── */
.grammar-full-page {
    width: 100%;
    min-height: 100vh;
    background: var(--bg);
    display: flex !important;
    flex-direction: column;
    padding: 0 !important;
}
.grammar-full-page.hidden { display: none !important; }

/* ── Desktop scroll fix — mouse wheel çalışsın ── */
/* arsiv-full-page ve grammar-full-page desktop'ta
   kendi scroll context'leri yoktu, body overflow:hidden
   olduğu için mouse wheel çalışmıyordu               */
@media (min-width: 700px) {
    .grammar-full-page:not(.hidden),
    .arsiv-full-page:not(.hidden) {
        overflow-y: auto;
        max-height: 100vh;
    }
}

/* ── Grammar Layout: topbar + body ── */
.gr-topbar {
    background: var(--white);
    border-bottom: 1.5px solid var(--border);
    padding: 14px 28px;
    display: flex; align-items: center; gap: 14px;
    flex-wrap: wrap;
    position: sticky; top: 0; z-index: var(--z-sticky);
}
.gr-back-btn {
    font-size: 1.2rem; border: none; background: none;
    color: var(--ink3); cursor: pointer;
    padding: 6px 8px; border-radius: 8px; flex-shrink: 0;
    transition: background .12s;
}
.gr-back-btn:hover { background: var(--bg); }
.gr-topbar-label {
    font-size: .52rem; font-weight: 900; letter-spacing: 2px;
    color: var(--color-primary); text-transform: uppercase; margin-bottom: 2px;
}
.gr-topbar-title {
    font-size: .98rem; font-weight: 900; color: var(--ink);
}

/* ── Grammar body: sidenav + content ── */
.gr-body {
    display: flex; flex: 1; overflow: hidden; min-height: 0;
}
.gr-sidenav {
    width: 196px; flex-shrink: 0;
    background: var(--white);
    border-right: 1.5px solid var(--border);
    overflow-y: auto; padding: 10px 0;
    display: flex; flex-direction: column;
}
.gr-sidenav::-webkit-scrollbar { width: 3px; }
.gr-sidenav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
.gr-sn-sec {
    font-size: .52rem; font-weight: 900; color: var(--ink3);
    text-transform: uppercase; letter-spacing: 1.5px;
    padding: 10px 14px 3px;
}
.gr-sn-btn {
    display: flex; align-items: center; gap: var(--gap-tight);
    padding: 8px 14px; font-size: .8rem; font-weight: 600;
    color: var(--ink2); border: none; background: none;
    cursor: pointer; width: 100%; text-align: left;
    font-family: inherit; border-left: 2.5px solid transparent;
    transition: background .1s, color .1s;
}
.gr-sn-btn:hover { background: var(--bg); color: var(--ink); }
.gr-sn-btn.active {
    background: var(--color-primary-soft); color: var(--color-primary);
    font-weight: 800; border-left-color: var(--color-primary);
}
.gr-sn-dot {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}

/* ── Grammar Content ── */
.gr-content {
    flex: 1; overflow-y: auto; min-width: 0;
}
.gr-content::-webkit-scrollbar { width: 4px; }
.gr-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }

/* ── Hero Banner ── */
.gr-hero {
    padding: 32px 36px 28px;
    position: relative; overflow: hidden;
}
.gr-hero-present { background: linear-gradient(135deg, #1e1b4b 0%, #312e81 60%, #4338ca 100%); }
.gr-hero-past    { background: linear-gradient(135deg, #1a0a0c 0%, #450a0a 60%, #991b1b 100%); }
.gr-hero-future  { background: linear-gradient(135deg, #022c22 0%, #064e3b 60%, #059669 100%); }
.gr-hero-modal   { background: linear-gradient(135deg, #1c1107 0%, #451a03 60%, #b45309 100%); }
.gr-hero-default { background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%); }
.gr-hero-overview{ background: linear-gradient(135deg, #0f172a 0%, #1e293b 40%, #e63946 200%); }
.gr-hero::before {
    content: ''; position: absolute;
    top: -80px; right: -80px;
    width: 260px; height: 260px; border-radius: 50%;
    background: rgba(255,255,255,.06); filter: blur(40px);
    pointer-events: none;
}
.gr-hero-eyebrow {
    font-size: .54rem; font-weight: 900; letter-spacing: 2.5px;
    text-transform: uppercase; color: rgba(255,255,255,.45);
    background: rgba(255,255,255,.08);
    border-radius: 20px; padding: 4px 12px;
    display: inline-block; margin-bottom: 14px;
}
.gr-hero-title {
    font-size: 2rem; font-weight: 900; color: #fff;
    line-height: 1.05; letter-spacing: -.5px; margin-bottom: 10px;
}
.gr-hero-sub {
    font-size: .84rem; color: rgba(255,255,255,.55);
    line-height: 1.65; max-width: 520px;
}

/* ── Formula boxes ── */
.gr-formulas { padding: var(--padding-section) 36px 4px; display: flex; flex-direction: column; gap: var(--gap-tight); }
.gr-formula {
    display: flex; align-items: center; gap: var(--gap-normal);
    padding: 12px 18px; border-radius: 12px;
    background: var(--white); border: 1.5px solid var(--border);
    font-family: 'Courier New', monospace; font-size: .9rem;
}
.gr-f-badge {
    font-size: .54rem; font-weight: 900; letter-spacing: 1px;
    padding: 3px 9px; border-radius: 6px; flex-shrink: 0; font-family: inherit;
}
.gr-f-pos { background: var(--clr-success-bg-lt); color: #166534; }
.gr-f-neg { background: #fff1f2; color: var(--clr-danger); }
.gr-f-q   { background: #eff6ff; color: #1d4ed8; }
.gr-f-pos-text { color: #166534; font-weight: 800; }
.gr-f-neg-text { color: var(--clr-danger); font-weight: 800; }
.gr-f-q-text   { color: #1d4ed8; font-weight: 800; }

/* ── Section header ── */
.gr-sec-hd {
    display: flex; align-items: center; gap: 10px;
    padding: var(--padding-section) 36px 12px;
    font-size: .6rem; font-weight: 900;
    text-transform: uppercase; letter-spacing: 1.2px; color: var(--ink3);
}
.gr-sec-hd::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ── Accordion usage cards ── */
.gr-acc-wrap { padding: 0 36px; display: flex; flex-direction: column; gap: 9px; margin-bottom: var(--space-2); }
.gr-acc {
    border: 1.5px solid var(--border); border-radius: 14px;
    overflow: hidden; background: var(--white);
    transition: border-color .15s, box-shadow .15s;
}
.gr-acc:hover { border-color: #c8c8d8; }
.gr-acc-head {
    display: flex; align-items: center; gap: var(--gap-normal);
    padding: 12px 18px; cursor: pointer;
    background: var(--bg); user-select: none;
    transition: background .1s;
}
.gr-acc-head:hover { background: #f0f0f7; }
.gr-acc-ico {
    width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
}
.gr-acc-title { flex: 1; font-size: .86rem; font-weight: 800; color: var(--ink); }
.gr-acc-chev { font-size: .9rem; color: var(--ink3); transition: transform .22s; }
.gr-acc.open .gr-acc-chev { transform: rotate(180deg); }
.gr-acc-body { display: none; padding: var(--padding-card) 20px; }
.gr-acc.open .gr-acc-body { display: block; }
.gr-acc-desc { font-size: .82rem; color: var(--ink2); line-height: 1.7; margin-bottom: 13px; }

/* ── Examples ── */
.gr-ex-list { display: flex; flex-direction: column; gap: 7px; }
.gr-ex {
    display: flex; gap: 10px; padding: 10px 14px;
    background: var(--bg); border-radius: 10px;
    font-style: italic; font-size: .83rem;
    color: var(--ink); line-height: 1.55;
}
.gr-ex.ex-present { border-left: 3px solid #4f46e5; }
.gr-ex.ex-past    { border-left: 3px solid var(--clr-danger); }
.gr-ex.ex-future  { border-left: 3px solid #059669; }
.gr-ex.ex-modal   { border-left: 3px solid #d97706; }
.gr-ex-n {
    font-style: normal; font-family: 'Courier New', monospace;
    font-size: .62rem; font-weight: 800; color: var(--ink3);
    flex-shrink: 0; margin-top: 2px;
}

/* ── Info boxes ── */
.gr-info {
    margin: 4px 36px 4px; padding: 14px 18px;
    border-radius: 12px; font-size: .82rem; line-height: 1.75;
    border-left: 4px solid;
}
.gr-info-yellow { background: #fefce8; border-color: #ca8a04; color: #713f12; }
.gr-info-green  { background: var(--clr-success-bg-lt); border-color: var(--clr-success-dk); color: #14532d; }
.gr-info-blue   { background: #eff6ff; border-color: #2563eb; color: #1e3a8a; }
.gr-info-red    { background: #fff1f2; border-color: var(--clr-danger); color: #9f1239; }
.gr-info-purple { background: #f5f3ff; border-color: var(--clr-brand-dark); color: #4c1d95; }
.gr-info-title  { font-weight: 900; margin-bottom: 5px; font-size: .82rem; }

/* ── Table ── */
.gr-tbl-wrap { padding: 4px 36px 20px; }
.gr-tbl {
    width: 100%; border-collapse: collapse;
    font-size: .82rem; border-radius: 12px; overflow: hidden;
    border: 1.5px solid var(--border);
}
.gr-tbl th {
    background: var(--bg); padding: 9px 14px;
    text-align: left; font-size: .6rem; font-weight: 900;
    letter-spacing: .5px; color: var(--ink3); text-transform: uppercase;
    border-bottom: 1.5px solid var(--border);
}
.gr-tbl td {
    padding: 9px 14px; border-bottom: 1px solid #f3f4f6;
    vertical-align: top;
}
.gr-tbl tr:last-child td { border-bottom: none; }
.gr-tbl tr:hover td { background: var(--bg); }
.gr-tbl td:first-child {
    font-family: 'Courier New', monospace; font-size: .78rem;
    color: #4f46e5; font-weight: 700;
}

/* Compare table */
.gr-cmp-tbl th:first-child  { background: var(--clr-brand-light); color: #4f46e5; }
.gr-cmp-tbl th:last-child   { background: #fff1f2; color: var(--clr-danger); }
.gr-cmp-tbl td:first-child  { color: var(--ink2); font-family: inherit; font-size: .82rem; font-weight: 400; }

/* ── Overview Catalogue ── */
.gr-catalogue {
    padding: var(--padding-section) 36px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--gap-normal);
}
.gr-cat-card {
    border: 1.5px solid var(--border); border-radius: 14px;
    padding: var(--padding-card); background: var(--white);
    cursor: pointer; transition: all .18s; text-align: left;
    border-left: 4px solid transparent;
}
.gr-cat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.09);
    border-color: #c8c8d8;
}
.gr-cat-card.cat-present {
    background: linear-gradient(135deg,#f5f3ff 0%,#ede9fe 100%);
    border-color: #ddd6fe; border-left-color: var(--clr-brand-dark);
}
.gr-cat-card.cat-present:hover { border-color: #c4b5fd; border-left-color: var(--clr-brand-dark); }
.gr-cat-card.cat-past {
    background: linear-gradient(135deg,#fff1f2 0%,#ffe4e6 100%);
    border-color: #fecdd3; border-left-color: #e11d48;
}
.gr-cat-card.cat-past:hover { border-color: #fca5a5; border-left-color: #e11d48; }
.gr-cat-card.cat-future {
    background: linear-gradient(135deg,#f0fdf4 0%,#dcfce7 100%);
    border-color: #bbf7d0; border-left-color: #059669;
}
.gr-cat-card.cat-future:hover { border-color: #86efac; border-left-color: #059669; }
.gr-cat-card.cat-modal {
    background: linear-gradient(135deg,#fefce8 0%,#fef9c3 100%);
    border-color: #fde68a; border-left-color: #d97706;
}
.gr-cat-card.cat-modal:hover { border-color: #fcd34d; border-left-color: #d97706; }
.gr-cat-tag {
    font-size: .52rem; font-weight: 900; letter-spacing: 1.5px;
    text-transform: uppercase; margin-bottom: var(--space-2);
    padding: 3px 10px; border-radius: 20px; display: inline-block;
}
.gr-tag-present { background: var(--clr-brand-light); color: #5b21b6; }
.gr-tag-past    { background: #fff1f2; color: #9f1239; }
.gr-tag-future  { background: #ecfdf5; color: #065f46; }
.gr-tag-modal   { background: #fef9c3; color: #713f12; }
.gr-cat-name { font-size: .96rem; font-weight: 900; color: var(--ink); margin-bottom: 4px; }
.gr-cat-formula { font-family: 'Courier New', monospace; font-size: .72rem; color: var(--ink3); margin-bottom: var(--space-2); }
.gr-cat-desc { font-size: .73rem; color: var(--ink2); line-height: 1.55; }

/* ── Exercises / Quiz ── */
.gr-quiz-wrap { padding: var(--padding-section) 36px; max-width: 720px; }
.gr-q-sec-hd {
    font-size: .6rem; font-weight: 900; text-transform: uppercase;
    letter-spacing: 1.5px; color: var(--ink3);
    padding-bottom: 10px; border-bottom: 1.5px solid var(--border);
    margin-bottom: 14px;
}
.gr-q-card {
    background: var(--white); border: 1.5px solid var(--border);
    border-radius: 13px; padding: 18px 20px; margin-bottom: 11px;
    transition: border-color .18s;
}
.gr-q-card.gr-c { border-color: var(--green); }
.gr-q-card.gr-w { border-color: var(--color-primary); }
.gr-q-num {
    font-family: 'Courier New', monospace; font-size: .6rem;
    color: var(--ink3); letter-spacing: 2px; margin-bottom: 6px;
}
.gr-q-text { font-size: .88rem; line-height: 1.65; margin-bottom: var(--space-3); color: var(--ink); }
.gr-q-inp {
    background: var(--bg); border: 1.5px solid var(--border);
    border-radius: 9px; padding: 9px 13px;
    font-family: 'Courier New', monospace; font-size: .88rem;
    color: var(--ink); outline: none; width: 280px; max-width: 100%;
    font-weight: 700; transition: border-color .15s;
}
.gr-q-inp:focus { border-color: var(--color-primary); }
.gr-q-inp.ok  { border-color: var(--green); background: var(--green-s); color: #166534; }
.gr-q-inp.bad { border-color: var(--color-primary); background: var(--color-primary-soft); }
.gr-mcq { display: flex; flex-direction: column; gap: 7px; }
.gr-opt {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 14px; background: var(--bg);
    border: 1.5px solid var(--border); border-radius: 10px;
    cursor: pointer; font-size: .85rem; transition: all .14s;
    user-select: none;
}
.gr-opt:hover { border-color: #c8c8d8; }
.gr-opt.sel   { border-color: #4f46e5; background: var(--clr-brand-light); }
.gr-opt.ok    { border-color: var(--green); background: var(--green-s); color: #166534; }
.gr-opt.bad   { border-color: var(--color-primary); background: var(--color-primary-soft); color: #9f1239; }
.gr-opt-letter {
    width: 24px; height: 24px; border-radius: 50%;
    border: 1.5px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: .68rem; font-weight: 900; flex-shrink: 0;
    font-family: 'Courier New', monospace; transition: all .14s;
}
.gr-opt.sel .gr-opt-letter { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.gr-opt.ok  .gr-opt-letter { background: var(--green); border-color: var(--green); color: #fff; }
.gr-opt.bad .gr-opt-letter { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.gr-chk-btn {
    margin-top: 10px; padding: 8px 16px; background: none;
    border: 1.5px solid var(--color-primary); border-radius: 9px; color: var(--color-primary);
    font-size: .76rem; font-weight: 800; cursor: pointer;
    font-family: inherit; transition: all .15s;
}
.gr-chk-btn:hover { background: var(--color-primary); color: #fff; }
.gr-fb {
    margin-top: 9px; font-size: .75rem; padding: 7px 11px;
    border-radius: 8px; display: none;
    font-family: 'Courier New', monospace; font-weight: 700;
    line-height: 1.5;
}
.gr-fb.show { display: block; }
.gr-fb.ok  { background: var(--green-s); color: #166534; }
.gr-fb.bad { background: var(--color-primary-soft); color: #9f1239; }
/* ── Set Tabs ── */
.gr-set-tabs {
    display: flex; flex-wrap: wrap; gap: var(--gap-tight);
    margin-bottom: 18px;
}
.gr-set-tab {
    padding: 8px 20px; border-radius: 50px;
    border: 1.5px solid var(--border); background: var(--white);
    font-size: .78rem; font-weight: 800; color: var(--ink2);
    cursor: pointer; font-family: inherit; transition: all .15s;
}
.gr-set-tab:hover { border-color: var(--color-primary); color: var(--color-primary); }

.gr-score-bar {
    background: var(--white); border: 1.5px solid var(--border);
    border-radius: 12px; padding: 12px 18px;
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px;
}
.gr-score-label { font-size: .65rem; font-weight: 900; color: var(--ink3); text-transform: uppercase; letter-spacing: 1px; }
.gr-score-val { font-size: 1.1rem; font-weight: 900; color: var(--ink); font-family: 'Courier New', monospace; }
.gr-submit-btn {
    display: block; width: 100%; padding: 14px;
    background: linear-gradient(135deg, var(--color-primary), #f97316);
    border: none; border-radius: 13px; color: #fff;
    font-size: .92rem; font-weight: 900; cursor: pointer;
    margin-top: 18px; font-family: inherit; letter-spacing: .2px;
    transition: opacity .18s, transform .18s;
}
.gr-submit-btn:hover { opacity: .9; transform: translateY(-1px); }
.gr-result {
    display: none; background: var(--white); border-radius: 18px;
    padding: 36px; text-align: center; margin-top: 24px;
    border: 1.5px solid var(--border);
}
.gr-result.show { display: block; }
.gr-res-score { font-size: 3.2rem; font-weight: 900; color: var(--color-primary); line-height: 1; margin-bottom: 6px; }
.gr-res-lbl { font-size: .6rem; font-weight: 800; color: var(--ink3); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 18px; }
.gr-res-msg { font-size: .88rem; color: var(--ink2); margin-bottom: 20px; line-height: 1.6; }
.gr-retry-btn {
    padding: 10px 24px; background: none; border: 1.5px solid var(--color-primary);
    border-radius: 10px; color: var(--color-primary); font-size: .82rem; font-weight: 800;
    cursor: pointer; font-family: inherit; transition: all .15s;
}
.gr-retry-btn:hover { background: var(--color-primary); color: #fff; }

/* ── Tips Cards ── */
.gr-tips-wrap { padding: 0 36px 36px; display: flex; flex-direction: column; gap: 10px; }
.gr-tip-card {
    background: var(--white); border: 1.5px solid var(--border);
    border-radius: 14px; overflow: hidden;
}
.gr-tip-head {
    display: flex; align-items: center; gap: var(--gap-normal);
    padding: 13px 18px; background: var(--bg); cursor: pointer;
    user-select: none; transition: background .1s;
}
.gr-tip-head:hover { background: #f0f0f7; }
.gr-tip-num {
    font-size: .6rem; font-weight: 900; color: var(--color-primary);
    background: var(--color-primary-soft); border-radius: 7px;
    padding: 3px 9px; flex-shrink: 0; letter-spacing: .5px;
    font-family: 'Courier New', monospace;
}
.gr-tip-title { flex: 1; font-size: .87rem; font-weight: 800; color: var(--ink); }
.gr-tip-chev { font-size: .9rem; color: var(--ink3); transition: transform .22s; }
.gr-tip-card.open .gr-tip-chev { transform: rotate(180deg); }
.gr-tip-body { display: none; padding: var(--padding-card) 20px; }
.gr-tip-card.open .gr-tip-body { display: block; }
.gr-tip-text { font-size: .83rem; color: var(--ink2); line-height: 1.8; }
.gr-rule-item {
    display: flex; gap: 10px; padding: 10px 14px;
    background: var(--bg); border-radius: 10px;
    margin-top: var(--space-2); font-size: .82rem; color: var(--ink2); line-height: 1.6;
}
.gr-rule-ico { flex-shrink: 0; font-size: .95rem; margin-top: 1px; }

/* ── Responsive ── */
@media(max-width:699px) {
    .gr-sidenav { display: none !important; }
    .gr-topbar { padding: 12px 16px; }
    .gr-hero { padding: 22px 18px 18px; }
    .gr-hero-title { font-size: 1.5rem; }
    .gr-formulas, .gr-acc-wrap, .gr-sec-hd, .gr-tbl-wrap,
    .gr-info, .gr-catalogue, .gr-quiz-wrap, .gr-tips-wrap { padding-left: 16px; padding-right: 16px; }
    .gr-catalogue { grid-template-columns: 1fr 1fr; gap: var(--gap-tight); }
    .gr-cat-name { font-size: .86rem; }
}

/* ─── Serkan Hoca Logo ─── */
.serkan-logo{display:flex;align-items:center;gap:10px;}
.serkan-logo-icon{flex-shrink:0;filter:drop-shadow(0 2px 4px rgba(230,57,70,.35));}
.serkan-logo-text{display:flex;flex-direction:column;gap:1px;}
.serkan-logo-name{font-size:.98rem;font-weight:900;color:var(--ink);line-height:1.1;letter-spacing:-.2px;}
.serkan-logo-name em{color:var(--color-primary);font-style:normal;}
.serkan-logo-sub{font-size:.55rem;font-weight:400;letter-spacing:1.4px;color:var(--ink3);text-transform:uppercase;}
.serkan-logo-sub strong{font-weight:900;color:var(--ink2);}

/* ─── Mobile Serkan Logo ─── */
.mob-serkan-logo{display:flex;align-items:center;gap:7px;font-size:.82rem;font-weight:900;color:var(--ink);white-space:nowrap;}
.mob-serkan-logo em{color:var(--color-primary);font-style:normal;}
.mob-serkan-logo svg{filter:drop-shadow(0 1px 4px rgba(230,57,70,.35));flex-shrink:0;}


/* ── Mobil Alt Boşluk Fix — Speaking & AI Reading v2 ────────
   SORUN: arsiv-full-page fixed+bottom:60px, içinde gr-body
   overflow:hidden, gr-content overflow-y:auto. gr-content
   kendi yüksekliğini hesaplarken arsiv-full-page sınırını
   görmüyor — içerik bottom nav'ın arkasında kalıyor.

   ÇÖZÜM: gr-body'yi arsiv-full-page'in tam yüksekliğine
   kilitlemek yerine arsiv-full-page'in overflow-y:auto'sunu
   kullan, gr-body ve gr-content'in overflow'unu kaldır.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 699px) {

    /* arsiv-full-page zaten overflow-y:auto ve bottom:60px
       gr-body overflow:hidden yerine visible yap —
       scroll arsiv-full-page'e devrediliyor */
    .arsiv-full-page .gr-body,
    .grammar-full-page .gr-body {
        overflow: visible !important;
        flex: none !important;
        min-height: 0 !important;
    }

    /* gr-content da overflow:auto kaldır — parent scroll eder */
    .arsiv-full-page .gr-content,
    .grammar-full-page .gr-content {
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
        /* Alt eleman bottom nav'a değmesin */
        padding-bottom: var(--bnav-safe, 80px) !important;
    }

    /* AI Reading (rh-page) — paragraf liste */
    .rh-page,
    .rh2-grid,
    .rh-list {
        padding-bottom: var(--bnav-safe, 80px) !important;
    }
}