/* ═══════════════════════════════════════════════════════════════
   ARKUN — tasarım sistemi
   Tek kaynak. Her sayfa bunu yükler, sayfaya özel kural yazmaz.

   Palet KİLİTLİ: #FF5E00 / #0A0A0A uygulamadaki ArkunColors ile aynı.
   Değişen şey renk değil, yapı ve hareket.
   ═══════════════════════════════════════════════════════════════ */

/* ── TOKENLAR ─────────────────────────────────────────────────── */
:root {
  /* Zemin: saf siyah DEĞİL. OLED ekranda saf siyah kaydırmada iz bırakıyor
     ve turuncu üzerine bindiğinde kenar titriyor. */
  --bg:        #0A0A0A;
  --bg-alt:    #101010;
  --card:      #151515;
  --card-hi:   #1C1B1A;
  --border:    #262524;
  --border-hi: #3A3836;

  /* Metin hafif sıcak: nötr gri, turuncu vurgunun yanında mavimsi duruyordu */
  --text:      #F4F1EE;
  --dim:       #A29C96;
  --dimmer:    #6B6560;

  --accent:      #FF5E00;
  --accent-soft: #FF8A3D;
  --accent-glow: rgba(255, 94, 0, 0.35);
  --accent-dim:  rgba(255, 94, 0, 0.12);

  --danger: #E5484D;
  --ok:     #22C55E;

  /* Boşluk — 4px tabanlı, yoğunluk "standart" */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  /* Bölüm dolgusu ekranla ölçekleniyor; 128px mobilde çok, masaüstünde az */
  --pad-y: clamp(64px, 9vw, 128px);
  --pad-x: clamp(20px, 5vw, 64px);
  --maxw: 1240px;
  --maxw-text: 62ch;

  --r-1: 6px; --r-2: 10px; --r-3: 16px; --r-4: 24px;

  /* Hareket — tek yerden yönetiliyor ki ritim her sayfada aynı olsun */
  --e-out:  cubic-bezier(0.16, 1, 0.3, 1);      /* expo.out: giriş */
  --e-in:   cubic-bezier(0.7, 0, 0.84, 0);      /* çıkış, girişten hızlı */
  --e-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 160ms;
  --t-mid:  260ms;
  --t-slow: 700ms;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Bebas Neue', 'Inter', Impact, sans-serif;
  /* Telemetri etiketleri. Uygulamadaki 'monospace' fallback'i platforma göre
     farklı font çiziyordu; burada gerçek bir font paketleniyor. */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Roboto Mono', monospace;

  --z-bg: 0;
  --z-content: 1;
  --z-nav: 50;
  --z-modal: 100;
}

/* ── SIFIRLAMA ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--bg);
  scroll-behavior: smooth;
  /* Yapışkan başlığın altına çapa atan bağlantılar başlığın ARKASINA
     kaymasın diye. Aksi halde #kurulum'a tıklayınca başlık kesiyor. */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;          /* yatay kaydırma asla olmasın */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

::selection { background: var(--accent); color: #0A0A0A; }

/* Klavye odağı. :focus-visible kullanılıyor ki fareyle tıklayanda
   halka çıkmasın ama Tab ile gezende mutlaka çıksın. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

/* Ekran okuyucuya görünür, göze görünmez */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Klavyeyle gelen ziyaretçi menüyü atlayıp içeriğe geçebilsin */
.skip-link {
  position: absolute; top: -100px; left: var(--s-4); z-index: 200;
  background: var(--accent); color: #0A0A0A;
  padding: var(--s-3) var(--s-5); border-radius: var(--r-2);
  font-weight: 700; transition: top var(--t-fast) var(--e-out);
}
.skip-link:focus { top: var(--s-4); }

/* ── TİPOGRAFİ ────────────────────────────────────────────────── */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
h1.display { font-size: clamp(3rem, 11vw, 8.5rem); }
h2.display { font-size: clamp(2.2rem, 6.2vw, 5rem); }
h3.display { font-size: clamp(1.6rem, 3vw, 2.4rem); }

/* Telemetri etiketi — rally bilgisayarı diline ait küçük üst başlık */
.eyebrow {
  font-family: var(--font-mono);
  font-size: clamp(10px, 1.1vw, 12px);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.eyebrow::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--accent);
  flex: none;
}
.eyebrow--plain::before { display: none; }
.eyebrow--dim { color: var(--dim); }
.eyebrow--dim::before { background: var(--border-hi); }

.lead {
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  line-height: 1.6;
  color: var(--dim);
  max-width: var(--maxw-text);
}
.body-text { color: var(--dim); max-width: var(--maxw-text); }
.accent { color: var(--accent); }

/* ── DÜZEN ────────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.section { padding-block: var(--pad-y); position: relative; }
.section--alt { background: var(--bg-alt); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }

.stack-2 > * + * { margin-top: var(--s-2); }
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-5 > * + * { margin-top: var(--s-5); }
.stack-6 > * + * { margin-top: var(--s-6); }

.section-head { max-width: 760px; margin-bottom: var(--s-8); }
.section-head .eyebrow { margin-bottom: var(--s-4); }
.section-head .lead { margin-top: var(--s-5); }

/* İnce bölüm ayracı — turuncu ortadan sönerek çıkıyor */
.rule {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, var(--border-hi) 22%, var(--border-hi) 78%, transparent);
}

/* ── DÜĞMELER ─────────────────────────────────────────────────── */
/* Dokunma hedefi 44px'in altına HİÇBİR koşulda inmiyor */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 0 var(--s-6);
  border-radius: var(--r-2);
  font-weight: 600;
  font-size: 0.94rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform var(--t-fast) var(--e-out),
    background-color var(--t-fast) var(--e-soft),
    border-color var(--t-fast) var(--e-soft),
    box-shadow var(--t-mid) var(--e-soft);
}
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primary {
  background: var(--accent);
  color: #0A0A0A;
  box-shadow: 0 0 0 0 var(--accent-glow);
}
.btn--primary:hover {
  background: var(--accent-soft);
  box-shadow: 0 6px 30px -6px var(--accent-glow);
}
.btn--ghost {
  border: 1px solid var(--border-hi);
  color: var(--text);
  background: rgba(255, 255, 255, 0.02);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

/* Basma geri bildirimi — dokunmatikte hover yok, basış hissi buradan geliyor */
.btn:active { transform: scale(0.97); }

.btn--lg { min-height: 56px; padding: 0 var(--s-7); font-size: 1rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Metin bağlantısı — altı çizgi hover'da soldan sağa çiziliyor */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  color: var(--accent); font-weight: 600; font-size: 0.94rem;
  min-height: 44px;
}
.link-arrow svg {
  width: 16px; height: 16px;
  transition: transform var(--t-mid) var(--e-out);
}
.link-arrow:hover svg { transform: translateX(5px); }

/* ── KARTLAR ──────────────────────────────────────────────────── */
.grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }

.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--s-6);
  overflow: hidden;
  transition:
    border-color var(--t-mid) var(--e-soft),
    background-color var(--t-mid) var(--e-soft),
    transform var(--t-mid) var(--e-out);
}
/* Üst kenarda turuncu bir tarama — hover'da soldan sağa açılıyor */
.card::before {
  content: '';
  position: absolute; inset: 0 auto auto 0;
  height: 1px; width: 100%;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow) var(--e-out);
}
.card:hover, .card:focus-within {
  border-color: var(--border-hi);
  background: var(--card-hi);
}
.card:hover::before, .card:focus-within::before { transform: scaleX(1); }

a.card:hover { transform: translateY(-3px); }

.card__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-2);
  background: var(--accent-dim);
  color: var(--accent);
  margin-bottom: var(--s-5);
}
.card__icon svg { width: 22px; height: 22px; }
.card h3 {
  font-size: 1.12rem; font-weight: 700;
  letter-spacing: -0.01em; margin-bottom: var(--s-3);
}
.card p { color: var(--dim); font-size: 0.95rem; line-height: 1.6; }
.card__foot { margin-top: var(--s-5); }

/* Canlı/aktif kart — HUD köşe braketleri. Sadece "şu an aktif" anlamı
   taşıyan yerde kullanılıyor; her karta konursa süs olur. */
.card--live { border-color: rgba(255, 94, 0, 0.3); }
.card--live::after {
  content: '';
  position: absolute; inset: 8px;
  pointer-events: none;
  border: 1px solid var(--accent);
  clip-path: polygon(
    0 0, 18px 0, 18px 1px, 1px 1px, 1px 18px, 0 18px,
    0 100%, 18px 100%, 18px calc(100% - 1px), 1px calc(100% - 1px), 1px calc(100% - 18px), 0 calc(100% - 18px),
    100% 100%, calc(100% - 18px) 100%, calc(100% - 18px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 18px), 100% calc(100% - 18px),
    100% 0, calc(100% - 18px) 0, calc(100% - 18px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) 18px, 100% 18px
  );
  opacity: 0.55;
}

/* ── HUD GÖSTERGESİ ───────────────────────────────────────────── */
/* Rally bilgisayarı dili: uygulamanın uyarı ekranından bir kesit.
   Ekran görüntüsü değil, kodla çizim — her çözünürlükte net. */
.hud-readout {
  font-family: var(--font-mono);
  font-size: 12px;
  border: 1px solid rgba(255, 94, 0, 0.28);
  border-radius: var(--r-2);
  background: linear-gradient(160deg, rgba(255, 94, 0, 0.07), transparent 60%), var(--bg);
  padding: var(--s-5);
  display: grid; gap: var(--s-3);
}
.hud-readout__row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-4);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dimmer);
}
.hud-readout__row b {
  color: var(--text); font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.hud-readout__bar {
  height: 4px; border-radius: 2px;
  background: var(--border); overflow: hidden; margin-top: var(--s-2);
}
.hud-readout__bar i {
  display: block; height: 100%; width: 4%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
  animation: hudClose 5.2s var(--e-soft) infinite;
}
/* Uyarı çemberine yaklaşma: çubuk dolar, başa döner */
@keyframes hudClose {
  0%   { width: 4%; }
  72%  { width: 96%; }
  86%  { width: 96%; }
  100% { width: 4%; }
}
.hud-readout__note {
  color: var(--accent);
  letter-spacing: 0.14em; text-transform: uppercase; font-size: 10px;
}

/* ── NUMARALI ADIMLAR ─────────────────────────────────────────── */
.steps { counter-reset: step; display: grid; gap: var(--s-5); }
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-5);
  align-items: start;
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--border);
}
.step:last-child { border-bottom: 0; padding-bottom: 0; }
.step__no {
  counter-increment: step;
  font-family: var(--font-mono);
  font-size: 0.82rem; font-weight: 500;
  color: var(--accent);
  padding-top: 4px;
  min-width: 3ch;
}
.step__no::before { content: counter(step, decimal-leading-zero); }
.step h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: var(--s-2); }
.step p { color: var(--dim); font-size: 0.95rem; }

/* ── ÜST MENÜ ─────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0;
  z-index: var(--z-nav);
  /* Kaydırma başlayınca zemin doluyor — JS .is-stuck ekliyor */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--t-mid) var(--e-soft),
    border-color var(--t-mid) var(--e-soft),
    backdrop-filter var(--t-mid) var(--e-soft);
  /* Çentikli telefonlarda menü çentiğin altına düşmesin */
  padding-top: env(safe-area-inset-top);
}
.nav.is-stuck {
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--border);
}
/* Aydınlık bir hero'nun üstünde menü metni zemine karışıyordu (parallax
   sahnesinin gökyüzünde ölçüldü: gri metin, açık mavi zemin). Yapışmadan
   ÖNCE üstte ince bir karartma duruyor; yapışınca .is-stuck kendi opak
   zeminini getirdiği için bu sönüyor. */
.nav::before {
  content: '';
  position: absolute; inset: 0 0 auto 0;
  /* 160% idi; hero'daki güneşin üstüne biniyordu. 125% menü metnini
     hâlâ okunur tutuyor ama gökyüzünü serbest bırakıyor. */
  height: 125%;
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0.66), rgba(10, 10, 10, 0.28) 62%, transparent);
  pointer-events: none;
  transition: opacity var(--t-mid) var(--e-soft);
}
.nav.is-stuck::before { opacity: 0; }

.nav__inner {
  position: relative;   /* karartmanın üstünde kalsın */
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5);
  height: 68px;
}
.nav__logo {
  font-family: var(--font-display);
  font-size: 1.7rem;
  letter-spacing: 0.14em;
  text-indent: 0.14em;      /* letter-spacing'in sağda bıraktığı boşluk */
  color: var(--text);
  line-height: 1;
  display: flex; align-items: center;
  min-height: 44px;
}
.nav__logo span { color: var(--accent); }

.nav__links { display: flex; align-items: center; gap: var(--s-2); }
.nav__links a {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: var(--s-3);
  font-size: 0.9rem; font-weight: 500; color: var(--dim);
  transition: color var(--t-fast) var(--e-soft);
}
.nav__links a::after {
  content: '';
  position: absolute; left: var(--s-3); right: var(--s-3); bottom: 16px;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-mid) var(--e-out);
}
.nav__links a:hover { color: var(--text); }
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--text); }

.nav__cta { display: flex; align-items: center; gap: var(--s-3); }

.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  place-items: center;
  border-radius: var(--r-2);
  color: var(--text);
}
.nav__toggle svg { width: 22px; height: 22px; }

/* Mobil menü — tam ekran panel. Alt menü çubuğu değil çünkü site
   uygulama değil; sayfa sayısı 5 ve derin gezinme yok. */
.nav__panel {
  position: fixed; inset: 0;
  z-index: calc(var(--z-nav) - 1);
  background: rgba(10, 10, 10, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--s-8) var(--pad-x);
  padding-top: calc(var(--s-8) + env(safe-area-inset-top));
  gap: var(--s-2);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-mid) var(--e-soft), visibility var(--t-mid);
}
.nav__panel.is-open { opacity: 1; visibility: visible; }
.nav__panel a {
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 3rem);
  letter-spacing: 0.03em;
  color: var(--text);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--border);
  opacity: 0; transform: translateY(14px);
  transition: opacity 420ms var(--e-out), transform 420ms var(--e-out), color var(--t-fast);
}
.nav__panel.is-open a { opacity: 1; transform: none; }
.nav__panel a:hover, .nav__panel a:active { color: var(--accent); }
.nav__panel .btn { margin-top: var(--s-6); }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__cta .btn--ghost { display: none; }
  .nav__toggle { display: grid; }
}
/* Dar telefonda menüdeki kurulum düğmesi başlığın yarısını kaplıyordu.
   Kaldırılıyor: aynı çağrı hero'nun içinde ve açılan menünün altında
   zaten var, ikisi de daha büyük ve daha kolay basılıyor. */
@media (max-width: 600px) {
  .nav__cta .btn--primary { display: none; }
}
/* Kaydırma işareti dar ekranda telemetri şeridinin üstüne biniyordu */

/* ── ALT BİLGİ ────────────────────────────────────────────────── */
.footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  padding-block: var(--s-8) var(--s-6);
  padding-bottom: calc(var(--s-6) + env(safe-area-inset-bottom));
}
.footer__grid {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  margin-bottom: var(--s-7);
}
.footer h4 {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--dimmer); margin-bottom: var(--s-4);
}
/* Dokunma hedefi 44px kuralı alt bilgide de geçerli — parmakla en çok
   ıskalanan yer burası, bağlantılar alt alta ve sık. */
.footer__links a {
  display: flex; align-items: center;
  min-height: 44px; padding-block: var(--s-2);
  color: var(--dim); font-size: 0.92rem;
  transition: color var(--t-fast) var(--e-soft);
}
.footer__links a:hover { color: var(--accent); }
.footer__bar {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  justify-content: space-between; align-items: center;
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  color: var(--dimmer); font-size: 0.85rem;
}
/* Sürüm rozeti — içeriğini her yayında predeploy kancası yazıyor */
.footer__bar .version-badge {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.12em;
  color: var(--dimmer);
  order: 3; width: 100%;
}
@media (min-width: 720px) {
  .footer__bar .version-badge { order: 0; width: auto; text-align: center; }
}

/* ── HAREKET: KAYDIRMAYLA BELİRME ─────────────────────────────── */
/* AŞAMALI İYİLEŞTİRME — bu bölümün en önemli kuralı:
   içerik VARSAYILAN OLARAK GÖRÜNÜR. Gizleme yalnızca .js-motion
   sınıfı varken devreye giriyor, o sınıfı da <head>'deki küçük betik
   ekliyor. Yani JS çalışmazsa, IntersectionObserver desteklenmezse ya da
   betik bir hata alırsa sayfa BOŞ KALMIYOR — sadece animasyonsuz açılıyor.
   (Bu satırlar olmadan hero'nun altındaki her şey opacity:0'da takılıydı;
   tam sayfa ekran görüntüsünde ölçülerek görüldü.)

   Sadece transform ve opacity animasyonlanıyor — width/height/top
   animasyonu düzeni yeniden hesaplatıyor, jank kaynağı. */
.js-motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 620ms var(--e-out),
    transform 620ms var(--e-out);
  /* Kademeli giriş: gecikmeyi JS custom property olarak yazıyor.
     42ms × en fazla 8 öğe — sonrası bekleme hissi veriyor. */
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js-motion [data-reveal].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;      /* iş bitince katmanı bırak, bellek boşalsın */
}

/* ── SAYAÇ ────────────────────────────────────────────────────── */
.stat { text-align: left; }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  color: var(--accent);
  line-height: 1;
  /* Sayı değişirken genişlik oynamasın */
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 32px var(--accent-glow);
}
.stat__label {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  line-height: 1.7;
  color: var(--dimmer); margin-top: var(--s-3);
}
/* Alt alta, aralarında ince ayraç — tablo değil künye gibi dursun */
.stat-list { display: grid; gap: var(--s-6); }
.stat-list > * + * {
  border-top: 1px solid var(--border);
  padding-top: var(--s-6);
}

/* ── MADDE (başlık + tek satır) ───────────────────────────────── */
/* Rakamların yerini aldı. Başlık display fontta ama rakamlardan KÜÇÜK:
   "Radar ve kontrol noktası" iki satıra sarıyor, eski 3.6rem puntoda
   blok üç maddeyi de ezip bölümü ağırlaştırıyordu. */
.point__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.9vw, 2.6rem);
  line-height: 0.98;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 34px var(--accent-glow);
}
.point__text {
  margin-top: var(--s-3);
  color: var(--dim);
  font-size: 0.98rem;
  line-height: 1.55;
  max-width: 36ch;
}

/* ── TELEFON ÇERÇEVESİ ────────────────────────────────────────── */
.phone {
  position: relative;
  width: min(280px, 72vw);
  /* Gerçek telefondan çekilmiş görüntüler geldi: 945×2048, oran 0.461.
     Çerçeve de o orana döndü. (Arada bir süre 656/958 idi — o zamanki
     görüntüler geniş bir pencereden alınmıştı ve dar çerçevede
     haritanın kenar düğmeleri kırpılıyordu.) */
  aspect-ratio: 9 / 19.5;
  border-radius: 38px;
  padding: 9px;
  background: linear-gradient(160deg, #2E2C2A, #121110 40%, #2A2826);
  box-shadow:
    0 40px 80px -30px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.05);
  flex: none;
}
.phone__screen {
  width: 100%; height: 100%;
  border-radius: 30px;
  overflow: hidden;
  background: var(--bg);
  position: relative;
}
/* contain, cover DEĞİL: çerçeve oranı görüntünün oranıyla aynı, o yüzden
   ikisi de aynı sonucu veriyor. contain seçildi ki farklı oranda bir
   görüntü gelirse kırpmak yerine sığdırsın — ürün arayüzünün kenarı
   kesilmesin (harita ekranının yan düğmeleri bir kez böyle kaybolmuştu). */
.phone__screen img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center top;
}

/* Geniş çerçeve — henüz telefondan çekilmemiş ekranlar için.
   Şu an yalnızca rota.html kullanıyor: o görüntü geniş bir pencereden
   alındı (oran 0.695), dar telefon çerçevesinde altlı üstlü siyah
   bant kalıyordu. */
.phone--wide { width: min(320px, 76vw); aspect-ratio: 656 / 958; border-radius: 30px; padding: 8px; }
.phone--wide .phone__screen { border-radius: 23px; }
.phone--wide::after { display: none; }
/* Ekran görüntüsü gelmeden önceki yer tutucu */
.phone__ph {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center;
  gap: var(--s-3); padding: var(--s-5);
  text-align: center;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 94, 0, 0.14), transparent 60%),
    var(--card);
  color: var(--dimmer);
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
}
.phone__ph svg { width: 30px; height: 30px; color: var(--border-hi); }

/* Çentik. Yalnızca gerçek telefon oranındaki çerçevelerde;
   .phone--wide onu kendi kuralında gizliyor. */
.phone::after {
  content: '';
  position: absolute; top: 9px; left: 50%;
  transform: translateX(-50%);
  width: 34%; height: 22px;
  background: #121110;
  border-radius: 0 0 14px 14px;
  z-index: 2;
}

/* ── SOS EKRANI (kodla çizim) ─────────────────────────────────── */
/* Ekran görüntüsü DEĞİL — HTML/CSS ile çizildi. Sebebi tek değil:
   her çözünürlükte net kalıyor, dosya boyutu sıfır, ve metni
   Türkçe olarak burada duruyor (ekran görüntüsünde metin resme gömülü
   kalır, arama motoru okuyamaz).
   Gerçek ekran görüntüsü gelince bu blok bir <img> ile değişebilir. */
.ui-sos {
  height: 100%;
  display: flex; flex-direction: column;
  background:
    radial-gradient(90% 55% at 50% 34%, rgba(255, 94, 0, 0.20), transparent 70%),
    #0A0A0A;
  padding: 34px var(--s-4) var(--s-4);
  font-size: 11px;
  text-align: center;
}
.ui-sos__bar {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dimmer);
}
.ui-sos__body {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--s-3);
}
.ui-sos__ring {
  position: relative;
  width: 116px; height: 116px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid rgba(255, 94, 0, 0.32);
  margin-bottom: var(--s-3);
}
/* Nabız: dıştaki halka büyüyerek sönüyor. transform + opacity,
   düzeni yeniden hesaplatmıyor. */
.ui-sos__ring::before {
  content: '';
  position: absolute; inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: sosPulse 1.8s var(--e-out) infinite;
}
@keyframes sosPulse {
  0%   { transform: scale(1);    opacity: 0.85; }
  100% { transform: scale(1.45); opacity: 0; }
}
.ui-sos__count {
  font-family: var(--font-display);
  font-size: 3.4rem; line-height: 1;
  color: var(--accent);
  text-shadow: 0 0 26px var(--accent-glow);
  font-variant-numeric: tabular-nums;
}
.ui-sos__title {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text);
}
.ui-sos__sub { color: var(--dim); font-size: 11px; line-height: 1.5; max-width: 20ch; }
.ui-sos__cancel {
  border: 1px solid var(--border-hi);
  border-radius: var(--r-2);
  padding: 11px;
  font-size: 11px; font-weight: 600; color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}
.ui-sos__send {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dimmer); margin-top: var(--s-3);
}
.ui-sos__send b { color: var(--accent); font-weight: 500; }

/* ── HERO: SİNEMATİK SAHNE ────────────────────────────────────── */
.hero {
  position: relative;
  /* svh = küçük görünüm yüksekliği. Mobilde adres çubuğu kayarken 100vh
     sıçrıyor ve içerik ekrandan taşıyordu; svh sabit kalıyor. */
  height: 100svh;
  min-height: 560px;
  max-height: 1080px;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
}
.hero--short { height: 62svh; min-height: 420px; }

.hero__media { position: absolute; inset: 0; z-index: 0; }

/* Poster: sahne kurulana kadar (ve kurulamazsa) görünen kare.
   İlk boyanan büyük öğe bu — yani LCP. 72 KB. */
.hero__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.hero__layer { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
/* Tanecik ve alt perde ön planın DA üstünde: sahne tek bir fotoğraf
   gibi dursun, katmanlar ayrı ayrı yapıştırılmış gibi görünmesin. */
.hero__grain { z-index: 4; }
.hero__scrim { z-index: 5; }

/* Kenar karartması: kenarları söndürüp ortayı öne çıkarıyor */
.hero__vignette {
  background: radial-gradient(118% 88% at 50% 42%, transparent 42%, rgba(0, 0, 0, 0.74) 100%);
}
/* Alt perde: metnin okunabilirliği buradan geliyor, fotoğraf ne olursa olsun */
.hero__scrim {
  background: linear-gradient(to top,
    var(--bg) 0%,
    rgba(10, 10, 10, 0.92) 12%,
    rgba(10, 10, 10, 0.55) 38%,
    transparent 68%);
}
/* Filmsi tanecik. mix-blend-mode: screen KULLANMA — turuncu parlamayı
   katlayıp altındaki metnin kontrastını düşürüyor. */
.hero__grain {
  opacity: 0.11;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  animation: grainShift 0.7s steps(4) infinite;
}
@keyframes grainShift {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(-3%, 2%, 0); }
  50%  { transform: translate3d(2%, -3%, 0); }
  75%  { transform: translate3d(-2%, -2%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}


.hero__inner {
  position: relative; z-index: 6;
  height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  /* İçerik kadrajda kasıtlı olarak aşağıda duruyor: üstteki boşluk
     fotoğrafın kendisine ve dev kelimeye kalıyor. */
  padding-bottom: clamp(26px, 3.5vh, 48px);
  padding-top: 100px;
}


.hero__content { max-width: 720px; }
.hero__content .eyebrow { margin-bottom: var(--s-5); }
.hero__content h1 { margin-bottom: var(--s-5); }
.hero__content .lead { margin-bottom: var(--s-7); }

/* Alt telemetri şeridi — rally bilgisayarı dili. Süs değil: sitenin
   neyi vaat ettiğini tek satırda söylüyor. */
.hero__telemetry {
  display: flex; flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dimmer);
}
.hero__telemetry b { color: var(--accent); font-weight: 500; }


/* Hero girişi: satırlar sırayla, bulanıktan nete.
   Kaydırma sistemine bağlı değil — hero zaten ekranda.
   Burada da gizleme .js-motion'a bağlı: betik çalışmazsa hero
   animasyonsuz ama TAM görünür açılıyor. */
.js-motion .hero [data-in] {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(8px);
  animation: heroIn 1100ms var(--e-out) forwards;
  animation-delay: var(--in-delay, 0ms);
}
@keyframes heroIn {
  to { opacity: 1; transform: none; filter: none; }
}

@media (max-width: 720px) {
  .hero__telemetry { gap: var(--s-2) var(--s-5); font-size: 10px; }
}

/* ── İÇ SAYFA HERO'SU ─────────────────────────────────────────── */
/* Özellik sayfalarında tuval çalışmıyor: her sayfada sahne kurmak
   hem gereksiz hem pahalı. Aynı fotoğraf statik duruyor, sinematik dil
   perde + tanecik ile korunuyor. */
.hero--still {
  height: auto;
  min-height: 0; max-height: none;
  padding-top: clamp(120px, 18vh, 190px);
  /* Alt dolgu kasıtlı olarak dar: altındaki bölümün kendi --pad-y'si
     zaten geliyor, ikisi toplanınca hero ile içerik arasında koca bir
     boşluk kalıyordu (masaüstünde ölçüldü: ~220px). */
  padding-bottom: clamp(32px, 4vh, 56px);
  display: flex; align-items: flex-end;
}
.hero--still .hero__poster {
  /* Fotoğrafın üst kısmı gökyüzü — metnin arkasında kalması istenen kısım o */
  object-position: 50% 34%;
  filter: saturate(0.85);
}
.hero--still .hero__inner {
  /* padding-block, `padding` DEĞİL. Kısayol kullanıldığında .wrap'ten
     gelen padding-inline de siliniyordu: 1240px altındaki her ekranda
     hero başlığı ve kırıntı yolu ekranın soluna yapışıyor, mobilde ilk
     harf kırpılıyordu. Sıfırlanmak istenen yalnızca dikey boşluk. */
  height: auto; padding-block: 0; display: block;
}
.hero--still .hero__scrim {
  background: linear-gradient(to top,
    var(--bg) 2%,
    rgba(10, 10, 10, 0.94) 26%,
    rgba(10, 10, 10, 0.68) 62%,
    rgba(10, 10, 10, 0.45) 100%);
}
.hero--still h1.display { font-size: clamp(2.6rem, 7.5vw, 5.6rem); }

/* Kırıntı yolu — ziyaretçi hangi dalda olduğunu bilsin */
.crumbs {
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dimmer);
  margin-bottom: var(--s-5);
}
.crumbs a { color: var(--dimmer); min-height: 44px; display: inline-flex; align-items: center; }
.crumbs a:hover { color: var(--accent); }
.crumbs span { color: var(--accent); }

/* ── DİĞER ÖZELLİKLER ─────────────────────────────────────────── */
.crosslinks {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.crosslink {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  min-height: 72px;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--card);
  font-weight: 600;
  transition: border-color var(--t-mid) var(--e-soft), color var(--t-fast), transform var(--t-mid) var(--e-out);
}
.crosslink svg { width: 16px; height: 16px; color: var(--accent); transition: transform var(--t-mid) var(--e-out); }
.crosslink:hover { border-color: var(--accent); transform: translateY(-2px); }
.crosslink:hover svg { transform: translateX(4px); }

/* ── UYARI KUTUSU ─────────────────────────────────────────────── */
/* Ürünün ne OLMADIĞINI söyleyen yer. Güvenlik sayfasında şart. */
.notice {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-4);
  align-items: start;
  border: 1px solid var(--border-hi);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-2);
  background: var(--bg-alt);
  padding: var(--s-5);
}
.notice svg { width: 20px; height: 20px; color: var(--accent); margin-top: 2px; }
.notice p { color: var(--dim); font-size: 0.93rem; }
.notice strong { color: var(--text); }

/* ── ÜRÜN VİTRİNİ ─────────────────────────────────────────────── */
.showcase {
  display: flex; gap: clamp(16px, 4vw, 48px);
  align-items: center; justify-content: center;
  flex-wrap: wrap;
}
/* Ortadaki telefon öne çıksın — üçlü dizilim düz olursa vitrin ölü duruyor */
.showcase .phone:nth-child(2) { transform: translateY(-28px) scale(1.04); z-index: 2; }
@media (max-width: 860px) {
  .showcase { gap: var(--s-4); }
  .showcase .phone:nth-child(2) { transform: none; }
  .showcase .phone:nth-child(3) { display: none; }
}
@media (max-width: 560px) {
  .showcase .phone:nth-child(1) { display: none; }
}

/* ── İKİ SÜTUN: METİN + GÖRSEL ────────────────────────────────── */
.split {
  display: grid;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse > *:first-child { order: 2; }
}
.split__visual { display: flex; justify-content: center; }

/* ── KURULUM KARTLARI ─────────────────────────────────────────── */
.install {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.install__card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--s-6);
}
.install__card h3 {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: 1rem; font-weight: 700; margin-bottom: var(--s-5);
}
.install__card h3 svg { width: 20px; height: 20px; color: var(--accent); }
.install__card ol { counter-reset: i; display: grid; gap: var(--s-4); }
/* DİKKAT — burası grid OLAMAZ. Grid/flex yapıldığında satırın içindeki
   <b> ve <kbd> etiketleri kendi hücrelerine düşüp cümleyi parçalıyor
   ("Alttaki | Paylaş | düğmesine dokun" gibi üç satır). Numara mutlak
   konumlandırılıyor, metin normal akışında kalıyor. */
.install__card li {
  counter-increment: i;
  position: relative;
  padding-left: 34px;
  min-height: 22px;
  color: var(--dim); font-size: 0.93rem; line-height: 1.55;
}
.install__card li::before {
  content: counter(i);
  position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-size: 11px;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-dim); color: var(--accent);
}
.install__card li b { color: var(--text); font-weight: 600; }
.install__card kbd {
  font-family: var(--font-mono); font-size: 0.85em;
  background: var(--bg); border: 1px solid var(--border-hi);
  border-radius: var(--r-1); padding: 1px 6px; color: var(--text);
}

/* ── KURULUM: 1. ADIM KUTUSU ──────────────────────────────────
   Kurulumun tek gerçek eylemi burada: uygulamaya giden bağlantı.
   Kartlardan AYRI ve önce duruyor, çünkü iki kart da bu adım
   yapılmadan anlamsız. */
.install-start {
  background: var(--card);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-3);
  padding: var(--s-6);
  margin-bottom: var(--s-6);
}
.install-start h3 {
  font-size: 1.35rem; font-weight: 700;
  margin: var(--s-3) 0 var(--s-4);
}
.install-start .body-text { margin-bottom: var(--s-5); }
.install-start kbd {
  font-family: var(--font-mono); font-size: 0.85em;
  background: var(--bg); border: 1px solid var(--border-hi);
  border-radius: var(--r-1); padding: 1px 6px; color: var(--text);
}
/* Uyarı satırı. Kullanıcının en sık düştüğü tuzak — tanıtım sitesini
   ana ekrana eklemek — burada açıkça yazılı. */
.install-warn {
  margin-top: var(--s-5);
  padding-left: var(--s-4);
  border-left: 2px solid var(--accent);
  color: var(--dim); font-size: 0.87rem; line-height: 1.6;
}

/* ── YANLIŞ KISAYOL UYARISI ───────────────────────────────────
   Tanıtım sitesi ana ekrana eklenmişse (display-mode: standalone)
   site.js bu kutuyu ekliyor. Kullanıcı ikona bastığında uygulama
   yerine bu sayfayı görüyor; tek çıkış yolu buradaki bağlantı. */
.yanlis-kisayol {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  padding: var(--s-4);
  padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom));
}
.yanlis-kisayol__card {
  max-width: 520px; margin: 0 auto; padding: var(--s-5);
  background: var(--card);
  border: 1px solid var(--accent);
  border-radius: var(--r-3);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .55);
}
.yanlis-kisayol__card p {
  color: var(--dim); font-size: 0.88rem; line-height: 1.55;
  margin-bottom: var(--s-4);
}
.yanlis-kisayol__card b { color: var(--text); }
.yanlis-kisayol__row { display: flex; gap: var(--s-3); align-items: center; }
.yanlis-kisayol__row .btn { flex: 1; justify-content: center; }
.yanlis-kisayol__kapat {
  flex: none; width: 36px; height: 36px;
  border: 1px solid var(--border); border-radius: var(--r-1);
  background: transparent; color: var(--dim);
  font-size: 18px; line-height: 1; cursor: pointer;
}

/* ── SON ÇAĞRI ────────────────────────────────────────────────── */
.finale {
  position: relative;
  text-align: center;
  overflow: hidden;
  border-top: 1px solid var(--border);
}
.finale::before {
  content: '';
  position: absolute; inset: auto 0 -60% 0;
  height: 120%;
  background: radial-gradient(60% 100% at 50% 100%, var(--accent-glow), transparent 70%);
  opacity: 0.5;
  pointer-events: none;
}
.finale .wrap { position: relative; }
.finale h2 { margin-bottom: var(--s-5); }
.finale .lead { margin-inline: auto; margin-bottom: var(--s-7); }
.finale .btn-row { justify-content: center; }

/* ── ERİŞİLEBİLİRLİK: HAREKET AZALTMA ─────────────────────────── */
/* Politika TEK anahtardan yönetiliyor: <html data-motion="...">
     "full" → herkeste tam hareket (sitenin varsayılanı, sahibinin kararı)
     "auto" → işletim sistemindeki "hareketi azalt" tercihine uyar
   scene.js ve site.js aynı anahtara bakıyor; üçü birden değişir.

   Gerekçe: Windows'taki "Animasyon efektleri" anahtarı aynı zamanda genel
   bir performans ayarı; onu kapatan ziyaretçilerin çoğu web animasyonunu
   kastetmiyor. Politikayı çevirmek isteyen her sayfada tek kelime değiştirir.

   "auto" seçildiğinde <head>'deki betik .js-motion sınıfını hiç eklemiyor,
   dolayısıyla belirme animasyonları kurulmuyor ve içerik doğrudan görünür
   kalıyor — ziyaretçi boş sayfa değil, hareketsiz sayfa görüyor.
   Aşağıdaki blok geriye kalan süslemeleri (tanecik, kaydırma işareti)
   durduruyor. */
@media (prefers-reduced-motion: reduce) {
  html[data-motion="auto"] { scroll-behavior: auto; }
  html[data-motion="auto"] *,
  html[data-motion="auto"] *::before,
  html[data-motion="auto"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* Üyelere özel bölüm. `hidden` niteliği tarayıcı varsayılanıyla zaten
   gizliyor; kural yine de açıkça yazılı, çünkü .section'a ileride bir
   `display` eklenirse gizleme sessizce bozulurdu. */
[data-uyelere-ozel][hidden] { display: none; }


/* ══ DESTEKÇİ ROZETİ ═══════════════════════════════════════════
   Sitede ve uygulamada AYNI görünmesi gereken tek işaret. Buradaki
   ölçüler Flutter'daki DestekciRozeti widget'ıyla eşleştirildi
   (lib/widgets/destekci_rozeti.dart) — biri değişirse diğeri de
   değişmeli, yoksa aynı kullanıcı iki yerde farklı rozet görür.

   Rozet yalnızca bir TEŞEKKÜR işareti. Hiçbir özelliğin kilidini
   açmıyor, bu yüzden görünürlüğü yüksek ama tonu sakin. */
.destekci-rozet {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent-dim);
  color: var(--accent-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

.destekci-rozet svg {
  width: 14px;
  height: 14px;
  flex: none;
}

/* `display: inline-flex` tarayıcının `hidden` varsayılanını ezerdi;
   rozet destekçi olmayanlarda da görünür kalırdı. */
.destekci-rozet[hidden] { display: none; }

/* Büyük varyant — profil başlığında adın yanında duruyor. */
.destekci-rozet--lg {
  padding: 7px 14px 7px 11px;
  font-size: 13px;
}
.destekci-rozet--lg svg { width: 16px; height: 16px; }

/* Vurgulu uyarı — .notice sakin bir bilgi kutusu, bu ise akışın
   kırılma noktası. Turuncu kenarlık ve zemin, göz kaçırmasın diye. */
.notice--vurgu {
  border-color: var(--accent);
  background: var(--accent-dim);
}
.notice--vurgu p { color: var(--text); }

/* ══ DESTEK PANELİ ═════════════════════════════════════════════
   Üç önerilen tutar. Kademeler arasında ÖZELLİK FARKI YOK — aynı
   sayfada "ekstra özellik açılmıyor" yazıyor; farklı liste yazmak
   sayfayı kendi kendine yalanlatırdı. Fark yalnızca tutarda.

   .card üzerine biniyor, onu tekrar etmiyor: yalnızca kademeye özgü
   parçalar burada. */
.destek-kart {
  display: flex;
  flex-direction: column;
  text-align: center;
}

/* Öne çıkan kademe — kenarlığı turuncu, hafif yukarıda durur. */
.destek-kart--one-cikan {
  border-color: var(--accent);
  border-width: 2px;
}
/* Yükseltme TRANSFORM İLE DEĞİL, margin ile.
   `transform: translateY()` denendi ve sessizce çalışmadı: reveal
   animasyonunun `.js-motion [data-reveal].is-in { transform: none }`
   kuralı daha özgül olduğu için eziyordu. Margin o sistemden bağımsız.
   Alttaki pozitif margin, üstteki negatifi dengeleyip satır
   yüksekliğini bozmuyor. */
@media (min-width: 900px) {
  .destek-kart--one-cikan { margin-block: -14px 14px; }
}

.destek-kart__rozet {
  position: absolute;
  top: 0; right: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-bottom-left-radius: var(--r-3);
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.destek-kart__rozet svg { width: 13px; height: 13px; }

.destek-kart__ad {
  color: var(--dim);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.destek-kart__tutar {
  margin-top: var(--s-5);
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 3.4rem);
  line-height: 1;
  color: var(--text);
  letter-spacing: .02em;
}
/* Tutar henüz girilmemişken gösterilen tire — sayı gibi okunmasın. */
.destek-kart__tutar--bos { color: var(--dimmer); }

.destek-kart__not {
  margin-top: var(--s-2);
  color: var(--dimmer);
  font-size: 12px;
}

.destek-kart__liste {
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  text-align: left;
}
.destek-kart__liste li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  color: var(--dim);
  font-size: 0.92rem;
  line-height: 1.5;
}
.destek-kart__liste svg {
  width: 16px; height: 16px;
  flex: none;
  margin-top: 3px;
  color: var(--accent);
}

/* Düğme kartın en altına yapışsın: kademelerin metinleri farklı
   uzunlukta, aksi halde düğmeler farklı hizalarda duruyordu. */
.destek-kart__alt { margin-top: auto; padding-top: var(--s-6); }
.destek-kart__aciklama {
  margin-top: var(--s-4);
  color: var(--dimmer);
  font-size: 12px;
  line-height: 1.5;
}

/* Destekçiler sayfasındaki isim listesi. Tek sütuna sıkışmasın diye
   auto-fill: az isimken de çok isimken de boşluk dengeli kalıyor. */
.destekci-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.destekci-liste__ad {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--card);
  color: var(--text);
  font-weight: 500;
}

.destekci-liste__ad svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--accent);
}