/* ══════════════════════════════════════════════════════════════
   ALIKRA · Waitlist — "Kağıt & Tahta" (Paper & Board) editorial system
   Matches the launch films: navy ink, tan, paper, red marker, blue.
   ══════════════════════════════════════════════════════════════ */
:root {
  --paper:   #f0ece1;
  --paper2:  #f6f3ea;
  --white:   #fffefb;
  --navy:    #131543;
  --navy-2:  #24265c;
  --tan:     #C7BFAB;
  --tan-2:   #d8d1c0;
  --red:     #bf4127;
  --blue:    #2f4f8f;
  --gold:    #b89653;
  --ink2:    rgba(19,21,67,.62);
  --ink3:    rgba(19,21,67,.40);
  --ink4:    rgba(19,21,67,.20);
  --line:    rgba(19,21,67,.14);
  --line2:   rgba(19,21,67,.08);
  --paper-sh: rgba(19,21,67,.10);
  --serif:   'Newsreader', Georgia, serif;
  --sans:    'Geist', -apple-system, system-ui, sans-serif;
  --mono:    'Geist Mono', ui-monospace, monospace;
  --hand:    'Caveat', cursive;
  --ease:    cubic-bezier(.22,1,.36,1);
  --max:     1220px;
  --pad:     clamp(20px,5vw,60px);
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body {
  font-family:var(--sans); background:var(--paper); color:var(--navy);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  position:relative;
}
/* paper grain + warm vignette */
body::before {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1100px 640px at 78% -6%, rgba(184,150,83,.10), transparent 60%),
    radial-gradient(900px 700px at 0% 108%, rgba(47,79,143,.05), transparent 60%);
}
body::after {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.028'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
::selection { background:rgba(191,65,39,.16); color:var(--red) }
a { color:inherit; text-decoration:none }
button { font-family:inherit; cursor:pointer }
svg { display:block }
.wrap { width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--pad); position:relative; z-index:1 }

/* ── NAV ─────────────────────────────────────────── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:90; height:66px; display:flex; align-items:center;
  background:rgba(240,236,225,.8); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.nav__in { max-width:var(--max); margin:0 auto; padding:0 var(--pad); width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:20px }
.nav__logo { display:flex; align-items:center; gap:9px }
.nav__logo svg { height:24px; width:auto }
.nav__logo .word { font-family:var(--hand); font-weight:700; font-size:26px; color:var(--navy); letter-spacing:.01em; line-height:1 }
.nav__links { display:flex; align-items:center; gap:6px }
.nav__links a { font-size:13.5px; font-weight:400; color:var(--ink2); padding:6px 13px; transition:color .15s }
.nav__links a:hover,.nav__links a.active { color:var(--navy) }
.nav__cta {
  display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 20px; border-radius:100px;
  font-size:13.5px; font-weight:500; letter-spacing:.01em; color:var(--white); background:var(--navy); border:none;
  transition:transform .14s var(--ease), box-shadow .16s, background .16s;
}
.nav__cta:hover { transform:translateY(-1px); box-shadow:0 10px 24px -10px rgba(19,21,67,.6); background:var(--navy-2) }
.nav__cta svg { width:14px; height:14px; stroke-width:2.2 }

/* ── HERO ─────────────────────────────────────────── */
.hero {
  min-height:100vh; min-height:100svh; /* svh: ignores the mobile browser chrome
    show/hide on scroll, so the hero (and the phone inside it) doesn't resize
    mid-scroll — that resize is what reads as the video "zooming". */
  padding-top:66px; display:flex; align-items:center; position:relative;
}
.hero__grid {
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,5vw,72px); align-items:center;
  padding:clamp(44px,6vw,88px) 0; width:100%;
}
.badge {
  display:inline-flex; align-items:center; gap:9px; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--red); white-space:nowrap;
  border:1px solid rgba(191,65,39,.3); background:rgba(191,65,39,.06); padding:6px 13px; border-radius:100px;
  margin-bottom:clamp(20px,3vw,30px);
}
.badge .dot { width:5px; height:5px; background:var(--red); border-radius:50%; animation:pulse 2.6s ease-in-out infinite }
@keyframes pulse { 0%,100%{opacity:.3} 50%{opacity:1} }

.hero h1 {
  font-family:var(--serif); font-weight:400; font-size:clamp(42px,5.8vw,78px);
  line-height:.99; letter-spacing:-.028em; color:var(--navy); margin-bottom:clamp(18px,2.6vw,28px);
}
.hero h1 .mk { position:relative; font-style:italic; color:var(--navy); white-space:nowrap }
.hero h1 .mk svg { position:absolute; left:-2%; right:-2%; bottom:-.16em; width:104%; height:.42em; overflow:visible }
.hero__sub {
  font-size:clamp(15px,1.5vw,17.5px); font-weight:300; color:var(--ink2); line-height:1.68;
  max-width:44ch; margin-bottom:clamp(26px,3.4vw,36px);
}
.hero__actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:clamp(30px,4vw,48px) }
.btn-navy {
  display:inline-flex; align-items:center; gap:10px; height:54px; padding:0 28px; border-radius:100px;
  font-size:14.5px; font-weight:500; color:var(--white); background:var(--navy); border:none;
  transition:transform .14s var(--ease), box-shadow .16s, background .16s;
}
.btn-navy:hover { transform:translateY(-2px); box-shadow:0 16px 34px -14px rgba(19,21,67,.65); background:var(--navy-2) }
.btn-navy svg { width:15px; height:15px; stroke-width:2.2 }
.btn-outline {
  display:inline-flex; align-items:center; gap:9px; height:54px; padding:0 24px; border-radius:100px;
  font-size:14.5px; font-weight:400; color:var(--navy); background:transparent; border:1px solid var(--line);
  transition:border-color .15s, background .15s;
}
.btn-outline:hover { border-color:var(--navy); background:rgba(19,21,67,.03) }
.btn-outline svg { width:16px; height:16px }

.hero__stats { display:flex; align-items:stretch; gap:0; border-top:1px solid var(--line) }
.hero__stat { padding:18px 26px 0 0; margin-right:26px; border-right:1px solid var(--line) }
.hero__stat:last-child { border-right:none; margin-right:0 }
.hero__stat .v { font-family:var(--serif); font-size:clamp(26px,3vw,34px); font-weight:400; line-height:1; letter-spacing:-.02em; margin-bottom:5px }
.hero__stat .v .r { color:var(--red) }
.hero__stat .k { font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3) }

/* ── PHONE ────────────────────────────────────────── */
.phone {
  position:relative; width:100%; max-width:340px; margin:0 auto; aspect-ratio:9/19;
  background:linear-gradient(160deg,#1b1d48,#0e0f2e);
  border-radius:40px; padding:11px;
  clip-path:inset(0 round 40px);
  box-shadow:0 50px 90px -40px rgba(19,21,67,.7), 0 8px 22px -10px rgba(19,21,67,.4), inset 0 0 0 1.5px rgba(255,255,255,.08);
  /* clip-path (rather than border-radius+overflow) is what clips this box —
     overflow:hidden on a GPU-layer-promoted element leaves a stray sliver of
     the child iframe/video visible past the rounded corner on Chromium/
     Android; clip-path doesn't exhibit that seam. */
}
/* iOS Safari only (feature-query hack: -webkit-touch-callout is WebKit/iOS-
   exclusive): promote to its own compositing layer there so a clipped,
   absolutely-positioned iframe/video doesn't get re-rasterized mid momentum-
   scroll (reads as the video briefly "zooming"). Scoped to iOS only because
   this same promotion is what causes the Chromium/Android corner seam above. */
@supports (-webkit-touch-callout:none) {
  .phone { transform:translateZ(0); -webkit-transform:translateZ(0); }
}
.phone::before { /* speaker */
  content:""; position:absolute; top:20px; left:50%; transform:translateX(-50%); z-index:5;
  width:44px; height:5px; border-radius:5px; background:rgba(255,255,255,.14);
}
.phone__screen {
  position:relative; width:100%; height:100%; border-radius:30px; overflow:hidden;
  background:#e7e0d0; contain:layout paint style; isolation:isolate;
}
.phone__screen iframe, .phone__screen video {
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
  pointer-events:none; user-select:none; -webkit-user-select:none; object-fit:cover;
}
/* poster shown before iframe injected */
.phone__poster {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  background:radial-gradient(ellipse 120% 80% at 50% 36%, #e7e0d0, #d9d1bf); cursor:pointer;
}
.phone__poster .play {
  width:64px; height:64px; border-radius:50%; background:var(--navy); display:grid; place-items:center;
  box-shadow:0 18px 40px -16px rgba(19,21,67,.7); transition:transform .16s var(--ease);
}
.phone__poster:hover .play { transform:scale(1.06) }
.phone__poster .play svg { width:24px; height:24px; margin-left:3px }
.phone__poster .ttl { font-family:var(--hand); font-weight:700; font-size:30px; color:var(--navy); text-align:center; line-height:1 }
.phone__poster .sb { font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink3) }
.phone__live {
  position:absolute; top:14px; left:14px; z-index:6; display:flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--white);
  background:rgba(19,21,67,.55); padding:4px 9px; border-radius:100px; backdrop-filter:blur(6px);
}
.phone__live .d { width:5px; height:5px; border-radius:50%; background:var(--red); animation:pulse 1.6s ease-in-out infinite }

/* ── MARQUEE ──────────────────────────────────────── */
.strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; background:var(--paper2); position:relative }
.strip::before,.strip::after { content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none }
.strip::before { left:0; background:linear-gradient(90deg,var(--paper2),transparent) }
.strip::after  { right:0; background:linear-gradient(-90deg,var(--paper2),transparent) }
.strip__track { display:flex; align-items:center; white-space:nowrap; animation:marq 40s linear infinite; will-change:transform }
@keyframes marq { to { transform:translateX(-50%) } }
.strip__item { display:inline-flex; align-items:center; gap:12px; padding:15px 26px; flex-shrink:0;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3) }
.strip__item b { color:var(--navy); font-weight:500 }
.strip__sep { color:var(--red) }

/* ── SECTION SCAFFOLD ─────────────────────────────── */
.section { padding:clamp(64px,9vw,120px) 0 }
.sec-head { display:flex; align-items:baseline; gap:18px; padding-bottom:20px; border-bottom:1px solid var(--line); margin-bottom:clamp(38px,5vw,58px) }
.sec-no { font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--red); flex-shrink:0 }
.sec-head h2 { font-family:var(--serif); font-weight:400; font-size:clamp(26px,3.2vw,40px); letter-spacing:-.02em; color:var(--navy); flex:1 }
.sec-head h2 em { font-style:italic; color:var(--red) }
.sec-aside { font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); flex-shrink:0 }

/* ── FILMS GALLERY ────────────────────────────────── */
.films { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,44px); align-items:start }
.film { display:flex; flex-direction:column; gap:18px }
.film .phone { max-width:none }
.film__meta { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:0 4px }
.film__meta .t { font-family:var(--serif); font-size:19px; font-weight:400; color:var(--navy); letter-spacing:-.01em }
.film__meta .s { font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--red) }
.film__desc { font-size:13.5px; font-weight:300; color:var(--ink2); line-height:1.55; padding:0 4px }

/* ── HOW (steps) ──────────────────────────────────── */
.steps { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); background:var(--paper2) }
.step { padding:clamp(26px,3vw,42px); border-right:1px solid var(--line); position:relative }
.step:last-child { border-right:none }
.step__k { font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--red); margin-bottom:22px }
.step__mini { height:80px; margin-bottom:22px }
.step__mini svg { width:100%; height:100%; overflow:visible }
.step h3 { font-family:var(--serif); font-weight:400; font-size:22px; color:var(--navy); margin-bottom:9px; letter-spacing:-.01em }
.step p { font-size:14px; font-weight:300; color:var(--ink2); line-height:1.6 }

/* ── WHY (features) ───────────────────────────────── */
.feat-grid { display:grid; grid-template-columns:repeat(2,1fr); border:1px solid var(--line) }
.feat { padding:clamp(24px,3vw,38px); border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper2); transition:background .2s }
.feat:nth-child(2n) { border-right:none }
.feat:nth-child(n+3) { border-bottom:none }
.feat:hover { background:var(--white) }
.feat__ic { width:32px; height:32px; color:var(--red); margin-bottom:16px }
.feat__ic svg { width:100%; height:100% }
.feat h3 { font-size:17px; font-weight:500; color:var(--navy); margin-bottom:8px; letter-spacing:-.01em }
.feat p { font-size:14px; font-weight:300; color:var(--ink2); line-height:1.6; max-width:42ch }

/* ── RECEIPT (ön kayıt fişi) ──────────────────────── */
.wl { padding:clamp(64px,9vw,120px) 0 }
.wl__grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(44px,6vw,88px); align-items:center }
.wl__pitch h2 { font-family:var(--serif); font-weight:400; font-size:clamp(28px,3.6vw,46px); line-height:1.03; letter-spacing:-.022em; color:var(--navy); margin-bottom:18px }
.wl__pitch h2 em { font-style:italic; color:var(--red) }
.pitch-no { font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--red); margin-bottom:20px; display:flex; align-items:center; gap:12px }
.pitch-no::before { content:""; width:26px; height:1px; background:var(--red) }
.wl__pitch p { font-size:15px; font-weight:300; color:var(--ink2); line-height:1.7; max-width:40ch; margin-bottom:30px }
.perks { display:flex; flex-direction:column; gap:13px }
.perk { display:flex; gap:13px; align-items:flex-start }
.perk__i { color:var(--red); flex-shrink:0; margin-top:2px }
.perk__i svg { width:15px; height:15px }
.perk__t { font-size:14px; font-weight:300; color:var(--ink2); line-height:1.5 }
.perk__t strong { color:var(--navy); font-weight:500 }

/* the receipt paper */
.receipt {
  position:relative; background:var(--white); color:var(--navy);
  padding:clamp(28px,3.6vw,42px) clamp(26px,3.2vw,40px);
  box-shadow:0 40px 80px -34px var(--paper-sh), 0 2px 0 rgba(19,21,67,.05);
  --notch:12px;
}
/* torn/perforated top & bottom via masks */
.receipt::before, .receipt::after {
  content:""; position:absolute; left:0; right:0; height:12px;
  background:radial-gradient(circle at 8px -2px, transparent 0 8px, var(--white) 8px) repeat-x;
  background-size:24px 12px;
}
.receipt::before { top:-11px; transform:rotate(180deg) }
.receipt::after { bottom:-11px }
.receipt__hd { text-align:center; padding-bottom:18px; margin-bottom:22px; border-bottom:1.5px dashed var(--tan) }
.receipt__hd .brand { font-family:var(--hand); font-weight:700; font-size:32px; color:var(--navy); line-height:1; margin-bottom:6px }
.receipt__hd .ttl { font-family:var(--mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink3) }
.receipt__meta { display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--ink3); margin-bottom:20px }

.field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px }
.field label { font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3) }
.field .opt { color:var(--ink4); font-size:9px }
.field input,.field select,.field textarea {
  font-family:var(--sans); font-size:14.5px; font-weight:400; color:var(--navy);
  background:var(--paper2); border:1px solid var(--line); border-radius:8px; padding:11px 13px;
  outline:none; appearance:none; -webkit-appearance:none; width:100%;
  transition:border-color .16s, box-shadow .16s, background .16s;
}
.field input::placeholder,.field textarea::placeholder { color:var(--ink4) }
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--navy); box-shadow:0 0 0 3px rgba(19,21,67,.08); background:var(--white) }
.field select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23131543' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:36px; cursor:pointer;
}
.field textarea { resize:vertical; min-height:70px }
.g2 { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.receipt__rule { border:none; border-top:1.5px dashed var(--tan); margin:20px 0 18px }
.submit {
  width:100%; height:54px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-size:14px; font-weight:500; letter-spacing:.02em; color:var(--white); background:var(--navy); border:none;
  transition:transform .14s var(--ease), box-shadow .16s, background .16s;
}
.submit:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 16px 34px -14px rgba(19,21,67,.6); background:var(--navy-2) }
.submit:disabled { opacity:.55; cursor:wait }
.submit svg { width:14px; height:14px; stroke-width:2.2 }
.receipt__note { margin-top:14px; font-family:var(--mono); font-size:9.5px; letter-spacing:.02em; color:var(--ink3); line-height:1.6; text-align:center }
.receipt__note a { color:var(--red); border-bottom:1px solid rgba(191,65,39,.3) }
.receipt__barcode { margin-top:20px; display:flex; flex-direction:column; align-items:center; gap:8px }
.receipt__barcode .bars { width:70%; height:40px }
.receipt__barcode .no { font-family:var(--mono); font-size:10px; letter-spacing:.3em; color:var(--ink3) }

/* success */
.done { display:none; flex-direction:column; align-items:center; gap:16px; text-align:center }
.done.on { display:flex }
.done__stamp {
  font-family:var(--mono); font-weight:500; font-size:15px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--red); border:2.5px solid var(--red); border-radius:10px; padding:10px 20px;
  transform:rotate(-6deg); opacity:.92;
}
.done__h { font-family:var(--hand); font-weight:700; font-size:clamp(30px,4vw,42px); color:var(--navy); line-height:1 }
.done__body { font-size:14px; font-weight:300; color:var(--ink2); line-height:1.6; max-width:40ch }
.done__pos { font-family:var(--mono); font-size:15px; color:var(--navy); padding:12px 20px; background:var(--paper2); border:1px dashed var(--tan); border-radius:8px; letter-spacing:.06em }
.done__link { display:inline-flex; align-items:center; gap:9px; font-size:13px; color:var(--red); border-bottom:1px solid rgba(191,65,39,.3); padding-bottom:2px }
.done__link svg { width:13px; height:13px; stroke-width:2 }

/* ── CLOSING ──────────────────────────────────────── */
.closing { border-top:1px solid var(--line); padding:clamp(72px,10vw,130px) 0; text-align:center; position:relative; overflow:hidden }
.closing__label { font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--red); margin-bottom:22px }
.closing h2 { font-family:var(--serif); font-weight:400; font-size:clamp(32px,5.2vw,66px); line-height:1.02; letter-spacing:-.026em; color:var(--navy); margin-bottom:16px }
.closing h2 em { font-style:italic; color:var(--red) }
.closing p { font-size:clamp(14px,1.5vw,17px); font-weight:300; color:var(--ink2); margin-bottom:36px }
.closing__row { display:flex; gap:13px; justify-content:center; flex-wrap:wrap }

/* ── FOOTER ───────────────────────────────────────── */
.footer { border-top:1px solid var(--line); padding:30px 0 }
.footer__in { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap }
.footer__l { display:flex; align-items:center; gap:10px }
.footer__l .word { font-family:var(--hand); font-weight:700; font-size:22px; color:var(--navy) }
.footer__c { font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--ink3) }
.footer__ln { display:flex; gap:20px }
.footer__ln a { font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); transition:color .14s }
.footer__ln a:hover { color:var(--red) }

/* ── RESPONSIVE ───────────────────────────────────── */
@media (max-width:940px) {
  .hero__grid { grid-template-columns:1fr; gap:44px }
  .hero__phone-col { order:-1 }
  .films { grid-template-columns:1fr; max-width:380px; margin:0 auto; gap:56px }
  .wl__grid { grid-template-columns:1fr; gap:44px }
  .steps { grid-template-columns:1fr }
  .step { border-right:none; border-bottom:1px solid var(--line) }
  .step:last-child { border-bottom:none }
  .feat-grid { grid-template-columns:1fr }
  .feat { border-right:none }
  .feat:nth-child(n+1) { border-bottom:1px solid var(--line) }
  .feat:last-child { border-bottom:none }
}
@media (max-width:560px) {
  .g2 { grid-template-columns:1fr }
  .nav__links { display:none }
  .hero__stats { flex-wrap:wrap; gap:14px }
}
@media (prefers-reduced-motion:reduce) { .strip__track { animation:none } * { scroll-behavior:auto } }