/* Arka Sokaklar Arşivi.
 *
 * Mobile-first on purpose: the launch distribution channel is Facebook groups
 * (plan Q11), which is overwhelmingly mobile traffic. Desktop is the enhancement.
 */

:root {
  color-scheme: light dark;
  --bg: #fbfaf8;
  --surface: #ffffff;
  --surface-2: #f2efea;
  --ink: #1a1714;
  --ink-2: #5c554d;
  --ink-3: #6e665d;          /* §3: was #8a8178 -- 3.67:1, under the AA floor */
  --line: #e2ddd5;
  --line-strong: #8d8478;    /* --line is 1.35:1 -- a divider, not a control edge */
  --accent: #9b2226;
  --accent-ink: #ffffff;
  --focus: #0a58ca;
  --radius: 10px;
  --wrap: 56rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16130f;
    --surface: #1e1a16;
    --surface-2: #262119;
    --ink: #f2ece4;
    --ink-2: #b8ada0;
    --ink-3: #8d8377;
    --line: #332c24;
    --line-strong: #6b5f50;
    --accent: #e5646a;
    --accent-ink: #16130f;
    --focus: #7aa7ff;
  }
}

* { box-sizing: border-box; }

.spoiler-badge, .ep-badge, .ts, .season-year, .ep-no, .ep-dur { font-variant-numeric: tabular-nums; }

/* §4: body 17px. ROOT stays 16px on purpose -- rem resolves against the root, and
   that is what makes .875rem below land on exactly 14px. */
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 1.0625rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1rem; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem; top: 1rem; z-index: 10;
  background: var(--surface); padding: .6rem 1rem; border-radius: var(--radius);
}

/* ---------------------------------------------------------------- header */

/* Always dark navy/cyan, independent of prefers-color-scheme -- scoped to .site-head
   only, the rest of the page still follows the light/dark tokens above. */
.site-head {
  background: #010f1d; border-bottom: 1px solid #17222e;
  position: sticky; top: 0; z-index: 10;
}
.site-head .wrap {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  align-items: center; padding-top: .6rem; padding-bottom: .6rem;
}
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: #fff; }
.site-logo { display: block; height: 3.25rem; width: auto; border-radius: 8px; flex: none; }
.brand-text { line-height: 1.25; }
.brand-text strong { display: block; font-size: 1.05rem; letter-spacing: -.01em; }
.brand-text small { color: #9aa7b4; font-size: .875rem; }
.site-head nav { display: flex; gap: 1rem; margin-left: auto; font-size: .85rem; }
.site-head nav a, .foot-col a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.site-head nav a { color: #fff; font-weight: 700; }
.site-head nav a:hover, .site-head nav a:focus-visible { color: #00e0e4; }


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

.searchbar { padding-top: 1.25rem; }
.spoiler-ctl { margin: .75rem 0 0; padding: .55rem .8rem; font-size: .9rem; }
/* Padding, not flex: display:flex on <summary> drops Chrome's disclosure triangle. */
.spoiler-ctl summary { cursor: pointer; color: var(--ink-2); font-weight: 600; min-height: 44px; padding: .65rem 0; }
.spoiler-ctl[open] summary { margin-bottom: .5rem; }
.spoiler-ctl p { margin: .4rem 0; color: var(--ink-2); }
.spoiler-ctl label { display: block; margin: .5rem 0; }
/* Controls: --line-strong (3:1) and a 44px box, not the hairline. */
.spoiler-ctl input, .spoiler-ctl button {
  font: inherit; min-height: 44px; color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 6px;
}
.spoiler-ctl input { padding: .5rem .6rem; width: 8rem; background: var(--bg); }
.spoiler-ctl button { padding: .5rem .9rem; cursor: pointer; background: var(--surface-2); }
.spoiler-state { font-weight: 600; color: var(--ink) !important; }
/* Active-filter state, readable while the panel is shut. */
.spoiler-badge {
  margin-left: .4rem; padding: .1rem .5rem; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font-size: .875rem; font-weight: 700;
}

/* Pagefind's UI, nudged toward our palette. Scale stays 1: down-scaling pushed its
   chrome to 11.9px and clipped the placeholder mid-word at 390px. */
.pagefind-ui { --pagefind-ui-scale: 1; --pagefind-ui-primary: var(--ink);
  --pagefind-ui-text: var(--ink); --pagefind-ui-background: var(--surface);
  --pagefind-ui-border: var(--line); --pagefind-ui-tag: var(--surface-2);
  --pagefind-ui-border-radius: var(--radius); }
/* Scale 1 still ships the input at ~21px, clipping the Turkish placeholder
   mid-word at 390px. Pin the input's own font-size instead of the library
   scale -- 0.9375rem stays clear of the 14px floor (DESIGN.md §4). */
.pagefind-ui__search-input { font-size: .9375rem; }

/* ---------------------------------------------------------------- content */

main { padding-top: 1.5rem; padding-bottom: 3rem; }

h1 { font-size: 1.75rem; line-height: 1.25; margin: .2rem 0 .4rem; letter-spacing: -.02em; }
h2 { font-size: 1.2rem; margin: 2rem 0 .6rem; letter-spacing: -.01em; }
h2 small { color: var(--ink-3); font-weight: 400; }
/* Decorative rule trailing a section heading -- §4 wants sections to feel separated
   and margin alone was not holding on long listing pages. Decoration only: it marks
   nothing that the heading text does not already say (§9). */
.pinline { display: flex; align-items: center; gap: .75rem; }
.pinline::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.crumbs { font-size: .875rem; color: var(--ink-3); margin-bottom: .75rem; }
.crumbs a { color: var(--ink-2); }

.meta { color: var(--ink-2); font-size: .9rem; margin: 0 0 1rem; }
/* The broadcast years in a season h1. Lighter and smaller so the season number stays
   the heading and the years read as the qualifier they are. --ink-2, not --ink-3:
   this is heading-sized text, so it holds contrast at the larger size. */
.season-years { color: var(--ink-2); font-size: .7em; font-weight: 400; }
.section-note { color: var(--ink-2); font-size: .88rem; margin: 0 0 1rem; }

.hero h1 { font-size: 1.95rem; }

.prose { max-width: 40rem; }
.prose > :first-child { margin-top: 0; }

/* §6: 44px min -- the primary action on every moment card. */
.btn {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .45rem .9rem;
  background: var(--accent); color: var(--accent-ink);
  border-radius: 6px; text-decoration: none; font-size: .88rem; font-weight: 600;
  border: 1px solid transparent; font-family: inherit; cursor: pointer;
}
.btn-ghost { background: var(--surface-2); color: var(--ink); border-color: var(--line-strong); }
.moment-links { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0 0; }  /* §6: >=8px apart */

/* §5: the fork -- two equal doors, >=56px tall. */
.fork { display: grid; gap: .5rem; margin: 0 0 1.5rem; }
/* Shared card surface: the fork doors and the season/character tiles are the same
   object at two sizes. Overrides below must stay AFTER this block. */
.fork-card, .season-grid a, .char-grid a, .kind-grid a, .letter-box,
.spoiler-ctl, .moment {
  display: block; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); text-decoration: none;
}
.fork-card { min-height: 56px; padding: .8rem .9rem; border-color: var(--line-strong); }
.fork-card strong { display: block; font-size: 1.05rem; }
.fork-card small { color: var(--ink-2); }
.fork-card:hover { border-color: var(--accent); }
.hero-nums { color: var(--ink-2); font-size: .95rem; margin: 0 0 1.25rem; }

.start-hero { display: flex; gap: 1.25rem; flex-wrap: wrap; margin: 1.5rem 0; }
.start-poster { width: 100%; max-width: 12rem; border-radius: var(--radius); flex-shrink: 0; }
.start-hero .prose { flex: 1; min-width: 16rem; }

/* ---------------------------------------------------------------- player */

.player {
  position: relative; aspect-ratio: 16 / 9;
  background: #000; border-radius: var(--radius); overflow: hidden;
  margin: 1rem 0 .5rem;
}
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* .ep-player is a hook with no rule: the pin lost to the sticky header, which cannot
   share a viewport with it. Measurement in DESIGN-dizilah.md §4. */
.player-note { font-size: .875rem; color: var(--ink-3); margin: 0 0 1rem; }

/* ---------------------------------------------------------------- music */

.music-list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.music-item .player { margin-top: 0; }
.music-meta p { margin: .25rem 0; color: var(--ink-2); font-size: .9375rem; }
.music-season { font-size: .875rem !important; }

/* ---------------------------------------------------------------- moments */

.moments { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }

.moment { position: relative; border-left: 3px solid var(--accent); padding: .8rem .9rem; }
/* The id is on the inner title heading, so :target matches a descendant. */
.moment:has(:target) { outline: 3px solid var(--focus); outline-offset: 2px; }
/* §4: the title is the scan target. */
.moment-title { font-size: 1.05rem; font-weight: 600; margin: 0 0 .3rem; line-height: 1.35; }
/* Anchor landings must clear the sticky header, or every #moment link drops its
   target behind the bar. 8rem covers the header at its tallest (124px at 360px,
   where the nav wraps). */
.moment-title, section[id], #main { scroll-margin-top: 8rem; }
.moment-meta {
  display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center;
  margin: 0 0 .5rem; font-size: .875rem; color: var(--ink-2);
}

/* Pill geometry, shared by all three meta badges. */
.ep-badge, .kind, .unedited { padding: .12rem .45rem; border-radius: 999px; }
/* The episode badge is the spoiler warning -- keep it prominent. */
.ep-badge {
  background: var(--surface-2); color: var(--ink); font-weight: 700;
  text-decoration: none;
}
.ts { color: var(--ink-3); }
.unedited { border: 1px dashed var(--ink-3); color: var(--ink-3); font-size: .875rem; }

.snippet {
  margin: .5rem 0; padding: .4rem .7rem;
  border-left: 2px solid var(--line); color: var(--ink-2); font-style: italic;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Only appears under tools/build_site.py --include-unverified -- a local
   preview flag for the snippet-review pass, never set on the real build. */
.unverified-preview {
  margin: -.3rem 0 .5rem; font-size: .8rem; font-weight: 700; color: var(--warn, #b8860b);
}

.tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0; }
.tag, .topic-tag { font-size: .875rem; padding: .15rem .5rem; border-radius: 999px; }
.tag { background: var(--surface-2); color: var(--ink-2); text-decoration: none; }

/* Free-form topic tags on moments -- outlined, to read as distinct from the
   filled character-name pills above them. */
.topic-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 .5rem; }
.topic-tag, .kind {
  border: 1px solid var(--line); background: transparent; color: var(--ink-2);
  text-decoration: none;
}
.topic-tag:hover, .kind:hover { border-color: var(--accent); color: var(--accent); }
.tag-cloud { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin: 0 0 1rem; }
.tag-cloud small { color: var(--ink-3); }

/* ---------------------------------------------------------------- character */

.char-head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: .5rem; }
.char-photo {
  flex: none; width: 6.5rem; height: 6.5rem; border-radius: var(--radius);
  overflow: hidden; background: var(--surface-2);
}
.char-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.char-grid .char-photo { width: 100%; height: auto; aspect-ratio: 1; margin-bottom: .4rem; }
.char-photo-empty { border: 1px dashed var(--line); }
.char-actor { margin: 0 0 .3rem; color: var(--ink-2); }
.char-actor strong { color: var(--ink); }
.photo-credit { font-size: .875rem; color: var(--ink-3); margin: -.5rem 0 1rem; }

/* ---------------------------------------------------------------- season */

.season-logo { display: block; max-width: 14rem; max-height: 8rem; margin: 0 0 .75rem; }
.season-trailer { margin: 0 0 1rem; }

/* Hidden-but-indexed alias text, so a mangled-name search still resolves. */
.hidden-index {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------- spoiler collapse */

.spoiler-hidden > *:not(.spoiler-reveal) { filter: blur(6px); opacity: .45; pointer-events: none; user-select: none; }
.spoiler-reveal {
  display: block; width: 100%; margin-bottom: .5rem; min-height: 44px;
  font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer;
  padding: .5rem; border: 1px dashed var(--line-strong); border-radius: 6px;
  background: var(--surface-2); color: var(--ink-2);
}

/* ---------------------------------------------------------------- lists */

.season-grid, .char-grid, .kind-grid, .letter-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}
.season-grid a, .char-grid a, .kind-grid a, .letter-box { padding: .6rem .7rem; }
.season-grid small, .char-grid small, .kind-grid small, .letter-grid small { display: block; color: var(--ink-3); font-size: .875rem; }

/* /anlar/ letter directory: 13rem columns, so 1 box at 360px and 4 at the wrap. */
.letter-grid { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.letter-box h3 { margin: 0 0 .3rem; font-size: 1.15rem; }
.letter-box ul { list-style: none; margin: 0 0 .5rem; padding: 0; font-size: .9375rem; }
/* §6: every link in a box is a full-width 44px row. */
.letter-box a { display: block; padding: .65rem 0; }
/* §5: the year is the cheapest nostalgia handle we have. */
.season-year { font-weight: 700; color: var(--ink-2) !important; }

.ep-list { list-style: none; margin: 0; padding: 0; }
/* §5: whole row is the tap target. Stretched-link overlay, not an <a> wrapper --
   spoiler.js prepends a <button> here and a button inside an anchor is invalid. */
.ep-row {
  position: relative;
  display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center;
  min-height: 44px;
  padding: .5rem .2rem; border-bottom: 1px solid var(--line);
}
.ep-row > a::after { content: ''; position: absolute; inset: 0; }
.ep-row:hover { background: var(--surface-2); }
/* The reveal button must sit above the overlay to stay clickable. */
.ep-row > .spoiler-reveal { position: relative; z-index: 1; }
.ep-no, .ep-count, .ep-dur { color: var(--ink-3); font-size: .875rem; }
.ep-no { min-width: 2.6rem; }
.ep-count { margin-left: auto; }
.ep-count-none { font-style: italic; }
.ep-todo { color: var(--ink-3); }
.ep-synopsis { flex-basis: 100%; margin: 0; color: var(--ink-2); font-size: .9375rem; }

/* ---------------------------------------------------------------- footer */

/* §4: legal/footer text sits on --ink-2, not --ink-3. */
.site-foot {
  border-top: 1px solid var(--line); background: var(--surface-2);
  padding: 2.5rem 0 0; font-size: .9rem; color: var(--ink-2);
}
.site-foot p { margin: .35rem 0; max-width: 26rem; }
.foot-grid { display: grid; gap: 2rem 1.5rem; grid-template-columns: 1fr; padding-bottom: 2rem; }
.foot-brand .brand { gap: .6rem; color: var(--ink); text-decoration: none; padding: .4rem 0; margin: -.4rem 0; }
.foot-logo { border-radius: 50%; }
.foot-brand strong { font-size: 1.05rem; }
.foot-col h2 {
  font-size: .875rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-2); margin: 0 0 .75rem;
}
.foot-col { display: flex; flex-direction: column; gap: .5rem; }
.foot-col a { color: var(--ink-2); text-decoration: none; padding: .4rem 0; margin: -.4rem 0; }
.foot-col a:hover { color: var(--accent); text-decoration: underline; }
.foot-bottom {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  border-top: 1px solid var(--line); padding: 1rem 0 1.5rem; font-size: .875rem;
}
.foot-bottom p { margin: 0; }
.foot-badge { color: var(--ink-2); }

/* Every >=40rem override lives here, in one block (DESIGN.md §5: two breakpoints,
   nothing else). Keep it that way -- four scattered copies of the same query is how
   the rules budget quietly went red. */
@media (min-width: 40rem) {
  h1 { font-size: 2.1rem; }
  .hero h1 { font-size: 2.5rem; }
  .moments { gap: 1rem; }
  .site-logo { height: 4.25rem; }
  .fork { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .foot-grid { grid-template-columns: 1.4fr repeat(3, 1fr); }
}