/* fauda.app — kaynak kararlar: vault/01-Frontend/Web-Sitesi.md
   Renk ve yazı DESIGN.md'den (Fauda tasarım sistemi); tek yazı ailesi Quicksand, sitenin kendi sunucusundan.
   Düzen: tek sabit sahne (sayfa kaymaz). Kaydırdıkça perdeler yerinde değişir: giriş (iki iz buluşur) → nasıl
   çalışır (tek telefon, izler arkasında sonsuzluk çizer) → dört kural → kısaca → SSS (cevaplar sırayla açılır) →
   iletişim. Perdelerin zamanlaması ve izler site.js'te.
   Tema: açık ve koyu. Seçim yoksa cihazın ayarı; üstteki düğme seçimi html[data-tema] ile sabitler (ilk.js).
   JS yoksa ya da "hareketi azalt" açıksa sahne düz, alt alta okunur (html.canli yalnızca ilk.js ile gelir). */

@font-face {
  font-family: "Quicksand";
  src: url("fonts/quicksand-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Açık tema (DESIGN.md light) */
  --bg: #F8F9FC;
  --surface: #FFFFFF;
  --surface2: #EDF1F7;
  --border: #D8E0EC;
  --text1: #121A29;
  --text2: #4E5D78;
  --text3: #7585A2;
  --accent: #D1353D;
  --accent-ink: #C7242C;
  --on-accent: #FFFFFF;
  --verify: #007D6A;

  /* Sahne (tuvale JS bu değişkenlerden okur; "r, g, b" biçimindekiler rgba() içinde kullanılır) */
  --sahne-ic: #FFFFFF;
  --sahne-dis: #E3E9F2;
  --sahne-izgara: 78, 93, 120;
  --sahne-izgara-a: 0.085;
  --sahne-blok-a: 0.032;
  --sahne-isik: 209, 53, 61;
  --iz-a: 209, 53, 61;
  --iz-b: 18, 26, 41;
  --iz-parilti: 0.35;
  --perde: 248, 249, 252;
  --kenar-yuzey: rgba(255, 255, 255, 0.9);
  --golge: 0 18px 50px rgba(18, 26, 41, 0.16);
  --nasil-bg: #EEF2F8;

  /* Telefon ekranı: Figma ekranları uygulamanın açık temasında; koyu temada da aynı kalır */
  --ekran-bg: #F8F9FC;
  --cerceve: #121A29;

  --font: "Quicksand", ui-rounded, "Nunito", "Segoe UI", system-ui, sans-serif;
  /* Büyük başlıklar ekran yüksekliğine de bağlı: Windows'ta %120-125 ölçek (ör. 1366×620) kısa bir pencere demek, yalnız
     genişliğe bağlı boy açılış bloğunu üst çubuğun altına taşırıyordu (Beyza, 2026-10-09) */
  --t-display: clamp(2.5rem, min(1.5rem + 4.2vw, 9.5vh), 4.75rem);
  --t-h2: clamp(1.75rem, min(1.25rem + 2vw, 6.5vh), 2.75rem);
  --t-title: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --t-body: 1.0625rem;
  --t-small: 0.875rem;
  --gutter: max(16px, 5vw);
  --radius-card: 16px;
  --radius-control: 12px;
  color-scheme: light;
}

/* Koyu tema: cihaz koyu ve seçim "açık" değilse, ya da seçim "koyu"ysa. İki blok aynı değerleri taşır. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    --bg: #0D111A; --surface: #161D2B; --surface2: #212C3F; --border: #2D3B54;
    --text1: #F2F5FB; --text2: #9EADC7; --text3: #6F82A3;
    --accent: #FF6B72; --accent-ink: #FF8A90; --on-accent: #121A29; --verify: #26D9B8;
    --sahne-ic: #18233A; --sahne-dis: #0A0E16;
    --sahne-izgara: 158, 173, 199; --sahne-izgara-a: 0.065; --sahne-blok-a: 0.028;
    --sahne-isik: 255, 196, 160;
    --iz-a: 255, 107, 114; --iz-b: 242, 245, 251; --iz-parilti: 0.95;
    --perde: 10, 14, 22;
    --kenar-yuzey: rgba(22, 29, 43, 0.92);
    --golge: 0 18px 50px rgba(0, 0, 0, 0.45);
    --nasil-bg: #0D111A;
    --cerceve: #212C3F;
    color-scheme: dark;
  }
}
:root[data-tema="koyu"] {
  --bg: #0D111A; --surface: #161D2B; --surface2: #212C3F; --border: #2D3B54;
  --text1: #F2F5FB; --text2: #9EADC7; --text3: #6F82A3;
  --accent: #FF6B72; --accent-ink: #FF8A90; --on-accent: #121A29; --verify: #26D9B8;
  --sahne-ic: #18233A; --sahne-dis: #0A0E16;
  --sahne-izgara: 158, 173, 199; --sahne-izgara-a: 0.065; --sahne-blok-a: 0.028;
  --sahne-isik: 255, 196, 160;
  --iz-a: 255, 107, 114; --iz-b: 242, 245, 251; --iz-parilti: 0.95;
  --perde: 10, 14, 22;
  --kenar-yuzey: rgba(22, 29, 43, 0.92);
  --golge: 0 18px 50px rgba(0, 0, 0, 0.45);
  --nasil-bg: #0D111A;
  --cerceve: #212C3F;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text1);
  font-family: var(--font);
  font-weight: 500;
  font-size: var(--t-body);
  line-height: 1.55;
  overflow-x: hidden;
  position: relative;
}
h1, h2, h3 { margin: 0; font-weight: 700; text-wrap: balance; }
p, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* fixed: odaklanınca sayfa başa kaymaz (sahnede kaydırma konumu = bulunulan bölüm) */
.gizli:focus { position: fixed; z-index: 20; top: 12px; left: 12px; width: auto; height: auto; clip: auto; padding: 10px 16px; border-radius: 10px; background: var(--text1); color: var(--bg); font-weight: 700; }
.ic { position: relative; z-index: 2; max-width: 72rem; margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Üst çubuk ---------- */
.ust {
  position: absolute; z-index: 5; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: calc(18px + env(safe-area-inset-top, 0px)) var(--gutter) 18px;
}
.marka { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.375rem; letter-spacing: -0.01em; text-decoration: none; color: var(--text1); }
.marka img { width: 34px; height: 34px; }
.ust-sag { display: flex; align-items: center; gap: 8px; }

/* ---------- Harekete çağrı: "İlk duyanlardan ol" (Beyza, 2026-10-09). E-posta açar; form yok (KVKK, sunucu). ---------- */
.cta, .ust-cta, .sabit-cta {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-weight: 700; text-decoration: none; white-space: nowrap;
  background: var(--text1); color: var(--bg);
}
.cta:hover, .ust-cta:hover, .sabit-cta:hover { filter: brightness(1.12); }
.cta:focus-visible, .ust-cta:focus-visible, .sabit-cta:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.ust-cta { display: none; min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }
@media (min-width: 720px) { .ust-cta { display: inline-flex; } }
.acilis-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.cta { min-height: 48px; padding: 0 22px; font-size: 1rem; }
.canli .acilis-eylem .kaydir { margin-top: 0; }
/* Telefonda sabit düğme: yalnızca canlı sahnede, açılıştan sonra ve son perdeden (e-posta zaten orada) önce görünür (site.js) */
.sabit-cta { display: none; }
@media (max-width: 719px) {
  .canli .sabit-cta {
    display: inline-flex; position: fixed; z-index: 20; left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    min-height: 48px; padding: 0 22px; font-size: 1rem;
    box-shadow: var(--golge);
    opacity: 0; visibility: hidden; transform: translate(-50%, 12px);
    transition: opacity 260ms cubic-bezier(0.23, 1, 0.32, 1), transform 260ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 260ms;
  }
  .canli .sabit-cta.gorunur {
    opacity: 1; visibility: visible; transform: translate(-50%, 0);
    transition: opacity 260ms cubic-bezier(0.23, 1, 0.32, 1), transform 260ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s;
  }
}
@media (prefers-reduced-motion: reduce) { .sabit-cta { transition: none; } }
/* Sabit düğme içeriğin üstüne binmesin: telefonda perdelerin altında düğme kadar yer (son perde hariç, orada düğme yok) */
@media (max-width: 719px) {
  .canli .perde:not(.perde-iletisim) .perde-ic { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}
.dil, .tema {
  border-radius: 999px; background: var(--kenar-yuzey); border: 1px solid var(--border);
}
.dil { display: flex; gap: 2px; padding: 3px; }
.dil a, .dil span {
  display: grid; place-items: center; min-width: 44px; min-height: 36px; padding: 0 12px;
  border-radius: 999px; text-decoration: none;
  color: var(--text2); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.06em;
}
.dil [aria-current="page"] { background: var(--text1); color: var(--bg); }
.dil a:hover { color: var(--text1); }
.tema { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; cursor: pointer; color: var(--text1); }
.tema svg { width: 20px; height: 20px; }
.tema .gunes { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .tema .ay { display: none; }
  :root:not([data-tema="acik"]) .tema .gunes { display: block; }
}
:root[data-tema="koyu"] .tema .ay { display: none; }
:root[data-tema="koyu"] .tema .gunes { display: block; }
.tema[hidden] { display: none; }

/* ---------- Sahne ---------- */
.hikaye { position: relative; background: var(--bg); color: var(--text1); }
.sahne {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 68% 45%, var(--sahne-ic), var(--sahne-dis) 70%);
}
#tuval { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.canli #tuval { display: block; }
.kesisim-katman { display: none; }
.katman { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 64px; padding: 128px var(--gutter) 88px; }
.metin-blok { max-width: 34rem; }
.etiket {
  display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: 14px;
}
.acilis h1 .h1-ust { display: block; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 18px; line-height: 1.5; }
.acilis h1 .h1-ana { display: block; font-size: var(--t-display); line-height: 1.05; letter-spacing: -0.025em; }
.acilis p { margin-top: 20px; color: var(--text2); font-size: 1.125rem; max-width: 31rem; }
.kaydir { display: none; }
.vurus h2 { font-size: var(--t-h2); line-height: 1.12; letter-spacing: -0.02em; }
.vurus p { margin-top: 14px; color: var(--text2); max-width: 28rem; }
.rozet {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
  padding: 8px 14px 8px 10px; border-radius: 999px;
  background: var(--surface); color: var(--verify); font-weight: 700; font-size: 0.9375rem;
  border: 1px solid var(--verify);
}
.rozet svg { width: 20px; height: 20px; }
.secenekler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.secenekler li {
  padding: 7px 14px; border-radius: 999px; font-size: 0.9375rem; font-weight: 600;
  border: 1px solid var(--border); color: var(--text2); background: var(--surface);
}
.secenekler li.secili { border-color: var(--accent); color: var(--on-accent); background: var(--accent); }
.ortak {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px;
  padding: 12px 16px; border-radius: var(--radius-card);
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text1); font-weight: 600;
}
.ortak b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface2); color: var(--accent); flex: none; }
.ortak b svg { width: 16px; height: 16px; }
.devam {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; min-height: 44px;
  font-weight: 700; color: var(--text1); text-decoration: none; border-bottom: 2px solid var(--accent);
}
.devam svg { width: 18px; height: 18px; }
.bildirim {
  display: none;
  align-items: center; gap: 12px; width: 17.5rem; max-width: calc(100vw - 32px);
  padding: 12px 14px; border-radius: 18px;
  background: var(--kenar-yuzey); border: 1px solid var(--border);
  box-shadow: var(--golge);
}
.bildirim img { width: 38px; height: 38px; flex: none; }
.bildirim .b-ust { display: flex; justify-content: space-between; gap: 8px; font-size: 0.75rem; color: var(--text3); font-weight: 600; }
.bildirim .b-metin { display: block; font-weight: 700; color: var(--text1); }
.bildirim > span { flex: 1; min-width: 0; }

/* Canlı sahne: yalnızca JS var ve hareket azaltılmamışsa (ilk.js → html.canli).
   Sahne ekrana sabitlenir; yükseklik (kaydırma payı) site.js'te perdelerin uzunluğundan hesaplanır. */
.canli .hikaye { height: 1800vh; }
.canli .sahne { position: sticky; top: 0; height: 100vh; height: 100svh; }
/* Görünmeyen perde `visibility: hidden` almaz: ekran okuyucunun ağacında ve Tab sırasında kalır, yalnız saydamdır.
   Odak ona gelince sahne o perdeye gider (site.js "Klavye ve ekran okuyucu"). Önceki: ~~visibility: hidden~~, sayfa
   başında 26 başlığın 1'i okunabiliyordu (T-280). */
.canli .perde {
  position: absolute; inset: 0; opacity: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  will-change: opacity, transform;
}
.canli .perde-giris { display: block; }
.canli .katman { position: absolute; inset: 0; padding: 0; display: block; pointer-events: none; }
.canli .katman a, .canli .katman button { pointer-events: auto; }
/* Saydam (data-gizli) perde ve giriş metni tıklanmaz; bağlantıya gelen odak onu görünür yapar */
.canli [data-gizli], .canli [data-gizli] a, .canli [data-gizli] button { pointer-events: none; }
/* Bölüme bağlantıyla gelince odak bölümün kendisine konur (sıradaki Tab oradan sürsün); bütün ekranı çerçevelemesin */
.perde:focus { outline: none; }
/* Blok üst çubuğun (~80 px) altında kalan alanın ortasında: top 50% + yarım çubuk */
.canli .metin-blok {
  position: absolute; left: var(--gutter); top: calc(50% + 36px);
  width: min(34rem, 44vw);
  transform: translateY(-50%);
  will-change: opacity, transform;
}
.canli .vurus { opacity: 0; }
.canli .metin-blok h1, .canli .metin-blok h2, .canli .metin-blok p { text-shadow: 0 0 18px var(--bg), 0 0 6px var(--bg); }

/* "Aşağı kaydır": belirgin, basılınca bir ekran aşağı kaydırır */
.canli .kaydir {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 32px;
  min-height: 48px; padding: 0 20px 0 8px; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: var(--on-accent); border: 0;
  font-weight: 700; font-size: 1rem; letter-spacing: 0.01em;
  box-shadow: 0 10px 30px rgba(var(--iz-a), 0.35);
}
.kaydir .ok { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.kaydir svg { width: 20px; height: 20px; animation: zipla 1.6s ease-in-out infinite; }
@keyframes zipla { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
.kaydir:hover { filter: brightness(1.06); }

.canli .bildirim {
  display: flex; position: absolute; left: var(--bx, 68%); top: var(--by, 30%);
  transform: translate(-50%, -100%); opacity: 0; will-change: opacity, transform;
}

@media (max-width: 719px) {
  .katman { padding-top: 112px; gap: 48px; }
  .acilis h1 .h1-ana { font-size: clamp(2.25rem, 10vw, 3rem); }
  .acilis p { font-size: 1rem; margin-top: 14px; }
  .vurus h2 { font-size: clamp(1.6rem, 7.4vw, 2rem); }
  .canli .metin-blok { left: 16px; right: 16px; width: auto; top: auto; bottom: max(40px, 6vh); transform: none; }
  .canli .kaydir { margin-top: 22px; }
  .ust { gap: 8px; }
  .marka span { font-size: 1.25rem; }
}

/* ---------- Kesişim yazısı: izler kesişime varınca ilk sayfadaki bildirim gibi belirir ---------- */
.canli .kesisim-katman { display: block; position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.kesisim-yazi {
  position: absolute; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 999px;
  background: var(--kenar-yuzey); border: 1px solid var(--border); box-shadow: var(--golge);
  color: var(--text1); font-weight: 700; font-size: 0.9375rem;
  opacity: 0; transform: translate(0, -50%) scale(0.96);
  transition: opacity 320ms cubic-bezier(0.23, 1, 0.32, 1), transform 320ms cubic-bezier(0.23, 1, 0.32, 1);
}
.kesisim-yazi::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--iz-a)); flex: none; }
.kesisim-yazi.gorunur { opacity: 1; transform: translate(0, -50%); }
.kesisim-yazi.sola { transform: translate(-100%, -50%) scale(0.96); }
.kesisim-yazi.sola.gorunur { transform: translate(-100%, -50%); }
.kesisim-yazi.orta { transform: translate(-50%, -50%) scale(0.96); }
.kesisim-yazi.orta.gorunur { transform: translate(-50%, -50%); }

/* Ölçüm anı (site.js): kaydırma etkileri kalkar ki kesişim yerleri doğru ölçülsün */
.olcum .perde, .olcum [data-oge], .olcum .ekran, .olcum .adim { transform: none !important; transition: none !important; }

/* ---------- Perdeler: ortak ---------- */
.perde { position: relative; padding-block: clamp(72px, 10vw, 128px); }
.perde-giris { padding: 0; }
.perde-ic { position: relative; width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: var(--gutter); }
.perde-bas { margin-bottom: clamp(28px, 4vw, 48px); }
.bolum-ust { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 14px; }
.perde h2 { font-size: var(--t-h2); line-height: 1.12; letter-spacing: -0.02em; max-width: 24ch; }
.sayac { display: none; }
.canli .perde-ic { max-height: 100%; padding-top: 92px; padding-bottom: 28px; }
.canli .perde h2, .canli .perde h3, .canli .perde p, .canli .perde dt, .canli .perde dd {
  text-shadow: 0 0 16px var(--sahne-ic), 0 0 5px var(--sahne-ic);
}

/* Liste perdeleri (kurallar, kısaca, SSS): öğeler sırayla yerine gelir (data-durum: once / aktif / sonra) */
.canli [data-oge] {
  opacity: 0; transform: translateY(14px);
  transition: opacity 420ms cubic-bezier(0.23, 1, 0.32, 1), transform 420ms cubic-bezier(0.23, 1, 0.32, 1);
}
.canli [data-oge][data-durum="once"], .canli [data-oge][data-durum="aktif"] { opacity: 1; transform: none; }

/* ---------- Nasıl çalışır: tek telefon, ekranı değişir ---------- */
.perde-nasil .perde-ic { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px clamp(28px, 6vw, 96px); align-items: center; }
.perde-nasil .perde-bas { grid-column: 1 / -1; }
.adimlar { display: grid; gap: 28px; grid-row: 2; grid-column: 1; }
.adim .no { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; color: var(--accent-ink); }
.adim h3 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.02em; margin-top: 6px; }
.adim p { color: var(--text2); margin-top: 10px; max-width: 26rem; }

.canli .perde-nasil .perde-ic {
  height: 100%; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center; text-align: center; gap: 14px;
}
.canli .perde-nasil .perde-bas { margin: 0; }
.canli .perde-nasil .perde-bas h2 { margin-inline: auto; }
.canli .adimlar { grid-row: 3; grid-column: 1; display: grid; width: min(34rem, 100%); min-height: 7.4em; gap: 0; }
.canli .adim { grid-area: 1 / 1; }
.canli .adim[data-durum="once"] { opacity: 0; transform: translateY(-14px); }
.canli .adim h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
.canli .adim p { margin-inline: auto; }

.telefon {
  position: relative; z-index: 2; grid-row: 2; grid-column: 2;
  width: min(250px, 72vw); max-width: 100%; aspect-ratio: 9 / 19;
  border-radius: 38px; padding: 10px; background: var(--cerceve);
  box-shadow: var(--golge);
}
/* Telefon kendi satırına sığar (100%): sabit boy kısa pencerede başlığın üstüne biniyordu */
.canli .telefon { grid-column: 1; height: min(50svh, 470px, 100%); width: auto; border-radius: 34px; }
.ekran { position: relative; height: 100%; border-radius: 29px; overflow: hidden; background: var(--ekran-bg); }
.ekran + .ekran { display: none; }
.canli .ekran { position: absolute; inset: 10px; height: auto; border-radius: 25px; display: block; transform: none; }
.canli .ekran[data-durum="once"] { opacity: 0; transform: scale(0.98); }
/* Uygulama ekranları: Figma betiklerinden satır içi SVG (390×844); telefona sığmayan kenar kırpılır (slice) */
.ekran-cizim { display: block; width: 100%; height: 100%; }

/* ---------- Dört kural ---------- */
.kurallar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 5vw, 72px); }
.kural { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 18px; padding-block: 24px; border-top: 1px solid var(--border); }
.kural svg { grid-row: span 2; width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--surface2); color: var(--accent); position: relative; z-index: 1; }
.kural h3 { font-size: var(--t-title); line-height: 1.3; letter-spacing: -0.01em; }
.kural p { color: var(--text2); }

/* ---------- Kısaca ---------- */
.kisaca { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 5vw, 72px); }
.kisaca div { display: grid; grid-template-columns: minmax(7.5rem, 32%) minmax(0, 1fr); gap: 12px; padding-block: 15px; border-top: 1px solid var(--border); }
.kisaca dt { color: var(--text3); font-weight: 600; font-size: 0.9375rem; }
.kisaca dd { font-weight: 600; }

/* ---------- SSS: liste sabit, cevap tıklayınca açılır (aynı anda bir tane) ---------- */
.sss { display: grid; max-width: 48rem; }
.sss > div { padding-block: 20px; border-top: 1px solid var(--border); }
.sss h3 { font-size: var(--t-title); line-height: 1.3; letter-spacing: -0.01em; }
.sss p { color: var(--text2); margin-top: 8px; }
.canli .sss > div { padding-block: 10px; cursor: pointer; }
.canli .sss h3 { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); display: flex; gap: 10px; align-items: baseline; }
.canli .sss h3::before { content: "+"; color: var(--accent); font-weight: 700; width: 0.8em; flex: none; transition: transform 300ms ease; }
.canli .sss > div[data-durum="aktif"] h3 { color: var(--accent-ink); }
.canli .sss > div[data-durum="aktif"] h3::before { transform: rotate(45deg); }
/* Kapalı cevap `visibility: hidden`: ekran okuyucuya ve Tab sırasına da kapalı (aria-expanded="false" ile tutarlı);
   kapanırken geçiş bitince gizlenir */
.canli .sss p {
  max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; padding-left: calc(0.8em + 10px); visibility: hidden;
  transition: max-height 420ms cubic-bezier(0.23, 1, 0.32, 1), opacity 320ms ease, margin-top 420ms ease, visibility 0s linear 420ms;
}
.canli .sss > div[data-durum="aktif"] p {
  max-height: 10em; opacity: 1; margin-top: 6px; visibility: visible;
  transition: max-height 420ms cubic-bezier(0.23, 1, 0.32, 1), opacity 320ms ease, margin-top 420ms ease, visibility 0s;
}
.canli .perde-sss .perde-ic { height: 100%; display: flex; flex-direction: column; }
/* Liste ekrana sığmazsa kendi içinde kayar, son soru hep ulaşılabilir. Listenin sonunda tekerlek sayfaya geçer:
   overscroll-behavior: contain listenin üstündeki tekerleği taşmasa bile yutuyordu (Beyza, 2026-10-09). */
.canli .perde-sss .sss { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; }
/* Liste taşıyorsa alt kenar solar: son satır yarım kesik görünmesin, kaydırılabildiği anlaşılsın (site.js "tasiyor") */
.canli .perde-sss .sss.tasiyor { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent); }

/* ---------- İletişim (son perde) ---------- */
.beta-izgara { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.tarih { font-size: clamp(3rem, 2rem + 6vw, 6.5rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.04em; color: var(--accent); margin-top: 6px; max-width: none; }
.tarih small { display: block; font-size: var(--t-title); letter-spacing: -0.01em; color: var(--text1); margin-top: 18px; line-height: 1.3; }
/* Boy ekran yüksekliğine de bağlı: kısa pencerede (ör. 1280×520) tarih küçülür, son perde alt bilgiyle birlikte sığar */
.perde .tarih { font-size: clamp(3rem, min(1.5rem + 6vw, 17vh), 6.5rem); max-width: none; }
@media (min-width: 720px) { .perde .tarih { white-space: nowrap; } .perde .tarih small { white-space: normal; } }
/* Son perde: tarih tek başına bir satır, iletişim altında (İngilizcede "November 2026" uzun; yan yana taşıyordu) */
.perde-iletisim .beta-izgara { grid-template-columns: minmax(0, 1fr); align-items: start; gap: clamp(16px, min(3vw, 5vh), 40px); }
.perde-iletisim .iletisim { max-width: 34rem; }
.iletisim p { color: var(--text2); }
.posta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.posta a { font-weight: 700; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); color: var(--text1); text-decoration-color: var(--accent); text-underline-offset: 6px; overflow-wrap: anywhere; }
.kopya {
  min-height: 44px; padding: 0 16px; border-radius: var(--radius-control); cursor: pointer;
  border: 1px solid var(--border); background: var(--bg); color: var(--text1); font-weight: 700; font-size: 0.9375rem;
}
.kopya[hidden] { display: none; }
.kopya:hover { border-color: var(--accent); }
.alt { margin-top: clamp(56px, 8vw, 96px); padding-top: 24px; border-top: 1px solid var(--border); color: var(--text3); font-size: var(--t-small); }
.alt-ic { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; }
.alt .marka { font-size: 1rem; color: var(--text2); gap: 8px; }
.alt .marka img { width: 22px; height: 22px; }
.alt a { color: var(--text2); }
/* Son perde: alt bilgi akışta ve en altta, içerik kalan alanın ortasında. Önceki: ~~alt bilgi mutlak konumlu~~; içerik
   uzayınca (diğer sayfaların düğmeleri, 2026-10-10) kısa ekranda alt bilginin üstüne biniyordu */
.canli .perde-iletisim .perde-ic { height: 100%; display: flex; flex-direction: column; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.canli .perde-iletisim .beta-izgara { margin-block: auto; }
.canli .perde-iletisim .alt { margin: 0; flex: none; }

@media (max-width: 719px) {
  .perde-nasil .perde-ic { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .telefon { grid-column: 1; grid-row: 2; }
  .adimlar { grid-row: 3; }
  .adim p { margin-inline: auto; }
  .kurallar, .kisaca, .beta-izgara { grid-template-columns: minmax(0, 1fr); }
  .beta-izgara { align-items: start; }
  .kisaca div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .canli .perde-ic { padding-top: 84px; padding-bottom: 20px; }
  .canli .perde h2 { font-size: clamp(1.6rem, 7vw, 2rem); }
  .canli .telefon { height: min(44svh, 400px, 100%); }
  .canli .adimlar { min-height: 8.6em; }
  .canli .adim p { font-size: 0.9375rem; }
  /* Telefonda kurallar tek tek: yalnız sıradaki öğe, sayaçla */
  .canli .sayac { display: block; margin-top: 10px; color: var(--text3); font-weight: 700; font-size: var(--t-small); letter-spacing: 0.04em; }
  .canli .perde-kurallar .kurallar { display: grid; }
  .canli .perde-kurallar .kural { grid-area: 1 / 1; border-top: 0; }
  .canli .perde-kurallar .kural[data-durum="once"] { opacity: 0; transform: translateY(-14px); }
  /* SSS telefonda da tıklanan liste; ekrana sığmazsa liste kendi içinde kayar */
  .canli .perde-sss .sss { max-height: calc(100svh - 210px); overflow-y: auto; }
  /* Kısaca: ad ve değer yan yana. Alt alta iken sekiz satır 360×640'lık telefonda sahneye sığmıyor, son iki satır
     ekranın dışında kalıyordu (T-279) */
  .canli .perde-kisaca .perde-bas { margin-bottom: 18px; }
  .canli .kisaca div { grid-template-columns: 6.25rem minmax(0, 1fr); gap: 10px; align-items: baseline; padding-block: 7px; }
  .canli .kisaca dt { font-size: 0.8125rem; }
  .canli .kisaca dd { font-size: 0.9375rem; }
  .canli .perde .tarih { font-size: clamp(2.6rem, 13vw, 3.4rem); }
  .canli .perde-iletisim .alt { font-size: 0.8125rem; }
}

/* ---------- 404 ---------- */
.yok { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; background: var(--bg); color: var(--text1); padding: 48px 16px; }
.yok img { width: 72px; height: 72px; margin: 0 auto 20px; }
.yok h1 { font-size: var(--t-h2); }
.yok p { color: var(--text2); margin-top: 12px; }
.yok nav { display: flex; gap: 16px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.yok a { font-weight: 700; color: var(--text1); text-decoration-color: var(--accent); text-underline-offset: 6px; min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- İkincil düğme (hap): ana sayfada diğer sayfalar, metin sayfalarının sonu ---------- */
.hap {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--kenar-yuzey); color: var(--text1);
  font-weight: 700; font-size: 0.9375rem; text-decoration: none; white-space: nowrap;
}
.hap:hover { border-color: var(--accent); }
/* Ana sayfa, son perde: diğer sayfalar e-postanın altında düğme olarak (Beyza, 2026-10-10; önceki: ~~alt bilgide bağlantı~~) */
.sayfalar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
@media (max-width: 719px) {
  .sayfalar { gap: 6px; margin-top: 18px; }
  .sayfalar .hap { min-height: 40px; padding: 0 14px; font-size: 0.875rem; }
}

/* ---------- Metin sayfaları (hakkında, rehber, basın, gizlilik): ana sayfanın diliyle, sahne yok ----------
   Zemin ana sayfadaki sahnenin durağan hâli (ızgara, bloklar, ışık noktaları); üst kenardan iki iz iner. Sayfa başı
   açılışla (kırmızı üst etiket, büyük başlık), bölümler "Kısaca Fauda" ile (ince çizgili iki sütun), sayfa sonu son
   perdeyle (tarih ve düğmeler) aynı kalıpta. Önceki: ~~düz zemin, ortalanmış dar sütun~~ (Beyza, 2026-10-10: "tamamen
   bizim tasarımımıza benzesin"). Zemin dosyaları `scripts/web-zemin.mjs` ile üretilir. */
:root { --zemin: url("img/zemin-acik.svg"); --kare: 72px; --isik-x: 68%; --isik-y: 42%; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) { --zemin: url("img/zemin-koyu.svg"); } }
:root[data-tema="koyu"] { --zemin: url("img/zemin-koyu.svg"); }

.metin-govde { background: var(--sahne-dis); }
.metin-govde::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    var(--zemin) 0 0 / calc(var(--kare) * 16) calc(var(--kare) * 16),
    linear-gradient(to right, rgba(var(--sahne-izgara), var(--sahne-izgara-a)) 1px, transparent 1px) 0 0 / var(--kare) var(--kare),
    linear-gradient(to bottom, rgba(var(--sahne-izgara), var(--sahne-izgara-a)) 1px, transparent 1px) 0 0 / var(--kare) var(--kare),
    radial-gradient(circle 95vmax at var(--isik-x) var(--isik-y), var(--sahne-ic), var(--sahne-dis));
}

/* Üst çubuk ana sayfadakiyle aynı yerde (tam genişlik). İki iz: solda kırmızı, sağda koyu; ucu nokta */
.metin-ust { position: relative; }
.metin-ust::before, .metin-ust::after {
  content: ""; position: absolute; top: 0; width: 11px; pointer-events: none;
  background:
    radial-gradient(circle at 50% calc(100% - 5.5px), rgb(var(--iz)) 0 4.6px, transparent 5.5px),
    linear-gradient(rgb(var(--iz)), rgb(var(--iz))) 50% 0 / 3px calc(100% - 6px) no-repeat;
  filter: drop-shadow(0 0 6px rgba(var(--iz), var(--iz-parilti)));
}
.metin-ust::before { --iz: var(--iz-a); left: clamp(3px, 1.4vw, 20px); height: clamp(112px, 19vh, 168px); }
.metin-ust::after { --iz: var(--iz-b); right: clamp(3px, 1.4vw, 20px); height: clamp(76px, 12vh, 108px); }

.metin-sayfa { max-width: 72rem; margin-inline: auto; padding: clamp(28px, 7vh, 72px) var(--gutter) 56px; line-height: 1.6; }
.metin-sayfa h1, .metin-sayfa h2, .metin-sayfa p, .metin-sayfa li { text-shadow: 0 0 16px var(--sahne-ic), 0 0 5px var(--sahne-ic); }

/* Sayfa yolu, açılıştaki üst etiketin biçiminde */
.yol ol {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; list-style: none; margin: 0; padding: 0;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); line-height: 1.5;
}
.yol li + li::before { content: "·"; margin-right: 10px; }
.yol a { color: inherit; text-decoration: none; }
.yol a:hover { text-decoration: underline; text-underline-offset: 4px; }

.metin-sayfa h1 { font-size: var(--t-display); line-height: 1.05; letter-spacing: -0.025em; margin-top: 18px; max-width: 18ch; }
.metin-sayfa .guncelleme { margin-top: 18px; color: var(--text3); font-size: var(--t-small); font-weight: 600; }
/* Giriş cümlesi (rehber ve yazılar): açılıştaki paragrafla aynı */
.metin-sayfa > p:not(.guncelleme) { margin-top: 20px; color: var(--text2); font-size: 1.125rem; max-width: 34rem; }
.metin-sayfa strong { color: var(--text1); }
.metin-sayfa > p a, .metin-sayfa section a { color: var(--text1); text-decoration-color: var(--accent); text-underline-offset: 4px; }

/* Bölümler: "Kısaca Fauda" satırları gibi; solda başlık, sağda metin, üstte ince çizgi */
.metin-sayfa > section {
  display: grid; grid-template-columns: minmax(0, 30%) minmax(0, 1fr); column-gap: clamp(24px, 5vw, 72px); align-items: start;
  padding-block: 26px; border-top: 1px solid var(--border);
}
.metin-sayfa > section:first-of-type { margin-top: clamp(36px, 6vh, 64px); }
.metin-sayfa section > h2 { grid-column: 1; grid-row: 1 / span 12; font-size: var(--t-title); line-height: 1.3; letter-spacing: -0.01em; }
.metin-sayfa section > :not(h2) { grid-column: 2; max-width: 40rem; }
.metin-sayfa section > :not(h2) + :not(h2) { margin-top: 12px; }
.metin-sayfa section p, .metin-sayfa section li { color: var(--text2); }
.metin-sayfa section ul { padding-left: 1.15em; list-style: disc; }
.metin-sayfa section ol { padding-left: 1.4em; list-style: decimal; }
.metin-sayfa section li + li { margin-top: 8px; }
.metin-sayfa section li::marker { color: var(--accent); font-weight: 700; }

/* Rehber girişi: yazı listesi aynı satır diliyle; satırın tamamı tıklanır, sağında yuvarlak ok */
.rehber-liste { margin-top: clamp(32px, 5vh, 56px); }
.rehber-liste li { position: relative; padding: 24px 76px 24px 0; border-top: 1px solid var(--border); }
.rehber-liste li:last-child { border-bottom: 1px solid var(--border); }
.rehber-liste h2 { font-size: var(--t-title); line-height: 1.3; letter-spacing: -0.01em; }
.rehber-liste h2 a { color: var(--text1); text-decoration: none; }
.rehber-liste h2 a::before { content: ""; position: absolute; inset: 0; }
.rehber-liste p { margin-top: 6px; color: var(--text2); max-width: 40rem; }
.rehber-liste li::after {
  content: "→"; position: absolute; right: 4px; top: 50%; width: 44px; height: 44px; margin-top: -22px;
  display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--on-accent);
  font-weight: 700; font-size: 1.125rem; pointer-events: none;
  box-shadow: 0 10px 24px rgba(var(--iz-a), 0.28); transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.rehber-liste li:hover::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .rehber-liste li::after { transition: none; } }

/* Sayfa sonu: ana sayfanın son perdesi gibi tarih ve düğmeler */
.metin-son { margin-top: clamp(48px, 8vh, 96px); padding-top: clamp(32px, 5vh, 56px); border-top: 1px solid var(--border); }
.metin-son .tarih { margin: 6px 0 0; }

/* Alt bilginin üst çizgisi bölüm çizgileriyle aynı hizada (kabın iç genişliği) */
.metin-alt { width: min(100% - 2 * var(--gutter), 72rem - 2 * var(--gutter)); margin: 0 auto; padding: 24px 0 calc(32px + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 719px) {
  :root { --kare: 56px; --isik-x: 50%; --isik-y: 30%; }
  .metin-sayfa h1 { font-size: clamp(2.25rem, 10vw, 3rem); }
  .metin-sayfa > section { grid-template-columns: minmax(0, 1fr); padding-block: 22px; }
  .metin-sayfa section > h2, .metin-sayfa section > :not(h2) { grid-column: 1; grid-row: auto; }
  .metin-sayfa section > h2 + * { margin-top: 10px; }
  .rehber-liste li { padding: 20px 60px 20px 0; }
  .rehber-liste li::after { right: 0; width: 40px; height: 40px; margin-top: -20px; }
}