@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/fraunces-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/fraunces-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url(../fonts/fraunces-latin-wght-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url(../fonts/fraunces-latin-ext-wght-italic.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --cream: #f6ecdd;
  --cream-2: #efe0c9;
  --paper: #fffaf2;
  --ink: #2b1a10;
  --ink-2: #6b5443;
  --orange: #e8730c;
  --tomato: #c9361f;
  --cini: #1f4e9c;
  --leaf: #3f7d2a;
  --radius: 22px;
  --pad: clamp(16px, 4vw, 56px);
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0; color: var(--ink); font: 17px/1.6 var(--body);
  background:
    radial-gradient(1200px 800px at 80% -10%, #fff6e8 0%, transparent 60%),
    radial-gradient(900px 700px at -10% 30%, #f3dcc0 0%, transparent 55%),
    linear-gradient(180deg, var(--cream) 0%, #f3e4cf 60%, #eed9bd 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
em { font-style: italic; color: var(--tomato); }
.display { font-family: var(--display); font-weight: 560; letter-spacing: -0.02em; line-height: 1.02; font-variation-settings: "SOFT" 50; }
.display em { font-weight: 480; }

/* 3D tuval tüm sayfanın arkasında sabit */
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; transition: opacity .2s; }
.grain {
  position: fixed; inset: -50%; z-index: 1; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
main, .footer, .nav { position: relative; z-index: 2; }

/* Yükleniyor */
.loader { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; gap: 22px; justify-items: center; background: var(--cream); transition: opacity .6s ease, visibility .6s; }
.loader img { border-radius: 22%; box-shadow: 0 18px 40px -12px #6b2e0b55; animation: bob 1.6s ease-in-out infinite; }
.loader-bar { width: 140px; height: 3px; border-radius: 3px; background: #2b1a1015; overflow: hidden; }
.loader-bar span { display: block; height: 100%; width: 0; background: var(--orange); transition: width .3s; }
body:not(.is-loading) .loader { opacity: 0; visibility: hidden; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-3deg); } }

/* Üst çubuk */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: max(12px, env(safe-area-inset-top)) var(--pad) 12px;
  transition: background .3s, backdrop-filter .3s, box-shadow .3s;
}
.nav.scrolled { background: #f6ecddcc; backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 #2b1a1012; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-weight: 650; font-size: 19px; }
.brand img { border-radius: 22%; }
.nav-right { display: flex; align-items: center; gap: 10px; }
.lang { display: flex; background: #2b1a100d; border-radius: 99px; padding: 3px; }
.lang button { border: 0; background: none; font: 600 12px/1 var(--body); padding: 8px 10px; border-radius: 99px; color: var(--ink-2); cursor: pointer; min-width: 36px; min-height: 30px; }
.lang button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px #0001; }
.pill { text-decoration: none; background: var(--ink); color: var(--paper); font-weight: 600; font-size: 14px; padding: 9px 16px; border-radius: 99px; transition: transform .2s; }
.pill:hover { transform: translateY(-1px); }

/* App Store düğmesi */
.cta-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.store {
  display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
  background: var(--ink); color: var(--paper); padding: 10px 22px 10px 10px; border-radius: 18px;
  box-shadow: 0 14px 30px -12px #4a1d0599, inset 0 1px 0 #ffffff1a;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.store:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 22px 40px -14px #4a1d05aa, inset 0 1px 0 #ffffff1a; }
.store img { border-radius: 22%; }
.store span { display: grid; line-height: 1.15; }
.store small { font-size: 11px; opacity: .7; letter-spacing: .02em; }
.store strong { font-size: 17px; font-weight: 650; }

/* Giriş */
.hero { min-height: 100svh; display: grid; align-items: center; padding: 110px var(--pad) 90px; position: relative; }
.hero-copy { max-width: 640px; }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 700; color: var(--orange); margin: 0 0 18px; }
.hero h1 { font-size: clamp(46px, 7.4vw, 104px); margin: 0 0 22px; }
.lead { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-2); max-width: 520px; margin: 0 0 34px; }
.line { display: block; overflow: hidden; padding-bottom: .06em; }
.line > span { display: block; will-change: transform; }
.scroll-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.scroll-cue i { width: 22px; height: 36px; border: 2px solid #2b1a1040; border-radius: 12px; position: relative; }
.scroll-cue i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px; background: var(--orange); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } }

/* Lahmacun hikâyesi: yapışkan sahne, altı başlık, fırın sayacı */
.story { height: 760vh; position: relative; }
.story-stage { position: sticky; top: 0; height: 100svh; display: grid; place-items: start center; padding: 12svh var(--pad) 0; }
.caption { grid-area: 1 / 1; margin: 0; text-align: center; font-size: clamp(30px, 3.9vw, 58px); max-width: 21ch; opacity: 0; text-shadow: 0 2px 30px #f6ecdd, 0 0 12px #f6ecdd; }
.oven-timer {
  position: absolute; left: 50%; bottom: max(7svh, 40px); display: flex; align-items: center; gap: 12px;
  background: #0d0907; color: #fff; border-radius: 999px; padding: 9px 20px 9px 10px; font-weight: 600; font-size: 15px; white-space: nowrap;
  box-shadow: 0 18px 40px -16px #3b1606aa; opacity: 0; transform: translate(-50%, 16px) scale(.96);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); pointer-events: none;
}
.oven-timer.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.oven-timer i { width: 28px; height: 28px; border-radius: 50%; background: conic-gradient(var(--orange) calc(var(--p, 0) * 1turn), #ffffff26 0); -webkit-mask: radial-gradient(circle, transparent 8px, #000 9px); mask: radial-gradient(circle, transparent 8px, #000 9px); }
.oven-timer b { font-variant-numeric: tabular-nums; color: var(--orange); font-size: 18px; min-width: 3.2em; text-align: right; }
.oven-timer.done b { color: #34c759; }

/* Kapak şeridi */
.covers { padding: 18vh 0 14vh; }
.covers-head { padding: 0 var(--pad); max-width: 820px; margin: 0 auto 56px; text-align: center; }
.covers-head h2 { font-size: clamp(36px, 5vw, 68px); margin: 0 0 14px; }
.covers-head p { color: var(--ink-2); margin: 0 auto; max-width: 520px; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 28px; width: max-content; padding: 30px 0 40px; animation: marquee 60s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.cover { width: clamp(220px, 26vw, 340px); background: var(--paper); padding: 12px 12px 16px; border-radius: 6px; box-shadow: 0 24px 40px -22px #5a2a0a66, 0 2px 6px #5a2a0a14; transform: rotate(var(--r, -2deg)); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.cover:nth-child(even) { --r: 2.2deg; margin-top: 26px; }
.cover:hover { transform: rotate(0) translateY(-6px) scale(1.03); }
.cover img { aspect-ratio: 1376 / 768; object-fit: cover; border-radius: 3px; width: 100%; height: auto; }
.cover span { display: block; font-family: var(--display); font-weight: 600; font-size: 19px; margin-top: 10px; text-align: center; }

/* Özellikler: yapışkan telefon + kayan adımlar */
.features { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4vw; padding: 0 var(--pad); max-width: 1240px; margin: 0 auto; }
.phone-col { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; order: 2; } /* sağda: 3D tabak arkasına kayar */
.phone {
  --h: min(76svh, 720px);
  height: var(--h); width: calc(var(--h) * 1206 / 2622 + 22px);
  padding: 11px; border-radius: calc(var(--h) * .085);
  background: linear-gradient(145deg, #3a302a, #120c09 45%, #2c241f);
  box-shadow: 0 50px 90px -40px #3b1606cc, 0 0 0 1.5px #6d5a4d inset, 0 0 0 4px #1a120e inset;
  position: relative; transform-style: preserve-3d;
}
.phone::before { content: ""; position: absolute; top: calc(11px + var(--h) * .012); left: 50%; width: 30%; height: calc(var(--h) * .034); transform: translateX(-50%); background: #000; border-radius: 99px; z-index: 3; }
.phone-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--h) * .072); background: #f2f2f7; }
.phone-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .55s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.phone-screen img.on { opacity: 1; transform: none; }
.steps-col { padding: 30vh 0 30vh; }
.step { min-height: 80svh; display: flex; flex-direction: column; justify-content: center; opacity: .25; transition: opacity .5s; }
.step.on { opacity: 1; }
.step .num { font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--orange); letter-spacing: .1em; margin-bottom: 14px; }
.step h3 { font-size: clamp(34px, 3.8vw, 56px); margin: 0 0 18px; }
.step p { font-size: 18px; color: var(--ink-2); max-width: 30em; margin: 0; }

/* Ek özellikler */
.extras { padding: 22vh var(--pad) 12vh; max-width: 1240px; margin: 0 auto; }
.extras h2 { font-size: clamp(36px, 5vw, 68px); text-align: center; margin: 0 auto 64px; max-width: 16ch; }
.extras-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card {
  background: #fffaf2d9; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius); padding: 28px; box-shadow: 0 1px 0 #ffffff inset, 0 20px 40px -30px #5a2a0a55;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 1px 0 #ffffff inset, 0 30px 50px -30px #5a2a0a77; }
.card .ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px; color: #fff; }
.card .ic svg { width: 24px; height: 24px; }
.card h3 { font-family: var(--display); font-size: 24px; font-weight: 620; margin: 0 0 8px; letter-spacing: -.01em; }
.card p { margin: 0; color: var(--ink-2); font-size: 16px; }

/* Kapanış */
.final { min-height: 120svh; display: grid; place-items: center; padding: 18vh var(--pad); text-align: center; }
.final-copy { display: grid; justify-items: center; }
.final h2 { font-size: clamp(48px, 8vw, 120px); margin: 0 0 22px; }
.final .lead { margin-left: auto; margin-right: auto; }
.final .cta-row { justify-content: center; }
.qr { margin: 0; display: grid; justify-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); background: var(--paper); padding: 12px 12px 8px; border-radius: 16px; box-shadow: 0 14px 30px -18px #5a2a0a66; }
@media (hover: none) { .qr { display: none; } }

.footer { padding: 40px var(--pad) max(40px, env(safe-area-inset-bottom)); display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); border-top: 1px solid #2b1a1014; background: #f3e4cfcc; }
.footer a { margin-right: 18px; text-decoration: none; font-weight: 600; color: var(--ink); }
.footer p { margin: 0; }

.reveal { opacity: 0; transform: translateY(40px); }

/* 3D yoksa: giriş arka planında suluboya kapak */
.no-gl #gl { display: none; }
.no-gl .hero { background: linear-gradient(90deg, var(--cream) 30%, #f6ecdd00 75%), url(../img/covers/karniyarik.webp) right center / cover no-repeat; }
.no-gl-note { position: fixed; bottom: 12px; left: 12px; z-index: 30; font-size: 12px; background: var(--paper); padding: 6px 10px; border-radius: 8px; margin: 0; }

/* Tablet */
@media (max-width: 1024px) {
  .extras-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Telefon: tek sütun; telefon üstte yapışkan, adım kartları alttan üstüne kayar */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .brand span { display: none; }
  .hero { align-items: end; padding: 90px var(--pad) max(56px, calc(env(safe-area-inset-bottom) + 32px)); text-align: left; }
  .scroll-cue { display: none; }
  .hero h1 { font-size: clamp(42px, 12.5vw, 64px); }
  .lead { margin-bottom: 26px; }
  .store { padding-right: 18px; }
  .store strong { font-size: 16px; }
  .caption { font-size: clamp(26px, 7.4vw, 40px); }
  .story { height: 680vh; }
  .story-stage { padding-top: 10svh; }
  .covers { padding: 12vh 0 8vh; }
  .features { grid-template-columns: 1fr; gap: 0; padding: 0; }
  .phone-col { order: 0; top: 56px; height: calc(100svh - 56px); align-items: start; padding-top: 2svh; z-index: 1; }
  .phone { --h: min(62svh, 540px); }
  .steps-col { margin-top: -60svh; padding: 0 var(--pad) 10svh; position: relative; z-index: 2; }
  .step { min-height: 90svh; justify-content: flex-end; padding-bottom: 4svh; opacity: 1; }
  .step .inner { background: #fffaf2ee; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: var(--radius); padding: 22px 22px 24px; box-shadow: 0 20px 40px -20px #5a2a0a66; }
  .step:not(.on) .inner { opacity: .55; }
  .step h3 { font-size: 30px; margin-bottom: 10px; }
  .step p { font-size: 16px; }
  .extras { padding-top: 14vh; }
  .extras h2 { margin-bottom: 40px; }
  .extras-grid { grid-template-columns: 1fr; gap: 14px; }
  .card { padding: 22px; display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; align-items: start; }
  .card .ic { margin: 0; grid-row: span 2; }
  .card h3 { font-size: 21px; margin-bottom: 4px; }
  .final h2 { font-size: clamp(44px, 13vw, 72px); }
  .footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .loader img, .scroll-cue i::after { animation: none; }
  .story { height: auto; }
  .oven-timer { display: none; }
  .story-stage { position: static; height: auto; display: grid; gap: 30px; padding: 20vh var(--pad); }
  .caption { grid-area: auto; opacity: 1; }
  .reveal { opacity: 1; transform: none; }
}