/* gustlyapp.com tanıtım sayfası (2026-10-29). Dış kaynak YOK (CSP: default-src 'self'):
   yazı tipi sistemden (Apple'da New York / SF), görseller satır içi SVG. */
:root {
  --krem: #F1ECE3;
  --kagit: #FFFDF8;
  --kart: #FFFFFF;
  --kenar: #DDD5C9;
  --tas: #C9BFB2;
  --murekkep: #25221F;
  --ikincil: #706A63;
  --soluk: #9A938A;
  --tuglu: #B84B2E;
  --tuglu-acik: #D98A72;
  --gece: #0E0F10;
  --gece-2: #17181A;
  --gece-kenar: #2A2D31;
  --gece-yazi: #F2F2F2;
  --gece-ikincil: #B6BCC4;
  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --egri: cubic-bezier(.2, .7, .1, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--gece);
  color: var(--gece-yazi);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
.gorunmez { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.kap { width: min(1080px, 100% - 40px); margin-inline: auto; }

/* ---------- Üst çubuk ---------- */
.ust {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: max(14px, env(safe-area-inset-top)) 20px 14px;
  transition: color .4s, background-color .4s;
  color: var(--gece-yazi);
}
body[data-ust="acik"] .ust { color: var(--murekkep); }
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 19px; letter-spacing: -.01em; }
.logo-isaret { width: 24px; height: 21px; color: var(--tuglu); }
.ust-dugme {
  font-size: 14px; font-weight: 600; padding: 8px 16px; border-radius: 999px;
  border: 1px solid currentColor; opacity: .85;
}

/* ---------- Ortak ---------- */
.koyu { background: var(--gece); color: var(--gece-yazi); }
.acik { background: var(--krem); color: var(--murekkep); }
.ust-baslik { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tuglu-acik); }
.koyu-yazi { color: var(--tuglu); }
.alt-metin { font-size: clamp(17px, 2.2vw, 21px); line-height: 1.5; color: var(--gece-ikincil); }
.bolum-basligi { font-family: var(--serif); font-weight: 600; font-size: clamp(38px, 6.4vw, 76px); line-height: 1.02; letter-spacing: -.02em; }
.acik-yazi { color: var(--gece-yazi); }
.dugmeler { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.dugme {
  display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 24px;
  border-radius: 999px; font-weight: 600; font-size: 16px;
  transition: transform .25s var(--egri), background-color .25s;
}
.dugme:active { transform: scale(.97); }
.dugme.dolu { background: var(--tuglu); color: #fff; }
.dugme.cizgi { border: 1px solid rgba(255,255,255,.28); color: var(--gece-yazi); }
.dugme.pasif { cursor: default; }

/* Açılış sırası (yüklenince) */
.gorun { opacity: 0; transform: translateY(18px); filter: blur(8px);
  animation: belir .9s var(--egri) forwards; animation-delay: calc(.15s + var(--sira, 0) * .11s); }
@keyframes belir { to { opacity: 1; transform: none; filter: none; } }
/* Kaydırınca görünenler (JS `gorundu` ekler) */
.gorun-kaydir { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--egri), transform .9s var(--egri); }
.gorun-kaydir.gorundu { opacity: 1; transform: none; }

/* ---------- 1 · Açılış ---------- */
.acilis {
  position: sticky; top: 0; z-index: 0;
  min-height: 100svh; display: grid; place-items: center; overflow: hidden;
  padding: 90px 20px 70px; text-align: center;
}
.acilis-isik {
  position: absolute; inset: -20%;
  background:
    radial-gradient(40% 35% at 50% 58%, rgba(184,75,46,.55), transparent 70%),
    radial-gradient(30% 25% at 30% 30%, rgba(217,138,114,.18), transparent 70%),
    radial-gradient(35% 30% at 75% 75%, rgba(169,116,26,.16), transparent 70%);
  filter: blur(20px);
  /* Ayrı katman: bulanıklık bir kez çizilir, hareket yalnız taşıma. */
  will-change: transform;
  animation: suzul 14s ease-in-out infinite alternate;
}
@keyframes suzul { to { transform: translate3d(3%, -4%, 0) scale(1.08) rotate(4deg); } }
.acilis-dev-isaret {
  position: absolute; width: min(120vw, 1100px); aspect-ratio: 69 / 58.5; left: 50%; top: 56%;
  transform: translate(-50%, -50%); color: rgba(255,255,255,.035);
}
.acilis-icerik {
  position: relative; display: grid; gap: 26px; justify-items: center; max-width: 900px;
  transform: translateY(calc(var(--p, 0) * -14vh)) scale(calc(1 - var(--p, 0) * .06));
  opacity: calc(1 - var(--p, 0) * 1.3);
}
.dev-baslik {
  font-family: var(--serif); font-weight: 600; letter-spacing: -.025em;
  font-size: clamp(44px, 9vw, 112px); line-height: 1.04;
  display: flex; flex-direction: column; align-items: center; gap: .12em;
}
.arama-hapi {
  display: inline-flex; align-items: center; gap: .28em;
  font-family: var(--sans); font-weight: 500; letter-spacing: -.01em;
  font-size: .62em; color: var(--murekkep);
  background: var(--kagit); border: 1px solid var(--tas); border-radius: 999px;
  /* Sabit genişlik: kelime yazılıp silinirken başlık satırı oynamasın. */
  padding: .26em .7em .26em .55em; width: 6.9em;
  box-shadow: 0 18px 50px -12px rgba(184,75,46,.55), 0 2px 0 rgba(255,255,255,.4) inset;
}
.buyutec { width: .78em; height: .78em; flex: none; color: var(--murekkep); }
.yazilan { white-space: nowrap; }
.imlec { width: 3px; height: 1em; background: var(--tuglu); border-radius: 2px; animation: yanip 1s steps(1) infinite; }
@keyframes yanip { 50% { opacity: 0; } }
.kaydir-ipucu {
  /* Hikâye bölümü açılışın altına 36 pt biniyor: ipucu onun üstünde kalsın. */
  position: absolute; bottom: calc(36px + max(20px, env(safe-area-inset-bottom))); left: 50%; translate: -50% 0;
  width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.35); border-radius: 14px;
  opacity: calc(1 - var(--p, 0) * 3);
}
.kaydir-ipucu span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px;
  border-radius: 2px; background: var(--gece-yazi); animation: ipucu 1.8s var(--egri) infinite; }
@keyframes ipucu { 0% { transform: translateY(0); opacity: 1; } 80%, 100% { transform: translateY(14px); opacity: 0; } }

/* 404 sayfası: açılışın zemini, tek ekran (404.html) */
.bulunamadi { position: relative; }
.bulunamadi-icerik { position: relative; display: grid; gap: 22px; justify-items: center; max-width: 640px; }
.bulunamadi h1 { font-family: var(--serif); font-weight: 600; letter-spacing: -.025em;
  font-size: clamp(40px, 8vw, 88px); line-height: 1.04; text-wrap: balance; }
.bulunamadi .alt-metin { max-width: 34ch; }
.bulunamadi .dugme { margin-top: 6px; }

/* ---------- 2 · Hikâye: yapışkan telefon ---------- */
.hikaye {
  /* Adım başına ~1,5 ekran (önce ~1,1; "çok hızlı gidiyor", 2026-10-29). */
  position: relative; z-index: 1; height: 620svh;
  border-radius: 36px 36px 0 0; margin-top: -36px;
}
.sahne {
  position: sticky; top: 0; height: 100svh;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6vw;
  width: min(1080px, 100% - 40px); margin-inline: auto; padding: 70px 0 30px;
}
.adim-metinleri { position: relative; min-height: 300px; }
.adim-metni {
  position: absolute; inset: 0 0 auto;
  /* Bulanıklık YOK: telefonda filtre geçişi kaydırırken kare kaçırtıyor. */
  opacity: 0; transform: translateY(24px); pointer-events: none;
  transition: opacity .5s var(--egri), transform .5s var(--egri);
}
.hikaye[data-adim="0"] .adim-metni[data-no="0"],
.hikaye[data-adim="1"] .adim-metni[data-no="1"],
.hikaye[data-adim="2"] .adim-metni[data-no="2"],
.hikaye[data-adim="3"] .adim-metni[data-no="3"] { opacity: 1; transform: none; }
.adim-sayac { font-size: 14px; color: var(--soluk); letter-spacing: .08em; }
.adim-sayac b { color: var(--tuglu); font-weight: 700; }
.adim-metni h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -.03em;
  font-size: clamp(64px, 10vw, 132px); line-height: 1; margin: 10px 0 18px; }
.adim-metni p:last-child { font-size: clamp(18px, 2vw, 22px); line-height: 1.5; color: var(--ikincil); max-width: 30ch; }
.adim-cubugu { position: absolute; left: 0; bottom: -40px; width: 160px; height: 3px; border-radius: 3px; background: var(--kenar); overflow: hidden; }
.adim-cubugu span { display: block; height: 100%; width: 100%; background: var(--tuglu);
  transform-origin: left; transform: scaleX(var(--p, 0)); }

/* Telefon: 300x640 tasarım ölçüsünde çizilir, JS `--olcek` ile sığdırır. */
.telefon-kap { width: calc(300px * var(--olcek, 1)); height: calc(640px * var(--olcek, 1)); }
.telefon {
  position: relative; width: 300px; height: 640px; transform: scale(var(--olcek, 1)); transform-origin: top left;
  border-radius: 48px; background: var(--krem); overflow: hidden; color: var(--murekkep);
  box-shadow: 0 0 0 9px #1B1B1D, 0 0 0 10px #3A3A3D, 0 40px 80px -20px rgba(60,30,15,.45);
  font-family: var(--sans);
}
.ada { position: absolute; top: 10px; left: 50%; width: 94px; height: 28px; margin-left: -47px; border-radius: 20px; background: #000; z-index: 5; }
.durum { position: absolute; top: 14px; left: 30px; right: 26px; display: flex; justify-content: space-between; font-size: 13px; z-index: 4; }
.durum-sag { display: flex; gap: 3px; align-items: center; }
.durum-sag i { width: 15px; height: 9px; border-radius: 2px; background: var(--murekkep); }
.durum-sag i:nth-child(1) { width: 14px; clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.durum-sag i:nth-child(3) { width: 22px; background: none; border: 1.5px solid var(--murekkep); }
.cubuk { position: absolute; bottom: 8px; left: 50%; width: 110px; height: 4px; margin-left: -55px; border-radius: 3px; background: var(--murekkep); opacity: .85; }

.ekran {
  position: absolute; inset: 0; padding: 54px 16px 20px;
  opacity: 0; transform: translateY(24px) scale(.98);
  transition: opacity .45s var(--egri), transform .45s var(--egri);
}
.hikaye[data-adim="0"] .ekran[data-no="0"],
.hikaye[data-adim="1"] .ekran[data-no="1"],
.hikaye[data-adim="2"] .ekran[data-no="2"],
.hikaye[data-adim="3"] .ekran[data-no="3"] { opacity: 1; transform: none; }

/* Uygulama parçaları */
.u-arama { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; background: var(--kart);
  border-radius: 999px; border: .5px solid var(--kenar); box-shadow: 0 4px 10px rgba(0,0,0,.08); font-size: 15px; }
.u-arama svg { width: 15px; height: 15px; }
.u-imlec { width: 2px; height: 17px; background: var(--tuglu); animation: yanip 1s steps(1) infinite; margin-left: -4px; }
.u-cipler { display: flex; gap: 6px; margin: 10px 0 12px; }
.u-cip { font-size: 12px; font-weight: 500; padding: 6px 10px; border-radius: 999px; background: var(--kart); border: .5px solid var(--kenar); }
.u-cip.dolu { background: var(--tuglu); color: #fff; border-color: var(--tuglu); }
.u-sonuc { background: var(--kart); margin: 0 -16px; padding: 4px 16px; min-height: 420px; }
.u-bolum { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; color: var(--soluk); margin: 10px 0 4px; }
.u-satir { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: .5px solid var(--kenar); font-size: 13.5px; }
.u-satir > div { display: grid; flex: 1; }
.u-satir small, .u-mekan small { color: var(--ikincil); font-size: 11.5px; }
.u-satir small.sag { margin-left: auto; }
.u-satir.girinti { padding-left: 32px; }
.u-satir b, .u-mekan b { font-weight: 600; }
.u-yemek-ikon { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #E8A27E 0 40%, #C25836 41% 62%, #F3E3D6 63%); flex: none; }
.u-mekan { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: .5px solid var(--kenar); font-size: 14px; }
.u-mekan > div { display: grid; gap: 1px; }
.u-mekan small.yildiz { color: var(--murekkep); }
/* Sonuç satırları yazı bitince sırayla (adım içi ilerleme --t) */
.ekran-bul [class*=" r"] { opacity: clamp(0, calc((var(--t, 0) - var(--esik)) * 9), 1);
  transform: translateY(calc((1 - clamp(0, calc((var(--t, 0) - var(--esik)) * 9), 1)) * 10px)); }
.ekran-bul .r1 { --esik: .34; } .ekran-bul .r2 { --esik: .38; } .ekran-bul .r3 { --esik: .42; }
.ekran-bul .r4 { --esik: .48; } .ekran-bul .r5 { --esik: .52; } .ekran-bul .r6 { --esik: .57; } .ekran-bul .r7 { --esik: .62; }

/* Gust rozeti: kademe renkleri uygulamayla aynı (GustScoreTier, açık tema) */
.rozet { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px 0 3px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: var(--murekkep); background: var(--kart); border: 1.2px solid var(--c, #ccc); flex: none; }
.rozet svg { width: 20px; height: 20px; padding: 4px 3px; border-radius: 50%; background: var(--c); color: #fff; }
.k80 { --c: #A9741A; } .k85 { --c: #9C5F14; } .k90 { --c: #B32E2D; } .k95 { --c: #8F2020; }

/* Kaydır: deste */
.u-ust-yazi { text-align: center; font-weight: 600; font-size: 15px; margin-top: 4px; }
.u-noktalar { display: flex; justify-content: center; gap: 5px; margin: 8px 0 14px; }
.u-noktalar i { width: 18px; height: 3px; border-radius: 2px; background: var(--kenar); }
.u-noktalar i.dolu { background: var(--tuglu); }
.deste { position: relative; height: 410px; }
.kart { position: absolute; inset: 0; border-radius: 22px; overflow: hidden; background: var(--kart);
  box-shadow: 0 12px 30px -10px rgba(60,30,15,.35); display: flex; flex-direction: column; }
.kart-foto { flex: 1; display: grid; place-items: end start; padding: 16px; position: relative; overflow: hidden; }
.kart-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kart-foto span { font-family: var(--serif); font-weight: 600; font-size: 34px; color: rgba(255,255,255,.92); letter-spacing: -.02em; }
.f1 { background: radial-gradient(120% 90% at 30% 20%, #E9935F, #A8451E 55%, #5B2412); }
.f2 { background: radial-gradient(120% 90% at 70% 20%, #E7C98A, #B07B2E 55%, #5E3D12); }
.f3 { background: radial-gradient(120% 90% at 50% 20%, #D9B48A, #8E5A33 60%, #4A2A16); }
.kart-alt { position: relative; padding: 14px 16px 16px; display: grid; gap: 2px; font-size: 15px; }
.kart-alt small { color: var(--ikincil); font-size: 12.5px; }
.kart-alt .rozet { position: absolute; right: 14px; top: 16px; }
.kart2 { transform: translateY(calc(10px - var(--t, 0) * 10px)) scale(calc(.95 + var(--t, 0) * .05)); }
.kart3 { transform: translateY(20px) scale(.9); filter: brightness(.85); }
.kart1 {
  transform: translateX(calc(clamp(0, calc((var(--t, 0) - .25) * 1.6), 1) * 125%))
             rotate(calc(clamp(0, calc((var(--t, 0) - .25) * 1.6), 1) * 16deg));
}
.damga { position: absolute; top: 22px; left: 18px; rotate: -12deg; padding: 6px 12px; border: 3px solid #3F8060; color: #3F8060;
  border-radius: 10px; font-weight: 800; font-size: 18px; letter-spacing: .02em; background: rgba(255,255,255,.85);
  opacity: clamp(0, calc((var(--t, 0) - .2) * 6), 1); }
.u-deste-dugmeleri { display: flex; justify-content: center; gap: 26px; margin-top: 16px; }
.yuvarlak { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--kart);
  box-shadow: 0 6px 16px rgba(0,0,0,.1); font-size: 20px; color: var(--ikincil); }
.yuvarlak.dolu { background: var(--tuglu); color: #fff; }
.yuvarlak svg { width: 20px; height: 20px; }

/* Kaydet: harita */
.ekran-kaydet { padding: 0; }
.harita { position: absolute; inset: 0; background: #EFEADF; }
.harita-cizim { width: 100%; height: 100%; }
.pin { position: absolute; width: 26px; height: 32px; margin: -32px 0 0 -13px; background: var(--c, #B84B2E);
  clip-path: path("M13 32 C 13 32, 0 19, 0 12.5 A 13 13 0 1 1 26 12.5 C 26 19, 13 32, 13 32 Z");
  transform: translateY(calc((1 - clamp(0, calc((var(--t, 0) - var(--esik)) * 7), 1)) * -40px));
  opacity: clamp(0, calc((var(--t, 0) - var(--esik)) * 7), 1); }
.pin::after { content: ""; position: absolute; left: 8px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.pin.kaydedilen { --c: #F08A1C; }
.p1 { left: 22%; top: 30%; --esik: .05; } .p2 { left: 40%; top: 46%; --esik: .12; } .p3 { left: 58%; top: 34%; --esik: .2; }
.p4 { left: 30%; top: 62%; --esik: .27; } .p5 { left: 48%; top: 70%; --esik: .34; } .p6 { left: 70%; top: 56%; --esik: .4; }
.p7 { left: 36%; top: 40%; --esik: .5; }
.u-harita-cipler { position: absolute; top: 52px; left: 16px; display: flex; gap: 6px; }
.hc { height: 30px; min-width: 30px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 3px 8px rgba(0,0,0,.15); }
.hc svg { width: 13px; height: 13px; }
.kirmizi { background: #D6336C; } .yesil { background: #2F9E57; } .turuncu { background: #F08A1C; }
.u-pin-karti { position: absolute; left: 14px; right: 14px; bottom: 26px; display: flex; gap: 12px; align-items: center;
  padding: 12px; border-radius: 20px; background: var(--kart); box-shadow: 0 12px 30px -8px rgba(0,0,0,.25); font-size: 14px;
  transform: translateY(calc((1 - clamp(0, calc((var(--t, 0) - .6) * 6), 1)) * 140%)); }
.u-pin-karti > div:nth-child(2) { display: grid; gap: 2px; flex: 1; min-width: 0; }
.u-pin-karti b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-pin-karti .rozet { align-self: flex-start; }
.u-pin-karti small { color: var(--ikincil); font-size: 12px; }
.u-pin-karti .kaydedildi { color: #C86A0E; font-weight: 600; }
.pk-foto { position: relative; overflow: hidden; width: 58px; height: 58px; border-radius: 14px; flex: none; background: radial-gradient(120% 90% at 70% 20%, #E7C98A, #B07B2E 55%, #5E3D12); }
.pk-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Puanla */
.u-baslik { text-align: center; font-weight: 600; font-size: 15px; display: grid; }
.u-baslik small { color: var(--soluk); font-size: 11px; font-weight: 500; }
.u-etiket { font-size: 13px; font-weight: 600; color: var(--ikincil); margin: 16px 2px 6px; }
.u-kart { background: var(--kart); border-radius: 18px; padding: 12px 14px; }
.u-kart.genel { display: grid; justify-items: center; gap: 8px; padding: 18px 14px; }
.yildizlar { display: flex; gap: 3px; }
.yildizlar i { width: 18px; height: 18px; background: var(--tas);
  clip-path: polygon(50% 3%, 62% 36%, 97% 37%, 69% 58%, 79% 92%, 50% 72%, 21% 92%, 31% 58%, 3% 37%, 38% 36%);
  transition: background-color .25s, transform .25s var(--egri); }
.yildizlar.buyuk i { width: 34px; height: 34px; }
.yildizlar i.dolu { background: var(--tuglu); transform: scale(1.12); }
.yildizlar i.yarim { background: linear-gradient(90deg, var(--tuglu) 50%, var(--tas) 50%); transform: scale(1.12); }
.genel-satir { display: flex; align-items: center; gap: 10px; }
.genel-deger { font-size: 20px; font-weight: 700; color: var(--tuglu); min-width: 2.2ch; font-variant-numeric: tabular-nums; }
.u-not { font-size: 11px; color: var(--soluk); margin: 6px 4px 0; }
.ilk-ziyaret { font-size: 11.5px; padding: 4px 10px; border-radius: 999px; background: rgba(184,75,46,.12); color: var(--tuglu); }
.alt-puan { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: .5px solid var(--kenar); font-size: 14px; }
.alt-puan:last-child { border: 0; }
.u-ileri { position: absolute; left: 16px; right: 16px; bottom: 30px; height: 48px; border-radius: 16px; display: grid; place-items: center;
  background: var(--tuglu); color: #fff; font-weight: 600;
  opacity: calc(.45 + clamp(0, calc((var(--t, 0) - .75) * 4), 1) * .55); }

/* ---------- 3 · Sayılar ---------- */
.sayilar { position: relative; z-index: 1; padding: 22vh 0; }
.sayilar .kap { display: grid; gap: 4vh; }
.sayi-satiri { display: flex; align-items: baseline; gap: .12em; flex-wrap: wrap; }
.dev-sayi { font-family: var(--serif); font-weight: 600; letter-spacing: -.04em; font-size: clamp(76px, 16vw, 210px); line-height: .9;
  font-variant-numeric: tabular-nums; }
.arti { font-family: var(--serif); font-size: clamp(50px, 9vw, 120px); color: var(--tuglu-acik); line-height: .9; }
.sayi-ad { font-size: clamp(22px, 3vw, 36px); color: var(--gece-ikincil); margin-left: .4em; }
/* Dar ekranda birim adı sayının altına, iki satırda da aynı düzende. */
@media (max-width: 760px) { .sayi-ad { flex-basis: 100%; margin: 4px 0 0; } }
.gust-blok { display: flex; gap: 20px; align-items: center; max-width: 640px; margin-top: 4vh;
  padding: 22px; border-radius: 24px; background: var(--gece-2); border: 1px solid var(--gece-kenar); }
.gust-blok p { color: var(--gece-ikincil); font-size: 17px; line-height: 1.5; }
.gust-blok b { color: var(--gece-yazi); }
.buyuk-rozet { height: 44px; font-size: 22px; padding: 0 16px 0 5px; gap: 8px; }
.buyuk-rozet svg { width: 34px; height: 34px; padding: 7px 5px; }

/* ---------- 4 · Kütüphane: üst üste binen kartlar ---------- */
.kutuphane { position: relative; z-index: 1; padding: 18vh 0 10vh; border-radius: 36px 36px 0 0; margin-top: -36px; }
.kutuphane .bolum-basligi { margin: 14px 0 8vh; }
/* Kartlar EŞİT boyda (1fr) ve son karttan sonra bir kart boyu boşluk (::after): kapsayıcı son
   kartla bitince yapışkan kartlar onun altına kısıtlanıyordu - 4. kart (24 px kısa) yerine varamadan
   3. kart kalkıp 1-2'nin üstüne biniyordu (2026-10-29, ölçüldü). Şimdi deste tam oluşur, bir süre
   durur, çıkışta önden arkaya 16 px arayla katlanır. */
.yigin { display: grid; grid-auto-rows: 1fr; gap: 24px; padding-bottom: 8vh; }
.yigin::after { content: ""; }
.yigin-karti {
  position: sticky; top: calc(14vh + var(--i) * 16px);
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
  min-height: 190px; padding: 28px; border-radius: 28px; background: var(--kart);
  border: 1px solid var(--kenar); box-shadow: 0 30px 60px -30px rgba(60,30,15,.35);
  transform-origin: 50% 0; transform: scale(calc(1 - var(--ort, 0) * .06));
}
/* Arkada kalan kartı karartma: `filter` yerine yarı saydam katman (ucuz). */
.yigin-karti::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #25221F;
  opacity: calc(var(--ort, 0) * .07); pointer-events: none; }
.y1 { --i: 0; } .y2 { --i: 1; } .y3 { --i: 2; } .y4 { --i: 3; }
.yk-ikon { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; color: #fff; }
.yk-ikon svg { width: 28px; height: 28px; }
.y1 .yk-ikon { background: #2F9E57; } .y2 .yk-ikon { background: var(--tuglu); } .y3 .yk-ikon { background: #3D6FD8; } .y4 .yk-ikon { background: #D6336C; }
.yigin-karti h3 { font-family: var(--serif); font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -.02em; }
.yigin-karti p { color: var(--ikincil); font-size: 16px; line-height: 1.5; margin-top: 6px; }
.yk-sayi { font-size: 13px; font-weight: 600; color: var(--ikincil); padding: 7px 12px; border-radius: 999px; background: var(--krem); }

/* ---------- 5 · Lezzetler: dev yazı akışı (2026-10-29 tasarım "B") ----------
   Kartlı şeritler geniş ekranda sağa yetmiyordu. Her satır içeriği iki kez taşır:
   en çok %26 kaysa da kalan ~%74'ü her ekranı doldurur. */
.lezzetler { position: relative; z-index: 1; padding: 18vh 0 14vh; overflow: hidden; border-radius: 36px 36px 0 0; margin-top: -36px; }
.lezzetler .bolum-basligi { width: min(1080px, 100% - 40px); margin: 0 auto 7vh; text-align: center; }
.dev { display: grid; gap: 1.2vh; }
.dev-satir { display: flex; align-items: center; gap: .32em; width: max-content; white-space: nowrap;
  font-family: var(--serif); font-weight: 600; letter-spacing: -.03em; font-size: clamp(54px, 9vw, 150px); line-height: 1.08;
  color: var(--gece-yazi); transform: translateX(calc(-4% - var(--p, 0) * 20%)); }
.dev-satir.ikinci { transform: translateX(calc(-26% + var(--p, 0) * 20%)); }
.dev-satir span { opacity: .9; }
.dev-satir em { font-style: italic; color: var(--tuglu-acik); }
.dev-satir.ikinci span { opacity: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(242,242,242,.55); }
/* Ayraç rozet: tuğla daire içinde beyaz işaret (yalın işaretin ayrık kuyruğu küçük boyda kopuk
   parça / nokta gibi okunuyordu, 2026-10-29). `i`: satırdaki span kurallarına (saydamlık, kontur) girmez. */
.ayrac { display: inline-grid; place-items: center; flex: none; width: .5em; height: .5em; border-radius: 50%; background: var(--tuglu); }
.ayrac svg { width: 62%; height: 62%; margin-top: 8%; color: #fff; }

/* ---------- 6 · İndir ---------- */
.indir { position: relative; z-index: 1; padding: 14vh 0 0; text-align: center; }
.indir .kap { display: grid; gap: 24px; justify-items: center; padding-bottom: 14vh; }
.indir-isaret { width: 96px; height: 82px; color: var(--tuglu); }
.indir-baslik { font-family: var(--serif); font-weight: 600; font-size: clamp(44px, 8vw, 104px); line-height: 1.02; letter-spacing: -.03em; }
.indir-baslik em { font-style: italic; color: var(--tuglu-acik); }
/* Üç düğme (Instagram, X, TikTok) dar telefonda tek satıra sığmıyor: ortalı sarar. */
.sosyal { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.sosyal-dugme { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 20px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22); font-weight: 600; }
.sosyal-dugme svg { width: 18px; height: 18px; fill: currentColor; }
.alt { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; padding: 26px 20px max(26px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--gece-kenar); font-size: 14px; color: var(--gece-ikincil); }
.alt a:hover { color: var(--gece-yazi); }

/* ---------- Geniş ekran: başlık tek satır (X kapağındaki gibi) ---------- */
@media (min-width: 761px) {
  .acilis-icerik { max-width: min(1240px, 100%); }
  .dev-baslik { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: .22em;
    font-size: clamp(40px, 5vw, 82px); }
  .arama-hapi { font-size: .78em; }
}

/* ---------- Telefon genişliği ---------- */
@media (max-width: 760px) {
  .sahne { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 14px; align-items: start; justify-items: center; padding-top: 74px; }
  .adim-metinleri { min-height: 150px; width: 100%; text-align: center; }
  .adim-metni h2 { font-size: 52px; margin: 4px 0 8px; }
  .adim-metni p:last-child { font-size: 16px; margin-inline: auto; }
  .adim-cubugu { left: 50%; translate: -50% 0; bottom: -10px; width: 120px; }
  .yigin-karti { grid-template-columns: auto 1fr; padding: 22px; min-height: 170px; }
  .yk-sayi { grid-column: 1 / -1; justify-self: start; }
  .gust-blok { flex-direction: column; align-items: flex-start; }
  .ust-dugme { font-size: 13px; padding: 7px 13px; }
}

/* Hareketi azalt: kaydırma sahneleri son hâlinde, geçişler kısa */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gorun, .gorun-kaydir { animation: none; opacity: 1; transform: none; filter: none; transition: none; }
  .acilis-isik, .kaydir-ipucu span, .imlec, .u-imlec { animation: none; }
  .acilis-icerik { transform: none; opacity: 1; }
  .ekran, .adim-metni { transition: opacity .2s; transform: none; filter: none; }
  .dev-satir, .dev-satir.ikinci { transform: translateX(-12%); }
}

/* ---------- Kaydırmaya bağlı animasyonlar (Safari 26+, Chrome 115+) ----------
   ⚠️ iOS Safari kaydırma sırasında sayfaya konumu ~15 kez/sn bildiriyor
   (scroll olayı ve rAF'te okunan scrollY 60-130 ms'de bir değişiyor; 2026-10-29
   simülatörde ölçüldü). JS'in yazdığı --p/--t ile sürülen her hareket bu yüzden
   telefonda ~6 karede bir sıçrıyordu ("geri giderken takılıyor"). Bu kurallar
   aynı hareketleri tarayıcının kaydırma zaman çizelgesine bağlar: her karede,
   JS'siz. Desteklemeyen tarayıcıda yukarıdaki --p/--t kuralları çalışır; JS
   aynı koşulla (`cssKaydirma`) yazmayı bırakır. Aralıklar JS'teki eşlemenin
   aynısı: hikâyede p = (adım + 0,7 t) / 4 -> yüzde = 25 x (adım + 0,7 t). */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* 1 · Açılış: p = scrollY / 100svh (kök kaydırıcı; .acilis overflow:hidden
       olduğu için `nearest` onu seçerdi). */
    .acilis-icerik { animation: acilis-cikis linear both; animation-timeline: scroll(root); animation-range: 0 100svh; }
    @keyframes acilis-cikis {
      0% { transform: translateY(0) scale(1); opacity: 1; }
      76.92% { opacity: 0; }
      100% { transform: translateY(-14vh) scale(.94); opacity: 0; }
    }
    .kaydir-ipucu { animation: solarak-git linear both; animation-timeline: scroll(root); animation-range: 0 33.33svh; }
    @keyframes solarak-git { from { opacity: 1; } to { opacity: 0; } }

    /* 2 · Hikâye: `contain` aralığı = -top / (yükseklik - ekran), JS'teki p. */
    .hikaye { view-timeline: --hikaye block; }
    .adim-cubugu span { animation: cubuk-dol linear both; animation-timeline: --hikaye; animation-range: contain 0% contain 100%; }
    @keyframes cubuk-dol { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    /* Bul (adım 0): satır t ∈ [eşik, eşik + 1/9] */
    .ekran-bul [class*=" r"] { animation: satir-gel linear both; animation-timeline: --hikaye;
      animation-range: contain calc(17.5% * var(--esik)) contain calc(17.5% * var(--esik) + 1.944%); }
    @keyframes satir-gel { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    /* Kaydır (adım 1) */
    .kart2 { animation: kart2-gel linear both; animation-timeline: --hikaye; animation-range: contain 25% contain 42.5%; }
    @keyframes kart2-gel { from { transform: translateY(10px) scale(.95); } to { transform: translateY(0) scale(1); } }
    .kart1 { animation: kart1-git linear both; animation-timeline: --hikaye; animation-range: contain 29.375% contain 40.3125%; }
    @keyframes kart1-git { from { transform: translateX(0) rotate(0deg); } to { transform: translateX(125%) rotate(16deg); } }
    .damga { animation: belir-sonuk linear both; animation-timeline: --hikaye; animation-range: contain 28.5% contain 31.417%; }
    @keyframes belir-sonuk { from { opacity: 0; } to { opacity: 1; } }
    /* Kaydet (adım 2): iğne t ∈ [eşik, eşik + 1/7], kart t ∈ [.6, .767] */
    .pin { animation: pin-dus linear both; animation-timeline: --hikaye;
      animation-range: contain calc(50% + 17.5% * var(--esik)) contain calc(52.5% + 17.5% * var(--esik)); }
    @keyframes pin-dus { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } }
    .u-pin-karti { animation: pin-karti-gel linear both; animation-timeline: --hikaye; animation-range: contain 60.5% contain 63.417%; }
    @keyframes pin-karti-gel { from { transform: translateY(140%); } to { transform: translateY(0); } }
    /* Puanla (adım 3): t ∈ [.75, 1] */
    .u-ileri { animation: ileri-belir linear both; animation-timeline: --hikaye; animation-range: contain 88.125% contain 92.5%; }
    @keyframes ileri-belir { from { opacity: .45; } to { opacity: 1; } }

    /* 5 · Lezzetler: `cover` aralığı = (ekran - top) / (ekran + yükseklik), JS'teki p. */
    .lezzetler { view-timeline: --lezzet block; }
    .dev-satir { animation: dev-sola linear both; animation-timeline: --lezzet; animation-range: cover 0% cover 100%; }
    .dev-satir.ikinci { animation-name: dev-saga; }
    @keyframes dev-sola { from { transform: translateX(-4%); } to { transform: translateX(-24%); } }
    @keyframes dev-saga { from { transform: translateX(-26%); } to { transform: translateX(-6%); } }
  }

  /* 4 · Kütüphane: arkadaki kart, önüne gelen HER kart için ayrı küçülür
     (JS'te --ort toplamı). Öndeki kartın tepesi yapışma hizasının (14vh + i x 16)
     bir kart boyu (--yh, JS bir kez ölçer) altından hizaya gelene dek.
     ⚠️ Aralık `cover` BAŞINDAN ölçülür (tepe ekranın altında = 0; tepe ekranın
     tepesinden d aşağıda = 100dvh - d; Safari'de alt çubuk açıkken kaydırma
     alanı `vh`ten kısa, `dvh` o anki boy): yapışkan öznede tarayıcı aralığın SONUNU
     yapışık kaldığı süre kadar uzatıyor (`contain 100%` kapsayıcının sonuna
     kaydı, üç katkı birden en sonda başladı; 2026-10-29 Chrome'da ölçüldü).
     Katkılar `add` ile üst üste biner. */
  @supports (animation-timeline: view()) and (timeline-scope: --a) and (animation-composition: add) {
    .yigin { timeline-scope: --y2, --y3, --y4; }
    .y2 { view-timeline: --y2 block; } .y3 { view-timeline: --y3 block; } .y4 { view-timeline: --y4 block; }
    /* Kısayol `animation` zaman çizelgesini ve aralığı sıfırlar: önce o, sonra ikisi. */
    /* JS toplamı 2,5'te kesiyordu: en arkadaki kartın üçüncü katkısı yarım (aralığın ilk yarısı, yarım değer). */
    .y1 { animation: yk-kucul linear both, yk-kucul linear both, yk-kucul-yarim linear both; }
    .y2 { animation: yk-kucul linear both, yk-kucul linear both; }
    .y3 { animation: yk-kucul linear both; }
    .y1::after { animation: yk-karar linear both, yk-karar linear both, yk-karar-yarim linear both; }
    .y2::after { animation: yk-karar linear both, yk-karar linear both; }
    .y3::after { animation: yk-karar linear both; }
    .y1, .y1::after { animation-timeline: --y2, --y3, --y4;
      animation-range: cover calc(100dvh - 14vh - 16px - var(--yh)) cover calc(100dvh - 14vh - 16px),
                       cover calc(100dvh - 14vh - 32px - var(--yh)) cover calc(100dvh - 14vh - 32px),
                       cover calc(100dvh - 14vh - 48px - var(--yh)) cover calc(100dvh - 14vh - 48px - var(--yh) / 2); }
    .y2, .y2::after { animation-timeline: --y3, --y4;
      animation-range: cover calc(100dvh - 14vh - 32px - var(--yh)) cover calc(100dvh - 14vh - 32px),
                       cover calc(100dvh - 14vh - 48px - var(--yh)) cover calc(100dvh - 14vh - 48px); }
    .y3, .y3::after { animation-timeline: --y4;
      animation-range: cover calc(100dvh - 14vh - 48px - var(--yh)) cover calc(100dvh - 14vh - 48px); }
    .yigin-karti, .yigin-karti::after { animation-composition: add; }
    @keyframes yk-kucul { from { transform: scale(1); } to { transform: scale(.94); } }
    @keyframes yk-karar { from { opacity: 0; } to { opacity: .07; } }
    @keyframes yk-kucul-yarim { from { transform: scale(1); } to { transform: scale(.97); } }
    @keyframes yk-karar-yarim { from { opacity: 0; } to { opacity: .035; } }
  }
}