/* onTwos — tanıtım sitesi.
   Token'lar tek kaynaktan: docs/01_DESIGN_SYSTEM.md (mobil uygulama ve yönetim paneliyle AYNI).
   Oran kuralı: ~%70 cream (zemin) · %20 ink (ses) · %10 honey (vurgu).
   ⛔ KIRMIZI YOK — uyarı/hata dahil hiçbir yerde. Uyarı rengi gold (#B8893A). */

:root {
  /* Yellows — yalnız vurgu */
  --honey: #F2C840;
  --honey-soft: #FCE4A0;
  --honey-tint: #FFF1C2;
  --honey-pressed: #E2B82C;
  --gold: #B8893A;

  /* Creams — yüzey */
  --cream-page: #FAF7F0;
  --cream-card: #FFFDF6;
  --cream-2: #F4EFE2;
  --rule: #E7E0CC;
  --rule-soft: #EFE9D8;

  /* Inks — ses */
  --ink: #1C2432;
  --ink-soft: #2A3140;
  --ink-muted: #6B6C75;
  --ink-faint: #A6A29A;

  --radius-field: 14px;
  --radius-card: 16px;
  --radius-pill: 999px;

  --shadow-resting: 0 1px 2px rgba(28, 36, 50, .04);
  --shadow-card: 0 1px 2px rgba(28, 36, 50, .04), 0 6px 14px -8px rgba(28, 36, 50, .12);
  --shadow-float: 0 2px 4px rgba(28, 36, 50, .05), 0 14px 32px -16px rgba(28, 36, 50, .18);

  --gutter: 26px;
  --max: 1080px;

  --sans: Quicksand, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Bağlantıyla bir bölüme gelince (#m8, #ozellikler, #kurallar…) başlık yapışkan üst çubuğun
   (64px) ALTINDA kalmasın — tarayıcı hedefi bu kadar aşağıda durdurur. */
[id] { scroll-margin-top: 80px; }

body {
  margin: 0;
  background: var(--cream-page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ── Tipografi ────────────────────────────────────────────────────────── */

.eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.4px; }
h1 { font-size: 40px; line-height: 1.12; }
h2 { font-size: 26px; line-height: 1.2; }
h3 { font-size: 16.5px; line-height: 1.3; letter-spacing: -.2px; }

p { margin: 0; }
.lede { font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.muted { color: var(--ink-muted); }
.small { font-size: 13.5px; line-height: 1.55; }
.accent { color: var(--gold); }

/* ── Üst çubuk ────────────────────────────────────────────────────────── */

.site-head {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(250, 247, 240, .88);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule-soft);
}
.site-head .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 64px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand .wordmark {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 1.6px;
  color: var(--ink);
}
/* Wordmark her yerde düz ink. Marka kiti büyük boyutta iki "o"nun honey renklenmesine izin
   veriyor ama üründe kullanılmıyor: üst çubukta düz, alt bilgide renkli olması iki ayrı
   wordmark gibi duruyordu. Tek yazım, tek renk. */

.site-nav { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.site-nav a {
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-muted);
  white-space: nowrap;         /* "Hesap silme" dar ekranda iki satıra düşmesin */
  transition: background-color .12s ease, color .12s ease;
}
.site-nav a:hover { background: var(--cream-2); color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); background: var(--cream-2); }

/* ── Dil seçici ───────────────────────────────────────────────────────────
   Tasarım sistemindeki segmented control (ClaudeDesign/phase4/02_screens.html → .seg):
   cream-2 track, 12px radius, 4px iç boşluk, 3px gap; aktif seçenek cream-card
   pill + 1px rule kenarlık. Tek fark: üst çubuğa sığsın diye yatay padding daraltıldı
   (kaynakta 9px her yönde, burada 7/12) — gramer aynı.

   Neden düğme değil: "English" yazan tek düğme belirsizdi — şu anki dil mi, geçilecek
   dil mi? Segmented control iki seçeneği de gösterir, hangisinde olduğun bellidir. */
.lang-seg {
  display: flex;
  gap: 3px;
  padding: 4px;
  background: var(--cream-2);
  border-radius: 12px;
  flex: none;
}
.lang-seg button {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 7px 12px;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.lang-seg button:hover { color: var(--ink); }
.lang-seg button.on {
  background: var(--cream-card);
  border-color: var(--rule);
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 640px) {
  .site-head .wrap { gap: 10px; }
  .site-nav { gap: 0; }
  .site-nav a { padding: 8px 9px; font-size: 13px; }
  .site-nav a.hide-sm { display: none; }
}

/* 375px (iPhone SE/mini) — marka + iki bağlantı + dil düğmesi tek satıra sığsın. */
@media (max-width: 480px) {
  .site-head .wrap { padding: 0 16px; gap: 6px; }
  .brand { gap: 8px; }
  .brand .wordmark { font-size: 17px; letter-spacing: 1.1px; }
  .site-nav a { padding: 8px 6px; font-size: 12.5px; }
  .lang-seg button { padding: 6px 9px; letter-spacing: .08em; }
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero { padding: 64px 0 24px; }
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px;
  align-items: center;
}
.hero h1 { margin: 14px 0 16px; max-width: 560px; }   /* iki cümlecik de 2 satırda kalsın (TR ve EN) */
.hero .lede { max-width: 46ch; }
.hero-note { margin-top: 18px; max-width: 44ch; color: var(--ink-muted); font-size: 13.5px; }

@media (max-width: 900px) {
  .hero { padding-top: 44px; }
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; justify-items: center; text-align: center; }
  .hero h1 { max-width: 560px; margin-inline: auto; }
  .hero .lede, .hero-note { max-width: 52ch; margin-inline: auto; }
  h1 { font-size: 33px; }
  .store-row { justify-content: center; }
}

/* ── Mağaza düğmeleri ─────────────────────────────────────────────────── */

.store-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--cream-card);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-field);
  padding: 11px 18px 11px 15px;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  text-align: start;
  box-shadow: var(--shadow-resting);
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.store:hover { border-color: var(--honey); box-shadow: var(--shadow-card); transform: translateY(-1px); }
.store:active { transform: translateY(0); }
.store svg { flex: none; }
/* Mağaza işaretleri TEK RENK (ink) — Play'in çok renkli logosunda kırmızı var, marka kuralı yasaklıyor. */
.store .lines { display: flex; flex-direction: column; line-height: 1.15; }
.store .lines small { font-size: 10.5px; font-weight: 500; color: var(--ink-muted); }
.store .lines strong { font-size: 16px; font-weight: 600; letter-spacing: -.2px; }

.soon-tag {
  display: inline-block;
  margin-inline-start: 4px;
  background: var(--honey-tint);
  color: var(--gold);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.store.live .soon-tag { display: none; }

/* ── Telefon önizlemesi ───────────────────────────────────────────────────
   Uygulamanın GERÇEK Home ekranı (frontend/screens/app/Home.tsx + HeroCard,
   SectionHeader, Poster, TabBar). Her ölçü o dosyalardan alınmıştır — göz kararı yok:
     cihaz 390×844 · radius 44 · 6px bezel   (ClaudeDesign/phase1/02_screens.html)
     gutter 22 · başlık pt8/pb10 + rule-soft alt çizgi   (Home.styles.header)
     hero banner oranı 1900/400 · gövde 16/12/14 · CTA honey pill  (HeroCard)
     bölüm başlığı pt18/pb12, 20px + 13px "Tümü ›"  (SectionHeader)
     poster 2:3, radius 8, takvim 88 · popüler 96, başlık 11.5/14.5 iki satır  (Poster)
     tab bar 64+8, "+" 56px honey daire mt-8, aktif = dolu ikon + 5px honey nokta  (TabBar)
   Sayfaya sığması için TAMAMI ölçeklenir; değerler değişmez, oranlar uygulamayla birebir kalır.

   Afişler ve hero banner'ı uygulamanın KENDİ görselleri (frontend/assets/posters · banners),
   siteye 3x görünüm boyutunda yeniden ölçeklenmiş hâlleri: web/assets/app/. */

.phone-scaler { width: 281px; height: 608px; flex: none; }
.phone {
  width: 390px;
  height: 844px;
  transform: scale(.72);
  transform-origin: top left;
  background: var(--cream-page);
  border: 6px solid #14191F;
  border-radius: 44px;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-float);
}
.phone .island {
  position: absolute; left: 50%; top: 11px; transform: translateX(-50%);
  width: 124px; height: 36px; background: #0A0E13; border-radius: 22px; z-index: 3;
}
.phone .home-bar {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 140px; height: 5px; border-radius: 3px; background: var(--ink); opacity: .85; z-index: 3;
}
/* Dar ekranda hero bölümü ortalanır; telefonun İÇİ uygulamanın kendi hizasını korumalı. */
.phone .screen { position: absolute; inset: 0; display: flex; flex-direction: column; text-align: start; }
.ph-status { flex: none; height: 50px; }

/* Başlık — Mark + wordmark solda, haber ve bildirim ikonları sağda. */
.ph-head {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 22px 10px;
  border-bottom: 1px solid var(--rule-soft);
}
.ph-head .bm { display: flex; align-items: center; gap: 7px; }
.ph-head .wm { font-size: 16px; font-weight: 600; letter-spacing: .6px; color: var(--ink); }
.ph-head .acts { display: flex; align-items: center; gap: 4px; }
.ph-head .acts span { position: relative; display: block; padding: 6px; }
.ph-head .acts .nd {   /* okunmamış bildirim noktası */
  position: absolute; top: 4px; right: 4px; padding: 0;
  width: 8px; height: 8px; border-radius: 8px;
  background: var(--honey); border: 1.5px solid var(--cream-page);
}

.ph-scroll { flex: 1; overflow: hidden; }

/* HeroCard — "İZLİYORSUN" */
.ph-hero {
  margin: 14px 22px 6px;
  background: var(--cream-card);
  border: 1px solid var(--rule-soft);
  border-radius: 14px;
  overflow: hidden;
}
.ph-hero .banner { display: block; width: 100%; aspect-ratio: 1900 / 400; object-fit: cover; background: var(--cream-2); }
.ph-hero .body { padding: 12px 16px 14px; }
.ph-hero .label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 1.7px;
  text-transform: uppercase; color: var(--gold); margin-bottom: 5px;
}
.ph-hero .ttl { font-size: 18px; line-height: 22px; font-weight: 600; letter-spacing: -.3px; }
.ph-hero .row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 8px; }
.ph-hero .sub { font-size: 12.5px; color: var(--ink-muted); }
.ph-hero .cta {
  flex: none; background: var(--honey); color: var(--ink);
  border-radius: 999px; padding: 9px 16px; font-size: 13px; font-weight: 600; white-space: nowrap;
}

/* SectionHeader */
.ph-sec { display: flex; align-items: baseline; justify-content: space-between; padding: 18px 22px 12px; }
.ph-sec b { font-size: 20px; font-weight: 600; letter-spacing: -.3px; }
.ph-sec i { font-style: normal; font-size: 13px; font-weight: 500; color: var(--ink-muted); }

/* PosterRail + PosterCard */
.ph-rail { display: flex; gap: 12px; padding: 0 22px 4px; }
.ph-card { flex: none; display: flex; flex-direction: column; gap: 6px; }
/* Afiş kutusu 2:3 SABİT; görsel cover ile kırpılır — uygulamadaki Poster ile aynı davranış. */
.ph-card .art { display: block; border-radius: 8px; background: var(--cream-2); object-fit: cover; }
.ph-card .t { font-size: 11.5px; line-height: 14.5px; font-weight: 600; height: 29px; overflow: hidden; }
.ph-card .m { font-family: var(--mono); font-size: 9.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-muted); }
.ph-card .bdg {
  align-self: flex-start; background: var(--honey); color: var(--ink);
  padding: 2px 7px; border-radius: 6px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .6px;
}
/* "Ayın İlk 10'u" — sıra numarası baskın (gold 28/700, 34px sağa dayalı) */
.ph-rank { flex: none; display: flex; align-items: flex-start; gap: 4px; }
.ph-rank .n { width: 34px; text-align: right; font-size: 28px; line-height: 30px; font-weight: 700; color: var(--gold); }

/* TabBar — 5 yuva, ortada honey "+"; aktif sekme dolu ikon + honey nokta */
.ph-tabs {
  flex: none; height: 72px;
  display: flex; align-items: flex-start;
  background: var(--cream-card); border-top: 1px solid var(--rule-soft);
  padding-top: 12px;
}
.ph-tabs .slot { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ph-tabs .plus {
  width: 56px; height: 56px; border-radius: 28px; margin-top: -8px;
  background: var(--honey); display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card);
}
.ph-tabs .tdot { width: 5px; height: 5px; border-radius: 5px; background: var(--honey); }
.ph-tabs .tdot.off { background: transparent; }

/* Dolu (aktif) ikon — Phosphor "fill" ağırlığının karşılığı */
.ic.fill { fill: currentColor; stroke: none; }

@media (max-width: 420px) {
  .phone-scaler { width: 234px; height: 506px; }
  .phone { transform: scale(.6); }
}

/* ── Telefon önizlemesi · iç ekranlar ─────────────────────────────────────
   Destek sayfasında "Güvenlik ve destek" (SafetySupport.tsx), hesap silme
   sayfasında "Hesap" (Account.tsx) ekranı. Ölçüler yine o dosyalardan:
   PageHeader px18/pt8/pb10 + 32px geri düğmesi · GroupLabel mono 10/ls2 gold
   px22/pt18/pb8 · SettingsGroup mh18 radius13 · satır pv13/px16 + 34px ikon chip'i. */

.ph-ihead { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 18px 10px; }
.ph-ihead.acc { justify-content: space-between; padding-bottom: 12px; }
.ph-ihead .bk {
  width: 32px; height: 32px; border-radius: 16px; flex: none;
  background: var(--cream-card); border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
}
.ph-ihead .mid { flex: 1; display: flex; justify-content: center; }
.ph-ihead .mid b { font-size: 16px; font-weight: 600; }
.ph-ihead.acc .mid b { font-size: 17px; }
.ph-ihead .sp { width: 32px; flex: none; }

/* SafetySupport kahramanı — ortalanmış, honey-tint kutuda gold kalkan */
.ph-shero { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 30px 8px; text-align: center; }
.ph-shero .ic48 {
  width: 48px; height: 48px; border-radius: 14px; background: var(--honey-tint);
  display: flex; align-items: center; justify-content: center;
}
.ph-shero .t { font-size: 18px; font-weight: 600; }
.ph-shero .b { font-size: 13.5px; line-height: 20px; color: var(--ink-muted); }

/* GroupLabel */
.ph-grp {
  font-family: var(--mono); font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gold); padding: 18px 22px 8px;
}

/* Kart grupları: "nasıl yapılır" kartı ve SettingsGroup */
.ph-gcard { margin: 0 18px; border: 1px solid var(--rule); border-radius: 13px; overflow: hidden; background: var(--cream-card); }
.ph-how { display: flex; align-items: flex-start; gap: 13px; padding: 13px 16px; }
.ph-how + .ph-how { position: relative; }
/* Ayraç ikon chip'inin hizasından başlar (soldan 63px) — uygulamadaki `sep` ile aynı. */
.ph-how + .ph-how::before {
  content: ""; position: absolute; top: 0; left: 63px; right: 0; height: 1px; background: var(--rule-soft);
}
.ph-how .ic34, .ph-srow .ic34 {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: var(--cream-2); display: flex; align-items: center; justify-content: center;
}
.ph-srow .ic34 { border-radius: 9px; }
.ph-how .t { font-size: 14.5px; font-weight: 600; }
.ph-how .b { font-size: 13px; line-height: 19px; color: var(--ink-muted); margin-top: 2px; }

.ph-srow {
  display: flex; align-items: center; gap: 13px; padding: 13px 16px;
  background: var(--cream-card); border-top: 1px solid var(--rule-soft);
}
.ph-srow .sb { flex: 1; min-width: 0; }
.ph-srow .sl { font-size: 14.5px; font-weight: 600; }
.ph-srow .ss { font-size: 11.5px; line-height: 15px; color: var(--ink-muted); margin-top: 2px; }
.ph-srow .sr { display: flex; align-items: center; gap: 8px; flex: none; }
.ph-srow .val { font-size: 13px; font-weight: 500; color: var(--ink-muted); }

/* Toggle — 46×27, knob 22 */
.ph-tog { position: relative; width: 46px; height: 27px; border-radius: 999px; background: var(--rule); flex: none; }
.ph-tog.on { background: var(--honey); }
.ph-tog::after {
  content: ""; position: absolute; top: 2.5px; left: 2.5px;
  width: 22px; height: 22px; border-radius: 11px; background: #FFFDF6;
}
.ph-tog.on::after { left: 21.5px; }

/* Account "danger zone" — kırmızı YOK; gold DİKKAT etiketi ve nötr cream kart uyarır. */
.ph-caution { display: flex; align-items: center; gap: 6px; padding: 18px 22px 8px; }
.ph-caution span {
  font-family: var(--mono); font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gold); font-weight: 600;
}
.ph-danger {
  display: flex; align-items: center; gap: 13px; margin: 0 18px;
  background: var(--cream-card); border: 1px solid var(--rule); border-radius: 13px;
  padding: 13px 16px;
}
.ph-danger .dl { font-size: 14.5px; font-weight: 600; }
.ph-danger .ds { font-size: 11.5px; color: var(--ink-muted); margin-top: 2px; }

/* Hesap ekranı DİBE kaydırılmış gösterilir — "Hesabı sil" en altta durur, kullanıcı oraya iner.
   Taşma yukarı doğru olur; yani kesik üstte kalır, tıpkı gerçek bir kaydırma anında olduğu gibi. */
.ph-scroll.bottom { display: flex; flex-direction: column; justify-content: flex-end; }
.ph-scrolled { padding-bottom: 40px; }   /* ScrollView contentContainerStyle.paddingBottom */

/* ── İçerik sayfası düzeni: metin solda, telefon sağda (yapışkan) ──────── */

.doc-page { padding: 48px 0 88px; }
.doc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  column-gap: 56px;
  align-items: start;
}
.doc-head { grid-column: 1; grid-row: 1; max-width: 62ch; }
.doc-head h1 { margin: 12px 0 14px; font-size: 34px; }
.doc-aside { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 88px; }
.doc-body { grid-column: 1; grid-row: 2; padding-top: 24px; }

@media (max-width: 1000px) {
  .doc-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; row-gap: 32px; justify-items: center; }
  .doc-head { grid-column: 1; grid-row: 1; }
  .doc-aside { grid-column: 1; grid-row: 2; position: static; }
  .doc-body { grid-column: 1; grid-row: 3; padding-top: 0; width: 100%; max-width: 700px; }
  .doc-head { max-width: 700px; width: 100%; }
}
@media (max-width: 560px) {
  .doc-head h1 { font-size: 28px; }
}

/* ── Bölümler ─────────────────────────────────────────────────────────── */

section.band { padding: 72px 0; }
section.band.tinted { background: var(--cream-2); border-block: 1px solid var(--rule-soft); }
.band-head { max-width: 46ch; margin-bottom: 36px; }
.band-head h2 { margin: 12px 0 10px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 16px;
}

.card {
  background: var(--cream-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 22px;
  box-shadow: var(--shadow-resting);
}
.card h3 { margin-bottom: 7px; }
.card p { font-size: 14px; line-height: 1.55; color: var(--ink-muted); }

/* İkon dili: 24×24, 1.5px stroke, yuvarlak uç/köşe — uygulamadaki Phosphor Regular ile aynı
   ağırlık. Tek dil; karışık ikon kütüphanesi yok. */
.ic {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--ink-soft);
}
.chip.honey .ic { color: var(--gold); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* İkon chip'i — settings satırıyla aynı gramer: 34×34, radius 9-10, cream-surface2 */
.chip {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--cream-2);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.chip svg { width: 20px; height: 20px; }
.chip.honey { background: var(--honey-tint); }

/* Tıklanabilir kart (yardım kutuları) */
a.card { display: block; transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease; }
a.card:hover { border-color: var(--honey); box-shadow: var(--shadow-card); transform: translateY(-2px); }
a.card .go { margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--gold); }

/* ── İsim hikâyesi şeridi ─────────────────────────────────────────────── */

.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
@media (max-width: 800px) { .story { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

.frames {
  background: var(--cream-card); border: 1px solid var(--rule);
  border-radius: 18px; padding: 22px 20px;
}
.frames .lbl {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-muted); font-weight: 500; margin-bottom: 9px;
}
.frames .lbl span:last-child { color: var(--gold); }
.frames .ones { display: flex; gap: 3px; margin-bottom: 22px; }
.frames .ones i { flex: 1; height: 9px; border-radius: 2px; background: var(--ink); display: block; }
.frames .twos { display: flex; gap: 8px; }
.frames .twos i { flex: 1; height: 14px; border-radius: 3px; background: var(--honey); display: block; position: relative; }
.frames .twos i::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 1px; height: 60%; background: var(--ink); opacity: .18; transform: translate(-50%, -50%);
}

/* ── İçerik sayfaları (destek, hesap silme) ───────────────────────────── */

.doc-body section {
  background: var(--cream-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 24px 26px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-resting);
}
.doc-body section > h2 { font-size: 20px; margin-bottom: 14px; }
.doc-body ol, .doc-body ul { margin: 0; padding-inline-start: 20px; }
.doc-body li { margin-bottom: 9px; color: var(--ink-soft); }
.doc-body li:last-child { margin-bottom: 0; }
.doc-body li strong { font-weight: 600; color: var(--ink); }
.doc-body p + p { margin-top: 12px; }
.doc-body .note {
  margin-top: 14px; font-size: 13.5px; color: var(--ink-muted);
  border-inline-start: 3px solid var(--honey); padding-inline-start: 12px;
}
/* Dikkat kutusu — kırmızı YOK, gold + kelimeyle uyarır (CLAUDE.md). */
.doc-body .caution {
  background: #FFF8E6; border: 1px solid var(--gold); border-radius: var(--radius-field);
  padding: 16px 18px; margin-top: 16px;
}
.doc-body .caution .eyebrow { display: block; margin-bottom: 6px; }
.doc-body a:not(.btn) { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

.how-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; }
.how-row + .how-row { border-top: 1px solid var(--rule-soft); }
.how-row .chip { margin-bottom: 0; width: 34px; height: 34px; border-radius: 10px; }
.how-row .chip svg { width: 17px; height: 17px; }
.how-row h3 { font-size: 14.5px; }
.how-row p { font-size: 13.5px; color: var(--ink-muted); margin-top: 2px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--honey); color: var(--ink);
  font-family: inherit; font-size: 15px; font-weight: 600;
  border: 1.5px solid transparent; border-radius: var(--radius-field);
  padding: 12px 20px; cursor: pointer;
  transition: background-color .12s ease;
}
.btn:hover { background: var(--honey-pressed); }
.btn.ghost { background: transparent; border-color: var(--rule); }
.btn.ghost:hover { background: var(--cream-2); border-color: var(--honey); }

/* ── Form (hesap silme talebi) ────────────────────────────────────────────
   Alan grameri tasarım sisteminden: cream-card zemin, 1.5px rule kenarlık, radius 12-14,
   odakta honey kenarlık + yumuşak halka. Hata: gold kenarlık + #FFF8E6 zemin + 3px sol gold
   çizgi. ⛔ Kırmızı yok — hata bile. */

.form-row { display: grid; gap: 6px; margin-bottom: 14px; }
.form-row label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-muted); font-weight: 500;
}
.form-row .hint { font-size: 12.5px; color: var(--ink-faint); }

.field {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--cream-card);
  border: 1.5px solid var(--rule);
  border-left-width: 1.5px;
  border-radius: var(--radius-field);
  padding: 13px 15px;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.field::placeholder { color: var(--ink-faint); }
.field:focus { border-color: var(--honey); box-shadow: 0 0 0 4px rgba(242, 200, 64, .18); }
.field[aria-invalid="true"] {
  border-color: var(--gold);
  background: #FFF8E6;
  border-left: 3px solid var(--gold);
}
textarea.field { resize: vertical; min-height: 96px; line-height: 1.55; }

.form-error {
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gold);
}

.btn:disabled { background: var(--honey-tint); color: var(--ink-faint); cursor: not-allowed; }
.btn.ghost:disabled { background: transparent; border-color: var(--rule); color: var(--ink-faint); }

/* Gönderildi durumu — formun yerini alır. */
.sent { display: flex; gap: 14px; align-items: flex-start; }
.sent .tick {
  width: 38px; height: 38px; border-radius: 12px; flex: none;
  background: var(--honey-tint); display: flex; align-items: center; justify-content: center;
}
.sent h3 { margin-bottom: 6px; }
.sent p { font-size: 14px; line-height: 1.6; color: var(--ink-muted); }

/* ── Alt bilgi ────────────────────────────────────────────────────────── */

.site-foot {
  border-top: 1px solid var(--rule);
  background: var(--cream-card);
  padding: 40px 0 48px;
}
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.site-foot .left { flex: 1 1 260px; }
.site-foot .motto { margin-top: 12px; max-width: 38ch; font-size: 13.5px; color: var(--ink-muted); }
.site-foot nav { display: flex; flex-direction: column; gap: 9px; }
.site-foot nav a { font-size: 13.5px; color: var(--ink-muted); }
.site-foot nav a:hover { color: var(--ink); }
.site-foot .legal {
  width: 100%; margin-top: 12px; padding-top: 20px; border-top: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* ── Geçici bilgi şeridi (mağaza düğmeleri) ───────────────────────────────
   Tarayıcının kendi alert'i KULLANILMAZ — uygulamada da öyle: bildirim kendi
   dilimizde, makul sürede kendiliğinden kaybolur. */

.toast-host {
  position: fixed; inset-inline: 0; bottom: 24px; z-index: 60;
  display: flex; justify-content: center; padding: 0 16px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 12px;
  max-width: 420px;
  background: var(--cream-card);
  border: 1px solid var(--honey);
  border-radius: var(--radius-field);
  box-shadow: var(--shadow-float);
  padding: 13px 14px 13px 16px;
  font-size: 13.5px;
  animation: toast-in .22s ease-out;
}
.toast .x {
  background: transparent; border: 0; cursor: pointer; font-family: inherit;
  color: var(--ink-muted); font-size: 17px; line-height: 1; padding: 2px 4px;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* Dil değişene kadar yanıp sönmeyi önler (site.js <html>'e hazır işareti koyar). */
[hidden] { display: none !important; }

/* ── Paylaşılan liste sayfası (list.html · sunucu doldurur) ────────────────
   Menüde yok; yalnız paylaşılan bağlantıyla açılır. Afiş ızgarası uygulamayla aynı ölçüde:
   poster 96 · 2:3 · radius 8 · gap 12 · başlık 11.5/600 (CLAUDE.md sabit ölçüler). */
.share-page { padding: 48px 0 72px; }
.share-head { max-width: 640px; }
.share-head h1 { margin: 14px 0 10px; overflow-wrap: anywhere; }
.share-meta { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-muted); }
.share-desc { margin-top: 14px; color: var(--ink-soft); white-space: pre-line; }
.share-cta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.share-note { margin-top: 12px; max-width: 46ch; }
.share-grid {
  list-style: none; padding: 0; margin: 44px 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 20px 12px;
}
.share-grid li { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.share-poster { aspect-ratio: 2 / 3; border-radius: 8px; overflow: hidden; background: var(--cream-2); border: 1px solid var(--rule-soft); }
.share-poster img { width: 100%; height: 100%; object-fit: cover; }
.share-title {
  font-size: 11.5px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.share-rank { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--gold); }
.share-missing { padding: 24px 0 8px; }
/* Telefondan açana kendi mağazası: önce ve vurgulu (honey çerçeve). Diğeri altta kalır.
   data-platform site.js → markPlatform() tarafından konur; yoksa iki düğme eşit. */
html[data-platform="android"] .share-page .store[data-store="android"],
html[data-platform="ios"] .share-page .store[data-store="ios"] {
  order: -1; border-color: var(--honey); box-shadow: var(--shadow-card);
}
/* Profil / anime / inceleme paylaşım sayfaları (aynı şablon). */
.share-avatar {
  width: 88px; height: 88px; border-radius: 50%; overflow: hidden; margin: 16px 0 4px;
  background: var(--honey-soft); display: flex; align-items: center; justify-content: center;
}
.share-avatar img { width: 100%; height: 100%; object-fit: cover; }
.share-avatar span { font-size: 34px; font-weight: 600; color: var(--ink); }
.share-hero-poster { width: 120px; aspect-ratio: 2 / 3; border-radius: 8px; overflow: hidden; margin: 16px 0 4px; background: var(--cream-2); box-shadow: var(--shadow-card); }
.share-hero-poster img { width: 100%; height: 100%; object-fit: cover; }
.share-sub { font-size: 20px; margin: 44px 0 0; }
.share-sub + .share-grid { margin-top: 16px; }
.share-stars { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); }
.share-stars svg { fill: var(--honey); }
.share-review {
  margin: 36px 0 0; max-width: 640px; padding: 2px 0 2px 18px; border-inline-start: 3px solid var(--honey);
  font-size: 16px; line-height: 1.65; color: var(--ink-soft); white-space: pre-line; overflow-wrap: anywhere;
}
.share-review-hidden { color: var(--ink-muted); font-style: italic; }
.share-spoiler {
  display: inline-block; padding: 0 8px; border-radius: var(--radius-pill); background: var(--cream-2);
  border: 1px solid var(--rule); font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  color: var(--gold); vertical-align: 1px;
}
.share-about { max-width: 640px; margin-top: 14px; }

/* ── Yasal metinler (gizlilik.html, kosullar.html) ────────────────────────
   Uzun metin: tablo dar ekranda kendi içinde kayar (sayfa yatay kaymasın — 375px).
   Doldurulacak yerler honey-tint ile işaretli; kırmızı YOK. */
.legal-meta { font-size: 13px; color: var(--ink-muted); }
.legal-body section > h2 { font-size: 18px; }
.legal-body section p, .legal-body section li { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }
.legal-body .legal-draft { margin: 0 0 16px; }
.legal-body > p { margin: 0 0 16px; color: var(--ink-soft); }
.legal-body .table-scroll { overflow-x: auto; margin: 12px 0 4px; -webkit-overflow-scrolling: touch; }
.legal-body table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.legal-body th, .legal-body td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); color: var(--ink-soft); }
.legal-body th { font-weight: 600; color: var(--ink); }
mark.todo { background: var(--honey-tint); color: var(--ink); border-radius: 4px; padding: 0 4px; }
.only-en { display: none; }
html[lang="en"] .only-en { display: block; }
/* Telefonda tablo satırları alt alta: ilk hücre başlık gibi, gerisi altında. Yana kaydırmak
   yasal metinde sütunu gözden kaçırtır (saklama süresi görünmeden okunabiliyordu). */
@media (max-width: 560px) {
  .legal-body table, .legal-body tbody, .legal-body tr, .legal-body td { display: block; width: 100%; }
  .legal-body thead { display: none; }
  .legal-body tr { padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .legal-body td { border: 0; padding: 2px 0; }
  .legal-body td:first-child { font-weight: 600; color: var(--ink); padding-bottom: 4px; }
}