/* Etika — tanıtım ve yasal sayfa stilleri.
 *
 * Token'lar uygulamanın kendi paletidir (lib/core/theme/app_colors.dart):
 * aynı mor, aynı yüzey renkleri, aynı gövde yazı tipi (DM Sans). Site
 * uygulamanın devamı gibi görünsün diye hex değerler oradan birebir
 * kopyalanmıştır — uygulamada bir token değişirse buradaki eşi de değişmeli.
 *
 * Başlık da gövde de tek yazı tipidir: uygulamanın DM Sans'ı. Dosyalar
 * uygulamanın kendi TTF'lerinden üretilen WOFF2'lerdir
 * (`scripts/build_text_font.py`, `/assets/fonts/`) — Google Fonts'taki DM Sans
 * optik boyut eksenini büyük başlıkta kaydırdığı için uygulamada görünmeyen
 * harf biçimleri çiziyordu. Dört ağırlık var (400/500/600/700); başka bir
 * ağırlık yazılırsa tarayıcı en yakınını seçer ya da kalını taklit eder.
 * İtalik yalnızca 400'dür: `<em>` vurguları düz metin kalınlığında.
 *
 * Koyu tema `prefers-color-scheme` ile gelir; uygulamada olduğu gibi yalnızca
 * yüzey/metin token'ları değişir, marka moru sabit kalır.
 */

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/DMSans-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/DMSans-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/DMSans-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/DMSans-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/DMSans-Italic.woff2") format("woff2");
}

:root {
  color-scheme: light dark;

  /* Marka — iki temada da aynı (AppColors) */
  --purple: #5b4fc7; /* brandPurpleFill — beyaz metnin zemini */
  --purple-soft: #8b7cf0; /* brandPurple — yumuşak vurgu */
  --purple-deep: #6a3de8; /* splashBackground */
  --green: #6baf8d; /* primary */
  --warm: #e8956a; /* secondary */

  /* Metin olarak kullanılan mor. Koyu temada --purple zeminde 3:1'in altında
     kalıyor; başlık vurgusu ve rakamlar bu token'dan okunur. */
  --accent-ink: #5b4fc7;

  /* Yüzey ve metin — AppColors.lightPalette */
  --ink: #1a2e2a;
  --muted: #5c6b66;
  --paper: #f7f8fa;
  --card: #ffffff;
  --input: #f2f2f7;
  --line: #e8edeb;
  --line-strong: #d1d9d6;
  --mist-purple: #ede9fe;
  --mist-green: #d8f0e4;
  --mist-warm: #ffe8dc;

  /* Skor bantları — score_band_style.dart (açık tema).
     Sıra renkte de görünür: zümrüt → limon yeşili → turuncu → kırmızı.
     `--band-good`/`--band-fair` eski adlardır, yalnızca geriye uyum için
     duruyor; yeni kural bant adını (excellent/good/poor/bad) kullanır. */
  --band-excellent: #059669;
  --band-excellent-bg: #d1fae5;
  --band-good-lime: #4d7c0f;
  --band-good-lime-bg: #ecfccb;
  --band-poor: #ea580c;
  --band-poor-bg: #ffedd5;
  --band-bad: #dc2626;
  --band-bad-bg: #fecaca;
  --band-good: #059669;
  --band-good-bg: #d1fae5;
  --band-fair: #d97706;
  --band-fair-bg: #fef3c7;

  --radius: 20px;
  --radius-sm: 14px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --shadow: 0 18px 48px rgba(26, 46, 42, 0.08);
  --shadow-sm: 0 2px 8px rgba(26, 46, 42, 0.05);
  --shadow-float: 0 18px 40px -12px rgba(26, 46, 42, 0.22);
  --shadow-phone: 0 50px 90px -30px rgba(40, 32, 110, 0.45);
  --font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
    sans-serif;
  --nav-bg: rgba(255, 255, 255, 0.82);

  /* Hero'nun arka plan ışıkları */
  --glow-purple: rgba(139, 124, 240, 0.26);
  --glow-green: rgba(107, 175, 141, 0.22);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* AppColors.darkPalette */
    --ink: #f0f3f1;
    --muted: #9aa59f;
    --paper: #101412;
    --card: #1c211f;
    --input: #262c2a;
    --line: #2f3835;
    --line-strong: #3d4743;
    --mist-purple: #2c2748;
    --mist-green: #1a3329;
    --mist-warm: #3a2a22;

    --accent-ink: #b3a8fa;

    --band-excellent: #34d399;
    --band-excellent-bg: #0f2e22;
    --band-good-lime: #a3e635;
    --band-good-lime-bg: #1e2e10;
    --band-poor: #fb923c;
    --band-poor-bg: #3a2410;
    --band-bad: #f87171;
    --band-bad-bg: #3a1515;
    --band-good: #34d399;
    --band-good-bg: #0f2e22;
    --band-fair: #fbbf24;
    --band-fair-bg: #3a2e0f;

    --shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-float: 0 18px 40px -12px rgba(0, 0, 0, 0.6);
    --shadow-phone: 0 50px 90px -30px rgba(0, 0, 0, 0.8);
    --nav-bg: rgba(16, 20, 18, 0.82);

    --glow-purple: rgba(139, 124, 240, 0.2);
    --glow-green: rgba(107, 175, 141, 0.12);
  }
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Hero'daki yüzen kartlar dar ekranda kenara dayanıyor; gövde yatayda
     hiçbir zaman kaymamalı. */
  overflow-x: clip;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--accent-ink);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--purple-soft);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: min(1140px, calc(100% - 40px));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 16px;
  top: 16px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

/* —— Nav —— */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-family: var(--font);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.03em;
}

.brand:hover {
  text-decoration: none;
}

.brand img {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

.nav-links {
  display: none;
  gap: 28px;
  color: var(--muted);
  font-weight: 500;
  font-size: 0.94rem;
}

.nav-links a {
  color: inherit;
}

.nav-links a:hover {
  color: var(--ink);
  text-decoration: none;
}

/* —— Dil değiştirici ——
 *
 * Sitenin iki dili var ama geçiş bağlantısı yalnızca footer'da (ve yasal
 * sayfalarda `doc-lang` rozetinde) duruyordu; sayfanın en altında kaldığı için
 * kimse görmüyordu. Bu yüzden geçiş başlığa, indirme düğmesinin yanına alındı
 * ve `nav-links`in aksine dar ekranda da **gizlenmez** — dil seçimi menü
 * maddesi değil, sayfanın okunabilirlik koşuludur.
 *
 * Bayrak değil küre kullanılıyor: bayrak ülkeyi anlatır, dili değil (İngilizce
 * okuyan herkes İngiliz değildir). Etiket hedef dilin kodudur — düğme "şu an
 * hangi dildesin" değil "tıklayınca ne olacak" der.
 */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Dil geçişi bir düğme değil, İndir'in yanındaki küçük bir işarettir.
   Kenarlıklı hap biçimindeyken başlıkta eşit ağırlıkta iki düğme duruyordu ve
   sayfanın asıl eylemi ikisinden biri olup çıkıyordu. Çerçeve kalktı, ölçü
   küçüldü; iki harflik kod kaldı, çünkü küre tek başına "hangi dile"
   sorusunu yanıtlamıyor — iki dilli bir sitede yön belirsiz kalamaz. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.78rem;
  line-height: 1;
  white-space: nowrap;
  transition: color 0.18s ease, background 0.18s ease;
}

.lang-switch svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.lang-switch:hover {
  color: var(--ink);
  background: var(--input);
  text-decoration: none;
}

.lang-switch:focus-visible {
  outline: 2px solid var(--purple-soft);
  outline-offset: 2px;
}

/* —— Düğmeler —— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.94rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease,
    transform 0.18s ease;
}

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  background: var(--purple);
  color: #ffffff;
  box-shadow: 0 6px 18px -6px rgba(91, 79, 199, 0.6);
}

.btn-primary:hover {
  background: #4c41ad;
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}

.btn-ghost:hover {
  border-color: var(--ink);
}

.btn-lg {
  padding: 14px 26px;
  font-size: 1rem;
}

/* Koyu zemindeki (gizlilik bandı, kapanış kartı) ikincil düğme. */
.btn-light {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.28);
}

.btn-light:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.6);
}

/* Mağaza rozetleri */
.store-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--paper);
  min-width: 172px;
  box-shadow: 0 10px 24px -12px rgba(26, 46, 42, 0.55);
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.store-badge:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.store-badge small {
  display: block;
  font-size: 0.68rem;
  opacity: 0.72;
  font-weight: 400;
}

.store-badge strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.store-badge svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* Cihaza göre mağaza seçimi.
   Android'de App Store bağlantısı gizlenir: o telefonda tıklanabilir ama
   kurulamaz bir mağazadır. Apple cihazda ve masaüstünde İKİSİ de durur —
   masaüstünde hangi telefonun kullanıldığı bilinmiyor, iPhone'da ise
   kullanıcı bağlantıyı bir Android cihaza gönderiyor olabilir.
   Gizleme JS ile değil CSS ile yapılır; işaret <html data-platform>
   üzerindedir ve head'deki script ilk boyamadan önce koyar. JS kapalıysa
   ikisi de görünür: eksik bağlantı yanlış bağlantıdan iyidir. */
html[data-platform="android"] [data-store="ios"] {
  display: none;
}

/* Kapanış bölümünde App Store birincil, Google Play ikincil tondaydı. Tek
   başına kalan düğme sayfanın tek eylemidir, ikincil kalamaz. */
html[data-platform="android"] .cta-row .btn[data-store="android"] {
  background: var(--purple);
  color: #ffffff;
  border-color: transparent;
}

html[data-platform="android"] .cta-row .btn[data-store="android"]:hover {
  background: #4c41ad;
}

/* —— Tipografi ölçeği —— */
h1,
h2,
h3,
h4 {
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0;
  /* Metin değişince son satırda tek kelime kalmasın ("understand the / label"). */
  text-wrap: balance;
}

.eyebrow {
  display: inline-block;
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* Etika+ etiketi — ana sayfada başlığın yanında, destek sayfasında tabloda. */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--mist-purple);
  color: var(--accent-ink);
  font-family: var(--font);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0;
  vertical-align: middle;
  white-space: nowrap;
}

/* ======================================================================
 * Ana sayfa
 *
 * Bölümler bilerek farklı düzendedir: hero (iki kolon), sayı şeridi (tam
 * genişlik), adımlar (yan yana başlık + liste), ekranlar (sırayla yer
 * değiştiren satırlar), planlar (iki kart), puanlama (ölçek + halka),
 * gizlilik (koyu bant), kapanış (renkli kart). Eski sürümde her bölüm
 * "ortalanmış başlık + eşit kart ızgarası"ydı ve sayfanın ritmi yoktu.
 * ==================================================================== */

/* —— Hero —— */
.hero {
  position: relative;
  overflow: hidden;
  padding: 40px 0 56px;
  background: var(--paper);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(560px 420px at 82% 28%, var(--glow-purple), transparent 70%),
    radial-gradient(520px 380px at 8% 92%, var(--glow-green), transparent 70%);
}

.hero-grid {
  position: relative;
  display: grid;
  gap: 40px;
  align-items: center;
}

.hero-copy {
  text-align: center;
}

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  margin-bottom: 22px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.eyebrow-pill i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--band-excellent);
  box-shadow: 0 0 0 4px var(--band-excellent-bg);
}

.hero h1 {
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  margin-bottom: 22px;
}

.hero h1 em {
  /* Kendi bloğu olunca dengeleme yalnızca vurgulu satırda çalışır. */
  display: inline-block;
  font-style: normal;
  color: var(--accent-ink);
}

.hero-lead {
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  color: var(--muted);
  max-width: 34rem;
  margin: 0 auto 28px;
}

.hero-lead strong {
  color: var(--ink);
  font-weight: 600;
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
  font-weight: 500;
}

.trust-row li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.trust-row svg {
  width: 16px;
  height: 16px;
  color: var(--band-excellent);
  flex: none;
}

.hero-note {
  color: var(--muted);
  font-size: 0.86rem;
  margin: 14px 0 0;
}

/* Hero görseli: telefon + iki yüzen kart. Kartlar ekran görüntüsündeki örnek
   ürünün (Meyveli Yoğurt, 65/100) değerlerini tekrarlar — görselin söylediği
   şeyi büyütür, yeni bir veri uydurmaz. Ekran okuyucu için süstür: telefonun
   alt metni aynı bilgiyi taşır. */
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
  padding: 12px 0;
}

.hero .phone {
  width: min(310px, 72vw);
}

.float-card {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 15px 11px 11px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow-float);
  font-size: 0.8rem;
  line-height: 1.3;
  animation: float 7s ease-in-out infinite;
}

.float-card strong {
  display: block;
  font-size: 0.92rem;
  color: var(--ink);
}

.float-card small {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
}

.float-score {
  left: 0;
  top: 42%;
}

.float-nutri {
  right: 0;
  bottom: 7%;
  animation-delay: -3.5s;
}

.mini-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: conic-gradient(var(--band-good-lime) 0 65%, var(--line) 0 100%);
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--ink);
  flex: none;
}

.mini-ring::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--card);
}

.mini-ring span {
  position: relative;
}

.band-word {
  color: var(--band-good-lime);
}

.nutri-dot {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--band-good-lime-bg);
  color: var(--band-good-lime);
  flex: none;
}

.nutri-dot svg {
  width: 18px;
  height: 18px;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* —— Telefon maketi ——
   Ekran görüntüsü çerçevesiz verilir (scripts/build_site_shots.py), cihazı
   burası çizer. Kasa iki temada da koyu: gerçek bir telefon gibi. */
.phone {
  width: min(300px, 76vw);
  border-radius: 46px;
  background: #0e1110;
  padding: 9px;
  box-shadow:
    var(--shadow-phone),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.phone-screen {
  border-radius: 38px;
  background: #f7f8fa;
  overflow: hidden;
}

.phone-screen img {
  display: block;
  width: 100%;
  height: auto;
}

@media (prefers-color-scheme: dark) {
  .phone {
    box-shadow:
      var(--shadow-phone),
      0 0 0 1px var(--line-strong),
      inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  }
}

/* —— Sayı şeridi ——
   Yalnızca doğrulanabilir sayılar: ürün sayısı data/reports/BASLA.md'den,
   katkı sayısı assets/data/additive_risks.json'ın anahtar sayısından gelir.
   Ürün sayısı her import'ta değiştiği için yuvarlak yazılır — kesin sayı
   yazılırsa site ilk güncellemede yanlışa döner. */
.stats-band {
  border-block: 1px solid var(--line);
  background: var(--card);
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.stats li {
  text-align: center;
  padding: 26px 10px;
}

.stats li + li {
  border-left: 1px solid var(--line);
}

.stats strong {
  display: block;
  font-family: var(--font);
  font-size: clamp(1.7rem, 4.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--accent-ink);
  line-height: 1.05;
}

.stats span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

/* —— Bölümler —— */
.section {
  padding: clamp(64px, 9vw, 112px) 0;
}

.section-alt {
  background: var(--card);
  border-block: 1px solid var(--line);
}

.section-head {
  max-width: 40rem;
  margin: 0 auto 48px;
  text-align: center;
}

.section-head h1,
.section-head h2 {
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  line-height: 1.08;
  margin-bottom: 14px;
}

.section-head p {
  color: var(--muted);
  font-size: 1.05rem;
  margin: 0;
}

.section-head.is-left {
  text-align: left;
  margin-left: 0;
}

/* —— Adımlar —— */
.how-grid {
  display: grid;
  gap: 32px;
}

.how-grid .section-head {
  margin-bottom: 0;
}

.how-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.how-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}

.how-step:last-child {
  border-bottom: 1px solid var(--line);
}

.how-no {
  font-family: var(--font);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent-ink);
}

.how-step h3 {
  font-size: 1.3rem;
  margin-bottom: 6px;
}

.how-step p {
  margin: 0;
  color: var(--muted);
}

/* —— Ekranlar ——
   Her satır bir ekran + o ekranın anlattığı yetenek. Satırlar geniş ekranda
   sırayla yer değiştirir (`.is-flip`); telefonu taşıyan panelin rengi
   satırdan satıra döner, alt kenarda telefon panelden taşar gibi kesilir. */
.shots-note {
  margin-top: 10px !important;
  font-size: 0.86rem !important;
}

.show-row {
  display: grid;
  gap: 32px;
  align-items: center;
}

.show-row + .show-row {
  margin-top: clamp(64px, 9vw, 112px);
}

.show-media {
  position: relative;
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: 44px 20px 0;
  border-radius: var(--radius-xl);
  background: var(--panel, var(--mist-purple));
  max-height: 560px;
}

.show-media .phone {
  width: min(290px, 70vw);
  align-self: flex-start;
}

.show-media.is-green {
  --panel: var(--mist-green);
}

.show-media.is-warm {
  --panel: var(--mist-warm);
}

.show-copy h3 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.1;
  margin-bottom: 14px;
}

.show-copy h3 .tag {
  margin-left: 6px;
  position: relative;
  top: -4px;
}

.show-copy > p {
  color: var(--muted);
  font-size: 1.05rem;
  margin: 0 0 20px;
}

.check-list {
  display: grid;
  gap: 10px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.check-list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
}

.check-list svg {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: var(--band-excellent);
}

/* Premium yeteneğin ücretsiz karşılığı.
   "Premium" tek başına neyin kilitli olduğunu söylüyor, neyin AÇIK kaldığını
   söylemiyordu; kullanıcı puanın da ücretli olduğunu sanıyordu. Her premium
   satırı ücretsiz karşılığını da yazar. */
.free-note {
  display: block;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  font-size: 0.9rem;
}

.section-alt .free-note {
  background: var(--paper);
}

.free-note b {
  color: var(--band-excellent);
  font-weight: 600;
}

/* —— Planlar ——
   Tam karşılaştırma tablosu destek sayfasındadır (`/destek#planlar`); burada
   iki kart yan yana durur ve ücretsiz kart ilk sıradadır — satılan şey puan
   değil, puan her zaman ücretsiz. */
.plans {
  display: grid;
  gap: 20px;
  max-width: 64rem;
  margin: 0 auto;
}

.plan {
  position: relative;
  padding: clamp(26px, 4vw, 36px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--paper);
}

.plan h3 {
  font-size: 1.6rem;
  margin-bottom: 4px;
}

.plan-sub {
  margin: 0 0 22px;
  color: var(--muted);
}

.plan ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
}

.plan li svg {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: var(--band-excellent);
}

.plan-plus {
  border-color: transparent;
  background:
    radial-gradient(420px 260px at 100% 0%, rgba(139, 124, 240, 0.55), transparent 70%),
    linear-gradient(160deg, #5b4fc7 0%, #3e3494 100%);
  color: #ffffff;
  box-shadow: 0 30px 60px -30px rgba(62, 52, 148, 0.7);
}

.plan-plus h3 {
  color: #ffffff;
}

.plan-plus .plan-sub {
  color: rgba(255, 255, 255, 0.78);
}

.plan-plus li svg {
  color: #c9f2a6;
}

.plan-plus .tag {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.plan-foot {
  margin: 22px 0 0;
  font-size: 0.92rem;
}

.plan-plus .plan-foot a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Katalogda olmayan ürün — ücretsiz bir yetenek ama bir plan maddesi değil,
   bir davet; planların altında kendi şeridinde durur. */
.report-card {
  display: grid;
  gap: 16px;
  max-width: 64rem;
  margin: 20px auto 0;
  padding: clamp(22px, 3.4vw, 30px);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--line-strong);
  background: var(--paper);
}

.report-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--mist-warm);
  color: #b8591f;
}

.report-icon svg {
  width: 24px;
  height: 24px;
}

.report-card h3 {
  font-size: 1.25rem;
  margin-bottom: 6px;
}

.report-card p {
  margin: 0 0 8px;
  color: var(--muted);
}

.report-card p:last-child {
  margin-bottom: 0;
  font-size: 0.9rem;
}

.report-card p b {
  color: var(--band-excellent);
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .report-icon {
    color: var(--warm);
  }
}

/* —— Bant ölçeği ——
   Uygulamanın dört bandı, renk sırası ve eşikleri uygulamayla aynı
   (ScoreBandStyle + 75/50/25). İğne hero'daki örnek ürünün puanını (65)
   gösterir; ölçek boyunca iki ayrı örnek kullanmak okuru şaşırtırdı. */
.band-scale {
  max-width: 48rem;
  margin: 0 auto 56px;
}

.band-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding-top: 44px;
}

.band-track > i {
  height: 14px;
  border-radius: 999px;
}

.band-track > i:nth-child(1) {
  background: var(--band-bad);
}

.band-track > i:nth-child(2) {
  background: var(--band-poor);
}

.band-track > i:nth-child(3) {
  background: var(--band-good-lime);
}

.band-track > i:nth-child(4) {
  background: var(--band-excellent);
}

.band-pin {
  position: absolute;
  top: 0;
  left: 65%;
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.band-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 10px;
  height: 10px;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 2px;
}

.band-labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.band-labels li {
  display: grid;
  gap: 1px;
  font-size: 0.82rem;
  color: var(--muted);
}

.band-labels strong {
  color: var(--ink);
  font-size: 0.95rem;
}

/* —— Ağırlık halkası ——
   60/30/10 üç satır metin olarak duruyordu; oran bir görselin işidir. Halka
   conic-gradient + ::before ile göbek tekniğindedir. Renkler formül
   satırlarının solundaki noktalarla birebir eşleşir — eşleşme bozulursa
   grafik okunmaz olur. */
.weights {
  display: grid;
  gap: 28px;
  justify-items: center;
  max-width: 52rem;
  margin: 0 auto 32px;
}

.weights-ring {
  position: relative;
  width: 188px;
  height: 188px;
  flex-shrink: 0;
  border-radius: 50%;
  background: conic-gradient(
    var(--purple) 0 60%,
    var(--green) 0 90%,
    var(--warm) 0 100%
  );
  display: grid;
  place-items: center;
}

.weights-ring::before {
  content: "";
  position: absolute;
  inset: 28px;
  border-radius: 50%;
  /* Göbek bölümün ZEMİNİ olmalı, kartın değil: düz bölüm --paper, .section-alt
     --card üzerindedir. Ters yazılırsa halkanın ortasında koyu temada görünen
     bir disk kalır. */
  background: var(--paper);
}

.section-alt .weights-ring::before {
  background: var(--card);
}

.weights-ring span {
  position: relative;
  text-align: center;
  font-family: var(--font);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  max-width: 6.5rem;
}

.weights-ring small {
  display: block;
  font-family: var(--font);
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--muted);
}

.weights-legend {
  display: grid;
  gap: 12px;
  width: 100%;
}

.weight-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.section-alt .weight-row {
  background: var(--paper);
}

.weight-key {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  white-space: nowrap;
  min-width: 5rem;
}

.weight-key::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dot, var(--purple));
  flex-shrink: 0;
}

.weight-row strong {
  display: block;
  font-size: 1rem;
  font-weight: 600;
}

.weight-row span {
  color: var(--muted);
  font-size: 0.92rem;
}

.score-notes {
  display: grid;
  gap: 14px;
  max-width: 52rem;
  margin: 0 auto;
}

.note {
  padding: 18px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  border-left: 3px solid var(--purple-soft);
  background: var(--card);
  color: var(--muted);
  font-size: 0.93rem;
}

.note p {
  margin: 0;
}

.section-alt .note {
  background: var(--paper);
}

.note strong {
  color: var(--ink);
}

/* —— Sorumluluk notu ——
   Uygulama bir tüketici aracı, tıbbi cihaz değil. Aynı cümle kosullar.html ve
   gizlilik.html içinde de var. Eskiden hero'nun hemen altındaydı ve ürünü
   anlatmadan önce güveni düşürüyordu; yeri puanın nasıl hesaplandığını
   anlatan bölümdür — puanın ne olmadığı da orada söylenir. */
.disclaimer {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  margin: 0;
  padding: 18px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  border-left: 3px solid var(--warm);
  background: var(--card);
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.55;
}

.section-alt .disclaimer {
  background: var(--paper);
}

.disclaimer svg {
  width: 20px;
  height: 20px;
  color: var(--warm);
  margin-top: 1px;
}

.disclaimer strong {
  color: var(--ink);
  font-weight: 600;
}

/* —— Gizlilik bandı ——
   Sayfanın tek koyu bölümü, iki temada da koyudur: güven sözü bir özellik
   kartı değil, sayfanın duruşudur. Beş madde 3 + 2 dizilir (6 kolonluk
   ızgarada 2 + 2 + 2 / 3 + 3) — eşit ızgara son maddeyi tek başına
   bırakıyordu. */
.privacy-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(600px 360px at 90% 0%, rgba(139, 124, 240, 0.35), transparent 70%),
    radial-gradient(520px 320px at 0% 100%, rgba(107, 175, 141, 0.18), transparent 70%),
    #15132a;
  color: #ffffff;
}

.privacy-band .section-head h2 {
  color: #ffffff;
}

.privacy-band .section-head p {
  color: rgba(255, 255, 255, 0.72);
}

.privacy-band .eyebrow {
  color: #c9c1ff;
}

.privacy-grid {
  display: grid;
  gap: 14px;
  margin: 0 0 36px;
  padding: 0;
  list-style: none;
}

.privacy-grid li {
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
}

.privacy-grid li svg {
  display: block;
  width: 34px;
  height: 34px;
  padding: 8px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: rgba(107, 175, 141, 0.2);
  color: #8fe0b6;
}

.privacy-grid strong {
  display: block;
  margin-bottom: 4px;
  color: #ffffff;
  font-size: 1.02rem;
  font-weight: 600;
}

.center {
  text-align: center;
}

/* —— Kapanış çağrısı ——
   `.cta` destek sayfasında da kullanılır (düz bölüm); ana sayfanınki renkli
   karttır (`.cta-home`). Lansman kapısı `.cta .cta-row`'u hedefler, iki
   biçimde de çalışır. */
.cta {
  padding: 72px 0;
  text-align: center;
  background: var(--card);
  border-top: 1px solid var(--line);
}

.cta h2 {
  font-size: clamp(1.7rem, 3.8vw, 2.4rem);
  margin-bottom: 12px;
}

.cta p {
  color: var(--muted);
  max-width: 30rem;
  margin: 0 auto 26px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 16px;
}

.cta-home {
  padding: clamp(56px, 8vw, 96px) 0;
  background: var(--paper);
  border-top: 0;
}

.cta-card {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 6vw, 72px) clamp(22px, 5vw, 64px);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(500px 300px at 85% 0%, rgba(201, 193, 255, 0.45), transparent 70%),
    radial-gradient(420px 260px at 0% 100%, rgba(107, 175, 141, 0.35), transparent 70%),
    linear-gradient(135deg, #5b4fc7 0%, #6a3de8 100%);
  color: #ffffff;
  box-shadow: 0 40px 80px -40px rgba(91, 79, 199, 0.8);
}

.cta-card img {
  width: 76px;
  height: 76px;
  margin: 0 auto 22px;
  border-radius: 20px;
  box-shadow: 0 16px 30px -10px rgba(0, 0, 0, 0.45);
}

.cta-card h2 {
  color: #ffffff;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.05;
}

.cta-card p {
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.05rem;
}

.cta-card .store-badge {
  background: #0e1110;
  color: #ffffff;
}

.cta-card .launch-note {
  color: rgba(255, 255, 255, 0.86);
}

/* —— Footer —— */
.footer {
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: 48px 0 28px;
}

.cta-home + .footer,
main:has(.cta-home) + .footer {
  border-top: 0;
}

.footer-grid {
  display: grid;
  gap: 28px;
  margin-bottom: 32px;
}

.footer p {
  margin: 12px 0 0;
  max-width: 24rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.footer-col h4 {
  margin: 0 0 12px;
  font-family: var(--font);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.footer-col a {
  display: block;
  margin-bottom: 9px;
  color: var(--ink);
  font-size: 0.92rem;
}

.footer-col a:hover {
  color: var(--accent-ink);
}

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  font-size: 0.84rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

/* —— Sosyal medya ——
 *
 * İki yerde durur: başlığın üstünde ince bir şerit (`.social-bar`) ve
 * footer'ın başında bir köşe (`.social-card`). Şerit yapışkan değildir —
 * yapışkan olan gezinme çubuğudur; şerit ilk kaydırmada ekrandan çıkar ve
 * sayfanın asıl eylemi (İndir) ile yarışmaz. Zemini sayfanınkidir: renkli
 * şerit başlığın üstünde ikinci bir başlık gibi duruyordu.
 *
 * İkonlar marka renginde değil sitenin renginde çizilir: üç ayrı marka rengi
 * mor paletin içinde üç ayrı reklam gibi duruyordu. Tanınırlığı biçim taşır.
 * Hesap adresleri üç sayfada da (TR/EN, tanıtım + yasal) elle aynıdır —
 * bir hesap değişirse `grep -rl etikaapp site/` ile hepsi birlikte değişmeli.
 */
.social-bar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.8rem;
}

.social-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  min-height: 34px;
  padding: 3px 0;
}

.social-bar-label {
  color: var(--muted);
  font-weight: 500;
}

.social-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--ink);
  font-weight: 600;
  line-height: 1;
  transition: color 0.18s ease, background 0.18s ease;
}

.social-links a:hover {
  color: var(--accent-ink);
  background: var(--card);
  text-decoration: none;
}

.social-links svg,
.social-chip svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.social-card {
  display: grid;
  gap: 18px;
  align-items: center;
  padding: 22px;
  margin-bottom: 40px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--card);
}

.social-card-title {
  margin: 0;
  font-size: 1.15rem;
  color: var(--ink);
}

.footer .social-card p {
  margin: 6px 0 0;
  max-width: 26rem;
}

.social-card-links {
  display: grid;
  gap: 10px;
}

.social-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  transition: transform 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.social-chip:hover {
  color: var(--accent-ink);
  border-color: var(--line-strong);
  text-decoration: none;
  transform: translateY(-1px);
}

.social-chip svg {
  width: 22px;
  height: 22px;
  color: var(--accent-ink);
}

.social-chip span {
  display: grid;
  line-height: 1.25;
}

.social-chip strong {
  font-size: 0.92rem;
  font-weight: 600;
}

.social-chip small {
  font-size: 0.8rem;
  color: var(--muted);
}

@media (min-width: 600px) {
  .social-card-links {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .social-card {
    grid-template-columns: 1fr auto;
    padding: 24px 28px;
  }

  .social-card-links {
    grid-template-columns: repeat(3, minmax(150px, auto));
  }
}

/* 400 px'in altında etiket + üç ad tek satıra sığmıyor ve şerit iki satıra
   bölünüyordu; adlar düşer, ikonlar kalır (erişilebilir ad `aria-label`'da). */
@media (max-width: 419px) {
  .social-links a span {
    display: none;
  }

  .social-links a {
    padding: 6px 8px;
  }
}

/* —— Yasal / doküman sayfaları —— */
.doc {
  padding: 44px 0 72px;
}

.doc-wrap {
  width: min(720px, calc(100% - 40px));
  margin-inline: auto;
}

.doc-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 24px;
}

.doc-back:hover {
  color: var(--ink);
  text-decoration: none;
}

.doc-back svg {
  width: 16px;
  height: 16px;
}

.doc h1 {
  font-size: clamp(1.9rem, 4.6vw, 2.6rem);
  margin-bottom: 10px;
}

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.88rem;
  margin-bottom: 8px;
}

.doc-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
}

.doc-lang:hover {
  color: var(--ink);
  border-color: var(--ink);
  text-decoration: none;
}

.doc-lead {
  color: var(--muted);
  font-size: 1.05rem;
  margin: 20px 0 32px;
}

.doc-toc {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 40px;
}

.doc-toc h2 {
  font-family: var(--font);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

.doc-toc ol {
  margin: 0;
  padding-left: 1.2rem;
  columns: 2;
  column-gap: 28px;
}

.doc-toc li {
  margin-bottom: 6px;
  font-size: 0.9rem;
  break-inside: avoid;
}

.doc-toc a {
  color: var(--ink);
}

.doc-toc a:hover {
  color: var(--accent-ink);
}

.doc-body h2 {
  font-size: 1.3rem;
  margin: 44px 0 12px;
  padding-top: 4px;
  scroll-margin-top: 80px;
}

.doc-body h3 {
  font-size: 1.05rem;
  margin: 26px 0 8px;
  color: var(--ink);
}

.doc-body p,
.doc-body li {
  color: var(--muted);
  font-size: 0.98rem;
}

.doc-body p {
  margin: 0 0 14px;
}

.doc-body strong {
  color: var(--ink);
  font-weight: 600;
}

.doc-body ul,
.doc-body ol {
  margin: 0 0 16px;
  padding-left: 1.3rem;
}

.doc-body li {
  margin-bottom: 8px;
}

.doc-body hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 44px 0;
}

.doc-callout {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--purple-soft);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  margin: 0 0 20px;
}

.doc-callout p:last-child {
  margin-bottom: 0;
}

.doc-steps {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 22px 22px 40px;
  margin: 0 0 20px;
}

.doc-steps ol {
  margin: 0;
  padding: 0;
  list-style: decimal;
}

.doc-steps li {
  margin-bottom: 10px;
}

.doc-steps li:last-child {
  margin-bottom: 0;
}

/* SSS */
.faq {
  display: grid;
  gap: 10px;
  max-width: 44rem;
  margin-inline: auto;
}

.faq details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.97rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  color: var(--muted);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1;
}

.faq details[open] summary::after {
  content: "–";
}

.faq p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.94rem;
}

.faq p:last-child {
  margin-bottom: 0;
}

/* İletişim kartı */
.contact-card {
  display: grid;
  gap: 6px;
  max-width: 34rem;
  margin: 0 auto 40px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  text-align: center;
}

.contact-card .mail {
  font-size: clamp(1.05rem, 3vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  word-break: break-all;
}

.contact-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

/* —— Uygulamada aç (open.html / 404.html) —— */
.open-page {
  min-height: 100vh;
  background: var(--paper);
  display: grid;
  align-content: start;
}

.open-card {
  width: min(420px, calc(100% - 32px));
  margin: 48px auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 26px;
  text-align: center;
  box-shadow: var(--shadow);
}

.open-card .brand {
  justify-content: center;
  margin-bottom: 20px;
}

.open-card h1 {
  font-size: 1.6rem;
  margin: 0 0 10px;
}

.open-card .lead {
  color: var(--muted);
  margin: 0 0 22px;
}

.barcode-box {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  background: var(--input);
  margin-bottom: 22px;
}

/* `display: inline-flex` tarayıcının [hidden] kuralını ezer: ürün olmayan
   yollarda (paylaşılan liste) kutu gizlenemiyordu. */
.barcode-box[hidden] {
  display: none;
}

.barcode-box small {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.78rem;
}

.barcode-box code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}

.open-actions {
  display: grid;
  gap: 10px;
}

.open-actions .btn {
  width: 100%;
}

.error-text {
  color: var(--band-bad);
  font-weight: 600;
}

/* —— Lansman kapısı ——
   Uygulama mağazada yayına çıkana kadar indirme bağlantıları çalışmaz;
   çalışmayan bir düğme, olmayan bir düğmeden kötüdür. Durum TEK bir işarettir:
   <html data-launch="soon">. Yayın günü o iki kelime silinir, site kendiliğinden
   normal hâline döner — metin iki dilde iki kez düzenlenmez.

   "Yakında" yazısı CSS'te değil HTML'de durur (`.soon-pill`, `.launch-note`),
   çünkü content: "Yakında" İngilizce sayfada da Türkçe çıkardı. CSS yalnızca
   görünürlüğü çevirir. */
.soon-pill,
.launch-note {
  display: none;
}

html[data-launch="soon"] .store-badge,
html[data-launch="soon"] .footer-col a[data-store] {
  pointer-events: none;
  opacity: 0.45;
  filter: grayscale(1);
}

/* Kapanış bölümünde ölü düğmeler tamamen kalkar: hangi platformlarda çıkacağını
   hero'daki rozetler zaten söylüyor, buranın tek işi bir eylem sunmaktır ve o
   eylem "haber ver"dir. Sönük iki düğmenin altında canlı bir düğme durması
   hangisinin çalıştığını da belirsizleştiriyordu. */
html[data-launch="soon"] .cta .cta-row {
  display: none;
}

html[data-launch="soon"] .soon-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--mist-purple);
  color: var(--accent-ink);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

html[data-launch="soon"] .launch-note {
  display: block;
}

html[data-launch="soon"] .notify-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
}

/* Yayındayken haber verme düğmesi de gereksizdir. */
.notify-row {
  display: none;
}

/* —— Plan tablosu (destek sayfası) ——
   Dar ekranda tablo yatay kaydırılmaz, satırlar kart olur: 320 px'de üç
   kolonlu tablo okunmaz. */
.plan-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 auto 20px;
  font-size: 0.93rem;
}

.plan-table th,
.plan-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.plan-table thead th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
}

.plan-table tbody th {
  font-weight: 600;
  color: var(--ink);
}

.plan-table .yes {
  color: var(--band-excellent);
  font-weight: 600;
}

.plan-table .no {
  color: var(--muted);
}

@media (max-width: 599px) {
  .plan-table,
  .plan-table tbody,
  .plan-table tr,
  .plan-table th,
  .plan-table td {
    display: block;
    border: 0;
  }

  .plan-table thead {
    display: none;
  }

  .plan-table tr {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-bottom: 10px;
  }

  .plan-table td::before {
    content: attr(data-label) ": ";
    color: var(--muted);
    font-weight: 600;
  }

  .plan-table td {
    padding: 3px 0;
  }

  .plan-table tbody th {
    padding: 0 0 6px;
  }
}

/* —— Kaydırınca beliren bölümler ——
   Yalnızca JS çalıştıysa ve hareket azaltılmamışsa devreye girer
   (`html.reveal-on`, index.html sonundaki script koyar). JS yoksa içerik
   hiç gizlenmez — görünmeyen bir bölüm, hareketsiz bir bölümden kötüdür. */
.reveal-on .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reveal-on .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* —— Geniş ekran —— */
@media (min-width: 768px) {
  .nav-links {
    display: flex;
  }

  .stats li {
    padding: 34px 16px;
  }

  .how-grid {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 72px;
    align-items: start;
  }

  .how-grid .section-head {
    position: sticky;
    top: 110px;
  }

  .show-row {
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 88px);
  }

  .show-row.is-flip .show-media {
    order: 2;
  }

  .plans {
    grid-template-columns: 1fr 1fr;
  }

  .report-card {
    grid-template-columns: auto 1fr;
    gap: 22px;
    align-items: start;
  }

  .weights {
    grid-template-columns: 188px 1fr;
    align-items: center;
    gap: 40px;
    justify-items: stretch;
  }

  .score-notes {
    grid-template-columns: 1fr 1fr;
  }

  .privacy-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .privacy-grid li {
    grid-column: span 2;
  }

  .privacy-grid li:nth-child(n + 4) {
    grid-column: span 3;
  }

  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
  }
}

@media (min-width: 960px) {
  .hero {
    padding: 64px 0 88px;
  }

  .hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
  }

  .hero-copy {
    text-align: left;
  }

  .hero-lead {
    margin-left: 0;
  }

  .trust-row,
  .cta-home .cta-row,
  .hero .store-row {
    justify-content: flex-start;
  }

  .cta-home .cta-row {
    justify-content: center;
  }

  .hero-visual {
    max-width: 500px;
  }

  /* Geniş ekranda kartlar telefonun kenarına yalnızca değer: ekran
     görüntüsündeki ürün görselinin ve satırların üstüne binmesin. */
  .float-score {
    left: -24px;
    top: 13%;
  }

  .float-nutri {
    right: -8px;
    bottom: 22%;
  }
}

/* Kartları telefonun tamamen dışına almak için yer ancak geniş ekranda var;
   1024 px'te sağdaki kart görünüm alanından taşıyordu. */
@media (min-width: 1300px) {
  .float-score {
    left: -64px;
  }

  .float-nutri {
    right: -64px;
  }
}

/* —— Dar ekran —— */
@media (max-width: 599px) {
  /* İki kolon 300 px'in altında başlık başına iki kelime bırakıyor. */
  .doc-toc ol {
    columns: 1;
  }

  /* İki rozet 172 px'lik tabanla 390 px'te yan yana sığmıyor, hero'nun
     ilk ekranı alt alta iki düğmeye harcanıyordu. */
  .store-badge {
    min-width: 0;
    padding: 10px 16px;
  }

  .float-card {
    padding: 9px 12px 9px 9px;
    gap: 9px;
  }

  .float-card strong {
    font-size: 0.84rem;
  }

  .mini-ring {
    width: 40px;
    height: 40px;
    font-size: 0.88rem;
  }

  .nutri-dot {
    width: 30px;
    height: 30px;
  }

  .band-labels li {
    font-size: 0.74rem;
  }

  .band-labels strong {
    font-size: 0.84rem;
  }
}

@media (max-width: 379px) {
  /* Üç sayı 320 px'de yan yana iki kelimeye düşüyor. */
  .stats {
    grid-template-columns: 1fr;
  }

  .stats li + li {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  /* Rozet çerçevesizken 320 px'de de sığıyor; küreyi düşürmeye gerek yok,
     yalnızca yan boşluk kısılır. */
  .lang-switch {
    padding: 6px 4px;
  }

  /* İki rozet yan yana sığmıyor; alt alta ve tam genişlikte dursunlar. */
  .store-row {
    display: grid;
  }

  .store-badge {
    min-width: 0;
  }

  .cta-row .btn {
    width: 100%;
  }

  .float-nutri {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
    animation: none !important;
  }
}