/* Nunito (SIL OFL) sitenin kendisinden sunulur: Google Fonts'un render'ı engelleyen isteği olmasın.
   Aynı blok css/style.css ve css/kelime.css'te; Türkçe harflerin çoğu latin-ext'te. */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 500 800;
    font-display: swap;
    src: url(/assets/fonts/nunito-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: 'Nunito';
    font-style: normal;
    font-weight: 500 800;
    font-display: swap;
    src: url(/assets/fonts/nunito-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;
}

/* Kelime sayfaları, kelime listeleri ve düello daveti (tools/build_words.py üretir).
   Renkler uygulamadaki src/constants/theme.ts ile aynı. */
:root {
    --ink: #17233A;
    --ink-2: #50607A;
    --ink-3: #6B7A90;
    --primary: #1F63B8;
    --primary-dark: #174C8F;
    --primary-light: #4F86CF;
    --primary-soft: #E6EFFB;
    --ground: #F4F7FB;
    --card: #FFFFFF;
    --border: #DCE4EF;
    --divider: #EEF2F7;
    --track: #E9EEF5;
    --success: #15803D;
    --success-dark: #0F5F2D;
    --success-soft: #E8F6EE;
    --error: #DC2626;
    --error-dark: #991B1B;
    --error-soft: #FDECEC;
    --radius: 14px;
    --radius-lg: 20px;
    --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    /* Nunito'da IPA karakterleri yok */
    --font-ipa: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font);
    font-weight: 500;
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--ground);
}
a { color: var(--primary); }
button { font-family: var(--font); }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }

/* Üst ve alt bant */
.site-header { position: sticky; top: 0; z-index: 10; background: var(--card); border-bottom: 1px solid var(--border); }
.site-header .wrap { max-width: 1080px; height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 18px; white-space: nowrap; }
.brand img { border-radius: 9px; }
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a { padding: 8px 10px; border-radius: 10px; color: var(--ink-2); font-weight: 700; text-decoration: none; white-space: nowrap; }
.site-nav a:hover { color: var(--ink); background: var(--track); }
.site-nav .get { margin-left: 4px; padding: 9px 16px; border-radius: 12px; background: var(--primary); color: #fff; box-shadow: inset 0 -3px 0 var(--primary-dark); }
.site-nav .get:hover { background: var(--primary-dark); color: #fff; }
.get-short { display: none; }
@media (max-width: 420px) {
    .brand { font-size: 16px; gap: 8px; }
    .site-nav a { padding: 8px 8px; }
    .get-long { display: none; }
    .get-short { display: inline; }
}
@media (max-width: 350px) {
    .brand span { display: none; }
}

main.wrap { padding-bottom: 56px; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 18px 0 10px; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--primary); text-decoration: underline; }
.crumbs .sep { color: #A9B5C6; }

/* Seviye etiketi: renkler uygulamadaki seviye renklerinin okunaklı (koyu) tonları */
.lv { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 14px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.lv-a1 { background: #E7F7F0; color: #047857; }
.lv-a2 { background: #E3F6FA; color: #0E7490; }
.lv-b1 { background: #E8F0FE; color: #1D4ED8; }
.lv-b2 { background: #E6EDFB; color: #1E40AF; }
.lv-c1 { background: #E4E9F7; color: #1E3A8A; }
.lv-c2 { background: #FFF3E6; color: #B45309; }
.tag { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--track); color: var(--ink-2); font-size: 14px; font-weight: 700; }

/* Kelime kartı */
.entry { margin-top: 4px; padding: 22px 20px 6px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.entry h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; line-height: 1.1; }
.hw { font-size: clamp(36px, 9vw, 52px); font-weight: 800; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.hq { font-size: clamp(18px, 4.6vw, 22px); font-weight: 700; color: var(--ink-3); }
.sense { padding: 16px 0 18px; border-top: 1px solid var(--divider); }
.entry h1 + .sense { border-top: 0; padding-top: 8px; }
.sense-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 40px; }
.sense-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: 14px; font-weight: 800; }
.sense-word { font-size: 20px; font-weight: 800; }
.ipa { font-family: var(--font-ipa); font-size: 18px; color: var(--ink-2); }
.say, .copy {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border: 1.5px solid var(--border); border-bottom-width: 3px; border-radius: 12px;
    background: var(--card); color: var(--primary); font-size: 15px; font-weight: 700; cursor: pointer;
}
.say:hover, .copy:hover { border-color: var(--primary-light); }
.say:active, .copy:active { transform: translateY(1px); border-bottom-width: 2px; }
.say-sm { padding: 6px 8px; }
.meaning-label { margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--ink-3); }
.meaning { font-size: clamp(24px, 6.4vw, 30px); font-weight: 800; line-height: 1.25; color: var(--primary); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.example { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 4px 12px; margin-top: 16px; padding: 14px 16px; border-radius: var(--radius); background: var(--ground); }
.example figcaption { grid-column: 1 / -1; font-size: 14px; font-weight: 700; color: var(--ink-3); }
.example blockquote { font-size: 18px; font-weight: 600; }
mark { padding: 0 2px; border-radius: 4px; background: var(--primary-soft); color: var(--primary-dark); font-weight: 800; }

.block { margin-top: 28px; }
.block h2, .quiz h2 { margin-bottom: 12px; font-size: 20px; font-weight: 800; }
.reverse { list-style: none; display: grid; gap: 6px; }
.reverse span { color: var(--ink-2); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.chips a {
    display: inline-flex; flex-direction: column; padding: 8px 14px;
    border: 1.5px solid var(--border); border-bottom-width: 3px; border-radius: 12px;
    background: var(--card); color: var(--ink); font-weight: 800; line-height: 1.25; text-decoration: none;
}
.chips a small { font-size: 14px; font-weight: 600; color: var(--ink-3); }
.chips a:hover { border-color: var(--primary-light); }
.chips-plain a { font-weight: 700; }
.more-link { margin-top: 12px; font-weight: 700; }

/* Kendini dene: uygulamadaki cevap butonlarıyla aynı his */
.quiz { margin-top: 28px; padding: 20px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.quiz-q { margin-bottom: 14px; font-size: 22px; font-weight: 800; }
.quiz-q span { color: var(--primary); }
.opts { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .opts { grid-template-columns: 1fr 1fr; } }
.opt {
    min-height: 54px; padding: 12px 16px; text-align: left;
    border: 2px solid var(--border); border-bottom-width: 4px; border-radius: 14px;
    background: var(--card); color: var(--ink); font-size: 17px; font-weight: 700; cursor: pointer;
}
.opt:hover:not(:disabled) { border-color: var(--primary-light); }
.opt:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 2px; }
.opt:disabled { cursor: default; }
.opt:disabled:not(.is-right):not(.is-wrong) { opacity: 0.55; }
.opt.is-right { background: var(--success-soft); border-color: var(--success); color: var(--success-dark); }
.opt.is-wrong { background: var(--error-soft); border-color: var(--error); color: var(--error-dark); }
.quiz-result { margin-top: 14px; font-weight: 700; }
.quiz-next { display: inline-block; margin-top: 4px; font-weight: 800; }

/* Uygulama çağrısı */
.cta { margin-top: 28px; padding: 24px 20px; border-radius: var(--radius-lg); background: var(--primary); color: #fff; box-shadow: inset 0 -4px 0 var(--primary-dark); }
.cta h2 { font-size: 22px; font-weight: 800; line-height: 1.25; }
.cta p { margin-top: 8px; color: var(--primary-soft); max-width: 60ch; }
.stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.store { display: inline-flex; align-items: center; gap: 10px; min-width: 172px; padding: 10px 16px; border-radius: 14px; background: var(--ink); color: #fff; text-decoration: none; }
.store span { display: flex; flex-direction: column; font-size: 17px; font-weight: 800; line-height: 1.15; }
.store small { font-size: 12px; font-weight: 600; opacity: 0.85; }
.store:hover { background: #0E1626; }
.store-light { background: #fff; color: var(--ink); }
.store-light:hover { background: var(--primary-soft); }

/* Listeler */
.list-head { padding: 4px 0; }
.list-head h1 { font-size: clamp(28px, 7vw, 40px); font-weight: 800; line-height: 1.15; }
.list-head p { margin-top: 10px; max-width: 62ch; color: var(--ink-2); }
.levels-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.levels-nav .lv { padding: 6px 14px; font-size: 15px; border: 2px solid transparent; }
.levels-nav .is-active { border-color: currentColor; }
.jump, .letters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.jump a, .letters a {
    display: grid; place-items: center; width: 38px; height: 38px;
    border: 1.5px solid var(--border); border-bottom-width: 3px; border-radius: 10px;
    background: var(--card); color: var(--ink); font-weight: 800; text-decoration: none;
}
.jump a:hover, .letters a:hover { border-color: var(--primary-light); }
.letters a.is-active { background: var(--primary); border-color: var(--primary-dark); color: #fff; }
.letter-sec { margin-top: 24px; scroll-margin-top: 72px; }
.letter-sec h2 { margin-bottom: 8px; font-size: 22px; font-weight: 800; color: var(--primary); }
.wl { list-style: none; overflow: hidden; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.wl li + li { border-top: 1px solid var(--divider); }
.wl a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto; align-items: center; gap: 12px; padding: 11px 14px; color: var(--ink); text-decoration: none; }
.wl a:hover { background: var(--ground); }
.wl-en { font-weight: 800; overflow-wrap: anywhere; }
.wl-tr { color: var(--ink-2); }
.page-list > .wl { margin-top: 20px; }

/* Kelime listesi ana sayfası */
.search { margin-top: 20px; }
.search-label { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 800; }
.search-box { display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 2px solid var(--border); border-radius: 14px; background: var(--card); color: var(--ink-3); }
.search-box:focus-within { border-color: var(--primary); }
.search-box input { flex: 1; min-width: 0; padding: 14px 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 600 18px var(--font); }
.results { margin-top: 8px; }
.results:empty { display: none; }
.results .empty { padding: 12px 14px; color: var(--ink-2); }
.level-cards { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.level-card {
    display: grid; grid-template-columns: auto 1fr; grid-template-areas: "code name" "code count" "desc desc"; gap: 2px 14px; height: 100%;
    padding: 16px; border: 1.5px solid var(--border); border-bottom-width: 4px; border-radius: 16px;
    background: var(--card); color: var(--ink); text-decoration: none;
}
.level-card:hover { border-color: var(--primary-light); }
.lc-code { grid-area: code; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; font-size: 20px; font-weight: 800; }
.lc-name { grid-area: name; align-self: end; font-size: 18px; font-weight: 800; }
.lc-count { grid-area: count; font-size: 15px; font-weight: 700; color: var(--ink-3); }
.lc-desc { grid-area: desc; margin-top: 10px; font-size: 15px; color: var(--ink-2); }
.lc-a1 .lc-code { background: #E7F7F0; color: #047857; }
.lc-a2 .lc-code { background: #E3F6FA; color: #0E7490; }
.lc-b1 .lc-code { background: #E8F0FE; color: #1D4ED8; }
.lc-b2 .lc-code { background: #E6EDFB; color: #1E40AF; }
.lc-c1 .lc-code { background: #E4E9F7; color: #1E3A8A; }
.lc-c2 .lc-code { background: #FFF3E6; color: #B45309; }

/* İndirme yönlendirmesi (/indir/) */
.page-get { text-align: center; padding-top: 40px; }
.get-logo { display: block; margin: 0 auto 16px; border-radius: 20px; }
.get-head p { margin-left: auto; margin-right: auto; }
.page-get .stores { justify-content: center; margin-top: 24px; }

/* Düello daveti */
.code-card { margin-top: 20px; padding: 20px; text-align: center; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.code-label { font-weight: 700; color: var(--ink-3); }
.code { margin: 2px 0 12px; font-size: clamp(40px, 12vw, 56px); font-weight: 800; letter-spacing: 0.16em; color: var(--primary); font-variant-numeric: tabular-nums; }
.steps { list-style: none; counter-reset: step; display: grid; gap: 12px; margin-top: 24px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 36px 1fr; align-items: start; gap: 12px; padding: 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-weight: 800; }
.steps p { padding-top: 5px; }
.page-duel .stores { margin-top: 20px; }
.open-app {
    display: flex; align-items: center; justify-content: center; min-height: 52px; margin-top: 16px;
    border-radius: 14px; background: var(--primary); color: #fff; font-size: 17px; font-weight: 800; text-decoration: none;
    box-shadow: inset 0 -4px 0 var(--primary-dark);
}
.open-app:hover { background: var(--primary-dark); }
.open-app-note { margin-top: 8px; font-size: 14px; color: var(--ink-3); }

/* Rehber sayfaları (tools/landing/) */
.prose h2 { margin: 26px 0 10px; font-size: 20px; font-weight: 800; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-top: 10px; line-height: 1.65; }
.prose ul, .prose ol { display: grid; gap: 10px; margin-top: 10px; padding-left: 22px; line-height: 1.6; }
.prose li::marker { color: var(--primary); font-weight: 800; }
.block-lead { margin-bottom: 14px; max-width: 62ch; color: var(--ink-2); }
.guide-list { list-style: none; display: grid; gap: 8px; }
.guide-list a { font-weight: 700; }
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); justify-content: center; gap: 16px; margin-top: 28px; }
.shots img { display: block; width: 100%; height: auto; border-radius: 22px; border: 1px solid var(--border); }
.shots figcaption { grid-column: 1 / -1; text-align: center; font-size: 14px; font-weight: 600; color: var(--ink-3); }

/* 404 */
.page-404 { padding-top: 32px; }
.err-code { font-size: 15px; font-weight: 800; color: var(--primary); }

@media (prefers-reduced-motion: reduce) {
    .say:active, .copy:active, .opt:active { transform: none; }
}