/* ╔══════════════════════════════════════════════════════════════╗
   ║  Meziro · Mağaza OS — Stylesheet                              ║
   ║  Tema: koyu lacivert (#0A1628) + cyan-mint vurgu (#00E0B8)    ║
   ║  Tipografi: Inter (gövde) + Space Grotesk (başlık)            ║
   ║  Bu dosya modülerdir; her bölüm SECTION başlığıyla ayrılmıştır ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ═══ CSS DEĞİŞKENLERİ (tema) ═══ */
:root{
  /* Ana renkler */
  --ink-900: #0A1628;
  --ink-800: #0F2038;
  --ink-700: #163150;
  --ink-600: #1F3F66;
  --blue-700: #14528F;
  --blue-600: #185FA5;
  --blue-500: #2372C0;
  --blue-400: #378ADD;
  --blue-300: #5DA5E8;
  --mint: #00E0B8;
  --mint-dark: #00B89A;
  --amber: #F59E0B;
  --red: #EF4444;
  --green: #16A34A;

  /* Nötrler */
  --bg: #F4F6FB;
  --bg-2: #FFFFFF;
  --bg-3: #FBFCFE;
  --line: #E5EAF2;
  --line-2: #EFF2F7;
  --ink: #0E1726;
  --ink-soft: #4A5568;
  --ink-mute: #7B8597;
  --white: #FFFFFF;

  /* Tipografi */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-head: 'Space Grotesk', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Ölçüler */
  --r-sm: 8px;
  --r: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --shadow-sm: 0 2px 8px -2px rgba(10, 22, 40, 0.06), 0 1px 2px rgba(10, 22, 40, 0.04);
  --shadow:    0 10px 30px -10px rgba(10, 22, 40, 0.12), 0 2px 6px rgba(10, 22, 40, 0.04);
  --shadow-lg: 0 24px 60px -20px rgba(10, 22, 40, 0.20), 0 4px 12px rgba(10, 22, 40, 0.05);
  --shadow-mint: 0 16px 40px -10px rgba(0, 224, 184, 0.35);
  --shadow-blue: 0 16px 40px -10px rgba(24, 95, 165, 0.35);

  /* Layout */
  --container: 1200px;
  --container-narrow: 880px;
  --header-h: 72px;
}

/* ═══ RESET ═══ */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:15.5px;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-head); font-weight:600; letter-spacing:-0.02em; color:var(--ink-900); margin:0;}
h1{font-size:clamp(2.2rem, 4.4vw, 3.4rem); line-height:1.1;}
h2{font-size:clamp(1.7rem, 3vw, 2.4rem); line-height:1.18;}
h3{font-size:1.15rem; line-height:1.3;}
h4{font-size:1rem; line-height:1.3;}
p{margin:0;}
a{color:inherit; text-decoration:none; transition:color .2s;}
img,svg{display:block; max-width:100%;}
button{font-family:inherit; cursor:pointer; border:none; background:none; padding:0; color:inherit;}
input,select,textarea{font-family:inherit; font-size:inherit; color:inherit;}
ul{margin:0; padding:0; list-style:none;}
code{font-family:var(--font-mono); font-size:.85em; background:var(--line-2); padding:2px 7px; border-radius:5px; color:var(--ink-900);}

/* ═══ LAYOUT ═══ */
.container{max-width:var(--container); margin:0 auto; padding:0 24px;}
.container--narrow{max-width:var(--container-narrow);}
.section{padding:96px 0; position:relative;}
.section--alt{background:linear-gradient(180deg, var(--bg) 0%, #FFFFFF 100%);}
.section--cta{padding-top:64px;}

/* ═══ TIPOGRAFİ YARDIMCILARI ═══ */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono);
  font-size:12px; font-weight:500;
  color:var(--blue-600);
  background:rgba(24, 95, 165, 0.08);
  padding:7px 14px; border-radius:100px;
  letter-spacing:0.02em;
  text-transform:uppercase;
}
.eyebrow__dot{width:6px; height:6px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px rgba(0,224,184,.18); animation:pulse 2s infinite;}
.grad-text{
  background:linear-gradient(120deg, var(--blue-600) 0%, var(--blue-400) 35%, var(--mint) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(0,224,184,.4);}
  50%{box-shadow:0 0 0 6px rgba(0,224,184,0);}
}

/* ═══ BUTONLAR ═══ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px;
  font-size:14.5px; font-weight:600;
  border-radius:10px;
  border:1.5px solid transparent;
  cursor:pointer; user-select:none;
  transition:all .2s ease;
  white-space:nowrap;
  line-height:1;
}
.btn:active{transform:translateY(1px);}
.btn-sm{padding:9px 16px; font-size:13px;}
.btn-lg{padding:15px 28px; font-size:15.5px;}
.btn-block{display:flex; width:100%;}

.btn-primary{
  background:linear-gradient(135deg, var(--blue-600) 0%, var(--blue-500) 100%);
  color:var(--white);
  box-shadow:0 4px 14px -2px rgba(24, 95, 165, 0.4);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px -4px rgba(24, 95, 165, 0.5);
}

.btn-ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--line);
}
.btn-ghost:hover{
  border-color:var(--ink-900);
  background:var(--ink-900);
  color:var(--white);
  transform:translateY(-2px);
}

/* ═══ TOP BANNER ═══ */
.top-banner{
  background:linear-gradient(90deg, var(--ink-900) 0%, var(--ink-700) 50%, var(--ink-900) 100%);
  color:#E2EBF5;
  font-size:13.5px;
  position:relative;
  overflow:hidden;
}
.top-banner::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 20% 50%, rgba(0,224,184,.12) 0%, transparent 40%),
             radial-gradient(circle at 80% 50%, rgba(55,138,221,.15) 0%, transparent 40%);
  pointer-events:none;
}
.top-banner__inner{
  display:flex; align-items:center; gap:14px; justify-content:center;
  padding:10px 24px; position:relative;
}
.top-banner__pill{
  background:var(--mint); color:var(--ink-900);
  font-size:10.5px; font-weight:700; text-transform:uppercase;
  padding:3px 8px; border-radius:4px; letter-spacing:0.06em;
}
.top-banner__txt b{color:var(--white); font-weight:700;}
.top-banner__link{
  color:var(--mint); font-weight:600;
  text-decoration:underline; text-underline-offset:3px;
}
.top-banner__link:hover{color:var(--mint-dark);}
.top-banner__close{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  font-size:20px; color:#7A8AA0; padding:0 6px; line-height:1;
}
.top-banner__close:hover{color:#fff;}
.top-banner.is-hidden{display:none;}

/* ═══ HEADER ═══ */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(244, 246, 251, 0.85);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:all .25s;
}
.header.is-scrolled{
  background:rgba(255, 255, 255, 0.92);
  border-bottom-color:var(--line);
  box-shadow:0 4px 24px -10px rgba(10,22,40,.08);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--header-h); gap:24px;
}
.logo{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-head); font-weight:700;
}
.logo__mark{
  background:linear-gradient(135deg, var(--blue-600), var(--mint));
  color:#fff;
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; box-shadow:0 4px 12px -3px rgba(24,95,165,.4);
  flex-shrink:0;
}
.logo__mark svg{width:26px; height:26px; display:block;}
.logo__word{color:var(--ink-900); font-size:20px; letter-spacing:-0.02em;}
.logo__tag{
  font-size:10.5px; font-weight:600;
  color:var(--blue-600); background:rgba(24,95,165,.08);
  padding:2px 7px; border-radius:5px; margin-left:6px;
  letter-spacing:0.04em;
}
.nav__list{display:flex; gap:30px;}
.nav__list a{
  font-size:14px; font-weight:500;
  color:var(--ink-soft);
  position:relative;
}
.nav__list a:hover{color:var(--ink-900);}
.nav__list a::after{
  content:''; position:absolute; left:0; right:0; bottom:-22px;
  height:2px; background:var(--mint);
  transform:scaleX(0); transition:transform .2s;
  transform-origin:center;
}
.nav__list a:hover::after{transform:scaleX(.7);}
.header__actions{display:flex; align-items:center; gap:10px;}

.burger{display:none; flex-direction:column; gap:5px; padding:8px;}
.burger span{width:24px; height:2px; background:var(--ink-900); border-radius:2px; transition:all .2s;}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.is-open span:nth-child(2){opacity:0;}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ═══ HERO ═══ */
.hero{position:relative; padding:60px 0 90px; overflow:hidden;}
.hero__bg{position:absolute; inset:0; pointer-events:none; z-index:0;}
.grid-bg{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(10,22,40,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,22,40,.04) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%);
}
.blob{
  position:absolute; border-radius:50%; filter:blur(80px); opacity:.5;
  animation:float 12s ease-in-out infinite;
}
.blob-1{width:500px; height:500px; background:radial-gradient(circle, rgba(24,95,165,.35) 0%, transparent 70%); top:-200px; right:-100px;}
.blob-2{width:400px; height:400px; background:radial-gradient(circle, rgba(0,224,184,.3) 0%, transparent 70%); bottom:-100px; left:-100px; animation-delay:-6s;}
@keyframes float{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(30px, -20px) scale(1.05);}
}

.hero__inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px;
  align-items:center;
}
.hero__title{margin:18px 0 22px; line-height:1.08;}
.hero__lede{
  font-size:17px; color:var(--ink-soft);
  max-width:520px; margin-bottom:32px; line-height:1.6;
}
.hero__lede b{color:var(--ink-900); font-weight:600;}
.hero__ctas{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:32px;}
.hero__bullets{
  display:flex; flex-direction:column; gap:8px;
  margin-bottom:36px; font-size:14px; color:var(--ink-soft);
}
.hero__bullets li{display:flex; align-items:center; gap:10px;}
.check{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  background:rgba(0,224,184,.18); color:var(--mint-dark);
  font-size:11px; font-weight:800; flex:none;
}
.hero__trust{display:flex; align-items:center; gap:14px;}
.avatars{display:flex;}
.avatar{
  width:36px; height:36px; border-radius:50%;
  background:var(--c, var(--blue-600)); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:13px;
  border:2px solid var(--bg);
  margin-left:-8px;
}
.avatar:first-child{margin-left:0;}
.hero__trust-txt{font-size:13.5px; color:var(--ink-soft);}
.hero__trust-txt b{color:var(--ink-900); display:block;}
.stars{color:#F59E0B; font-size:12.5px; letter-spacing:1px;}
.stars span{color:var(--ink-mute); margin-left:4px; letter-spacing:0;}

/* HERO MOCKUP */
.hero__mockup{position:relative; perspective:1500px;}

/* ═══ HERO — gerçek demo görseli ═══ */
.hero__mockup{
  position:relative; perspective:1500px;
}
.hero-shot{
  background:#fff;
  border-radius:18px;
  box-shadow:0 24px 60px -20px rgba(10,22,40,.25), 0 4px 12px rgba(10,22,40,.08);
  border:1px solid var(--line);
  overflow:hidden;
  transform:rotate(-1deg) rotateY(4deg);
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.hero__mockup:hover .hero-shot{transform:rotate(0) rotateY(0);}
.hero-shot__bar{
  display:flex; align-items:center; gap:8px;
  padding:11px 16px;
  background:linear-gradient(180deg, #F8FAFD 0%, #EEF2F8 100%);
  border-bottom:1px solid var(--line);
}
.hero-shot__bar .dot{width:11px; height:11px; border-radius:50%;}
.hero-shot__bar .red{background:#FF5F57;}
.hero-shot__bar .yellow{background:#FFBD2E;}
.hero-shot__bar .green{background:#28C840;}
.hero-shot__url{
  font-family:var(--font-mono); font-size:11.5px;
  color:var(--ink-soft);
  background:#fff; padding:4px 12px; border-radius:100px;
  flex:1; text-align:center; max-width:280px; margin:0 auto;
  border:1px solid var(--line);
}
.hero-shot__live{
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:10.5px;
  color:var(--mint-dark); font-weight:600;
  text-transform:uppercase; letter-spacing:0.04em;
}
.hero-shot__live .pulse{
  width:6px; height:6px; border-radius:50%; background:var(--mint);
  animation:pulse 1.4s infinite;
}
.hero-shot__img{
  display:block; width:100%; height:auto;
  max-height:560px; object-fit:cover; object-position:top;
}

.mockup{
  background:#fff;
  border-radius:18px;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--line);
  overflow:hidden;
  transform:rotate(-1.5deg) rotateY(8deg);
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.hero__mockup:hover .mockup{transform:rotate(0) rotateY(0);}
.mockup__bar{
  display:flex; align-items:center; gap:8px;
  padding:11px 16px;
  background:linear-gradient(180deg, #F8FAFD 0%, #EEF2F8 100%);
  border-bottom:1px solid var(--line);
}
.mockup__bar .dot{width:11px; height:11px; border-radius:50%;}
.mockup__bar .red{background:#FF5F57;}
.mockup__bar .yellow{background:#FFBD2E;}
.mockup__bar .green{background:#28C840;}
.mockup__url{
  font-family:var(--font-mono); font-size:11.5px;
  color:var(--ink-soft);
  background:#fff; padding:4px 12px; border-radius:100px;
  flex:1; text-align:center; max-width:280px; margin:0 auto;
  border:1px solid var(--line);
}
.mockup__live{
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:10.5px;
  color:var(--mint-dark); font-weight:600;
  text-transform:uppercase; letter-spacing:0.04em;
}
.mockup__live .pulse{
  width:6px; height:6px; border-radius:50%; background:var(--mint);
  animation:pulse 1.4s infinite;
}
.mockup__body{display:grid; grid-template-columns:170px 1fr; min-height:380px;}
.mockup__side{
  background:#0A1628; color:#B6C2D6;
  padding:16px 12px; display:flex; flex-direction:column; gap:4px;
}
.ms-logo{
  font-family:var(--font-head); font-weight:700;
  color:#fff; font-size:14px;
  padding:4px 8px 14px;
  display:flex; gap:4px; align-items:baseline;
  border-bottom:1px solid rgba(255,255,255,.06); margin-bottom:8px;
}
.ms-logo span{color:var(--mint);}
.ms-menu li{
  font-size:12.5px; padding:8px 10px;
  border-radius:7px; cursor:pointer;
  transition:all .15s;
}
.ms-menu li:hover{background:rgba(255,255,255,.05); color:#fff;}
.ms-menu li.active{
  background:linear-gradient(90deg, rgba(0,224,184,.18), transparent);
  color:var(--mint);
  border-left:2px solid var(--mint); padding-left:8px;
}
.ms-user{
  margin-top:auto; display:flex; align-items:center; gap:8px;
  padding:8px; border-top:1px solid rgba(255,255,255,.06); padding-top:12px;
}
.ms-avatar{
  width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg, var(--blue-600), var(--mint));
  color:#fff; font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.ms-name{color:#fff; font-size:12px; font-weight:600;}
.ms-role{color:#7A8AA0; font-size:10.5px;}

.mockup__main{padding:18px 20px; background:linear-gradient(180deg, #FBFCFE 0%, #F4F6FB 100%);}
.mm-head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px;}
.mm-head h3{font-size:15px; margin-bottom:1px;}
.mm-head p{font-size:11.5px; color:var(--ink-mute);}
.mm-pills{display:flex; gap:4px; background:#fff; border:1px solid var(--line); border-radius:7px; padding:2px;}
.pill{
  font-size:10.5px; padding:4px 8px; border-radius:5px;
  color:var(--ink-soft); font-weight:500; cursor:pointer;
}
.pill--active{background:var(--ink-900); color:#fff;}
.mm-kpis{
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px;
}
.kpi{
  background:#fff; border:1px solid var(--line);
  border-radius:8px; padding:9px 10px;
}
.kpi__lbl{font-size:10.5px; color:var(--ink-mute); display:block; margin-bottom:3px;}
.kpi__val{font-size:14.5px; font-weight:700; color:var(--ink-900); font-family:var(--font-head); display:block;}
.kpi__delta{font-size:10px; font-weight:600; margin-top:2px; display:inline-block;}
.kpi__delta.up{color:var(--green);}
.kpi__delta.down{color:var(--amber);}
.mm-row{display:grid; grid-template-columns:1.4fr .8fr; gap:10px;}
.mm-chart, .mm-feed{
  background:#fff; border:1px solid var(--line); border-radius:8px; padding:10px 11px;
}
.mm-chart__head{display:flex; justify-content:space-between; align-items:center; font-size:10.5px; color:var(--ink-soft); margin-bottom:6px;}
.mm-chart__head .legend{display:flex; gap:8px; font-size:9.5px;}
.mm-chart__head .legend i{width:8px; height:8px; border-radius:2px; display:inline-block; margin-right:3px; vertical-align:middle;}
.chart{width:100%; height:80px;}
.mm-feed__h{font-size:10.5px; color:var(--ink-soft); margin-bottom:6px; font-weight:600;}
.mm-feed ul li{
  display:flex; align-items:center; gap:6px;
  font-size:10.5px; padding:4px 0;
  border-top:1px dashed var(--line-2);
}
.mm-feed ul li:first-child{border-top:none;}
.mm-feed ul li i{color:var(--ink-mute); font-size:9.5px; font-style:normal; margin-left:auto;}
.dot-blue, .dot-amber, .dot-green, .dot-red{width:6px; height:6px; border-radius:50%; flex:none;}
.dot-blue{background:var(--blue-400);}
.dot-amber{background:var(--amber);}
.dot-green{background:var(--green);}
.dot-red{background:var(--red);}

/* Floating toasts */
.float-toast{
  position:absolute; z-index:5;
  background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:10px 12px;
  display:flex; gap:10px; align-items:center;
  box-shadow:var(--shadow);
  animation:floatToast 4s ease-in-out infinite;
}
@keyframes floatToast{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}
.ft-icon{width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; flex:none;}
.ft-title{font-size:12px; font-weight:600; color:var(--ink-900);}
.ft-sub{font-size:10.5px; color:var(--ink-mute);}
.f-tg{bottom:-22px; left:-32px; transform:rotate(-3deg);}
.f-tg{animation-delay:-1.5s;}
.f-wa{top:60px; right:-40px; transform:rotate(4deg); animation-delay:-3s;}

/* ═══ SECTION HEAD ═══ */
.section-head{max-width:680px; margin:0 auto 56px; text-align:center;}
.section-head .eyebrow{margin-bottom:14px;}
.section-head .section-title{margin-bottom:14px;}
.section-head p{color:var(--ink-soft); font-size:16px; max-width:600px; margin:0 auto;}

/* ═══ SEKTÖREL ÇÖZÜMLER ═══ */
/* ═══ SEKTÖREL ALTYAPI — Versiyon 1 (sadeleştirilmiş) ═══ */
.sektor-tabs{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.sektor-tabs__nav{
  display:flex; flex-wrap:wrap;
  background:linear-gradient(180deg, #FAFBFD 0%, #F4F6FB 100%);
  border-bottom:1px solid var(--line);
  padding:6px;
}
.st-tab{
  flex:1; min-width:120px;
  padding:14px 16px; font-size:14px; font-weight:600;
  color:var(--ink-soft);
  border-radius:10px;
  transition:all .2s;
  position:relative;
}
.st-tab:hover{color:var(--ink-900); background:rgba(255,255,255,.5);}
.st-tab.is-active{
  background:#fff; color:var(--ink-900);
  box-shadow:0 4px 14px -4px rgba(10,22,40,.1), 0 1px 0 #fff inset;
}
.st-panel{display:none; padding:40px 36px;}
.st-panel.is-active{display:block; animation:fadeIn .4s ease;}
@keyframes fadeIn{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:translateY(0);}
}
.st-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:24px; margin-bottom:24px;
}
.st-feat h4{
  font-size:16px; color:var(--ink-900);
  margin-bottom:8px; padding-bottom:8px;
  border-bottom:2px solid var(--mint);
  display:inline-block;
}
.st-feat p{font-size:14px; color:var(--ink-soft);}
.st-cta{
  text-align:center; padding-top:20px;
  border-top:1px dashed var(--line);
}
.st-soon{
  text-align:center; padding:24px 12px 32px;
}
.st-soon__badge{
  display:inline-block; font-size:13px; font-weight:600;
  padding:6px 14px; border-radius:999px;
  background:rgba(24,95,165,.10); color:var(--blue-600);
  border:1px solid rgba(24,95,165,.18);
  margin-bottom:16px; letter-spacing:.02em;
}
.st-soon__note{
  font-size:15px; color:var(--ink-soft); max-width:520px;
  margin:0 auto; line-height:1.6;
}
@media (max-width:600px){
  .st-panel{padding:32px 20px;}
  .st-tab{min-width:100px; padding:10px 8px; font-size:12px;}
}

/* ═══ FEATURES GRID ═══ */
.features-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:20px;
}
.feature{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:28px 24px;
  position:relative;
  transition:all .3s cubic-bezier(.16,1,.3,1);
  overflow:hidden;
}
.feature::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, transparent 0%, rgba(24,95,165,.04) 100%);
  opacity:0; transition:opacity .3s;
}
.feature:hover{
  transform:translateY(-6px);
  border-color:rgba(24,95,165,.2);
  box-shadow:var(--shadow);
}
.feature:hover::before{opacity:1;}
.feature__num{
  font-family:var(--font-mono); font-size:11px;
  color:var(--ink-mute); letter-spacing:0.04em;
  margin-bottom:14px; position:relative;
}
.feature__icon{
  width:48px; height:48px; border-radius:12px;
  background:color-mix(in srgb, var(--c, var(--blue-600)) 12%, white);
  color:var(--c, var(--blue-600));
  display:flex; align-items:center; justify-content:center;
  font-size:24px; margin-bottom:14px;
  position:relative;
}
.feature h3{font-size:17px; margin-bottom:8px; position:relative;}
.feature p{font-size:14px; color:var(--ink-soft); position:relative;}

/* ═══ SCREENS CAROUSEL ═══ */
.screens{position:relative; margin:0 -24px; padding:0 24px;}
.scr-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%;
  background:#fff; border:1px solid var(--line);
  color:var(--ink-900); font-size:22px;
  display:flex; align-items:center; justify-content:center;
  z-index:3; box-shadow:var(--shadow-sm);
  transition:all .2s;
}
.scr-nav:hover{background:var(--ink-900); color:#fff; transform:translateY(-50%) scale(1.06);}
.scr-prev{left:-12px;}
.scr-next{right:-12px;}
.screens__viewport{overflow:hidden; padding:16px 4px;}
.screens__track{display:flex; gap:24px; transition:transform .5s cubic-bezier(.16,1,.3,1);}
.scr-card{
  flex:none; width:380px;
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:all .3s;
}
.scr-card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.scr-card__shot{
  height:230px;
  background-color:#0A1628;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.scr-card__shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  display:block;
  transition:transform .4s ease;
}
.scr-card:hover .scr-card__shot img{
  transform:scale(1.04);
}
.scr-card figcaption{
  padding:16px 18px;
  border-top:1px solid var(--line);
  background:#fff;
}
.scr-card figcaption b{display:block; font-size:14.5px; color:var(--ink-900); margin-bottom:3px;}
.scr-card figcaption span{font-size:13px; color:var(--ink-soft); display:block;}

/* Pseudo screen renders — artık kullanılmıyor (gerçek img kullanılıyor) */
.screens__dots{display:flex; gap:6px; justify-content:center; margin-top:24px;}
.screens__dots button{
  width:8px; height:8px; border-radius:50%;
  background:var(--line);
  transition:all .2s;
}
.screens__dots button.is-active{background:var(--blue-600); width:24px; border-radius:4px;}

/* ═══ DEMO FRAME ═══ */
.demo-frame{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.demo-frame__head{
  padding:36px 40px;
  display:grid; grid-template-columns:1.4fr 1fr; gap:40px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(135deg, #FBFCFE 0%, #F0F4FA 100%);
}
.demo-frame__head .section-title{font-size:26px; margin-bottom:10px;}
.demo-frame__head p{font-size:14.5px; color:var(--ink-soft);}
.cred-card{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:18px 20px;
  box-shadow:var(--shadow-sm);
}
.cred-card__lbl{
  font-family:var(--font-mono); font-size:11px;
  color:var(--mint-dark); text-transform:uppercase;
  letter-spacing:0.06em; font-weight:600;
  margin-bottom:10px; display:block;
}
.cred-row{
  display:flex; align-items:center; gap:10px;
  padding:8px 0;
  border-top:1px dashed var(--line);
  font-size:13.5px;
}
.cred-row:first-of-type{border-top:none;}
.cred-row span{color:var(--ink-soft); width:80px; flex:none;}
.cred-row code{flex:1;}
.cred-copy{
  font-size:11px; color:var(--blue-600); font-weight:600;
  padding:3px 8px; border-radius:5px;
  background:rgba(24,95,165,.08);
  transition:all .2s;
}
.cred-copy:hover{background:rgba(24,95,165,.16);}
.cred-copy.is-copied{background:rgba(22,163,74,.16); color:var(--green);}

.demo-frame__bar{
  display:flex; align-items:center; gap:12px;
  padding:10px 16px;
  background:linear-gradient(180deg, #F8FAFD 0%, #EEF2F8 100%);
  border-bottom:1px solid var(--line);
}
.demo-frame__bar .dots{display:flex; gap:6px;}
.demo-frame__bar .dots span{width:10px; height:10px; border-radius:50%; background:var(--line);}
.demo-frame__bar .dots span:nth-child(1){background:#FF5F57;}
.demo-frame__bar .dots span:nth-child(2){background:#FFBD2E;}
.demo-frame__bar .dots span:nth-child(3){background:#28C840;}
.demo-frame__bar .url{
  flex:1; text-align:center; font-family:var(--font-mono);
  font-size:12.5px; color:var(--ink-soft);
  background:#fff; padding:5px 14px; border-radius:100px;
  border:1px solid var(--line); max-width:480px; margin:0 auto;
}
.open-new{
  display:flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--blue-600); font-weight:600;
  padding:5px 10px; border-radius:6px;
  transition:all .2s;
}
.open-new:hover{background:rgba(24,95,165,.08);}

.demo-frame__body{
  position:relative;
  height:560px; background:#F4F6FB;
}
.demo-frame__body iframe{
  width:100%; height:100%; border:0; display:block;
}
.demo-frame__veil{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(244,246,251,.95) 100%);
  backdrop-filter:blur(6px);
}
.veil-card{
  text-align:center; max-width:380px; padding:30px;
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md); box-shadow:var(--shadow);
}
.veil-spinner{
  width:36px; height:36px; border-radius:50%;
  border:3px solid var(--line);
  border-top-color:var(--blue-600);
  margin:0 auto 16px;
  animation:spin 1s linear infinite;
}
.veil-card h3{font-size:18px; margin-bottom:8px;}
.veil-card p{font-size:13.5px; color:var(--ink-soft); margin-bottom:20px;}
.veil-actions{display:flex; gap:8px; justify-content:center;}

.demo-frame__foot{
  display:flex; justify-content:space-around;
  padding:18px 20px; background:#0A1628; color:#B6C2D6;
  font-size:13px; flex-wrap:wrap; gap:12px;
}
.demo-foot-item{display:flex; align-items:center; gap:8px;}
.demo-foot-item span{font-family:var(--font-mono); font-size:11.5px; color:#94A8C2;}
.demo-foot-item b{color:var(--mint); font-family:var(--font-head); font-size:14px;}

/* ═══ EKLENTİ MAĞAZASI ═══ */
.ext-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:16px;
}
.ext-card{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md); padding:20px 22px;
  display:flex; gap:14px; align-items:flex-start;
  transition:all .25s; cursor:pointer; position:relative;
}
.ext-card:hover{
  transform:translateY(-3px);
  border-color:rgba(0,224,184,.4);
  box-shadow:var(--shadow-mint);
}
.ext-card__icon{
  width:42px; height:42px; border-radius:10px;
  background:linear-gradient(135deg, var(--c1, #185FA5), var(--c2, #00E0B8));
  color:#fff; font-size:20px;
  display:flex; align-items:center; justify-content:center; flex:none;
  box-shadow:0 4px 10px -2px var(--c1, rgba(24,95,165,.4));
}
.ext-card__body{flex:1; min-width:0;}
.ext-card__name{font-size:14.5px; font-weight:600; color:var(--ink-900); margin-bottom:2px;}
.ext-card__desc{font-size:12.5px; color:var(--ink-soft); line-height:1.45;}
.ext-card__price{
  font-family:var(--font-mono); font-size:11px;
  color:var(--mint-dark); font-weight:600;
  margin-top:6px; display:inline-block;
}
.ext-card__price.free{color:var(--blue-600);}
.ext-card__price.soon{color:var(--blue-600); background:rgba(24,95,165,.08);}
.ext-card.is-soon{cursor:default; opacity:.9;}
.ext-card.is-soon:hover{transform:none; box-shadow:none; border-color:var(--line);}
.ext-card__check{
  position:absolute; top:14px; right:14px;
  width:20px; height:20px; border-radius:50%;
  border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; color:transparent;
  transition:all .2s;
}
.ext-card.is-on .ext-card__check{
  background:var(--mint); border-color:var(--mint); color:#fff;
}
.ext-card.is-on{
  border-color:rgba(0,224,184,.3);
  background:linear-gradient(180deg, rgba(0,224,184,.04) 0%, #fff 40%);
}

.ext-cta{
  margin-top:40px; text-align:center; padding:30px;
  background:linear-gradient(135deg, rgba(24,95,165,.04) 0%, rgba(0,224,184,.06) 100%);
  border:1px dashed var(--line);
  border-radius:var(--r-md);
}
.ext-cta p{font-size:15px; color:var(--ink-soft); margin-bottom:14px;}
.ext-cta b{color:var(--ink-900);}

/* ═══ STEPS ═══ */
.steps{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
  position:relative;
}
.step{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md); padding:32px 28px;
  position:relative;
  transition:all .3s;
}
.step:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
  border-color:rgba(24,95,165,.15);
}
.step__num{
  font-family:var(--font-mono); font-size:13px;
  color:var(--mint-dark); font-weight:700;
  margin-bottom:16px; display:inline-block;
  background:rgba(0,224,184,.1);
  padding:4px 10px; border-radius:6px;
}
.step h3{font-size:18px; margin-bottom:8px;}
.step p{font-size:14px; color:var(--ink-soft); margin-bottom:14px;}
.step__eta{
  font-family:var(--font-mono); font-size:11.5px;
  color:var(--ink-mute);
  border-top:1px dashed var(--line);
  padding-top:12px; display:block;
}

/* ═══ FİYATLANDIRMA ═══ */
/* Kurulum paketi notu */
.price-setup{
  max-width:880px;
  margin:24px auto 0;
  padding:0 4px;
}
.price-setup__card{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:16px 20px;
  background:linear-gradient(135deg, #F0F7FF 0%, #FFFFFF 100%);
  border:1px solid #DCE5F2;
  border-radius:12px;
  text-align:left;
}
.price-setup__icon{
  font-size:24px;
  flex-shrink:0;
  line-height:1.2;
}
.price-setup__body{flex:1; min-width:0;}
.price-setup__title{
  font-size:15px;
  color:var(--ink-900);
  margin-bottom:3px;
}
.price-setup__title strong{
  color:var(--blue-700);
  font-weight:700;
}
.price-setup__title s{
  color:#999;
  font-weight:500;
  font-size:14px;
  margin-right:6px;
  text-decoration:line-through;
}
.price-setup__title small{
  font-weight:400;
  color:var(--ink-soft);
  font-size:13px;
  margin-left:4px;
}
.price-setup__desc{
  font-size:13px;
  color:var(--ink-soft);
  line-height:1.5;
}
.price-setup__note{
  font-size:12.5px;
  color:var(--ink-soft);
  line-height:1.5;
  margin-top:10px;
  padding:10px 12px;
  background:rgba(24,95,165,.06);
  border-left:3px solid var(--blue-600);
  border-radius:4px;
}
.price-setup__note b{color:var(--ink-900);}
.price-setup__opts{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:12px;
}
.price-setup__opt{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  background:#fff;
  border:1px solid #DCE5F2;
  border-radius:8px;
  font-size:13px;
  line-height:1.5;
}
.price-setup__opt-ic{
  font-size:18px;
  flex-shrink:0;
  line-height:1.2;
  margin-top:1px;
}
.price-setup__opt-t{
  color:var(--ink-900);
  font-weight:600;
  margin-bottom:2px;
}
.price-setup__opt-t strong{color:var(--blue-700);}
.price-setup__opt-d{
  color:var(--ink-soft);
  font-size:12.5px;
}
.price-setup__opt-d strong{color:var(--ink-900); font-weight:600;}
@media(max-width:600px){
  .price-setup__card{flex-direction:column; gap:8px;}
}

.billing-toggle{
  display:flex; align-items:center; gap:12px;
  justify-content:center; margin-top:32px;
  font-size:14px; color:var(--ink-soft);
}
.billing-toggle span{display:flex; align-items:center; gap:6px;}
.billing-toggle span small{color:var(--mint-dark); font-size:11.5px; font-weight:600;}
.billing-toggle span.is-active{color:var(--ink-900); font-weight:600;}
.switch{
  width:46px; height:24px; border-radius:12px;
  background:var(--line); position:relative;
  transition:background .2s;
}
.switch span{
  position:absolute; top:3px; left:3px;
  width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.15);
  transition:transform .2s;
}
.switch.is-on{background:var(--mint);}
.switch.is-on span{transform:translateX(22px);}

.price-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
}
.price-card{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); padding:32px 28px;
  position:relative; transition:all .3s;
}
.price-card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.price-card.is-popular{
  border:2px solid var(--blue-600);
  background:linear-gradient(180deg, rgba(24,95,165,.04) 0%, #fff 30%);
  transform:scale(1.04);
  box-shadow:var(--shadow-blue);
}
.price-card.is-popular:hover{transform:scale(1.04) translateY(-4px);}
.price-card__badge{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg, var(--blue-600), var(--mint));
  color:#fff; font-size:11px; font-weight:700;
  padding:5px 14px; border-radius:100px;
  letter-spacing:0.04em; text-transform:uppercase;
  box-shadow:0 4px 12px -2px rgba(24,95,165,.4);
}
.price-card__name{
  font-family:var(--font-head); font-size:18px;
  color:var(--ink-900); margin-bottom:8px; font-weight:600;
}
.price-card__price{
  display:flex; align-items:baseline; gap:4px;
  margin-bottom:6px;
}
.price-card__price .cur{font-size:20px; color:var(--ink-soft); font-weight:600;}
.price-card__price .val{
  font-family:var(--font-head); font-size:42px; font-weight:700;
  color:var(--ink-900); letter-spacing:-0.03em;
}
.price-card__price .per{font-size:14px; color:var(--ink-mute);}
.price-card__sub{font-size:13px; color:var(--ink-soft); margin-bottom:22px; padding-bottom:18px; border-bottom:1px dashed var(--line);}
.price-card__list{display:flex; flex-direction:column; gap:9px; margin-bottom:26px; font-size:14px;}
.price-card__list li{color:var(--ink-soft);}
.price-card__list li:first-child, .price-card__list li:nth-child(2), .price-card__list li:nth-child(3), .price-card__list li:nth-child(4), .price-card__list li:nth-child(5){color:var(--ink);}

/* ═══ TESTIMONIALS ═══ */
.testi-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
.testi{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md); padding:28px 26px;
  transition:all .3s;
}
.testi:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.testi__stars{color:#F59E0B; letter-spacing:2px; font-size:15px; margin-bottom:14px;}
.testi p{font-size:14.5px; color:var(--ink); margin-bottom:16px; line-height:1.6;}
.testi p b{color:var(--ink-900); font-weight:600;}
.testi footer{font-size:13px; color:var(--ink-soft); border-top:1px dashed var(--line); padding-top:14px;}
.testi footer b{color:var(--ink-900);}
.testi--ref{background:linear-gradient(135deg, #F0F7FF 0%, #FFFFFF 100%); border-color:#BFD3EE;}
.testi__ref-badge{display:inline-block; padding:3px 10px; background:var(--blue-600); color:#fff; font-size:11px; font-weight:700; border-radius:20px; letter-spacing:.5px; margin-bottom:10px;}
.testi__ref-name{font-size:18px; font-weight:700; color:var(--ink-900); margin-bottom:4px;}
.testi__ref-meta{font-size:13px; color:var(--ink-soft); margin-bottom:14px;}
.testi__ref-note{font-size:14px; color:var(--ink); line-height:1.6; margin-bottom:16px;}
.testi__ref-link{font-size:13px; color:var(--blue-600); font-weight:600;}
.testi__ref-link:hover{text-decoration:underline;}
.testi--pending{display:flex; flex-direction:column; align-items:center; text-align:center; padding:36px 28px; background:#FAFBFD; border-style:dashed;}
.testi__pending-icon{font-size:36px; margin-bottom:12px; opacity:.6;}
.testi__pending-title{font-size:16px; font-weight:600; color:var(--ink-900); margin-bottom:8px;}
.testi--pending p{font-size:13.5px; color:var(--ink-soft); line-height:1.6;}
.testi--pending p a{color:var(--blue-600); font-weight:600;}

/* ═══ ACCORDION ═══ */
.acc{display:flex; flex-direction:column; gap:8px;}
.acc__item{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
  transition:all .25s;
}
.acc__item.is-open{border-color:rgba(24,95,165,.2); box-shadow:var(--shadow-sm);}
.acc__q{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding:18px 22px; text-align:left;
  font-size:15px; font-weight:600; color:var(--ink-900);
}
.acc__ic{
  font-size:20px; color:var(--blue-600);
  transition:transform .25s; flex:none; margin-left:12px;
  font-weight:300;
}
.acc__item.is-open .acc__ic{transform:rotate(45deg); color:var(--mint-dark);}
.acc__a{
  max-height:0; overflow:hidden;
  transition:max-height .35s ease;
}
.acc__item.is-open .acc__a{max-height:300px;}
.acc__a p{padding:0 22px 20px; color:var(--ink-soft); font-size:14px;}

/* ═══ CTA / İLETİŞİM ═══ */
.section--cta{
  background:linear-gradient(135deg, #0A1628 0%, #163150 50%, #14528F 100%);
  color:#fff; position:relative; overflow:hidden;
}
.section--cta::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(0,224,184,.18) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(55,138,221,.2) 0%, transparent 40%);
  pointer-events:none;
}
.section--cta .container{position:relative; z-index:1;}
.cta-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-xl);
  padding:40px; display:grid; grid-template-columns:1fr 1fr; gap:48px;
  backdrop-filter:blur(20px);
}
.cta-card__side h2{color:#fff;}
.cta-card__side p{color:#B6C2D6; font-size:15px; margin-bottom:24px;}
.cta-card__side .eyebrow{background:rgba(0,224,184,.15); color:var(--mint);}
.cta-card__side .eyebrow__dot{background:var(--mint);}
.wa-link{color:var(--mint); border-bottom:1px dashed var(--mint);}
.wa-link:hover{color:#fff; border-color:#fff;}
.cta-card__list{display:flex; flex-direction:column; gap:8px; font-size:14px; color:#94A8C2;}
.cta-card__list li::before{content:'✓'; color:var(--mint); margin-right:8px; font-weight:bold;}

.cta-form{display:flex; flex-direction:column; gap:14px; background:#fff; padding:32px; border-radius:var(--r-md);}
.cta-form label{
  display:flex; flex-direction:column; gap:6px;
  font-size:12px; font-weight:600; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:0.04em;
}
.cta-form input, .cta-form select, .cta-form textarea{
  padding:11px 14px; border:1.5px solid var(--line);
  border-radius:9px; font-size:14px;
  background:#fff; color:var(--ink);
  transition:all .2s;
  font-family:inherit;
  text-transform:none; letter-spacing:normal; font-weight:400;
}
.cta-form textarea{resize:vertical; min-height:60px;}
.cta-form input:focus, .cta-form select:focus, .cta-form textarea:focus{
  outline:none; border-color:var(--blue-500);
  box-shadow:0 0 0 3px rgba(24,95,165,.12);
}
.cta-form__row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.check-line{
  flex-direction:row !important; align-items:center; gap:8px !important;
  font-size:12px !important; font-weight:400 !important; text-transform:none !important;
  color:var(--ink-soft);
}
.check-line input{width:16px; height:16px; flex:none;}
.check-line a{color:var(--blue-600); text-decoration:underline;}
.cta-form__success{
  background:rgba(22,163,74,.1); border:1px solid rgba(22,163,74,.3);
  color:var(--green); padding:12px 16px; border-radius:9px;
  font-size:14px; text-align:center; font-weight:500;
}

/* ═══ FOOTER ═══ */
.footer{background:#0A1628; color:#94A8C2; padding:60px 0 0;}
.footer__top{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:40px;
  padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.06);
}
.footer__brand p{font-size:14px; line-height:1.6; margin:18px 0 20px; color:#94A8C2;}
.footer__brand .logo{margin-bottom:4px;}
.footer__brand .logo__word{color:#fff;}
.footer__socials{display:flex; gap:10px;}
.footer__socials a{
  width:36px; height:36px; border-radius:9px;
  background:rgba(255,255,255,.05); color:#94A8C2;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s;
}
.footer__socials a:hover{background:var(--mint); color:#0A1628; transform:translateY(-2px);}
.footer__col h4{
  color:#fff; font-size:14px; margin-bottom:14px;
  font-family:var(--font-head); font-weight:600;
}
.footer__col a{
  display:block; font-size:13.5px;
  color:#94A8C2; padding:5px 0;
  transition:color .2s;
}
.footer__col a:hover{color:var(--mint);}
.footer__bot{
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 0; font-size:13px; color:#5B6B85;
  flex-wrap:wrap; gap:12px;
}

/* ═══ WHATSAPP FAB ═══ */
.wa-fab{
  position:fixed; bottom:24px; right:24px;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  z-index:60; box-shadow:0 8px 24px -4px rgba(37,211,102,.5);
  transition:all .3s;
}
.wa-fab:hover{transform:scale(1.08); box-shadow:0 12px 32px -4px rgba(37,211,102,.6);}
.wa-fab__pulse{
  position:absolute; inset:0; border-radius:50%;
  background:#25D366;
  animation:waPulse 2s ease-out infinite;
  z-index:-1;
}
@keyframes waPulse{
  0%{transform:scale(1); opacity:.5;}
  100%{transform:scale(1.6); opacity:0;}
}
.wa-fab__tip{
  position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%);
  background:#0A1628; color:#fff;
  padding:7px 14px; border-radius:8px;
  font-size:13px; font-weight:500; white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s;
  box-shadow:0 6px 16px -4px rgba(0,0,0,.2);
}
.wa-fab__tip::after{
  content:''; position:absolute; left:100%; top:50%;
  transform:translateY(-50%);
  border:6px solid transparent; border-left-color:#0A1628;
}
.wa-fab:hover .wa-fab__tip{opacity:1; transform:translateY(-50%) translateX(-4px);}

/* ═══ CHAT WIDGET ═══ */
.chat{
  position:fixed; bottom:24px; left:24px;
  z-index:60;
}
.chat__toggle{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--line);
  border-radius:100px;
  padding:8px 18px 8px 8px;
  font-size:14px; font-weight:600; color:var(--ink-900);
  box-shadow:var(--shadow);
  transition:all .25s;
}
.chat__toggle:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg);}
.chat__toggle-icon{
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg, var(--blue-600), var(--mint));
  color:#fff; display:flex; align-items:center; justify-content:center;
  position:relative;
}
.chat__toggle-dot{
  position:absolute; top:0; right:0;
  width:9px; height:9px; border-radius:50%;
  background:var(--red); border:2px solid #fff;
  animation:pulseRed 1.5s infinite;
}
@keyframes pulseRed{
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.5);}
  50%{box-shadow:0 0 0 4px rgba(239,68,68,0);}
}
.chat__panel{
  position:absolute; bottom:60px; left:0;
  width:360px; height:520px; max-height:80vh;
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column;
  overflow:hidden;
  animation:slideUp .3s ease;
}
.chat__panel[hidden]{display:none !important;}
@keyframes slideUp{
  from{opacity:0; transform:translateY(20px);}
  to{opacity:1; transform:translateY(0);}
}
.chat__head{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px;
  background:linear-gradient(135deg, var(--ink-900), var(--ink-700));
  color:#fff;
}
.chat__head-l{display:flex; align-items:center; gap:10px;}
.chat__avatar{
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg, var(--blue-600), var(--mint));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-family:var(--font-head);
}
.chat__name{font-size:14px; font-weight:600;}
.chat__status{font-size:11px; color:#94A8C2; display:flex; align-items:center; gap:5px;}
.chat__status .online{
  width:7px; height:7px; border-radius:50%;
  background:var(--mint); display:inline-block;
  box-shadow:0 0 0 3px rgba(0,224,184,.25);
}
.chat__head-r{display:flex; align-items:center; gap:8px;}
.chat__wa{
  width:32px; height:32px; border-radius:50%;
  background:rgba(37,211,102,.18); color:#25D366;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s;
}
.chat__wa:hover{background:#25D366; color:#fff;}
.chat__close{
  width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.08); color:#fff;
  font-size:20px; line-height:0; display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.chat__close:hover{background:rgba(255,255,255,.18);}

.chat__body{
  flex:1; overflow-y:auto; padding:16px;
  background:#F4F6FB;
}
.chat-msg{display:flex; gap:8px; margin-bottom:14px; align-items:flex-end;}
.chat-msg__avatar{
  width:26px; height:26px; border-radius:50%;
  background:linear-gradient(135deg, var(--blue-600), var(--mint));
  color:#fff; font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex:none; font-family:var(--font-head);
}
.chat-msg--user{flex-direction:row-reverse;}
.chat-msg--user .chat-msg__avatar{background:linear-gradient(135deg, var(--ink-700), var(--ink-900));}
.chat-msg__bubble{
  max-width:75%;
  padding:10px 14px; border-radius:14px;
  background:#fff; color:var(--ink);
  font-size:13.5px; line-height:1.45;
  border:1px solid var(--line);
  box-shadow:0 2px 6px -2px rgba(10,22,40,.05);
}
.chat-msg--user .chat-msg__bubble{
  background:linear-gradient(135deg, var(--blue-600), var(--blue-500));
  color:#fff; border:none;
}

.chat-quick{
  display:flex; flex-wrap:wrap; gap:6px;
  margin:8px 0 14px 34px;
}
.chat-quick button{
  background:#fff; border:1px solid var(--line);
  padding:7px 12px; border-radius:100px;
  font-size:12px; color:var(--ink-soft);
  transition:all .2s;
}
.chat-quick button:hover{
  background:var(--ink-900); color:#fff; border-color:var(--ink-900);
}

.chat__input{
  display:flex; gap:8px;
  padding:12px; background:#fff;
  border-top:1px solid var(--line);
}
.chat__input input{
  flex:1; padding:10px 14px;
  border:1px solid var(--line); border-radius:100px;
  font-size:13.5px; background:#F4F6FB;
  transition:all .2s;
}
.chat__input input:focus{outline:none; border-color:var(--blue-500); background:#fff;}
.chat__input button{
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg, var(--blue-600), var(--mint));
  color:#fff; display:flex; align-items:center; justify-content:center;
  transition:all .2s;
}
.chat__input button:hover{transform:scale(1.05);}

/* ═══ SCROLL REVEAL ═══ */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s, transform .7s cubic-bezier(.16,1,.3,1);}
.reveal.is-in{opacity:1; transform:translateY(0);}

/* ═══ RESPONSIVE ═══ */
@media (max-width:1024px){
  .hero__inner{grid-template-columns:1fr; gap:40px;}
  .hero__mockup{max-width:540px; margin:0 auto;}
  .features-grid{grid-template-columns:repeat(2, 1fr);}
  .price-grid{grid-template-columns:1fr; gap:24px;}
  .price-card.is-popular{transform:none;}
  .price-card.is-popular:hover{transform:translateY(-4px);}
  .testi-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .footer__top{grid-template-columns:1fr 1fr; gap:32px;}
  .demo-frame__head{grid-template-columns:1fr; gap:24px;}
  .cta-card{grid-template-columns:1fr; gap:32px; padding:28px;}
}

@media (max-width:768px){
  .nav{display:none;}
  .burger{display:flex;}
  .header__actions .btn-ghost{display:none;}
  .section{padding:64px 0;}
  .hero{padding:30px 0 60px;}
  .f-tg, .f-wa{display:none;}
  .footer__top{grid-template-columns:1fr; gap:28px;}
  .footer__bot{flex-direction:column; text-align:center;}
  .wa-fab{width:52px; height:52px; bottom:18px; right:18px;}
  .wa-fab svg{width:24px; height:24px;}
  .chat{bottom:18px; left:18px;}
  .chat__toggle{padding:6px 14px 6px 6px; font-size:13px;}
  .chat__toggle-text{display:none;}
  .chat__panel{width:calc(100vw - 36px); left:auto; right:0;}
  .features-grid{grid-template-columns:1fr;}
  .cta-form__row{grid-template-columns:1fr;}
  .top-banner__inner{padding:8px 40px 8px 16px; font-size:12px; gap:8px;}
  .top-banner__link{display:none;}
  .mockup__body{grid-template-columns:60px 1fr;}
  .ms-menu li{font-size:10.5px; padding:6px 8px;}
  .ms-logo, .ms-user{display:none;}
}

@media (max-width:480px){
  h1{font-size:2rem;}
  .hero__ctas{flex-direction:column; align-items:stretch;}
  .hero__ctas .btn{justify-content:center;}
  .scr-card{width:300px;}
  .price-card__price .val{font-size:36px;}
  .demo-frame__body{height:400px;}
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}

/* ═══ DEMODAKİ İŞLEYİŞ BÖLÜMÜ ═══ */
.block-h{
  font-size:20px; font-weight:700; color:var(--ink-900);
  margin:48px 0 18px; display:flex; align-items:center; gap:10px;
  letter-spacing:-0.01em;
}
.block-h:first-of-type{margin-top:24px;}
.block-sub{font-size:14.5px; color:var(--ink-soft); margin-bottom:18px;}

/* Data band — 6 metrik yatay */
.data-band{
  display:flex; align-items:stretch; gap:0;
  background:linear-gradient(135deg, var(--ink-900) 0%, var(--ink-700) 50%, var(--blue-700) 100%);
  border-radius:var(--r-lg);
  padding:24px 16px;
  margin-bottom:36px;
  color:#fff;
  box-shadow:0 16px 40px -16px rgba(10,22,40,.4);
  flex-wrap:wrap;
  position:relative;
  overflow:hidden;
}
.data-band::before{
  content:''; position:absolute; right:-100px; top:-50px;
  width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,224,184,.15) 0%, transparent 70%);
  pointer-events:none;
}
.data-band__item{
  flex:1; min-width:130px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:0 12px; text-align:center; position:relative;
}
.data-band__val{
  font-family:var(--font-head); font-size:30px; font-weight:700;
  color:#fff; line-height:1; letter-spacing:-0.02em;
}
.data-band__item.highlight .data-band__val{color:var(--mint);}
.data-band__lbl{
  font-size:12.5px; color:#B6C2D6; font-weight:500;
  line-height:1.3;
}
.data-band__lbl small{font-size:11px; color:#94A8C2; display:block; margin-top:2px;}
.data-band__sep{
  width:1px; background:rgba(255,255,255,.12); align-self:stretch; margin:0 4px;
}

/* 6 Lokasyon kartı */
.lokasyon-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:12px; margin-bottom:36px;
}
.lok-card{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:14px 16px;
  transition:all .2s;
  border-left:3px solid var(--line);
}
.lok-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-sm);}
.lok-card.depo{border-left-color:var(--blue-600); background:linear-gradient(135deg, rgba(24,95,165,.04), transparent);}
.lok-card.empty{opacity:.5; border-left-style:dashed;}
.lok-card__head{
  display:flex; justify-content:space-between; align-items:center;
  font-size:10.5px; margin-bottom:8px;
}
.lok-card__tag{
  background:var(--blue-600); color:#fff;
  font-weight:700; padding:2px 7px; border-radius:4px;
  letter-spacing:0.04em;
}
.lok-card__tag.sub{background:var(--ink-700);}
.lok-card__adet{color:var(--ink-soft); font-weight:500;}
.lok-card__name{
  font-size:15px; font-weight:700; color:var(--ink-900);
  margin-bottom:4px; letter-spacing:-0.01em;
}
.lok-card__val{
  font-family:var(--font-head); font-size:18px; font-weight:700;
  color:var(--blue-600); margin-bottom:8px;
}
.lok-card__bar{
  height:4px; background:var(--line-2); border-radius:2px; overflow:hidden;
}
.lok-card__bar span{
  display:block; height:100%;
  background:linear-gradient(90deg, var(--blue-600), var(--mint));
  border-radius:2px;
}

/* 6 Firma kartı */
.firma-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:12px; margin-bottom:36px;
}
.firma-card{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:14px 16px;
  display:flex; flex-direction:column; gap:6px;
  transition:all .2s;
}
.firma-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-sm);}
.firma-card__logo{
  width:36px; height:36px; border-radius:9px;
  color:#fff; font-weight:700; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head);
}
.firma-card__name{
  font-size:14px; font-weight:600; color:var(--ink-900);
  margin-top:4px; line-height:1.3;
}
.firma-card__urun{
  font-size:11.5px; color:var(--ink-mute);
}
.firma-card__urun:last-child{
  color:var(--blue-600); font-weight:600; font-size:12px;
  border-top:1px dashed var(--line);
  padding-top:6px; margin-top:2px;
}

/* Flow grid — sihirbaz + analiz yan yana */
.flow-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  margin-bottom:32px;
}
@media(max-width:900px){.flow-grid{grid-template-columns:1fr;}}
.flow-block{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md); padding:24px 26px;
}
.flow-block .block-h{margin:0 0 8px;}

/* Wizard */
.wizard{margin-top:16px; border:1px solid var(--line); border-radius:var(--r); overflow:hidden;}
.wizard__bar{
  display:flex; align-items:center;
  padding:12px 16px;
  background:linear-gradient(180deg, #FAFBFD, #F4F6FB);
  border-bottom:1px solid var(--line);
}
.wizard__step{
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:600; color:var(--ink-mute);
}
.wizard__step.is-active{color:var(--ink-900);}
.wizard__step span{
  width:24px; height:24px; border-radius:50%;
  background:#fff; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700;
}
.wizard__step.is-active span{
  background:linear-gradient(135deg, var(--blue-600), var(--blue-500));
  color:#fff; border-color:transparent;
  box-shadow:0 2px 6px -1px rgba(24,95,165,.4);
}
.wizard__line{
  flex:1; height:2px; background:var(--line); margin:0 10px;
}
.wizard__body{padding:14px 16px;}
.wizard__row{
  display:flex; justify-content:space-between; align-items:center;
  padding:7px 0; border-bottom:1px dashed var(--line-2);
  font-size:13px;
}
.wizard__row:last-child{border-bottom:none; font-weight:600; color:var(--mint-dark);}
.wizard__row span{color:var(--ink-soft);}
.wizard__row em{color:var(--ink-900); font-style:normal; font-weight:500;}

/* Analiz */
.analiz{margin-top:16px; border:1px solid var(--line); border-radius:var(--r); overflow:hidden;}
.analiz__tabs{
  display:flex;
  background:linear-gradient(180deg, #FAFBFD, #F4F6FB);
  border-bottom:1px solid var(--line);
}
.analiz__tab{
  flex:1; padding:11px 12px; font-size:12.5px; font-weight:600;
  color:var(--ink-soft); display:flex; align-items:center; justify-content:center; gap:5px;
  border-bottom:2px solid transparent;
  transition:all .15s;
}
.analiz__tab.is-active{
  color:var(--ink-900); background:#fff;
  border-bottom-color:var(--blue-600);
}
.analiz__body{padding:16px;}
.analiz__kpis{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px;}
.analiz__kpi{
  background:var(--bg-3); border:1px solid var(--line);
  border-radius:8px; padding:10px 12px;
}
.akpi__lbl{font-size:11px; color:var(--ink-mute); display:block; margin-bottom:2px;}
.akpi__val{font-size:18px; font-weight:700; color:var(--ink-900); font-family:var(--font-head); letter-spacing:-0.02em;}
.analiz__bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px; background:var(--bg-3); border-radius:8px;
  font-size:13px;
}
.analiz__bottom b{color:var(--ink-900);}
.analiz__bottom small{color:var(--ink-mute); font-size:11.5px;}
.analiz__hint{
  padding:10px 14px; background:rgba(24,95,165,.04);
  border-top:1px solid var(--line);
  font-size:11.5px; color:var(--ink-soft);
}
.analiz__hint code{background:rgba(24,95,165,.08); color:var(--blue-600);}

/* İşleyiş CTA */
.isleyis-cta{
  text-align:center; margin-top:36px; padding:32px 20px;
  background:linear-gradient(135deg, rgba(24,95,165,.04), rgba(0,224,184,.06));
  border:1px dashed rgba(24,95,165,.3);
  border-radius:var(--r-md);
}
.isleyis-cta__txt{margin-top:12px; font-size:13.5px; color:var(--ink-soft);}
.isleyis-cta__txt code{background:rgba(24,95,165,.08); color:var(--blue-600);}

/* Responsive */
@media(max-width:768px){
  .data-band{padding:20px 12px; gap:8px;}
  .data-band__sep{display:none;}
  .data-band__item{flex:1 0 30%; padding:6px;}
  .data-band__val{font-size:22px;}
  .flow-grid{grid-template-columns:1fr;}
}

/* ════════════════════════════════════════
   AI CHAT WIDGET
   ════════════════════════════════════════ */
.chat {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 900;
  font-family: var(--font-body);
}
.chat__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--blue-800);
  color: white;
  border: none;
  border-radius: 50px;
  padding: 12px 18px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  font-size: 14px;
  font-weight: 600;
  transition: transform .2s, box-shadow .2s;
}
.chat__toggle:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,.3);}
.chat__toggle-icon{display:flex;align-items:center;}
.chat__toggle-dot {
  width:8px;height:8px;background:#22c55e;border-radius:50%;
  display:inline-block;margin-left:4px;
}
.chat__panel {
  position: absolute;
  bottom: 64px;
  right: 0;
  width: 360px;
  max-height: 520px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
}
.chat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--blue-800);
  color: white;
}
.chat__head-l{display:flex;align-items:center;gap:10px;}
.chat__avatar {
  width: 36px;height: 36px;
  background: var(--blue-600);
  border-radius: 50%;
  display: flex;align-items: center;justify-content: center;
  font-size: 16px;font-weight: 700;color: white;
  flex-shrink: 0;
}
.chat__name{font-size:14px;font-weight:700;}
.chat__status{font-size:11px;opacity:.75;display:flex;align-items:center;gap:5px;}
.online{width:7px;height:7px;background:#22c55e;border-radius:50%;display:inline-block;}
.chat__head-r{display:flex;align-items:center;gap:8px;}
.chat__wa{color:rgba(255,255,255,.8);transition:color .2s;display:flex;align-items:center;}
.chat__wa:hover{color:white;}
.chat__close{background:none;border:none;color:rgba(255,255,255,.7);font-size:20px;cursor:pointer;line-height:1;padding:2px 6px;border-radius:4px;transition:color .2s;}
.chat__close:hover{color:white;background:rgba(255,255,255,.15);}
.chat__body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 320px;
}
.chat__body::-webkit-scrollbar{width:4px;}
.chat__body::-webkit-scrollbar-track{background:transparent;}
.chat__body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:4px;}
.chat-msg{display:flex;gap:8px;align-items:flex-end;}
.chat-msg--bot{}
.chat-msg--user{flex-direction:row-reverse;}
.chat-msg__avatar {
  width:28px;height:28px;flex-shrink:0;
  background:var(--blue-600);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:white;
}
.chat-msg--user .chat-msg__avatar{background:var(--blue-900);}
.chat-msg__bubble {
  max-width:75%;
  padding:9px 13px;
  border-radius:14px;
  font-size:13.5px;
  line-height:1.5;
  color:#1a1a2e;
  background:#f1f3f9;
}
.chat-msg--bot .chat-msg__bubble{border-bottom-left-radius:4px;}
.chat-msg--user .chat-msg__bubble{background:var(--blue-700);color:white;border-bottom-right-radius:4px;}
.chat-msg__bubble a{color:inherit;font-weight:600;text-decoration:underline;}
.chat-msg--user .chat-msg__bubble a{color:#bfdbfe;}
.chat-msg__bubble code{background:rgba(0,0,0,.1);padding:1px 5px;border-radius:4px;font-size:12px;}
.chat-msg--user .chat-msg__bubble code{background:rgba(255,255,255,.15);}
.chat-typing .chat-msg__bubble {
  display:flex;gap:4px;align-items:center;padding:12px 16px;
}
.dot{width:7px;height:7px;background:rgba(0,0,0,.3);border-radius:50%;animation:dotBounce 1.2s infinite;}
.dot:nth-child(2){animation-delay:.15s;}
.dot:nth-child(3){animation-delay:.3s;}
@keyframes dotBounce{0%,60%,100%{transform:translateY(0);}30%{transform:translateY(-5px);}}
.chat-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 10px;
}
.chat-quick button {
  background: #eef1f8;
  border: 1.5px solid #dde2ee;
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--blue-700);
  cursor: pointer;
  transition: all .15s;
  font-weight: 500;
}
.chat-quick button:hover{background:var(--blue-700);color:white;border-color:var(--blue-700);}
.chat__input {
  display: flex;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid #eef1f8;
  background: white;
}
.chat__input input {
  flex: 1;
  border: 1.5px solid #e0e6f0;
  border-radius: 24px;
  padding: 9px 16px;
  font-size: 13px;
  font-family: var(--font-body);
  outline: none;
  transition: border-color .2s;
  color: var(--blue-900);
}
.chat__input input:focus{border-color:var(--blue-600);}
.chat__input button {
  background: var(--blue-700);
  border: none;
  border-radius: 50%;
  width: 40px;height: 40px;
  display: flex;align-items: center;justify-content: center;
  color: white;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
}
.chat__input button:hover{background:var(--blue-900);}
@media(max-width:480px){
  .chat__panel{width:calc(100vw - 32px);right:-8px;}
}