/* ═══════════════════════════════════════════════════════════════
   KITANDA — web design system (desktop-first)
   Grounded in the Kitanda mobile DS tokens. Dark flavor default.
   ═══════════════════════════════════════════════════════════════ */

/* Fontlar ve simge fontları yerelden (KVKK D4): Google Fonts'a istek gitmez.
   Bu satır her sayfayı ve sunucu sayfalarını (functions/bookPage.js) besler. */
@import url('fontlar/fontlar.css');

:root {
  /* Typefaces */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;

  /* Brand — vibrant violet with indigo↔fuchsia range */
  --purple:       #8B5CF6;
  --purple-lt:    #B794FF;
  --purple-dk:    #6D28D9;
  --indigo:       #6366F1;
  --fuchsia:      #E16BF0;
  --gold:         #D2AF62;
  --gold-bright:  #FFD700;

  /* Dark surfaces — deep violet-tinted (richer than flat black) */
  --bg:           #0B0912;
  --surface:      #181426A0;
  --surface-2:    #181426;
  --card:         #1E1733;
  --soft:         #1C1730;
  --border:       #2E2747;
  --border-2:     #41386180;

  /* Foreground */
  --fg1:          #FFFFFF;
  --fg2:          #B3ACC8;
  --fg3:          #7A7390;

  /* Semantic */
  --success: #4CAF50;
  --danger:  #FF6B6B;

  /* Gradients */
  --grad-brand:   linear-gradient(120deg, #6366F1 0%, #8B5CF6 48%, #D946EF 100%);
  --grad-hero:    linear-gradient(135deg, #1A1740 0%, #2A1C52 100%);
  --grad-premium: linear-gradient(140deg, #3A2270 0%, #1B1638 55%, #241040 100%);
  --grad-writer:  linear-gradient(135deg, #F59E0B 0%, #EA580C 100%);

  /* Radius */
  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 30px;

  /* Shadow */
  --shadow-surface:  0 10px 24px rgba(0,0,0,.30);
  --shadow-floating: 0 18px 44px rgba(0,0,0,.42);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 300ms;

  /* Layout */
  --maxw: 1240px;
  --gutter: 40px;
}

/* ── LIGHT FLAVOR (clean, lavender-tinted day mode) ──────────── */
:root[data-flavor="light"] {
  --purple:    #7C3AED;
  --purple-lt: #6D28D9;
  --purple-dk: #4C1D95;
  --bg:        #F6F5FC;
  --surface:   rgba(255,255,255,.7);
  --surface-2: #FFFFFF;
  --card:      #FFFFFF;
  --soft:      #F0EFF8;
  --border:    #E7E4F2;
  --border-2:  #D7D3E8;
  --fg1:       #15131F;
  --fg2:       #5C5870;
  --fg3:       #908BA4;
  --grad-hero:    linear-gradient(135deg, #F7F8FF 0%, #F2F6FF 100%);
  --grad-premium: linear-gradient(135deg, #F3F0FF 0%, #ECEEFF 100%);
  --shadow-surface:  0 10px 24px rgba(40,30,80,.08);
  --shadow-floating: 0 18px 44px rgba(40,30,80,.14);
}



/* ── Flavor component overrides ──────────────────────────────── */
:root[data-flavor="light"] .nav.scrolled { background: rgba(255,255,255,.84); box-shadow: 0 10px 30px rgba(40,30,80,.08); }
:root[data-flavor="light"] .nav-links a:hover { background: rgba(20,15,40,.05); }
:root[data-flavor="light"] .footer { background: #EFEDF7; }
:root[data-flavor="light"] .marquee-band { background: linear-gradient(180deg, #FFFFFF, #F6F5FC); }
:root[data-flavor="light"] .hero-wall { background-image: url('../assets/app_light.png'); opacity: .55; }
:root[data-flavor="light"] .hero-veil { background: linear-gradient(180deg, rgba(246,245,252,.15) 0%, rgba(246,245,252,.55) 60%, var(--bg) 100%); }
:root[data-flavor="light"] .aurora span { mix-blend-mode: multiply; opacity: .2; }
:root[data-flavor="light"] .hero[data-glow]::after { background: radial-gradient(380px 380px at var(--mx,50%) var(--my,30%), rgba(124,58,237,.10), transparent 70%); }
:root[data-flavor="light"] .particles { display: none; }
:root[data-flavor="light"] .pin { background: linear-gradient(180deg, var(--bg), #EFEDF7 12%, #EFEDF7 88%, var(--bg)); }

:root[data-flavor="light"] .btn-ghost:hover { background: rgba(124,58,237,.08); }
/* Ana sayfa kapanışındaki Kitanda QR kartı (yalnız masaüstü) */
.closer-qr { display: inline-flex; align-items: center; gap: 16px; margin-top: 34px; padding: 12px 22px 12px 12px;
  border-radius: 20px; background: var(--surface); border: 1px solid var(--border); text-align: left; }
.closer-qr img { width: 112px; height: 112px; border-radius: 12px; background: #fff; padding: 6px; display: block; }
.closer-qr b { display: block; font-size: 15px; font-weight: 800; color: var(--fg1); }
.closer-qr span { display: block; margin-top: 3px; font-size: 13px; color: var(--fg2); }
@media (max-width: 820px), (hover: none) { .closer-qr { display: none; } }
:root[data-flavor="light"] .closer .glowfield { background: radial-gradient(60% 60% at 50% 40%, rgba(124,58,237,.08), transparent 70%); }
:root[data-flavor="light"] .rd-bar { background: rgba(255,255,255,.84); }
* { box-sizing: border-box; }

/* `text-size-adjust` sitede HİÇ yoktu: mobil tarayıcılar kendi punto
   büyütmelerini uygulayıp düzeni kaydırabiliyordu. */
/* overscroll-behavior-y:none (2026-09-23, kullanıcı: "en alta geçince sonsuz
   iniyor, kendi kendine yukarı aşağı yapıyor"). Sayfa uzamıyordu (ölçüm:
   scrollHeight sabit 7908); iPhone'un lastik sekmesi en altta 290 px'e kadar
   taşıp birkaç kez sekiyordu ve açılan alan alt bilgiden açık renkli
   zemin olduğu için sonsuz boşluk gibi görünüyordu. Gerçek parmak testinde
   bu kuralla taşma sıfır. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior-y: none; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

.material-icons-round { font-family: 'Material Icons Round'; font-weight: normal; font-style: normal;
  line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block;
  white-space: nowrap; word-wrap: normal; direction: ltr;
  font-feature-settings: 'liga' 1; -webkit-font-feature-settings: 'liga';
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; }
/* İkon fontu yüklenene kadar ligatür kelimelerini (apple, close…) gösterme */
html:not(.fonts-ready) .material-icons-round { visibility: hidden; }

/* ── Ortak tanıtım (promo) bileşenleri — Studio + Keşfet ── */
.sp-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
.sp-aurora { position: absolute; inset: -40% -10% auto -10%; height: 620px; pointer-events: none; opacity: .55;
  background:
    radial-gradient(38% 50% at 22% 30%, rgba(124,58,237,.35), transparent 70%),
    radial-gradient(34% 46% at 78% 22%, rgba(231,196,99,.20), transparent 70%),
    radial-gradient(40% 50% at 60% 60%, rgba(159,103,255,.28), transparent 70%); filter: blur(8px); }
/* YATAY BOŞLUK (2026-09-10 arızası): burada `padding: 92px 0 70px` yazıyordu.
   Üç değerli kısayol sağ/solu 0 yapıp `.wrap`ın `0 var(--gutter)` boşluğunu
   siliyordu: Keşfet/Şiir/Studio tanıtım başlıkları ekranın sol kenarına
   yapışıyor, üstteki menüden 40px kayık duruyordu. Gutter korunmalı. */
.sp-hero .wrap { position: relative; padding: 92px var(--gutter) 70px; }
.sp-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.sp-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--purple-lt); background: rgba(124,58,237,.10); border: 1px solid rgba(124,58,237,.25);
  padding: 7px 13px; border-radius: 999px; }
.sp-title { font-family: var(--font-display); font-size: clamp(34px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -1.2px;
  font-weight: 800; margin: 22px 0 0; color: var(--fg1); }
.sp-title .grad { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sp-lead { font-size: 18px; line-height: 1.65; color: var(--fg2); margin: 22px 0 0; max-width: 540px; }
.sp-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.sp-trust { display: flex; gap: 26px; margin-top: 30px; flex-wrap: wrap; }
.sp-trust .n { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--fg1); }
.sp-trust .l { font-size: 13px; color: var(--fg3); margin-top: 2px; }

/* ── Yazar rozeti (ortak) ──────────────────────────────────────────────────
   Fotoğraf varsa yuvarlak fotoğraf, yoksa soyadının baş harfi + Türk
   alfabesindeki sırasından türeyen ton. Ana sayfa kapak şeridi ile Keşfet
   tanıtım mozaiği aynı rozeti kullanır; eskiden home.css'te duruyordu ama
   Keşfet o dosyayı yüklemiyor. Ton üreten tek kaynak: hazirla-vitrin.js
   rozet() ve kitanda.js window.KitandaRozet. */
.mq-ava { flex: 0 0 auto; width: 19px; height: 19px; border-radius: 999px; display: grid; place-items: center;
  font-size: 10px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #9F67FF, #6B3BD6); }
.mq-ava[data-foto] { background: none; }
.mq-ava img { width: 100%; height: 100%; border-radius: 999px; object-fit: cover; display: block; }
.mq-ava[data-tone="0"] { background: linear-gradient(135deg, #9F67FF, #6B3BD6); }
.mq-ava[data-tone="1"] { background: linear-gradient(135deg, #E0A6C8, #B5638C); }
.mq-ava[data-tone="2"] { background: linear-gradient(135deg, #5FD6BE, #3E9C86); }
.mq-ava[data-tone="3"] { background: linear-gradient(135deg, #7C9CFF, #4E5FC8); }
.mq-ava[data-tone="4"] { background: linear-gradient(135deg, #E6C982, #C99B3F); }
.mq-ava[data-tone="5"] { background: linear-gradient(135deg, #F0A868, #C2723A); }

/* ── Tanıtım hero mozaiği: GERÇEK kapaklar ────────────────────────────────
   Eskiden dört sabit gradyan döşeme vardı ("ROMAN / Kitaplığını oluştur").
   Katalog gerçekken tanıtımda uydurma kart durması anlamsızdı: artık vitrin
   ucundan gelen, yayında olan kitaplar görünür. Kapak+kitap adı+yazar adı+
   yazar fotoğrafı taşır ve karta basınca kitabın kendi sayfası açılır.
   HTML'e hazirla-vitrin.js gömer (ilk boyada hazır), kesfet-live.js saat
   başı dönen listeyle tazeler. */
.sp-mozaik { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sp-mozaik > *:nth-child(2), .sp-mozaik > *:nth-child(4) { margin-top: 24px; }
.sp-doseme { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border); background: var(--surface-2); color: inherit; text-decoration: none;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.sp-doseme:hover { transform: translateY(-4px); border-color: rgba(124,58,237,.45);
  box-shadow: 0 22px 48px -22px rgba(124,58,237,.55); }
.sp-doseme > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-doseme .tur { position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: 10px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; color: #fff;
  background: rgba(10,8,18,.58); border: 1px solid rgba(255,255,255,.16);
  padding: 4px 9px; border-radius: 999px; backdrop-filter: blur(8px); }
.sp-doseme .alt { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 30px 13px 12px;
  background: linear-gradient(to top, rgba(8,6,14,.95) 14%, rgba(8,6,14,.68) 58%, transparent); }
.sp-doseme .kitap { font-family: var(--font-display); font-size: 15.5px; line-height: 1.2; font-weight: 700; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-doseme .yazar { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.sp-doseme .yazar .ad { font-size: 11.5px; line-height: 1.2; color: rgba(255,255,255,.78);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-doseme .mq-ava { width: 22px; height: 22px; font-size: 11px; }
@media (max-width: 560px) {
  .sp-mozaik { gap: 11px; }
  .sp-mozaik > *:nth-child(2), .sp-mozaik > *:nth-child(4) { margin-top: 16px; }
  .sp-doseme .kitap { font-size: 14px; }
}
.sp-section { padding: 76px 0; }
.sp-section.alt { background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sp-h2 { font-family: var(--font-display); font-size: clamp(26px, 3vw, 38px); letter-spacing: -.6px; font-weight: 800;
  color: var(--fg1); text-align: center; margin: 0; }
.sp-sub { text-align: center; color: var(--fg2); font-size: 16.5px; margin: 14px auto 0; max-width: 560px; line-height: 1.6; }
.sp-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
.sp-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 26px 24px;
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.sp-card:hover { transform: translateY(-4px); border-color: rgba(124,58,237,.4); box-shadow: 0 18px 50px -20px rgba(124,58,237,.4); }
.sp-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--grad-brand);
  color: #fff; margin-bottom: 16px; }
.sp-ic .material-icons-round { font-size: 24px; }
.sp-card h3 { font-size: 18px; font-weight: 800; color: var(--fg1); margin: 0 0 8px; letter-spacing: -.2px; }
.sp-card p { font-size: 14.5px; line-height: 1.6; color: var(--fg2); margin: 0; }
.sp-closer { text-align: center; padding: 86px 0; }
.sp-closer .sp-h2 { margin-bottom: 16px; }
@media (max-width: 900px) {
  .sp-grid { grid-template-columns: 1fr; gap: 38px; }
  .sp-features { grid-template-columns: 1fr; }
  .sp-hero .wrap { padding: 64px var(--gutter) 50px; }
}

/* ── Canlı katalog kapısı ────────────────────────────────────────
   Kitap/şiir gösteren alanlar yalnız gerçek, yayında olan içerik gelince
   açılır. Gerekçe (2026-09-09): sayfalarda gömülü demo seçkiler vardı;
   panelde bir kitap gizlenince sitede durmaya devam ediyordu. Veri yoksa
   alan hiç çizilmez, ekranda yayından kalkmış içerik durmaz. */
[data-canli="bekliyor"] { display: none !important; }

/* ── Layout helpers ──────────────────────────────────────────── */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 92px 0; }
.section-tight { padding: 56px 0; }

/* ── Type ────────────────────────────────────────────────────── */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.04;
  margin: 0;
}
.eyebrow {
  font-size: 12.5px; font-weight: 700; letter-spacing: 2.4px;
  /* Bölüm üst başlığı: ne Premium göstergesi ne yıldız puanı, yani ölü
     Prestij altınıydı. 7 sayfada 15 kullanım, hepsi markaya döndü. */
  text-transform: uppercase; color: var(--purple-lt);
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
}
/* Çizgi metnin rengini İZLER: home.css .lada-eyebrow gibi kendi rengini
   dayatan yerlerde "altın metin + mor çizgi" çelişkisi doğmasın. */
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .6; }
.h-lg { font-size: 40px; font-weight: 800; letter-spacing: -1px; line-height: 1.06; margin: 0; }
.h-md { font-size: 28px; font-weight: 800; letter-spacing: -.6px; line-height: 1.1; margin: 0; }
.h-sm { font-size: 20px; font-weight: 800; letter-spacing: -.3px; margin: 0; }
.lead { font-size: 18px; line-height: 1.6; color: var(--fg2); margin: 0; }
.muted { color: var(--fg2); }
.fine { font-size: 13px; color: var(--fg3); }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; letter-spacing: -.1px;
  padding: 13px 22px; border-radius: 999px; border: 1px solid transparent;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  white-space: nowrap;
}
.btn .material-icons-round { font-size: 19px; }
/* background-origin/repeat (2026-09-23): .btn'in 1px saydam kenarının altında
   degrade TEKRAR ediyordu; sol kenarda degradenin sonundaki pembe 1-2px'lik
   bir çizgi olarak görünüyordu. */
.btn-primary { background: var(--grad-brand); background-size: 160% 160%; background-position: 0% 50%; background-origin: border-box; background-repeat: no-repeat; color: #fff;
  box-shadow: 0 10px 30px rgba(139,92,246,.42); transition: transform var(--dur) var(--ease), background-position .5s var(--ease), box-shadow var(--dur) var(--ease); }
.btn-primary:hover { background-position: 100% 50%; transform: translateY(-2px); box-shadow: 0 14px 38px rgba(217,70,239,.5); }
/* Üst bardaki düğmenin gölgesi barın altına taşıp sayfanın tepesinde mor bir
   leke bırakıyordu (2026-09-23): barda gölge barın içinde kalır. */
.nav .btn-primary { box-shadow: 0 4px 12px rgba(139,92,246,.26); }
.nav .btn-primary:hover { box-shadow: 0 6px 16px rgba(139,92,246,.34); }
.btn-ghost { background: transparent; color: var(--fg1); border-color: var(--border-2); }
.btn-ghost:hover { border-color: var(--purple-lt); background: rgba(139,92,246,.12); }
.btn-sm { padding: 9px 16px; font-size: 13.5px; }
.btn-lg { padding: 16px 30px; font-size: 16px; }
/* ── Chips / pills ───────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--fg2);
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  transition: all var(--dur) var(--ease); cursor: pointer;
}
.chip:hover { color: var(--fg1); border-color: var(--border-2); }
.chip.active { background: var(--purple); color: #fff; border-color: var(--purple); }

/* ── Badges ──────────────────────────────────────────────────── */
.badge-writer {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  color: #FFFBEB; background: var(--grad-writer);
  padding: 4px 9px; border-radius: 999px;
}
.badge-prestige {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  color: var(--gold); background: rgba(210,175,98,.12);
  border: 1px solid rgba(210,175,98,.34);
  padding: 5px 12px; border-radius: 999px;
}
/* Bu rozet Premium'u anlatıyor, altın KALIR; açık zeminde okunmuyordu. */
:root[data-flavor="light"] .badge-prestige { color: #6B4A15; background: rgba(210,175,98,.20); border-color: rgba(160,120,40,.42); }

/* ── Card ────────────────────────────────────────────────────── */
.card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-surface);
}

/* ── Scroll progress ───────────────────────────────────────────
   MENÜNÜN ALT KENARINDA (2026-09-23, kullanıcı: "üst ilerleme bozuk").
   Eskiden görünür alanın en üstüne (top:0) yapışıktı: menünün üst kenarına
   biniyor, iPhone'da durum çubuğunun hemen altında yarım bir çentik gibi
   kalıyordu (30 px kaydırınca soldan 22 px'lik kopuk çizgi). Şimdi
   kitanda.js onu menünün içine taşır; çizgi menünün alt kenarında durur ve
   yalnız menü cam hâline geçince (kaydırınca) görünür. Renk sitenin mor
   dili (altın yalnız Premium rozeti ve yıldız puanı). JS yoksa görünmez. */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60;
  background: linear-gradient(90deg, var(--purple), var(--purple-lt));
  transform: scaleX(0); transform-origin: 0 50%; opacity: 0;
  transition: transform 80ms linear, opacity .2s ease; will-change: transform;
  pointer-events: none;
}
.nav > .scroll-progress { position: absolute; top: auto; bottom: -1px; }
.nav.scrolled > .scroll-progress { opacity: 1; }

/* ── Top navigation ──────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
  background: rgba(10,10,15,0);
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              backdrop-filter var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.nav.scrolled {
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  background: rgba(10,10,15,.78);
  border-bottom-color: var(--border);
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.nav-inner { display: flex; align-items: center; gap: 32px; height: 74px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 19px; letter-spacing: -.4px; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.brand .mark { font-family: var(--font-display); font-weight: 700; letter-spacing: 1px; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav-links a {
  font-size: 14.5px; font-weight: 600; color: var(--fg2);
  padding: 9px 15px; border-radius: 999px; transition: all var(--dur) var(--ease);
}
.nav-links a:hover { color: var(--fg1); background: rgba(255,255,255,.05); }
.nav-links a.active { color: var(--fg1); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* ── Book cover (CSS-rendered placeholder) ───────────────────── */
.cover {
  position: relative; aspect-ratio: 2/3; border-radius: 10px; overflow: hidden;
  box-shadow: 0 16px 34px rgba(0,0,0,.46);
  border: 1px solid rgba(255,255,255,.06);
}
.cover img { width: 100%; height: 100%; object-fit: cover; }
.cover-css {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 20px 18px; height: 100%;
}
.cover-css .c-pub { font-size: 9px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; opacity: .7; }
.cover-css .c-title { font-family: var(--font-display); font-size: 25px; font-weight: 700; line-height: 1.05; letter-spacing: -.4px; }
.cover-css .c-author { font-size: 11px; font-weight: 600; letter-spacing: .5px; opacity: .85; text-transform: uppercase; }
.cover-css .c-rule { width: 30px; height: 2px; opacity: .55; margin: 9px 0; }

/* ── Footer ──────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--border); padding: 64px 0 40px; background: #08080c; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.footer h4 { font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--fg3); margin: 0 0 18px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer ul a { font-size: 14px; color: var(--fg2); transition: color var(--dur) var(--ease); }
.footer ul a:hover { color: var(--fg1); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 14px 18px; flex-wrap: wrap; margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--border); }
.footer-bottom .fine { flex: 1 1 auto; min-width: 0; }
.footer-stores { display: flex; gap: 10px; flex-wrap: wrap; }
/* Dar ekranda telif metni ve mağaza rozetleri alt alta, ortalı; yan yana sıkışıp taşmasın. */
@media (max-width: 640px) {
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; margin-top: 40px; }
  .footer-stores { justify-content: center; width: 100%; }
}

/* ── Star rating ─────────────────────────────────────────────── */
.stars { display: inline-flex; gap: 1px; color: var(--gold-bright); }
.stars .material-icons-round { font-size: 16px; }
/* Yıldız puanı altın KALIR (meşru rol) ama #FFD700 beyaz kart üstünde
   okunmuyordu. Belirteci topluca koyulaştırmak editör penceresindeki trafik
   ışığının ortasını bozardı, o yüzden kapsam bileşen düzeyinde. */
:root[data-flavor="light"] .stars,
:root[data-flavor="light"] .book .b-foot .material-icons-round,
:root[data-flavor="light"] .d-stat .v .material-icons-round { color: #A16207; }

/* ── Reveal-on-scroll ────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
.reveal.left  { transform: translateX(-34px); }
.reveal.right { transform: translateX(34px); }
.reveal.scale { transform: scale(.94); }
.reveal.blur  { filter: blur(8px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
.reveal.blur.in { filter: none; }

/* ── Keyframes ───────────────────────────────────────────────── */
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes floaty-2 { 0%,100% { transform: translateY(0) rotate(var(--rot,0deg)); } 50% { transform: translateY(-10px) rotate(var(--rot,0deg)); } }
@keyframes drift { 0% { transform: translate(0,0); } 50% { transform: translate(18px,-22px); } 100% { transform: translate(0,0); } }
@keyframes shimmer { 0% { background-position: -180% 0; } 100% { background-position: 180% 0; } }
@keyframes pulse-glow { 0%,100% { opacity:.5; } 50% { opacity:.85; } }
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes rise-word { from { opacity:0; transform: translateY(110%) rotate(2deg); } to { opacity:1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  html { scroll-behavior: auto; }
  [data-marquee] *, .floaty, .floaty-2, .drift { animation: none !important; }
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 920px) {
  :root { --gutter: 22px; }
  .nav-links { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .section { padding: 64px 0; }
}

/* ── Theme switcher (segmented, injected into nav) ───────────── */
.theme-switch {
  position: relative; display: inline-flex; align-items: center; gap: 2px;
  padding: 4px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border); box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.theme-switch .glider {
  position: absolute; top: 4px; left: 4px; width: 34px; height: 34px; border-radius: 999px;
  background: var(--purple); transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
  z-index: 0; box-shadow: 0 4px 14px rgba(124,58,237,.4);
}.theme-switch[data-active="light"] .glider { transform: translateX(0); }
.theme-switch[data-active="dark"] .glider { transform: translateX(36px); }.theme-switch button {
  position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 999px;
  background: none; border: none; display: grid; place-items: center; cursor: pointer;
  color: var(--fg2); transition: color var(--dur) var(--ease);
}
.theme-switch button .material-icons-round { font-size: 18px; }
.theme-switch button[aria-pressed="true"] { color: #fff; }
.theme-switch[data-active="light"] button[data-flavor="light"] { color: #fff; }@media (max-width: 520px) { .theme-switch { display: none; } }

/* ── Footer social (brand icons) ─────────────────────────────── */
.social-row { display: flex; gap: 10px; margin-top: 20px; }
.soc { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--fg2); transition: all var(--dur) var(--ease); }
.soc:hover { color: var(--fg1); border-color: var(--purple-lt); transform: translateY(-2px); }.soc i { font-size: 17px; }

/* ── Liquid-glass back button (Apple-style) ──────────────────── */
.back {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--fg1);
  padding: 9px 16px 9px 12px; border-radius: 999px; margin-bottom: 16px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 6px 20px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.14);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.back:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.24); transform: translateY(-1px); }
.back .material-icons-round { font-size: 18px; }
:root[data-flavor="light"] .back {
  background: rgba(20,15,40,.05); border-color: rgba(20,15,40,.1);
  box-shadow: 0 6px 18px rgba(40,30,80,.1), inset 0 1px 0 rgba(255,255,255,.7);
}
:root[data-flavor="light"] .back:hover { background: rgba(20,15,40,.09); }

.lock-wrap { position: relative; }
.lock-overlay {
  position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 18px;
  background: linear-gradient(180deg, rgba(7,7,8,.55), rgba(7,7,8,.86));
  backdrop-filter: blur(3px); border-radius: inherit; color: #fff;
}
.lock-overlay .material-icons-round { color: var(--gold); font-size: 26px; }
.lock-overlay .lk-t { font-weight: 700; font-size: 13.5px; }
.lock-overlay .lk-s { font-size: 12px; color: rgba(255,255,255,.7); max-width: 200px; line-height: 1.4; }.lock-wrap .lock-blur { filter: blur(2px) saturate(.7); opacity: .6; transition: filter var(--dur), opacity var(--dur); }
/* ── Auth modal (injected by JS) ─────────────────────────────── */
/* KATMAN SIRASI (2026-09-10 arızası): üyelere özel sayfa kapısı
   (member-gate.js) z-index 9000 ile tüm sayfayı örtüyor. Giriş penceresi 100'de
   olduğu için kitaplik.html'de "Ücretsiz üye ol"a basınca pencere AÇILIYOR ama
   kapının ARKASINDA kalıyordu: kullanıcı hiçbir şey olmadığını görüyordu.
   Pencere en üstte durmalı, çünkü kapının istediği eylem tam olarak bu. */
.auth-ov {
  position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(6,5,12,.66); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease);
}
.auth-ov.open { opacity: 1; pointer-events: auto; }
.auth-modal {
  width: 100%; max-width: 432px; background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: 26px; box-shadow: 0 40px 90px rgba(0,0,0,.6); padding: 34px 34px 28px;
  position: relative; transform: translateY(14px) scale(.98); transition: transform .35s var(--ease);
  max-height: calc(100vh - 48px); overflow-y: auto;
}
.auth-ov.open .auth-modal { transform: none; }
.auth-modal .x { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 999px;
  background: none; border: none; color: var(--fg2); display: grid; place-items: center; cursor: pointer; transition: all var(--dur) var(--ease); }
.auth-modal .x:hover { background: rgba(255,255,255,.06); color: var(--fg1); }
.auth-modal .a-brand { display: flex; align-items: center; gap: 11px; justify-content: center; margin-bottom: 18px; }
.auth-modal .a-brand img { width: 40px; height: 40px; border-radius: 11px; }
.auth-modal .a-brand .mark { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: 1px; }
.auth-modal h2 { font-family: var(--font-display); font-size: 27px; letter-spacing: -.4px; text-align: center; margin: 0; }
.auth-modal .a-sub { text-align: center; color: var(--fg2); font-size: 14px; margin: 8px 0 26px; line-height: 1.5; }
.a-social { display: flex; flex-direction: column; gap: 10px; }
.a-social button { display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%;
  font-size: 14.5px; font-weight: 700; padding: 13px; border-radius: 14px; cursor: pointer; transition: all var(--dur) var(--ease); border: 1px solid var(--border-2); }
.a-social .g { background: #fff; color: #1f1f1f; border-color: #fff; }
.a-social .g:hover { background: #f0f0f0; transform: translateY(-1px); }
.a-social .ap { background: #111; color: #fff; border-color: #2a2a2a; }
.a-social .ap:hover { background: #000; transform: translateY(-1px); }
:root[data-flavor="light"] .a-social .ap { background: #111; color: #fff; }
.a-social .gicon { font-weight: 800; font-size: 17px; font-family: Arial, sans-serif;
  background: conic-gradient(from -45deg, #EA4335 0 25%, #FBBC05 0 50%, #34A853 0 75%, #4285F4 0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.a-social .ap .material-icons-round { font-size: 19px; }
.a-or { display: flex; align-items: center; gap: 14px; margin: 20px 0; color: var(--fg3); font-size: 12px; font-weight: 600; }
.a-or::before, .a-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.a-field { margin-bottom: 12px; }
.a-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--fg2); margin-bottom: 7px; }
.a-input { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 13px; padding: 12px 15px; transition: border-color var(--dur) var(--ease); }
.a-input:focus-within { border-color: var(--purple); }
.a-input .material-icons-round { font-size: 19px; color: var(--fg3); }
.a-input input { flex: 1; background: none; border: none; outline: none; color: var(--fg1); font-family: inherit; font-size: 14.5px; }
.a-input input::placeholder { color: var(--fg3); }
.auth-modal .signup-only { display: none; }
.auth-modal.mode-signup .signup-only { display: revert; }
.auth-modal.mode-signup .login-only { display: none; }
.a-submit { width: 100%; justify-content: center; margin-top: 6px; }
.a-foot { text-align: center; font-size: 13.5px; color: var(--fg2); margin-top: 20px; }
.a-foot a { color: var(--purple-lt); font-weight: 700; cursor: pointer; }
.a-terms { text-align: center; font-size: 11.5px; color: var(--fg3); margin-top: 14px; line-height: 1.5; }
.a-terms a { color: var(--fg2); text-decoration: underline; }
.a-err { background: rgba(255,107,107,.12); border: 1px solid rgba(255,107,107,.3); color: #ff9a9a;
  font-size: 12.5px; padding: 9px 13px; border-radius: 11px; margin-bottom: 12px; display: none; }
.a-err.show { display: block; }

/* logged-in nav chip + menu */
.user-chip { display: inline-flex; align-items: center; gap: 9px; padding: 5px 7px 5px 12px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); cursor: pointer; transition: border-color var(--dur) var(--ease);
  color: var(--fg1); font-family: inherit; }
.user-chip .u-name { color: var(--fg1); }
.user-menu .u-head .n { color: var(--fg1); }
.user-chip:hover { border-color: var(--border-2); }
.user-chip .u-name { font-size: 13.5px; font-weight: 700; }
.user-chip .u-ava { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center;
  font-weight: 800; font-size: 12.5px; color: #fff; background: var(--grad-brand); }.user-chip .material-icons-round { font-size: 18px; color: var(--fg3); }
.user-wrap { position: relative; }
.user-menu { position: absolute; top: calc(100% + 10px); right: 0; width: 220px; background: var(--surface-2);
  border: 1px solid var(--border-2); border-radius: 16px; box-shadow: var(--shadow-floating); padding: 8px;
  opacity: 0; transform: translateY(-8px); pointer-events: none; transition: all .22s var(--ease); z-index: 60; }
.user-menu.open { opacity: 1; transform: none; pointer-events: auto; }
.user-menu .u-head { padding: 12px 12px 13px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.user-menu .u-head .n { font-weight: 700; font-size: 14px; }
.user-menu .u-head .e { font-size: 12px; color: var(--fg3); margin-top: 2px; }
.user-menu a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; font-size: 14px; color: var(--fg2); transition: all var(--dur) var(--ease); cursor: pointer; }
.user-menu a:hover { background: rgba(255,255,255,.05); color: var(--fg1); }
:root[data-flavor="light"] .user-menu a:hover { background: rgba(20,15,40,.05); }
.user-menu a .material-icons-round { font-size: 19px; }
.user-menu a.danger { color: var(--danger); }

/* toast */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); z-index: 9600;
  background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 999px; padding: 12px 20px;
  box-shadow: var(--shadow-floating); font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 9px;
  opacity: 0; pointer-events: none; transition: all .35s var(--ease); }
.toast.show { opacity: 1; transform: translateX(-50%); }
.toast .material-icons-round { color: var(--success); font-size: 19px; }
/* Lada'nın kapanış cümlesi: durum bildirimi değil, yazarın yanına bırakılan
   bir not. Hap biçimi uzun cümlede ekranı boydan boya kaplıyor. */
.toast.mot { border-radius: 16px; max-width: min(520px, calc(100vw - 40px)); padding: 13px 18px;
  font-size: 13.5px; font-weight: 500; line-height: 1.55; align-items: flex-start; }
.toast.mot .material-icons-round { color: var(--purple); font-size: 17px; margin-top: 1px; flex: 0 0 auto; }/* Metne dokunan bildirimlerin geri alma düğmesi. */
.toast .toast-act { margin-left: 10px; flex: 0 0 auto; border: 0; cursor: pointer;
  border-radius: 999px; padding: 6px 13px; font: inherit; font-size: 12.5px; font-weight: 700;
  background: var(--purple); color: #fff; }
/* ── Mobil menü: hamburger + Kitanda cam çekmece (kitanda.js initMobileNav) ── */
.nav-burger { display: none; width: 42px; height: 42px; flex: none; border-radius: 13px; border: 1px solid var(--border); background: var(--surface-2); color: var(--fg1); cursor: pointer; place-items: center; padding: 0; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.nav-burger .material-icons-round { font-size: 24px; }
.nav-burger[aria-expanded="true"] { border-color: var(--purple-lt); }
html.nav-open { overflow: hidden; }
.nav-drawer { position: fixed; inset: 0; z-index: 49; display: none; }
.nav-drawer.open { display: block; }
.nav-drawer-bg { position: absolute; inset: 0; background: rgba(6,5,12,.52); opacity: 0; transition: opacity .26s var(--ease); }
.nav-drawer-panel {
  position: absolute; left: 12px; right: 12px; top: var(--drawer-top, 70px);
  max-height: calc(100svh - var(--drawer-top, 70px) - 14px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 10px; border-radius: 28px; border: 1px solid rgba(255,255,255,.1);
  background: rgba(23,23,42,.86); backdrop-filter: blur(34px) saturate(1.3); -webkit-backdrop-filter: blur(34px) saturate(1.3);
  box-shadow: 0 34px 80px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(-14px) scale(.98); transform-origin: top center;
  transition: opacity .26s var(--ease), transform .3s cubic-bezier(.2,.8,.2,1);
}
.nav-drawer.in .nav-drawer-bg { opacity: 1; }
.nav-drawer.in .nav-drawer-panel { opacity: 1; transform: none; }
.drawer-links { display: flex; flex-direction: column; gap: 2px; }
.drawer-links a, .drawer-account a { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 18px; color: var(--fg1); font-size: 16px; font-weight: 700; transition: background var(--dur) var(--ease); }
.drawer-links a .material-icons-round, .drawer-account a .material-icons-round { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 13px; font-size: 22px; color: var(--purple-lt); background: rgba(139,92,246,.13); }
.drawer-links a:hover, .drawer-account a:hover { background: rgba(255,255,255,.05); }
.drawer-links a.active { background: rgba(139,92,246,.17); }
.drawer-links a.active::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--purple-lt); box-shadow: 0 0 0 5px rgba(139,92,246,.16); }
.drawer-account { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.drawer-account.is-guest { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 2px 4px; }
.drawer-account.is-guest .btn { justify-content: center; }
.drawer-user { display: flex; align-items: center; gap: 12px; padding: 8px 12px 12px; }
.drawer-user .u-ava { width: 40px; height: 40px; flex: none; border-radius: 999px; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--purple), #a855f7); }.drawer-user-text { display: flex; flex-direction: column; min-width: 0; }
.drawer-user-text b { font-size: 15px; color: var(--fg1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-user-text small { font-size: 12px; color: var(--fg3); }
.drawer-account a.danger { color: #f87171; }
.drawer-account a.danger .material-icons-round { color: #f87171; background: rgba(239,68,68,.12); }
.drawer-foot { display: none; align-items: center; justify-content: space-between; margin-top: 8px; padding: 12px 12px 6px; border-top: 1px solid var(--border); color: var(--fg3); font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.nav-drawer .theme-switch { display: inline-flex; }
:root[data-flavor="light"] .nav-drawer-bg { background: rgba(30,22,60,.3); }
:root[data-flavor="light"] .nav-drawer-panel { background: rgba(252,251,255,.9); border-color: rgba(20,15,40,.08); box-shadow: 0 34px 80px rgba(40,30,80,.22); }
:root[data-flavor="light"] .drawer-links a:hover, :root[data-flavor="light"] .drawer-account a:hover { background: rgba(20,15,40,.05); }
@media (max-width: 920px) { .nav-burger { display: grid; } }
@media (max-width: 640px) {
  .nav-inner { height: 62px; gap: 14px; }
  .brand { font-size: 17px; }
  .brand img { width: 30px; height: 30px; }
  .nav-right { gap: 8px; }
  .nav-right > [data-auth="login"] { display: none; }   /* Giriş yap çekmecede; üst barda yalnız üye ol */
  .nav-right .btn-sm { padding: 8px 13px; font-size: 13px; }
  .user-chip { padding: 4px 6px; }
  .user-chip .u-name, .user-chip > .material-icons-round { display: none; }
}
@media (max-width: 520px) { .drawer-foot { display: flex; } }

/* ═══════════════════════════════════════════════════════════════
   MOBİL TABAN (2026-09-22)
   Telefonda siteyi zorlaştıran üç ortak sorun tek yerde çözülüyor:
   dokunma hedefleri 44px'in altındaydı, iki başlık puntosu sabitti ve
   iOS giriş alanlarında sayfayı zorla yakınlaştırıyordu. Kırılım 920px:
   hamburger menü de burada devreye giriyor, ikisi aynı eşikte kalsın.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 920px) {
  /* ── Dokunma hedefleri: ölçülen hâl footer bağlantılarında 17px'ti ── */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 44px; padding: 10px 16px; }
  .chip { min-height: 44px; }
  /* ZORUNLU İSTİSNA: `.chip` ve `.btn` adları tanitim-demo.css'te de var ve
     orası TELEFON MAKETİNİN İÇİ — 440×956 sabit mantıksal tasarım. Yukarıdaki
     satırlar maketin içine sızarsa demo düzeni bozulur. */
  .iphone-screen .chip, .iphone-screen .btn { min-height: 0; }

  .nav-burger { width: 44px; height: 44px; }
  .soc { width: 44px; height: 44px; }
  .back { min-height: 44px; }
  .brand { min-height: 44px; }
  .footer ul { gap: 2px; }
  .footer ul a { display: inline-flex; align-items: center; min-height: 44px; }
  .user-menu a { padding: 12px; min-height: 44px; }
  .user-chip { min-height: 44px; }
  .auth-modal .x { width: 44px; height: 44px; }

  /* ── Başlık puntoları: .h-lg 40px ve .h-md 28px sabitti; aynı dosyadaki
     .sp-title / .sp-h2 zaten clamp ile ölçekleniyor. clamp üst sınırı
     masaüstü değerine eşit, yani 920px üstünde hiçbir şey değişmiyor. ── */
  .h-lg { font-size: clamp(27px, 7.4vw, 40px); }
  .h-md { font-size: clamp(22px, 6vw, 28px); }

  /* ── iOS SAFARI ZOOM TUZAĞI: odaklanan alanın puntosu 16px'in ALTINDAYSA
     sayfa otomatik yakınlaşır ve odak kalkınca GERİ ÇIKMAZ. Kullanıcı daha
     giriş yapmadan yakınlaşmış bir sayfada kalıyordu. ── */
  .a-input input { font-size: 16px; }

  /* ── Yatay raylar: ray sonunda parmak devam edince tarayıcının "geri" /
     "yenile" jesti tetikleniyordu. ── */
  .show-rail, .st-rail, .tk-rail {
    overscroll-behavior-x: contain;
    scroll-padding-left: var(--gutter);
  }

  /* ── Kapak üstü tür rozeti 10px'ti, fotoğraf dokusuyla yarışıp okunmuyordu ── */
  .sp-doseme .tur { font-size: 11px; padding: 5px 10px; }

  /* ── Yatay giriş animasyonu: henüz açılmamış bloklar 34px sağa kayık
     durup belgeyi genişletiyordu. Telefonda hareket dikey olsun. ── */
  .reveal.left, .reveal.right { transform: translateY(26px); }
}