/* Gaza Counts — PRD §2 (minimalist, ciddi, karanlik) + §21.3 (animasyon kurallari)
   Animasyon YALNIZCA transform ve opacity uzerinden. width/top/left/box-shadow animasyonu yasak. */

:root {
  --bg: #0a0a0a;
  --bg-raised: #121212;
  --line: #1f1f1f;
  --fg: #ededed;
  --fg-dim: #8a8a8a;
  --fg-faint: #565656;
  --red: #c1272d;
  --red-bright: #e03b45;
  --green: #007a3d;
  --accent-sea: #3be0c4;
  --accent-river: #f2c230;
  --radius: 6px;
  --step: clamp(1rem, 3vw, 1.6rem);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

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

/* hidden HER ZAMAN gizler. Tarayicinin varsayilani `display: none`dur ama yazar
   kurallari (ornegin `.field { display: flex }`) onu sessizce ezer: eleman
   `hidden` yazmasina ragmen ekranda kalir. Bu kural o sinifi tamamen kapatir. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 clamp(15px, 1.6vw, 17px)/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100dvh; /* 100vh degil: mobil tarayici cubugu (PRD §22.2) */
  overflow-x: hidden;
}

/* ------------------------------------------------------- kapi arka plani
   Fotograf ASLA metnin onune gecmez: uzerinde sabit bir karartma katmani durur,
   okunabilirlik her zaman kazanir. Dosya bulunamazsa .on hic eklenmez ve katman
   gorunmez kalir — sahne duz koyu zeminde acilir, hicbir sey bozulmaz. */
#backdrop {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: center / cover no-repeat;
  opacity: 0; transition: opacity .5s ease;
  /* fotograf sahnenin rengini ele gecirmesin */
  filter: grayscale(.45) contrast(1.05) brightness(.7);
}
#backdrop.on { opacity: 1; }
/* Karartma: metnin arkasi her zaman koyu, asagi indikce tam koyu. */
#backdrop::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(10,10,10,.74) 0%, rgba(10,10,10,.86) 50%, rgba(10,10,10,.96) 100%);
}

/* ------------------------------------------------------------ yardimcilar */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--fg); color: var(--bg); padding: .6rem 1rem;
}
.skip-link:focus { left: 0; }

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

/* --------------------------------------------------------------- ust bar */
#topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem 1rem; padding: 1rem var(--step);
  border-bottom: 1px solid var(--line);
  /* Dar ekranda kapi sayaci ile dil secici yan yana sigmazsa ALT ALTA gecerler.
     `body { overflow-x: hidden }` yuzunden tasan taraf kirpiliyor, yani sigmamak
     "kucuk gorunmek" degil "kaybolmak" demek. */
  flex-wrap: wrap;
}
.progress { min-width: 0; font: 600 12px/1 var(--mono); letter-spacing: .18em; color: var(--fg-faint); }
.progress .on { color: var(--red-bright); }
.langs { display: flex; gap: .4rem; flex: 0 0 auto; margin-inline-start: auto; }
.langs button {
  background: none; border: 1px solid var(--line); color: var(--fg-faint);
  font: 600 11px/1 var(--mono); letter-spacing: .1em;
  padding: .4rem .6rem; border-radius: 4px; cursor: pointer;
}
.langs button[aria-pressed="true"] { color: var(--fg); border-color: var(--fg-faint); }

/* ----------------------------------------------------------------- duzen */
#main {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: var(--step); outline: none;
}
.screen {
  width: 100%; max-width: 44rem; display: flex; flex-direction: column;
  gap: 1.4rem; animation: rise .32s ease both;
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

.eyebrow {
  font: 600 11px/1 var(--mono); letter-spacing: .22em;
  color: var(--red); text-transform: uppercase;
}
h1 { font-size: clamp(1.5rem, 4.4vw, 2.3rem); line-height: 1.2; margin: 0; font-weight: 600; }
h2 { font-size: clamp(1.1rem, 2.6vw, 1.35rem); margin: 0; font-weight: 600; }
.lede { color: var(--fg-dim); margin: 0; white-space: pre-line; }
.aftertext {
  border-left: 2px solid var(--red); padding-left: 1rem;
  color: var(--fg); font-size: 1.05em; margin: 0;
}

/* ---------------------------------------------------------------- girdi */
.field { display: flex; flex-direction: column; gap: .6rem; }
input[type="text"] {
  width: 100%; background: var(--bg-raised); border: 1px solid var(--line);
  color: var(--fg); font: inherit; padding: .85rem 1rem; border-radius: var(--radius);
}
input[type="text"]:focus { border-color: var(--fg-faint); }
/* Onay kutusu: giris ekraninda ikinci cumle YAZILMAZ, kabul edilir. Kutu ve
   yazisi tek bir dokunma hedefi (label) olusturur — mobilde 44px'in altina inmez. */
.check-row {
  display: flex; align-items: flex-start; gap: .7rem;
  min-height: 44px; padding: .5rem .1rem; cursor: pointer;
  color: var(--fg); user-select: none;
}
.check-row input[type="checkbox"] {
  flex: 0 0 auto; width: 22px; height: 22px; margin: .15rem 0 0;
  accent-color: var(--red-bright); cursor: pointer;
}
.check-row:hover { color: var(--fg); }

.msg { min-height: 1.4em; font-size: .92em; color: var(--fg-dim); }
/* BOS hata satiri yer KAPLAMAZ. Yer ayirmak yazi zipladiginda iyi fikirdi ama
   bedeli her ekranda gorunuyordu: girdinin altindaki "Yazildi." ya da ceviri
   satiri, arada bos bir satirla asili kaliyordu. Mesaj cikinca alt icerik bir
   satir kayar; boslugun surekli durmasindan iyidir. */
.msg:empty { min-height: 0; }
.msg.bad { color: var(--red-bright); }

/* ------------------------------------------------------- alternatif adimi
   Gate 06'nin son adimi: secilen markanin karsisina yazilan oneri ve herkesin
   onerilerini gosteren pencere. Metinlerin tamami textContent ile basilir. */
.alt-inputs { display: flex; flex-direction: column; gap: .6rem; }
/* Arama sonuclari: 6.000 markalik listede gezinmek degil, aramak esastir —
   sonuc sayisi 30 ile sinirli ve kutu kendi icinde kayar. */
.alt-results { display: flex; flex-wrap: wrap; gap: .4rem; max-height: 13rem; overflow-y: auto; }
.alt-results:not(:empty) {
  padding: .5rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-raised);
}
.alt-results .block { min-height: 38px; padding: .45rem .7rem; font-size: .92em; }
.modal-panel input[type="search"], .modal-panel input[type="text"] {
  width: 100%; background: var(--bg); border: 1px solid var(--line);
  color: var(--fg); font: inherit; padding: .7rem .9rem; border-radius: var(--radius);
}
.alt-input-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  padding: .6rem .7rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-raised);
}
.alt-input-row input[type="text"] { flex: 1 1 12rem; width: auto; }
.alt-brand {
  flex: 0 0 auto; font: 600 12px/1.4 var(--mono); letter-spacing: .04em;
  color: var(--red-bright); text-transform: uppercase;
}
.alt-list { color: var(--fg); }
.alt-row {
  display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: baseline;
  padding: .55rem 0; border-bottom: 1px solid var(--line); margin: 0;
}
.alt-row:last-child { border-bottom: 0; }
.alt-accepted {
  padding: .8rem 1rem; border-radius: var(--radius);
  border: 1px solid var(--line); border-left: 2px solid var(--green);
  background: var(--bg-raised);
}
.alt-rejects { display: flex; flex-direction: column; gap: .5rem; }
.alt-reject {
  display: flex; flex-direction: column; gap: .5rem;
  padding: .7rem .9rem; border-radius: 0 4px 4px 0;
  border-left: 2px solid var(--red-bright); background: rgba(224,59,69,.07);
}
.alt-reject .msg { margin: 0; }

/* ---------------------------------------------------------- boykot markasi
   Gate 4'un marka onay ekrani. Kaynak kartina benzer ama ondan daha sicak durur:
   burada bir rakam degil, ziyaretcinin kendi verdigi bir cevap onaylaniyor. */
.brand-card {
  display: flex; flex-direction: column; gap: .7rem;
  padding: 1.1rem 1.2rem; border-radius: var(--radius);
  background: var(--bg-raised); border: 1px solid var(--line);
  border-left: 2px solid var(--green);
}
.brand-meant { margin: 0; color: var(--fg-dim); font-size: .95em; }
.brand-name { margin: 0; color: var(--fg); }
.brand-card .lede { color: var(--fg); }
.brand-card .source-links a { border-color: var(--fg-faint); }
.brand-card .msg { color: var(--fg-faint); }

/* ------------------------------------------------------------ ipucu rozeti
   Soru basliginin yaninda duran "!" dugmesi. Yalnizca ipucu olan soruda vardir.
   Hover ile ACILMAZ: dokunmatikte hover yoktur, tiklama her yerde ayni calisir. */
.prompt-row { display: flex; align-items: flex-start; gap: .7rem; }
.prompt-row > :first-child { flex: 1 1 auto; min-width: 0; margin: 0; }
.hint-btn {
  position: relative; flex: 0 0 auto; margin-top: .15rem;
  width: 2rem; height: 2rem; border-radius: 999px;
  background: transparent; border: 1px solid var(--fg-faint); color: var(--fg-dim);
  font: 700 15px/1 var(--mono); cursor: pointer;
  transition: color .15s, border-color .15s;
}
/* Gorunen daire 32px, DOKUNMA hedefi 48px (PRD §22.2): basligi ezmeden buyur. */
.hint-btn::after { content: ''; position: absolute; inset: -8px; }
.hint-btn:hover { color: var(--fg); border-color: var(--fg); }
.hint-btn.on { color: var(--accent-river); border-color: var(--accent-river); }
.hint-bubble {
  margin: 0; padding: .7rem .9rem; color: var(--fg); font-size: .95em;
  background: rgba(242,194,48,.07);
  border: 1px solid var(--line); border-left: 2px solid var(--accent-river);
  border-radius: 0 4px 4px 0;
  animation: rise .2s ease both;
}

button.action {
  align-self: flex-start; background: var(--fg); color: var(--bg);
  border: 0; border-radius: var(--radius); cursor: pointer;
  font: 600 13px/1 var(--mono); letter-spacing: .12em;
  padding: .85rem 1.4rem; min-height: 44px; /* PRD §22.2 dokunma hedefi */
  transition: opacity .15s;
}
button.action:disabled { opacity: .35; cursor: not-allowed; }
button.ghost {
  background: none; color: var(--fg-dim); border: 1px solid var(--line);
}

/* ------------------------------------------------- kaynak karti (PRD §5) */
.source-card {
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem 1.2rem;
  display: flex; flex-direction: column; gap: .55rem;
}
.source-card .figure { font: 600 clamp(1.8rem,6vw,2.6rem)/1 var(--font); color: var(--red-bright); }
.source-card .label { color: var(--fg); }
.source-card .scope { color: var(--fg-dim); font-size: .9em; }
.source-card .org { color: var(--fg-faint); font: 500 12px/1.4 var(--mono); }
.source-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .2rem; }
.source-links a {
  color: var(--fg); text-decoration: none; border: 1px solid var(--line);
  border-radius: 4px; padding: .45rem .75rem; font: 500 12px/1 var(--mono);
  min-height: 36px; display: inline-flex; align-items: center;
}
.source-links a:hover { border-color: var(--fg-faint); }

/* ---------------------------------------------------------------- harita */
.map-wrap { display: flex; justify-content: center; }
svg.map { height: min(46vh, 360px); width: auto; color: var(--red); }
svg.map .view { display: none; }
svg.map[data-view="v-silhouette"] #v-silhouette,
svg.map[data-view="v-1967"] #v-1967,
svg.map[data-view="v-gaza"] #v-gaza,
svg.map[data-view="v-westbank"] #v-westbank,
svg.map[data-view="v-rts"] #v-rts { display: block; }
#mediterranean, #jordan-river, #connect-line { opacity: 0; transition: opacity .5s ease; }
#connect-line { transition: opacity .3s ease, stroke-dashoffset 1.1s ease; }
.lit-sea #mediterranean { opacity: 1; stroke: var(--accent-sea); }
.lit-river #jordan-river { opacity: 1; stroke: var(--accent-river); }
.lit-line #connect-line { opacity: 1; stroke: #fff; stroke-dashoffset: 0; }
.lit-free #r-land { color: var(--red-bright); }
svg.map #r-land { transition: color .7s ease; }

/* ------------------------------------------------------------- bloklar */
.tray, .slotline {
  display: flex; flex-wrap: wrap; gap: .5rem;
  min-height: 52px; padding: .5rem; border-radius: var(--radius);
}
.slotline { border: 1px dashed var(--line); align-items: center; }
/* Numarali bos yuva: cumlenin KAC bloktan olustugunu gosterir; tepsideki
   fazlalar tuzaktir, kullanici bunu bakinca anlamali. */
.hole {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.6rem; min-height: 44px; padding: .6rem .85rem; border-radius: 4px;
  border: 1px dashed var(--line); color: var(--fg-faint);
  font: 600 12px/1 var(--mono);
}
.hole.filled {
  border-style: solid; background: var(--bg-raised); color: var(--fg); font: inherit;
  cursor: pointer; /* dolu yuvaya dokunmak o kelimeyi ve sonrasini geri alir */
}
.hole.filled:hover { border-color: var(--red-bright); color: var(--red-bright); }
/* Cozulmus cumlede geri alma yok: imlec de bunu soylesin */
.solved .hole.filled { cursor: default; }
.solved .hole.filled:hover { border-color: var(--red); color: var(--red-bright); }
.block-controls { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.block-controls .action:disabled { opacity: .35; cursor: default; }
.block {
  background: var(--bg-raised); border: 1px solid var(--line); color: var(--fg);
  border-radius: 4px; padding: .6rem .85rem; font: inherit; cursor: pointer;
  min-height: 44px; transition: transform .12s ease, opacity .12s ease;
}
.block:hover:not(:disabled) { transform: translateY(-1px); }
.block:disabled { cursor: default; }
.block.placed { background: #191919; opacity: .35; }
.solved .hole.filled { border-color: var(--red); color: var(--red-bright); }
.solved .block { border-color: var(--red); color: var(--red-bright); cursor: default; }

/* -------------------------------------------------------------- slider */
.slider-value { font: 600 clamp(2rem,9vw,3.4rem)/1 var(--font); color: var(--fg); }
input[type="range"] { width: 100%; height: 44px; accent-color: var(--red); }
.compare { display: grid; gap: .4rem; }
.compare .row { display: flex; justify-content: space-between; gap: 1rem; font-variant-numeric: tabular-nums; }
.compare .row.truth { color: var(--red-bright); font-weight: 600; }

/* ---------------------------------------------------------- nokta tuvali */
.dots-stage { display: flex; flex-direction: column; gap: .8rem; align-items: center; }
/* Uc katman ust uste: altta isaret izgarasi, ortada biriken adlar, ustte yalnizca
   en son beliren ad. Ayri tuvaller olmasaydi isaretler adlarin ustunu kapatirdi. */
.dots-stack { position: relative; width: 100%; height: min(52vh, 420px); }
.dots-stack canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#dots { border-radius: var(--radius); }
.dots-count { font: 600 clamp(1.6rem,6vw,2.4rem)/1 var(--mono); font-variant-numeric: tabular-nums; }
.dots-note { color: var(--fg-faint); font-size: .85em; }

/* -------------------------------------------------------- isim / hafiza */
.name-card { text-align: center; display: flex; flex-direction: column; gap: .3rem; }
.name-ar { font-size: clamp(2rem, 8vw, 3rem); line-height: 1.3; }
.name-age { color: var(--fg-dim); font: 500 14px/1 var(--mono); }
.witness-card {
  display: flex; flex-direction: column; gap: .5rem; align-items: center; text-align: center;
  min-height: 13rem; justify-content: center;
  padding: 1.4rem 1rem; border: 1px solid var(--line); border-radius: var(--radius);
}
.witness-card.rise { animation: rise .3s ease both; }
.witness-card .name-ar { font-size: clamp(1.5rem, 6vw, 2.2rem); }
.witness-name { font-size: 1.25rem; font-weight: 600; margin: 0; }
.witness-story { color: var(--fg-dim); max-width: 34rem; margin: 0; line-height: 1.6; }

/* --------------------------------------------------- youtube facade §33 */
.yt-facade {
  position: relative; width: 100%; aspect-ratio: 16/9;
  background: #000 center/cover no-repeat; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.yt-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-play {
  background: rgba(0,0,0,.6); border: 1px solid #fff4; color: #fff;
  border-radius: 999px; padding: .8rem 1.4rem; font: 600 13px/1 var(--mono);
  letter-spacing: .1em; pointer-events: none;
}
.warn {
  border: 1px solid var(--line); border-left: 2px solid var(--red);
  padding: .9rem 1.1rem; border-radius: var(--radius); color: var(--fg-dim); font-size: .95em;
}

/* -------------------------------------------------------------- sayac */
.counter { font: 600 clamp(2.6rem,12vw,5rem)/1 var(--font); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- final: eylem
   Bu bolum final ekraninin ASIL isi: ziyaretci bilgilendi, geriye ne yapacagi
   kaldi. O yuzden digerlerinden ayrik ve daha yuksek sesle durur. */
.final-section.act { border-top-color: var(--red); gap: 1rem; }
.act-call {
  margin: 0; color: var(--fg);
  font: 600 clamp(1.15rem, 3.6vw, 1.5rem)/1.35 var(--font);
}
a.action.act-primary {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; align-self: flex-start; text-align: center;
}
/* Baglantilar: dar ekranda alt alta, genis ekranda yan yana — sabit sutun yok. */
/* Ust satir uygulamalar (2), alt satir site + sosyal (3). Dar ekranda ikisi de
   kendiliginden alt alta iner: sabit sutun sayisi yok, minmax var. */
.link-grid { display: grid; gap: .5rem; }
.link-grid.apps { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.link-grid.social { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.link-card {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  min-height: 48px; padding: .7rem .9rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-raised); color: var(--fg); text-decoration: none;
  font: 600 12px/1.2 var(--mono); letter-spacing: .08em;
  transition: border-color .15s, color .15s;
}
.link-card:hover { border-color: var(--red-bright); color: var(--red-bright); }
.link-go { color: var(--fg-faint); }
.link-card:hover .link-go { color: var(--red-bright); }
.act-suggest {
  display: flex; flex-direction: column; gap: .8rem;
  padding-top: 1rem; border-top: 1px dashed var(--line);
}
.act-suggest h3 { margin: 0; font-size: 1.05rem; }
.boycott-panel { display: flex; flex-direction: column; gap: .6rem; }
.final-section { border-top: 1px solid var(--line); padding-top: 1.4rem; display: flex; flex-direction: column; gap: .8rem; }
.source-list { display: flex; flex-direction: column; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.source-list a { color: var(--fg); }

/* -------------------------------------------------------------- altbilgi */
#footer {
  border-top: 1px solid var(--line); padding: 1rem var(--step);
  color: var(--fg-faint); font-size: .82em;
}
#footer p { margin: .2rem 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; margin-top: .5rem !important; }
.footer-links .link-btn { font-size: .95em; min-height: 32px; }

/* Gizlilik metni ve iletisim formu — ikisi de pencerede acilir. */
.policy-h { margin: .4rem 0 0; font-size: 1rem; color: var(--fg); }
.contact-form { display: flex; flex-direction: column; gap: .7rem; }
.contact-form textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--line);
  color: var(--fg); font: inherit; padding: .8rem .9rem; border-radius: var(--radius);
  resize: vertical; min-height: 7rem;
}
.contact-form textarea:focus, .contact-form input:focus { border-color: var(--fg-faint); }
/* Bal kupu: ekran okuyucudan da, gozden de uzak; yalnizca botlar doldurur. */
.contact-form .trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ------------------------------------------------------- acilis sahnesi */
.canvas-stack { position: relative; width: 100%; }
.opening-canvas {
  width: 100%; height: min(38vh, 300px); display: block;
  background: #101010; border: 1px solid var(--line); border-radius: var(--radius);
  -webkit-user-select: none; user-select: none;
}
/* ust katman: yalnizca ipucu cizer, tiklamayi ALTA gecirir */
.opening-guide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none; border-radius: var(--radius);
}
.figure-label { margin: -.4rem 0 0; color: var(--fg); font-size: 1rem; }
/* Kapsam satiri uyaridir, dipnot degil: soluk gri degil, kirmizi kenarli. */
.figure-scope {
  margin: 0; padding: .5rem .7rem; color: var(--fg-dim); font-size: .92em;
  border-left: 2px solid var(--red); background: rgba(224,59,69,.07); border-radius: 0 4px 4px 0;
}
.meter { color: var(--fg-dim); font: 600 12px/1 var(--mono); font-variant-numeric: tabular-nums; }
.progressbar {
  height: 3px; background: var(--line); border-radius: 2px; overflow: hidden;
}
.progressbar i {
  display: block; height: 100%; background: var(--red-bright);
  transform: scaleX(0); transform-origin: left; transition: transform .18s ease;
}

/* --------------------------------------------------- dil baglantilari */
.langs a {
  border: 1px solid var(--line); color: var(--fg-faint); text-decoration: none;
  font: 600 11px/1 var(--mono); letter-spacing: .1em;
  padding: .45rem .6rem; border-radius: 4px;
  /* Dokunma hedefi (PRD §22.2): mobilde 44x44'ten kucuk dugme olmaz. */
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px;
}
.langs a[aria-current="true"] { color: var(--fg); border-color: var(--fg-faint); }

/* ------------------------------------------- taranabilir SEO govdesi
   Uygulama basladiginda kaldirilir. JS'siz ziyaretci ve tarayicilar bunu gorur. */
/* Taranabilir SEO govdesi: HTML'de VARDIR (arama motoru ve JS'siz ziyaretci gorur)
   ama JS'li ziyaretcide ekrana HIC basilmaz. Eskiden app.js onu ancak boot'ta
   siliyordu; modul script'i HTML ayristirildiktan sonra calistigi icin metin bir an
   ekranda parlayip kayboluyordu. Stil sayfasi render'i bloke ettigi icin bu kural
   ilk boyamadan once uygulanir — parlama olmaz. JS kapaliysa <noscript> geri acar. */
#seo-content { display: none; }

.seo-article { max-width: 44rem; display: flex; flex-direction: column; gap: 1.2rem; }
.seo-article h1 { font-size: clamp(1.5rem, 4.4vw, 2.3rem); line-height: 1.25; }
.seo-article h2 { color: var(--red); font-size: 1.1rem; margin-top: .6rem; }
.seo-article p { color: var(--fg-dim); margin: 0; }
.seo-article ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .6rem; }
.seo-article li { color: var(--fg-dim); }
.seo-article strong { color: var(--red-bright); font-size: 1.05em; }
.seo-article cite { color: var(--fg-faint); font-style: normal; font-size: .88em; }
.seo-article a { color: var(--fg); }

/* Siluet gorunumunde komsu iller arasindaki antialiasing dikisleri gorunmesin:
   stroke'u kalinlastirmak bitisik sekillerin arasindaki sac teli cizgiyi kapatir. */
svg.map[data-view="v-silhouette"] > g { stroke-width: 1.4; }

/* ------------------------------------------------------------- ek quiz
   Kapi bittikten sonra acilan istege bagli soru penceresi. Ilerlemeyi
   etkilemez; bu yuzden gorsel dili de "sinav" degil "devam okumasi"dir. */
.extra-offer {
  display: flex; flex-direction: column; gap: .6rem; align-items: flex-start;
  padding: .9rem 1rem; border: 1px dashed var(--line); border-radius: var(--radius);
}
.extra-offer .msg { margin: 0; }

.modal {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: var(--step);
  background: rgba(4,4,4,.82);
  animation: fadeIn .18s ease both;
}
@keyframes fadeIn { from { opacity: 0 } }
/* Pencerenin arka plani: sorunun gorseli. Panelin ICINDE durur, dis karartinin
   ustunde. Opaklik bilincli olarak dusuk ve uzerine dikey bir perde biner —
   burasi bir galeri degil, okunacak bir metin. */
.modal-figure {
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; pointer-events: none;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity .35s ease;
}
.modal-figure.on { opacity: .22; }
.modal-figure::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(4,4,4,.35), rgba(4,4,4,.85));
}
/* Icerik gorselin USTUNDE kalir */
.modal-panel > *:not(.modal-figure) { position: relative; z-index: 1; }

.modal-panel {
  position: relative;
  width: min(38rem, 100%); max-height: min(86dvh, 52rem); overflow-y: auto;
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.6rem clamp(1rem, 4vw, 2rem) 1.2rem;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius);
  animation: rise .22s ease both;
}
.modal-close {
  position: absolute; top: .5rem; right: .6rem;
  width: 2.2rem; height: 2.2rem; line-height: 1;
  background: transparent; border: 0; border-radius: var(--radius);
  color: var(--fg-dim); font-size: 1.6rem; cursor: pointer;
}
.modal-close:hover { color: var(--fg); background: rgba(255,255,255,.06); }
.modal-body { display: flex; flex-direction: column; gap: 1rem; }
.modal-note { margin: 0; color: var(--fg-faint); font-size: .85em; }
.extra-prompt { margin: 0; font-size: clamp(1.05rem, 3vw, 1.3rem); line-height: 1.4; }
.extra-headline { margin: 0; color: var(--fg-dim); font-weight: 600; }
.msg.good { color: var(--accent-sea); }
/* Arkadaki sahne pencere aciken kaymasin */
body.modal-open { overflow: hidden; }
/* Pencere icindeki harita ekrani doldurmasin */
.modal-panel .map-wrap { max-height: 34vh; }
.link-btn {
  align-self: flex-start; background: none; border: 0; padding: .2rem 0;
  color: var(--fg-faint); font: inherit; font-size: .9em;
  text-decoration: underline; cursor: pointer;
}
.link-btn:hover { color: var(--fg-dim); }

/* --------------------------------------------------------- giris cumleleri
   Yazilacak cumle KOPYALANAMAZ. Amac cumleyi tasimak degil, yazmak; secilemeyen
   metin yumusak bir engeldir. Sert bir kilit degildir ve olmasi da gerekmez —
   refleksle secip yapistirmayi bitirir, o kadar. */
.phrase {
  margin: 0;
  font-family: var(--mono); color: var(--fg);
  font-size: clamp(1rem, 3.4vw, 1.15rem); letter-spacing: .01em;
  padding: .7rem .9rem; border-left: 2px solid var(--red); border-radius: 0 4px 4px 0;
  background: rgba(255,255,255,.03);
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; /* iOS: uzun basinca "Kopyala" cikmasin */
  cursor: default;
}
/* Acilis sahnesinin 2. asamasinda yonergenin ICINDE yazilacak ifade gecer.
   Ayni kural: secilemez, kopyalanamaz. */
.no-copy {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
input[type="text"].solved { border-color: var(--green); color: var(--fg-dim); opacity: .8; }

/* Ikinci cumle aniden zipmasin: birincisi yazilinca yavasca acilir.
   (prefers-reduced-motion kurali bunu da otomatik kisaltir.) */
.reveal { animation: rise .45s ease both; }