/*
  bookmerang.app — landing

  Palet uygulamanın KENDİ açık temasından (BookmerangApp →
  lib/core/theme/app_colors.dart, `_light`). Sayfada gerçek ekran görüntüleri
  olduğu için zemin uygulamanınkiyle aynı olmalı, yoksa görüntüler
  yapıştırılmış gibi durur. Ekran görüntüleri de açık temada çekildi.

  Amber'in görevi: geri dönüş anı ve etkileşim anındaki kenarlar. Açık
  zeminde amber METİN kontrastını tutmuyor (≈2.6:1) — bu yüzden hiçbir metin
  amber değil, odak halkası da koyu mürekkep. Başlıklar HER ZAMAN --text.

  CSP `style-src 'self'`: HTML'de hiç style="" yok; gecikmeler bile sınıf.
*/

/* ── Fontlar — kendi sunucumuzdan, üçüncü tarafa istek yok ─────────────── */
@font-face {
  font-family: "Sora";
  src: url("/assets/fonts/sora-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/dmsans-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/dmsans-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* ── Tokenlar ──────────────────────────────────────────────────────────── */
:root {
  --bg: #F5F3EF;
  --surface: #FFFFFF;
  --elevated: #EDEAE4;
  --border: #E0DDD7;
  --text: #1A1714;
  --muted: #6B6560;       /* --bg üzerinde ≈5.3:1, AA gövde metni */
  --amber: #D4873A;
  --amber-dim: #FEF0E0;
  /* Uygulamanın kendi çip tokenları — sorgu gösterimi uygulamadaki
     etiketlerle aynı görünsün, "sistem logu" gibi değil. */
  --chip-bg: #EDEAE4;
  --chip-border: #D8D5CF;
  --src-dot: #D8D5CF;

  --gutter: 16px;
  --section: 96px;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.55, 0, .75, .2);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  --font-head: "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-body: "DM Sans", ui-sans-serif, system-ui, sans-serif;

  color-scheme: light;
}

@media (min-width: 768px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; --section: 160px; } }

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

/* scroll-padding-top: yapışkan navbar (64px) bölüme atlanınca başlığın üstünü
   örtüyordu — "Nasıl çalışır" bağlantısı da tam bunu yapıyordu. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

a { color: inherit; text-decoration: none; }

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

.wrap {
  width: min(1120px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}

h1, h2, h3 { font-family: var(--font-head); font-weight: 600; margin: 0; color: var(--text); }

h1 {
  font-size: clamp(40px, 7vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 14ch;
}

/* Sabit <br> yok: dar sütunda "…hatırlamasan / da / …" gibi tek kelimelik
   satırlar bırakıyordu. Dengeli kırılımı tarayıcı yapıyor. */
h1, h2 { text-wrap: balance; }
/* İki cümleli başlıklarda her cümle bir bütün: sığmazsa cümle bütün olarak
   alt satıra iner ("…saklamaz. Ne / kaydettiğini…" gibi kopmalar olmaz),
   tek başına sütundan genişse kendi içinde normal kırılır. */
.line { display: inline-block; }

h2 {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.lead {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--muted);
  max-width: 36rem;
  margin: 16px 0 0;
}

.body { font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 36rem; margin: 16px 0 0; }

.eyebrow {
  font: 500 13px/1.4 var(--font-body);
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 16px;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}

/* ── Navbar ────────────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(245, 243, 239, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 17px/1 var(--font-head);
  letter-spacing: -0.01em;
}

.nav-links { display: flex; align-items: center; gap: 24px; font-size: 14px; color: var(--muted); }
.nav-links a:hover { color: var(--text); }
.nav-links > * { white-space: nowrap; }
/* Çok dar ekranda (<360) üç öğe sığmıyor; bağlantı zaten hero'daki düğmede var. */
@media (max-width: 359px) { .nav-links a { display: none; } }

/* ── Hero ──────────────────────────────────────────────────────────────── */
/* overflow-x: clip — imza sahnesindeki kart bumerang eğrisiyle sağa uçarken
   ekranın ~300px dışına çıkıyor (390px'te ölçüldü). Kırpma kartın kendi
   kutusunda değil burada, TAM GENİŞLİKTE: masaüstünde uçuş görünür kalır,
   yalnızca ekran kenarında kesilir. `clip` kaydırma kabı oluşturmaz,
   dikey yönü etkilemez. */
.hero { padding: 64px 0 var(--section); overflow-x: clip; }

.hero-grid { display: grid; gap: 64px; }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 32px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  font: 500 15px/1.2 var(--font-body);
  transition: border-color .2s var(--ease-out);
}
/* Amber yalnızca etkileşim anında. */
.btn:hover { border-color: var(--amber); }

.avail { font-size: 14px; color: var(--muted); }

@media (min-width: 1024px) {
  .hero { padding-top: 128px; }
  .hero-grid { grid-template-columns: 7fr 5fr; align-items: center; gap: 48px; }
}

/* ── İmza sahnesi ──────────────────────────────────────────────────────── */
/*
  Altı durum: share → saved → processed → away → notify → returned
  (sıra ve metinler için bkz. index.html'deki yorum).

  JS YALNIZCA data-hero-state'i değiştirir. Özniteliğin değişmesi öğelerin
  animation değerini değiştirdiği için tarayıcı animasyonu kendiliğinden
  yeniden başlatıyor; zamanlama da sürüklenmiyor.

  Taban (hiçbir durum kuralı uygulanmadan) = hikâyenin SONU: kart görünür,
  bumerang köşesinde, bildirim yok. Hareketler YALNIZCA html.js altında;
  JS yoksa ya da hareket azaltılmışsa sahne `returned`'da SABİT durur.
*/
.scene { display: flex; justify-content: center; }

.scene-stage {
  position: relative;
  width: min(100%, 360px);
  padding-top: 84px;        /* etiketler + bildirimin yeri */
}

/* -- Etiketler -- */
.scene-label {
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  text-align: center;
  font: 500 14px/1.4 var(--font-body);
  color: var(--muted);
  opacity: 0;
  transition: opacity .5s var(--ease-out);
}
.scene-label.l-returned { color: var(--text); }

/* -- Bildirim — gerçek hatırlatma push'unun metni -- */
.scene-notif {
  position: absolute;
  top: 0;
  left: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 12px 32px -16px rgba(26, 23, 20, 0.28);
  opacity: 0;
  transform: translateY(-14px) scale(.98);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
  z-index: 3;
}
.notif-icon { flex: none; width: 30px; height: 30px; }
.notif-text { min-width: 0; flex: 1; }
.notif-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.notif-head span:first-child { font-weight: 500; color: var(--text); }
.notif-title, .notif-body { font-size: 13px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-title { font-weight: 500; color: var(--text); margin-top: 1px; }
.notif-body { color: var(--muted); }

/* -- Kart ve paylaş menüsü aynı alanı paylaşıyor -- */
.scene-body { position: relative; }

.scene-share {
  position: absolute;
  inset: 0 0 auto 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 16px 16px 14px;
  box-shadow: 0 20px 48px -28px rgba(26, 23, 20, 0.35);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .35s var(--ease-out), transform .45s var(--ease-out);
  z-index: 2;
}
.share-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.share-link span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding-top: 14px; }
.share-app { display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; }
.share-app i { width: 44px; height: 44px; border-radius: 12px; background: var(--elevated); }
.share-app b { width: 36px; height: 6px; border-radius: 3px; background: var(--elevated); }
.share-app--bm img { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 0 0 1px var(--border); }
.share-app--bm b { width: auto; height: auto; background: none; font: 500 11px/1 var(--font-body); color: var(--text); }
/* Dokunma halkası — yalnız `share` durumunda, bir kez */
.share-app--bm::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 52px;
  height: 52px;
  margin-left: -26px;
  border-radius: 15px;
  border: 2px solid var(--amber);
  opacity: 0;
}

.scene-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  min-height: 148px;
  transition: border-color .6s var(--ease-out), box-shadow .6s var(--ease-out), opacity .6s var(--ease-out);
}

.card-link {
  position: absolute;
  inset: 20px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--muted);
  opacity: 0;
  transition: opacity .4s var(--ease-out);
}
/* Uzun adres dar ekranda kartı taşırmasın: flex çocuğunda üç nokta ancak
   min-width:0 ile çalışıyor. */
.card-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.card-body > * { transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }

.card-source { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.src-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--src-dot); flex: none; }

.card-title { font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; margin-top: 10px; }
.card-meta { font-size: 14px; color: var(--muted); margin-top: 6px; }
.card-summary { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-top: 14px; }
.ok-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }

/* -- Bumerang: kartın sağ üst köşesine oturmuş logo -- */
.scene-boomerang {
  position: absolute;
  top: -14px;
  right: -6px;
  width: 21px;
  height: 28px;
  z-index: 2;
  will-change: transform, opacity;
  /* Geçiş YOK: durum değişince (away → notify) animasyonun bittiği
     görünmez hâlden taban opaklığa bir geçiş başlayıp köşede bir kare
     parlaması yapabiliyordu. */
}

/* -- Durum başına görünürlük -- */

/* share: yalnız paylaş menüsü */
[data-hero-state="share"] .l-share { opacity: 1; }
[data-hero-state="share"] .scene-share { opacity: 1; transform: none; }
[data-hero-state="share"] .scene-card,
[data-hero-state="share"] .scene-boomerang { opacity: 0; }

/* saved: ham bağlantı; gövde henüz yok */
[data-hero-state="saved"] .l-saved { opacity: 1; }
[data-hero-state="saved"] .card-link { opacity: 1; }
[data-hero-state="saved"] .card-body > *,
[data-hero-state="share"] .card-body > * { opacity: 0; transform: translateY(6px); }

/* processed: bağlantı çekilir, üç katman kademeli gelir */
[data-hero-state="processed"] .l-processed { opacity: 1; }
[data-hero-state="processed"] .card-title { transition-delay: .05s; }
[data-hero-state="processed"] .card-meta { transition-delay: .35s; }
[data-hero-state="processed"] .card-summary { transition-delay: .65s; }

/* away + notify: bumerang uzakta, kart arşivde sönük */
/* Etiket bumerang uzaklaştıktan SONRA — yörünge etiket satırından geçiyor. */
[data-hero-state="away"] .l-away { opacity: 1; transition-delay: 1.15s; }
[data-hero-state="away"] .scene-card,
[data-hero-state="notify"] .scene-card { opacity: .42; transition-delay: .35s; }
[data-hero-state="notify"] .scene-boomerang { opacity: 0; }

/* notify: bildirim düşer */
[data-hero-state="notify"] .scene-notif { opacity: 1; transform: none; }

/* returned: bumerang döner, kart amber kenarla canlanır — imza an */
[data-hero-state="returned"] .l-returned { opacity: 1; }
[data-hero-state="returned"] .scene-card {
  border-color: var(--amber);
  box-shadow: 0 16px 48px -20px rgba(212, 135, 58, 0.45);
}
[data-hero-state="returned"] .card-summary { display: none; }

/* -- Hareket: yalnız JS varken -- */
html.js [data-hero-state="share"] .share-app--bm::after { animation: tap-ring .7s var(--ease-out) .85s both; }
html.js [data-hero-state="share"] .share-app--bm img { animation: tap-press .35s var(--ease-out) .95s both; }

html.js [data-hero-state="saved"] .scene-card { animation: drop-in .6s var(--ease-out) both; }
html.js [data-hero-state="saved"] .scene-boomerang { animation: badge-in .5s var(--ease-out) .45s both; }

html.js [data-hero-state="away"] .scene-boomerang { animation: throw-away 1.35s linear .1s both; }

html.js [data-hero-state="returned"] .scene-notif { animation: notif-leave 1.6s var(--ease-out) both; }
html.js [data-hero-state="returned"] .scene-boomerang { animation: throw-return 1.4s linear .15s both; }
html.js [data-hero-state="returned"] .scene-card {
  /* Bumerang karta değdiği an canlanır (dönüş .15 + 1.4 sn; konum
     son %15'te neredeyse yerinde). */
  transition-delay: 1.3s;
  animation: card-lift .5s var(--ease-out) 1.3s both;
}
html.js [data-hero-state="returned"] .l-returned { transition-delay: 1.5s; }

@keyframes tap-ring {
  0%   { opacity: 0; transform: scale(.85); }
  35%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.15); }
}
@keyframes tap-press {
  0%, 100% { transform: none; }
  45%      { transform: scale(.9); }
}

@keyframes drop-in {
  from { opacity: 0; transform: translateY(-28px); }
  to   { opacity: 1; transform: none; }
}

@keyframes badge-in {
  0%   { opacity: 0; transform: scale(.4) rotate(-40deg); }
  70%  { opacity: 1; transform: scale(1.12) rotate(6deg); }
  100% { opacity: 1; transform: none; }
}

/* Bumerang yörüngesi tek bir döngü (elips, yarıçap 130×64 px): köşeden
   yukarı → sola → aşağı → sağa, saat yönünün TERSİNE — sola kıvrılan gerçek
   bir bumerang atışı gibi; logo da uçuş boyunca aynı yöne dönüyor.

   ATIŞ: kısa bir kurulma (hafif geri çekilip ters yöne eğilme), sonra hızlı
   çıkış; uzaklaştıkça yavaşlar, küçülür, söner.
   DÖNÜŞ: döngünün öbür yanından büyüyerek gelir; konum ve dönüş inişe doğru
   yavaşlar, varışta 10° aşıp sönümlü küçük bir salınımla oturur.

   Kareler ÜRETİLDİ (51 nokta): yumuşatma örneklemenin içinde, animasyonun
   kendisi `linear`. Önceki sürümde birkaç ara noktaya `ease-in-out`
   uygulanıyordu; eğri her iki nokta arasında ayrı işlediği için bumerang her
   noktada yavaşlayıp hızlanıyor, yol da köşeli çiziliyordu.
   Yörünge sahnenin İÇİNDE: sağa atıldığında dar ekranda hemen ekran dışına
   çıkıp görünmüyordu. */
@keyframes throw-away {
  0% { opacity: 1; transform: translate(0px, 0px) rotate(0deg) scale(1); }
  2% { opacity: 1; transform: translate(0.5px, 0.8px) rotate(3.6deg) scale(1.01); }
  4% { opacity: 1; transform: translate(1px, 1.5px) rotate(7deg) scale(1.02); }
  6% { opacity: 1; transform: translate(1.4px, 2.1px) rotate(9.9deg) scale(1.028); }
  8% { opacity: 1; transform: translate(1.7px, 2.6px) rotate(12.1deg) scale(1.035); }
  10% { opacity: 1; transform: translate(1.9px, 2.9px) rotate(13.5deg) scale(1.039); }
  12% { opacity: 1; transform: translate(2px, 3px) rotate(14deg) scale(1.04); }
  14% { opacity: 1; transform: translate(1.2px, -4.1px) rotate(-8.3deg) scale(1.008); }
  16% { opacity: 1; transform: translate(-1.2px, -11px) rotate(-30.5deg) scale(0.976); }
  18% { opacity: 1; transform: translate(-4.8px, -17.5px) rotate(-52.8deg) scale(0.945); }
  20% { opacity: 1; transform: translate(-9.8px, -23.7px) rotate(-75.1deg) scale(0.915); }
  22% { opacity: 1; transform: translate(-15.8px, -29.4px) rotate(-97.4deg) scale(0.886); }
  24% { opacity: 1; transform: translate(-22.7px, -34.7px) rotate(-119.6deg) scale(0.857); }
  26% { opacity: 1; transform: translate(-30.4px, -39.6px) rotate(-141.9deg) scale(0.829); }
  28% { opacity: 1; transform: translate(-38.7px, -43.9px) rotate(-164.2deg) scale(0.802); }
  30% { opacity: 1; transform: translate(-47.6px, -47.7px) rotate(-186.5deg) scale(0.776); }
  32% { opacity: 1; transform: translate(-56.8px, -51.1px) rotate(-208.7deg) scale(0.75); }
  34% { opacity: 1; transform: translate(-66.3px, -54px) rotate(-231deg) scale(0.725); }
  36% { opacity: 1; transform: translate(-76px, -56.3px) rotate(-253.3deg) scale(0.701); }
  38% { opacity: 1; transform: translate(-85.6px, -58.3px) rotate(-275.5deg) scale(0.677); }
  40% { opacity: 1; transform: translate(-95.3px, -59.8px) rotate(-297.8deg) scale(0.655); }
  42% { opacity: 0.965; transform: translate(-104.8px, -60.9px) rotate(-320.1deg) scale(0.633); }
  44% { opacity: 0.9; transform: translate(-114.1px, -61.7px) rotate(-342.4deg) scale(0.612); }
  46% { opacity: 0.837; transform: translate(-123.2px, -62.1px) rotate(-364.6deg) scale(0.591); }
  48% { opacity: 0.776; transform: translate(-131.9px, -62.2px) rotate(-386.9deg) scale(0.571); }
  50% { opacity: 0.717; transform: translate(-140.4px, -62px) rotate(-409.2deg) scale(0.552); }
  52% { opacity: 0.661; transform: translate(-148.4px, -61.6px) rotate(-431.5deg) scale(0.534); }
  54% { opacity: 0.607; transform: translate(-156.1px, -61px) rotate(-453.7deg) scale(0.517); }
  56% { opacity: 0.556; transform: translate(-163.3px, -60.2px) rotate(-476deg) scale(0.5); }
  58% { opacity: 0.506; transform: translate(-170.1px, -59.3px) rotate(-498.3deg) scale(0.484); }
  60% { opacity: 0.459; transform: translate(-176.5px, -58.2px) rotate(-520.5deg) scale(0.469); }
  62% { opacity: 0.414; transform: translate(-182.5px, -57.1px) rotate(-542.8deg) scale(0.454); }
  64% { opacity: 0.372; transform: translate(-188px, -55.8px) rotate(-565.1deg) scale(0.44); }
  66% { opacity: 0.332; transform: translate(-193.1px, -54.6px) rotate(-587.4deg) scale(0.427); }
  68% { opacity: 0.294; transform: translate(-197.8px, -53.3px) rotate(-609.6deg) scale(0.415); }
  70% { opacity: 0.258; transform: translate(-202.2px, -52px) rotate(-631.9deg) scale(0.404); }
  72% { opacity: 0.225; transform: translate(-206.1px, -50.7px) rotate(-654.2deg) scale(0.393); }
  74% { opacity: 0.194; transform: translate(-209.7px, -49.4px) rotate(-676.5deg) scale(0.383); }
  76% { opacity: 0.165; transform: translate(-212.9px, -48.2px) rotate(-698.7deg) scale(0.374); }
  78% { opacity: 0.139; transform: translate(-215.9px, -47.1px) rotate(-721deg) scale(0.365); }
  80% { opacity: 0.115; transform: translate(-218.5px, -46px) rotate(-743.3deg) scale(0.357); }
  82% { opacity: 0.093; transform: translate(-220.8px, -45px) rotate(-765.5deg) scale(0.35); }
  84% { opacity: 0.073; transform: translate(-222.8px, -44.1px) rotate(-787.8deg) scale(0.344); }
  86% { opacity: 0.056; transform: translate(-224.5px, -43.3px) rotate(-810.1deg) scale(0.338); }
  88% { opacity: 0.041; transform: translate(-226px, -42.6px) rotate(-832.4deg) scale(0.333); }
  90% { opacity: 0.029; transform: translate(-227.3px, -42px) rotate(-854.6deg) scale(0.329); }
  92% { opacity: 0.018; transform: translate(-228.3px, -41.5px) rotate(-876.9deg) scale(0.326); }
  94% { opacity: 0.01; transform: translate(-229.1px, -41.1px) rotate(-899.2deg) scale(0.323); }
  96% { opacity: 0.005; transform: translate(-229.7px, -40.9px) rotate(-921.5deg) scale(0.321); }
  98% { opacity: 0.001; transform: translate(-230px, -40.8px) rotate(-943.7deg) scale(0.32); }
  100% { opacity: 0; transform: translate(-230.2px, -40.8px) rotate(-966deg) scale(0.32); }
}
@keyframes throw-return {
  0% { opacity: 0; transform: translate(-230.2px, 40.8px) rotate(0deg) scale(0.32); }
  2% { opacity: 0.111; transform: translate(-217.2px, 47.5px) rotate(-50.3deg) scale(0.36); }
  4% { opacity: 0.222; transform: translate(-203.1px, 52.9px) rotate(-98.3deg) scale(0.398); }
  6% { opacity: 0.333; transform: translate(-188.2px, 57.2px) rotate(-143.9deg) scale(0.435); }
  8% { opacity: 0.444; transform: translate(-173px, 60.4px) rotate(-187.3deg) scale(0.47); }
  10% { opacity: 0.556; transform: translate(-157.8px, 62.5px) rotate(-228.5deg) scale(0.504); }
  12% { opacity: 0.667; transform: translate(-142.9px, 63.7px) rotate(-267.6deg) scale(0.537); }
  14% { opacity: 0.778; transform: translate(-128.4px, 64px) rotate(-304.6deg) scale(0.567); }
  16% { opacity: 0.889; transform: translate(-114.6px, 63.6px) rotate(-339.5deg) scale(0.597); }
  18% { opacity: 1; transform: translate(-101.7px, 62.5px) rotate(-372.5deg) scale(0.625); }
  20% { opacity: 1; transform: translate(-89.6px, 60.8px) rotate(-403.6deg) scale(0.652); }
  22% { opacity: 1; transform: translate(-78.4px, 58.7px) rotate(-432.8deg) scale(0.677); }
  24% { opacity: 1; transform: translate(-68.2px, 56.3px) rotate(-460.2deg) scale(0.701); }
  26% { opacity: 1; transform: translate(-59px, 53.6px) rotate(-485.9deg) scale(0.724); }
  28% { opacity: 1; transform: translate(-50.7px, 50.7px) rotate(-509.9deg) scale(0.746); }
  30% { opacity: 1; transform: translate(-43.3px, 47.7px) rotate(-532.2deg) scale(0.767); }
  32% { opacity: 1; transform: translate(-36.7px, 44.6px) rotate(-553deg) scale(0.786); }
  34% { opacity: 1; transform: translate(-30.9px, 41.4px) rotate(-572.3deg) scale(0.805); }
  36% { opacity: 1; transform: translate(-25.9px, 38.3px) rotate(-590.2deg) scale(0.822); }
  38% { opacity: 1; transform: translate(-21.5px, 35.3px) rotate(-606.6deg) scale(0.838); }
  40% { opacity: 1; transform: translate(-17.8px, 32.3px) rotate(-621.7deg) scale(0.853); }
  42% { opacity: 1; transform: translate(-14.6px, 29.4px) rotate(-635.5deg) scale(0.867); }
  44% { opacity: 1; transform: translate(-11.9px, 26.7px) rotate(-648.1deg) scale(0.881); }
  46% { opacity: 1; transform: translate(-9.6px, 24.1px) rotate(-659.5deg) scale(0.893); }
  48% { opacity: 1; transform: translate(-7.6px, 21.6px) rotate(-669.8deg) scale(0.904); }
  50% { opacity: 1; transform: translate(-6.1px, 19.3px) rotate(-679deg) scale(0.915); }
  52% { opacity: 1; transform: translate(-4.7px, 17.1px) rotate(-687.3deg) scale(0.925); }
  54% { opacity: 1; transform: translate(-3.7px, 15.1px) rotate(-694.6deg) scale(0.934); }
  56% { opacity: 1; transform: translate(-2.8px, 13.3px) rotate(-701deg) scale(0.942); }
  58% { opacity: 1; transform: translate(-2.1px, 11.6px) rotate(-706.6deg) scale(0.95); }
  60% { opacity: 1; transform: translate(-1.6px, 10px) rotate(-711.4deg) scale(0.956); }
  62% { opacity: 1; transform: translate(-1.2px, 8.6px) rotate(-715.5deg) scale(0.963); }
  64% { opacity: 1; transform: translate(-0.8px, 7.3px) rotate(-719deg) scale(0.968); }
  66% { opacity: 1; transform: translate(-0.6px, 6.2px) rotate(-721.8deg) scale(0.973); }
  68% { opacity: 1; transform: translate(-0.4px, 5.1px) rotate(-724.2deg) scale(0.978); }
  70% { opacity: 1; transform: translate(-0.3px, 4.2px) rotate(-726deg) scale(0.982); }
  72% { opacity: 1; transform: translate(-0.2px, 3.4px) rotate(-727.4deg) scale(0.985); }
  74% { opacity: 1; transform: translate(-0.1px, 2.8px) rotate(-728.4deg) scale(0.988); }
  76% { opacity: 1; transform: translate(-0.1px, 2.2px) rotate(-729.1deg) scale(0.991); }
  78% { opacity: 1; transform: translate(0px, 1.7px) rotate(-729.6deg) scale(0.993); }
  80% { opacity: 1; transform: translate(0px, 1.3px) rotate(-729.9deg) scale(0.995); }
  82% { opacity: 1; transform: translate(0px, 0.9px) rotate(-730deg) scale(0.996); }
  84% { opacity: 1; transform: translate(0px, 0.6px) rotate(-730deg) scale(0.997); }
  86% { opacity: 1; transform: translate(0px, 0.4px) rotate(-728.9deg) scale(0.998); }
  88% { opacity: 1; transform: translate(0px, 0.3px) rotate(-724.7deg) scale(0.999); }
  90% { opacity: 1; transform: translate(0px, 0.2px) rotate(-720deg) scale(0.999); }
  92% { opacity: 1; transform: translate(0px, 0.1px) rotate(-716.9deg) scale(1); }
  94% { opacity: 1; transform: translate(0px, 0px) rotate(-716.2deg) scale(1); }
  96% { opacity: 1; transform: translate(0px, 0px) rotate(-717.5deg) scale(1); }
  98% { opacity: 1; transform: translate(0px, 0px) rotate(-719.2deg) scale(1); }
  100% { opacity: 1; transform: translate(0px, 0px) rotate(-720deg) scale(1); }
}

@keyframes notif-leave {
  0%, 60% { opacity: 1; transform: none; }
  100%    { opacity: 0; transform: translateY(-14px) scale(.98); }
}

@keyframes card-lift {
  0%   { transform: none; }
  40%  { transform: translateY(-4px); }
  100% { transform: none; }
}

/* Bugün illüstrasyonundaki geri dönen kart (4 · Geri gelir) bunu kullanıyor. */
@keyframes boomerang-in {
  0%   { opacity: 0; transform: translate(88%, -6px) rotate(24deg) scale(.92); }
  55%  { opacity: 1; transform: translate(34%, -36px) rotate(9deg); }
  100% { opacity: 1; transform: none; }
}

/* ── Adımlar ───────────────────────────────────────────────────────────── */
.step { padding: 0 0 var(--section); }
/* Adım başlıkları yarım sütunda: 44px'te "Sadece bağlantıyı saklamaz."
   (~600px) 576px'lik sütuna sığmıyordu. */
.step h2 { font-size: clamp(28px, 4vw, 40px); }

.step-grid { display: grid; gap: 48px; align-items: center; }

@media (min-width: 1024px) {
  /* Metin sütunu 6fr: 5fr'de (~420px) 44px'lik başlıklar dört satıra
     bölünüyordu. Cihaz yüzeyi zaten 300px sabit, geniş sütuna ihtiyacı yok. */
  .step-grid { grid-template-columns: 6fr 5fr; gap: 64px; }
  .step--flip .step-grid { grid-template-columns: 5fr 6fr; }
  .step--flip .step-copy { order: 2; }
  .step--flip .device { order: 1; }
}

/* Cihaz — koyu, genel bir telefon çerçevesi (2026-09-24, seçenek B).

   NEDEN ÇERÇEVE: ekran görüntülerinin zemini sayfanın zeminiyle aynı renk
   (#F5F3EF); çerçevesiz hâlde ekranın kenarı zeminde eriyor, görüntünün
   içindeki Dynamic Island gövdesiz havada kalıyordu. Koyu çerçeve net bir
   nesne sınırı çiziyor ve ilk bakışta "telefon uygulaması" diye okunuyor.

   NEDEN GENEL: yan düğme, kamera, metalik kenar YOK — Apple donanımını
   taklit etmiyoruz, uygulama Android'de de var. Bugün illüstrasyonu
   (4 · Geri gelir) bilerek çerçevesiz: gerçek ekran çerçeveli, çizim değil.

   --screen genişliği ekran görüntüsünün kendisi; çerçeve onun dışında.
   Köşe yarıçapları ekran genişliğiyle orantılı. */
.device {
  --screen: 260px;
  --bezel: 9px;
  --screen-radius: calc(var(--screen) * .14);
  margin: 0 auto;
  width: calc(var(--screen) + 2 * var(--bezel));
  padding: var(--bezel);
  border-radius: calc(var(--screen-radius) + var(--bezel));
  background: var(--text);
  box-shadow:
    inset 0 0 0 1.5px #3A3632,
    0 40px 70px -34px rgba(26, 23, 20, 0.45);
  /* Paralaks çerçevenin TAMAMINI kaydırıyor. Eskiden görüntü kendi
     kutusunun içinde kayıyor, üstte/altta ince boşluk açabiliyordu. */
  translate: 0 var(--py, 0px);
}
.device img {
  width: 100%;
  aspect-ratio: 600 / 1304;   /* ekran görüntülerinin kendisi: iPhone 17 Pro, 402×874 pt */
  object-fit: cover;
  border-radius: var(--screen-radius);
  background: var(--bg);
}

@media (min-width: 768px) {
  .device { --screen: 300px; --bezel: 10px; }
}

/* ── 4 · Geri gelir — illüstrasyon ─────────────────────────────────────── */
/* Telefon yüzeyi YOK: bu bir ekran görüntüsü değil (bkz. index.html). Dil
   hero sahnesiyle aynı; sayfanın en büyük görseli olmaya devam ediyor. */
.step--return { overflow-x: clip; }   /* geri dönüş eğrisi ekran dışından başlıyor */

.today {
  margin: 0 auto;
  width: min(100%, 380px);
  padding: 24px 20px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--bg);
  display: grid;
  gap: 10px;
}

.today-head { font: 600 20px/1.2 var(--font-head); letter-spacing: -0.01em; margin-bottom: 6px; }

.today-return { display: grid; gap: 10px; }
.today-label { font: 500 14px/1.4 var(--font-body); color: var(--text); }

.today-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 18px;
}
.today-card .card-title { font-family: var(--font-head); font-weight: 600; font-size: 17px; line-height: 1.3; margin-top: 0; }
.today-card .card-source + .card-title { margin-top: 8px; }

/* Geri gelen kayıt — hero'daki `returned` anının aynısı. */
.today-card--back {
  border-color: var(--amber);
  box-shadow: 0 16px 48px -20px rgba(212, 135, 58, 0.45);
}

/* Listenin geri kalanı sessiz: göz geri gelen kayda gitsin. */
.today-card--quiet { opacity: .55; }

/* Bölüm görünür olunca geri gelen kart, hero'daki eğriyle BİR KEZ sahneye
   girer. Döngü yok — imza hareketi hero'da; burada yalnız bir yankı. */
html.js .today.is-in .today-card--back { animation: boomerang-in .9s var(--ease-out) .25s both; }
html.js .today .today-label { opacity: 0; transition: opacity .5s var(--ease-out) 1s; }
html.js .today.is-in .today-label { opacity: 1; }

/* ── Sorgu gösterimi ───────────────────────────────────────────────────── */
.query {
  margin-top: 32px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  max-width: 28rem;
}

.query-box {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--text);
}

.query-icon { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; flex: none; }

.query-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.chip {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}

.query-count { margin: 16px 0 0; font-size: 14px; color: var(--muted); }

/* ── Kapanış ───────────────────────────────────────────────────────────── */
.closing { padding: 0 0 var(--section); text-align: center; overflow-x: clip; }
.closing-inner { display: flex; flex-direction: column; align-items: center; }
.closing-throw {
  margin: 0 0 24px;
  padding: 8px;               /* dokunma alanı logodan biraz büyük */
  border: 0;
  border-radius: 12px;
  background: none;
  position: relative;
  z-index: 1;
}
.closing-throw:not(:disabled) { cursor: pointer; }
.closing-mark { --k: 1; }
@media (max-width: 767px) { .closing-mark { --k: .8; } }

/* Kapanışın tek hareketi: logo bir bumerang gibi atılır, sağa ve yukarı
   kavis çizer, soldan dolanıp ELE geri döner. Bölüm görünür olunca BİR KEZ;
   döngü yok (imza döngüsü hero'da). Yörünge hep logonun üstünde kalıyor,
   alttaki başlığın üzerinden geçmiyor. --k dar ekranda yörüngeyi küçültür.
   Uzaklaşırken hafifçe küçülmesi derinlik hissi için. */
html.js .closing-inner.is-in .closing-mark {
  animation: throw 1.7s linear .45s both;
}

@keyframes throw {
  0%      { translate: 0 0; rotate: 0deg; scale: 1.00; }
  6.25%   { translate: calc(var(--k) * 42.1px) calc(var(--k) * -4.6px); rotate: 45deg; scale: 0.99; }
  12.5%   { translate: calc(var(--k) * 77.8px) calc(var(--k) * -17.6px); rotate: 90deg; scale: 0.96; }
  18.75%  { translate: calc(var(--k) * 101.6px) calc(var(--k) * -37px); rotate: 135deg; scale: 0.92; }
  25%     { translate: calc(var(--k) * 110px) calc(var(--k) * -60px); rotate: 180deg; scale: 0.88; }
  31.25%  { translate: calc(var(--k) * 101.6px) calc(var(--k) * -83px); rotate: 225deg; scale: 0.83; }
  37.5%   { translate: calc(var(--k) * 77.8px) calc(var(--k) * -102.4px); rotate: 270deg; scale: 0.79; }
  43.75%  { translate: calc(var(--k) * 42.1px) calc(var(--k) * -115.4px); rotate: 315deg; scale: 0.76; }
  50%     { translate: 0 calc(var(--k) * -120px); rotate: 360deg; scale: 0.75; }
  56.25%  { translate: calc(var(--k) * -42.1px) calc(var(--k) * -115.4px); rotate: 405deg; scale: 0.76; }
  62.5%   { translate: calc(var(--k) * -77.8px) calc(var(--k) * -102.4px); rotate: 450deg; scale: 0.79; }
  68.75%  { translate: calc(var(--k) * -101.6px) calc(var(--k) * -83px); rotate: 495deg; scale: 0.83; }
  75%     { translate: calc(var(--k) * -110px) calc(var(--k) * -60px); rotate: 540deg; scale: 0.88; }
  81.25%  { translate: calc(var(--k) * -101.6px) calc(var(--k) * -37px); rotate: 585deg; scale: 0.92; }
  87.5%   { translate: calc(var(--k) * -77.8px) calc(var(--k) * -17.6px); rotate: 630deg; scale: 0.96; }
  93.75%  { translate: calc(var(--k) * -42.1px) calc(var(--k) * -4.6px); rotate: 675deg; scale: 0.99; }
  100%    { translate: 0 0; rotate: 720deg; scale: 1.00; }
}

.closing .lead { margin-inline: auto; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--border); padding: 32px 0 48px; font-size: 14px; color: var(--muted); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.footer nav { display: flex; gap: 24px; }
.footer a:hover { color: var(--text); }

/* ── Kaydırma geçişleri — yalnız JS varken ─────────────────────────────── */
/* JS yoksa içerik hep görünür: opacity:0 başlangıcı yalnızca html.js altında. */
html.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
html.js .reveal.is-in { opacity: 1; transform: none; }
html.js .reveal.d1 { transition-delay: 80ms; }
html.js .reveal.d2 { transition-delay: 160ms; }

/* ── Azaltılmış hareket ────────────────────────────────────────────────── */
/* Hareket kapalıyken sahne SON hâlde sabit durur: kart geri gelmiş, kenarı
   amber, "Bunu kaydetmiştin." — fikir kaybolmasın. JS de döngüyü başlatmaz. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js .reveal { opacity: 1; transform: none; }
  .device { translate: none; }
}