/* NotForGym — tanıtım sitesi tasarım sistemi.
   Kaynak: uygulamanın Theme.swift değerleri ("Gün batımı" paleti, 2px kenar, 3px köşe,
   bulanıklıksız ofset gölge). Renk kodları YALNIZCA :root bloklarında yazılır.
   Önce mobil (390px), sonra 40rem / 48rem / 60rem / 64rem. */

/* ------------------------------------------------------------------ fontlar (kendi sunucumuzda, OFL) */
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-expanded-latin.woff2") format("woff2");
  font-weight: 800 900;
  font-stretch: 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-expanded-latin-ext.woff2") format("woff2");
  font-weight: 800 900;
  font-stretch: 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ token'lar */
:root {
  /* Gün batımı paleti (açık) — Theme.swift */
  --c-accent: #FF5A36;
  --c-magenta: #E83F8B;
  --c-gold: #E8A317;
  --c-success: #1FA88A;
  --c-violet: #5B3FD9;
  --c-danger: #D7263D;
  --c-bg: #F4EBDD;
  --c-card: #FFFBF3;
  --c-raised: #EFE4D1;
  --c-ink: #1C1B3A;
  --c-ink-soft: #5E5A7A;
  --c-stroke: #1C1B3A;
  --c-shadow: #1C1B3A;
  /* Türetilmiş roller (kontrast için) */
  --c-accent-text: #B83A1F;   /* krem/kart üzerinde metin olarak accent, 4.8:1 */
  --c-on-accent: #1C1B3A;     /* accent zemin üzerindeki metin, 5.3:1 */
  --c-on-gold: #1C1B3A;       /* altın zemin üzerindeki işaret, 7.6:1 */
  --c-focus: #5B3FD9;         /* odak halkası, zemine karşı 5.6:1 */
  --c-us: #FFE3D6;            /* karşılaştırmada NotForGym sütunu */
  --c-footer-bg: #1C1B3A;
  --c-footer-ink: #F4EBDD;
  --c-footer-soft: #B7AFCF;

  /* Biçim dili */
  --border: 2px;
  --radius: 3px;
  --shadow-card: 4px;
  --shadow-btn: 3px;
  --shadow-hero: 8px;

  /* Tipografi: başlık Archivo Expanded (125%), etiket/sayı JetBrains Mono, gövde sistem fontu */
  --f-display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --f-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-ja: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  --stretch-display: 125%;
  --track-label: .12em;

  --t-hero: clamp(2.375rem, 1.2rem + 4.4vw, 4.625rem);
  --t-h1: clamp(2rem, 1.3rem + 3.2vw, 3.5rem);
  --t-h2: clamp(1.625rem, 1.15rem + 2.3vw, 2.875rem);
  --t-h3: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --t-lead: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  --t-body: 1.0625rem;
  --t-small: .9375rem;
  --t-label: .8125rem;

  /* Boşluk ölçeği */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --gutter: clamp(1.125rem, .6rem + 2.4vw, 2rem);
  --max: 72rem;
  --measure: 65ch;

  --ease-press: cubic-bezier(.3, .7, .4, 1);
  --mask: #000;               /* maske opaklığı (renk değil) */
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-accent: #FF6A45;
    --c-magenta: #FF5BA3;
    --c-gold: #FFC23D;
    --c-success: #34D1AE;
    --c-violet: #8C74FF;
    --c-danger: #FF5468;
    --c-bg: #15122B;
    --c-card: #221C40;
    --c-raised: #1D1939;        /* bölüm zemini; kenarlık 3:1 için bg ile kart arasında */
    --c-ink: #F4EBDD;
    --c-ink-soft: #B7AFCF;
    --c-stroke: #6E62A8;
    --c-shadow: #05030F;
    --c-accent-text: #FF7F5F;
    --c-on-accent: #15122B;
    --c-on-gold: #15122B;
    --c-focus: #8C74FF;
    --c-us: #3A2342;
    --c-footer-bg: #05030F;
    --c-footer-ink: #F4EBDD;
    --c-footer-soft: #B7AFCF;
  }
}

/* ------------------------------------------------------------------ temel */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 5rem;
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-ink);
  font: 400 var(--t-body)/1.6 var(--f-body);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
html:lang(ja) body { font-family: var(--f-ja); line-break: strict; }
img, svg { display: block; max-width: 100%; }
a, button, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
img { height: auto; }
p, ul, ol, dl, dd, figure { margin: 0; }
p + p { margin-top: var(--s-4); }

h1, h2, h3 {
  margin: 0;
  font-family: var(--f-display);
  font-stretch: var(--stretch-display);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -.01em;
  text-wrap: balance;
  hyphens: auto;
  -webkit-hyphens: auto;
}
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 800; line-height: 1.2; }
/* Japonca: Latin dışı glifler sistem fontuna düşer, harf aralığı kapanır. */
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3 {
  font-family: var(--f-display), var(--f-ja);
  letter-spacing: 0;
  line-height: 1.25;
}

a { color: var(--c-ink); text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; text-underline-offset: .2em; }
a:hover { color: var(--c-accent-text); }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
::selection { background: var(--c-gold); color: var(--c-on-gold); }

.mono { font-family: var(--f-mono); }
.muted { color: var(--c-ink-soft); }
.fine { margin-top: var(--s-4); font-size: var(--t-small); color: var(--c-ink-soft); max-width: var(--measure); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Etiket: uygulamadaki retroLabel (mono, aralıklı, inkSoft). Büyük harf dönüşümü yok:
   "iPhone" gibi özel yazımlar korunur, etiket karakterini mono font ve harf aralığı taşır. */
.kicker {
  margin: 0 0 var(--s-3);
  font: 700 var(--t-label)/1.3 var(--f-mono);
  letter-spacing: var(--track-label);
  color: var(--c-ink-soft);
}
:lang(ja) .kicker, :lang(ja) .toc__title, :lang(ja) .compare thead th { letter-spacing: .04em; font-family: var(--f-mono), var(--f-ja); }

/* ------------------------------------------------------------------ düzen */
.wrap {
  width: 100%; max-width: var(--max); margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.narrow { max-width: calc(46rem + 2 * var(--gutter)); }
.section { padding-block: var(--section-y); border-top: var(--border) solid var(--c-stroke); }
.section--raised { background: var(--c-raised); }
.section__head { max-width: 46rem; margin-bottom: var(--s-6); }
.section__head h2 + .section__lead { margin-top: var(--s-4); }
.section__lead { font-size: var(--t-lead); color: var(--c-ink-soft); max-width: var(--measure); }
.split { display: grid; gap: var(--s-6); align-items: start; }
.split > div > h2 { margin-bottom: var(--s-4); }
.split p { max-width: var(--measure); }
.after-list { margin-top: var(--s-5); font-weight: 600; }
@media (min-width: 56rem) {
  .split { grid-template-columns: 1.15fr .85fr; gap: var(--s-8); }
}

/* ------------------------------------------------------------------ bileşen: kart */
.card {
  background: var(--c-card);
  border: var(--border) solid var(--c-stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card) var(--shadow-card) 0 var(--c-shadow);
  padding: var(--s-5);
}
.card__foot { margin-top: var(--s-5); font-weight: 600; }

/* ------------------------------------------------------------------ bileşen: düğme
   Basılınca gölge 0'a iner, düğme gölgenin yerine kayar (uygulamadaki retro düğme). */
.btn, .store-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 3rem;
  padding: .625rem 1.25rem;
  border: var(--border) solid var(--c-stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow-btn) var(--shadow-btn) 0 var(--c-shadow);
  background: var(--c-accent);
  color: var(--c-on-accent);
  font: 800 1rem/1.2 var(--f-display);
  font-stretch: var(--stretch-display);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 90ms var(--ease-press), box-shadow 90ms var(--ease-press);
}
.btn:hover, a.store-btn:hover { color: var(--c-on-accent); transform: translate(-1px, -1px); box-shadow: calc(var(--shadow-btn) + 1px) calc(var(--shadow-btn) + 1px) 0 var(--c-shadow); }
.btn:active, a.store-btn:active { transform: translate(var(--shadow-btn), var(--shadow-btn)); box-shadow: 0 0 0 var(--c-shadow); }
.btn--ghost, .btn--ghost:hover { background: var(--c-card); color: var(--c-ink); }
:lang(ja) .btn, :lang(ja) .store-btn { font-family: var(--f-display), var(--f-ja); }

/* Mağaza düğmesi. "Çok yakında": bağlantı değil, çapraz şeritli "hazırlanıyor" zemini. */
.store-btn__icon { width: 1.375rem; height: 1.375rem; flex: none; fill: currentColor; margin-top: -.15em; }
.store-btn.is-soon {
  cursor: default;
  justify-content: flex-start;
  text-align: left;
  background: repeating-linear-gradient(-45deg, var(--c-card) 0 10px, var(--c-raised) 10px 20px);
  color: var(--c-ink);
}
.store__note { margin-top: var(--s-2); font-size: var(--t-small); color: var(--c-ink-soft); max-width: 30rem; }
/* Apple'ın resmî rozeti: içeriği değiştirilmez, yalnızca ölçeklenir (en az 40px yükseklik). */
.store-badge { display: inline-block; border-radius: 9px; }
.store-badge img { height: 3.375rem; width: auto; }

/* Rozet (karşılaştırmada "Yakında" / "Geliştiriliyor"): nötr, kesik çizgi; metin her zaman yazılı. */
.badge {
  display: inline-block;
  padding: .125rem .5rem;
  border: var(--border) dashed var(--c-stroke);
  border-radius: var(--radius);
  background: var(--c-card);
  color: var(--c-ink);
  font: 700 .8125rem/1.35 var(--f-mono);
}

/* İşaretli liste (fiyat, gizlilik) */
.checks { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.checks li { position: relative; padding-left: 2.25rem; font-weight: 600; }
.checks li::before {
  content: "✓";
  position: absolute; left: 0; top: .05em;
  width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  border: var(--border) solid var(--c-stroke);
  border-radius: var(--radius);
  background: var(--c-gold);
  color: var(--c-on-gold);
  font: 800 .875rem/1 var(--f-mono);
}

/* ------------------------------------------------------------------ atlama linki ve üst bar */
.skip-link {
  position: absolute; left: var(--s-3); top: -10rem; z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--c-accent); color: var(--c-on-accent);
  border: var(--border) solid var(--c-stroke); border-radius: var(--radius);
  box-shadow: var(--shadow-btn) var(--shadow-btn) 0 var(--c-shadow);
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: var(--s-3); }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-bg);
  border-bottom: var(--border) solid var(--c-stroke);
}
.site-header__bar { display: flex; align-items: center; gap: var(--s-4); min-height: 4rem; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 2.75rem; color: var(--c-ink); text-decoration: none; }
.brand:hover { color: var(--c-ink); }
.brand__icon { width: 2.25rem; height: 2.25rem; border: var(--border) solid var(--c-stroke); border-radius: var(--radius); }
.brand__name { font: 900 1.0625rem/1 var(--f-display); font-stretch: var(--stretch-display); letter-spacing: -.01em; }

.menu-btn {
  margin-left: auto;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  background: var(--c-card);
  border: var(--border) solid var(--c-stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow-btn) var(--shadow-btn) 0 var(--c-shadow);
  color: var(--c-ink);
  cursor: pointer;
}
.menu-btn:active { transform: translate(var(--shadow-btn), var(--shadow-btn)); box-shadow: none; }
.menu-btn__bars, .menu-btn__bars::before, .menu-btn__bars::after {
  display: block; width: 1.125rem; height: 2px; background: currentColor; content: "";
}
.menu-btn__bars { position: relative; }
.menu-btn__bars::before { position: absolute; top: -6px; }
.menu-btn__bars::after { position: absolute; top: 6px; }
.menu-btn[aria-expanded="true"] .menu-btn__bars { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-btn__bars::before { top: 0; transform: rotate(45deg); background: currentColor; }
.menu-btn[aria-expanded="true"] .menu-btn__bars::after { top: 0; transform: rotate(-45deg); background: currentColor; }

.site-nav { width: 100%; padding-bottom: var(--s-4); }
.site-nav__list { list-style: none; padding: 0; display: grid; }
.site-nav__list a {
  display: flex; align-items: center; min-height: 3rem;
  font-weight: 700; text-decoration: none; color: var(--c-ink);
  border-bottom: var(--border) solid var(--c-raised);
}
.site-nav__list a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: 3px; }
/* JS yokken menü düğmesi gizli, linkler hep görünür. JS varsa düğme açar/kapatır (site.js, F2). */
html:not(.js) .menu-btn { display: none; }
html:not(.js) .site-nav__list { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); }
html:not(.js) .site-nav__list a { border: 0; min-height: 2.75rem; }
.js .site-nav { display: none; }
.js .menu-btn[aria-expanded="true"] + .site-nav { display: block; }

@media (min-width: 60rem) {
  .site-header__bar { flex-wrap: nowrap; }
  .menu-btn, html.js .menu-btn { display: none; }
  .site-nav, .js .site-nav { display: flex; align-items: center; gap: var(--s-5); width: auto; margin-left: auto; padding: 0; }
  .site-nav__list, html:not(.js) .site-nav__list { display: flex; gap: var(--s-5); }
  .site-nav__list a { border: 0; min-height: 2.75rem; font-size: var(--t-small); }
}

/* Dil seçici: JS'siz <details>. */
.lang { position: relative; margin-top: var(--s-3); }
.lang__toggle {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 2.75rem; padding: 0 var(--s-3);
  list-style: none; cursor: pointer;
  background: var(--c-card);
  border: var(--border) solid var(--c-stroke); border-radius: var(--radius);
  font: 700 var(--t-label)/1 var(--f-mono);
}
.lang__toggle::-webkit-details-marker { display: none; }
.lang__toggle:hover, .menu-btn:hover { background: var(--c-raised); }
.lang__toggle::after { content: "▾"; font-size: .75em; }
.lang[open] .lang__toggle::after { content: "▴"; }
.lang__icon { width: 1.125rem; height: 1.125rem; }
.lang__list {
  list-style: none; margin: var(--s-2) 0 0; padding: var(--s-2);
  background: var(--c-card);
  border: var(--border) solid var(--c-stroke); border-radius: var(--radius);
  box-shadow: var(--shadow-card) var(--shadow-card) 0 var(--c-shadow);
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-2);
}
.lang__list a { display: flex; align-items: center; min-height: 2.75rem; padding: 0 var(--s-2); text-decoration: none; font-weight: 600; }
.lang__list a[aria-current="true"] { background: var(--c-accent); color: var(--c-on-accent); border-radius: var(--radius); }
@media (min-width: 60rem) {
  .lang { margin: 0; }
  .lang__list { position: absolute; right: 0; top: 100%; width: 22rem; z-index: 60; }
}

/* ------------------------------------------------------------------ hero */
.hero { padding-block: clamp(2.5rem, 1rem + 6vw, 6rem) var(--section-y); overflow: hidden; }
.hero__grid { display: grid; gap: var(--s-7); align-items: center; }
.hero__title { font-size: var(--t-hero); line-height: .98; }
.hero__line { display: block; }
/* Japonca: "ジムのためではなく、" 390px'te tek satıra sığsın (CJK'de kelime arası yok). */
:lang(ja) .hero__title { font-size: clamp(2rem, 1.2rem + 3.6vw, 4rem); line-height: 1.2; }
/* İmza: logodaki baskı kayması. Mürekkep harf + accent ofset, bulanıklık yok. */
.hero__line--print { margin-top: .06em; text-shadow: .055em .055em 0 var(--c-accent); }
.hero__lead { margin-top: var(--s-5); font-size: var(--t-lead); max-width: 34rem; }
.hero__actions { margin-top: var(--s-6); display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--s-3) var(--s-4); }
/* Mağaza kabı "görünmez" olur: düğme ve not doğrudan bu satırın öğeleri. Not her zaman iki düğmenin altında. */
.hero__actions .store--hero { display: contents; }
.hero__actions .store-btn { order: 1; }
.hero__actions > .btn { order: 2; }
.hero__actions .store__note { order: 3; flex: 1 0 100%; margin-top: 0; }
@media (max-width: 39.99rem) {
  .hero__actions .store-btn, .hero__actions > .btn { flex: 1 0 100%; justify-content: center; text-align: center; }
}
.hero__trust { margin-top: var(--s-5); font-weight: 700; }
.hero__meta { margin-top: var(--s-2); font-size: var(--t-label); color: var(--c-ink-soft); }
.hero__visual { position: relative; display: grid; place-items: center; }
@media (min-width: 64rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: var(--s-6); }
}
@media (prefers-reduced-motion: no-preference) {
  /* Tek orkestre an: sayfa açılışında baskı kayması yerine oturur. */
  .hero__line--print { animation: print-in 700ms var(--ease-press) 150ms both; }
  @keyframes print-in { from { text-shadow: 0 0 0 var(--c-accent); } }
}

/* Gün batımı güneşi: hero telefonunun arkasında, alt yarısı yatay şeritlerle kesilmiş. */
.sun {
  position: absolute; z-index: 0;
  top: 0; left: 50%;
  width: min(100%, 30rem); aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(180deg, var(--c-gold) 0%, var(--c-accent) 52%, var(--c-magenta) 100%);
  -webkit-mask-image: linear-gradient(180deg, var(--mask) 0 50%, transparent 50% 54%, var(--mask) 54% 62%, transparent 62% 67%, var(--mask) 67% 76%, transparent 76% 83%, var(--mask) 83% 100%);
  mask-image: linear-gradient(180deg, var(--mask) 0 50%, transparent 50% 54%, var(--mask) 54% 62%, transparent 62% 67%, var(--mask) 67% 76%, transparent 76% 83%, var(--mask) 83% 100%);
}

/* ------------------------------------------------------------------ telefon çerçevesi */
.phone {
  position: relative; z-index: 1;
  width: 100%;
  padding: 6px;
  background: var(--c-shadow);
  border: var(--border) solid var(--c-stroke);
  border-radius: 1.75rem;
  box-shadow: var(--shadow-card) var(--shadow-card) 0 var(--c-shadow);
}
.phone__screen { width: 100%; border-radius: 1.3rem; background: var(--c-raised); }
.phone--hero {
  max-width: min(14.5rem, 64vw);
  margin-top: 2.5rem;
  box-shadow: var(--shadow-hero) var(--shadow-hero) 0 var(--c-accent);
}
@media (min-width: 40rem) { .phone--hero { max-width: 17.5rem; margin-top: 3.5rem; } }
@media (min-width: 64rem) { .phone--hero { max-width: 20rem; } }
.phone--sm { border-radius: 1.4rem; padding: 5px; }
.phone--sm .phone__screen { border-radius: 1rem; }

/* ------------------------------------------------------------------ isim bölümü (tipografik, maskotsuz) */
.name { display: grid; gap: var(--s-6); align-items: center; }
.name__type {
  display: grid; justify-items: start;
  font: 900 clamp(3rem, 1.5rem + 8vw, 7.5rem)/.9 var(--f-display);
  font-stretch: var(--stretch-display);
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--c-ink);
  text-shadow: .045em .045em 0 var(--c-accent);
  user-select: none;
}
.name__type span:nth-child(2) { padding-left: .9em; }
.name__type span:nth-child(3) { padding-left: .3em; }
.name__copy h2 { margin-bottom: var(--s-5); }
.name__copy p { max-width: var(--measure); }
.name__pun {
  margin-top: var(--s-5);
  padding: var(--s-3) var(--s-4);
  border-left: 6px solid var(--c-gold);
  background: var(--c-card);
  font-weight: 700;
}
@media (min-width: 56rem) { .name { grid-template-columns: .9fr 1.1fr; gap: var(--s-8); } }

/* ------------------------------------------------------------------ nasıl çalışır (gerçek sıra: numaralı) */
.steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: var(--s-6); }
.step { counter-increment: step; position: relative; padding-top: 3.75rem; }
.step::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  background: var(--c-accent); color: var(--c-on-accent);
  border: var(--border) solid var(--c-stroke); border-radius: var(--radius);
  box-shadow: var(--shadow-btn) var(--shadow-btn) 0 var(--c-shadow);
  font: 800 1.25rem/1 var(--f-mono);
}
.step__title { margin-bottom: var(--s-2); }
.step__body { color: var(--c-ink-soft); max-width: 34ch; }
@media (min-width: 48rem) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .step:not(:last-child)::after {
    content: ""; position: absolute; top: 1.375rem; left: 3.75rem; right: calc(-1 * var(--s-6) + .5rem);
    border-top: var(--border) dashed var(--c-stroke);
  }
}

/* ------------------------------------------------------------------ ekranlar
   Mobil/tablet: yatay kaydırmalı şerit (scroll-snap). Masaüstü: 3×2 ızgara; 6'lı ızgarada telefonlar
   ~165px'e düşüp gerçek ekranların metni okunmuyordu. Şerit yalnızca gerçekten kaydırılabiliyorsa
   Tab durağıdır (site.js tabindex'i yönetir). */
.screens-scroll {
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-color: var(--c-stroke) transparent;
}
.screens-scroll:focus-visible { outline-offset: -3px; }
.screens {
  list-style: none; margin: 0; padding: var(--s-2) var(--gutter) var(--s-5);
  display: grid; grid-auto-flow: column; grid-auto-columns: min(62vw, 15rem);
  gap: var(--s-5);
  width: max-content; min-width: 100%;
}
.screens__item { scroll-snap-align: start; }
.screen__cap { margin-top: var(--s-4); font-weight: 700; font-size: var(--t-small); line-height: 1.35; }
@media (min-width: 64rem) {
  .screens-scroll { overflow-x: visible; scroll-snap-type: none; }
  .screens {
    max-width: var(--max); margin-inline: auto;
    grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto;
    column-gap: var(--s-6); row-gap: var(--s-8);
    width: auto;
  }
  .screen { max-width: 16.5rem; margin-inline: auto; }
}

/* ------------------------------------------------------------------ özellikler: 6 kart + 9'luk kompakt liste */
.feats { list-style: none; padding: 0; display: grid; gap: var(--s-5); }
.feat { --band: var(--c-accent); border-top: 10px solid var(--band); }
.feat:nth-child(6n+2) { --band: var(--c-magenta); }
.feat:nth-child(6n+3) { --band: var(--c-gold); }
.feat:nth-child(6n+4) { --band: var(--c-success); }
.feat:nth-child(6n+5) { --band: var(--c-violet); }
.feat:nth-child(6n+6) { --band: var(--c-danger); }
.feat__title { margin-bottom: var(--s-2); }
.feat__body { color: var(--c-ink-soft); }
@media (min-width: 40rem) { .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .feats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); } }

.more-title { margin-top: var(--s-8); margin-bottom: var(--s-5); font-size: var(--t-h3); }
.more { display: grid; gap: 0 var(--s-6); }
.more__item { padding-block: var(--s-4); border-top: var(--border) solid var(--c-stroke); }
.more__title { font-weight: 800; }
.more__body { margin-top: var(--s-1); color: var(--c-ink-soft); font-size: var(--t-small); }
@media (min-width: 40rem) { .more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .more { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------ karşılaştırma tablosu
   < 48rem: her satır bir kart, hücreler "sütun adı | değer" çifti (data-label). Uzun hücreler
   ("$4.99 one time, removes ads") alt satıra kırılır, yatay taşma olmaz.
   Tablo rolleri build'de açıkça yazıldı; display değişse de ekran okuyucu tabloyu görür. */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.compare thead { display: none; }
.compare tbody { display: grid; gap: var(--s-4); }
.compare tr {
  display: block;
  background: var(--c-card);
  border: var(--border) solid var(--c-stroke); border-radius: var(--radius);
  box-shadow: var(--shadow-card) var(--shadow-card) 0 var(--c-shadow);
  overflow: hidden;
}
.compare th[scope="row"] {
  display: block; padding: var(--s-3) var(--s-4);
  text-align: left; font: 800 1rem/1.3 var(--f-body);
  border-bottom: var(--border) solid var(--c-stroke);
}
.compare td {
  display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: var(--s-3);
  align-items: baseline;
  padding: var(--s-2) var(--s-4);
  border-top: 1px solid var(--c-raised);
}
.compare td::before { content: attr(data-label); font: 700 var(--t-label)/1.5 var(--f-mono); color: var(--c-ink-soft); overflow-wrap: anywhere; }
.compare td.is-us { background: var(--c-us); border-top: 0; font-weight: 700; }
.compare td > .badge { justify-self: start; }
.compare td.is-us::before { color: var(--c-ink); }

@media (min-width: 48rem) {
  .compare {
    display: table;
    background: var(--c-card);
    border: var(--border) solid var(--c-stroke); border-radius: var(--radius);
    box-shadow: var(--shadow-card) var(--shadow-card) 0 var(--c-shadow);
    table-layout: fixed;
  }
  .compare thead { display: table-header-group; }
  .compare tbody { display: table-row-group; }
  .compare tr { display: table-row; border: 0; box-shadow: none; background: none; }
  .compare th, .compare td {
    display: table-cell; vertical-align: baseline;
    padding: var(--s-4); text-align: left;
    border: 0; border-top: var(--border) solid var(--c-stroke);
  }
  .compare thead th { border-top: 0; font: 800 var(--t-label)/1.3 var(--f-mono); letter-spacing: var(--track-label); }
  .compare thead th:first-child { width: 31%; }
  .compare th[scope="row"] { border-bottom: 0; font-size: 1rem; }
  .compare td::before { content: none; }
  .compare .is-us { background: var(--c-us); border-left: var(--border) solid var(--c-stroke); border-right: var(--border) solid var(--c-stroke); }
  .compare thead .is-us { background: var(--c-accent); color: var(--c-on-accent); }
}

/* ------------------------------------------------------------------ fiyat */
.price__product { font: 800 var(--t-h3)/1.2 var(--f-display); font-stretch: var(--stretch-display); }
.price__amount { font-variant-numeric: tabular-nums; margin-top: var(--s-2); font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.125rem); text-wrap: balance; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.price .fine { margin-top: var(--s-2); }
.price .checks { margin-top: var(--s-5); padding-top: var(--s-5); border-top: var(--border) dashed var(--c-stroke); }

/* ------------------------------------------------------------------ SSS akordeonu (yerel <details>, JS gerektirmez) */
.qa-list { margin-top: var(--s-5); border-top: var(--border) solid var(--c-stroke); }
.qa { border-bottom: var(--border) solid var(--c-stroke); }
.qa__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 3.5rem; padding: var(--s-3) 0;
  cursor: pointer; list-style: none;
  font-weight: 700; font-size: 1.0625rem; line-height: 1.35;
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q::after {
  content: "+";
  flex: none; width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border: var(--border) solid var(--c-stroke); border-radius: var(--radius);
  background: var(--c-card);
  font: 800 1.125rem/1 var(--f-mono);
}
.qa[open] > .qa__q::after { content: "−"; background: var(--c-accent); color: var(--c-on-accent); }
.qa__q:hover > span { text-decoration: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.qa__a { padding: 0 0 var(--s-5); max-width: var(--measure); color: var(--c-ink-soft); }
.qa__a a { color: var(--c-ink); }
.qa:target > .qa__q { color: var(--c-accent-text); }
.qa-group { margin-top: var(--s-7); font-size: var(--t-h3); }

/* ------------------------------------------------------------------ kapanış CTA */
.cta { background: var(--c-accent); color: var(--c-on-accent); }
.cta__inner { display: grid; justify-items: start; gap: var(--s-4); }
.cta__title { font-size: var(--t-h1); max-width: 18ch; }
.cta p { max-width: var(--measure); }
.cta .fine, .cta .store__note { color: var(--c-on-accent); }
.cta .store-btn { background: var(--c-card); color: var(--c-ink); }
.cta .store-btn.is-soon { background: repeating-linear-gradient(-45deg, var(--c-card) 0 10px, var(--c-raised) 10px 20px); }
.cta a:not(.store-btn):not(.store-badge) { color: var(--c-on-accent); text-decoration-color: currentColor; }
.cta :focus-visible { outline-color: var(--c-on-accent); }

/* ------------------------------------------------------------------ iç sayfalar (destek, yasal, 404) */
.page { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--section-y); }
.page__title { font-size: var(--t-h1); }
.page__lead { margin-top: var(--s-4); font-size: var(--t-lead); color: var(--c-ink-soft); max-width: var(--measure); }
.page__section { margin-top: var(--s-8); }
/* Destek: mobilde tek sütun; geniş ekranda iletişim kartı solda sabit, konular sağda. */
.support { display: grid; gap: var(--s-7); align-items: start; }
.contact { margin-top: var(--s-6); }
.contact__title { font-size: var(--t-h3); margin-bottom: var(--s-3); }
.contact__action { margin-top: var(--s-5); }
.contact__addr { margin-top: var(--s-4); padding-top: var(--s-4); border-top: var(--border) dashed var(--c-stroke); }
.contact__addr dt { font: 700 var(--t-label)/1.4 var(--f-mono); color: var(--c-ink-soft); }
.contact__addr dd { margin: var(--s-1) 0 0; font-weight: 700; overflow-wrap: anywhere; }
.support__faq-title { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); }
.support__faq .qa-group:first-of-type { margin-top: var(--s-6); }
@media (min-width: 64rem) {
  .support { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: var(--s-8); }
  .support__intro { position: sticky; top: 6rem; }
  .support__faq { padding-top: .5rem; }
}

/* Yasal sayfalar: giriş (h1, tarih, dil notu, özet) → içindekiler → bölümler.
   Geniş ekranda içindekiler solda sabit sütun, giriş ve bölümler sağda (en fazla ~70 karakter). */
.legal { display: grid; gap: var(--s-6); align-items: start; }
.doc { max-width: 70ch; min-width: 0; }
.doc h1 { font-size: var(--t-h1); margin-bottom: var(--s-4); }
.doc .updated { font: 700 var(--t-label)/1.4 var(--f-mono); color: var(--c-ink-soft); }
.lang-note {
  margin-top: var(--s-4); padding: var(--s-3) var(--s-4);
  border: var(--border) dashed var(--c-stroke); border-radius: var(--radius);
  font-size: var(--t-small);
}
.summary {
  margin-top: var(--s-5); padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  background: var(--c-card);
  border: var(--border) solid var(--c-stroke); border-left-width: 10px; border-left-color: var(--c-gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card) var(--shadow-card) 0 var(--c-shadow);
}
.summary p + p { margin-top: var(--s-3); }
.toc {
  padding: var(--s-4) var(--s-5);
  background: var(--c-card);
  border: var(--border) solid var(--c-stroke); border-radius: var(--radius);
  box-shadow: var(--shadow-card) var(--shadow-card) 0 var(--c-shadow);
}
.toc__title {
  margin-bottom: var(--s-2);
  font: 700 var(--t-label)/1.3 var(--f-mono); letter-spacing: var(--track-label);
  color: var(--c-ink-soft);
}
.toc__list { list-style: none; margin: 0; padding: 0; font-size: var(--t-small); line-height: 1.35; }
.toc__list a { display: block; padding: .45rem 0; text-decoration: none; }
.toc__list a:hover { text-decoration: underline; text-decoration-color: var(--c-accent); }
.toc__list li + li { border-top: 1px solid var(--c-raised); }
.legal__body section { margin-top: var(--s-7); }
.legal__body section:first-child { margin-top: 0; }
.legal__body h2 { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.625rem); margin-bottom: var(--s-4); }
.legal__body h3 { margin: var(--s-5) 0 var(--s-2); }
.legal__body p, .legal__body ul, .legal__body ol { margin-top: var(--s-3); }
.legal__body ul, .legal__body ol { padding-left: 1.4rem; }
.legal__body li + li { margin-top: var(--s-2); }
.legal__body li::marker { color: var(--c-accent-text); }
/* Tablo kendi kabında yatay kayar; sayfa taşmaz. */
.table-wrap {
  margin-top: var(--s-4); overflow-x: auto;
  border: var(--border) solid var(--c-stroke); border-radius: var(--radius);
  background: var(--c-card);
}
.table-wrap table { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: var(--t-small); line-height: 1.45; }
.table-wrap th, .table-wrap td { padding: var(--s-3); text-align: left; vertical-align: top; border-top: 1px solid var(--c-raised); }
.table-wrap thead th { border-top: 0; border-bottom: var(--border) solid var(--c-stroke); font: 700 var(--t-label)/1.3 var(--f-mono); color: var(--c-ink-soft); }
.table-wrap tbody th { font-weight: 700; }
.back-top { margin-top: var(--s-7); padding-top: var(--s-4); border-top: var(--border) solid var(--c-stroke); font-weight: 700; }
.back-top a::before { content: "↑"; display: inline-block; margin-right: var(--s-2); text-decoration: none; }
@media (min-width: 64rem) {
  .legal { grid-template-columns: 16rem minmax(0, 1fr); column-gap: var(--s-8); row-gap: 0; }
  .legal__intro { grid-column: 2; grid-row: 1; }
  .toc { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 5.5rem; max-height: calc(100vh - 7rem); overflow: auto; }
  .legal__body { grid-column: 2; grid-row: 2; margin-top: var(--s-7); }
}

.nf__code {
  font-size: clamp(5rem, 3rem + 12vw, 10rem); font-weight: 800; line-height: 1;
  color: var(--c-ink); text-shadow: .05em .05em 0 var(--c-accent);
}
.nf__actions { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* ------------------------------------------------------------------ footer */
.site-footer {
  position: relative;
  background: var(--c-footer-bg); color: var(--c-footer-ink);
  padding-block: calc(var(--s-8) + 12px) var(--s-7);
}
/* Gün batımı şeridi: dört bant (altın, accent, magenta, mor). */
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px;
  background: linear-gradient(180deg, var(--c-gold) 0 25%, var(--c-accent) 25% 50%, var(--c-magenta) 50% 75%, var(--c-violet) 75% 100%);
}
.site-footer a { color: var(--c-footer-ink); }
.site-footer a:hover { color: var(--c-gold); }
.site-footer :focus-visible { outline-color: var(--c-gold); }
.site-footer__grid { display: grid; gap: var(--s-6); }
.site-footer__name { font: 900 1.5rem/1 var(--f-display); font-stretch: var(--stretch-display); margin-bottom: var(--s-3); }
.site-footer__nav ul { list-style: none; padding: 0; display: grid; gap: 0 var(--s-5); grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.site-footer__nav a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; }
.site-footer__fine { color: var(--c-footer-soft); font-size: .875rem; max-width: var(--measure); }
.site-footer__fine p + p { margin-top: var(--s-3); }
@media (min-width: 56rem) {
  .site-footer__grid { grid-template-columns: 1fr 1.2fr; }
  .site-footer__fine { grid-column: 1 / -1; padding-top: var(--s-5); border-top: 1px solid var(--c-footer-soft); max-width: none; }
}

/* ------------------------------------------------------------------ hareket tercihi */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}