/* Tüm sayfaların ortak tabanı. Ana sayfaya özgü bölümler index.html içinde. */

@font-face {
    font-family: "Source Serif 4";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url(/fonts/source-serif-4-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Source Serif 4";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url(/fonts/source-serif-4-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Uygulamadaki "Porselen & Mürekkep" paleti (VZColor.swift) */
:root {
    --canvas: #F6F7F9;
    --surface: #FFFFFF;
    --hairline: #E5E7EB;
    --ink: #1B2632;
    --ink-2: #5C6673;
    --ink-3: #767E88;
    --brand: #1A9191;
    --brand-tint: rgba(26, 145, 145, 0.12);
    --brand-surface: #EDFAFA;
    --gold: #E9B949;
    --gold-deep: #B8862B;
    --hero-a: #0D4A55;
    --hero-b: #062A33;
    --serif: "Source Serif 4", ui-serif, "New York", Georgia, serif;
    --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --wrap: 1120px;
}
@media (prefers-color-scheme: dark) {
    :root {
        --canvas: #121820;
        --surface: #1B2632;
        --hairline: #2C3B4D;
        --ink: #EEE9DF;
        --ink-2: #A9B3BF;
        --ink-3: #7C8794;
        --brand: #57C9BE;
        --brand-tint: rgba(87, 201, 190, 0.12);
        --brand-surface: #1C3238;
    }
}

html { scroll-behavior: smooth; }
body {
    font-family: var(--sans);
    background: var(--canvas);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ---------- Alt sayfa üst barı ---------- */
header.bar {
    background: linear-gradient(170deg, var(--hero-a), var(--hero-b));
}
header.bar .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand-mark { display: flex; align-items: center; gap: 10px; color: #fff; }
.brand-mark:hover { text-decoration: none; }
.brand-mark img { width: 32px; height: 32px; border-radius: 8px; }
.brand-mark span { font-family: var(--serif); font-size: 21px; font-weight: 600; letter-spacing: 0.2px; }
header.bar nav { display: flex; gap: 24px; }
header.bar nav a { color: rgba(255,255,255,0.78); font-size: 15px; }
header.bar nav a:hover, header.bar nav a[aria-current] { color: #fff; text-decoration: none; }

/* ---------- Metin sayfası (gizlilik, koşullar, SSS...) ---------- */
.doc { max-width: 760px; margin: 0 auto; padding: 56px 24px 88px; }
.doc h1 {
    font-family: var(--serif); font-weight: 600;
    font-size: clamp(32px, 5vw, 44px); line-height: 1.12; letter-spacing: -0.4px;
}
.doc .meta { margin-top: 12px; font-size: 14px; color: var(--ink-3); }
.doc .lede { margin-top: 24px; font-size: 17.5px; color: var(--ink-2); }
.doc h2 {
    font-family: var(--serif); font-weight: 600;
    font-size: 23px; line-height: 1.25;
    margin-top: 44px; padding-top: 28px; border-top: 0.5px solid var(--hairline);
}
.doc h3 { font-size: 16.5px; font-weight: 600; margin-top: 22px; }
.doc p, .doc ul, .doc ol { margin-top: 12px; font-size: 16px; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin-top: 6px; }
.doc li::marker { color: var(--ink-3); }
.doc strong { font-weight: 600; }
.doc .note {
    margin-top: 16px; padding: 14px 16px; border-radius: 12px;
    background: var(--brand-tint); font-size: 15.5px;
}
.toc { margin-top: 28px; padding: 18px 20px; border-radius: 14px; background: var(--surface); border: 0.5px solid var(--hairline); }
.toc strong { display: block; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-3); }
.toc ol { margin-top: 8px; columns: 2; column-gap: 28px; font-size: 14.5px; }
.toc li { margin: 0 0 4px; break-inside: avoid; }

/* ---------- Alt bilgi ---------- */
footer { padding: 48px 0 56px; font-size: 14px; color: var(--ink-3); border-top: 0.5px solid var(--hairline); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
footer nav a { color: var(--ink-2); }

@media (max-width: 720px) {
    header.bar nav { display: none; }
    .toc ol { columns: 1; }
}
@media (max-width: 480px) {
    .wrap { padding: 0 16px; }
    .doc { padding: 40px 16px 72px; }
}

/* ---------- TUS ders sayfaları ---------- */
.crumbs { font-size: 14px; color: var(--ink-3); margin-bottom: 28px; }
.crumbs a { color: var(--ink-2); }
.ders-head { display: flex; align-items: center; gap: 16px; }
.ders-head img { width: 64px; height: 64px; border-radius: 16px; background: var(--brand-surface); padding: 8px; flex: none; }
.kicker { font-size: 13px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--brand); }
.doc .ders-head h1 { margin-top: 2px; }
.stats { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.stats div { flex: 1 1 120px; background: var(--surface); border: 0.5px solid var(--hairline); border-radius: 14px; padding: 14px 16px; }
.stats b { display: block; font-family: var(--serif); font-size: 28px; font-weight: 600; line-height: 1.1; }
.stats span { font-size: 13.5px; color: var(--ink-3); }
.topics { display: grid; gap: 10px; margin-top: 16px; }
.topic { background: var(--surface); border: 0.5px solid var(--hairline); border-radius: 14px; padding: 16px 18px; }
.doc .topic h3 { margin: 0; font-size: 16.5px; display: flex; justify-content: space-between; gap: 12px; }
.topic h3 small { font-weight: 500; font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.doc .topic p { margin-top: 6px; font-size: 14.5px; color: var(--ink-2); }
.q { margin-top: 20px; padding: 18px 20px; background: var(--surface); border: 0.5px solid var(--hairline); border-radius: 16px; }
.doc .q-text { margin: 0; font-weight: 600; }
.q-text span { color: var(--gold-deep); margin-right: 4px; }
.doc .q-opts { list-style: none; padding: 0; margin-top: 10px; font-size: 15.5px; }
.q-opts li { margin-top: 4px; }
.q-opts b { color: var(--ink-3); font-weight: 600; margin-right: 4px; }
.q details { margin-top: 12px; border-top: 0.5px solid var(--hairline); padding-top: 10px; }
.q summary { cursor: pointer; color: var(--brand); font-weight: 600; font-size: 15px; }
.doc .q details p { font-size: 15px; margin-top: 8px; }
.doc .others { columns: 2; column-gap: 28px; }
.others li { break-inside: avoid; }
.cta {
    margin-top: 56px; padding: 32px; border-radius: 20px; text-align: center;
    background: linear-gradient(170deg, var(--hero-a), var(--hero-b)); color: #fff;
}
.doc .cta h2 { margin: 0; padding: 0; border: 0; color: #fff; }
.doc .cta p { color: rgba(255,255,255,0.78); margin-top: 10px; }
.cta .store-btn {
    display: inline-block; margin-top: 18px; background: #fff; color: #062A33;
    padding: 11px 20px; border-radius: 12px; font-weight: 600; font-size: 15px;
}
.doc .source { margin-top: 28px; font-size: 13.5px; color: var(--ink-3); }
@media (max-width: 480px) { .doc .others { columns: 1; } .cta { padding: 24px 18px; } }
.ders-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 16px; }
.ders { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; border-radius: 14px; background: var(--surface); border: 0.5px solid var(--hairline); color: var(--ink); }
.ders:hover { text-decoration: none; border-color: var(--brand); }
.ders img { width: 44px; height: 44px; flex: none; border-radius: 10px; background: var(--brand-surface); padding: 5px; }
.ders b { display: block; font-weight: 600; font-size: 15px; line-height: 1.3; }
.ders small { font-size: 12.5px; color: var(--ink-3); }
@media (prefers-color-scheme: dark) { .ders img, .ders-head img { filter: invert(1) hue-rotate(180deg); } }