/* ============================================================
   MDV ECOSYSTEM — v2 | style.css
   Karanlık, premium fintech teması · Manrope + Inter + JetBrains Mono
   Palet: Gece (#070b14) · Vektör Mavisi (#4f8cff) · Mor (#8b5cf6) · TP Yeşili (#22c55e) · Altın (#f5b841)
   ============================================================ */

/* ---------- 0. Reset & Tokens ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --bg:        #070b14;
  --bg-2:      #0b1120;
  --bg-3:      #0f172a;
  --surface:   #0f1729;
  --surface-2: #131d33;
  --surface-3: #18243d;
  --line:      rgba(148,163,184,.14);
  --line-2:    rgba(148,163,184,.26);
  --head:      #f1f5f9;
  --text:      #aab7c7;
  --muted:     #7c8aa0;
  --brand:     #4f8cff;
  --brand-2:   #8b5cf6;
  --brand-d:   #2f6fe8;
  --brand-t:   rgba(79,140,255,.12);
  --grad:      linear-gradient(92deg, #4f8cff 0%, #8b5cf6 100%);
  --green:     #22c55e;
  --green-t:   rgba(34,197,94,.14);
  --gold:      #f5b841;
  --gold-t:    rgba(245,184,65,.14);
  --red:       #ef4444;
  --red-t:     rgba(239,68,68,.14);
  --cyan:      #22d3ee;

  --ff-head: "Manrope", "Segoe UI", system-ui, sans-serif;
  --ff-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --ff-mono: "JetBrains Mono", Consolas, "Courier New", monospace;

  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px;
  --sh-sm: 0 2px 10px rgba(0,0,0,.25);
  --sh-md: 0 14px 40px rgba(0,0,0,.35);
  --sh-lg: 0 30px 80px rgba(0,0,0,.5);
  --glow:  0 10px 30px rgba(79,140,255,.35);
  --tr: .3s cubic-bezier(.4,0,.2,1);
  --container: 1240px;
  --header-h: 76px;
}
html { scroll-behavior: smooth; }
body{
  font-family: var(--ff-body); font-size: 16px; line-height: 1.75;
  color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  background-image:
    radial-gradient(1200px 600px at 85% -10%, rgba(79,140,255,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(139,92,246,.08), transparent 60%);
  background-attachment: fixed;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
h1,h2,h3,h4,h5,h6{ font-family: var(--ff-head); color: var(--head); line-height:1.2; font-weight:800; letter-spacing:-.02em; }
strong, b { color: var(--head); }
::selection{ background: var(--brand); color:#fff; }
svg{ flex:none; }
.skip{ position:absolute; left:-999px; top:8px; z-index:999; background:var(--brand); color:#fff; padding:10px 16px; border-radius:10px; }
.skip:focus{ left:8px; }
[hidden]{ display:none !important; }
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }

/* ---------- 1. Utilities ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }
.section{ padding: 96px 0; position:relative; }
.section--tight{ padding: 56px 0; }
.section--alt{ background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)); border-block:1px solid var(--line); }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font: 700 12px/1 var(--ff-head); letter-spacing:.2em; text-transform:uppercase;
  color: var(--brand); margin-bottom:18px;
}
.eyebrow::before{ content:""; width:26px; height:2px; flex:none; background: var(--grad); border-radius:2px; }
.sec-title{ font-size: clamp(28px, 4vw, 44px); margin-bottom:16px; }
.sec-title em{ font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sec-lead{ max-width: 680px; font-size:17px; }
.sec-head{ margin-bottom: 52px; }
.sec-head--center{ text-align:center; }
.sec-head--center .sec-lead{ margin-inline:auto; }
.sec-title::after{
  content:""; display:block; width:52px; height:3px; border-radius:3px; background:var(--grad);
  margin-top:14px; transform:scaleX(0); transform-origin:left; transition: transform .8s cubic-bezier(.4,0,.2,1) .25s;
}
.sec-head--center .sec-title::after{ margin-inline:auto; transform-origin:center; }
.rv.in .sec-title::after{ transform:scaleX(1); }
.muted{ color:var(--muted); }
.hint{ display:block; margin-top:6px; font-size:12px; color:var(--muted); }
.ok{ color: var(--green) !important; }
.link{ color: var(--brand); font-weight:600; }
.link:hover{ text-decoration:underline; }
.link-muted{ font:600 13px var(--ff-head); color:var(--muted); margin-left:auto; }
.link-muted:hover{ color:var(--head); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 15px 28px; border-radius: 999px;
  font: 700 15px/1 var(--ff-head); letter-spacing:-.01em;
  transition: var(--tr); white-space:nowrap; position:relative;
}
.btn svg{ width:16px; height:16px; transition: transform var(--tr); }
.btn:hover svg{ transform: translateX(3px); }
.btn--primary{ background: var(--grad); color:#fff; box-shadow: var(--glow); }
.btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 40px rgba(79,140,255,.45); filter:saturate(1.1); }
.btn--ghost{ border:1.5px solid var(--line-2); color: var(--head); background:rgba(255,255,255,.03); }
.btn--ghost:hover{ border-color: var(--brand); color: #fff; background:var(--brand-t); transform: translateY(-2px); }
.btn--light{ background:#fff; color: #0b1120; }
.btn--light:hover{ background:#eef3ff; transform: translateY(-2px); }
.btn--ghost-light{ border:1.5px solid rgba(255,255,255,.4); color:#fff; }
.btn--ghost-light:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }
.btn--sm{ padding: 11px 20px; font-size:13.5px; }
.btn--sm-r{ padding:12px 20px; font-size:14px; }
.btn:active{ transform: scale(.97) !important; }
.btn--glow{ overflow:hidden; }
.btn--glow::after{
  content:""; position:absolute; top:0; bottom:0; width:44px; left:-70px;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg); animation: shine 3.2s ease-in-out infinite;
}
@keyframes shine{ 0%,55%{ left:-70px; } 85%,100%{ left:130%; } }

/* Reveal */
.rv{ opacity:0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.rv.in{ opacity:1; transform:none; }
.rv-d0{ transition-delay:0s; } .rv-d1{ transition-delay:.1s; } .rv-d2{ transition-delay:.2s; } .rv-d3{ transition-delay:.3s; }

.grad-text{
  background: linear-gradient(94deg, #4f8cff 0%, #8b5cf6 40%, #22d3ee 70%, #4f8cff 100%);
  background-size: 240% 100%; -webkit-background-clip:text; background-clip:text; color:transparent !important;
  animation: shimmer 6s ease-in-out infinite;
}
@keyframes shimmer{ 0%,100%{ background-position:0% 0; } 50%{ background-position:100% 0; } }
@keyframes heroIn{ from{ opacity:0; transform:translateY(24px);} to{ opacity:1; transform:none;} }
@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 4px rgba(79,140,255,.22);} 50%{ box-shadow:0 0 0 10px rgba(79,140,255,.04);} }
@keyframes fadeIn{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:none;} }
@keyframes livedot{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.5);} 70%{ box-shadow:0 0 0 7px rgba(34,197,94,0);} 100%{ box-shadow:0 0 0 0 rgba(34,197,94,0);} }
.live-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--green); animation: livedot 1.8s infinite; }

/* Logo */
.logo{ display:inline-flex; align-items:center; gap:10px; }
.logo__mark{ width:40px; height:40px; filter: drop-shadow(0 6px 14px rgba(79,140,255,.35)); }
.logo__tx{ display:flex; flex-direction:column; line-height:1; }
.logo__tx b{ font: 800 19px/1 var(--ff-head); color:#fff; letter-spacing:.02em; }
.logo__tx small{ font: 600 10.5px/1 var(--ff-head); letter-spacing:.26em; text-transform:uppercase; color:var(--brand); margin-top:4px; }
.logo--lg .logo__mark{ width:46px; height:46px; }
.logo--lg .logo__tx b{ font-size:22px; }

/* ---------- 2. Announce + Header ---------- */
.announce{ background: var(--grad); color:#fff; font: 600 13px var(--ff-head); }
.announce .container{ display:flex; align-items:center; justify-content:center; gap:8px; min-height:36px; text-align:center; }
.announce svg{ width:15px; height:15px; }
.header{
  position: sticky; top:0; z-index:120;
  background: rgba(7,11,20,.78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom:1px solid var(--line); transition: box-shadow var(--tr), background var(--tr);
}
.header.scrolled{ background: rgba(7,11,20,.92); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.header__in{ display:flex; align-items:center; justify-content:space-between; gap:22px; min-height:var(--header-h); }
.nav{ display:flex; align-items:center; gap:2px; }
.nav a{
  display:block; padding: 10px 12px; font: 600 13.5px/1 var(--ff-head); color: var(--text);
  border-radius: 10px; transition: var(--tr); white-space:nowrap;
}
.nav a:hover, .nav a.active, .nav a.on{ color: #fff; background: rgba(255,255,255,.06); }
.header__cta{ display:flex; align-items:center; gap:12px; }
.header__phone{ display:flex; align-items:center; gap:9px; font:700 14px var(--ff-head); color:var(--head); white-space:nowrap; transition:var(--tr); }
.header__phone svg{ width:34px; height:34px; padding:8px; background:var(--brand-t); color:var(--brand); border-radius:10px; }
.header__phone:hover{ color:var(--brand); }
.cart-btn{
  position:relative; width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  border:1px solid var(--line-2); background:rgba(255,255,255,.03); color:var(--head); transition:var(--tr); flex:none;
}
.cart-btn:hover{ border-color:var(--brand); color:var(--brand); }
.cart-btn svg{ width:19px; height:19px; }
.cart-btn b{
  position:absolute; top:-6px; right:-6px; min-width:19px; height:19px; border-radius:999px;
  background:var(--brand); color:#fff; font:700 11px/19px var(--ff-head); text-align:center; padding:0 4px; box-shadow:0 4px 10px rgba(79,140,255,.5);
}
.cart-btn b:empty, .cart-btn b[data-zero]{ display:none; }
.burger{ display:none; flex:none; width:42px; height:42px; border-radius:12px; border:1px solid var(--line-2); position:relative; z-index:130; background:rgba(255,255,255,.03); }
.burger span{ display:block; width:20px; height:2px; background:var(--head); margin:4px auto; border-radius:2px; transition: var(--tr); }
.burger.open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* Drawer */
.drawer{ position:fixed; inset:0; z-index:125; pointer-events:none; overflow:hidden; }
.drawer__bg{ position:absolute; inset:0; background:rgba(2,6,14,.7); opacity:0; transition:var(--tr); backdrop-filter:blur(4px); }
.drawer__panel{
  position:absolute; top:0; right:0; height:100%; width:min(360px, 90%);
  background:var(--bg-2); border-left:1px solid var(--line); padding: 20px 24px 32px;
  transform: translateX(100%); transition: transform .38s cubic-bezier(.4,0,.2,1); overflow-y:auto;
}
.drawer.open{ pointer-events:auto; }
.drawer.open .drawer__bg{ opacity:1; }
.drawer.open .drawer__panel{ transform:none; }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:10px; }
.drawer__x{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; border:1px solid var(--line-2); color:var(--head); }
.drawer__x svg{ width:16px; height:16px; }
.drawer nav a{ display:block; padding:13px 6px; font:600 16px var(--ff-head); color:var(--head); border-bottom:1px solid var(--line); }
.drawer nav a:hover{ color: var(--brand); }
.drawer-mdv{
  display:flex; gap:14px; align-items:center; margin-top:20px;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-md); padding:14px; box-shadow:var(--sh-md);
}
.drawer-mdv img{ width:72px; height:72px; object-fit:cover; border-radius:12px; flex:none; }
.drawer-mdv__body b{ display:block; font:700 14px var(--ff-head); color:var(--head); }
.drawer-mdv__body small{ display:block; color:var(--muted); font-size:12px; margin-top:2px; }
.drawer-mdv__body small em{ font-style:normal; color:var(--brand); font-weight:700; }

/* ---------- 3. Landing Hero ---------- */
.ld-hero{ position:relative; overflow:hidden; padding:72px 0 84px; isolation:isolate; }
.market-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.5; pointer-events:none; }
.ld-hero__glow{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(900px 520px at 80% -10%, rgba(79,140,255,.22), transparent 62%),
    radial-gradient(700px 460px at 8% 100%, rgba(139,92,246,.18), transparent 60%),
    linear-gradient(180deg, rgba(7,11,20,0) 60%, var(--bg) 100%);
}
.ld-hero .container{ position:relative; z-index:2; }
.ld-hero__grid{ display:grid; grid-template-columns:1.04fr .96fr; gap:56px; align-items:center; }
.ld-kicker{
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(79,140,255,.1); border:1px solid rgba(79,140,255,.35); color:#9cc0ff;
  padding:9px 16px; border-radius:999px; font:700 11.5px/1 var(--ff-head); letter-spacing:.18em; text-transform:uppercase; margin-bottom:22px;
  animation:heroIn .7s cubic-bezier(.4,0,.2,1) both;
}
.ld-kicker::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--brand); animation:pulse 2s infinite; }
.ld-hero h1{ font-size:clamp(34px,4.4vw,56px); line-height:1.1; margin-bottom:20px; animation:heroIn .7s .05s cubic-bezier(.4,0,.2,1) both; }
.ld-hero h1 em{ font-style:normal; background:linear-gradient(92deg,#7fb0ff,#b79cff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ld-hero__sub{ font-size:17px; color:var(--text); max-width:560px; margin-bottom:24px; animation:heroIn .7s .15s cubic-bezier(.4,0,.2,1) both; }
.ld-hero__sub strong{ color:#fff; }
.offer-list{ display:grid; gap:10px; margin:0 0 24px; animation:heroIn .7s .2s cubic-bezier(.4,0,.2,1) both; }
.offer-list li{ display:flex; align-items:flex-start; gap:11px; font:500 15px/1.5 var(--ff-body); color:var(--text); }
.offer-list li b{ color:#fff; }
.offer-list svg{ width:20px; height:20px; padding:4px; border-radius:7px; background:var(--green-t); color:var(--green); margin-top:1px; }
.hero__badges{ display:flex; gap:10px; flex-wrap:wrap; animation:heroIn .7s .25s cubic-bezier(.4,0,.2,1) both; }
.hero__badges span{
  display:inline-flex; align-items:center; gap:8px; font:600 11.5px/1 var(--ff-head); letter-spacing:.08em; text-transform:uppercase;
  color:var(--text); background:rgba(255,255,255,.03); border:1px solid var(--line-2); padding:9px 14px; border-radius:999px;
}
.hero__badges svg{ width:13px; height:13px; color:var(--brand); }
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; }

.ld-hero__visual{ position:relative; animation:heroIn .9s .2s cubic-bezier(.4,0,.2,1) both; }
.offer-card{
  position:relative; z-index:2; background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--line-2); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-lg);
}
.offer-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(135deg, rgba(79,140,255,.6), transparent 40%, transparent 60%, rgba(139,92,246,.5)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; }
.offer-card__media{ position:relative; background:radial-gradient(400px 200px at 50% 0%, rgba(79,140,255,.18), transparent 70%); }
.offer-card__media{ display:flex; justify-content:center; padding:10px 0 0; }
.offer-card__media img{ width:auto; max-width:100%; max-height:min(34vh, 330px); height:auto; display:block; object-fit:contain; }
.offer-card__flag{
  position:absolute; top:14px; left:14px; background:var(--grad); color:#fff;
  font:800 12px var(--ff-head); letter-spacing:.04em; padding:8px 14px; border-radius:30px; box-shadow:var(--glow);
}
.offer-card__body{ padding:22px 24px 24px; border-top:1px solid var(--line); }
.offer-card__eyebrow{ display:block; font:800 11px var(--ff-head); letter-spacing:.14em; text-transform:uppercase; color:var(--brand); margin-bottom:8px; }
.offer-card__title{ font-size:19px; line-height:1.35; margin-bottom:14px; color:#fff; }
.offer-card__price{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.offer-card__price del{ color:var(--muted); font:600 16px var(--ff-head); }
.offer-card__price b{ font:800 clamp(30px,3.6vw,38px)/1 var(--ff-head); color:#fff; letter-spacing:-.02em; }
.kdv{ font:600 12px var(--ff-head); color:var(--muted); }
.offer-card__actions{ display:grid; gap:10px; }
.offer-card__actions .btn{ width:100%; }
.offer-card__mini{ display:flex; gap:14px; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.offer-card__mini li{ display:inline-flex; align-items:center; gap:6px; font:600 12.5px var(--ff-head); color:var(--muted); }
.offer-card__mini svg{ width:13px; height:13px; color:var(--green); }
.ld-float{
  position:absolute; z-index:3; background:rgba(15,23,41,.92); backdrop-filter:blur(10px);
  border:1px solid var(--line-2); border-radius:var(--r-md); padding:13px 16px; display:flex; align-items:center; gap:12px;
  box-shadow:var(--sh-md); color:var(--head);
}
.ld-float .dot{ width:10px; height:10px; border-radius:50%; flex:none; }
.dot--green{ background:var(--green); box-shadow:0 0 12px var(--green); }
.dot--gold{ background:var(--gold); box-shadow:0 0 12px var(--gold); }
.ld-float b{ font:700 13.5px var(--ff-head); display:block; color:#fff; }
.ld-float span{ font-size:11.5px; color:var(--muted); }
.ld-float--1{ top:36%; left:-44px; animation:float 5.5s ease-in-out .4s infinite; }
.ld-float--2{ top:-16px; right:-22px; animation:float 6.5s ease-in-out 1.1s infinite; }

/* ---------- 4. Pagebar / Subnav / Stats ---------- */
.pagebar{ position:fixed; top:0; left:0; height:3px; width:0; z-index:200; background:var(--grad); transition:width .12s linear; pointer-events:none; }
.scroll-progress{ display:none; }
section[id], div[id]{ scroll-margin-top:130px; }
.subnav{ position:sticky; top:var(--header-h); z-index:110; background:rgba(7,11,20,.86); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.subnav__in{ display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; }
.subnav__in::-webkit-scrollbar{ display:none; }
.subnav a{ flex:none; padding:13px 15px; font:600 13.5px var(--ff-head); color:var(--muted); border-bottom:2.5px solid transparent; transition:color .2s, border-color .2s; white-space:nowrap; }
.subnav a:hover{ color:var(--head); }
.subnav a.on{ color:#fff; border-bottom-color:var(--brand); }
.subnav .subnav__buy{ color:#9cc0ff; font-weight:800; }
.stat-band{ border-bottom:1px solid var(--line); background:rgba(255,255,255,.015); }
.stat-band__in{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:30px 20px; text-align:center; border-left:1px solid var(--line); transition:var(--tr); }
.stat:first-child{ border-left:0; }
.stat:hover{ background:rgba(79,140,255,.05); }
.stat b{ display:block; font:800 clamp(28px,3.4vw,42px)/1.1 var(--ff-head); color:#fff; letter-spacing:-.02em; }
.stat b .sfx{ color:var(--brand); }
.stat > span{ font:600 12px var(--ff-head); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.stat b span{ font:inherit; color:inherit; letter-spacing:inherit; text-transform:none; }

/* ---------- 5. Vektör vitrini ---------- */
.product-badge{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:20px;
  background:var(--grad); color:#fff; font:700 11.5px var(--ff-head); letter-spacing:.14em; text-transform:uppercase;
  padding:10px 18px; border-radius:999px; box-shadow:var(--glow);
}
.product-badge svg{ width:15px; height:15px; }
.vshow-panel{ position:relative; background:linear-gradient(180deg, var(--surface-2), var(--surface)); border:1px solid var(--line-2); border-radius:var(--r-xl); padding:40px 36px 30px; box-shadow:var(--sh-md); }
.vshow-panel__tag{
  position:absolute; top:-17px; left:50%; transform:translateX(-50%); background:var(--grad); color:#fff;
  font:700 12px/1 var(--ff-head); letter-spacing:.14em; text-transform:uppercase; padding:11px 24px; border-radius:999px; box-shadow:var(--glow); white-space:nowrap;
}
.vgrid-label, .vfeat-group__label{ display:inline-flex; align-items:center; gap:9px; font:700 11.5px var(--ff-head); letter-spacing:.16em; text-transform:uppercase; color:var(--brand); margin-bottom:16px; }
.vgrid-label::before, .vfeat-group__label::before{ content:""; width:20px; height:2px; background:var(--brand); border-radius:2px; }
.vgrid{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.vjoin{ position:absolute; top:42%; z-index:3; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--grad); color:#fff; font:800 20px/1 var(--ff-head); box-shadow:var(--glow); animation:pulse 2.4s infinite; }
.vjoin--1{ left:calc(33.33% - 22px); } .vjoin--2{ left:calc(66.66% - 12px); }
.vcard{ position:relative; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 28px 0; overflow:hidden; transition:var(--tr); will-change:transform; }
.vcard:hover{ transform:translateY(-10px) rotate(-.4deg); box-shadow:var(--sh-lg); border-color:var(--vc); }
.vcard::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--vc, var(--brand)); }
.vcard--spot{ --vc:#22d3ee; } .vcard--plus{ --vc:#8b5cf6; } .vcard--viop{ --vc:#f5b841; }
.vcard__inc{ position:absolute; top:14px; right:14px; z-index:2; display:inline-flex; align-items:center; gap:6px; background:var(--green-t); color:var(--green); border:1px solid rgba(34,197,94,.35); font:700 10.5px/1 var(--ff-head); letter-spacing:.1em; text-transform:uppercase; padding:6px 11px; border-radius:999px; }
.vcard__inc svg{ width:11px; height:11px; }
.vcard__logo{ display:flex; align-items:center; gap:6px; font:800 30px/1 var(--ff-head); color:#fff; letter-spacing:-.02em; }
.vcard__logo svg{ width:26px; height:26px; color:var(--vc); }
.vcard__name{ display:block; font:700 12px var(--ff-head); letter-spacing:.28em; text-transform:uppercase; color:var(--vc); margin:8px 0 6px; padding-bottom:12px; border-bottom:2px solid var(--vc); width:max-content; }
.vcard > p{ font-size:14px; margin-top:14px; min-height:48px; }
.vchart{ display:block; width:calc(100% + 56px); margin:18px -28px 0; height:120px; }
.vchart .vline{ fill:none; stroke:var(--vc); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:480; stroke-dashoffset:480; animation: drawline 6s ease-in-out infinite; }
.vchart .varea{ fill:var(--vc); opacity:.1; }
.vchart .vgridline{ stroke:rgba(255,255,255,.06); stroke-width:1; }
@keyframes drawline{ 0%{ stroke-dashoffset:480; } 55%,88%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:0; opacity:.2; } }
.vpack-bar{ margin-top:30px; padding-top:26px; border-top:1px dashed var(--line-2); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.vpack-bar__price small{ display:block; font:600 11.5px var(--ff-head); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.vpack-bar__price del{ color:var(--muted); font-size:16px; margin-right:10px; }
.vpack-bar__price b{ font:800 32px var(--ff-head); color:#fff; letter-spacing:-.02em; }
.vpack-bar__price .kdv{ margin-left:8px; }
.vfeat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:34px 46px; margin-top:46px; }
.vfeats{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.vfeat{ display:flex; align-items:center; gap:13px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:15px 16px; transition:var(--tr); }
.vfeat:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--line-2); }
.vfeat .ic{ flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--brand-t); color:var(--brand); transition:var(--tr); }
.vfeat:hover .ic{ background:var(--grad); color:#fff; transform:rotate(-6deg); }
.vfeat .ic svg{ width:21px; height:21px; }
.vfeat b{ display:block; font:700 13.5px/1.3 var(--ff-head); color:#fff; }
.vfeat small{ font-size:11.5px; color:var(--muted); line-height:1.4; }
.vmotto{ display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; margin-top:44px; padding-top:32px; border-top:1px solid var(--line); }
.vmotto span{ font:700 13px var(--ff-head); letter-spacing:.34em; text-transform:uppercase; color:var(--head); }
.vmotto i{ width:6px; height:6px; border-radius:50%; background:var(--brand); box-shadow:0 0 10px var(--brand); }

/* ---------- 6. Keyfacts ---------- */
.keyfacts{ background:var(--surface); border:1px solid var(--line-2); border-left:4px solid var(--brand); border-radius:var(--r-lg); padding:28px 32px; max-width:920px; margin:0 auto; }
.keyfacts__h{ font-size:clamp(20px,2.4vw,25px); margin-bottom:12px; }
.keyfacts__h span{ color:var(--brand); }
.keyfacts__lead{ font-size:16px; line-height:1.75; margin-bottom:20px; }
.keyfacts__dl{ border-top:1px solid var(--line); }
.keyfacts__dl > div{ display:grid; grid-template-columns:200px 1fr; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); }
.keyfacts__dl dt{ font:700 13px/1.5 var(--ff-head); color:var(--brand); }
.keyfacts__dl dd{ font-size:14.5px; line-height:1.6; }

/* ---------- 7. Section heads, code grid, points ---------- */
.ld-sec-head{ text-align:center; max-width:780px; margin:0 auto 54px; }
.ld-sec-head h2{ font-size:clamp(26px,3.6vw,40px); margin-bottom:14px; }
.ld-sec-head h2 em{ font-style:normal; background:linear-gradient(92deg,#7fb0ff,#b79cff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ld-sec-head p{ font-size:16.5px; }
.ld-sec-head .ld-kicker{ animation:none; }
.ld-sec-head .vs-lead{ font:700 clamp(18px,2.2vw,23px)/1.5 var(--ff-head); color:#fff; margin-bottom:14px; }
.ld-sec-head .vs-lead em{ color:var(--brand); font-style:normal; }
.ld-code-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.ld-code-body h2{ font-size:clamp(24px,3vw,36px); margin-bottom:16px; }
.ld-code-body p{ margin-bottom:14px; }
.ld-code-body p strong{ color:#fff; }
.ld-code-body .ld-kicker{ animation:none; }
.mdv__points{ margin:24px 0 0; display:grid; grid-template-columns:1fr; gap:12px; }
.mdv__points li{ display:flex; align-items:center; gap:11px; color:var(--head); font:600 14.5px var(--ff-head); }
.mdv__points svg{ width:22px; height:22px; padding:4px; border-radius:7px; background:var(--brand-t); color:var(--brand); }
.media-card{ position:relative; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line-2); box-shadow:var(--sh-lg); background:var(--surface); }
.media-card img{ width:100%; height:auto; transition:transform .8s ease; }
.media-card:hover img{ transform:scale(1.03); }
.media-card figcaption{ position:absolute; left:14px; bottom:14px; display:inline-flex; align-items:center; gap:8px; background:rgba(7,11,20,.82); backdrop-filter:blur(8px); border:1px solid var(--line-2); color:#fff; font:600 12px var(--ff-head); padding:8px 12px; border-radius:999px; }

/* ---------- 8. Ok vs Gerekçe ---------- */
.vs-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:26px; align-items:stretch; }
.vs-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 28px; position:relative; display:flex; flex-direction:column; }
.vs-card--bad{ background:rgba(255,255,255,.02); }
.vs-card--good{ border:1px solid rgba(79,140,255,.5); box-shadow:0 0 0 4px rgba(79,140,255,.08), var(--sh-md); background:linear-gradient(180deg, var(--surface-2), var(--surface)); }
.vs-card__label{ display:inline-block; max-width:100%; font:700 11px var(--ff-head); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); background:rgba(255,255,255,.03); border:1px solid var(--line-2); border-radius:999px; padding:7px 14px; margin-bottom:20px; line-height:1.4; }
.vs-card__label--good{ background:var(--grad); border-color:transparent; color:#fff; }
.vs-arrow-demo{ position:relative; text-align:center; padding:26px 0 20px; border:1px dashed var(--line-2); border-radius:var(--r-md); margin-bottom:20px; background:rgba(0,0,0,.2); }
.vs-arrow{ display:block; font-size:44px; line-height:1; color:var(--green); animation:float 3s ease-in-out infinite; transition:color .3s ease; }
.vs-arrow.flip-down{ color:var(--red) !important; }
.vs-arrow-demo b{ display:block; font:800 20px var(--ff-head); color:#fff; margin-top:6px; transition:color .3s ease; }
.vs-arrow-demo b.flip-down{ color:var(--red); }
.vs-arrow-demo .vs-q{ position:absolute; top:6px; right:10px; width:36px; height:36px; display:grid; place-items:center; font:800 17px var(--ff-head); color:var(--red); background:var(--red-t); border:1px solid rgba(239,68,68,.3); border-radius:50%; animation: qsoft 3.4s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes qsoft{ 0%,100%{ transform:scale(.94); opacity:.55; } 50%{ transform:scale(1); opacity:1; } }
.vs-why{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:12px; font:800 clamp(17px,1.9vw,21px)/1.2 var(--ff-head); }
.vs-why .q{ color:#fff; } .vs-why .a{ color:var(--red); border-bottom:3px solid rgba(239,68,68,.4); padding-bottom:2px; }
.vs-list{ display:grid; gap:9px; }
.vs-list li{ position:relative; padding-left:24px; font-size:14px; }
.vs-list li::before{ content:"✕"; position:absolute; left:2px; color:var(--red); font-weight:700; }
.vs-note{ margin-top:16px; font-size:13.5px; }
.vs-note strong{ color:#fff; }
.scen-card{ border:1px solid var(--line-2); border-radius:var(--r-md); overflow:hidden; background:var(--bg-2); transition: box-shadow .6s ease; }
.scen-card__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; background:var(--green-t); border-bottom:1px solid rgba(34,197,94,.3); padding:13px 18px; transition: box-shadow .5s ease; }
.scen-dir{ font:800 15px var(--ff-head); color:var(--green); }
.scen-q{ font:700 11.5px var(--ff-head); letter-spacing:.06em; text-transform:uppercase; color:var(--green); }
.scen-card__row{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 18px; border-bottom:1px solid var(--line); font-size:13.5px; color:var(--muted); opacity:.35; transition:opacity .4s ease, background .4s ease; }
.scen-card__row:last-child{ border-bottom:0; }
.scen-card__row b{ font:600 13px var(--ff-head); color:#fff; text-align:right; }
.scen-card__row b.ok{ color:var(--green); }
.scen-card__row.lit{ opacity:1; background:rgba(34,197,94,.05); }
.scen-card__row.lit::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--green); animation:fadeIn .4s ease; }
.scen-card__row.lit b.ok{ animation: okpop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes okpop{ from{ transform:scale(.6); } to{ transform:scale(1); } }
.scen-card.done{ box-shadow:0 0 0 3px rgba(34,197,94,.3), var(--sh-md); }

/* ---------- 9. Family cards ---------- */
.ld-family{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.ld-family--core{ margin-top:24px; }
.ld-card{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:34px 30px; transition:var(--tr); overflow:hidden; }
.ld-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad); opacity:0; transition:var(--tr); }
.ld-card:hover{ transform:translateY(-8px); border-color:var(--line-2); box-shadow:var(--sh-lg); }
.ld-card:hover::before{ opacity:1; }
.ld-card .ic, .ld-feat .ic, .weak-card .ic{ width:52px; height:52px; border-radius:15px; margin-bottom:20px; display:grid; place-items:center; background:var(--brand-t); color:var(--brand); transition:var(--tr); }
.ld-card:hover .ic, .ld-feat:hover .ic{ background:var(--grad); color:#fff; transform:rotate(-6deg) scale(1.05); }
.ld-card .ic svg, .ld-feat .ic svg, .weak-card .ic svg{ width:24px; height:24px; }
.ld-card h3{ font-size:19px; margin-bottom:10px; }
.ld-card h3.vec-h{ font-size:24px; line-height:1.15; }
.ld-card h3.vec-h small{ display:block; font:800 11.5px var(--ff-head); letter-spacing:.2em; text-transform:uppercase; color:var(--brand); margin-bottom:4px; }
.ld-card .tagx{ display:inline-block; font:700 10.5px/1 var(--ff-head); letter-spacing:.14em; text-transform:uppercase; color:var(--gold); border:1px solid rgba(245,184,65,.45); background:var(--gold-t); border-radius:999px; padding:5px 11px; margin-bottom:14px; }
.ld-card p{ font-size:14.5px; }
.ld-card p strong{ color:#fff; }
.ld-card ul{ margin-top:16px; display:grid; gap:9px; }
.ld-card ul li{ display:flex; gap:9px; align-items:flex-start; color:var(--head); font-size:13.5px; }
.ld-card ul svg{ flex:none; width:15px; height:15px; color:var(--green); margin-top:4px; }
.ld-card--mini{ padding:28px 26px; }
.ld-card--mini .ic{ width:44px; height:44px; border-radius:12px; margin-bottom:14px; }
.ld-card--mini .ic svg{ width:20px; height:20px; }
.ld-card--mini h3{ font-size:22px; letter-spacing:.02em; }

/* ---------- 10. Steps ---------- */
.ld-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:step; }
.ld-step{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 26px; transition:var(--tr); }
.ld-step:hover{ transform:translateY(-6px); box-shadow:var(--sh-md); border-color:rgba(79,140,255,.4); }
.ld-step__num{ counter-increment:step; display:grid; place-items:center; width:46px; height:46px; border-radius:14px; margin-bottom:18px; background:var(--grad); font:800 16px var(--ff-head); color:#fff; box-shadow:var(--glow); transition:var(--tr); }
.ld-step:hover .ld-step__num{ transform:rotate(-8deg) scale(1.08); }
.ld-step__num::before{ content:counter(step, decimal-leading-zero); }
.ld-step h3{ font-size:16.5px; margin-bottom:9px; }
.ld-step p{ font-size:13.8px; }
.ld-step--motto{ background:var(--grad); border-color:transparent; }
.ld-step--motto h3{ color:#fff; font-size:17px; line-height:1.4; }
.ld-step--motto p{ color:rgba(255,255,255,.85); }

/* ---------- 11. Feats ---------- */
.ld-feats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.ld-feat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:24px 22px; transition:var(--tr); }
.ld-feat:hover{ border-color:rgba(79,140,255,.4); transform:translateY(-4px); box-shadow:var(--sh-md); }
.ld-feat .ic{ width:42px; height:42px; border-radius:12px; margin-bottom:14px; }
.ld-feat .ic svg{ width:20px; height:20px; }
.ld-feat h4{ font-size:15px; margin-bottom:7px; }
.ld-feat p{ font-size:13px; line-height:1.65; }

/* ---------- 12. Şeffaflık ---------- */
.result-strip{ max-width:820px; margin:0 auto 30px; background:var(--bg-2); border:1px solid var(--line-2); border-radius:14px; padding:10px 12px 8px; overflow:hidden; box-shadow:var(--sh-md); }
.result-strip__track{ display:flex; gap:8px; width:max-content; animation: ticker 26s linear infinite; }
@keyframes ticker{ to{ transform: translateX(-50%); } }
.result-strip span{ flex:none; font:700 11px/1 var(--ff-mono); letter-spacing:.04em; padding:6px 10px; border-radius:7px; }
.result-strip .tp{ background:var(--green-t); color:var(--green); border:1px solid rgba(34,197,94,.35); }
.result-strip .slx{ background:var(--red-t); color:var(--red); border:1px solid rgba(239,68,68,.35); }
.result-strip small{ display:block; margin-top:8px; font-size:11px; color:var(--muted); letter-spacing:.04em; text-align:center; }
.weak-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.weak-card{ background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:var(--r-md); padding:26px 24px; transition:var(--tr); }
.weak-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); }
.weak-card .ic{ width:42px; height:42px; border-radius:12px; background:var(--gold-t); color:var(--gold); margin-bottom:14px; }
.weak-card .ic svg{ width:20px; height:20px; }
.weak-card h4{ font-size:15.5px; margin-bottom:8px; }
.weak-card p{ font-size:13.5px; line-height:1.65; }
.bridge-note{ margin:34px auto 0; text-align:center; font:500 15px/1.7 var(--ff-body); max-width:680px; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-md); padding:20px 26px; }
.bridge-note strong{ color:var(--brand); }
.bridge-note a{ color:var(--brand); font-weight:600; }

/* ---------- 13. Otomasyon / kod paneli ---------- */
.chain{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; }
.chain span{ background:rgba(255,255,255,.03); border:1.5px solid var(--line-2); border-radius:999px; padding:9px 15px; font:600 12.5px var(--ff-head); color:var(--head); transition:var(--tr); }
.chain span:hover{ border-color:var(--brand); color:#fff; transform:translateY(-2px); background:var(--brand-t); }
.chain i{ color:var(--brand); font-style:normal; font-weight:700; }
.code-panel{ background:#05090f; border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-lg); font-family:var(--ff-mono); }
.code-panel__bar{ display:flex; align-items:center; gap:8px; padding:14px 18px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.02); }
.code-panel__bar i{ width:11px; height:11px; border-radius:50%; }
.code-panel__bar i:nth-child(1){ background:#ef4444; } .code-panel__bar i:nth-child(2){ background:#f5b841; } .code-panel__bar i:nth-child(3){ background:#22c55e; }
.code-panel__bar span{ margin-left:8px; font:600 11.5px var(--ff-head); letter-spacing:.08em; color:var(--muted); }
.code-panel pre{ margin:0; padding:22px 24px; font-size:13px; line-height:1.85; color:#c7d3db; min-height:330px; white-space:pre-wrap; word-break:break-word; font-family:var(--ff-mono); }
.code-panel .k{ color:#7dd3fc; } .code-panel .s{ color:#fca5a1; } .code-panel .n{ color:#f5b841; }
.type-caret::after{ content:"▌"; color:var(--brand); animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.doc-fn{ font-size:13px; color:var(--muted); border-left:3px solid var(--line-2); padding-left:14px; line-height:1.65; }
.cmp-note{ margin:16px auto 0; max-width:760px; text-align:center; border-left:0; padding-left:0; }

/* ---------- 14. Chips / Kıyas ---------- */
.ld-chips{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.ld-chips span{ display:inline-flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--line-2); color:var(--head); font:600 14px var(--ff-head); padding:13px 22px; border-radius:999px; transition:var(--tr); }
.ld-chips span:hover{ border-color:var(--brand); transform:translateY(-3px); box-shadow:var(--sh-md); }
.ld-chips svg{ width:16px; height:16px; color:var(--brand); }
.cmp-wrap{ overflow-x:auto; border:1px solid var(--line-2); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-md); max-width:980px; margin-inline:auto; }
.cmp{ width:100%; border-collapse:collapse; font-size:14px; min-width:680px; }
.cmp th{ background:var(--bg-2); color:#fff; font:700 12.5px var(--ff-head); letter-spacing:.05em; text-align:left; padding:14px 18px; }
.cmp th.cmp__hl{ background:var(--grad); text-align:center; }
.cmp td{ padding:13px 18px; border-top:1px solid var(--line); line-height:1.5; }
.cmp td:first-child{ font-weight:600; color:var(--head); }
.cmp td.cmp__hl{ background:rgba(79,140,255,.08); text-align:center; font-weight:800; }
.cmp td.yes{ color:var(--green); font-size:16px; }
.cmp td.no{ color:var(--muted); text-align:center; opacity:.5; }
.cmp td.mid{ color:var(--muted); font-size:13px; }
.cmp tbody tr:hover td{ background:rgba(255,255,255,.025); }
.cmp tbody tr:hover td.cmp__hl{ background:rgba(79,140,255,.14); }

/* ---------- 15. Pricing ---------- */
.single-pack{ display:grid; grid-template-columns:1.15fr .85fr; background:linear-gradient(180deg, var(--surface-2), var(--surface)); border:1px solid rgba(79,140,255,.5); border-radius:var(--r-xl); overflow:hidden; box-shadow:0 0 0 6px rgba(79,140,255,.06), var(--sh-lg); position:relative; }
.single-pack__info{ padding:44px 44px 40px; }
.single-pack__info h3{ font-size:clamp(22px,2.6vw,30px); margin-bottom:10px; }
.single-pack__info > p{ margin-bottom:24px; }
.single-pack__feats{ display:grid; grid-template-columns:1fr 1fr; gap:11px 20px; }
.single-pack__feats li{ display:flex; gap:9px; align-items:flex-start; font-size:14px; color:var(--head); }
.single-pack__feats li svg{ flex:none; width:17px; height:17px; color:var(--green); margin-top:3px; }
.single-pack__price{ background:rgba(0,0,0,.25); border-left:1px dashed var(--line-2); padding:44px 40px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px; position:relative; }
.single-pack__price .flag{ position:absolute; top:18px; right:18px; background:var(--grad); color:#fff; font:700 11.5px/1 var(--ff-head); letter-spacing:.1em; text-transform:uppercase; padding:8px 15px; border-radius:999px; box-shadow:var(--glow); animation:pulse 2.4s infinite; }
.single-pack__price small{ font:600 12px var(--ff-head); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.single-pack__price del{ color:var(--muted); font-size:17px; }
.single-pack__price b{ font:800 clamp(38px,4vw,50px)/1.05 var(--ff-head); color:#fff; letter-spacing:-.03em; }
.single-pack__price .kdv{ margin-bottom:10px; }
.single-pack__price .lic{ font-size:12.5px; margin-bottom:16px; max-width:240px; }
.single-pack__price .btn{ width:100%; }
.single-pack__price .btn + .btn{ margin-top:10px; }
.trust-mini{ display:flex; gap:8px 16px; flex-wrap:wrap; justify-content:center; margin-top:14px; padding-top:14px; border-top:1px dashed var(--line-2); width:100%; }
.trust-mini span{ display:inline-flex; align-items:center; gap:6px; font:600 11.5px var(--ff-head); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.trust-mini svg{ width:14px; height:14px; color:var(--green); }
.pay-note{ text-align:center; margin-top:26px; font:600 12.5px var(--ff-head); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.pay-note svg{ width:15px; height:15px; vertical-align:-3px; color:var(--brand); margin-right:4px; }

/* ---------- 16. Final CTA / FAQ / Docs mini / Notice ---------- */
.ld-final{ position:relative; border-radius:var(--r-xl); overflow:hidden; background:linear-gradient(135deg, rgba(79,140,255,.16), rgba(139,92,246,.12)); border:1px solid rgba(79,140,255,.35); box-shadow:var(--sh-md); padding:64px 56px; text-align:center; }
.ld-final::before{ content:""; position:absolute; inset:0; background:radial-gradient(560px 260px at 50% 0%, rgba(79,140,255,.2), transparent 70%); }
.ld-final > *{ position:relative; }
.ld-final .ld-kicker{ animation:none; }
.ld-final h2{ font-size:clamp(26px,3.4vw,40px); margin-bottom:14px; }
.ld-final h2 em{ font-style:normal; background:linear-gradient(92deg,#7fb0ff,#b79cff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ld-final p{ max-width:580px; margin:0 auto 30px; }
.ld-final .hero__actions{ justify-content:center; }
.faq{ max-width:800px; margin:0 auto; display:grid; gap:12px; }
.faq__item{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; transition:var(--tr); }
.faq__item.open{ border-color:rgba(79,140,255,.5); box-shadow:var(--sh-md); }
.faq__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:19px 22px; text-align:left; font:700 15.5px var(--ff-head); color:var(--head); }
.faq__q .pl{ flex:none; width:28px; height:28px; border-radius:9px; display:grid; place-items:center; background:var(--brand-t); color:var(--brand); transition:transform var(--tr); }
.faq__q .pl svg{ width:14px; height:14px; }
.faq__item.open .pl{ transform:rotate(45deg); }
.faq__a{ max-height:0; overflow:hidden; transition:max-height .45s ease; }
.faq__a > div{ padding:0 22px 22px; font-size:14.5px; line-height:1.75; }
.docs-mini{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:1000px; margin:0 auto; }
.docs-mini a{ display:block; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px 20px; transition:.25s; }
.docs-mini a:hover{ border-color:var(--brand); transform:translateY(-3px); box-shadow:var(--sh-md); }
.docs-mini small{ display:block; font:800 10.5px var(--ff-head); letter-spacing:.14em; text-transform:uppercase; color:var(--brand); margin-bottom:5px; }
.docs-mini b{ font:700 14.5px/1.45 var(--ff-head); color:#fff; display:block; margin-bottom:4px; }
.docs-mini span{ font-size:12.5px; color:var(--muted); line-height:1.55; }
.ld-notice{ background:var(--gold-t); border:1px solid rgba(245,184,65,.35); border-radius:var(--r-md); padding:24px 28px; color:#d9c28f; font-size:13px; line-height:1.8; max-width:1000px; margin-inline:auto; }
.ld-notice h4{ color:var(--gold); font-size:13.5px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px; display:flex; align-items:center; gap:9px; }
.ld-notice h4 svg{ width:16px; height:16px; }
.ld-notice + .ld-notice{ margin-top:16px; }
.ld-notice a{ color:inherit; font-weight:700; text-decoration:underline; }

/* ---------- 17. Sticky bars ---------- */
.buy-bar{ position:fixed; left:0; right:0; bottom:0; z-index:115; display:none; align-items:center; justify-content:space-between; gap:14px; background:rgba(7,11,20,.96); backdrop-filter:blur(12px); border-top:1px solid var(--line-2); box-shadow:0 -8px 30px rgba(0,0,0,.4); padding:10px 16px calc(10px + env(safe-area-inset-bottom)); }
.buy-bar__price{ display:flex; align-items:baseline; gap:8px; }
.buy-bar__price del{ color:var(--muted); font-size:12.5px; }
.buy-bar__price b{ font:800 20px var(--ff-head); color:#fff; }
.buy-bar__price small{ font-size:10.5px; color:var(--muted); font-weight:600; }
.mdv-ctabar{ position:fixed; left:0; right:0; bottom:0; z-index:130; background:rgba(7,11,20,.96); backdrop-filter:blur(14px); border-top:1px solid var(--line-2); box-shadow:0 -10px 34px rgba(0,0,0,.45); transform:translateY(110%); transition:transform .3s cubic-bezier(.4,0,.2,1); }
.mdv-ctabar.show{ transform:none; }
.mdv-ctabar__in{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:12px; }
.mdv-ctabar__tx b{ display:block; font:700 14.5px var(--ff-head); color:#fff; }
.mdv-ctabar__tx del{ color:var(--muted); font-size:12.5px; }
.mdv-ctabar__tx em{ font:800 18px var(--ff-head); font-style:normal; color:#fff; }
.mdv-ctabar__tx span{ font-size:12px; color:var(--muted); }
.mdv-ctabar__btns{ display:flex; gap:10px; flex:none; }

/* ---------- 18. Newsletter + Footer ---------- */
.nl-band{ background:linear-gradient(135deg, rgba(79,140,255,.08), rgba(139,92,246,.06)); border-top:1px solid var(--line); padding:56px 0; position:relative; overflow:hidden; }
.nl-band__in{ display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center; }
.nl-band__tx h2{ font-size:clamp(22px,3vw,32px); margin:6px 0 10px; }
.nl-band__tx h2 em{ font-style:normal; color:var(--brand); }
.nl-band__tx p{ font-size:14.5px; }
.nl-form__row{ display:flex; gap:10px; }
.nl-form__row input{ flex:1; padding:15px 20px; border:1.5px solid var(--line-2); border-radius:999px; font:15px var(--ff-body); color:#fff; background:rgba(255,255,255,.04); outline:none; transition:var(--tr); }
.nl-form__row input::placeholder{ color:var(--muted); }
.nl-form__row input:focus{ border-color:var(--brand); box-shadow:0 0 0 4px rgba(79,140,255,.15); }
.nl-msg{ margin-top:12px; font:600 13.5px var(--ff-head); padding:11px 16px; border-radius:12px; }
.nl-msg.ok{ background:var(--green-t); color:var(--green); } .nl-msg.err{ background:var(--red-t); color:var(--red); }
.nl-kvkk{ margin-top:12px; font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.nl-kvkk svg{ width:13px; height:13px; }
.nl-kvkk a{ color:var(--brand); font-weight:600; }
.footer{ background:var(--bg-2); border-top:1px solid var(--line); position:relative; }
.footer__cta{ position:relative; margin-top:56px; border-radius:var(--r-lg); overflow:hidden; background:var(--grad); display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:38px 48px; box-shadow:var(--glow); }
.footer__cta::before{ content:""; position:absolute; inset:0; background:radial-gradient(420px 200px at 88% 20%, rgba(255,255,255,.2), transparent 60%); }
.footer__cta > *{ position:relative; }
.footer__cta h2{ color:#fff; font-size:clamp(22px,3vw,34px); }
.footer__cta h2 em{ font-style:normal; color:#dfe8ff; }
.footer__cta small{ display:block; font:700 12px var(--ff-head); letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.85); margin-bottom:8px; }
.footer__cta-btns{ display:flex; gap:12px; flex-wrap:wrap; }
.footer__grid{ display:grid; grid-template-columns:1.4fr .8fr .9fr 1fr 1.1fr; gap:36px; padding:56px 0 40px; }
.footer__brand .logo{ margin-bottom:18px; }
.footer__brand p{ font-size:14px; margin-bottom:20px; max-width:340px; }
.socials{ display:flex; gap:8px; }
.socials a{ width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:var(--muted); border:1px solid var(--line-2); transition:var(--tr); }
.socials a:hover{ background:var(--brand); border-color:var(--brand); color:#fff; transform:translateY(-2px); }
.socials svg{ width:15px; height:15px; }
.footer h4{ color:#fff; font-size:14px; letter-spacing:.04em; margin-bottom:18px; position:relative; padding-bottom:10px; }
.footer h4::after{ content:""; position:absolute; left:0; bottom:0; width:28px; height:2.5px; border-radius:2px; background:var(--grad); }
.footer__links{ display:grid; gap:10px; }
.footer__links a{ font-size:14px; display:inline-flex; align-items:center; gap:9px; color:var(--text); transition:var(--tr); }
.footer__links a::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--brand); opacity:.45; transition:var(--tr); }
.footer__links a:hover{ color:#fff; transform:translateX(3px); }
.footer__links a:hover::before{ opacity:1; }
.footer__contact{ display:grid; gap:14px; font-size:14px; }
.footer__contact li{ display:flex; gap:12px; align-items:flex-start; }
.footer__contact svg{ flex:none; width:34px; height:34px; padding:8px; border-radius:10px; background:var(--brand-t); color:var(--brand); }
.footer__contact b{ display:block; color:#fff; font:600 13px var(--ff-head); margin-bottom:2px; }
.footer__contact a:hover{ color:var(--brand); }
.footer__pay-strip{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:20px 24px; border:1px solid var(--line); border-radius:var(--r-md); background:rgba(255,255,255,.02); }
.footer__pay-badges{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pay-logo{ height:38px; min-width:56px; padding:0 12px; border-radius:10px; background:#fff; display:inline-flex; align-items:center; justify-content:center; transition:var(--tr); }
.pay-logo:hover{ transform:translateY(-3px); }
.pay-logo svg{ height:20px; width:auto; }
.pay-logo--iban{ font:800 13px var(--ff-head); letter-spacing:.06em; color:#0b1120; }
.footer__trust{ display:flex; align-items:center; gap:10px 22px; flex-wrap:wrap; }
.footer__trust span{ display:inline-flex; align-items:center; gap:8px; font:600 12.5px var(--ff-head); color:var(--head); }
.footer__trust svg{ width:16px; height:16px; color:var(--green); }
.footer__disc{ font-size:12px; color:var(--muted); line-height:1.7; border-top:1px solid var(--line); margin-top:22px; padding:22px 0; }
.footer__bottom{ border-top:1px solid var(--line); padding:20px 0; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--muted); }
.footer__bottom a{ color:var(--head); font-weight:600; }
.footer__bottom a:hover{ color:var(--brand); }

/* Helpers: WhatsApp, to-top, cookiebar */
.wa-btn{ position:fixed; left:20px; bottom:20px; z-index:125; display:inline-flex; align-items:center; gap:9px; background:#25d366; color:#fff; padding:12px 18px 12px 14px; border-radius:40px; font:700 14px var(--ff-head); box-shadow:0 10px 26px rgba(37,211,102,.4); transition:transform .2s, box-shadow .2s, bottom .3s cubic-bezier(.4,0,.2,1); }
.wa-btn:hover{ transform:translateY(-3px); box-shadow:0 14px 32px rgba(37,211,102,.5); }
.wa-btn svg{ width:22px; height:22px; }
body.ctabar-on .wa-btn{ bottom:96px; }
.to-top{ position:fixed; right:22px; bottom:22px; z-index:110; width:46px; height:46px; border-radius:14px; background:var(--surface-2); border:1px solid var(--line-2); color:#fff; display:grid; place-items:center; box-shadow:var(--sh-md); opacity:0; visibility:hidden; transform: translateY(14px); transition: var(--tr); }
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--brand); border-color:var(--brand); }
.to-top svg{ width:18px; height:18px; }
body.ctabar-on .to-top{ bottom:96px; }
.cookiebar{ position:fixed; left:20px; right:20px; bottom:20px; z-index:140; max-width:640px; margin-inline:auto; background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r-md); box-shadow:var(--sh-lg); padding:22px 26px; display:none; }
.cookiebar.show{ display:block; animation: fadeIn .5s ease; }
.cookiebar p{ font-size:13.5px; margin-bottom:14px; }
.cookiebar p a{ color:var(--brand); font-weight:600; }
.cookiebar__row{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- 19. İç sayfalar ---------- */
.page-hero{ position:relative; overflow:hidden; padding:48px 0; border-bottom:1px solid var(--line); background:linear-gradient(180deg, rgba(79,140,255,.08), transparent); }
.page-hero .container{ position:relative; }
.page-hero__title{ font-family:var(--ff-head); font-weight:800; line-height:1.2; color:#fff; font-size:clamp(28px,3.8vw,42px); letter-spacing:-.02em; margin-bottom:12px; animation: heroIn .6s cubic-bezier(.4,0,.2,1) both; }
.breadcrumb{ display:flex; align-items:center; gap:10px; font:600 13.5px var(--ff-head); color:var(--muted); flex-wrap:wrap; animation: heroIn .6s .1s cubic-bezier(.4,0,.2,1) both; }
.breadcrumb a:hover{ color:var(--brand); }
.breadcrumb .sep{ color:var(--brand); }
.breadcrumb .cur{ color:var(--head); }
.doc-badge{ display:inline-flex; align-items:center; gap:8px; background:var(--grad); color:#fff; font:800 11px var(--ff-head); letter-spacing:.16em; text-transform:uppercase; padding:8px 14px; border-radius:30px; margin-bottom:14px; }
.doc-badge svg{ width:14px; height:14px; }

/* akış adımları */
.flow-steps{ display:flex; align-items:center; justify-content:center; margin-bottom:44px; flex-wrap:wrap; }
.flow-step{ display:flex; align-items:center; gap:10px; font:600 13.5px var(--ff-head); color:var(--muted); }
.flow-step .n{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--surface); border:2px solid var(--line-2); font:700 14px var(--ff-head); color:var(--muted); }
.flow-step.on{ color:#fff; }
.flow-step.on .n{ background:var(--grad); border-color:transparent; color:#fff; box-shadow:var(--glow); }
.flow-step.done .n{ background:var(--green-t); border-color:var(--green); color:var(--green); }
.flow-sep{ width:46px; height:2px; background:var(--line-2); margin:0 12px; }

/* sepet / ödeme */
.cart-wrap{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:36px; align-items:start; }
.cart-line{ display:flex; gap:20px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:20px; }
.cart-line img{ width:96px; height:96px; object-fit:cover; border-radius:12px; flex:none; border:1px solid var(--line); }
.cart-line__body{ flex:1; min-width:0; }
.cart-line__body h3{ font-size:16.5px; margin-bottom:4px; }
.cart-line__body h3 a:hover{ color:var(--brand); }
.cart-line__body small{ color:var(--muted); font-size:12.5px; display:block; }
.cart-line__body small.ok{ font-weight:600; margin-top:4px; }
.cart-line__price{ text-align:right; flex:none; }
.cart-line__price del{ display:block; color:var(--muted); font-size:13px; }
.cart-line__price b{ font:800 19px var(--ff-head); color:#fff; }
.cart-remove{ flex:none; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:var(--muted); border:1px solid var(--line-2); transition:var(--tr); }
.cart-remove:hover{ color:#fff; background:var(--red); border-color:var(--red); }
.cart-remove svg{ width:15px; height:15px; }
.cart-empty{ text-align:center; background:var(--surface); border:1px dashed var(--line-2); border-radius:var(--r-lg); padding:64px 24px; }
.cart-empty .ic{ width:72px; height:72px; margin:0 auto 18px; border-radius:20px; background:var(--brand-t); color:var(--brand); display:grid; place-items:center; }
.cart-empty .ic svg{ width:34px; height:34px; }
.cart-empty h3{ font-size:20px; margin-bottom:8px; }
.cart-empty p{ margin-bottom:22px; }
.summary-card{ background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:28px; position:sticky; top:calc(var(--header-h) + 20px); }
.summary-card h3{ font-size:17px; padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--line); }
.summary-row{ display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:14.5px; }
.summary-row b{ color:#fff; }
.summary-row--total{ border-top:1px dashed var(--line-2); margin-top:10px; padding-top:16px; font-size:16px; }
.summary-row--total b{ font:800 24px var(--ff-head); color:#fff; }
.summary-card .btn{ width:100%; margin-top:18px; }
.summary-note{ font-size:12px; color:var(--muted); margin-top:12px; text-align:center; }
.login-hint--flat{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:14px 20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:18px; }
.guest-badge{ display:inline-flex; align-items:center; gap:7px; background:var(--green-t); color:var(--green); border:1px solid rgba(34,197,94,.35); font:600 12px var(--ff-head); padding:7px 13px; border-radius:999px; }
.co-tabs{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px; }
.co-tabs button{ text-align:left; padding:15px 18px; border-radius:14px; background:var(--surface); border:2px solid var(--line); transition:var(--tr); position:relative; }
.co-tabs button b{ display:block; font:700 14px var(--ff-head); color:#fff; margin-bottom:3px; }
.co-tabs button small{ font-size:12px; color:var(--muted); line-height:1.4; display:block; }
.co-tabs button:hover{ border-color:rgba(79,140,255,.5); transform:translateY(-2px); }
.co-tabs button.on{ border-color:var(--brand); background:var(--brand-t); }
.co-tabs button.on::after{ content:"✓"; position:absolute; top:10px; right:12px; width:20px; height:20px; border-radius:50%; background:var(--brand); color:#fff; font:700 12px/20px var(--ff-head); text-align:center; }
.co-pane{ animation: fadeIn .3s ease; }

/* formlar */
.form{ background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:40px; box-shadow:var(--sh-sm); }
.form h3{ font-size:18px; margin-bottom:18px; }
.form__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.form__head h3{ margin:0; }
.form__sub{ margin:26px 0 16px !important; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form .field{ margin-bottom:18px; }
.form label{ display:block; font:600 13.5px var(--ff-head); color:var(--head); margin-bottom:8px; }
.form input, .form textarea, .form select{ width:100%; padding:14px 18px; border:1.5px solid var(--line-2); border-radius:12px; font:15px var(--ff-body); color:#fff; background:rgba(255,255,255,.04); transition:var(--tr); outline:none; }
.form input::placeholder, .form textarea::placeholder{ color:var(--muted); }
.form input:focus, .form textarea:focus, .form select:focus{ border-color:var(--brand); background:rgba(79,140,255,.06); box-shadow:0 0 0 4px rgba(79,140,255,.15); }
.form select{ appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c8aa0' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px; padding-right:42px; }
.form select option{ background:var(--bg-2); color:#fff; }
.form textarea{ min-height:140px; resize:vertical; }
.form input[type=checkbox]{ width:18px; height:18px; accent-color:var(--brand); }
.form__ok{ display:none; margin-top:16px; padding:14px 18px; border-radius:12px; background:var(--green-t); color:var(--green); font-weight:600; font-size:14.5px; border:1px solid rgba(34,197,94,.3); }
.form__ok.show{ display:block; animation: fadeIn .4s ease; }
.form__ok.err{ background:var(--red-t); color:#fca5a1; border-color:rgba(239,68,68,.35); }
.form--flat{ border:0; padding:0; background:none; box-shadow:none; }
.captcha-row label b{ color:var(--brand); font-size:15px; }
.input-ic{ position:relative; }
.input-ic > svg{ position:absolute; left:17px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--muted); pointer-events:none; }
.input-ic input{ padding-left:48px !important; }
.input-ic .pw-toggle{ position:absolute; right:8px; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:9px; display:grid; place-items:center; color:var(--muted); transition:var(--tr); }
.input-ic .pw-toggle:hover{ color:var(--brand); background:var(--brand-t); }
.input-ic .pw-toggle svg{ width:17px; height:17px; }
.info-banner{ display:none; align-items:flex-start; gap:11px; margin-top:16px; background:var(--gold-t); border:1px solid rgba(245,184,65,.4); border-radius:12px; padding:13px 16px; font-size:13.5px; color:#e6cc8c; line-height:1.6; }
.info-banner.show{ display:flex; animation:fadeIn .35s ease; }
.info-banner svg{ flex:none; width:17px; height:17px; color:var(--gold); margin-top:2px; }
.pay-methods{ display:grid; gap:14px; }
.pay-method{ position:relative; display:flex; gap:16px; align-items:flex-start; background:rgba(255,255,255,.02); border:2px solid var(--line); border-radius:var(--r-md); padding:20px 22px; cursor:pointer; transition:var(--tr); }
.pay-method:hover{ border-color:rgba(79,140,255,.45); }
.pay-method.selected{ border-color:var(--brand); background:var(--brand-t); }
.pay-method input{ position:absolute; opacity:0; pointer-events:none; }
.pay-method .radio{ flex:none; width:22px; height:22px; border-radius:50%; border:2px solid var(--line-2); display:grid; place-items:center; margin-top:2px; transition:var(--tr); }
.pay-method.selected .radio{ border-color:var(--brand); }
.pay-method.selected .radio::after{ content:""; width:10px; height:10px; border-radius:50%; background:var(--brand); }
.pay-method .ic{ flex:none; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--brand-t); color:var(--brand); }
.pay-method .ic svg{ width:22px; height:22px; }
.pay-method h4{ font-size:15.5px; margin-bottom:3px; }
.pay-method p{ font-size:13px; }
.pay-method--disabled{ cursor:not-allowed; opacity:.55; pointer-events:none; }
.soon-badge{ margin-left:auto; flex:none; align-self:center; background:var(--gold-t); color:var(--gold); border:1px solid rgba(245,184,65,.45); font:700 11px/1 var(--ff-head); letter-spacing:.1em; text-transform:uppercase; padding:7px 13px; border-radius:999px; }
.agree-row{ display:flex; gap:11px; align-items:flex-start; font-size:13.5px; margin-top:14px; }
.agree-row input{ width:18px; height:18px; margin-top:2px; accent-color:var(--brand); flex:none; }
.agree-row a{ color:var(--brand); font-weight:600; }

/* sipariş onay */
.order-hero{ text-align:center; max-width:660px; margin:0 auto 44px; }
.order-hero .ok-ic{ width:84px; height:84px; margin:0 auto 20px; border-radius:50%; background:var(--green-t); color:var(--green); border:1px solid rgba(34,197,94,.4); display:grid; place-items:center; animation: pop .5s cubic-bezier(.34,1.56,.64,1) both; }
.order-hero .ok-ic svg{ width:40px; height:40px; }
@keyframes pop{ from{ transform:scale(.4); opacity:0; } to{ transform:scale(1); opacity:1; } }
.order-hero .h1x{ font-family:var(--ff-head); font-weight:800; font-size:clamp(26px,3.4vw,36px); color:#fff; margin-bottom:10px; letter-spacing:-.02em; }
.order-hero p b{ color:#fff; }
.order-no{ display:inline-block; margin-top:12px; background:var(--surface); border:1px dashed var(--brand); color:#9cc0ff; font:700 15px var(--ff-mono); letter-spacing:.06em; border-radius:999px; padding:10px 22px; }
.iban-card{ background:var(--surface); border:1px solid rgba(79,140,255,.5); border-radius:var(--r-lg); padding:32px; max-width:660px; margin:0 auto; box-shadow:var(--sh-md); }
.iban-card h3{ display:flex; align-items:center; gap:10px; font-size:18px; margin-bottom:18px; }
.iban-card h3 svg{ width:22px; height:22px; color:var(--brand); }
.iban-row{ display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--line); font-size:14.5px; flex-wrap:wrap; }
.iban-row:last-of-type{ border-bottom:0; }
.iban-row span{ color:var(--muted); }
.iban-row b{ color:#fff; font-family:var(--ff-head); word-break:break-all; text-align:right; }
.iban-row b.hl{ color:var(--brand); font-size:16px; }
.iban-copy{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; width:100%; justify-content:center; }
.havale-note{ max-width:660px; margin:20px auto 0; }

/* hesap */
.auth-card{ background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg); box-shadow:var(--sh-md); overflow:hidden; }
.auth-card .tabs__nav{ background:rgba(0,0,0,.2); border-bottom:1px solid var(--line); padding:8px 8px 0; }
.auth-card .tabs__panel{ padding:30px 30px 34px; }
.auth-card .form{ border:0; padding:0; box-shadow:none; background:none; }
.auth-head{ text-align:center; margin-bottom:22px; }
.auth-head .ic{ width:56px; height:56px; margin:0 auto 12px; border-radius:16px; background:var(--grad); color:#fff; display:grid; place-items:center; box-shadow:var(--glow); }
.auth-head .ic svg{ width:26px; height:26px; }
.auth-head h2{ font-size:21px; margin-bottom:4px; }
.auth-head p{ font-size:13.5px; color:var(--muted); }
.auth-switch{ text-align:center; margin-top:18px; font-size:13.5px; }
.auth-switch a{ color:var(--brand); font-weight:700; cursor:pointer; }
.auth-switch a:hover{ text-decoration:underline; }
.acc-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:22px; }
.acc-head h2{ font-size:22px; margin-bottom:4px; }
.acc-head p{ color:var(--muted); font-size:13.5px; }
.acc-sub{ font-size:16px; margin-bottom:14px; }
.status-tag{ display:inline-block; margin-top:6px; font:700 11px var(--ff-head); letter-spacing:.05em; text-transform:uppercase; padding:6px 12px; border-radius:999px; }
.st-warn{ color:var(--gold); background:var(--gold-t); } .st-info{ color:#7fb0ff; background:var(--brand-t); } .st-ok{ color:var(--green); background:var(--green-t); } .st-err{ color:var(--red); background:var(--red-t); }
.tabs__nav{ display:flex; gap:8px; border-bottom:2px solid var(--line); flex-wrap:wrap; }
.tabs__nav button{ padding:14px 26px; font:700 15px var(--ff-head); color:var(--muted); border-radius:12px 12px 0 0; position:relative; transition:var(--tr); }
.tabs__nav button.active{ color:#fff; }
.tabs__nav button.active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2.5px; background:var(--grad); }
.tabs__panel{ display:none; padding-top:36px; }
.tabs__panel.active{ display:block; animation: fadeIn .45s ease; }

/* iletişim */
.contact-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.contact-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:32px 26px; text-align:center; transition:var(--tr); }
.contact-card:hover{ transform:translateY(-6px); box-shadow:var(--sh-lg); border-color:var(--line-2); }
.contact-card .ic{ width:60px; height:60px; margin:0 auto 18px; border-radius:18px; display:grid; place-items:center; background:var(--brand-t); color:var(--brand); }
.contact-card .ic.ic--wa{ background:rgba(37,211,102,.14); color:#25d366; }
.contact-card .ic svg{ width:26px; height:26px; }
.contact-card h3{ font-size:17px; margin-bottom:8px; }
.contact-card p{ font-size:14.5px; }
.contact-card__big{ font:800 18px var(--ff-head); color:#fff; }
.contact-card__big--sm{ font-size:15px; word-break:break-all; }
.contact-card .muted{ font-size:13px; }
.contact-card .link{ margin-top:6px; display:block; }
.contact-split{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start; }
.contact-steps{ display:grid; gap:14px; margin-top:26px; }
.contact-steps li{ display:flex; gap:14px; align-items:flex-start; }
.contact-steps span{ flex:none; width:34px; height:34px; border-radius:11px; background:var(--grad); color:#fff; font:800 14px var(--ff-head); display:grid; place-items:center; box-shadow:var(--glow); }
.contact-steps b{ display:block; font:700 14.5px var(--ff-head); color:#fff; }
.contact-steps small{ font-size:13px; color:var(--muted); }

/* dokümanlar */
.doc-wrap{ max-width:920px; }
.doc-meta{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:34px; }
.doc-meta > div{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 18px; }
.doc-meta small{ display:block; font:800 10.5px var(--ff-head); letter-spacing:.14em; text-transform:uppercase; color:var(--brand); margin-bottom:5px; }
.doc-meta b{ font:600 13.5px/1.5 var(--ff-head); color:#fff; }
.prose{ max-width:860px; }
.prose > * + *{ margin-top:1.1em; }
.prose h2{ font-size:24px; margin-top:1.7em; }
.prose h3{ font-size:19px; margin-top:1.5em; }
.prose p, .prose li{ font-size:15.5px; }
.prose strong, .prose b{ color:#fff; }
.prose a{ color:var(--brand); font-weight:600; }
.prose a:hover{ text-decoration:underline; }
.prose ul, .prose ol{ padding-left:4px; display:grid; gap:8px; }
.prose ul li{ position:relative; padding-left:24px; }
.prose ul li::before{ content:""; position:absolute; left:4px; top:10px; width:8px; height:8px; border-radius:50%; background:var(--grad); }
.prose ol{ counter-reset:li; }
.prose ol li{ position:relative; padding-left:32px; counter-increment:li; }
.prose ol li::before{ content:counter(li); position:absolute; left:0; top:2px; width:22px; height:22px; border-radius:7px; background:var(--brand-t); color:var(--brand); font:800 12px/22px var(--ff-head); text-align:center; }
.prose code{ font:500 .9em var(--ff-mono); background:rgba(255,255,255,.06); padding:2px 7px; border-radius:6px; color:#cfe0ff; }
.doc-body h2{ font-size:23px; margin:38px 0 14px; }
.doc-body h3{ font-size:17px; margin:26px 0 10px; }
.doc-note{ border:1px solid var(--line); border-left:4px solid var(--muted); background:var(--surface); border-radius:12px; padding:16px 20px; margin:18px 0; }
.doc-note b{ display:block; font:800 13px var(--ff-head); color:#fff; margin-bottom:6px; }
.doc-note p{ margin:0; font-size:14.5px; line-height:1.7; }
.doc-note--ok{ border-left-color:var(--green); } .doc-note--warn{ border-left-color:var(--gold); } .doc-note--danger{ border-left-color:var(--red); }
.doc-tbl-wrap{ overflow-x:auto; margin:16px 0; border:1px solid var(--line); border-radius:12px; }
.doc-tbl{ width:100%; border-collapse:collapse; background:var(--surface); font-size:13.5px; min-width:560px; }
.doc-tbl th{ background:var(--bg-2); color:#fff; text-align:left; font:800 12px var(--ff-head); letter-spacing:.06em; padding:11px 16px; }
.doc-tbl td{ padding:11px 16px; border-top:1px solid var(--line); vertical-align:top; line-height:1.6; }
.doc-tbl td:first-child{ font-weight:700; color:#fff; }
.doc-nav{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:44px; }
.doc-nav a{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 18px; transition:.25s; display:block; }
.doc-nav a:hover{ border-color:var(--brand); transform:translateY(-3px); box-shadow:var(--sh-md); }
.doc-nav small{ display:block; font:800 10.5px var(--ff-head); letter-spacing:.14em; text-transform:uppercase; color:var(--brand); margin-bottom:5px; }
.doc-nav b{ font:700 14px/1.45 var(--ff-head); color:#fff; }
.docs-list{ display:grid; gap:18px; max-width:880px; margin:0 auto; }
.docs-card{ display:flex; gap:22px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:26px 30px; transition:.25s; }
.docs-card:hover{ border-color:var(--brand); transform:translateY(-4px); box-shadow:var(--sh-lg); }
.docs-card__no{ font:800 36px var(--ff-head); background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; flex:0 0 auto; opacity:.9; }
.docs-card h3{ font-size:19px; margin-bottom:8px; }
.docs-card p{ font-size:14.5px; line-height:1.7; color:var(--muted); margin-bottom:12px; }
.docs-card__cta{ display:inline-flex; align-items:center; gap:7px; font:800 13px var(--ff-head); color:var(--brand); }
.docs-card__cta svg{ width:15px; height:15px; }

/* yasal */
.legal-wrap{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:44px; align-items:start; }
.legal-side{ position:sticky; top:calc(var(--header-h) + 20px); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:18px; display:grid; gap:4px; }
.legal-side h4{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:4px 10px 10px; }
.legal-side a{ padding:9px 12px; border-radius:9px; font:600 13.5px var(--ff-head); color:var(--text); transition:var(--tr); }
.legal-side a:hover{ background:rgba(255,255,255,.04); color:#fff; }
.legal-side a.on{ background:var(--brand-t); color:#9cc0ff; }
.legal-body{ max-width:none; }
.legal-upd{ font-size:13px; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 16px; }

/* 404 */
.err-wrap{ text-align:center; padding:20px 0; }
.err-code{ font:800 clamp(90px,16vw,160px)/1 var(--ff-head); letter-spacing:-.05em; color:#fff; margin-bottom:10px; }
.err-code span{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.err-wrap h1{ font-size:clamp(26px,3.6vw,40px); margin-bottom:12px; }
.err-wrap p{ max-width:480px; margin:0 auto 28px; }

/* ---------- 20. Responsive ---------- */
@media (max-width:1100px){
  .ld-hero__grid{ display:flex; flex-direction:column; gap:24px; }
  .ld-hero__copy{ display:contents; }
  .ld-hero .ld-kicker{ order:1; } .ld-hero h1{ order:2; margin-bottom:0; }
  .ld-hero__visual{ order:3; max-width:480px; width:100%; margin-inline:auto; }
  .ld-hero__sub{ order:4; margin-bottom:0; } .offer-list{ order:5; margin-bottom:0; } .hero__badges{ order:6; }
  .ld-float{ display:none; }
  .offer-card__media img{ max-height:230px; width:auto; margin-inline:auto; object-fit:contain; }
  .offer-card__media{ display:flex; justify-content:center; padding:8px 0; }
  .ld-hero{ padding:40px 0 60px; }
  .ld-hero h1{ font-size:clamp(28px,6vw,40px); }
  .ld-code-grid{ grid-template-columns:1fr; gap:40px; }
  .ld-family, .ld-feats, .ld-steps{ grid-template-columns:repeat(2,1fr); }
  .vgrid{ grid-template-columns:repeat(3,1fr); }
  .vfeat-grid{ grid-template-columns:1fr; gap:28px; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .contact-grid{ grid-template-columns:repeat(2,1fr); }
  .contact-split{ grid-template-columns:1fr; gap:36px; }
  .header__buy{ display:none; }
}
@media (max-width:1400px){ .header__phone{ display:none; } }
@media (max-width:900px){
  .nav{ display:none; }
  .burger{ display:block; }
  .subnav{ position:static; }
  section[id], div[id]{ scroll-margin-top:70px; }
  .vs-grid, .weak-grid{ grid-template-columns:minmax(0,1fr); }
  .vgrid{ grid-template-columns:1fr; } .vjoin{ display:none; }
  .cart-wrap{ grid-template-columns:minmax(0,1fr); }
  .summary-card{ position:static; }
  .flow-sep{ width:20px; margin:0 6px; }
  .flow-step .lbl{ display:none; } .flow-step.on .lbl{ display:inline; }
  .single-pack{ grid-template-columns:1fr; }
  .single-pack__price{ border-left:0; border-top:1px dashed var(--line-2); padding:32px 26px; }
  .single-pack__info{ padding:32px 26px; }
  .mdv-ctabar__tx b{ font-size:13px; } .mdv-ctabar__tx span{ display:block; }
  .mdv-ctabar__btns .btn--ghost{ display:none; }
  .buy-bar{ display:flex; }
  .mdv-ctabar{ display:none; }
  .legal-wrap{ grid-template-columns:1fr; }
  .legal-side{ position:static; }
  .nl-band__in{ grid-template-columns:1fr; gap:22px; }
  .nl-form__row{ flex-direction:column; } .nl-form__row .btn{ width:100%; }
  body:has(.buy-bar) .to-top, body:has(.buy-bar) .wa-btn{ bottom:84px; }
}
@media (max-width:640px){
  .section{ padding:64px 0; }
  .section--tight{ padding:44px 0; }
  .ld-sec-head{ margin-bottom:36px; }
  .ld-family, .ld-feats, .ld-steps, .vfeats, .docs-mini, .doc-meta, .doc-nav, .footer__grid, .form__row, .co-tabs, .contact-grid, .ld-code-grid, .contact-split, .legal-wrap{ grid-template-columns:minmax(0,1fr); }
  .cart-line{ display:grid; grid-template-columns:84px minmax(0,1fr); gap:12px 14px; position:relative; padding:16px; padding-right:56px; align-items:start; }
  .cart-line img{ width:84px; height:84px; }
  .cart-line__body h3{ font-size:15px; }
  .cart-line__price{ grid-column:1 / -1; display:flex; align-items:baseline; gap:10px; text-align:left; border-top:1px dashed var(--line); padding-top:10px; }
  .cart-line__price del{ display:inline; }
  .cart-remove{ position:absolute; top:12px; right:12px; }
  .stat-band__in{ grid-template-columns:1fr 1fr; }
  .stat{ padding:22px 14px; border-left:0; border-top:1px solid var(--line); }
  .stat b{ font-size:26px; }
  .vshow-panel{ padding:30px 16px 20px; }
  .vpack-bar .hero__actions{ width:100%; } .vpack-bar .hero__actions .btn{ width:100%; }
  .vpack-bar__price b{ font-size:26px; }
  .keyfacts{ padding:20px; }
  .keyfacts__dl > div{ grid-template-columns:1fr; gap:3px; padding:10px 0; }
  .single-pack__feats{ grid-template-columns:1fr; }
  .ld-final{ padding:44px 24px; }
  .form{ padding:28px 20px; }
  .form input, .form textarea, .form select{ font-size:16px; }
  .footer__cta{ padding:30px 24px; margin-top:44px; }
  .footer__grid{ gap:30px; padding:44px 0 36px; }
  .footer__pay-strip{ flex-direction:column; align-items:flex-start; gap:16px; padding:18px; }
  .wa-btn{ padding:13px; left:16px; bottom:16px; } .wa-btn span{ display:none; }
  body.ctabar-on .wa-btn{ bottom:102px; }
  .vmotto{ gap:14px; } .vmotto span{ letter-spacing:.2em; font-size:12px; }
  .code-panel pre{ min-height:360px; }
  .docs-card{ padding:20px; gap:14px; } .docs-card__no{ font-size:26px; }
  .page-hero{ padding:36px 0; }
  .offer-card__body{ padding:18px; } .offer-card__media img{ max-height:190px; }
  .offer-list li{ font-size:14.5px; }
  .logo__tx b{ font-size:17px; }
  .ld-kicker{ font-size:10px; letter-spacing:.12em; padding:8px 13px; }
}

/* erişilebilirlik */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:3px solid rgba(79,140,255,.55); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .rv{ opacity:1 !important; transform:none !important; }
}

/* küçük yapısal eklemeler */
.brand{ display:inline-flex; align-items:center; }
.tabs{ margin-top:0; }