/* FoodDirekt TR — paylaşılan stil dosyası (tüm sayfalar) */

:root{
  --orange:#EA561D; --orange-dark:#C13F0E; --orange-tint:#FBEAE1;
  --plum:#461841; --plum-2:#5C2255; --plum-950:#1D0B1A;
  --paper:#FFFFFF; --paper-2:#F4F2F0; --line:#E3E0DC; --ink:#1A1015; --ink-soft:#6B6169;
  --card:#FFFFFF; --good:#3F8557; --pending:#B08A1E; --bad:#C0392B;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:'Work Sans', system-ui, -apple-system, sans-serif;
  --display:'Bricolage Grotesque', var(--sans);
  --radius:14px; --shadow:0 20px 50px -26px rgba(26,16,21,0.35); --max:1180px;
  --shadow-device:0 1px 1px rgba(29,11,26,.05), 0 10px 24px -10px rgba(29,11,26,.22), 0 32px 64px -24px rgba(29,11,26,.32);
  --mock-h:360px;
  color-scheme: light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.55;}
img,svg{max-width:100%}
.container{max-width:var(--max); margin:0 auto; padding-inline:20px}
h1,h2,h3,h4{font-family:var(--display); font-weight:700; margin:0; text-wrap:balance; color:var(--plum)}
p{margin:0}
a{color:inherit}
.mono{font-family:var(--mono)}
::selection{background:var(--orange); color:#fff}

.tag{display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--orange-dark); border-bottom:2px solid var(--orange); padding-bottom:6px; margin-bottom:16px; transition:opacity .25s ease}
.tag.on-dark{color:#FFB088; border-color:#FFB088}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--sans); font-weight:600; font-size:15px; padding:13px 24px; border-radius:9px; text-decoration:none; border:1.5px solid transparent; cursor:pointer; transition:transform .15s ease, background .15s ease}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--orange); color:#fff}
.btn-primary:hover{background:var(--orange-dark)}
.btn-outline{border-color:var(--plum); color:var(--plum); background:transparent}
.btn-outline:hover{background:var(--plum); color:#fff}
.btn-lg{padding:15px 28px; font-size:16px}
.btn-block{width:100%}
.btn-ghost{border-color:rgba(255,255,255,0.3); color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,0.12)}

/* ---------- header ---------- */
header.site{position:sticky; top:0; z-index:80; background:rgba(255,255,255,0.82); backdrop-filter:saturate(200%) blur(16px); border-bottom:1px solid transparent; transition:box-shadow .3s ease, border-color .3s ease, background .3s ease}
header.site.scrolled{border-color:var(--line); box-shadow:0 12px 32px -22px rgba(26,16,21,0.45); background:rgba(255,255,255,0.94)}
.nav{display:flex; align-items:center; justify-content:space-between; height:78px; gap:24px; transition:height .3s cubic-bezier(.4,0,.2,1); position:relative}
header.site.scrolled .nav{height:58px}
.brand{display:flex; align-items:center; gap:9px; text-decoration:none; flex-shrink:0}
.brand svg, .brand img{height:25px; width:auto; display:block; transition:height .3s ease}
header.site.scrolled .brand svg, header.site.scrolled .brand img{height:20px}
.nav-links{display:flex; align-items:center; gap:30px; transition:gap .3s ease}
header.site.scrolled .nav-links{gap:24px}
.nav-links a{text-decoration:none; font-size:14.5px; font-weight:500; color:var(--ink-soft); transition:color .15s ease}
.nav-links a:hover{color:var(--plum)}
.nav-links a.current{color:var(--orange-dark)}
@media (max-width:900px){ .nav-links{display:none} }

/* ================= HERO ================= */
.hero{padding-block:56px 72px}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
@media (max-width:920px){ .hero-grid{grid-template-columns:1fr} }
.hero h1{font-size:clamp(34px,4.6vw,54px); line-height:1.07; letter-spacing:-.01em; margin:16px 0 20px}
.hero h1 em{color:var(--orange); font-style:normal}
.hero .lead{font-size:18px; color:var(--ink-soft); max-width:46ch; margin-bottom:30px}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:28px}
.hero-trust{font-size:13px; color:var(--ink-soft)}
.hero-trust b{color:var(--ink); font-weight:600}

@keyframes heroIn{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:translateY(0)} }
.hero-grid > div:first-child > *{animation:heroIn .7s cubic-bezier(.2,.8,.2,1) both}
.hero-grid > div:first-child > *:nth-child(1){animation-delay:0s}
.hero-grid > div:first-child > *:nth-child(2){animation-delay:.08s}
.hero-grid > div:first-child > *:nth-child(3){animation-delay:.16s}
.hero-grid > div:first-child > *:nth-child(4){animation-delay:.24s}
.hero-grid > div:first-child > *:nth-child(5){animation-delay:.32s}
@media (prefers-reduced-motion:reduce){ .hero-grid > div:first-child > *{animation:none} }

/* page-hero entrance (above the fold — plays on load, not scroll) */
.page-hero .container > *{animation:heroIn .7s cubic-bezier(.2,.8,.2,1) both}
.page-hero .container > *:nth-child(1){animation-delay:0s}
.page-hero .container > *:nth-child(2){animation-delay:.08s}
.page-hero .container > *:nth-child(3){animation-delay:.16s}
@media (prefers-reduced-motion:reduce){ .page-hero .container > *{animation:none} }

/* scroll-reveal system — sections/blocks fade + slide up once as they enter view; the visual/mockup child follows a beat later */
.reveal-me{opacity:0; transform:translateY(30px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal-me.is-visible{opacity:1; transform:translateY(0)}
.reveal-me .deep-visual, .reveal-me .cat-visual{opacity:0; transform:translateY(18px) scale(.97); transition:opacity .6s ease .16s, transform .6s cubic-bezier(.2,.8,.2,1) .16s}
.reveal-me.is-visible .deep-visual, .reveal-me.is-visible .cat-visual{opacity:1; transform:translateY(0) scale(1)}
@media (prefers-reduced-motion:reduce){
  .reveal-me, .reveal-me .deep-visual, .reveal-me .cat-visual{opacity:1; transform:none; transition:none}
}

.receipt-wrap{display:flex; justify-content:center}
.receipt{width:100%; max-width:330px; background:var(--card); border:1px solid var(--line); border-radius:4px; padding:26px 24px 28px; position:relative; font-family:var(--mono); color:var(--ink); box-shadow:var(--shadow); animation:dropIn .6s cubic-bezier(.2,.8,.2,1) both; transform-origin:top center}
@keyframes dropIn{ from{opacity:0; transform:translateY(-12px) rotate(-1deg)} to{opacity:1; transform:translateY(0) rotate(-1deg)} }
@media (prefers-reduced-motion:reduce){ .receipt{animation:none} }
.receipt::before, .receipt::after{ content:""; position:absolute; width:20px; height:20px; background:var(--paper); border-radius:50%; top:108px; }
.receipt::before{ left:-10px } .receipt::after{ right:-10px }
.r-head{text-align:center; margin-bottom:14px}
.r-head .rn{font-size:10.5px; letter-spacing:.1em; color:var(--ink-soft)}
.r-head h4{font-family:var(--mono); font-weight:600; font-size:14.5px; color:var(--ink); margin-top:4px}
.r-tear{border-top:1px dashed var(--line); margin:14px 0}
.r-line{display:flex; justify-content:space-between; gap:10px; font-size:12.5px; padding:5px 0; color:var(--ink)}
.r-line .q{color:var(--ink-soft)}
.r-total{display:flex; justify-content:space-between; font-size:13.5px; font-weight:600; padding-top:10px; margin-top:4px; border-top:1px solid var(--line)}
.r-strike{text-align:center; font-size:11px; color:#9a5a52; margin-top:2px}
.r-strike s{opacity:.8}
.r-stamp{position:relative; margin-top:18px; border:2px solid var(--orange); color:var(--orange-dark); border-radius:4px; text-align:center; padding:9px; font-weight:600; font-size:12.5px; transform:rotate(-2deg); letter-spacing:.03em; animation:stamp .5s .5s cubic-bezier(.3,1.6,.4,1) both}
@keyframes stamp{ from{opacity:0; transform:rotate(-2deg) scale(1.6)} to{opacity:1; transform:rotate(-2deg) scale(1)} }
@media (prefers-reduced-motion:reduce){ .r-stamp{animation:none} }
.r-stamp::after{content:""; position:absolute; inset:-5px; border-radius:6px; border:2px solid var(--orange); opacity:0; animation:pulseRing 2.6s ease-out 1.3s infinite}
@keyframes pulseRing{ 0%{opacity:.55; transform:scale(1)} 100%{opacity:0; transform:scale(1.2)} }
@media (prefers-reduced-motion:reduce){ .r-stamp::after{animation:none} }
.r-foot{display:flex; justify-content:space-between; margin-top:16px; font-size:10px; color:var(--ink-soft)}

/* ================= MARQUEE TAPE ================= */
.tape-strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper-2); overflow:hidden; padding-block:15px}
.tape-track{display:flex; gap:30px; width:max-content; will-change:transform}
.tape-item{display:flex; align-items:center; white-space:nowrap}
.tape-item img{height:19px; width:auto; max-width:88px; object-fit:contain; opacity:.4; filter:grayscale(1) brightness(0); transition:opacity .2s ease}
.tape-item img:hover{opacity:.75}

/* ================= SECTION shell ================= */
.section{padding-block:80px}
.kicker{max-width:640px; margin-bottom:44px}
.kicker h2{font-size:clamp(26px,3.2vw,38px); line-height:1.15; margin-bottom:14px}
.kicker p{color:var(--ink-soft); font-size:16.5px}

/* ================= PAGE HERO (subpages) ================= */
.page-hero{padding-block:64px 20px; text-align:center}
.page-hero .crumb{font-family:var(--mono); font-size:12px; color:var(--ink-soft); margin-bottom:18px}
.page-hero .crumb a{color:var(--ink-soft); text-decoration:none}
.page-hero .crumb a:hover{color:var(--orange-dark)}
.page-hero h1{font-size:clamp(32px,4.4vw,50px); line-height:1.08; letter-spacing:-.01em; margin:0 auto 18px; max-width:20ch}
.page-hero .lead{font-size:17.5px; color:var(--ink-soft); max-width:56ch; margin:0 auto}

/* ================= ÖZELLİKLER HUB + related-features cross-links ================= */
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media (max-width:900px){ .feature-grid{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .feature-grid{grid-template-columns:1fr} }
.feature-card-link{display:block; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:28px; text-decoration:none; transition:border-color .15s ease, transform .15s ease}
.feature-card-link:hover{border-color:var(--orange); transform:translateY(-2px)}
.feature-card-link h3{font-size:17px; margin-bottom:8px}
.feature-card-link p{font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin-bottom:14px}
.feature-card-link .fc-more{font-size:13px; font-weight:600; color:var(--orange-dark)}
.related-features{max-width:900px; margin:0 auto; text-align:center}
.related-features .rf-label{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); display:block; margin-bottom:14px}
.related-features .rf-links{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.related-features .rf-links a{font-size:13.5px; font-weight:600; color:var(--plum); text-decoration:none; padding:10px 16px; border:1px solid var(--line); border-radius:9px; transition:border-color .15s ease, color .15s ease}
.related-features .rf-links a:hover{border-color:var(--orange); color:var(--orange-dark)}

/* ================= VALUE STRIP (editorial list, dark) ================= */
.value-section{background:var(--plum); color:#fff}
.value-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:start}
@media (max-width:840px){ .value-grid{grid-template-columns:1fr; gap:32px} }
.value-section h2{color:#fff; font-size:clamp(26px,3vw,34px)}
.value-section .kicker p{color:rgba(255,255,255,.6)}
.value-list{display:flex; flex-direction:column}
.value-row{display:flex; gap:20px; padding-block:20px; border-top:1px solid rgba(255,255,255,.14)}
.value-row:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.value-row .vi{font-family:var(--mono); color:rgba(255,255,255,.4); font-size:13px; padding-top:3px}
.value-row .vb{font-family:var(--display); font-size:20px; color:#fff; margin-bottom:4px}
.value-row .vs{font-size:14px; color:rgba(255,255,255,.6); max-width:44ch}

/* ================= PAIN POINTS ================= */
.pain-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
@media (max-width:820px){ .pain-grid{grid-template-columns:1fr} }
.pain-cell{background:var(--card); padding:30px 26px}
.pain-cell .pn{font-family:var(--mono); font-size:12px; color:var(--ink-soft); margin-bottom:10px}
.pain-cell h4{font-size:18px; margin-bottom:10px}
.pain-cell p{font-size:14.5px; color:var(--ink-soft); line-height:1.6}

/* ================= HOW IT WORKS — connected roadmap ================= */
.ticket-rail{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
@media (max-width:860px){ .ticket-rail{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .ticket-rail{grid-template-columns:1fr} }
.tick-track{grid-column:1/-1; display:grid; grid-template-columns:repeat(4,1fr); position:relative; height:18px; margin-bottom:-2px}
.tick-track::before{content:""; position:absolute; top:8px; left:12.5%; right:12.5%; height:2px; background-image:repeating-linear-gradient(90deg, var(--line) 0 5px, transparent 5px 11px)}
.tick-track span{width:16px; height:16px; border-radius:50%; margin:0 auto; position:relative; background:var(--paper-2); border:2px solid var(--orange); box-shadow:0 0 0 4px var(--paper)}
@media (max-width:860px){ .tick-track{display:none} }
.tick-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:26px 20px 22px; position:relative; overflow:hidden}
.tick-num{position:absolute; top:2px; right:14px; font-family:var(--mono); font-size:42px; font-weight:700; color:var(--paper-2); line-height:1; z-index:0; user-select:none}
.tick-top{position:relative; z-index:1}
.tick-card h4, .tick-card p{position:relative; z-index:1}
.tick-card h4{font-size:16.5px; margin-bottom:6px}
.tick-card p{font-size:13.5px; color:var(--ink-soft); line-height:1.5}
.tick-top .ic-chip.ic-round{border-radius:50%}
.tick-badge{position:relative; z-index:1; display:inline-flex; align-items:center; gap:5px; background:var(--orange-tint); color:var(--orange-dark); font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.02em; padding:4px 9px; border-radius:99px; margin-bottom:10px}

/* ================= PLATFORM CATEGORIES (stacked) ================= */
.cat-stack{display:flex; flex-direction:column; gap:20px}
.cat-block{border:1px solid var(--line); border-radius:var(--radius); background:var(--card); overflow:hidden}
.cat-row{display:grid; grid-template-columns:1.1fr 1fr; gap:40px; padding:40px; align-items:center}
@media (max-width:820px){ .cat-row{grid-template-columns:1fr; padding:28px} }
.cat-copy .cat-eyebrow{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; display:block}
.cat-copy h3{font-size:21px; margin-bottom:10px}
.cat-copy p{font-size:14.5px; color:var(--ink-soft); line-height:1.6; margin-bottom:0; max-width:48ch}
.cat-more{display:inline-block; margin-top:16px; font-size:14px; font-weight:600; color:var(--orange-dark); text-decoration:none}
.cat-more:hover{color:var(--plum)}
.cat-visual{display:flex; align-items:center; justify-content:center}

/* ---------- shared icon chip ---------- */
.ic-chip{width:44px;height:44px;border-radius:11px;background:var(--orange-tint);color:var(--orange-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0; margin-bottom:16px}
.ic-chip svg{width:22px;height:22px}
.tick-top{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.tick-top .ic-chip{width:36px; height:36px; border-radius:9px; margin-bottom:0}
.tick-top .ic-chip svg{width:18px; height:18px}

/* dot-grid texture */
.textured{position:relative}
.textured::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.6; background-image:radial-gradient(var(--line) 1px, transparent 1px); background-size:18px 18px; mask-image:linear-gradient(to bottom, black, transparent 85%)}
.textured > .container{position:relative; z-index:1}

/* pazaryeri hub mockup — no card chrome, glossy FoodDirekt orb anchored center, partner logos drift past in two opposite horizontal lanes */
.hub-mock{width:100%; max-width:400px; height:var(--mock-h); margin:0 auto; display:flex; align-items:center; justify-content:center}
.hub-stage{position:relative; width:100%; height:180px}
.hub-lane{position:relative; height:80px; overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, black 30%, black 70%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0%, black 30%, black 70%, transparent 100%)}
.hub-lane-top{margin-bottom:16px}
.hub-track{display:flex; align-items:center; height:100%; position:absolute; left:0; top:0}
.hub-lane-top .hub-track{animation:hubLeft 22s linear infinite}
.hub-lane-bottom .hub-track{animation:hubRight 26s linear infinite}
@keyframes hubLeft{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes hubRight{ from{transform:translateX(-50%)} to{transform:translateX(0)} }
@media (prefers-reduced-motion:reduce){ .hub-lane-top .hub-track, .hub-lane-bottom .hub-track{animation:none} }
.hub-tile{width:78px; height:56px; margin-right:12px; flex-shrink:0; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 4px 12px -7px rgba(29,11,26,.18); display:flex; align-items:center; justify-content:center; padding:8px}
.hub-tile img{max-width:78%; max-height:22px; object-fit:contain}
.hub-orb{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:132px; height:132px; border-radius:50%; z-index:2;
  background:radial-gradient(circle at 34% 28%, #FF8A5C 0%, var(--orange) 45%, var(--plum) 100%);
  box-shadow:0 18px 40px -12px rgba(234,86,29,.55), 0 0 0 10px rgba(234,86,29,.06);
  display:flex; align-items:center; justify-content:center}
.hub-orb::before{content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.55), rgba(255,255,255,0) 48%); pointer-events:none}
.hub-orb::after{content:""; position:absolute; inset:-9px; border-radius:50%; border:1.5px solid rgba(234,86,29,.3); animation:hubPulse 2.4s ease-in-out infinite}
.hub-orb img{width:52px; height:52px; position:relative; z-index:1}
@keyframes hubPulse{ 0%{transform:scale(1); opacity:.6} 100%{transform:scale(1.28); opacity:0} }
@media (prefers-reduced-motion:reduce){ .hub-orb::after{animation:none} }
@media (prefers-reduced-motion:reduce){ .hub-center::before{animation:none} }

/* checkout mockup (Ödeme Entegrasyonu) — realistic "customer is paying right now" card, standard fixed height */
.checkout-mock{width:100%; max-width:320px; height:var(--mock-h); margin:0 auto; background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column}
.pm-bar{display:flex; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); flex-shrink:0}
.pm-bar .bar-title{font-family:var(--mono); font-size:10.5px; color:var(--ink-soft); letter-spacing:.04em}
.pm-body{padding:22px 20px; flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center}
.pm-summary{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px; padding-bottom:16px; border-bottom:1px dashed var(--line)}
.pm-summary span{font-size:12px; color:var(--ink-soft)}
.pm-summary b{font-family:var(--mono); font-size:22px; color:var(--ink); font-weight:600}
.pm-label{font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px}
.pm-select-phase{transition:opacity .4s ease}
.pm-select-phase.pm-hide{opacity:0}
.pm-carousel{width:100%; height:52px; overflow:hidden; position:relative; margin-bottom:18px;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%)}
.pm-track{display:flex; gap:8px; position:absolute; left:0; top:0; transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.pm-tile{position:relative; width:82px; height:52px; flex-shrink:0; border:1.5px solid var(--line); border-radius:10px; display:flex; align-items:center; justify-content:center; padding:6px; opacity:.5; transition:border-color .3s ease, box-shadow .3s ease, opacity .3s ease}
.pm-tile img{max-width:74%; max-height:18px; object-fit:contain}
.pm-tile .pm-check{position:absolute; top:-7px; right:-7px; width:17px; height:17px; border-radius:50%; background:var(--orange); color:#fff; font-size:10px; line-height:17px; text-align:center; opacity:0; transform:scale(.4); transition:opacity .25s ease, transform .25s ease}
.pm-tile.selected{border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-tint); opacity:1}
.pm-tile.selected .pm-check{opacity:1; transform:scale(1)}
.pm-pay-phase{opacity:0; transition:opacity .4s ease}
.pm-pay-phase.pm-show{opacity:1}
.pm-pay{width:100%; flex-shrink:0; transition:background .3s ease, transform .15s ease}
.pm-pay.pressed{transform:scale(.95)}
.pm-pay.processing{opacity:.75; pointer-events:none}
.pm-pay.success{background:var(--good); border-color:var(--good)}

/* chat mockup (animated) */
.chat-mock{width:100%; max-width:360px; height:var(--mock-h); background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; margin:0 auto; display:flex; flex-direction:column}
.chat-head{background:#25D366; color:#fff; font-size:13px; font-weight:600; padding:11px 14px; display:flex; align-items:center; gap:8px; flex-shrink:0}
.chat-dot{width:7px; height:7px; border-radius:50%; background:#fff; opacity:.8}
.chat-body{flex:1; min-height:0; padding:14px; display:flex; flex-direction:column; gap:8px; overflow-y:auto; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none}
.chat-body::-webkit-scrollbar{display:none}
.bubble{max-width:82%; padding:8px 11px; border-radius:9px; font-size:12.5px; line-height:1.45; animation:bubbleIn .3s ease both}
@keyframes bubbleIn{ from{opacity:0; transform:translateY(6px) scale(.98)} to{opacity:1; transform:translateY(0) scale(1)} }
@media (prefers-reduced-motion:reduce){ .bubble{animation:none} }
.bubble.in{background:var(--paper-2); border:1px solid var(--line); align-self:flex-start; border-top-left-radius:2px}
.bubble.out{background:#DCF8C6; align-self:flex-end; border-top-right-radius:2px}
.bubble.typing-bubble{display:flex; gap:4px; padding:11px 13px; align-items:center}
.tdot{width:6px; height:6px; border-radius:50%; background:#9aa39a; opacity:.5; animation:typingBounce 1.1s infinite}
.tdot:nth-child(2){animation-delay:.15s}
.tdot:nth-child(3){animation-delay:.3s}
@keyframes typingBounce{ 0%,60%,100%{transform:translateY(0); opacity:.5} 30%{transform:translateY(-4px); opacity:1} }
@media (prefers-reduced-motion:reduce){ .tdot{animation:none} }

/* order-tracking card — no device bezel */
.tracker-card{width:100%; max-width:360px; height:var(--mock-h); margin:0 auto; background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column}
.tc-head{padding:16px 20px; border-bottom:1px solid var(--line); flex-shrink:0}
.tc-head b{display:block; font-size:14px; color:var(--ink)}
.tc-head span{font-size:11.5px; color:var(--ink-soft)}
.tc-body{padding:22px 20px; flex:1; display:flex; flex-direction:column; justify-content:center; min-height:0}
.ptrack{display:flex; flex-direction:column}
.pt-step{position:relative; padding-left:22px; padding-bottom:20px}
.pt-step:last-child{padding-bottom:0}
.pt-dot{position:absolute; left:0; top:1px; width:10px; height:10px; border-radius:50%; background:var(--line); transition:background .3s ease, box-shadow .3s ease; box-shadow:0 0 0 1px var(--line)}
.pt-line{position:absolute; left:4px; top:12px; width:2px; bottom:-2px; background:var(--line); transition:background .3s ease}
.pt-label{font-size:12.5px; color:var(--ink-soft); transition:color .3s ease, font-weight .3s ease}
.pt-step.on .pt-dot{background:var(--orange); box-shadow:0 0 0 1px var(--orange)}
.pt-step.on .pt-line{background:var(--orange); transition:background .5s ease}
.pt-step.on .pt-label{color:var(--ink); font-weight:600}
.pt-step.current .pt-dot{animation:ptPulse 1.3s ease-in-out infinite}
@keyframes ptPulse{ 0%,100%{box-shadow:0 0 0 1px var(--orange), 0 0 0 3px rgba(234,86,29,.25)} 50%{box-shadow:0 0 0 1px var(--orange), 0 0 0 7px rgba(234,86,29,.1)} }
@media (prefers-reduced-motion:reduce){ .pt-step.current .pt-dot{animation:none} }
.tc-cta{margin:0 20px 20px; background:var(--orange); color:#fff; text-align:center; padding:11px; border-radius:8px; font-size:12.5px; font-weight:700; flex-shrink:0}

/* map mockup — realistic street grid + animated courier along the route */
.map-mock{width:100%; max-width:360px; height:var(--mock-h); border:1px solid var(--line); border-radius:16px; overflow:hidden; position:relative; background:var(--paper-2); margin:0 auto}
.map-grid{position:absolute; inset:0; opacity:.9;
  background-image:
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(0deg, transparent 0 63px, rgba(26,16,21,.035) 63px 66px),
    repeating-linear-gradient(90deg, transparent 0 95px, rgba(26,16,21,.035) 95px 98px)}
.map-route-path{stroke-dasharray:100; stroke-dashoffset:100}
.map-route-path.draw{animation:drawRoute 1.3s ease forwards}
@keyframes drawRoute{ to{stroke-dashoffset:0} }
@media (prefers-reduced-motion:reduce){ .map-route-path{stroke-dashoffset:0; animation:none} }
.map-pin{position:absolute; width:12px; height:12px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 5px rgba(234,86,29,0.18); transform:translate(-50%,-50%)}
.map-pin.pin-pulse{animation:pinPulse .5s ease}
@keyframes pinPulse{ 0%{transform:translate(-50%,-50%) scale(0)} 65%{transform:translate(-50%,-50%) scale(1.3)} 100%{transform:translate(-50%,-50%) scale(1)} }
@media (prefers-reduced-motion:reduce){ .map-pin.pin-pulse{animation:none} }
.map-pin-end{background:var(--plum); box-shadow:0 0 0 5px rgba(70,24,65,.18)}
.map-pin-end.arrived{animation:pinPulse .6s ease}
.map-courier{position:absolute; width:9px; height:9px; border-radius:50%; background:#fff; border:2px solid var(--orange); transform:translate(-50%,-50%); box-shadow:0 1px 4px rgba(26,16,21,.35); opacity:0; transition:opacity .2s ease; z-index:2}
.map-courier.go{opacity:1}
.map-card{position:absolute; left:14px; right:14px; bottom:14px; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:9px 11px; display:flex; align-items:center; gap:9px; transition:background .3s ease}
.map-card.delivered{background:rgba(63,133,87,.1)}
.map-card .s{transition:color .2s ease}
.map-card.delivered .s{color:var(--good); font-weight:600}
.map-card .av{width:26px; height:26px; border-radius:50%; background:var(--plum-950); color:#fff; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700}
.map-card .t{font-size:11.5px; font-weight:600}
.map-card .s{font-size:9.5px; color:var(--ink-soft)}

/* order panel mockup */
.order-mock{width:100%; max-width:360px; height:var(--mock-h); margin:0 auto; background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-device); display:flex; flex-direction:column}
.om-bar{display:flex; align-items:center; gap:6px; padding:12px 14px; border-bottom:1px solid var(--line); flex-shrink:0}
.om-title{font-family:var(--mono); font-size:10.5px; color:var(--ink-soft)}
.om-live{margin-left:auto; display:flex; align-items:center; gap:5px; font-family:var(--mono); font-size:9.5px; color:var(--good)}
.om-live::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--good); animation:livePulse 1.8s ease-in-out infinite}
@keyframes livePulse{ 0%,100%{opacity:1} 50%{opacity:.3} }
@media (prefers-reduced-motion:reduce){ .om-live::before{animation:none} }
.om-tabs{display:flex; gap:6px; padding:10px 14px 0; flex-shrink:0}
.om-tab{font-family:var(--mono); font-size:10px; padding:5px 10px; border-radius:6px; color:var(--ink-soft); background:var(--paper-2); transition:background .35s ease, color .35s ease}
.om-tab.active{background:var(--plum-950); color:#fff}
.om-body{padding:8px 14px 4px; flex:1; display:flex; flex-direction:column; justify-content:center; min-height:0}
.om-order{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); font-size:12.5px; opacity:0; transition:background .8s ease}
.om-order:last-child{border-bottom:none}
.om-order.anim-row{animation:omRowIn .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes omRowIn{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }
@media (prefers-reduced-motion:reduce){ .om-order{opacity:1} .om-order.anim-row{animation:none} }
.om-order.flash{background:rgba(234,86,29,.12); transition:background .05s ease}
.om-order .meta{display:flex; align-items:center; gap:10px; min-width:0}
.om-order .av{width:28px; height:28px; border-radius:50%; background:var(--orange-tint); color:var(--orange-dark); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; flex-shrink:0}
.om-order .who{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.om-order .what{color:var(--ink-soft); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.om-right{text-align:right; flex-shrink:0}
.om-amt{font-family:var(--mono); font-weight:600; display:block}
.om-pill{font-family:var(--mono); font-size:9px; padding:2px 7px; border-radius:5px; display:inline-block; margin-top:4px; white-space:nowrap}
.om-pill.new{background:var(--orange-tint); color:var(--orange-dark)}
.om-pill.prep{background:rgba(70,24,65,.1); color:var(--plum)}
.om-pill.way{background:rgba(63,133,87,.14); color:var(--good)}
.om-foot{display:flex; border-top:1px solid var(--line); background:var(--paper-2); flex-shrink:0}
.om-foot .stat{flex:1; text-align:center; padding:12px 6px}
.om-foot .stat:not(:last-child){border-right:1px solid var(--line)}
.om-foot .stat b{display:block; font-family:var(--display); font-size:15px; color:var(--plum)}
.om-foot .stat span{font-size:9px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em}

/* kitchen mockup (light) */
.kitchen-mock{width:100%; max-width:360px; height:var(--mock-h); margin:0 auto; background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-device); display:flex; flex-direction:column}
.km-bar{display:flex; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:10.5px; color:var(--ink-soft); flex-shrink:0}
.km-clock{color:var(--ink); font-weight:600; margin-left:auto}
.km-cols{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); flex:1; min-height:0; overflow:hidden}
.km-col{background:var(--card); padding:12px}
.km-col-head{font-family:var(--mono); font-size:9.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px; display:flex; justify-content:space-between}
.km-ticket{background:var(--paper-2); border:1px solid var(--line); border-radius:8px; padding:11px; margin-bottom:8px; transition:opacity .3s ease, transform .3s ease}
.km-ticket:last-child{margin-bottom:0}
.km-ticket.km-entering{animation:kmTicketIn .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes kmTicketIn{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }
.km-ticket.km-leaving{opacity:0; transform:translateX(10px) scale(.96)}
@media (prefers-reduced-motion:reduce){ .km-ticket.km-entering{animation:none} .km-ticket.km-leaving{opacity:1; transform:none} }
.km-advance{margin-top:8px; width:100%; padding:6px 8px; border-radius:6px; border:1px solid var(--line); background:var(--card); color:var(--ink-soft); font-family:var(--sans); font-size:10.5px; font-weight:600; text-align:center; transition:background .2s ease, color .2s ease, border-color .2s ease}
.km-advance.pressed{background:var(--orange); color:#fff; border-color:var(--orange)}
.km-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:7px}
.km-ticket .kn{font-family:var(--mono); font-size:11px; color:var(--ink); font-weight:600}
.km-timer{font-family:var(--mono); font-size:9.5px; padding:2px 7px; border-radius:5px}
.km-timer.ok{background:rgba(63,133,87,.14); color:var(--good)}
.km-timer.warn{background:rgba(234,86,29,.16); color:var(--orange-dark)}
.km-ticket .ki{color:var(--ink); font-size:11.5px; margin-bottom:2px}
.km-ticket .kt-table{font-family:var(--mono); font-size:9.5px; color:var(--ink-soft); margin-top:6px}

/* qr + language mock */
.qr-card{width:100%; max-width:360px; height:var(--mock-h); margin:0 auto; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-device); overflow:hidden; display:flex; flex-direction:column}
.qr-bar{display:flex; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); flex-shrink:0}
.qr-bar .bar-title{font-family:var(--mono); font-size:10.5px; color:var(--ink-soft); letter-spacing:.04em}
.qr-body{padding:20px 32px; flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px}
.qr-frame{position:relative; overflow:hidden; border-radius:10px}
.qr-mock{width:176px; height:176px; display:grid; grid-template-columns:repeat(21,1fr); grid-template-rows:repeat(21,1fr); gap:0; padding:13px; background:#fff; border:1px solid var(--line); border-radius:10px}
.qr-mock i{background:transparent; display:block; font-style:normal}
.qr-mock i.on{background:var(--plum-950)}
.qr-scan{position:absolute; left:3%; right:3%; top:0; height:2px; background:linear-gradient(90deg, transparent, var(--orange) 15%, var(--orange) 85%, transparent); box-shadow:0 0 6px 1px rgba(234,86,29,.65); animation:qrScan 2.2s linear infinite}
@keyframes qrScan{ 0%{top:0%} 100%{top:calc(100% - 2px)} }
@media (prefers-reduced-motion:reduce){ .qr-scan{display:none} }
.lang-pills{display:flex; gap:8px}
.lp{font-family:var(--mono); font-size:11px; padding:5px 10px; border-radius:6px; background:var(--paper-2); color:var(--ink-soft); border:1px solid var(--line); transition:background .3s ease, color .3s ease, border-color .3s ease}
.lp.active{background:var(--plum-950); color:#fff; border-color:var(--plum-950)}

/* language-settings mockup (QR Menü — çok dilli yönetim paneli) */
.lang-settings{width:100%; max-width:360px; height:var(--mock-h); margin:0 auto; display:flex; flex-direction:column; justify-content:center}
.ls-head{margin-bottom:16px}
.ls-head h4{font-size:16px; margin-bottom:5px; color:var(--ink)}
.ls-head p{font-size:12.5px; color:var(--ink-soft); line-height:1.5}
.ls-card{position:relative; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow-device); margin-bottom:12px}
.ls-row{display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid var(--line)}
.ls-row:last-child{border-bottom:none}
.ls-flag{font-size:18px; line-height:1}
.ls-name{flex:1; font-size:14px; font-weight:600; color:var(--ink)}
.ls-badge{font-size:10px; font-family:var(--mono); background:var(--orange-tint); color:var(--orange-dark); padding:3px 9px; border-radius:99px; white-space:nowrap}
.ls-toggle{position:relative; flex-shrink:0; width:34px; height:20px; border-radius:99px; background:var(--line); transition:background .3s ease}
.ls-toggle .ls-knob{position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:left .3s cubic-bezier(.4,0,.2,1)}
.ls-toggle.on{background:var(--orange)}
.ls-toggle.on .ls-knob{left:16px}
.ls-row-new{max-height:0; opacity:0; padding-top:0; padding-bottom:0; overflow:hidden; border-bottom-color:transparent; transition:max-height .45s ease, opacity .3s ease, padding .45s ease}
.ls-row-new.show{max-height:52px; opacity:1; padding-top:13px; padding-bottom:13px; border-bottom-color:var(--line)}
.ls-cursor{position:absolute; top:0; left:0; width:15px; height:15px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 5px var(--orange-tint); opacity:0; pointer-events:none; z-index:5; transition:top .55s cubic-bezier(.4,0,.2,1), left .55s cubic-bezier(.4,0,.2,1), opacity .3s ease, transform .15s ease}
.ls-cursor.click{transform:scale(.65)}
@media (prefers-reduced-motion:reduce){.ls-cursor{display:none}}
.ls-add{display:flex; align-items:center; gap:8px; padding:13px 16px; border:1.5px dashed var(--line); border-radius:12px; color:var(--ink-soft); font-size:13.5px; font-weight:600; justify-content:center; transition:background .25s ease, border-color .25s ease, color .25s ease}
.ls-add.press{background:var(--orange-tint); border-color:var(--orange); color:var(--orange-dark)}

/* ================= DEEP DIVE (panel) ================= */
.deep{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; padding-block:46px}
.deep:not(:last-child){border-bottom:1px solid var(--line)}
.deep.rev{direction:rtl} .deep.rev > *{direction:ltr}
@media (max-width:860px){ .deep, .deep.rev{grid-template-columns:1fr; direction:ltr} }
.deep-copy .num-tag{font-family:var(--mono); font-size:12px; color:var(--orange-dark); display:block; margin-bottom:12px}
.deep-copy h3{font-size:24px; margin-bottom:12px}
.deep-copy p{font-size:15px; color:var(--ink-soft); line-height:1.65; margin-bottom:16px; max-width:48ch}
.deep-copy ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.deep-copy li{display:flex; gap:10px; font-size:14px; color:var(--ink)}
.deep-copy li::before{content:"—"; color:var(--orange)}
.deep-visual{display:flex; align-items:center; justify-content:center; position:relative}
.deep-visual::before{content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:280px; height:280px; border-radius:50%; background:radial-gradient(circle, rgba(234,86,29,.16), rgba(234,86,29,0) 70%); filter:blur(6px); z-index:0}
.deep-visual > *{position:relative; z-index:1}

/* ================= PRICING (full-width split card) ================= */
.price-card{width:100%; background:var(--plum); color:#fff; border-radius:var(--radius); position:relative; overflow:hidden}
.price-card::before{content:""; position:absolute; top:-100px; right:-80px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle, rgba(234,86,29,.4), transparent 70%); pointer-events:none}
.price-card::after{content:""; position:absolute; bottom:-120px; left:20%; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.06), transparent 70%); pointer-events:none}
.price-inner{display:grid; grid-template-columns:1.1fr .9fr; position:relative; z-index:1}
.price-left{padding:44px; border-right:1px solid rgba(255,255,255,.14)}
.price-right{padding:44px; display:flex; flex-direction:column; justify-content:center}
@media (max-width:760px){ .price-inner{grid-template-columns:1fr} .price-left{border-right:none; border-bottom:1px solid rgba(255,255,255,.14)} .price-left, .price-right{padding:32px} }
.price-card .ptag{font-family:var(--mono); font-size:12px; color:#FFB088; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; display:block}
.price-card h3{color:#fff; font-size:24px; margin-bottom:12px}
.price-card .pdesc{color:rgba(255,255,255,.6); font-size:14.5px; line-height:1.6; margin-bottom:26px; max-width:38ch}
.price-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px}
.price-list li{display:flex; gap:10px; font-size:14.5px; color:rgba(255,255,255,.88)}
.price-list li::before{content:"—"; color:var(--orange)}
.price-note{font-size:12px; color:rgba(255,255,255,.45); margin-top:14px; text-align:center}
.price-toggle{display:inline-flex; background:rgba(255,255,255,.08); border-radius:99px; padding:4px; margin-bottom:20px}
.price-toggle button{font-family:var(--sans); font-size:13px; font-weight:600; padding:8px 18px; border-radius:99px; border:none; background:none; color:rgba(255,255,255,.6); cursor:pointer}
.price-toggle button.active{background:var(--orange); color:#fff}
.price-amount{font-family:var(--display); font-size:38px; color:#fff; display:flex; align-items:baseline; gap:8px; margin-bottom:2px}
.price-amount .per{font-family:var(--sans); font-size:14px; color:rgba(255,255,255,.5); font-weight:500}
.price-strike{font-family:var(--mono); font-size:12.5px; color:rgba(255,255,255,.4); margin-bottom:14px; visibility:hidden}
.price-strike s{text-decoration:line-through}
.price-badge{display:none; font-family:var(--mono); font-size:11px; background:rgba(255,176,136,.15); color:#FFB088; padding:5px 11px; border-radius:6px; margin-bottom:14px}
.price-badge.show{display:inline-block}

/* ================= PRICING (future multi-package note) ================= */
.price-tiers-note{text-align:center; font-size:13px; color:var(--ink-soft); margin-top:28px}

/* ================= CALCULATOR ================= */
.calc-section{background:var(--paper-2)}
.calc-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:44px; align-items:start}
@media (max-width:920px){ .calc-grid{grid-template-columns:1fr} }
.calc-inputs{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:28px}
.calc-inputs h3{font-size:18px; margin-bottom:4px}
.calc-inputs .sub{font-size:13px; color:var(--ink-soft); display:block; margin-bottom:22px}
.field{margin-bottom:22px}
.field label{display:flex; justify-content:space-between; font-size:13.5px; font-weight:600; margin-bottom:10px; color:var(--plum)}
.field .val{font-family:var(--mono); font-weight:500; color:var(--orange-dark)}
input[type=range]{-webkit-appearance:none; width:100%; height:4px; border-radius:99px; background:var(--line); outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--orange); border:3px solid var(--card); box-shadow:0 1px 4px rgba(0,0,0,0.25); cursor:pointer}
input[type=range]::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:var(--orange); border:3px solid var(--card); cursor:pointer}
.duel{display:grid; grid-template-columns:1fr 1fr; gap:22px}
@media (max-width:620px){ .duel{grid-template-columns:1fr} }
.dr{background:var(--card); border:1px solid var(--line); border-radius:4px; padding:22px 20px; font-family:var(--mono); position:relative}
.dr::before,.dr::after{content:"";position:absolute;width:16px;height:16px;background:var(--paper-2);border-radius:50%;top:88px}
.dr::before{left:-8px}.dr::after{right:-8px}
.dr .rn{font-size:10px;letter-spacing:.08em;color:var(--ink-soft);text-align:center;display:block}
.dr h5{text-align:center;font-size:13px;margin:4px 0 12px;color:var(--ink); font-family:var(--sans); font-weight:700}
.dr .r-tear{margin:10px 0}
.dr .r-line{font-size:12px}
.dr.bad h5{color:#8a5a52}
.dr.good{border-color:var(--orange)}
.dr.good h5{color:var(--orange-dark)}
.dr .r-total{font-size:13px}
.gain-banner{margin-top:22px; background:var(--plum-950); color:#fff; border-radius:var(--radius); padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.gain-banner .lbl{font-size:13px; color:rgba(255,255,255,.65)}
.gain-banner .num{font-family:var(--display); font-size:26px; color:#fff}
.gain-note{font-size:11.5px; color:var(--ink-soft); margin-top:10px}

/* ================= FAQ ================= */
.faq-grid{display:grid; grid-template-columns:1.4fr .8fr; gap:48px; align-items:start}
@media (max-width:860px){ .faq-grid{grid-template-columns:1fr} }
.faq-side{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:28px; position:sticky; top:110px}
@media (max-width:860px){ .faq-side{position:static} }
.faq-side h4{font-size:17px; margin-bottom:8px}
.faq-side p{font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin-bottom:20px}
.faq-side .fs-links{display:flex; flex-direction:column; gap:11px; margin-bottom:22px}
.faq-side .fs-links a{font-size:13px; color:var(--plum); text-decoration:none; font-weight:600}
.faq-side .fs-links a:hover{color:var(--orange-dark)}
.faq-item{border-bottom:1px solid var(--line); padding:20px 0}
.faq-q{font-weight:600; font-size:16px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; color:var(--plum)}
.faq-q::-webkit-details-marker{display:none}
.faq-q .plus{font-family:var(--mono); font-size:20px; color:var(--orange); transition:transform .2s ease; flex-shrink:0; margin-left:16px}
.faq-item[open] .faq-q .plus{transform:rotate(45deg)}
.faq-a{font-size:14.5px; color:var(--ink-soft); margin-top:12px; line-height:1.6; max-width:64ch}
.feat-faq{max-width:760px; margin:0 auto}

/* ================= ÖZELLİK ALT SAYFA: nasıl-çalışır mini adımlar ================= */
.step-mini{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media (max-width:760px){ .step-mini{grid-template-columns:1fr} }
.step-mini-cell{padding:24px 22px; border:1px solid var(--line); border-radius:12px; background:var(--card)}
.step-mini-num{font-family:var(--mono); font-size:12px; color:var(--orange-dark); display:block; margin-bottom:12px}
.step-mini-cell h4{font-size:15.5px; margin-bottom:7px}
.step-mini-cell p{font-size:13.5px; color:var(--ink-soft); line-height:1.6}
.office-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:8px}
@media (max-width:760px){ .office-grid{grid-template-columns:1fr} }
.office-card{padding:26px 24px; border:1px solid var(--line); border-radius:12px; background:var(--card)}
.office-flag{display:block; margin-bottom:14px; border-radius:3px; box-shadow:0 0 0 1px var(--line)}
.office-card h4{font-size:16px; margin-bottom:8px; color:var(--plum)}
.office-card p{font-size:13.5px; color:var(--ink-soft); line-height:1.6}
.office-note{margin-top:24px; font-size:13.5px; color:var(--ink-soft); text-align:center}

/* ================= SİSTEM DURUMU ================= */
.status-hero{display:flex; align-items:flex-start; gap:18px; padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); max-width:720px; margin:0 auto 28px}
.status-hero-dot-wrap{position:relative; width:16px; height:16px; flex-shrink:0; margin-top:6px}
.status-hero-dot-wrap .status-hero-pulse{position:absolute; inset:0; border-radius:50%; background:var(--good); animation:statusPulseRing 2.2s ease-out infinite}
.status-hero-dot-wrap .status-hero-dot{position:absolute; inset:0; border-radius:50%; background:var(--good)}
@keyframes statusPulseRing{0%{transform:scale(1); opacity:.7}100%{transform:scale(3.2); opacity:0}}
.status-hero h2{font-size:21px; color:var(--plum); margin-bottom:5px}
.status-hero p{font-size:14px; color:var(--ink-soft)}
.status-list{max-width:720px; margin:0 auto; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.status-row{display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-bottom:1px solid var(--line)}
.status-row:last-child{border-bottom:none}
.status-row-name{font-size:14.5px; font-weight:600; color:var(--ink)}
.status-row-pill{display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px; color:var(--good)}
.status-mini{width:7px; height:7px; border-radius:50%; background:var(--good); animation:statusMiniBlink 3s ease-in-out infinite}
@keyframes statusMiniBlink{0%,100%{opacity:1}50%{opacity:.4}}
.status-note{max-width:720px; margin:26px auto 0; font-size:13px; color:var(--ink-soft); line-height:1.6; text-align:center}
.status-note a{color:var(--orange-dark); font-weight:600}
@media (prefers-reduced-motion:reduce){ .status-hero-pulse, .status-mini{animation:none} }
@media (max-width:600px){ .status-hero{padding:22px; gap:14px} }
.office-note a{color:var(--orange-dark); font-weight:600}

/* ================= KURUMSAL: split / value-band / values-grid / market-strip ================= */
.about-copy{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:16px}
.about-copy p{font-size:16px; line-height:1.75; color:var(--ink)}
.about-copy a{color:var(--orange-dark); font-weight:600}
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
@media (max-width:860px){ .split{grid-template-columns:1fr} }
.split-copy .eyebrow-label{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:10px; display:block}
.split-copy h3{font-size:24px; margin-bottom:14px}
.split-copy p{font-size:15.5px; color:var(--ink-soft); line-height:1.7; margin-bottom:14px; max-width:50ch}

.value-band{display:grid; grid-template-columns:1fr; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.value-band .vb-cell{padding:24px 26px; border-bottom:1px solid var(--line)}
.value-band .vb-cell:last-child{border-bottom:none}
.value-band .vb-cell .big{font-family:var(--display); font-size:20px; color:var(--plum); margin-bottom:6px}
.value-band .vb-cell .small{font-size:13.5px; color:var(--ink-soft); line-height:1.5}
.story-strip{position:relative; overflow:hidden; cursor:grab; touch-action:pan-y; -webkit-user-select:none; user-select:none; -webkit-mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent)}
.story-strip.dragging{cursor:grabbing}
.story-track{display:flex; width:max-content; padding-top:2px; position:relative}
.story-track::before{content:""; position:absolute; top:8px; left:0; right:0; height:2px; background:var(--line); z-index:0}
.st-item{position:relative; flex-shrink:0; width:250px; padding-right:30px}
.st-dot{position:relative; z-index:1; display:block; width:18px; height:18px; border-radius:50%; background:var(--card); border:3px solid var(--orange); margin-bottom:18px; box-shadow:0 0 0 4px var(--paper-2)}
.st-item.future .st-dot{border-color:var(--ink-soft); border-style:dashed; background:var(--paper-2); box-shadow:0 0 0 4px var(--paper-2)}
.st-year{font-family:var(--mono); font-size:11.5px; color:var(--orange-dark); letter-spacing:.04em; margin-bottom:4px; display:block; text-transform:uppercase}
.st-item.future .st-year{color:var(--ink-soft)}
.st-item h4{font-size:16px; margin-bottom:6px; color:var(--plum)}
.st-item p{font-size:13.5px; color:var(--ink-soft); line-height:1.6; max-width:220px}

.values-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
@media (max-width:820px){ .values-grid{grid-template-columns:1fr} }
.value-cell{background:var(--card); padding:32px 28px}
.value-cell h4{font-size:17px; margin-bottom:10px}
.value-cell p{font-size:14px; color:var(--ink-soft); line-height:1.6}

.market-strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper-2); padding-block:20px}
.market-row{display:flex; justify-content:center; gap:40px; flex-wrap:wrap}
.market-item{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:13px; color:var(--ink-soft)}
.market-item svg{border-radius:2px; box-shadow:0 0 0 1px var(--line); flex-shrink:0}
.market-item b{color:var(--plum); font-family:var(--sans); font-weight:700; font-size:15px}

/* ================= REFERANSLAR: honesty-card / perks-grid ================= */
.honesty-card{max-width:760px; margin:0 auto; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:36px; text-align:center}
.honesty-card .ic-chip{width:48px;height:48px;border-radius:12px;margin:0 auto 18px}
.honesty-card .ic-chip svg{width:24px;height:24px}
.honesty-card h3{font-size:22px; margin-bottom:12px}
.honesty-card p{font-size:15px; color:var(--ink-soft); line-height:1.7; max-width:56ch; margin:0 auto 22px}

.perks-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
@media (max-width:820px){ .perks-grid{grid-template-columns:1fr} }
.perk-cell{background:var(--card); padding:30px 26px}
.perk-cell h4{font-size:16.5px; margin-bottom:8px}
.perk-cell p{font-size:14px; color:var(--ink-soft); line-height:1.6}

.ref-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px}
.ref-card{position:relative; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; text-decoration:none}
.ref-cover{position:relative; height:140px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%); flex-shrink:0}
.ref-cover::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); background-size:14px 14px}
.ref-cover img.ref-hero{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1}
.ref-cover img.ref-logo-fallback{width:64px; opacity:.95; position:relative; z-index:1}
.ref-card-body{padding:16px 18px 18px; display:flex; align-items:center; gap:9px}
.ref-card .ref-name{font-family:var(--display); font-weight:700; font-size:15px; color:var(--ink)}
.ref-card .ref-country svg{width:18px; height:12px; border-radius:2px; box-shadow:0 0 0 1px var(--line); flex-shrink:0}

/* ================= BLOG ================= */
.post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media (max-width:900px){ .post-grid{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .post-grid{grid-template-columns:1fr} }
.post-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:border-color .15s ease, transform .15s ease}
.post-card:hover{border-color:var(--orange); transform:translateY(-2px)}
.post-cover{height:160px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center}
.post-cover .pc-logo{width:110px; opacity:.95; position:relative}
.post-cover::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); background-size:14px 14px}
.post-cover.c1, .pf-visual.c1{background:linear-gradient(135deg, #F2884B 0%, #C13F0E 100%)}
.post-cover.c2, .pf-visual.c2{background:linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%)}
.post-cover.c3, .pf-visual.c3{background:linear-gradient(135deg, #E0762B 0%, #7A2A0A 100%)}
.post-cover.c4, .pf-visual.c4{background:linear-gradient(135deg, #FBAA63 0%, #D9591A 100%)}
.post-cover.c5, .pf-visual.c5{background:linear-gradient(135deg, #C6501B 0%, #451604 100%)}
.post-body{padding:20px 22px 24px; display:flex; flex-direction:column; gap:10px; flex-grow:1}
.post-body h3{font-size:16.5px; line-height:1.35}
.post-body p{font-size:13.5px; color:var(--ink-soft); line-height:1.55; flex-grow:1}
.post-meta{font-family:var(--mono); font-size:11px; color:var(--ink-soft); margin-top:6px; padding-top:12px; border-top:1px solid var(--line)}

.post-featured{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:44px}
@media (max-width:760px){ .post-featured{grid-template-columns:1fr} }
.pf-visual{position:relative; min-height:220px; display:flex; align-items:center; justify-content:center}
.pf-visual::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size:16px 16px}
.pf-visual .pc-logo{width:150px; opacity:.95; position:relative}

/* ================= BLOG ARTICLE (single post) ================= */
.article-cover{width:100%; max-width:760px; margin:0 auto 36px; border-radius:var(--radius); overflow:hidden; position:relative; min-height:200px; display:flex; align-items:center; justify-content:center}
.article-meta{font-family:var(--mono); font-size:12px; color:var(--ink-soft); text-align:center; margin-bottom:6px}
.article-body{max-width:680px; margin:0 auto}
.article-body h2{font-size:24px; margin:42px 0 14px; color:var(--plum)}
.article-body h2:first-child{margin-top:0}
.article-body h3{font-size:18.5px; margin:26px 0 10px; color:var(--ink)}
.article-body p{font-size:16px; line-height:1.75; color:var(--ink); margin-bottom:18px}
.article-body ul, .article-body ol{margin:0 0 18px; padding-left:22px; display:flex; flex-direction:column; gap:9px}
.article-body li{font-size:16px; line-height:1.6; color:var(--ink)}
.article-body strong{color:var(--plum)}
.article-body .lead-p{font-size:18px; color:var(--ink-soft); line-height:1.6; margin-bottom:28px}
.pf-copy{padding:36px; display:flex; flex-direction:column; justify-content:center}
.pf-copy .post-cat{margin-bottom:10px}
.pf-copy h2{font-size:24px; margin-bottom:12px}
.pf-copy p{font-size:14.5px; color:var(--ink-soft); line-height:1.65; margin-bottom:18px}

/* ================= İLETİŞİM: contact form ================= */
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
@media (max-width:860px){ .contact-grid{grid-template-columns:1fr} }
.cg-form{padding:44px; background:var(--card)}
.cg-form h3{font-size:20px; margin-bottom:8px}
.cg-form .sub{font-size:13.5px; color:var(--ink-soft); display:block; margin-bottom:28px}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px}
@media (max-width:480px){ .field-row{grid-template-columns:1fr} }
.cg-form input, .cg-form select, .cg-form textarea{width:100%; padding:12px 14px; border-radius:9px; border:1.5px solid var(--line); background:var(--paper-2); color:var(--ink); font-family:var(--sans); font-size:14px; outline:none; transition:border-color .15s ease}
.cg-form input:focus, .cg-form select:focus, .cg-form textarea:focus{border-color:var(--orange)}
.cg-form textarea{resize:vertical; min-height:90px; margin-bottom:18px; display:block}
.cg-form .full{margin-bottom:14px}
.cg-note{font-size:11.5px; color:var(--ink-soft); margin-top:12px; text-align:center}
input.hp-field{position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; border:0 !important; opacity:0 !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important}
.callback-form .form-error{display:none; font-size:12.5px; color:var(--bad); margin-top:10px}
.callback-form .form-error.show{display:block}
.callback-form button[type="submit"][disabled]{opacity:.6; cursor:not-allowed}
.cg-side{background:var(--paper-2); color:var(--ink); padding:44px; position:relative; overflow:hidden; border-left:1px solid var(--line)}
.cg-side::before{content:""; position:absolute; top:-100px; right:-80px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle, rgba(234,86,29,.14), transparent 70%); pointer-events:none}
.cg-side-inner{position:relative; z-index:1}
.cg-side h4{color:var(--plum); font-size:18px; margin-bottom:14px}
.cg-side p{font-size:14px; color:var(--ink-soft); line-height:1.65; margin-bottom:28px}
.cg-item{display:flex; gap:12px; align-items:flex-start; margin-bottom:20px}
.cg-item .ic-chip{width:36px;height:36px;border-radius:9px;background:var(--orange-tint); color:var(--orange-dark); margin-bottom:0}
.cg-item .ic-chip svg{width:17px;height:17px}
.cg-item .cgt{font-size:13.5px; font-weight:600; color:var(--ink)}
.cg-item .cgs{font-size:12.5px; color:var(--ink-soft)}

/* ================= FINAL CTA ================= */
.cta-final{background:var(--plum); color:#fff; position:relative; overflow:hidden}
.cta-final::before{content:""; position:absolute; top:-140px; left:50%; transform:translateX(-50%); width:480px; height:480px; border-radius:50%; background:radial-gradient(circle, rgba(234,86,29,.22), transparent 70%); pointer-events:none}
.cta-box{text-align:center; max-width:640px; margin:0 auto; position:relative; z-index:1}
.cta-box h2{color:#fff; font-size:clamp(28px,3.6vw,40px); margin-bottom:14px}
.cta-box p{color:rgba(255,255,255,.65); font-size:16.5px; margin-bottom:30px}
.cta-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* ================= FINAL CTA — SPLIT: expansion map + callback form ================= */
.cta-split{position:relative; overflow:hidden}
.cta-split::before{content:""; position:absolute; top:-160px; left:10%; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, rgba(234,86,29,.1), transparent 35%); pointer-events:none}
.cta-split-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; position:relative; z-index:1; padding-block:64px}
@media (max-width:900px){ .cta-split-grid{grid-template-columns:1fr; gap:40px; padding-block:48px} }
.cta-map-panel{padding-right:12px}
.cta-map-panel .tag{margin-bottom:12px; display:inline-block}
.cta-map-panel h2{color:var(--plum); font-size:clamp(24px,2.8vw,32px); margin-bottom:10px}
.cta-map-panel > p{color:var(--ink-soft); font-size:15px; margin-bottom:26px; max-width:44ch}
.cta-map{position:relative; width:100%; height:230px; margin-bottom:24px; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--paper)}
.cta-map-img{position:absolute; inset:0; width:100%; height:100%}
.cta-map-img svg{width:100%; height:100%; display:block}
.cta-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:18px}
.cta-stats .cs-cell b{display:block; font-family:var(--display); font-size:24px; color:var(--plum); margin-bottom:2px}
.cta-stats .cs-cell span{font-family:var(--mono); font-size:10px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em}
.cta-legend{display:flex; gap:18px; font-family:var(--mono); font-size:10.5px; letter-spacing:.03em; color:var(--ink-soft)}
.cta-legend span{display:inline-flex; align-items:center; gap:6px}
.cl-dot{width:8px; height:8px; border-radius:50%; display:inline-block}
.cl-dot.active{background:var(--orange)}
.cl-dot.soon{background:var(--orange); opacity:.35}
.cta-form-panel{padding-left:40px; border-left:1px solid var(--line); display:flex; flex-direction:column; justify-content:center}
@media (max-width:900px){ .cta-form-panel{padding-left:0; border-left:none; padding-top:8px; border-top:1px solid var(--line)} }
.cta-form-panel h3{color:var(--plum); font-size:20px; margin-bottom:8px}
.cta-form-panel .sub{font-size:13.5px; color:var(--ink-soft); display:block; margin-bottom:24px}
.cta-form-panel input{width:100%; padding:13px 14px; border-radius:9px; border:1.5px solid var(--line); background:var(--paper-2); color:var(--ink); font-family:var(--sans); font-size:14px; outline:none; transition:border-color .15s ease, box-shadow .15s ease; margin-bottom:12px}
.cta-form-panel input::placeholder{color:var(--ink-soft)}
.cta-form-panel input:focus{border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-tint)}
.cta-form-note{font-size:12px; color:var(--ink-soft); margin-top:14px}

/* ================= FOOTER ================= */
footer.site{background:var(--plum); color:rgba(255,255,255,.55); padding-block:52px 30px; border-top:1px solid rgba(255,255,255,.08); position:relative; overflow:hidden}
footer.site::before{content:""; position:absolute; bottom:-160px; right:-100px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(234,86,29,.16), transparent 70%); pointer-events:none}
footer.site .container{position:relative; z-index:1}
.foot-grid{display:grid; grid-template-columns:1.1fr 2.3fr; gap:40px; margin-bottom:36px}
@media (max-width:700px){ .foot-grid{grid-template-columns:1fr} }
.foot-brand p{font-size:13.5px; margin-top:14px; max-width:34ch; line-height:1.6}
.foot-brand .brand svg, .foot-brand .brand img{height:32px}
.foot-legal-info{margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.08)}
.foot-legal-info p{font-size:12px; line-height:1.6; color:rgba(255,255,255,.4); margin-top:0; max-width:30ch}
.foot-legal-info a{font-size:12.5px; color:rgba(255,255,255,.55); text-decoration:none}
.foot-legal-info a:hover{color:#fff}
.foot-cols{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:24px}
@media (max-width:700px){ .foot-cols{grid-template-columns:1fr 1fr; gap:28px 24px} }
@media (max-width:500px){ .foot-cols{grid-template-columns:1fr 1fr; gap:24px 16px} }
.foot-col h4{color:#fff; font-size:12px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; font-family:var(--sans); font-weight:600}
.foot-col a{display:block; font-size:13.5px; text-decoration:none; color:rgba(255,255,255,.55); margin-bottom:10px}
.foot-col a:hover{color:#fff}
.foot-col a.current{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.08); padding-top:22px; font-size:12.5px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.foot-social{display:flex; gap:10px}
.foot-social a{width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.08); color:rgba(255,255,255,.7); transition:background .2s ease, color .2s ease}
.foot-social a:hover{background:var(--orange); color:#fff}
.foot-social svg{width:16px; height:16px}

/* ---------- footer sistem durumu ---------- */
.foot-lang{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-top:20px; border-top:1px solid rgba(255,255,255,.08)}
.foot-lang .fl-label{font-family:var(--mono); font-size:11px; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.05em}
.foot-lang a{font-size:12.5px; color:rgba(255,255,255,.55); text-decoration:none; padding:4px 10px; border-radius:99px; border:1px solid rgba(255,255,255,.14)}
.foot-lang a:hover{color:#fff; border-color:rgba(255,255,255,.3)}
.foot-lang a.current{color:#fff; background:rgba(234,86,29,.25); border-color:rgba(234,86,29,.4); font-weight:600}

/* ================= PROMO BAR + MEGA MENU + MOBILE NAV ================= */
.sticky-top-group{position:sticky; top:env(safe-area-inset-top,0px); z-index:90}
.promo-bar{background:var(--orange); color:#fff; text-align:center; padding:9px 46px 9px 16px; font-size:13px; position:relative}
.promo-bar b{font-weight:700}
.promo-bar a{text-decoration:underline; color:#fff; margin-left:6px; white-space:nowrap}
.promo-close{position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; color:#fff; opacity:.75; font-size:15px; cursor:pointer; padding:4px 8px; line-height:1}
.promo-close:hover{opacity:1}

.nav-item{position:relative}
.nav-item > .nav-trigger{font-family:var(--sans); font-size:14.5px; font-weight:500; color:var(--ink-soft); background:none; border:none; cursor:pointer; display:flex; align-items:center; gap:5px; padding:0}
.nav-item > .nav-trigger:hover, .nav.mega-open .nav-trigger{color:var(--plum)}
.nav-item > .nav-trigger.current{color:var(--orange-dark)}
.nav-trigger .car{width:9px; height:9px; transition:transform .15s ease}
.nav.mega-open .nav-trigger .car{transform:rotate(180deg)}
.mega-panel{position:absolute; top:calc(100% + 18px); left:50%; transform:translateX(-50%); width:calc(var(--max) - 40px); max-width:calc(100vw - 40px); background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:28px; display:none; grid-template-columns:1fr 1fr 1fr 1fr; gap:8px; z-index:95}
.nav.mega-open .mega-panel{display:grid}
.mega-col{padding-inline:12px}
.mega-col:not(:last-child){border-right:1px solid var(--line)}
.mega-col h5{font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:10px}
.mega-col a{display:flex; gap:10px; text-decoration:none; padding:8px 0; align-items:flex-start}
.mega-col a .mi{width:30px;height:30px;border-radius:8px;background:var(--orange-tint);color:var(--orange-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mega-col a .mi svg{width:16px;height:16px}
.mega-col a .mt{font-size:13px; font-weight:600; color:var(--ink); display:block}
.mega-col a .ms{font-size:11px; color:var(--ink-soft); display:block; margin-top:1px}
.mega-col a:hover .mt{color:var(--orange-dark)}
.mega-promo{background:linear-gradient(155deg, var(--plum) 0%, var(--plum-950) 100%); border-radius:12px; padding:20px; color:#fff; display:flex; flex-direction:column; height:100%; position:relative; overflow:hidden}
.mega-promo .mp-chart{position:absolute; right:18px; bottom:18px; display:flex; align-items:flex-end; gap:4px; height:36px; pointer-events:none}
.mega-promo .mp-chart i{display:block; width:6px; border-radius:2px 2px 0 0; background:linear-gradient(180deg, #FFB088, rgba(255,255,255,.3)); opacity:.55}
.mega-promo .mp-chart i:nth-child(1){height:12px}
.mega-promo .mp-chart i:nth-child(2){height:20px}
.mega-promo .mp-chart i:nth-child(3){height:28px}
.mega-promo .mp-chart i:nth-child(4){height:36px}
.mega-promo .mp-icon{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;margin-bottom:14px; position:relative; z-index:1}
.mega-promo .mp-icon svg{width:18px;height:18px;color:#FFB088}
.mega-promo h6{font-family:var(--display); font-size:15px; color:#fff; margin-bottom:6px; font-weight:700; position:relative; z-index:1}
.mega-promo p{font-size:12px; color:rgba(255,255,255,.65); line-height:1.5; margin-bottom:16px; flex-grow:1; position:relative; z-index:1}
.mega-promo .btn{width:100%; font-size:13px; padding:10px 14px; position:relative; z-index:1}
@media (max-width:900px){ .mega-panel{display:none !important} }

.hdr-actions{display:flex; align-items:center; gap:14px; flex-shrink:0}
.burger{display:none; background:none; border:none; cursor:pointer; padding:8px; flex-direction:column; gap:4px; flex-shrink:0}
.burger span{width:20px; height:2px; background:var(--ink); display:block}
@media (max-width:900px){ .burger{display:flex} }

.lang-switch{position:relative}
.lang-trigger{display:flex; align-items:center; gap:5px; font-family:var(--mono); font-size:12.5px; font-weight:700; letter-spacing:.03em; color:var(--ink); background:none; border:1px solid var(--line); border-radius:99px; padding:7px 11px; cursor:pointer; transition:border-color .15s ease}
.lang-trigger:hover{border-color:var(--orange)}
.lang-trigger svg{width:9px; height:9px; transition:transform .2s ease}
.lang-switch.open .lang-trigger svg{transform:rotate(180deg)}
.lang-menu{position:absolute; top:calc(100% + 8px); right:0; background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); padding:6px; min-width:150px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .15s ease, transform .15s ease, visibility .15s; z-index:200}
.lang-switch.open .lang-menu{opacity:1; visibility:visible; transform:translateY(0)}
.lang-menu a{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 11px; border-radius:7px; font-size:13.5px; color:var(--ink); text-decoration:none}
.lang-menu a:hover{background:var(--paper-2)}
.lang-menu a.current{color:var(--orange-dark); font-weight:700}
.lang-menu a .lc{font-family:var(--mono); font-size:10.5px; color:var(--ink-soft)}
.lang-menu a.current .lc{color:var(--orange-dark)}
@media (max-width:900px){ .lang-trigger .lc-full{display:none} }
.mobile-nav{position:fixed; inset:0; background:var(--paper); z-index:150; display:none; flex-direction:column; padding:20px; overflow-y:auto}
.mobile-nav.open{display:flex}
.mobile-nav .mn-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px}
.mobile-nav a{display:block; font-family:var(--display); font-size:21px; color:var(--plum); text-decoration:none; padding:14px 0; border-bottom:1px solid var(--line)}
.mobile-nav .mn-close{background:none;border:none;font-size:24px;color:var(--ink-soft);cursor:pointer}



@media (max-width:480px){
  .hero{padding-block:40px 48px}
  .page-hero{padding-block:44px 10px}
  .section{padding-block:56px}
  .cg-form, .cg-side{padding:28px}
}