/* FBC.FastContent — base stylesheet.
   Mobile first, no framework, no webfont. Every directional rule uses logical properties
   (inline-start/end) so an RTL language needs no separate stylesheet. */

:root {
    --bg: #ffffff;
    --bg-subtle: #f6f7f9;
    --bg-raised: #ffffff;
    --border: #e2e5ea;
    --border-strong: #cbd2dc;
    --text: #16202e;
    --text-muted: #5c6879;
    --accent: #1d4ed8;
    --accent-contrast: #ffffff;
    --danger: #b42318;
    --danger-bg: #fef3f2;
    --success: #067647;
    --success-bg: #ecfdf3;
    --warning: #b54708;
    --warning-bg: #fffaeb;

    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 4px 12px rgb(16 24 40 / 6%);
    --tap: 44px;               /* minimum comfortable touch target */
    --reading-width: 68ch;

    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
            "Noto Sans", "Noto Sans Arabic", sans-serif;
}

/* Dark, when the device asks for it and the reader has not said otherwise.
   :not([data-theme="light"]) is what lets somebody on a dark phone choose light and keep it. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0f172a;
        --bg-subtle: #131f36;
        --bg-raised: #1a2740;
        --border: #26344d;
        --border-strong: #35476a;
        --text: #e8edf5;
        --text-muted: #9aa8bf;
        --accent: #6f9bff;
        --accent-contrast: #0b1220;
        --danger: #ff9a92;
        --danger-bg: #3a1512;
        --success: #6ee7a8;
        --success-bg: #06281a;
        --warning: #fdba74;
        --warning-bg: #351a06;
        --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 6px 16px rgb(0 0 0 / 30%);
    }
}

/* Dark, because the reader pressed the button — on a light device too, so the rule above cannot
   serve here: a media query cannot be part of a selector list.

   The two blocks are therefore the same palette written twice, which is a standing invitation to
   drift. A test reads this file and fails if they ever stop agreeing (PublicThemeTests), so adding
   a colour to one and forgetting the other is caught at build time rather than by a reader on a
   phone at night. */
:root[data-theme="dark"] {
    --bg: #0f172a;
    --bg-subtle: #131f36;
    --bg-raised: #1a2740;
    --border: #26344d;
    --border-strong: #35476a;
    --text: #e8edf5;
    --text-muted: #9aa8bf;
    --accent: #6f9bff;
    --accent-contrast: #0b1220;
    --danger: #ff9a92;
    --danger-bg: #3a1512;
    --success: #6ee7a8;
    --success-bg: #06281a;
    --warning: #fdba74;
    --warning-bg: #351a06;
    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 6px 16px rgb(0 0 0 / 30%);
}

/* Tells the browser which way its own furniture should go — form controls, scrollbars, the address
   bar on mobile. Without it a page painted dark keeps light scrollbars and white input chrome. */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { color-scheme: dark; }
}

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

/* The browser's own [hidden] rule is display:none, but any author rule that sets display — and a grid
   or flex container always does — outranks it. Without this, toggling .hidden in script sets the
   attribute and changes nothing on screen. Everything that folds or filters on this site depends on
   it, so the override is deliberate rather than a shortcut. */
[hidden] { display: none !important; }

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

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.6;
    /* Never let a long unbroken URL push the page sideways on a phone. */
    overflow-wrap: break-word;
}

h1, h2, h3 { line-height: 1.25; margin-block: 0 .5em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }

a { color: var(--accent); }

img { max-width: 100%; height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/* ---------- Sign-in ---------- */

.bare-main {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: var(--bg-subtle);
}

.auth-shell { width: 100%; max-width: 380px; }

.auth-card {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.75rem 1.5rem;
}

.auth-title { margin: 0; font-size: 1.35rem; }
.auth-subtitle { margin: 0 0 1.25rem; color: var(--text-muted); font-size: .95rem; }

.auth-label {
    margin-block-start: .75rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--text-muted);
}

.auth-input {
    min-height: var(--tap);
    padding-inline: .75rem;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    /* 16px minimum stops iOS Safari from zooming when the field is focused. */
    font-size: 16px;
}

.auth-input:focus { border-color: var(--accent); }

.auth-button {
    margin-block-start: 1.25rem;
    min-height: var(--tap);
    background: var(--accent);
    color: var(--accent-contrast);
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
}

.auth-button:hover { filter: brightness(1.08); }

.auth-error {
    margin: 0 0 .5rem;
    padding: .625rem .75rem;
    background: var(--danger-bg);
    color: var(--danger);
    border-radius: var(--radius-sm);
    font-size: .9rem;
}

/* ---------- Blazor error banner ---------- */

#blazor-error-ui {
    display: none;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1000;
    padding: .75rem 1rem;
    background: var(--warning-bg);
    color: var(--warning);
    box-shadow: var(--shadow);
}

/* ============================================================ PUBLIC SITE
   Mobile first. Every directional rule uses logical properties, so an RTL
   language needs no separate stylesheet. */

.pub-shell { min-height: 100dvh; display: flex; flex-direction: column; }

.pub-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(10px);
    border-block-end: 1px solid var(--border);
    padding: .625rem 1rem .75rem;
}

.pub-header-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 1100px;
    margin-inline: auto;
}

.pub-brand {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--text);
    text-decoration: none;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* The name truncates, the mark never does: on a narrow phone a clipped logo looks broken, while a
   clipped name still reads as a name. */
.pub-brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    line-height: 1.2;
}

.pub-brand-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Deliberately one line that truncates rather than wrapping: a two-line tagline would change the
   height of a sticky header, and the page would jump under the reader's thumb on every navigation.

   And below 560px it is not shown at all. Measured on a 375px screen there is room for 166px of
   text, which turns a 38-character sentence into "Algı büyütülebilir a…" — a fragment that reads as
   a broken page rather than a slogan. The full-width header message (Ayarlar → Başlık mesajı) is
   the place for a line that has to be readable on a phone; it wraps instead of clipping and is
   written per language. */
.pub-brand-tagline {
    font-size: .72rem;
    font-weight: 500;
    color: var(--text-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .pub-brand-tagline { display: none; }
}

.pub-logo {
    inline-size: 1.55em;
    block-size: 1.55em;
    flex: none;
    color: var(--accent);
}

.pub-langs { display: flex; align-items: center; gap: .25rem; }

/* Tek bir açılır liste: dil başına bir düğme, dil sayısı arttıkça başlığı taşıyordu ve telefonda
   dörtte bile kendi satırına iniyordu. Yükseklik 36px'te tutuluyor — dokunma hedefi. */
.pub-lang-select {
    min-height: 36px;
    max-width: 10rem;
    padding: .25rem 1.6rem .25rem .5rem;
    /* --border değil: karanlık temada #26344d bu zemine göre 1.43:1 kalıyor ve kutunun kendisi
       görünmüyor. Bir denetimin sınırı WCAG 1.4.11'e göre en az 3:1 olmalı; --text-muted 7.4:1
       veriyor. Açılır listenin denetim olduğu, sınırından anlaşılıyor. */
    border: 1px solid var(--text-muted);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text-muted);
    font-family: inherit;
    font-size: .85rem;
    cursor: pointer;

    /* Oku kendimiz çiziyoruz: tarayıcının varsayılanı koyu temada okunmuyor. */
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 0.7rem center, right 0.45rem center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.pub-lang-select:hover { color: var(--text); border-color: var(--text); }

/* Sağdan sola dillerde ok da sola geçsin. */
[dir="rtl"] .pub-lang-select {
    padding: .25rem .5rem .25rem 1.6rem;
    background-position: left 0.45rem center, left 0.7rem center;
}

/* Betik çalışıyorsa app.js bunu gizler; çalışmıyorsa dil değiştirmenin tek yolu bu. */
.pub-lang-go {
    min-height: 36px;
    padding: .25rem .6rem;
    border: 1px solid var(--text-muted);
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: .8rem;
    cursor: pointer;
}

.pub-lang-go:hover { background: var(--bg-subtle); color: var(--text); }

/* Okuyucunun kendi dilinde teklif. Yönlendirme değil, o yüzden sessiz duruyor. */
.pub-lang-offer {
    margin-block: .75rem 0;
    font-size: .875rem;
}

.pub-lang-offer a { color: var(--accent); }

/* ---- search ---- */

.pub-search { max-width: 1100px; margin: .75rem auto 0; }
/* On the page for a machine, not on the screen: headings and labels that a screen reader and a
   crawler need but that the visible design already says in another way. */
.pub-sr-only,
.pub-search-label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.pub-search-box { position: relative; display: flex; align-items: center; }

.pub-search-icon {
    position: absolute;
    inset-inline-start: .875rem;
    width: 19px; height: 19px;
    color: var(--text-muted);
    pointer-events: none;
}

.pub-search-box input {
    width: 100%;
    min-height: 50px;
    padding-inline: 2.75rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 999px;
    /* 16px minimum: anything smaller makes iOS Safari zoom on focus. */
    font-size: 16px;
    appearance: none;
}

.pub-search-box input:focus { background: var(--bg); border-color: var(--accent); }
.pub-search-box input::-webkit-search-cancel-button { display: none; }

.pub-search-clear {
    position: absolute;
    inset-inline-end: .5rem;
    width: 36px; height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.pub-toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-block-start: .625rem;
    flex-wrap: wrap;
}

.pub-toolbar-btn {
    min-height: 34px;
    padding-inline: .75rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: .825rem;
    font-weight: 500;
    cursor: pointer;
}

.pub-toolbar-btn:hover { color: var(--text); border-color: var(--border-strong); }

.pub-result-count {
    margin-inline-start: auto;
    color: var(--text-muted);
    font-size: .825rem;
    font-variant-numeric: tabular-nums;
}

/* ---- layout ---- */

.pub-main { flex: 1; max-width: 1100px; width: 100%; margin-inline: auto; padding: 1rem 1rem 4rem; }
.pub-empty, .pub-noresults { padding: 3rem 1rem; text-align: center; color: var(--text-muted); }

.pub-group { margin-block-end: 1.75rem; }
.pub-group-head { margin: 0 0 .75rem; font-size: inherit; }

.pub-group-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    min-height: var(--tap);
    padding: 0;
    background: none;
    border: none;
    color: var(--text);
    text-align: start;
    cursor: pointer;
}

.pub-chevron {
    width: 20px; height: 20px;
    flex: 0 0 auto;
    color: var(--text-muted);
    transition: transform .18s ease;
}

/* Collapsed state points the chevron sideways — mirrored automatically in RTL. */
.pub-group-toggle[aria-expanded="false"] .pub-chevron { transform: rotate(-90deg); }
[dir="rtl"] .pub-group-toggle[aria-expanded="false"] .pub-chevron { transform: rotate(90deg); }

.pub-group-title { font-size: 1.15rem; font-weight: 700; }

.pub-group-count {
    padding: .0625rem .5rem;
    background: var(--bg-subtle);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: .75rem;
    font-weight: 600;
}

.pub-grid, .pub-loose {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .875rem;
}

.pub-loose { margin-block-end: 1.75rem; }

/* ---- card ---- */

.pub-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}

.pub-card:hover { border-color: var(--border-strong); }
.pub-card:active { transform: scale(.985); }

.pub-card-media { position: relative; background: var(--bg-subtle); }

.pub-card-img {
    display: block;
    width: 100%;
    /* Fixed ratio reserves the space before the image arrives, so nothing jumps (CLS = 0). */
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.pub-card-img-empty {
    display: grid;
    place-items: center;
    color: var(--text-muted);
    opacity: .4;
}

.pub-card-play {
    position: absolute;
    inset-block-end: .5rem;
    inset-inline-end: .5rem;
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    background: rgb(0 0 0 / 60%);
    border-radius: 50%;
    color: #fff;
}

.pub-card-body { padding: .75rem .875rem 1rem; }

.pub-card-title { margin: 0; font-size: 1.02rem; font-weight: 650; line-height: 1.35; }

.pub-card-summary {
    margin: .375rem 0 0;
    color: var(--text-muted);
    font-size: .875rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pub-card-lang {
    display: inline-block;
    margin-block-start: .5rem;
    padding: .0625rem .375rem;
    background: var(--bg-subtle);
    border-radius: 4px;
    color: var(--text-muted);
    font-size: .7rem;
    font-weight: 700;
}

/* ---- verdict badge ---- */

.pub-verdict {
    display: inline-block;
    margin-block-start: .5rem;
    padding: .125rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    background: var(--bg-subtle);
    color: var(--text-muted);
}

.pub-verdict-lg { font-size: .875rem; padding: .25rem .75rem; }
.pub-verdict-unfounded { background: var(--danger-bg); color: var(--danger); }
.pub-verdict-distorted { background: var(--warning-bg); color: var(--warning); }
.pub-verdict-outofcontext { background: var(--warning-bg); color: var(--warning); }
.pub-verdict-partlytrue { background: var(--bg-subtle); color: var(--text-muted); }
.pub-verdict-unverifiable { background: var(--bg-subtle); color: var(--text-muted); }

/* ---- article ---- */

.pub-article-page { max-width: 760px; margin-inline: auto; }

.pub-back {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    min-height: var(--tap);
    color: var(--text-muted);
    text-decoration: none;
    font-size: .925rem;
}

.pub-article-title { font-size: clamp(1.4rem, 4.5vw, 1.9rem); margin-block-end: 1rem; }

.pub-lang-notice {
    padding: .5rem .75rem;
    background: var(--bg-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: .875rem;
}

.pub-article-cover, .pub-video-cover {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius);
}

/* ---- video facade ---- */

.pub-video {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: #000;
    aspect-ratio: 16 / 9;
    margin-block-end: 1.25rem;
}

.pub-video-cover-empty { background: var(--bg-subtle); }

.pub-video-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
}

.pub-video-play svg { filter: drop-shadow(0 2px 8px rgb(0 0 0 / 40%)); transition: transform .15s ease; }
.pub-video-play:hover svg { transform: scale(1.08); }

.pub-video-player { width: 100%; height: 100%; border: 0; display: block; }

.pub-video-mirrors { display: flex; gap: .5rem; flex-wrap: wrap; margin-block: -.75rem 1.25rem; }

.pub-video-mirror {
    min-height: 34px;
    padding-inline: .75rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: .8rem;
    cursor: pointer;
}

/* ---- claim / truth blocks ---- */

.pub-block {
    padding: .875rem 1rem;
    border-radius: var(--radius);
    margin-block-end: 1.25rem;
    border-inline-start: 4px solid var(--border-strong);
    background: var(--bg-subtle);
}

.pub-block-claim { border-inline-start-color: var(--danger); }
.pub-block-truth { border-inline-start-color: var(--success); }

.pub-block-head {
    margin: 0 0 .5rem;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.pub-block-claim .pub-block-head { color: var(--danger); }
.pub-block-truth .pub-block-head { color: var(--success); }

.pub-block-body { line-height: 1.65; }
.pub-block-body > :first-child { margin-block-start: 0; }
.pub-block-body > :last-child { margin-block-end: 0; }

.pub-claim-meta {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-block-end: 0;
    padding-block-start: .5rem;
    color: var(--text-muted);
    font-size: .825rem;
}

/* Künye: iddiası olmayan sayfalarda başlığın altındaki mecra/yazar/tarih satırı. İddia bloğunun
   içindeki eşiyle aynı ölçüler, ama orada bir bloğun kuyruğu, burada başlığın devamı — o yüzden
   üstten değil alttan boşluk alıyor. */
.pub-byline {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    align-items: baseline;
    margin-block: .25rem 1rem;
    color: var(--text-muted);
    font-size: .825rem;
}

.pub-byline strong { color: var(--text); font-weight: 600; }

/* ---- long-form prose ---- */

.pub-prose {
    /* Roughly 68 characters per line — past that the eye loses the start of the next line. */
    max-width: var(--reading-width);
    font-size: 1.06rem;
    line-height: 1.75;
}

.pub-prose h2 { margin-block: 2rem .625rem; font-size: 1.25rem; }
.pub-prose h3 { margin-block: 1.5rem .5rem; font-size: 1.1rem; }
.pub-prose p { margin-block: 0 1.15em; }
.pub-prose img { border-radius: var(--radius-sm); }

.pub-prose blockquote {
    margin-inline: 0;
    padding-inline-start: 1rem;
    border-inline-start: 3px solid var(--border-strong);
    color: var(--text-muted);
}

.pub-prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.pub-prose th, .pub-prose td { padding: .5rem; border: 1px solid var(--border); text-align: start; }

/* The classes the sanitizer keeps. They were reachable from the editor and had no styling at all, so
   an aligned paragraph came out looking exactly like an unaligned one. */
.pub-prose .text-center { text-align: center; }
.pub-prose .text-end { text-align: end; }
.pub-prose .lead { font-size: 1.12em; color: var(--text); }
.pub-prose .muted { color: var(--text-muted); }
.pub-prose .highlight { background: var(--bg-subtle); padding: .1em .3em; border-radius: var(--radius-sm); }

.pub-prose h4 { margin-block: 1.25rem .4rem; font-size: 1rem; }
.pub-prose hr { margin-block: 1.75rem; border: 0; border-block-start: 1px solid var(--border); }

.pub-sources { margin-block-start: 2rem; }
.pub-sources ul { list-style: none; padding: 0; margin: 0; }
.pub-sources li { padding-block: .5rem; border-block-end: 1px solid var(--border); }
.pub-source-kind { margin-inline-start: .5rem; color: var(--text-muted); font-size: .78rem; }

/* ---- share ---- */

.pub-share {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-block-start: 2rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--border);
}

.pub-share-label { color: var(--text-muted); font-size: .875rem; font-weight: 600; }

.pub-share-btn {
    min-height: 38px;
    padding-inline: .875rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
}

.pub-share-btn:hover { border-color: var(--border-strong); }

/* ---- prev / next ---- */

.pub-prevnext {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .625rem;
    margin-block-start: 2rem;
}

.pub-prevnext-link {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .75rem .875rem;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: inherit;
    text-decoration: none;
    min-height: var(--tap);
}

.pub-prevnext-next { text-align: end; }

.pub-prevnext-label {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 600;
}

.pub-prevnext-next .pub-prevnext-label { justify-content: flex-end; }

.pub-prevnext-title {
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Mirror the arrows in RTL so "next" always points the way the language reads. */
[dir="rtl"] .pub-prevnext-label svg { transform: scaleX(-1); }
[dir="rtl"] .pub-back svg { transform: scaleX(-1); }

/* ---- modal ---- */

.pub-modal { position: fixed; inset: 0; z-index: 100; display: flex; }
.pub-modal[hidden] { display: none; }

.pub-modal-backdrop { position: absolute; inset: 0; background: rgb(8 12 20 / 55%); }

.pub-modal-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 860px;
    margin: auto;
    max-height: 100dvh;
    background: var(--bg);
    box-shadow: var(--shadow);
}

@media (min-width: 720px) {
    .pub-modal-panel { max-height: 92dvh; border-radius: var(--radius); overflow: hidden; }
    .pub-modal { padding: 1rem; }
}

.pub-modal-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .625rem;
    border-block-end: 1px solid var(--border);
    background: var(--bg-raised);
    /* Sticky on mobile: prev/next stay reachable without scrolling back up a long article. */
    position: sticky;
    top: 0;
    z-index: 2;
}

.pub-modal-nav {
    display: flex;
    align-items: center;
    gap: .25rem;
    min-height: 40px;
    max-width: 40%;
    padding-inline: .625rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: .8rem;
    cursor: pointer;
}

.pub-modal-nav-next { margin-inline-start: auto; }
.pub-modal-nav:disabled { opacity: .35; cursor: default; }

.pub-modal-nav-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[dir="rtl"] .pub-modal-nav svg { transform: scaleX(-1); }

.pub-modal-close {
    width: 40px; height: 40px;
    flex: 0 0 auto;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

.pub-modal-close:hover { background: var(--bg-subtle); color: var(--text); }

.pub-modal-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.25rem 1.125rem 2.5rem;
}

.pub-modal-body:focus { outline: none; }
.pub-modal-loading { padding: 3rem; text-align: center; color: var(--text-muted); }
.pub-modal-body .pub-article-title { margin-block-start: 0; }

/* Search sits under the sticky brand row on the home page only. */
.pub-search-standalone {
    position: sticky;
    top: 0;
    z-index: 9;
    max-width: 1100px;
    margin-inline: auto;
    padding: .75rem 1rem;
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(10px);
}

.pub-header-slim { padding-block-end: .625rem; }

/* Owner-set line under the site name. Sits inside the shell rather than the header bar so a long
   sentence wraps instead of pushing the language switcher off a narrow screen. */
.pub-header-message {
    margin: 0;
    padding: .625rem 1rem;
    text-align: center;
    font-size: .9rem;
    color: var(--text-muted);
    background: var(--bg-subtle);
    border-block-end: 1px solid var(--border);
}

.pub-footer {
    margin-block-start: 3rem;
    padding: 1.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
    border-block-start: 1px solid var(--border);
    text-align: center;
    font-size: .875rem;
    color: var(--text-muted);
}

.pub-footer a { color: inherit; }
.pub-footer p { margin-block: 0 .5rem; }

/* Künye. Ayrı bir çizgiyle ayrılıyor: üstündeki serbest metin sahibin yazdığı, buradaki ise
   doğrulanmış değerlerden bizim ürettiğimiz işaretleme. */
.pub-imprint {
    margin-block-start: .875rem;
    padding-block-start: .875rem;
    border-block-start: 1px solid var(--border);
}

.pub-imprint-row {
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .35rem .75rem;
}

/* Etikete kendi ağırlığını veriyoruz; ekran okuyucu için de bağlantılardan önce okunuyor. */
.pub-imprint-label { color: var(--text-muted); opacity: .8; }

/* Dokunma hedefi: telefonda yan yana duran bağlantılar parmakla ayırt edilebilmeli. */
.pub-imprint a { padding-block: .2rem; text-decoration: underline; text-underline-offset: .2em; }

.pub-notfound { padding: 4rem 1rem; text-align: center; max-width: 480px; margin-inline: auto; }
.pub-notfound p { color: var(--text-muted); margin-block-end: 1.5rem; }

/* Two ways out, side by side on a phone rather than stacked into the fold. */
.pub-notfound-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }

/* ---------------------------------------------------------------- etiketler
   Makalenin altındaki etiket rozetleri ve etiketin kendi sayfası. Rozetler düz
   bağlantıdır: modal içinde de statik sayfada da script'siz çalışır. */

.pub-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-block: 2rem 1rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--border);
}

.pub-tags-label {
    color: var(--text-muted);
    font-size: .875rem;
}

.pub-tag {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: .25rem .75rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-subtle);
    color: var(--text);
    font-size: .875rem;
    text-decoration: none;
}

.pub-tag:hover, .pub-tag:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
}

.pub-tag-page { padding-block-end: 3rem; }

/* Bir grubun ya da etiketin kendi kapağı. Kapağı olmayan sayfada hiç basılmaz — varsayılan
   paylaşım görseli bir kart doldurmak için var, 350 sayfanın başına aynı logoyu koymak için değil.
   Sabit oran, görsel gelmeden yerini ayırır (CLS = 0), kart görselleriyle aynı mantık. */
.pub-page-cover {
    margin: 1rem 0 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-subtle);
}

.pub-page-cover img {
    display: block;
    width: 100%;
    /* Telefonda 16/9: dar bir sütunda daha basık bir oran görseli şeride çevirir. */
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Geniş ekranda aynı oran 480 piksellik bir bant demek ve başlığı katlamanın altına itiyor.
   Bant, sayfanın kendisi değil; girişi. */
@media (min-width: 700px) {
    .pub-page-cover img { aspect-ratio: 3 / 1; }
}

.pub-tag-head {
    margin-block: 1rem 1.5rem;
    padding-block-end: 1rem;
    border-block-end: 1px solid var(--border);
}

.pub-tag-head h1 { margin: 0 0 .375rem; }

.pub-tag-count { margin: 0; color: var(--text-muted); font-size: .875rem; }

.pub-tag-desc {
    margin-block-start: .75rem;
    max-width: var(--reading-width);
    color: var(--text-muted);
}

/* Grup başlığından grubun kendi sayfasına giden bağlantı ve makaledeki kırıntı. */
/* A link, and it has to look like one. This used to be the muted body colour with no underline and
   no arrow, so the only thing separating it from ordinary text was the bold it inherits from the h2
   it sits in — which reads as a small heading, not as something to press. The accent was applied on
   :hover only, a state a phone never enters. Its neighbour above folds this page; this one leaves it,
   and the chevron is what says so before anyone taps. */
.pub-group-link {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    min-height: var(--tap);
    margin-inline-start: .5rem;
    color: var(--accent);
    font-size: .8125rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

/* Written as content rather than a rotated glyph so it follows the writing direction: Arabic lines
   end on the left, and an arrow pointing the wrong way points out of the page. */
.pub-group-link::after { content: "\203A"; font-size: 1.15em; line-height: 1; }
[dir="rtl"] .pub-group-link::after { content: "\2039"; }

.pub-group-link:hover, .pub-group-link:focus-visible { text-decoration: underline; }

.pub-crumb { margin: 0 0 .25rem; font-size: .875rem; }
.pub-crumb a { color: var(--text-muted); }
.pub-crumb a:hover { color: var(--accent); }

/* ---------------------------------------------------------------- header buttons and following */

/* Shared shape for the header's icon buttons, so the theme toggle and the follow menu line up with
   the language switcher instead of each inventing its own size. */
.pub-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-width: 40px;
    min-height: 36px;
    padding-inline: .45rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

.pub-icon-btn:hover { background: var(--bg-subtle); color: var(--text); }
.pub-icon-btn svg { inline-size: 1.15rem; block-size: 1.15rem; flex: none; }

/* The icon shows where the button goes, not where the page is: a moon on a light page means "make
   it dark". Decided in CSS rather than script, so the button is already right in the first painted
   frame instead of being corrected once app.js arrives.

   The sun is the one that has to be hidden by default — the light page is the default, and its
   button is the moon. */
.pub-theme-sun { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .pub-theme-moon { display: none; }
    :root:not([data-theme="light"]) .pub-theme-sun { display: inline-block; }
}

:root[data-theme="dark"] .pub-theme-moon { display: none; }
:root[data-theme="dark"] .pub-theme-sun { display: inline-block; }
:root[data-theme="light"] .pub-theme-moon { display: inline-block; }
:root[data-theme="light"] .pub-theme-sun { display: none; }

.pub-follow-menu { position: relative; }

/* The browser's own disclosure triangle would sit next to an icon that already says "open me". */
.pub-follow-summary { list-style: none; }
.pub-follow-summary::-webkit-details-marker { display: none; }
.pub-follow-summary::marker { content: ""; }

/* Below 560px the label goes and the icon carries it — the same width the brand tagline gives up. */
@media (max-width: 560px) {
    .pub-follow-label { display: none; }
}

.pub-follow-list {
    position: absolute;
    inset-block-start: calc(100% + .4rem);
    inset-inline-end: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    min-inline-size: 11rem;
    padding: .35rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-raised);
    box-shadow: var(--shadow);
}

.pub-follow-list a {
    padding: .5rem .65rem;
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    font-size: .9rem;
    min-height: var(--tap);
    display: flex;
    align-items: center;
}

.pub-follow-list a:hover { background: var(--bg-subtle); color: var(--accent); }

/* The invitation, at the end of what the reader came for. Set apart from the article so it does not
   read as part of the answer they were given. */
.pub-follow {
    max-width: var(--reading-width);
    margin: 0 auto 3rem;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-subtle);
    text-align: center;
}

.pub-follow h2 { margin: 0; font-size: 1.05rem; }
.pub-follow p { margin: .35rem 0 0; color: var(--text-muted); font-size: .9rem; }

.pub-follow-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-block-start: .9rem;
}

.pub-follow-links a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding: .45rem 1rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--bg-raised);
    color: var(--text);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
}

.pub-follow-links a:hover { border-color: var(--accent); color: var(--accent); }

/* <main> dışında durduğu için yanal boşluk oradan gelmiyor; dar telefonda kenara yapışmasın. */
@media (max-width: 720px) {
    .pub-follow { margin-inline: 1rem; }
}

/* ---------------------------------------------------------------- card share */

/* The grid item is now the slot, not the card, so the card has to be told to fill it — otherwise a
   short tile stops at its own content height and the row goes ragged. */
.pub-card-slot { position: relative; display: flex; }
.pub-card-slot > .pub-card { flex: 1; }

.pub-card-share {
    position: absolute;
    inset-block-start: .4rem;
    inset-inline-end: .4rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Comfortably tappable without covering the picture: 36px of button inside a 44px hit area. */
    inline-size: 36px;
    block-size: 36px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-raised) 80%, transparent);
    backdrop-filter: blur(6px);
    color: var(--text-muted);
    cursor: pointer;
    /* Out of the way until wanted — but only where there is a pointer to hover with. On a phone
       there is none, and a control nobody can reveal is a control that does not exist. */
    opacity: 1;
    transition: opacity .15s ease, color .15s ease, background .15s ease;
}

@media (hover: hover) {
    .pub-card-share { opacity: 0; }
    .pub-card-slot:hover .pub-card-share,
    .pub-card-share:focus-visible { opacity: 1; }
}

.pub-card-share:hover { color: var(--accent); background: var(--bg-raised); }
.pub-card-share svg { inline-size: 1.05rem; block-size: 1.05rem; }

.pub-card-share-done { display: none; }
.pub-card-share.is-done { color: var(--success); opacity: 1; }
.pub-card-share.is-done .pub-card-share-icon { display: none; }
.pub-card-share.is-done .pub-card-share-done { display: inline-block; }

/* ---------------------------------------------------------------- duyurular */

/* Başlık mesajının hemen altında, içeriğin üstünde. Genişlik sayfayla aynı hizada değil kenardan
   kenara: bir duyuru sayfanın bir parçası değil, sayfa hakkında bir not. */
.pub-anns { display: flex; flex-direction: column; }

.pub-ann {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem 1rem;
    border-block-end: 1px solid var(--border);
    background: var(--bg-subtle);
}

.pub-ann-body { flex: 1 1 auto; min-width: 0; }

.pub-ann-title { margin: 0; font-size: .95rem; font-weight: 600; }

.pub-ann-text { margin-block-start: .35rem; font-size: .9rem; color: var(--text-muted); }
.pub-ann-text > :first-child { margin-block-start: 0; }
.pub-ann-text > :last-child { margin-block-end: 0; }

.pub-ann-link {
    display: inline-block;
    margin-block-start: .4rem;
    font-size: .9rem;
    font-weight: 600;
}

/* Şerit tek satır: uzun bir başlık sayfanın yarısını kaplamasın. Kartta böyle bir kısıtlama yok,
   çünkü kart zaten okunmak için var. */
.pub-ann-banner .pub-ann-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pub-ann-card {
    border-inline-start: 4px solid var(--accent);
    background: var(--bg-subtle);
}

.pub-ann-close {
    flex: 0 0 auto;
    width: var(--tap);
    height: var(--tap);
    margin: -.4rem -.5rem -.4rem 0;
    padding: 0;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
}

.pub-ann-close:hover { color: var(--text); }

/* ------------------------------------------------------------ son eklenenler */

.pub-recent { margin-block-end: 2rem; }

/* Grup başlığıyla aynı görünüyor ama düğme değil: katlanmıyor, kendi sayfası da yok. Aynı satırı
   düğme yapmak, dokunanın ne olacağını bilememesi demekti. */
.pub-recent-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .75rem;
    font-size: inherit;
}