/* yerli.dev — ortak stil dosyası (ana sayfa, /iletisim/, /gizlilik/).
   Tasarım dili: Modernist — Archivo, tek kırmızı vurgu, 2 px çizgiler, köşesiz kutular. */

/* ── Renk belirteçleri ───────────────────────────────────────────────
   Dil: kâğıt zemin, mürekkep metin, tek vurgu rengi (sinyal kırmızısı).
   Kırmızının tüm tonları aynı rampanın basamakları; ikinci vurgu yok.
   Parantez içindeki oranlar, değerin kendi zeminine karşı WCAG kontrastıdır. */
:root {
  color-scheme: light dark;

  /* Kırmızı rampa. Vurgu belirteçleri ve canlı ızgaranın renkleri bu basamaklardan seçilir. */
  --red-200: #ffc4b8;
  --red-300: #ff9783;
  --red-400: #ff563c;
  --red-500: #dd2b0f;
  --red-700: #ae1800;
  --red-800: #7c1405;

  --bg: #f3f2f2;            /* kâğıt */
  --surface: #eae9e9;       /* etiket zemini */
  --ink: #201e1d;           /* ana metin (14.9:1) */
  --ink-2: #605d5d;         /* ikincil metin (5.8:1; etiket zemininde 5.4:1) — eski #74909f 3.1:1 idi */
  --rule: #9f9d9d;          /* 2 px çizgiler: mürekkebin %40'ı, yalnızca yapı */
  --accent: var(--red-500);       /* işaret kareleri, dolu düğme, odak halkası (4.3:1, arayüz ≥ 3:1) */
  --accent-ink: var(--red-700);   /* küçük boyutta kırmızı metin (6.4:1) */
  --on-accent: #fff;              /* kırmızı dolgu üstündeki etiket (4.7:1) */
  --accent-hover: var(--red-700); /* üstüne gelince bir basamak koyu (7.2:1) */
  --accent-press: var(--red-800); /* basılıyken (10.7:1) */

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --side: clamp(1rem, 5vw, 2rem);   /* yan boşluk: 320 px'te 16, 390 px'te ~20 */
  --max: 64rem;                     /* içerik genişliği üst sınırı */

  --ease-out: cubic-bezier(.2, .8, .2, 1);      /* girişler: hızlı başlar, yumuşak oturur */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* ikonlar: hafif taşıp yerine oturur */
  --ease-draw: cubic-bezier(.7, 0, .2, 1);      /* çizgiler: ağır başlar, hızla uzar, yavaşça durur */
}

/* Koyu tema: kâğıt ile mürekkep yer değiştirir; kırmızı, koyu zeminde okunacak basamağa çıkar. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #201e1d;
    --surface: #2d2b2b;
    --ink: #f3f2f2;           /* (14.9:1) */
    --ink-2: #bab6b6;         /* (8.3:1; etiket zemininde 7.0:1) */
    --rule: #747372;
    --accent: var(--red-400);       /* (5.3:1) */
    --accent-ink: var(--red-300);   /* (7.9:1) */
    --on-accent: #201e1d;           /* kırmızı dolgu üstünde koyu etiket (5.3:1) */
    --accent-hover: var(--red-300); /* koyu zeminde hover bir basamak açılır (7.9:1) */
    --accent-press: var(--red-200); /* (10.9:1) */
  }
}

/* ── Temel ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; }
p, ul, dl, dd { margin: 0; }
p { text-wrap: pretty; }
img { display: block; max-width: 100%; }
a { color: var(--accent-ink); }
a:hover { color: var(--ink); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

/* hidden özniteliği her zaman kazanır (.btn gibi display tanımlayan sınıflara rağmen). */
[hidden] { display: none !important; }

/* Ekran okuyucuya bağlam veren, görünmeyen metin */
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--side); top: 8px; z-index: 30;
  padding: 12px 16px; background: var(--ink); color: var(--bg);
  font-weight: 800; text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ── Izgara ──
   .wrap kutunun kendisi içerik genişliğindedir (yan boşluk margin'den gelir);
   böylece bölüm çizgileri metnin sol ve sağ kenarıyla tam hizalanır. */
.wrap { width: min(var(--max), 100% - 2 * var(--side)); margin-inline: auto; }

/* Sayfanın omurgası: masaüstünde 12 sütunun 3'ü etiket, 9'u içerik.
   Tüm bölüm başlıkları aynı sol sütunda durur; ürün sayısı artınca liste aşağı uzar, ızgara bozulmaz. */
.split { display: grid; gap: 16px 24px; }
@media (min-width: 48rem) {
  .split { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
}

.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── 2 px yapı çizgileri ──
   Kenarlık yerine sözde öğeyle çizilir: kenarlık saydam kaldığı için yerleşim birebir aynıdır,
   hareket açıkken çizgi soldan sağa kendini çizer (.ln.in). */
.ln { position: relative; border-top: 2px solid transparent; }
.ln::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
  background: var(--rule); transform-origin: left;
}

/* ── Üst şerit ── */
.top.ln { border-top: 0; border-bottom: 2px solid transparent; }
.top.ln::before { top: auto; bottom: -2px; }
.top-in {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0 8px; min-height: 64px; padding-block: 8px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.01em; }
.mark { display: block; width: 24px; height: 24px; flex: none; }
.mark rect { fill: var(--accent); }
.mark path { fill: var(--on-accent); }
.top-end { display: flex; align-items: center; margin-right: -8px; } /* son öğenin iç boşluğu sağ kenara hizalanır */
.top nav { display: flex; }
/* Dar ekranda şerit tek satırda kalsın: aynı bağlantı hemen altında büyük düğme olarak duruyor. */
@media (max-width: 26rem) { .top nav .nav-apps { display: none; } }
.top nav a, .foot a {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px;
  font-weight: 600; text-decoration: none;
  text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.top nav a { color: var(--ink); font-size: .9375rem; }
.top nav a:hover { color: var(--accent-ink); text-decoration-line: underline; }

/* Hareketi durdur/başlat (WCAG 2.2.2). Betik yoksa veya sistem hareketi zaten azaltıyorsa gizli. */
.motion-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: 4px; padding: 0;
  border: 0; background: transparent; color: var(--ink); cursor: pointer;
}
.motion-toggle[hidden] { display: none; }
.motion-toggle:hover { color: var(--accent-ink); }
.motion-toggle .i { width: 18px; height: 18px; }
.motion-toggle .i-oynat,
.motion-toggle[aria-pressed="true"] .i-durdur { display: none; }
.motion-toggle[aria-pressed="true"] .i-oynat { display: block; }

/* Kaydırma ilerlemesi: ekranın tepesinde 2 px kırmızı çizgi. Yalnızca betik çalışınca görünür. */
.progress {
  position: fixed; inset: 0 0 auto; z-index: 20; height: 2px;
  background: var(--accent); transform-origin: left; transform: scaleX(0);
  pointer-events: none; display: none;
}
.motion-ready .progress { display: block; }

/* ── Açılış sahnesi ──
   Tam genişlikte: tuval arkada, içerik önde. Geniş ekranda sahne ilk ekranın %70'ini kaplar ve
   ad, afiş gibi alta yaslanır; üstte kalan boşluk canlı ızgaranın sahnesidir. İlk ekranda
   uygulama listesinin başı yine görünür. */
.stage { position: relative; isolation: isolate; overflow: hidden; }
@media (min-width: 64rem) and (min-height: 40rem) {
  .stage { display: flex; flex-direction: column; justify-content: flex-end; min-height: 70svh; }
}
/* Dar ekranda metin sahnenin tamamını kaplar; adın üstünde ızgaraya bir alan açılır.
   390×844'te uygulama listesinin başı yine ilk ekranda kalır. */
@media (max-width: 63.99rem) {
  .stage .hero { padding-top: clamp(7rem, 24svh, 12rem); }
}

/* Canlı ızgara tuvali. Renkleri JS buradaki belirteçlerden okur; hepsi kırmızı rampanın basamakları. */
.field {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  pointer-events: none;
}
.stage .field {
  -webkit-mask-image: linear-gradient(#000 72%, transparent);
          mask-image: linear-gradient(#000 72%, transparent);
}
.stage {
  --fx-base: var(--ink); --fx-base-a: .2;
  --fx-1: var(--red-400); --fx-2: var(--red-500); --fx-3: var(--red-700); --fx-4: var(--red-800);
}
@media (prefers-color-scheme: dark) {
  .stage {
    --fx-base-a: .15;
    --fx-1: var(--red-200); --fx-2: var(--red-300); --fx-3: var(--red-400); --fx-4: var(--red-500);
  }
}

/* ── Açılış ──
   Ad tek satırda büyük ama ölçülü (en fazla 120 px); altındaki künye satırı
   ilk ekranda ürün listesine yer bırakacak kadar kısa tutuldu. */
.hero { padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) clamp(2.5rem, 1.5rem + 3vw, 4rem); }
h1 {
  font-size: clamp(2.75rem, 0.5rem + 12vw, 7.5rem);
  line-height: .95;
  letter-spacing: -0.025em;
  margin-left: -0.05em; /* büyük M'nin optik sol hizası */
}
/* Her kelime kendi maskesinden yukarı kayar. clip-path taban çizgisini değiştirmez; yalnız alt kenarı keser. */
h1 .w { display: inline-block; clip-path: inset(-.3em -.15em 0 -.15em); }
h1 .w > span { display: inline-block; }
.hero .split { margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); padding-top: 20px; }
.role { position: relative; font-weight: 600; color: var(--ink-2); line-height: 1.5; padding-top: .2em; }
.caret {
  position: absolute; left: 0; top: 0;
  width: .5em; height: 1.2em; background: var(--accent);
  pointer-events: none;
}
.lede { font-size: clamp(1.0625rem, .9rem + .6vw, 1.25rem); line-height: 1.5; max-width: 34em; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ── Düğmeler: köşesiz, etiket sola yaslı, ikon etiketin hemen ardında ── */
.btn {
  display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px;
  min-height: 44px; padding: 0 16px;
  border: 2px solid transparent; background: transparent; color: var(--ink);
  font: 800 .9375rem/1.2 var(--font); text-decoration: none;
}
.btn-lg { min-height: 48px; padding-inline: 20px; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn-primary:active { background: var(--accent-press); border-color: var(--accent-press); }
.btn-secondary { border-color: var(--rule); }
.btn-secondary:hover { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.btn-secondary:active { background: color-mix(in srgb, var(--ink) 14%, transparent); }

/* ── Bölümler: her bölüm içerik genişliğinde 2 px çizgiyle açılır ── */
.band { padding-block: clamp(2rem, 1rem + 3vw, 3.5rem); }
.band h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); line-height: 1.1; }
@media (min-width: 48rem) {
  /* Uzun listede başlık sol sütunda görünür kalır */
  .band h2 { position: sticky; top: 24px; align-self: start; }
}

/* ── Uygulama listesi ──
   Izgara yerine satır: 1 ürün de 6 ürün de aynı dengede durur.
   Kart tek bir bağlantı değil; eylemler alt satırda ayrı ayrı. */
.apps { list-style: none; padding: 0; }
.apps > li + li { margin-top: 32px; padding-top: 32px; }
.app { --icon: 56px; display: grid; grid-template-columns: var(--icon) minmax(0, 1fr); column-gap: 20px; }
.app-icon {
  grid-row: 1 / span 2; width: var(--icon); height: var(--icon);
  /* İmlece doğru eğilme (JS --rx/--ry/--ty yazar); giriş animasyonu ayrı scale/rotate özellikleriyle çalışır. */
  transform: perspective(600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px));
}
.app-icon.ios { border-radius: 22.37%; } /* Su Takip ikonu kendi mağaza biçiminde: yuvarlatılmış kare */
.app-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.app-name { font-size: clamp(1.375rem, 1.1rem + .8vw, 1.75rem); }
.slogan { font-weight: 600; color: var(--ink-2); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding: 0; list-style: none; }
.tags li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 8px; background: var(--surface);
  font-size: .8125rem; font-weight: 600; line-height: 1.3;
}
/* Kırmızı kare = "yayında" ışığı. Sayfadaki tek tekrar eden işaret; hareket açıksa yayın ışığı gibi atar. */
.tags .live { position: relative; }
.tags .live::before { content: ""; width: 8px; height: 8px; background: var(--accent); }
.app-desc { grid-column: 1 / -1; margin-top: 16px; color: var(--ink-2); max-width: 36em; }
.app-actions { --bh: 44px; grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
@media (min-width: 40rem) {
  .app { --icon: 64px; column-gap: 24px; }
  .app-desc, .app-actions { grid-column: 2; }
}

/* Resmi mağaza rozetleri: yeniden çizilmez, aynı görünür yükseklikte (--bh), aralarında ≥ ¼ yükseklik boşluk.
   Google'ın PNG'si 646×250 tuvalde üstten ve alttan 29/192 şeffaf pay taşır; kapsayıcı bunu kırpar. */
.badge { display: inline-flex; padding-block: calc((44px - var(--bh)) / 2); } /* dokunma alanı ≥ 44 px */
.badge img { height: var(--bh); width: auto; }
.badge .crop { display: block; height: var(--bh); overflow: hidden; }
.badge .crop img {
  max-width: none;
  width: calc(var(--bh) * 646 / 192);
  height: calc(var(--bh) * 250 / 192);
  margin-block: calc(var(--bh) * -29 / 192);
}
/* 360 px altı: iki rozet tek satırda kalsın diye 38 px */
@media (max-width: 22.4375rem) { .app-actions { --bh: 38px; } }

/* ── Hakkımda ── */
.about p { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.5; max-width: 32em; }

/* ── İletişim afişi ──
   Tasarım sisteminin kırmızıyı alan olarak kullandığı tek yer: kapanış afişi.
   Arkasında harf sarmalı döner (--fx-base: harfler, --fx-1: imlecin parlattığı harfler);
   tuvalin üstündeki yatay maske tarama çizgilerini verir. */
.poster {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--accent); color: var(--on-accent);
  padding-block: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --rule: color-mix(in srgb, var(--on-accent) 60%, transparent);
  --fx-base: var(--on-accent); --fx-1: var(--on-accent);
}
.poster .field {
  -webkit-mask-image: repeating-linear-gradient(#000 0 2px, rgb(0 0 0 / .35) 2px 3px);
          mask-image: repeating-linear-gradient(#000 0 2px, rgb(0 0 0 / .35) 2px 3px);
}
.poster h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); line-height: 1.1; }
.poster a, .poster a:hover { color: var(--on-accent); }
.poster :focus-visible { outline-color: var(--on-accent); }
.poster ::selection { background: var(--on-accent); color: var(--accent); }
.note { max-width: 36em; }
.contact { display: grid; gap: 28px; margin-top: 32px; }
.contact > div { padding-top: 12px; }
.contact dt { font-size: .875rem; font-weight: 600; }
.contact dd { font-size: clamp(1.125rem, .9rem + 1vw, 1.625rem); font-weight: 800; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.contact .mega dd { font-size: clamp(1.5rem, .55rem + 3.6vw, 3.25rem); line-height: 1.1; letter-spacing: -0.02em; }
/* Alt çizgi arka plan olarak çizilir: üstüne gelince sağa doğru çekilir, ayrılınca soldan geri uzar. */
.link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%;
  color: inherit; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
}
.mega .link { background-size: 100% 3px; }
.link:hover { background-size: 0 2px; background-position: 100% 100%; }
.mega .link:hover { background-size: 0 3px; }
.link .i { width: 20px; height: 20px; }

/* ── Alt bilgi ── */
.foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px;
  padding-block: 18px 32px; font-size: .875rem; color: var(--ink-2); /* üstte çizgi yok: kırmızı afiş ayırır */
}
.foot nav { display: flex; margin-right: -8px; }
.foot a { color: var(--ink-2); }
.foot p a { padding-inline: 2px; }
.foot a:hover { color: var(--ink); text-decoration-line: underline; text-decoration-color: var(--accent); }

/* Mağaza adı ürün adından farklıysa kartta küçük bir not (Düzelt AI → "AI Türkçe Metin Düzeltici"). */
.store-name { flex-basis: 100%; font-size: .875rem; color: var(--ink-2); }

/* Kırmızı afişte ikincil eylem: zemin rengi tersine döner. */
.poster .actions { margin-top: 32px; }
.btn-poster { background: var(--on-accent); border-color: var(--on-accent); color: var(--accent-ink); }
.poster a.btn-poster { color: var(--accent-ink); }
.poster a.btn-poster:hover { background: transparent; color: var(--on-accent); }

/* ── Alt sayfalar (/iletisim/, /gizlilik/) ── */
a.brand { color: var(--ink); text-decoration: none; }
.top nav a[aria-current="page"] { text-decoration-line: underline; text-decoration-color: var(--accent); }
.page-head { padding-block: clamp(2rem, 1rem + 4vw, 4rem) clamp(2rem, 1rem + 3vw, 3rem); }
.page-head h1 { font-size: clamp(2.5rem, .5rem + 8vw, 5.5rem); }
.page-head .split { margin-top: clamp(1.25rem, 1rem + 1.5vw, 2rem); padding-top: 20px; }

/* ── Form ── etiketler sola yaslı, kutular köşesiz, kenarlar 2 px.
   (.field adı canlı ızgara tuvaline ait; form satırları .form-row.) */
:root { --field-bg: #fff; }
@media (prefers-color-scheme: dark) { :root { --field-bg: var(--surface); } }
.form { display: grid; gap: 24px; max-width: 40rem; }
.form fieldset { display: grid; gap: 24px; min-width: 0; margin: 0; padding: 0; border: 0; }
.form-row { display: grid; gap: 8px; }
.form-row label { font-weight: 800; }
.form-row label span { font-weight: 400; color: var(--ink-2); }
.hint { font-size: .875rem; color: var(--ink-2); }
.field-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
.input {
  width: 100%; min-height: 48px; padding: 10px 14px;
  border: 2px solid var(--rule); border-radius: 0; background: var(--field-bg); color: var(--ink);
  font: 400 1rem/1.5 var(--font);
}
.input:hover { border-color: var(--ink-2); }
.input:focus-visible { border-color: var(--ink); }
textarea.input { min-height: 11rem; resize: vertical; }
.select { position: relative; }
.select .input { appearance: none; padding-right: 44px; cursor: pointer; }
.select .i { position: absolute; right: 14px; top: 50%; translate: 0 -50%; pointer-events: none; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.verify { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; min-height: 65px; }
.verify .hint { flex: 1 1 14rem; margin: 0; }
.submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.status { padding: 14px 16px; border-left: 4px solid var(--rule); background: var(--surface); }
.status[data-state="success"] { border-left-color: var(--ink); }
.status[data-state="error"] { border-left-color: var(--accent); }
.status:focus { outline: none; }

/* ── Gizlilik metni ── */
.prose { display: grid; gap: 16px; max-width: 40rem; }
.prose ul { display: grid; gap: 8px; padding-left: 1.25em; }
.prose a { color: inherit; text-decoration: underline 2px var(--accent); text-underline-offset: .2em; }
.prose a:hover { color: var(--accent-ink); }
.prose .hint { margin-top: 8px; }
.prose code { font-size: .9em; padding: 1px 4px; background: var(--surface); }

/* Büyük e-posta adresi (iletişim sayfası) */
.mail { font-size: clamp(1.375rem, .8rem + 2.6vw, 2.5rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.prose a.link { text-decoration: none; }
.mail .link { background-size: 100% 3px; }
.mail .link:hover { background-size: 0 3px; }

/* Ziyaretçi hareketi durdurduysa sürekli dönen küçük animasyonlar da durur. */
[data-motion="off"] .tags .live::after,
[data-motion="off"] .caret { display: none; }

/* ── Hareket: yalnızca hareket tercihi kısıtlı değilse ──
   .motion: giriş efektlerinin başlangıç durumları (betik gelmezse kaldırılır, bkz. <head>).
   .in: öğe görünür alana girince JS ekler. Girişler translate/scale/rotate ayrı özellikleriyle çalışır;
   transform, ikonun imlece eğilmesi için serbest kalır. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .btn, .link, .top nav a, .foot a, .motion-toggle {
    transition: color .14s, background-color .14s, border-color .14s, text-decoration-color .14s,
                background-size .45s var(--ease-out);
  }
  .i-out, .i-down, .i-next { transition: translate .3s var(--ease-out); }
  .btn:hover .i-out, .link:hover .i-out { translate: 2px -2px; }
  .btn:hover .i-down { translate: 0 3px; }
  .btn:hover .i-next { translate: 3px 0; }
  .app-icon { transition: transform .35s var(--ease-out); }

  /* Yayın ışığı: kırmızı kare dışa doğru büyüyerek söner */
  .tags .live::after {
    content: ""; position: absolute; left: 8px; top: 50%;
    width: 8px; height: 8px; margin-top: -4px;
    background: var(--accent); animation: ping 2.4s var(--ease-out) infinite;
  }
  @keyframes ping { from { opacity: .5; scale: 1; } 70%, to { opacity: 0; scale: 3.2; } }

  /* Açılış: kelimeler maskeden yükselir, künye ve düğmeler ardından gelir (JS gerekmez) */
  .motion .top-in { animation: fade-in .8s ease both; }
  .motion .mark { animation: pop .9s .1s var(--ease-spring) both; }
  .motion h1 .w > span { animation: word-up 1.1s .1s var(--ease-out) both; }
  .motion h1 .w + .w > span { animation-delay: .2s; }
  .motion .hero .lede { animation: fade-up 1s .55s var(--ease-out) both; }
  .motion .hero .actions { animation: fade-up 1s .7s var(--ease-out) both; }
  @keyframes word-up { from { transform: translateY(100%); } }
  @keyframes fade-up { from { opacity: 0; translate: 0 18px; } }
  @keyframes fade-in { from { opacity: 0; } }
  @keyframes pop { from { scale: 0; rotate: -90deg; } }

  /* Daktilo satırı: harfler sırayla görünür, kırmızı imleç üç kez yanıp söner */
  .motion .typed > span { visibility: hidden; }
  .motion .typed > span.on { visibility: visible; }
  .caret { animation: blink 1.05s steps(1) infinite; }
  .caret.done { animation: blink 1.05s steps(1) 3, caret-out .4s 3.15s forwards; }
  @keyframes blink { 50% { opacity: 0; } }
  @keyframes caret-out { to { opacity: 0; } }

  /* Kendini çizen çizgiler */
  .motion .ln::before { transform: scaleX(0); transition: transform 1.2s var(--ease-draw); }
  .motion .ln.in::before { transform: none; }

  /* Görünür alana girince yükselen öğeler; --i sırayla gecikme verir */
  .motion [data-reveal] {
    opacity: 0; translate: 0 24px;
    transition: opacity .8s ease, translate 1s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .motion [data-reveal].in { opacity: 1; translate: none; }

  /* Uygulama satırı: ikon yaylanarak gelir, ardından ad, etiketler, açıklama ve eylemler */
  .motion .app > * { opacity: 0; translate: 0 18px; transition: opacity .7s ease, translate .9s var(--ease-out); }
  .motion .app > :nth-child(2) { transition-delay: .08s; }
  .motion .app > :nth-child(3) { transition-delay: .16s; }
  .motion .app > :nth-child(4) { transition-delay: .24s; }
  .motion .app > :nth-child(5) { transition-delay: .32s; }
  .motion .app.in > * { opacity: 1; translate: none; }
  .motion .app > .app-icon {
    translate: none; scale: .5; rotate: -14deg;
    transition: opacity .5s ease, scale 1s var(--ease-spring), rotate 1s var(--ease-spring), transform .35s var(--ease-out);
  }
  .motion .app.in > .app-icon { scale: 1; rotate: 0deg; }

  /* Hakkımda: kelimeler okuma hizasına geldikçe soluk tondan mürekkebe döner */
  .motion .about .wd { color: color-mix(in srgb, var(--ink) 24%, var(--bg)); transition: color .5s ease; }
  .motion .about .wd.on { color: var(--ink); }
}