/* nuzul.com.tr — one stylesheet for the whole site.
   Style by element, not by page. No external requests.

   Source: design/web/site/style.css (Claude Design, round 2, 2026-08-10),
   copied verbatim except for the four blocks marked "generator:" below. Keep
   it that way — if the design changes, re-copy and re-apply those four.

   Fonts: Spectral / Hanken Grotesk are NAMED but not loaded. Self-hosting them
   would cost ~650 KB of uncompressed TTF (no woff2 tooling on this machine) and
   loading them from a CDN would break the no-external-requests rule, so the
   stacks fall through to the system serif/sans. */

/* ---------- 1. Colour roles ---------- */
:root {
  --paper:        #F1ECE3;
  --paper-sunk:   #E8E1D4; /* tables, code, quiet fills */
  --paper-raised: #F7F4EE; /* cards on paper */
  --ink:          #22201A;
  --ink-muted:    #6B665A;
  --rule:         #D6CEBE;
  --petrol:       #1B696F;
  --petrol-soft:  #E0EAE8;
  --focus:        #1B696F;

  --measure: 34rem;      /* reading width for prose */
  --page:    72rem;      /* outer page width */
  --gutter:  clamp(1.25rem, 5vw, 3rem);

  /* spacing scale: 4 8 12 16 24 32 48 64 96 */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem;

  --serif: Spectral, Georgia, "Times New Roman", "Noto Serif", serif;
  --sans: "Hanken Grotesk", "Readex Pro", ui-sans-serif, system-ui,
          "Segoe UI", "Helvetica Neue", sans-serif;
  --arabic: Amiri, "Noto Naskh Arabic", "Geeza Pro", serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #13171A;
    --paper-sunk:   #1B2024;
    --paper-raised: #191E22;
    --ink:          #ECE5D9;
    --ink-muted:    #97928A;
    --rule:         #2C3339;
    --petrol:       #74BCC2;
    --petrol-soft:  #1C2A2C;
    --focus:        #74BCC2;
  }
}
:root[data-theme="dark"] {
  --paper: #13171A; --paper-sunk: #1B2024; --paper-raised: #191E22;
  --ink: #ECE5D9; --ink-muted: #97928A; --rule: #2C3339;
  --petrol: #74BCC2; --petrol-soft: #1C2A2C; --focus: #74BCC2;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;      /* 17px */
  line-height: 1.65;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}
:lang(ar), [dir="rtl"] { font-family: var(--arabic), var(--sans); }

::selection { background: var(--petrol); color: var(--paper); }

a { color: var(--petrol); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap { max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }
.skip {
  position: absolute; inset-inline-start: -9999px; top: 0;
  background: var(--paper); color: var(--ink); padding: var(--s3) var(--s4); z-index: 10;
}
.skip:focus { inset-inline-start: var(--gutter); }

/* ---------- 3. Header ---------- */
.site-head {
  border-bottom: 1px solid var(--rule);
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5); min-height: 4.5rem; flex-wrap: wrap;
}
.wordmark {
  display: inline-flex; align-items: baseline; gap: .5em;
  font-family: var(--serif); font-size: 1.375rem; font-weight: 600;
  letter-spacing: .01em; color: var(--ink); text-decoration: none;
}
.wordmark .ar { font-family: var(--arabic); font-size: 1.15em; font-weight: 400; color: var(--petrol); }
[dir="rtl"] .wordmark { flex-direction: row-reverse; }

.langs { display: flex; align-items: center; gap: var(--s3); font-size: .875rem; }
.langs a {
  color: var(--ink-muted); text-decoration: none; padding: .15rem .1rem;
  border-bottom: 1px solid transparent;
}
.langs a:hover { color: var(--ink); border-bottom-color: var(--rule); }
.langs a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--petrol); }
.langs .sep { color: var(--rule); }
.langs [aria-disabled="true"] { color: var(--ink-muted); opacity: .45; cursor: default; text-decoration: line-through; text-decoration-thickness: 1px; }

/* ---------- 4. Notice (draft banner + inline notes) ---------- */
.notice {
  border-block: 1px solid var(--rule);
  background: var(--paper-sunk);
  font-size: .875rem; line-height: 1.5; color: var(--ink-muted);
}
.notice .wrap { padding-block: var(--s3); display: flex; gap: var(--s3); align-items: baseline; }
.notice b { color: var(--ink); font-weight: 600; letter-spacing: .06em;
  font-size: .75rem; text-transform: uppercase; white-space: nowrap; }
.notice b::after { content: ""; }

/* ---------- 5. Prose (the document shell) ---------- */
.prose { font-family: var(--serif); font-size: 1.125rem; line-height: 1.7; max-width: var(--measure); }
.prose > * + * { margin-block-start: var(--s4); }
.prose h2, .prose h3 { font-family: var(--sans); line-height: 1.3; letter-spacing: -.005em; }
.prose h2 { font-size: 1.375rem; font-weight: 600; margin-block-start: var(--s8); }
.prose h3 { font-size: 1.0625rem; font-weight: 600; margin-block-start: var(--s6); color: var(--ink); }
.prose h2 + *, .prose h3 + * { margin-block-start: var(--s3); }
.prose p { margin: 0; text-wrap: pretty; }
.prose strong { font-weight: 600; }
.prose ul, .prose ol { margin: 0; padding-inline-start: 1.4em; }
.prose li + li { margin-block-start: var(--s2); }
.prose ol { list-style: decimal; }
.prose blockquote {
  margin: var(--s5) 0; padding-inline-start: var(--s4);
  border-inline-start: 2px solid var(--petrol);
  color: var(--ink-muted); font-style: normal;
}
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85em; background: var(--paper-sunk); padding: .1em .35em; border-radius: 3px;
}
/* generator: the legal texts carry bare KVKK/store URLs, long e-mail addresses
   and bolded identifiers. Measured without this line, kosullar and aydinlatma
   scrolled sideways at 320 px. It only breaks a word that cannot fit at all. */
.prose { overflow-wrap: break-word; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin-block: var(--s7); }

/* target highlight when jumping to a clause */
.prose :target { background: var(--petrol-soft); box-shadow: 0 0 0 .4rem var(--petrol-soft); border-radius: 2px; }

/* tables — scrollable on phones, never squeezed */
.prose .table-scroll { overflow-x: auto; margin-block: var(--s5); }
.prose table {
  border-collapse: collapse; width: 100%; min-width: 30rem;
  font-family: var(--sans); font-size: .9375rem; line-height: 1.5;
}
.prose th, .prose td {
  text-align: start; vertical-align: top;
  padding: var(--s3) var(--s4) var(--s3) 0;
  border-bottom: 1px solid var(--rule);
}
[dir="rtl"] .prose th, [dir="rtl"] .prose td { padding: var(--s3) 0 var(--s3) var(--s4); }
.prose thead th {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-muted); font-weight: 600; border-bottom-color: var(--ink-muted);
}
.prose tbody tr:last-child td { border-bottom: 0; }

/* ---------- 6. Document page layout ---------- */
.doc { padding-block: var(--s7) var(--s9); }
.doc-head { max-width: var(--measure); margin-block-end: var(--s6); }
.doc-head h1 { font-family: var(--sans); font-size: 1.875rem; font-weight: 600; line-height: 1.2; margin: 0; letter-spacing: -.015em; }
.doc-head .meta { color: var(--ink-muted); font-size: .875rem; margin-block-start: var(--s3); }
.doc-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s6); }
/* generator: minmax(0,1fr) sizes the TRACK, but a grid ITEM still defaults to
   min-width:auto — i.e. its min-content width. The 30rem-min table inside
   .prose therefore pushed the whole document past the width of a phone and the
   page scrolled sideways. This is the line that keeps the table scrolling
   inside .table-scroll, which is where the design put it. */
.doc-grid > * { min-width: 0; }
@media (min-width: 62rem) {
  .doc-grid { grid-template-columns: minmax(0, 1fr) 15rem; gap: var(--s9); align-items: start; }
  .toc { position: sticky; top: var(--s5); order: 2; }
}

/* table of contents: <details> on phones, plain list on desktop */
.toc { font-size: .9375rem; }
.toc > summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between;
  gap: var(--s3); padding: var(--s3) 0; border-block: 1px solid var(--rule);
  font-weight: 600; color: var(--ink);
}
.toc > summary::-webkit-details-marker { display: none; }
.toc > summary::after { content: "+"; color: var(--petrol); font-weight: 400; }
.toc[open] > summary::after { content: "–"; }
.toc ol { list-style: none; margin: var(--s4) 0 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc li + li { margin-block-start: var(--s2); }
.toc a {
  display: flex; gap: .6em; color: var(--ink-muted); text-decoration: none; line-height: 1.4;
}
/* generator: the legal documents number their own headings ("1. Kısaca",
   "6. Yurt dışına aktarım"), so the design's CSS counter printed the number
   twice — "1. 1. Kısaca" — and would have mis-numbered aydinlatma, whose first
   heading is unnumbered. The entry keeps the document's own numbering. */
.toc a::before { content: none; }
.toc a:hover { color: var(--ink); }
@media (min-width: 62rem) {
  .toc > summary { display: none; }
  .toc[open] ol, .toc ol { margin-top: 0; }
  .toc { border-inline-start: 1px solid var(--rule); padding-inline-start: var(--s5); }
  .toc::before {
    content: attr(data-label); display: block; font-size: .75rem; letter-spacing: .07em;
    text-transform: uppercase; color: var(--ink-muted); margin-block-end: var(--s4); font-weight: 600;
  }
}

/* ---------- 7. Landing page ---------- */
.hero { padding-block: clamp(var(--s7), 8vw, var(--s8)) var(--s8); }
.hero .wrap {
  display: grid; gap: var(--s8) var(--s9);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 60rem) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s9); }
}
.hero h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2rem, 6.2vw, 3.25rem); line-height: 1.12; letter-spacing: -.02em;
  margin: 0; max-width: 16ch; text-wrap: balance;
}
.hero .lede {
  margin-block-start: var(--s5); max-width: 42ch; font-size: 1.125rem;
  color: var(--ink-muted); line-height: 1.6;
}

/* store badges — official artwork drops into .badge img; box holds the
   guideline geometry (40px lockup height, 10px clear space all round). */
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); margin-block-start: var(--s6); }
.badge { display: inline-flex; padding: 10px; margin: -10px; }   /* clear space, optically flush */
.badge img { display: block; height: 40px; width: auto; }
.badge[aria-disabled="true"] { opacity: .38; filter: grayscale(1); cursor: default; }
.stores .soon {
  font-size: .8125rem; color: var(--ink-muted); line-height: 1.4;
  border-inline-start: 1px solid var(--rule); padding-inline-start: var(--s4);
}
@media (max-width: 30rem) { .stores .soon { border-inline-start: 0; padding-inline-start: 0; flex-basis: 100%; } }
/* generator: nothing has been submitted to either store yet, so the official
   lockups are held in store/web/badges/ and NOT rendered — Apple's and Google's
   guidelines both require the badge to link to a live product page and both
   forbid altering it, which is what the design's greyed-out state does. With no
   badge beside it the caption's separator rule has nothing to separate. */
.stores.pending .soon { border-inline-start: 0; padding-inline-start: 0; }

/* device — a real screen sits in .phone-screen; this is the frame around it */
.phone {
  --w: 300px;
  width: var(--w); flex: none; justify-self: center;
  border: 9px solid var(--ink); border-radius: 38px;
  background: var(--paper-raised); overflow: hidden;
  box-shadow: 0 26px 50px -22px rgba(0,0,0,.45);
  position: relative; isolation: isolate;
}
@media (min-width: 60rem) { .phone { --w: 322px; } }
.phone img, .phone .phone-screen { display: block; width: 100%; }
.phone-cap {
  position: absolute; inset-block-start: 10px; inset-inline: 0; margin-inline: auto;
  width: 92px; height: 24px; background: var(--ink); border-radius: 14px; z-index: 2;
}
.phone-caption {
  margin: var(--s4) 0 0; font-size: .8125rem; color: var(--ink-muted);
  text-align: center; max-width: 34ch; margin-inline: auto;
}

section.band { border-top: 1px solid var(--rule); padding-block: var(--s8); }
.band > .wrap > h2 {
  font-family: var(--sans); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-muted); font-weight: 600; margin: 0 0 var(--s6);
}
.steps { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.step h3 {
  font-family: var(--serif); font-size: 1.25rem; font-weight: 500; margin: 0 0 var(--s3); line-height: 1.25;
}
.step p { margin: 0; color: var(--ink-muted); max-width: 34ch; }
.step .n {
  display: block; font-size: .75rem; letter-spacing: .1em; color: var(--petrol);
  font-variant-numeric: tabular-nums; margin-block-end: var(--s3);
}

.episodes { border-top: 1px solid var(--rule); margin: 0; padding: 0; list-style: none; max-width: 46rem; }
.episodes li { border-bottom: 1px solid var(--rule); }
/* generator: the design had each row as <a href="#">. There is no web episode
   page and there should not be one — the catalogue is the app's — so the row is
   a <div class="row"> and the hover/focus affordances that promised a
   destination are gone with it. Everything else is the design's. */
.episodes .row {
  display: grid; align-items: center; gap: var(--s2) var(--s4);
  grid-template-columns: 2.75rem minmax(0,1fr) auto;
  padding: var(--s4) var(--s2) var(--s4) 0; color: inherit;
}
[dir="rtl"] .episodes .row { padding: var(--s4) 0 var(--s4) var(--s2); }

/* play affordance */
.episodes .play {
  grid-row: span 2; align-self: center; justify-self: start;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1px solid var(--rule); background: transparent;
  display: grid; place-items: center; color: var(--ink-muted);
}
.episodes .play::before {
  content: ""; width: 0; height: 0; margin-inline-start: .18em;
  border-inline-start: .58em solid currentColor;
  border-block: .38em solid transparent;
}
[dir="rtl"] .episodes .play::before { transform: scaleX(-1); }

.episodes .title { font-family: var(--serif); font-size: 1.125rem; display: block; line-height: 1.3; }
.episodes .sub { display: block; color: var(--ink-muted); font-size: .9375rem; margin-block-start: .15rem; max-width: 44ch; }
.episodes .len {
  color: var(--ink-muted); font-size: .875rem; font-variant-numeric: tabular-nums;
  white-space: nowrap; align-self: center;
}
.episodes .facts {
  grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3);
  font-size: .75rem; letter-spacing: .04em; color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.episodes .facts .dot { color: var(--rule); }
.free {
  font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  color: var(--petrol); background: var(--petrol-soft);
  padding: .18em .5em; border-radius: 3px; white-space: nowrap;
}
@media (max-width: 34rem) {
  .episodes .row { grid-template-columns: 2.75rem minmax(0,1fr); }
  .episodes .len { grid-column: 2; grid-row: 3; justify-self: start; }
  .episodes .facts { grid-row: 3; grid-column: 2; }
  .episodes .len { display: none; }
  .episodes .facts .len-inline { display: inline; }
}
.episodes .len-inline { display: none; }

.aside-note {
  max-width: 40rem; background: var(--paper-sunk); border: 1px solid var(--rule);
  border-radius: 8px; padding: var(--s5); font-size: .9375rem; color: var(--ink-muted);
}
.aside-note h3 { font-family: var(--sans); font-size: .9375rem; color: var(--ink); margin: 0 0 var(--s2); font-weight: 600; }
.aside-note p { margin: 0; }

/* ---------- 7b. Screen stand-in ----------
   Placeholder for the supplied PNG. When the real export lands, replace the
   whole .phone-screen subtree with <img> — nothing else changes. */
.phone-screen { background: var(--paper-raised); position: relative; padding-block-end: 4.25rem; }
.ps-bar {
  display: flex; align-items: center; gap: .55rem; padding: 2.6rem .95rem .7rem;
  font-size: .75rem; color: var(--ink-muted); border-bottom: 1px solid var(--rule);
}
.ps-bar .back { color: var(--petrol); }
.ps-bar b { color: var(--ink); font-weight: 600; font-size: .8125rem; }
.ps-body { padding: .95rem; display: flex; flex-direction: column; gap: .8rem; }
.ps-hook { font-family: var(--serif); font-size: 1rem; line-height: 1.35; margin: 0; }
.ps-prose { font-family: var(--serif); font-size: .8125rem; line-height: 1.6; color: var(--ink-muted); margin: 0; }
.ps-verse {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 8px;
  padding: .7rem .8rem; display: flex; flex-direction: column; gap: .4rem;
}
.ps-verse .lbl {
  font-size: .625rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--petrol); font-weight: 600;
}
.ps-verse p { margin: 0; font-family: var(--serif); font-size: .9375rem; line-height: 1.55; color: var(--ink-muted); }
.ps-verse .said { color: var(--ink); }
.ps-verse mark {
  background: var(--petrol-soft); color: var(--ink);
  border-radius: 3px; padding: .05em .12em; box-decoration-break: clone;
}
.ps-note { margin: 0; font-size: .75rem; line-height: 1.5; color: var(--ink-muted); }
.ps-player {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  background: var(--paper); border-top: 1px solid var(--rule);
  padding: .6rem .8rem .8rem; display: grid; gap: .45rem;
  grid-template-columns: 2.1rem 1fr auto; align-items: center;
}
.ps-player .pp {
  width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--ink); color: var(--paper);
  display: grid; place-items: center; grid-row: span 2;
}
.ps-player .pp::before {
  content: ""; width: .18rem; height: .62rem; box-shadow: .3rem 0 0 currentColor;
  background: currentColor;
}
.ps-player .track { height: 3px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.ps-player .track span { display: block; height: 100%; width: 41%; background: var(--petrol); }
.ps-player .t { font-size: .6875rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ps-player .rate {
  font-size: .6875rem; color: var(--ink-muted); border: 1px solid var(--rule);
  border-radius: 4px; padding: .05rem .3rem; justify-self: end;
}

/* ---------- 8. Footer ---------- */
.site-foot {
  border-top: 1px solid var(--rule); padding-block: var(--s7) var(--s8);
  font-size: .9375rem; color: var(--ink-muted);
}
.site-foot .cols { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.site-foot h2 {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 600;
  color: var(--ink-muted); margin: 0 0 var(--s3);
}
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li + li { margin-block-start: var(--s2); }
.site-foot a { color: var(--ink); text-decoration: none; }
.site-foot a:hover { color: var(--petrol); text-decoration: underline; }
.site-foot .fine { margin-block-start: var(--s7); padding-block-start: var(--s4); border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: var(--s4) var(--s5); justify-content: space-between; }

@media print {
  .site-head, .site-foot, .toc, .notice, .phone { display: none; }
  body { background: #fff; color: #000; }
}