/* ===== Kafe-in landing — warm minimalism palette ===== */
:root{
  --cream:#f3ece1;
  --sand:#e8dcc8;
  --oak:#c9a886;
  --terra:#c4602f;       /* terrakota vurgu */
  --red:#c8302d;         /* Kafe-in marka kırmızısı (logo + dokümanlar) */
  --red-bright:#e0463f;
  --amber:#e8a15c;
  --plum:#3a2a2e;        /* koyu gölge */
  --night:#1d1619;       /* koyu ton — artık sadece derin gölge/kontrast için */
  --paper:#f6efe4;       /* LIGHT ZEMİN — sitenin ana açık tonu, tüm yüzeyler bunda buluşur */
  --ink:#2b2320;
  --muted:#7a6a5d;
  --font: "Nunito", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Baloo 2", "Nunito", system-ui, sans-serif;   /* logonun yuvarlak hatlarıyla akraba */
}

::selection{ background:var(--red); color:#fff; }

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ background:var(--paper); color:var(--ink); font-family:var(--font); -webkit-font-smoothing:antialiased; }
body{ overflow-x:hidden; }
img{ display:block; max-width:100%; }

/* ===== Yükleme ekranı ===== */
.loader{
  position:fixed; inset:0; z-index:100; background:var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  transition:opacity .6s ease, visibility .6s ease;
}
.loader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.loader__logo{ width:min(240px,55vw); height:auto; }
.loader__brand{ color:var(--red); font-family:var(--font-head); font-size:clamp(28px,6vw,52px); font-weight:700; letter-spacing:-.01em; }
.loader__logo + .loader__brand{ display:none; }            /* logo yüklenemezse JS bunu geri açar */
.loader__bar{ width:min(220px,55vw); height:3px; background:rgba(43,35,32,.14); border-radius:999px; overflow:hidden; }
.loader__bar span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--amber),var(--red)); border-radius:999px; transition:width .25s ease; }

/* ===== Mekanda ilerleme hissi ===== */
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:60; background:transparent; pointer-events:none; }
.scroll-progress span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--amber),var(--red)); box-shadow:0 0 12px rgba(200,48,45,.55); }

/* sürekli indir */
.sticky-cta{
  position:fixed; top:18px; right:18px; z-index:50;
  background:var(--red); color:#fff; text-decoration:none;
  border:2px solid rgba(255,255,255,.9);                   /* kırmızı bölümlerde de okunur */
  padding:9px 18px; border-radius:999px; font-size:14px; font-weight:600;
  letter-spacing:.02em; box-shadow:0 4px 18px rgba(0,0,0,.25), 0 0 22px rgba(200,48,45,.4);
  transition:transform .2s ease, opacity .2s ease;
}
.sticky-cta:hover{ transform:translateY(-1px); }

/* ===== FAZ A1 — HARİTA (uygulamanın içi) ===== */
.mapphase{ position:relative; height:460vh; }   /* 2 ara durak + seçim + dalış */
.map__sticky{ position:sticky; top:0; height:100vh; overflow:hidden; background:var(--paper); }
.map__cam{ position:absolute; inset:0; transform-origin:0 0; will-change:transform; } /* kamera: x/y/scale ile pin'den pin'e süzülür */
.map__svg{ position:absolute; inset:0; width:100%; height:100%; }
.map__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1s ease; }
.map__img.is-on{ opacity:1; }
.map__fade{ position:absolute; inset:0; background:var(--paper); opacity:0; pointer-events:none; z-index:5; }

/* pinler */
.pin{ position:absolute; width:0; height:0; z-index:2; }
.pin i{ position:absolute; left:-9px; top:-9px; width:18px; height:18px; border-radius:50%;
  background:var(--red); border:2.5px solid #fff; box-shadow:0 4px 14px rgba(200,48,45,.5); }
.pin i::after{ content:""; position:absolute; inset:-9px; border-radius:50%;
  border:2px solid rgba(200,48,45,.55); animation:pinpulse 2.2s ease-out infinite; }
@keyframes pinpulse{ 0%{ transform:scale(.55); opacity:.9 } 100%{ transform:scale(1.5); opacity:0 } }
.pin__label::before{ content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--red); margin-right:5px; vertical-align:middle; }
.pin__label{ position:absolute; bottom:16px; left:0; width:140px; margin-left:-70px; text-align:center;
  font-size:12.5px; font-weight:600; color:var(--ink);
  background:rgba(255,255,255,.92); border:1px solid rgba(43,35,32,.12); border-radius:999px; padding:4px 8px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 4px 14px rgba(43,35,32,.18); opacity:0; }
.pin--sel i{ background:var(--red-bright); }
.pin--sel i::after{ animation-duration:1.4s; }

/* app UI katmanı */
.map__ui{ position:absolute; inset:0; z-index:6; pointer-events:none; }
.map__intro{ position:relative; z-index:0; text-align:center; margin-top:9vh; color:var(--ink); }
/* yazıların arkasına yumuşak aydınlık vinyet — harita ne kadar detaylı olursa olsun okunur */
.map__intro::before{ content:""; position:absolute; inset:-10vh -34vw -6vh; z-index:-1;
  background:radial-gradient(58% 72% at 50% 42%, rgba(246,239,228,.85), rgba(246,239,228,.4) 55%, rgba(246,239,228,0) 78%); }
.brand-logo{ width:clamp(220px,34vw,400px); height:auto; margin:0 auto;
  filter:drop-shadow(0 6px 22px rgba(200,48,45,.22)); }
.brand-logo + .brand{ display:none; }                       /* logo yüklenemezse JS geri açar */
.map__intro .brand{ color:var(--red); }
.map__intro .brand-sub{ color:var(--muted); opacity:1; margin-top:10px; font-weight:600; }
.map__intro .brand-sub::before, .map__intro .brand-sub::after{
  content:""; display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--red); vertical-align:middle; margin:0 10px; }
.map__intro .hero__q{ color:var(--ink); margin-top:22px; }
.map__intro .hero__q strong{ color:var(--red); font-weight:inherit; }
.map__intro .scroll-hint::first-letter{ color:var(--red); font-weight:700; }
.map__intro .scroll-hint{ display:inline-block; color:var(--ink); opacity:.95;
  background:rgba(255,255,255,.78); border:1px solid rgba(43,35,32,.12);
  padding:8px 18px; border-radius:999px; box-shadow:0 4px 16px rgba(43,35,32,.12);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.map__intro .searchbar{ background:rgba(255,255,255,.82); border-color:rgba(43,35,32,.12);
  color:var(--ink); box-shadow:0 8px 30px rgba(43,35,32,.14); }
.map__intro .searchbar__text{ color:var(--ink); }
.map__intro .searchbar__text.is-typing::after{ background:rgba(43,35,32,.75); }
.filters{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:14px; }
.fchip{ font-size:13px; font-weight:600; color:var(--ink); background:rgba(255,255,255,.78);
  border:1px solid rgba(43,35,32,.12); padding:7px 14px; border-radius:999px;
  box-shadow:0 3px 12px rgba(43,35,32,.1); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.fchip--on{ background:var(--red); border-color:var(--red); color:#fff;
  box-shadow:0 4px 16px rgba(200,48,45,.35); }              /* aktif filtre hissi */

.map__msg{ position:absolute; left:50%; transform:translateX(-50%); width:max-content; max-width:86vw;
  text-align:center; font-family:var(--font-head); font-size:clamp(18px,3vw,28px); color:var(--ink);
  opacity:0; }
.map__msg strong{ color:var(--red); }
/* mesajlar: harita üstünde okunabilir aydınlık cam zemin */
.map__msg{ background:rgba(255,255,255,.85); padding:10px 22px; border-radius:999px;
  box-shadow:0 6px 24px rgba(43,35,32,.16); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.map__msg1{ top:10vh; }

/* ara durak mini kartları: kamera pini ortaladığında pinin hemen altında belirir */
.minicard{ position:absolute; left:50%; top:calc(50% + 46px); width:230px; margin-left:-115px;
  background:rgba(255,255,255,.92); border:1px solid rgba(43,35,32,.12); border-radius:14px;
  padding:10px 16px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 12px 36px rgba(43,35,32,.22); color:var(--ink); opacity:0; text-align:left; }
.minicard__name{ font-family:var(--font-head); font-size:15px; font-weight:600; color:var(--ink); }
.minicard__meta{ display:flex; flex-wrap:wrap; gap:6px; margin-top:5px; font-size:12.5px; font-weight:600; color:#6b584c; }
.minicard__meta span:first-child{ color:var(--terra); }
.minicard__meta span:last-child{ color:var(--red); font-weight:700; }   /* eşleşme = marka anı */

/* seçim kartı: merkezde, tam görünür */
.map__pick{ position:absolute; left:50%; transform:translateX(-50%); bottom:13vh;
  width:min(440px,90vw); text-align:center; }
.map__msg2{ position:static; transform:none; display:inline-block; margin-top:16px;
  font-size:clamp(17px,2.4vw,23px); }
.map__msg2 strong{ font-weight:700; }
.map__card{ opacity:0; margin:0 auto; max-width:none; width:100%; text-align:left; }

/* ===== FAZ A2 — DALIŞ (hero video) ===== */
.hero{ position:relative; height:450vh; margin-top:-1px; }   /* dive ~4.5 ekran boyu scroll'a yayılır */
.hero__sticky{ position:sticky; top:0; height:100vh; width:100%; overflow:hidden; background:var(--paper); }
#hero-canvas{ position:absolute; inset:0; width:100%; height:100%; }
/* light konsept: video doğal gün ışığı tonlarında kalır, filtre yok */
.hero__veil{ position:absolute; inset:0; background:var(--paper); opacity:1; pointer-events:none; }

.hero__overlay{ position:absolute; inset:0; display:flex; align-items:flex-start; justify-content:center; pointer-events:none; }
.hero__intro{ text-align:center; margin-top:14vh; color:#fff; text-shadow:0 2px 30px rgba(0,0,0,.5); }
.brand{ font-family:var(--font-head); font-size:clamp(34px,7vw,72px); font-weight:700; letter-spacing:-.01em; }
.brand-sub{ font-size:clamp(12px,2vw,16px); letter-spacing:.32em; text-transform:uppercase; opacity:.85; margin-top:6px; }
.hero__q{ font-family:var(--font-head); font-size:clamp(24px,4.4vw,44px); font-weight:600; margin-top:26px; opacity:.95; }
.scroll-hint{ margin-top:30px; font-size:13px; letter-spacing:.2em; opacity:.7; animation:bob 2s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); opacity:.7 } 50%{ transform:translateY(6px); opacity:1 } }

/* ===== FAZ B — sahneler ===== */
.scene{ position:relative; min-height:100vh; display:flex; align-items:flex-end;
  background-size:cover; background-position:center; background-color:var(--paper); }

/* ===== Placeholder gradyanları (gerçek foto eklenince üstüne biner) =====
   LIGHT MOD: sade, temiz krem→kum geçişleri. Yapay ışık efekti YOK —
   zemin zaten aydınlık. Gerçek görsel yüklenince main.js örter. */
.ph{ background-size:cover; background-position:center; }
.ph--5{ background-image:linear-gradient(165deg,#f6efe4 0%,#f0e4d0 55%,#e8d7bd 100%); }
.ph--6{ background-image:linear-gradient(160deg,#f4ebdb 0%,#ecddc5 55%,#e3ceae 100%); }
.ph--7{ background-image:linear-gradient(170deg,#f5edde 0%,#eedfc9 55%,#e5d2b5 100%); }
.ph--8{ background-image:linear-gradient(160deg,#f3e9d7 0%,#eadabf 55%,#e0cba8 100%); }
.ph--finale{ background-image:linear-gradient(0deg,#eee0c9 0%,#f4ecdf 50%,#f6efe4 100%); }

/* Hero → ilk sahne yumuşak harman: durak-5 üstten koyu plum'dan erir (sert kesim yok) */
#durak-5::before{ content:""; position:absolute; top:0; left:0; right:0; height:22vh; z-index:1;
  background:linear-gradient(to bottom, var(--paper) 0%, rgba(246,239,228,0) 100%); }
/* okunabilirlik bandı — beyaz parlama yerine markanın kırmızısından derin bir gölge tonu;
   fotoğraflar doğal kalır, alt band uygulama kırmızısıyla akraba */
.scene::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(96,18,16,.38) 0%, rgba(96,18,16,.08) 38%, rgba(96,18,16,0) 55%); }
.scene__overlay{ position:relative; z-index:2; color:var(--ink); max-width:620px; padding:7vh 8vw; }

/* ===== FAZ B — Dijital İkiz bileşenleri ===== */
/* kicker: durağın üst mesajı (beyaz cam kapsül) */
.kicker{ display:inline-block; font-family:var(--font-head); font-size:clamp(15px,2.2vw,20px);
  color:var(--ink); background:rgba(255,255,255,.85); padding:9px 20px; border-radius:999px;
  border:1px solid rgba(43,35,32,.1); box-shadow:0 6px 22px rgba(43,35,32,.14);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); margin-bottom:16px; }
.kicker strong{ color:var(--red); }

/* panel: tüm içerik bunun içinde — metin asla çıplak fotoğraf üstünde durmaz */
.panel{ background:rgba(255,255,255,.9); border:1px solid rgba(43,35,32,.1);
  border-radius:22px; padding:22px 24px; max-width:470px;
  box-shadow:0 18px 50px rgba(43,35,32,.2);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.panel h2{ font-size:clamp(22px,3.4vw,32px) !important; }
.panel .tag{ margin-bottom:4px; }

/* profil başlığı */
.profile{ display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.profile__cup{ width:54px; height:auto; flex:none; }
.profile__id h2{ margin:0 !important; }
.profile__id h2::after{ display:none !important; }
.profile__motto{ color:var(--red); font-weight:700; font-size:14.5px; margin-top:2px; }
.profile .pill{ margin-left:auto; }
.profile__rows{ list-style:none; margin-top:14px; }
.profile__rows li{ display:flex; align-items:center; gap:10px; padding:7px 0;
  font-size:15px; font-weight:600; color:#4a3c34; border-bottom:1px solid rgba(43,35,32,.08); }
.profile__rows li:last-child{ border-bottom:none; }
.profile__rows .ic{ flex:none; }

/* kampanya kuponu */
.coupon{ margin-top:16px; border:2px dashed rgba(200,48,45,.45); background:rgba(200,48,45,.06);
  color:#a3271f; font-weight:700; font-size:14.5px; border-radius:14px; padding:11px 14px; }

/* etkinlik satırı */
.eventcard{ display:flex; justify-content:space-between; align-items:center; gap:12px;
  background:rgba(43,35,32,.05); border:1px solid rgba(43,35,32,.08);
  border-radius:12px; padding:10px 14px; margin-top:10px; font-size:14.5px; }
.eventcard span:last-child{ color:var(--red); font-weight:700; white-space:nowrap; }

/* karar anı (durak 9) */
.scene--plain{ background:var(--paper); min-height:92vh; align-items:center; justify-content:center; }
.scene--plain::after{ display:none; }
.scene__overlay--center{ text-align:center; max-width:560px; margin:0 auto; }
.scene__overlay--center h2::after{ margin-left:auto; margin-right:auto; }
/* D9: zemin alttaki kırmızı vitrinle kesintisiz birleşir */
.scene--red{ background:linear-gradient(175deg,#d23834 0%,#cd3431 100%) !important; }
.scene--red h2{ color:#fff; }
.scene--red h2 strong{ color:#ffd9c2; }
.scene--red h2::after{ background:#fff; opacity:.9; }
.scene--red p{ color:rgba(255,255,255,.92); }
.scene--red .tag{ color:#fff; border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.12); }
.scene--red .ring-bg{ stroke:rgba(255,255,255,.22); }
.scene--red .ring-fg{ stroke:#fff; }
.scene--red .match__val span{ color:#fff; }
.scene--red .match__val small{ color:rgba(255,255,255,.8); }
.scene--red .chip:hover{ background:var(--ink); border-color:var(--ink); }

/* eşleşme halkası — modern, minimal */
.match{ position:relative; width:clamp(150px,20vw,190px); aspect-ratio:1; margin:26px auto 6px; }
.match svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.match circle{ fill:none; stroke-width:6; }
.ring-bg{ stroke:rgba(43,35,32,.1); }
.ring-fg{ stroke:var(--red); stroke-linecap:round; }
.match__val{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; line-height:1; }
.match__val span{ font-family:var(--font-head); font-size:clamp(36px,5vw,48px); font-weight:700; color:var(--red); }
.match__val small{ margin-top:6px; font-size:12px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); }
.chip{ white-space:nowrap; }
.scene__overlay--center .actions{ justify-content:center; }
.scene__overlay--wide{ max-width:1060px; }

/* ===== Durak 10 — uygulama vitrini: MAĞAZA KİMLİĞİ (marka kırmızısı bant) ===== */
.scene--app{ padding:12vh 0;
  background:linear-gradient(175deg,#cd3431 0%,#c8302d 45%,#a52522 100%) !important; }
.scene--app h2{ color:#fff; }
.scene--app h2 strong{ color:#ffd9c2; }
.scene--app h2::after{ background:#fff; opacity:.9; }
.scene--app > .scene__overlay > p, .scene--app p{ color:rgba(255,255,255,.92); }
.scene--app .tag{ color:#fff; border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.12); }
.scene--app .phonewrap figcaption{ color:rgba(255,255,255,.85); }
.scene--app .phonewrap figcaption strong{ color:#fff; }
.scene--app .phone{ box-shadow:0 30px 70px rgba(60,8,7,.45); }
.phones{ display:flex; gap:clamp(18px,4vw,44px); justify-content:center; flex-wrap:wrap; margin-top:34px; }
.phonewrap{ margin:0; }
.phonewrap figcaption{ margin-top:14px; font-size:14px; color:#5a4a40; max-width:210px; }
.phonewrap figcaption strong{ color:var(--red); }
.phone{ position:relative; width:min(210px,62vw); aspect-ratio:9/18.5; border-radius:30px;
  border:7px solid var(--ink); background:#fff; overflow:hidden; margin:0 auto;
  box-shadow:0 24px 60px rgba(43,35,32,.28); }
.phone::before{ content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:34%; height:16px; background:var(--ink); border-radius:999px; z-index:4; }
.phone__shot{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:3; display:none; }
.phone__shot.is-on{ display:block; }
.phone.has-shot .phone__ui{ display:none; }                /* gerçek ekran varken mockup tamamen kapalı */
.phone__shot--low{ object-position:50% 80%; }              /* ekranın alt kısmını göster (menü/fiyatlar) */
.phone__ui{ position:absolute; inset:0; }

/* T1: keşfet */
.phone__map{ position:absolute; inset:0; background:url('assets/map/harita.webp') center/cover, var(--sand); }
.phone__search{ position:absolute; top:34px; left:10px; right:10px; display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.94); border:1px solid rgba(43,35,32,.12); border-radius:999px;
  padding:7px 12px; font-size:11.5px; font-weight:600; color:var(--muted); box-shadow:0 4px 12px rgba(43,35,32,.12); }
.phone__search span{ color:var(--red); font-weight:700; }
.phone__pin{ position:absolute; width:12px; height:12px; border-radius:50%;
  background:var(--red); border:2px solid #fff; box-shadow:0 3px 8px rgba(200,48,45,.45); }
.phone__pin--hot{ width:18px; height:18px; background:var(--red-bright); }

/* T2: canlı veri */
.phone__ui--card{ background:var(--paper); padding:40px 12px 12px; display:flex; flex-direction:column; gap:9px; }
.phone__head{ display:flex; align-items:center; gap:8px; background:#fff; border-radius:12px; padding:9px 10px;
  border:1px solid rgba(43,35,32,.1); }
.phone__head img{ width:26px; height:auto; }
.phone__head b{ font-family:var(--font-head); font-size:14px; color:var(--ink); }
.phone__head em{ font-style:normal; margin-left:auto; font-size:10px; font-weight:700; color:#1e7c3a; }
.phone__row{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:#fff; border-radius:10px; padding:8px 10px; font-size:11.5px; font-weight:600;
  color:#4a3c34; border:1px solid rgba(43,35,32,.08); }
.phone__row b{ color:var(--red); }
.phone__bar{ flex:1; max-width:80px; height:5px; background:rgba(43,35,32,.12); border-radius:999px; overflow:hidden; }
.phone__bar i{ display:block; height:100%; width:55%; background:linear-gradient(90deg,var(--amber),var(--red)); border-radius:999px; }
.phone__live{ margin-top:auto; align-self:center; font-size:10px; font-weight:700; color:#a3271f;
  background:rgba(200,48,45,.08); border:1px solid rgba(200,48,45,.35); border-radius:999px; padding:4px 12px; }

/* T3: eşleşme */
.phone__ui--match{ background:linear-gradient(170deg,#fff 0%,var(--paper) 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.phone__pct{ font-family:var(--font-head); font-size:54px; font-weight:700; color:var(--red); line-height:1; }
.phone__pctsub{ font-size:13px; font-weight:700; color:var(--muted); letter-spacing:.14em; text-transform:uppercase; }
.phone__chips{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:12px; padding:0 14px; }
.phone__chips span{ font-size:10.5px; font-weight:700; color:var(--ink);
  background:rgba(43,35,32,.07); border:1px solid rgba(43,35,32,.12); border-radius:999px; padding:4px 9px; }
.scene__overlay h2{ font-family:var(--font-head); font-size:clamp(26px,4.5vw,46px); font-weight:600; line-height:1.12; margin:12px 0 14px; }
.scene__overlay h2::after{ content:""; display:block; width:44px; height:4px; margin-top:12px;
  background:linear-gradient(90deg,var(--red),var(--amber)); border-radius:2px; }
/* marka kırmızısı = çözüm anları: başlık vurguları */
.scene__overlay h2 strong, .finale__overlay h2 strong{ color:var(--red); font-weight:inherit; }
.scene__overlay p{ font-size:clamp(15px,2.2vw,19px); line-height:1.6; color:#4a3c34; }

.tag{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:#a3271f; border:1px solid rgba(200,48,45,.4); background:rgba(200,48,45,.09);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); padding:5px 12px; border-radius:999px; }
.tag--live{ color:#b04a1f; border-color:rgba(196,96,47,.5); }

.atmos{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.atmos li{ font-size:13px; background:rgba(255,255,255,.12); padding:6px 12px; border-radius:999px; }

.menu{ list-style:none; margin-top:18px; max-width:380px; }
.menu li{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid rgba(43,35,32,.16); font-size:16px; }
.menu li span:last-child{ color:var(--red); font-weight:600; }          /* fiyatlar kırmızı */

.posts blockquote{ font-style:italic; margin:10px 0; font-size:16px; color:#4a3c34; }
.posts cite{ display:block; font-style:normal; font-size:13px; font-weight:600; color:var(--red); margin-top:3px; }
.events{ margin-top:16px; font-size:15px; line-height:1.8; }
.events .promo{ color:var(--red); font-weight:700; margin-top:6px; }

.actions{ display:flex; gap:12px; margin-top:22px; }
.chip{ background:rgba(255,255,255,.8); color:var(--ink); border:1px solid rgba(43,35,32,.16);
  padding:11px 18px; border-radius:999px; font-size:15px; font-weight:600; cursor:pointer; transition:background .2s, color .2s; }
.chip:hover{ background:var(--red); border-color:var(--red); color:#fff; }

/* ===== FAZ C — finale ===== */
.finale{ position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center;
  text-align:center; background-size:cover; background-position:center; background-color:var(--paper); }
.finale::after{ content:""; position:absolute; inset:0; background:rgba(246,239,228,.18); }
.finale__overlay{ position:relative; z-index:2; color:var(--ink); padding:0 8vw; }
.finale__cup{ width:clamp(72px,10vw,120px); height:auto; margin:0 auto 22px;
  filter:drop-shadow(0 8px 28px rgba(200,48,45,.35)); }
.finale__overlay h2{ font-family:var(--font-head); font-size:clamp(26px,5vw,52px); font-weight:600; line-height:1.15; }
.finale__cta-line{ font-size:clamp(18px,3vw,26px); margin-top:18px; color:var(--red); font-weight:700; }
.store-buttons{ display:flex; gap:14px; justify-content:center; margin-top:30px; flex-wrap:wrap; }
.store{ display:flex; align-items:center; gap:11px; text-align:left;
  background:var(--red); color:#fff; text-decoration:none;
  padding:11px 22px; border-radius:14px; transition:transform .2s, background .2s;
  box-shadow:0 8px 24px rgba(200,48,45,.32); }
.store:hover{ transform:translateY(-2px); background:var(--red-bright); }
.store svg{ width:24px; height:24px; flex:none; }
.store small{ display:block; font-size:11px; font-weight:600; opacity:.85; letter-spacing:.04em; }
.store b{ display:block; font-family:var(--font-head); font-size:17px; line-height:1.15; }

/* uygulama-içi aksiyon toast'u */
.toast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%);
  background:var(--ink); color:#fff; font-size:14px; font-weight:600;
  padding:11px 20px; border-radius:999px; z-index:90; opacity:0; pointer-events:none;
  box-shadow:0 10px 30px rgba(0,0,0,.3); white-space:nowrap; }

/* ===== App UI öğeleri — "dijital ürün" hissi ===== */
.searchbar{ display:flex; align-items:center; gap:10px; margin:26px auto 0; max-width:440px;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding:9px 9px 9px 16px; border-radius:999px; pointer-events:none; box-shadow:0 8px 30px rgba(0,0,0,.28); }
.searchbar__icon{ font-size:18px; font-weight:700; color:var(--red); }
.searchbar__text{ flex:1; text-align:left; font-size:15px; opacity:.82; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.searchbar__btn{ background:var(--red); color:#fff; font-weight:600; font-size:14px; padding:8px 16px; border-radius:999px; white-space:nowrap; box-shadow:0 0 18px rgba(200,48,45,.4); }

.appcard{ margin-top:20px; max-width:420px; text-align:left;
  background:rgba(255,255,255,.86); border:1px solid rgba(43,35,32,.1);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-radius:18px; padding:16px 18px; box-shadow:0 16px 44px rgba(43,35,32,.18); }
.appcard__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.appcard__name{ font-family:var(--font-head); font-size:19px; font-weight:600; color:var(--ink); }
.appcard__hours{ font-size:14px; color:#6b584c; }
.appcard__meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; font-size:15px; font-weight:600; color:#5a4a40; }
.appcard__meta span:first-child{ color:var(--terra); }
.appcard__meta span:last-child{ color:var(--red); font-weight:700; }    /* eşleşme = marka anı */
.appcard__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.appcard__tags span{ font-size:13.5px; font-weight:600; color:var(--ink); background:rgba(43,35,32,.07);
  border:1px solid rgba(43,35,32,.12); padding:6px 12px; border-radius:999px; }

.pill{ font-size:13px; font-weight:600; padding:5px 12px; border-radius:999px; white-space:nowrap; }
.pill--open{ color:#1e7c3a; background:rgba(46,160,84,.12); border:1px solid rgba(46,160,84,.4); }
.pill--live{ color:#a3271f; background:rgba(200,48,45,.1); border:1px solid rgba(200,48,45,.4); }

.busy{ display:flex; align-items:center; gap:10px; margin-top:14px; font-size:13px; color:#5a4a40; }
.busy__label{ opacity:.85; }
.busy__bar{ flex:1; height:6px; background:rgba(43,35,32,.12); border-radius:999px; overflow:hidden; }
.busy__bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--amber),var(--red)); border-radius:999px; }
.busy__val{ font-weight:600; color:var(--terra); }

.appcard .menu{ margin-top:14px; max-width:none; }
.appcard .menu li{ font-size:15px; color:var(--ink); border-bottom-color:rgba(43,35,32,.14); }
.appcard .menu li:last-child{ border-bottom:none; }

@media (max-width:640px){
  .searchbar{ max-width:92%; }
  .searchbar__text{ font-size:14px; }
  .appcard{ max-width:100%; }
}

/* reveal (CSS fallback — JS motion devredeyse body.js-motion bunu devre dışı bırakır) */
.scene__overlay, .finale__overlay{ opacity:0; transform:translateY(28px); }
.is-in .scene__overlay, .is-in .finale__overlay{ opacity:1; transform:none; transition:opacity .8s ease, transform .8s ease; }
body.js-motion .scene__overlay, body.js-motion .finale__overlay{ opacity:1; transform:none; transition:none; }

/* ===== Motion katmanı v2 ===== */
/* kelime maskesi */
.w{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.w__in{ display:inline-block; will-change:transform; }

/* typewriter imleci */
.searchbar__text.is-typing::after{
  content:""; display:inline-block; width:1.5px; height:1em; background:rgba(255,255,255,.85);
  margin-left:3px; vertical-align:text-bottom; animation:caret 1s steps(1) infinite;
}
@keyframes caret{ 50%{ opacity:0 } }

/* mikro etkileşimler */
.chip{ transition:background .2s, transform .15s ease; }
.chip:active{ transform:scale(.95); }
.appcard{ will-change:transform; }
.store:active{ transform:translateY(0) scale(.97); }

@media (max-width:640px){
  .hero{ height:350vh; }
  .scene__overlay{ padding:6vh 7vw; }
  #durak-5::before{ height:26vh; }
}

/* ===== Lite mod: scroll çözünürlüğü biraz düşürülür ===== */
body.lite .hero{ height:320vh; }
body.lite .mapphase{ height:340vh; }

/* ===== Reduced-motion: hero sabit, kısa; içerik anında okunur ===== */
body.reduced .hero{ height:100vh; }
body.reduced .mapphase{ height:100vh; }
body.reduced .map__msg, body.reduced .map__pick, body.reduced .minicard{ display:none; }
body.reduced .pin__label{ opacity:1; }
body.reduced .hero__veil{ display:none; }
body.reduced .pin i::after{ animation:none; }
body.reduced .scroll-hint{ display:none; }
body.reduced .scroll-progress{ display:none; }

@media (prefers-reduced-motion:reduce){
  .scroll-hint{ animation:none; }
  .scene__overlay, .finale__overlay{ opacity:1; transform:none; }
  .is-in .scene__overlay, .is-in .finale__overlay{ transition:none; }
}

/* ===== D9 v2 — iki parçalı kompozisyon: söz solda, sonuç kartı sağda ===== */
.d9{ display:flex; align-items:center; justify-content:center;
  gap:clamp(28px,6vw,80px); flex-wrap:wrap; text-align:left; }
.d9__left{ max-width:430px; }
.d9 .vibes{ justify-content:flex-start; margin-top:18px; }

.resultcard{ background:#fff; border-radius:26px; padding:28px 26px 16px;
  width:min(350px,92vw); text-align:center;
  box-shadow:0 30px 80px rgba(60,8,7,.45); }
.resultcard .match{ width:150px; margin:0 auto; }
.resultcard .match-place{ margin-top:14px; }
.resultcard .actions{ justify-content:center; margin-top:18px; }
.resultcard__src{ font-size:12px; margin-top:16px; padding-top:12px;
  border-top:1px solid rgba(43,35,32,.08); }

@media (max-width:760px){
  .d9{ text-align:center; }
  .d9 .vibes{ justify-content:center; }
  .d9__left h2::after{ margin-left:auto; margin-right:auto; }
}

/* ===== ÖNCELİK DÜZELTMELERİ (dosya sonu — her zaman kazanır) ===== */
/* kırmızı bölümlerde başlık vurguları krem (genel kırmızı vurgu kuralını ezer) */
.scene--red h2 strong, .scene--app h2 strong{ color:#ffd9c2 !important; }

/* başlık içi logo (D10): metinle aynı satırda, beyaz wordmark */
.h2logo{ display:inline-block; height:1em; width:auto; vertical-align:-.14em; margin-left:.18em; }
.h2logo + .h2logo-fb{ display:none; }                       /* logo varsa metin gizli; JS hata durumunda geri açar */

/* D9: mini vibe seçici — sitenin interaktif anı */
.vibes{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:8px; }
.vibe{ font-family:var(--font); font-size:14.5px; font-weight:700; color:#fff;
  background:rgba(255,255,255,.14); border:1.5px solid rgba(255,255,255,.45);
  border-radius:999px; padding:10px 18px; cursor:pointer; white-space:nowrap;
  transition:background .2s, color .2s, transform .15s ease, box-shadow .2s; }
.vibe:hover{ transform:translateY(-1px); }
.vibe:active{ transform:scale(.96); }
.vibe--on{ background:#fff; color:var(--red); border-color:#fff;
  box-shadow:0 8px 24px rgba(60,8,7,.35); }
.match-place{ margin-top:4px; }
.match-place strong{ display:block; font-family:var(--font-head); font-size:19px; color:#fff; }
.match-place span{ display:block; margin-top:3px; font-size:14px; color:rgba(255,255,255,.85); }

/* beyaz sonuç kartı içi: light tema renkleri (kırmızı bölüm kurallarını ezer) */
.scene--red .resultcard .ring-bg{ stroke:rgba(43,35,32,.08); }
.scene--red .resultcard .ring-fg{ stroke:var(--red); }
.scene--red .resultcard .match__val span{ color:var(--red); }
.scene--red .resultcard .match__val small{ color:var(--muted); }
.scene--red .resultcard p{ color:var(--ink); }
.scene--red .resultcard .match-place strong{ color:var(--ink); }
.scene--red .resultcard .match-place span{ color:var(--muted); }
.scene--red .resultcard .resultcard__src{ color:var(--muted); font-weight:600; }
.scene--red .resultcard .chip{ background:rgba(43,35,32,.05); color:var(--ink);
  border-color:rgba(43,35,32,.16); }
.scene--red .resultcard .chip:hover{ background:var(--red); border-color:var(--red); color:#fff; }

/* ===== B2B köprüsü (B2C finale altı + isletme dönüş) ===== */
.bridge{ background:var(--paper); padding:9vh 8vw; text-align:center; border-top:1px solid rgba(43,35,32,.08); }
.bridge__inner{ max-width:560px; margin:0 auto; }
.bridge__eyebrow{ font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.bridge h3{ font-family:var(--font-head); font-weight:600; font-size:clamp(20px,3.4vw,30px);
  color:var(--ink); margin:10px 0 6px; line-height:1.18; }
.bridge h3 strong{ color:var(--red); font-weight:inherit; }
.bridge p{ font-size:15px; color:#4a3c34; line-height:1.55; margin-bottom:20px; }
.bridge__link{ display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-family:var(--font-head); font-weight:700; font-size:16px; color:#fff; background:var(--ink);
  padding:13px 24px; border-radius:12px; transition:transform .2s ease, background .2s ease; }
.bridge__link:hover{ transform:translateY(-2px); background:var(--red); }
.bridge__link span{ font-size:18px; }

/* ===== Açılış üst şeridi (işletme yönlendirme + mini indirme) ===== */
/* data-map-intro ile intro fade'ine bağlı → dalışta yumuşakça erir, deneyimi bozmaz */
.topbar{ position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(14px,4vw,30px); pointer-events:none; }
.topbar a{ pointer-events:auto; }
.topbar__biz{ display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  font-size:13px; font-weight:700; color:var(--ink);
  background:rgba(255,255,255,.82); border:1px solid rgba(43,35,32,.12); border-radius:999px;
  padding:8px 15px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 4px 16px rgba(43,35,32,.12); transition:color .2s ease, transform .2s ease; }
.topbar__biz span{ color:var(--red); transition:transform .2s ease; }
.topbar__biz:hover{ color:var(--red); transform:translateY(-1px); }
.topbar__biz:hover span{ transform:translateX(3px); }
.topbar__stores{ display:flex; gap:8px; }
.ministore{ display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  background:rgba(43,35,32,.9); color:#fff; border-radius:11px; padding:8px 12px;
  box-shadow:0 4px 16px rgba(43,35,32,.22); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .2s ease, transform .2s ease; }
.ministore svg{ width:15px; height:15px; flex:none; }
.ministore span{ font-size:12px; font-weight:700; letter-spacing:.01em; white-space:nowrap; }
.ministore:hover{ background:var(--red); transform:translateY(-1px); }
@media (max-width:560px){
  .ministore span{ display:none; }          /* dar ekranda sadece ikon, minik kalsın */
  .ministore{ padding:9px 10px; }
  .topbar__biz{ font-size:12px; padding:7px 12px; }
  .topbar{ padding:11px 14px; }
}

/* ===== Site footer (iletişim) — her iki sayfada ortak ===== */
.site-footer{ position:relative; z-index:2; background:#fff; border-top:1px solid rgba(43,35,32,.1); color:var(--ink); }
.foot__inner{ max-width:1060px; margin:0 auto; padding:48px 8vw 26px;
  display:grid; grid-template-columns:1.5fr 1fr auto; gap:34px; align-items:start; }
.foot__logo{ font-family:var(--font-head); font-weight:700; font-size:23px; color:var(--red); }
.foot__brand p{ margin-top:9px; font-size:14px; color:#6b5a4d; line-height:1.55; max-width:34ch; }
.foot__h{ display:block; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:14px; }
.foot__contact{ display:flex; flex-direction:column; gap:11px; }
.foot__contact a{ display:inline-flex; align-items:center; gap:10px; font-size:14.5px; font-weight:600;
  color:var(--ink); text-decoration:none; transition:color .2s ease; }
.foot__contact a:hover{ color:var(--red); }
.foot__contact svg{ width:16px; height:16px; flex:none; color:var(--red); }
.foot__cta{ align-self:center; }
.foot__btn{ display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-family:var(--font-head); font-weight:700; font-size:15px; color:#fff; background:var(--red);
  padding:13px 24px; border-radius:13px; box-shadow:0 8px 24px rgba(200,48,45,.3);
  transition:transform .2s ease, background .2s ease; }
.foot__btn:hover{ transform:translateY(-2px); background:var(--red-bright); }
.foot__bottom{ max-width:1060px; margin:0 auto; padding:16px 8vw 32px;
  border-top:1px solid rgba(43,35,32,.08); display:flex; justify-content:space-between; align-items:center;
  gap:14px; font-size:13px; color:var(--muted); }
.foot__links{ display:flex; gap:16px; }
.foot__bottom a{ color:var(--muted); text-decoration:none; transition:color .2s ease; }
.foot__bottom a:hover{ color:var(--red); }
@media (max-width:720px){
  .foot__inner{ grid-template-columns:1fr; gap:26px; padding:40px 8vw 22px; }
  .foot__cta{ align-self:start; }
  .foot__bottom{ flex-direction:column; align-items:flex-start; gap:9px; }
}

/* ===== İletişim sayfası (iletisim.html) ===== */
.contactbar{ position:fixed; top:0; left:0; right:0; z-index:40; display:flex; align-items:center;
  justify-content:space-between; padding:14px clamp(16px,4vw,30px);
  background:linear-gradient(180deg, rgba(246,239,228,.92), rgba(246,239,228,0)); }
.contactbar a{ text-decoration:none; }
.contactbar__brand{ font-family:var(--font-head); font-weight:700; color:var(--red); font-size:20px; }
.contactbar__back{ font-size:13px; font-weight:700; color:var(--ink); background:rgba(255,255,255,.85);
  border:1px solid rgba(43,35,32,.12); border-radius:999px; padding:8px 15px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:color .2s ease; }
.contactbar__back:hover{ color:var(--red); }
.contact-wrap{ max-width:820px; margin:0 auto; padding:17vh 8vw 8vh; text-align:center; }
.contact-eyebrow{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--terra); border:1px solid rgba(196,96,47,.4);
  background:rgba(196,96,47,.06); border-radius:999px; padding:6px 14px; }
.contact-wrap h1{ font-family:var(--font-head); font-weight:600; font-size:clamp(30px,5vw,52px);
  color:var(--ink); margin:18px 0 12px; line-height:1.12; }
.contact-wrap h1 strong{ color:var(--red); }
.contact-lead{ font-size:clamp(15px,2.2vw,19px); color:#4a3c34; max-width:48ch; margin:0 auto; line-height:1.6; }
.contact-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:38px; text-align:left; }
.ccard{ display:flex; flex-direction:column; gap:8px; padding:24px 20px; background:#fff;
  border:1px solid rgba(43,35,32,.1); border-radius:18px; box-shadow:0 14px 40px rgba(43,35,32,.1);
  text-decoration:none; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ccard:hover{ transform:translateY(-4px); box-shadow:0 24px 56px rgba(43,35,32,.16); border-color:rgba(200,48,45,.3); }
.ccard__ic{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  background:rgba(200,48,45,.1); color:var(--red); margin-bottom:6px; }
.ccard__ic svg{ width:22px; height:22px; }
.ccard__k{ font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.ccard__v{ font-family:var(--font-head); font-size:16.5px; font-weight:600; color:var(--ink); word-break:break-word; }
.ccard__note{ font-size:13px; color:#6b5a4d; margin-top:2px; }
.contact-foot-note{ margin-top:30px; font-size:14.5px; color:var(--muted); }
.contact-foot-note a{ color:var(--red); font-weight:700; text-decoration:none; }
.contact-foot-note a:hover{ text-decoration:underline; }
@media (max-width:680px){
  .contact-cards{ grid-template-columns:1fr; }
  .contact-wrap{ padding:16vh 7vw 7vh; }
}