/* ============================================================
   Kafe-in — İŞLETME (B2B) sayfası ek stilleri
   style.css üstüne biner; aynı token + bileşen dili.
   Eda persona'sı: butik kafe işletmecisi.
   ============================================================ */

/* ---------- B2B üst şerit / dönüş köprüsü ---------- */
.biztop{
  position:fixed; top:0; left:0; right:0; z-index:55;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px clamp(16px,4vw,40px);
  background:linear-gradient(180deg, rgba(246,239,228,.92), rgba(246,239,228,0));
  pointer-events:none;
}
.biztop a{ pointer-events:auto; }
.biztop__brand{ display:flex; align-items:center; gap:9px; font-family:var(--font-head);
  font-weight:700; color:var(--red); text-decoration:none; font-size:18px; }
.biztop__brand small{ font-family:var(--font); font-weight:700; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); background:rgba(43,35,32,.06);
  border:1px solid rgba(43,35,32,.12); border-radius:999px; padding:3px 8px; }
.biztop__back{ font-size:13px; font-weight:600; color:var(--ink); text-decoration:none;
  background:rgba(255,255,255,.85); border:1px solid rgba(43,35,32,.12); border-radius:999px;
  padding:7px 14px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.biztop__back:hover{ color:var(--red); }

/* ---------- HERO (açılış kaygısı) ---------- */
.bizhero{
  position:relative; min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:14vh 7vw 8vh; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%, #f8f2e8 0%, #f3ece1 50%, #ecdfc9 100%);
}
.bizhero__eyebrow{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--terra); margin-bottom:18px;
  border:1px solid rgba(196,96,47,.4); border-radius:999px; padding:6px 14px; background:rgba(196,96,47,.06); }
.bizhero h1{ font-family:var(--font-head); font-weight:600; line-height:1.08;
  font-size:clamp(30px,6vw,60px); color:var(--ink); max-width:14ch; }
.bizhero h1 strong{ color:var(--red); font-weight:inherit; }
.bizhero__sub{ font-size:clamp(16px,2.4vw,21px); line-height:1.6; color:#4a3c34;
  max-width:48ch; margin:20px auto 0; }
.bizhero__hint{ margin-top:34px; font-size:13px; color:var(--muted); font-weight:600; letter-spacing:.02em; }

/* dağılan bütçe görseli (hero altında, atmosfer) */
.spend{ display:flex; gap:6px; margin-top:30px; flex-wrap:wrap; justify-content:center; max-width:520px; }
.spend i{ width:22px; height:30px; border-radius:4px; background:rgba(43,35,32,.1);
  display:block; transform-origin:bottom; }
.spend i.lost{ background:linear-gradient(180deg, rgba(200,48,45,.5), rgba(200,48,45,.12)); }
.spend i.kept{ background:linear-gradient(180deg, var(--amber), var(--red)); }

/* ---------- DASHBOARD / PANEL ÖNİZLEME ---------- */
.dash{ background:rgba(255,255,255,.94); border:1px solid rgba(43,35,32,.1);
  border-radius:18px; padding:18px; box-shadow:0 18px 50px rgba(43,35,32,.14);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.dash__head{ display:flex; align-items:center; gap:10px; margin-bottom:14px;
  padding-bottom:12px; border-bottom:1px solid rgba(43,35,32,.1); }
.dash__head b{ font-family:var(--font-head); font-size:17px; color:var(--ink); }
.dash__head .pill{ margin-left:auto; }

/* KPI kutucukları */
.kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.kpi{ background:rgba(246,239,228,.7); border:1px solid rgba(43,35,32,.08);
  border-radius:12px; padding:12px 10px; text-align:left; }
.kpi__val{ font-family:var(--font-head); font-weight:700; font-size:clamp(20px,3.4vw,28px);
  color:var(--ink); line-height:1; }
.kpi__label{ font-size:12px; color:var(--muted); margin-top:6px; }
.kpi__trend{ display:inline-block; font-size:11.5px; font-weight:700; margin-top:7px;
  padding:2px 7px; border-radius:999px; }
.kpi__trend.up{ color:#1e7c3a; background:rgba(46,160,84,.12); }
.kpi__trend.flat{ color:var(--muted); background:rgba(43,35,32,.07); }

/* Talep ısı haritası (hangi gün/saat dolu) */
.heat{ margin-top:4px; }
.heat__grid{ display:grid; grid-template-columns:auto repeat(7,1fr); gap:4px; align-items:center; }
.heat__day{ font-size:11px; color:var(--muted); font-weight:600; }
.heat__cell{ height:18px; border-radius:4px; background:rgba(43,35,32,.06); }
.heat__cell.l1{ background:rgba(232,161,92,.28); }
.heat__cell.l2{ background:rgba(232,161,92,.55); }
.heat__cell.l3{ background:rgba(200,48,45,.55); }
.heat__cell.l4{ background:rgba(200,48,45,.82); }
.heat__legend{ display:flex; align-items:center; gap:7px; margin-top:10px; font-size:11px; color:var(--muted); }
.heat__legend i{ width:14px; height:10px; border-radius:3px; display:inline-block; }

/* Sponsorlu görev kartı */
.mission{ display:flex; align-items:center; gap:12px; padding:12px 14px; margin-top:10px;
  border:1px solid rgba(43,35,32,.1); border-radius:12px; background:rgba(255,255,255,.7); }
.mission__ic{ flex:none; width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:rgba(200,48,45,.1); font-size:18px; }
.mission__txt{ flex:1; }
.mission__txt b{ display:block; font-size:14.5px; color:var(--ink); }
.mission__txt span{ font-size:12.5px; color:var(--muted); }
.mission__tag{ flex:none; font-size:11px; font-weight:700; color:var(--terra);
  background:rgba(196,96,47,.1); border-radius:999px; padding:4px 9px; }

/* ---------- B2B birincil CTA (panel linki) ---------- */
.bizcta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:30px; }
.bizcta{ display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  background:var(--red); color:#fff; font-family:var(--font-head); font-weight:700; font-size:17px;
  padding:15px 26px; border-radius:14px; box-shadow:0 10px 30px rgba(200,48,45,.4);
  transition:transform .2s ease, background .2s ease; }
.bizcta:hover{ transform:translateY(-2px); background:var(--red-bright); }
.bizcta--ghost{ background:rgba(255,255,255,.9); color:var(--ink);
  border:1.5px solid rgba(43,35,32,.18); box-shadow:0 6px 20px rgba(43,35,32,.1); }
.bizcta--ghost:hover{ background:#fff; color:var(--red); }
.bizcta__note{ margin-top:14px; font-size:13.5px; color:var(--muted); }
.bizcta__note a{ color:var(--red); font-weight:700; }

/* placeholder link işareti (panel linki gelince kaldırılacak) */
[data-panel-link]{ position:relative; }

/* ============================================================
   İNTERAKTİF DURAKLAR (işletmecinin deneyimi)
   ============================================================ */

/* ortak form alanları */
.fld{ display:block; margin-top:14px; font-size:12.5px; font-weight:700; color:var(--muted);
  letter-spacing:.02em; }
.fld input{ display:block; width:100%; margin-top:6px; font-family:var(--font); font-size:15px;
  font-weight:600; color:var(--ink); background:rgba(246,239,228,.7);
  border:1px solid rgba(43,35,32,.16); border-radius:10px; padding:10px 12px; }
.fld input:focus{ outline:none; border-color:var(--red); background:#fff; }
.fld__lbl{ display:block; margin-top:14px; font-size:12.5px; font-weight:700; color:var(--muted); }

/* atmosfer / şablon çipleri (toggle) */
.atmos, .camp__templates{ display:flex; flex-wrap:wrap; gap:8px; margin-top:9px; }
.achip{ font-family:var(--font); font-size:13.5px; font-weight:700; color:var(--ink);
  background:#fff; border:1.5px solid rgba(43,35,32,.16); border-radius:999px; padding:7px 13px;
  cursor:pointer; transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease; }
.achip:hover{ transform:translateY(-1px); border-color:var(--red); }
.achip--on{ background:var(--red); border-color:var(--red); color:#fff; }

.ghostbtn{ margin-top:10px; font-family:var(--font); font-size:13.5px; font-weight:700;
  color:var(--red); background:rgba(200,48,45,.07); border:1.5px dashed rgba(200,48,45,.4);
  border-radius:10px; padding:9px 14px; cursor:pointer; transition:background .15s ease; }
.ghostbtn:hover{ background:rgba(200,48,45,.13); }

/* ---------- DURAK 2: dijital ikiz (editör + canlı önizleme) ---------- */
.twin{ display:grid; grid-template-columns:1.05fr .95fr; gap:20px; align-items:start; }
.twin__editor{ margin:0; }
.twin__preview{ position:sticky; top:90px; }
.twin__hint{ display:block; text-align:center; font-size:12.5px; font-weight:700; color:var(--muted); margin-bottom:10px; }
.tw-card{ max-width:none; }
.tw-card__motto{ color:var(--red); font-weight:700; font-size:14.5px; margin:6px 0 4px; }
.tw-card__menu{ margin-top:12px; }
.tw-card__menu li{ font-size:14.5px; padding:7px 0; }
.tw-card__live{ display:inline-block; margin-top:12px; }
.appcard__tags:empty{ display:none; }
.tag-pop{ animation:tagpop .35s ease; }
@keyframes tagpop{ from{ transform:scale(.6); opacity:0 } to{ transform:scale(1); opacity:1 } }

/* ---------- DURAK 3: menü QR ---------- */
.qr{ display:grid; grid-template-columns:1.1fr .9fr; gap:22px; align-items:center; }
.qr__right{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.qr__box{ width:200px; height:200px; display:grid; place-items:center; background:#fff;
  border:1px solid rgba(43,35,32,.12); border-radius:16px; box-shadow:0 12px 34px rgba(43,35,32,.14);
  padding:12px; }
.qr__box img, .qr__box canvas{ width:100% !important; height:100% !important; border-radius:6px; }
.qr__ph{ font-size:12.5px; color:var(--muted); text-align:center; }
.qr__note{ color:var(--muted); font-size:13px; margin-top:10px; }
.qr__dl{ font-size:13.5px; font-weight:700; color:var(--red); text-decoration:none; }
.qr__dl:hover{ text-decoration:underline; }
.qr__cap{ font-size:12.5px; color:var(--muted); }

/* ---------- DURAK 4: kampanya yayını + harita ---------- */
.camp{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:stretch; }
.camp__compose{ margin:0; }
.camp__reach{ margin-top:14px; font-size:14px; color:#4a3c34; }
.camp__reach b{ font-family:var(--font-head); color:var(--red); font-size:18px; }
.camp__stage{ position:relative; border-radius:18px; overflow:hidden; min-height:300px;
  border:1px solid rgba(43,35,32,.1); box-shadow:0 14px 40px rgba(43,35,32,.14);
  background:
    radial-gradient(60% 60% at 70% 18%, rgba(232,161,92,.18), transparent 70%),
    linear-gradient(160deg,#f7f1e7 0%,#efe2cd 60%,#e7d6bb 100%); }
/* sokak dokusu */
.camp__map{ position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(185,168,150,.35) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(185,168,150,.35) 1.5px, transparent 1.5px);
  background-size:46px 46px; }
.cm-shop{ position:absolute; left:50%; top:42%; transform:translate(-50%,-50%); z-index:3;
  width:46px; height:46px; border-radius:50%; background:#fff; border:2.5px solid var(--red);
  display:grid; place-items:center; box-shadow:0 8px 22px rgba(200,48,45,.4); }
.cm-shop img{ width:26px; height:auto; }
.cm-shop::after{ content:""; position:absolute; inset:-7px; border-radius:50%;
  border:2px solid rgba(200,48,45,.5); animation:pinpulse 2.2s ease-out infinite; }
.cm-shop::before{ content:"Sen"; position:absolute; bottom:-22px; left:50%; transform:translateX(-50%);
  font-size:11px; font-weight:700; color:var(--red); background:rgba(255,255,255,.92);
  border-radius:999px; padding:2px 9px; box-shadow:0 3px 10px rgba(43,35,32,.16); white-space:nowrap; }
.cm-user{ position:absolute; width:12px; height:12px; border-radius:50%;
  background:rgba(43,35,32,.32); transform:translate(-50%,-50%); transition:background .3s ease, box-shadow .3s ease; z-index:2; }
.cm-user.lit{ background:var(--red); box-shadow:0 0 0 4px rgba(200,48,45,.22), 0 0 14px rgba(200,48,45,.5); }
/* yayılan dalga */
.cm-wave{ position:absolute; left:50%; top:42%; width:20px; height:20px; border-radius:50%;
  border:2px solid rgba(200,48,45,.6); transform:translate(-50%,-50%); opacity:0; z-index:1; pointer-events:none; }
/* push bildirim kartı */
.camp__push{ position:absolute; left:14px; right:14px; top:14px; z-index:4;
  display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:13px;
  background:rgba(255,255,255,.96); border:1px solid rgba(43,35,32,.1);
  box-shadow:0 12px 30px rgba(43,35,32,.2); opacity:0; transform:translateY(-14px); }
.camp__push.show{ opacity:1; transform:translateY(0); transition:opacity .4s ease, transform .4s ease; }
.camp__push-ic{ flex:none; width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background:rgba(200,48,45,.1); font-size:19px; }
.camp__push-txt b{ display:block; font-size:14.5px; color:var(--ink); }
.camp__push-txt span{ font-size:12.5px; color:var(--muted); }

/* ---------- responsive ---------- */
@media (max-width:760px){
  .twin, .qr, .camp{ grid-template-columns:1fr; }
  .twin__preview{ position:static; }
  .qr__box{ width:170px; height:170px; }
  .camp__stage{ min-height:240px; }
}
@media (max-width:640px){
  .kpis{ grid-template-columns:repeat(3,1fr); gap:7px; }
  .kpi{ padding:10px 8px; }
  .bizhero{ padding:16vh 6vw 8vh; }
  .biztop__brand small{ display:none; }
}

/* ============================================================
   PROFESYONEL CİLA KATMANI (UI/UX designer pass)
   Amaç: okunabilirlik + düzen dengesi + tutarlı detay.
   ============================================================ */

/* 1) Yoğun B2B içeriği dikey ortalı; üst bar ve alt boşluk dengeli
      (B2C'deki flex-end tek-panel için; bizde geniş içerik var) */
body.biz .scene{ align-items:center; }
body.biz .scene__overlay{ width:100%; padding-top:14vh; padding-bottom:11vh; }

/* 2) Okunabilirlik: alttan-koyu band yerine DENGELİ paper veil.
      Beyaz paneller fotoğraftan net ayrışır; foto sıcak doku olarak kalır.
      (.scene--plain::after zaten display:none → kırmızı karar bölümü etkilenmez) */
body.biz .scene::after{
  background:linear-gradient(180deg,
    rgba(245,238,227,.70) 0%, rgba(245,238,227,.46) 42%, rgba(245,238,227,.66) 100%);
}

/* 3) KRİTİK: .panel max-width:470px iki kolonlu panelleri sıkıştırıyordu.
      Grid içindeki paneller kolonu doldursun, kenarlar hizalansın. */
body.biz .qr,
body.biz .twin__editor,
body.biz .camp__compose{ max-width:none; width:100%; }
body.biz #durak-3 .scene__overlay{ max-width:940px; }
body.biz .twin{ align-items:stretch; }
body.biz .twin__editor{ display:flex; flex-direction:column; }

/* 4) Kicker fotoğraf üstünde daha net otursun */
body.biz .kicker{ box-shadow:0 8px 26px rgba(43,35,32,.20); }

/* 5) Tutarlı yumuşak geçiş — tüm interaktif öğeler */
body.biz .achip, body.biz .ghostbtn, body.biz .bizcta,
body.biz .chip, body.biz .vibe, body.biz .qr__dl, body.biz .biztop__back{
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

/* 6) Erişilebilirlik: net focus halkası (klavye kullanıcısı) */
body.biz a:focus-visible,
body.biz button:focus-visible,
body.biz input:focus-visible{ outline:2.5px solid var(--red); outline-offset:3px; border-radius:10px; }
body.biz .achip:focus-visible, body.biz .vibe:focus-visible{ outline-offset:2px; }

/* 7) Hero: başlık nefes alsın, alt metin dengeli */
body.biz .bizhero h1{ max-width:16ch; letter-spacing:-.01em; }
body.biz .bizhero__sub{ max-width:46ch; }
/* dağılan bütçe çubukları: organik yükseklik + temiz hiza */
.spend{ align-items:flex-end; }
.spend i:nth-child(3n){ height:24px; }
.spend i:nth-child(4n){ height:34px; }
.spend i.kept{ height:38px; }

/* 8) QR kutusu daha "ürün" hissi: ince çerçeve + yumuşak iç boşluk */
body.biz .qr__box{ width:208px; height:208px; box-shadow:0 16px 40px rgba(43,35,32,.16); }
body.biz .qr__left p{ max-width:42ch; }

/* 9) Kampanya sahnesi: panel ile harita eşit yükseklik, hizalı */
body.biz .camp{ align-items:stretch; }
body.biz .camp__stage{ min-height:340px; }

/* 10) Mobil: yoğun stoplarda üstten hizala (içerik üst barın altına girmesin) */
@media (max-width:760px){
  body.biz .scene{ align-items:flex-start; }
  body.biz .scene__overlay{ padding-top:104px; padding-bottom:9vh; }
  body.biz .bizhero h1{ max-width:18ch; }
}

/* ============================================================
   HERO PREMIUM + FİNALE OKUNABİLİRLİK (v3 designer pass)
   ============================================================ */

/* — Hero zemini: sıcak ışık cepleri + ince nokta dokusu (kenarlarda erir) — */
body.biz .bizhero{
  background:
    radial-gradient(42% 52% at 84% 10%, rgba(232,161,92,.18), transparent 70%),
    radial-gradient(40% 48% at 10% 92%, rgba(200,48,45,.07), transparent 72%),
    radial-gradient(120% 90% at 50% 0%, #f8f2e8 0%, #f3ece1 52%, #efe3cf 100%);
}
body.biz .bizhero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(43,35,32,.055) 1px, transparent 1.5px);
  background-size:27px 27px;
  -webkit-mask-image:radial-gradient(68% 58% at 50% 42%, #000 22%, transparent 78%);
  mask-image:radial-gradient(68% 58% at 50% 42%, #000 22%, transparent 78%);
}
body.biz .bizhero > *{ position:relative; z-index:1; }

/* — Premium panel önizleme kartı (gerçek ürün hissi → güven) — */
.hp-card{ width:min(430px,92vw); margin:32px auto 0; text-align:left;
  background:rgba(255,255,255,.94); border:1px solid rgba(43,35,32,.1); border-radius:20px;
  padding:18px 18px 16px; box-shadow:0 34px 80px rgba(43,35,32,.16), 0 4px 14px rgba(43,35,32,.06);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.hp-head{ display:flex; align-items:center; gap:11px; padding-bottom:13px; margin-bottom:13px;
  border-bottom:1px solid rgba(43,35,32,.1); }
.hp-logo{ width:34px; height:auto; flex:none; }
.hp-id{ display:flex; flex-direction:column; line-height:1.18; }
.hp-id b{ font-family:var(--font-head); font-size:15.5px; color:var(--ink); }
.hp-id span{ font-size:11.5px; color:var(--muted); font-weight:700; letter-spacing:.02em; }
.hp-head .pill{ margin-left:auto; }
.hp-body{ display:flex; flex-direction:column; gap:10px; }
.hp-item{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:#4a3c34; }
.hp-item b{ color:var(--ink); font-weight:700; }
.hp-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.hp-dot.ok{ background:#2ea054; box-shadow:0 0 0 3px rgba(46,160,84,.16); }
.hp-dot.live{ background:var(--red); box-shadow:0 0 0 3px rgba(200,48,45,.16); animation:hppulse 2s ease-out infinite; }
@keyframes hppulse{ 0%{ box-shadow:0 0 0 0 rgba(200,48,45,.4) } 100%{ box-shadow:0 0 0 7px rgba(200,48,45,0) } }
.hp-foot{ display:flex; align-items:center; gap:11px; margin-top:14px; padding-top:13px; border-top:1px solid rgba(43,35,32,.1); }
.hp-spark{ display:flex; align-items:flex-end; gap:4px; height:26px; flex:none; }
.hp-spark i{ width:7px; border-radius:3px; background:linear-gradient(180deg,var(--amber),var(--red)); opacity:.92; }
.hp-spark i:nth-child(1){ height:9px } .hp-spark i:nth-child(2){ height:13px } .hp-spark i:nth-child(3){ height:11px }
.hp-spark i:nth-child(4){ height:17px } .hp-spark i:nth-child(5){ height:15px } .hp-spark i:nth-child(6){ height:21px }
.hp-spark i:nth-child(7){ height:19px } .hp-spark i:nth-child(8){ height:26px }
.hp-foot-label{ font-size:12px; color:var(--muted); font-weight:600; }

/* — Güven mikro-satırı — */
.hero-trust{ display:flex; flex-wrap:wrap; gap:9px 20px; justify-content:center; margin-top:22px; }
.hero-trust span{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:#6b5a4d; letter-spacing:.01em; }
.hero-trust span::before{ content:""; width:6px; height:6px; border-radius:50%;
  background:linear-gradient(180deg,var(--amber),var(--red)); }

/* — FİNALE: yazı ahşap foto üstünde okunmuyordu → güçlü paper scrim + ortala — */
body.biz .finale::after{
  background:radial-gradient(78% 82% at 50% 50%,
    rgba(246,239,228,.94) 0%, rgba(246,239,228,.78) 46%, rgba(246,239,228,.52) 100%);
}
body.biz .finale__overlay{ text-align:center; max-width:660px; margin:0 auto; }
body.biz .finale__overlay h2{ text-shadow:0 1px 0 rgba(255,255,255,.5); }
body.biz .bizcta__note{ color:#4a3c34; font-weight:600; }
body.biz .bizcta__note a{ color:var(--red); font-weight:700; white-space:nowrap; }

@media (max-width:640px){
  .hp-card{ margin-top:26px; padding:16px; }
  .hero-trust{ gap:7px 14px; }
}