:root{
  --bg:#070A12;
  --panel: rgba(255,255,255,.03);
  --panel2: rgba(255,255,255,.02);
  --text:#EAF0FF;
  --muted:#A9B4D0;
  --line:rgba(255,255,255,.09);
  --accent:#33A6FF;
  --accent2:#7C4DFF;
  --good:#7CFFB2;
  --bad:#FF9B9B;
  --shadow: 0 18px 55px rgba(0,0,0,.48);
  --radius:18px;
  --radius2:26px;
  --ease: cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  opacity:0;
  transition: opacity .18s ease;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: var(--bg);
  color:var(--text);
  line-height:1.55;
  text-rendering: optimizeLegibility;
}
body.page-ready{opacity:1}
body.page-leave{opacity:0}
@media (prefers-reduced-motion: reduce){
  body{transition:none}
}

a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 18px}

/* NAV */
.nav{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(14px);
  background: rgba(7,10,18,.58);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; gap:16px;
}
.brand{display:flex; align-items:center; gap:12px; font-weight:950; letter-spacing:.3px}
.nav-logo{
  width:54px; height:54px;
  border-radius:16px;
  object-fit:contain;
  box-shadow: 0 10px 30px rgba(51,166,255,.18);
  background: rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.12);
  padding:7px;
}
.nav-links{
  display:flex; gap:18px; align-items:center;
  color:var(--muted); font-weight:900; font-size:14px;
}
.nav-links a{
  padding:10px 14px; border-radius:12px;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.nav-links a:hover{background:rgba(255,255,255,.06); color:var(--text); transform: translateY(-1px)}
@media (max-width: 980px){ .nav-links{display:none} }

/* BUTTONS */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color:var(--text);
  font-weight:950;
  cursor:pointer;
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), filter .18s var(--ease), box-shadow .18s var(--ease);
  user-select:none;
  white-space:nowrap;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16)}
.btn.primary{
  background: linear-gradient(135deg, rgba(51,166,255,.96), rgba(124,77,255,.96));
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 16px 45px rgba(51,166,255,.22);
}
.btn-primary{ /* legacy alias */
  background: linear-gradient(135deg, rgba(51,166,255,.96), rgba(124,77,255,.96));
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 16px 45px rgba(51,166,255,.22);
}
.btn-primary:hover{filter: brightness(1.02); transform: translateY(-2px)}
.btn.primary:hover{filter: brightness(1.02); transform: translateY(-2px)}
.btn.ghost{background:transparent}
.btn-ghost{background:transparent}
.btn.secondary{background: rgba(255,255,255,.03)}
.btn.checkout{width:100%; justify-content:center; padding:14px 16px; border-radius:16px; box-shadow: 0 18px 55px rgba(51,166,255,.18)}
.btn.checkout:hover{transform: translateY(-2px)}
.btn .btn-ico{display:inline-flex; width:18px; justify-content:center}
.btn.small{padding:10px 12px; border-radius:12px; font-size:13px}
.btn.danger{border-color: rgba(255,90,90,.40); background: rgba(255,90,90,.07)}
.btn.danger:hover{border-color: rgba(255,90,90,.62); background: rgba(255,90,90,.12)}
.btn:disabled{opacity:.55; cursor:not-allowed; transform:none}

/* HERO */
.hero{padding:56px 0 26px}
/* Home hero: cleaner, more balanced layout */
.hero-grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:28px;
  align-items:stretch;
}
.hero-main{max-width: 900px; padding-right: 6px; display:flex; flex-direction:column; height:100%;}
@media (max-width: 1100px){ .hero-grid{grid-template-columns:1fr} .hero-card{max-width:none; justify-self:stretch;} }
.pill{
  display:inline-flex; gap:10px; align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  color:var(--muted);
  background: rgba(255,255,255,.035);
  font-weight:900;
  font-size:13px;
  backdrop-filter: blur(8px);
}
.pill b{color:var(--text)}
/* Headline scale tuned to match the right panel rhythm */
h1{margin:12px 0 12px; font-size:clamp(33px, 3.8vw, 46px); line-height:1.06; letter-spacing:-1.05px; text-shadow: 0 10px 40px rgba(0,0,0,.35)}
@media (max-width: 520px){ h1{font-size:40px} }
.sub{color:var(--muted); font-size:15px; max-width: 70ch; margin:0 0 18px; line-height:1.65}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin:18px 0 0}
/* Align bottom blocks (left note + right sales flow) without changing sizing */
.hero-main .note{margin-top:auto}
.hero-card .flow{margin-top:auto}

/* Restore inline bold inside the discount note (global b is block elsewhere) */
.note b{display:inline; margin:0; font-weight:800}


/* Mini satın alma akışı */
.mini-flow{
  margin-top:14px;
  padding:14px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(520px 160px at 18% 0%, rgba(51,166,255,.12), transparent 60%),
    radial-gradient(520px 160px at 90% 40%, rgba(124,77,255,.10), transparent 60%),
    rgba(255,255,255,.02);
}
.mini-flow-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.mini-flow-title{font-weight:990; letter-spacing:-.2px}
.mini-flow-badges{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.mini-flow-steps{
  list-style:none;
  counter-reset: miniStep;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
  padding:0;
  margin:12px 0 0;
}

.mini-flow-steps li{
  position: relative;
  padding:14px 12px 12px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  overflow:hidden;
}
.mini-flow-steps li::before{
  counter-increment: miniStep;
  content: counter(miniStep);
  position:absolute;
  top:10px;
  right:10px;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.85);
  font-weight: 990;
  font-size: 12px;
}

.mini-flow-steps b{display:block; font-weight:990; margin:0 0 2px}
.mini-flow-steps span{display:block; font-size:12px; color:var(--muted); font-weight:850}
.mini-flow-note{margin:10px 0 0; color:var(--muted); font-size:13px}
@media (max-width: 980px){
  .mini-flow-steps{grid-template-columns:1fr}
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid var(--line);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
}
.hero-card{
  /* Slightly tighter to match the left column baseline */
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow:hidden;
  /* Keep the card compact so it doesn't extend below the left note box */
  justify-content:flex-start;
  justify-self:end;
  max-width: 460px;
  height:100%;
  align-self:stretch;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.030), rgba(255,255,255,.012));
  box-shadow: 0 28px 90px rgba(0,0,0,.45);
}

/* HERO CARD FX */
.hero-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 28px;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  opacity:.25;
}
.hero-card{position:relative; transform: translateZ(0);}
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:stretch}
@media (max-width: 480px){ .stat-grid{grid-template-columns:1fr} }
.stat{
  padding:12px 13px; border-radius:20px;
  background: rgba(7,10,18,.42);
  border:1px solid rgba(255,255,255,.10);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  display:flex;
  flex-direction:column;
  min-height: 124px; /* keep all 4 cards equal height */
}
.stat:hover{transform: translateY(-2px); border-color: rgba(255,255,255,.18); background: rgba(7,10,18,.52)}
.stat .k{color:var(--muted); font-size:12px; font-weight:950; text-transform:uppercase; letter-spacing:.8px}
.stat .v{
  font-size:17px;
  font-weight:980;
  margin-top:6px;
  letter-spacing:-.2px;
  line-height:1.25;
  /* prevent one card from becoming much taller than the others */
  display:block;
  overflow:visible;
  white-space:normal;
  }
.small{
  font-size:13px;
  color:var(--muted);
  margin:0;
  margin-top:10px; /* start text from top; leave extra space at the bottom */
  padding-top:8px;
  line-height:1.35;
  display:block;
  overflow:visible;
  white-space:normal;
  }

/* SECTIONS */
section{padding:38px 0; scroll-margin-top: 120px;}
.section-title{display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin:0 0 14px}
.section-title h2{margin:0; font-size:26px; letter-spacing:-.4px}
.section-title p{margin:0; color:var(--muted)}
.grid3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px}
@media (max-width: 860px){ .grid3{grid-template-columns:1fr} }
.hero-card .feature{background: linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.010)); border-color: rgba(255,255,255,.10)}
.feature{
  padding:16px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.010));
  border:1px solid rgba(255,255,255,.10);
  min-height: 118px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.feature .t{font-weight:980; margin:0 0 6px}
.feature .d{color:var(--muted); margin:0; font-size:14px}

/* Satın Alma Akışı (Flow) */
.flow-card{
  position:relative;
  overflow:hidden;
  min-height: 138px;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.flow-card::before{
  content:"";
  position:absolute;
  inset:-40px -60px auto auto;
  width:180px;
  height:180px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%);
  pointer-events:none;
  opacity:.9;
}
.flow-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
}
.flow-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
}
.flow-num{
  width:34px;
  height:34px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
}
.flow-title{
  font-weight:950;
  letter-spacing:-.2px;
}
.flow-sub{
  margin-top:2px;
  color: var(--muted);
  font-size: 12px;
}
.flow-desc{
  margin:0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.tag{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:950; font-size:12px;
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--line);
  color:var(--muted);
  background: rgba(255,255,255,.02);
  margin-bottom:10px;
}
.tag i{
  width:8px; height:8px; border-radius:99px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display:inline-block;
}

/* PRODUCTS */
.products{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
@media (max-width: 860px){ .products{grid-template-columns:1fr} }
.product{
  padding:20px;
  border-radius: var(--radius2);
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  position:relative;
  overflow:hidden;
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
}
.product::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(600px 180px at 20% 0%, rgba(51,166,255,.16), transparent 55%),
              radial-gradient(600px 180px at 85% 30%, rgba(124,77,255,.14), transparent 55%);
  pointer-events:none;
}
.product > *{position:relative}
.product:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 24px 70px rgba(0,0,0,.52);
  background: rgba(255,255,255,.025);
}
.product h3{margin:0 0 6px}
.product .price{font-size:38px; font-weight:990; margin:10px 0 4px; letter-spacing:-.9px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.price-sub{font-size:14px; font-weight:900; color:var(--muted)}
.card-note{margin:10px 0 0; font-size:13px; color: rgba(233,240,255,.62); font-weight:850}
.features{margin:12px 0 0; padding-left:18px}
.features li{margin:7px 0; line-height:1.6; color: rgba(233,240,255,.84)}
.features li::marker{color: rgba(124,77,255,.85)}
.ribbon{
  position:absolute; top:14px; right:14px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(51,166,255,.24);
  background: radial-gradient(400px 120px at 20% 0%, rgba(51,166,255,.16), transparent 70%), rgba(0,0,0,.18);
  color: rgba(233,240,255,.92);
  font-weight: 980;
  font-size: 12px;
  letter-spacing: .2px;
  box-shadow: 0 18px 55px rgba(51,166,255,.10);
}
.muted{color:var(--muted)}
.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.spacer{flex:1}

/* CART */
.cart-grid{display:grid; grid-template-columns: 1.15fr .85fr; gap:14px; align-items:start}
@media (max-width: 980px){ .cart-grid{grid-template-columns:1fr} }

/* Steps (cart top) */
.steps{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
  padding:10px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  margin: 0 0 16px;
}
.step{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  color: var(--muted);
  font-weight: 950;
  font-size: 13px;
}
.step .n{
  width:22px;
  height:22px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: var(--text);
  font-weight: 980;
  font-size: 12px;
}
.step.active{
  color: var(--text);
  border-color: rgba(51,166,255,.28);
  background: radial-gradient(420px 120px at 20% 0%, rgba(51,166,255,.12), transparent 60%), rgba(255,255,255,.02);
  box-shadow: 0 18px 55px rgba(51,166,255,.10);
}

.trust-row{ display:flex; gap:10px; flex-wrap:wrap; }
.pill-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  color: var(--muted);
  font-weight: 950;
  font-size: 12px;
}

.field label{ display:block; margin-bottom:8px; }
.field small{ display:block; margin-top:8px; }
.cart, .invoice{
  position: relative;
  overflow: hidden;
  padding:18px;
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(520px 220px at 12% 0%, rgba(51,166,255,.10), transparent 60%),
    radial-gradient(520px 220px at 92% 32%, rgba(124,77,255,.09), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.010));
  box-shadow: 0 28px 90px rgba(0,0,0,.40);
}
.cart::before, .invoice::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  opacity:.18;
}
.cart > *, .invoice > *{ position: relative; z-index: 1; }

@media (min-width: 981px){ .invoice{ position: sticky; top: 110px; } }
.cart-top{
  display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  padding:10px 12px; border-radius:18px;
  background: rgba(0,0,0,.14);
  border:1px solid rgba(255,255,255,.08);
}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  color: var(--muted);
  font-size:12px; font-weight:950;
}
.badge b{color:var(--text)}
.cart-items{display:flex; flex-direction:column; gap:10px; margin-top:12px}
.cart-empty{
  /* Base empty-cart styling (used by multiple pages).
     Keep it premium and consistent: no dashed borders. */
  padding: 22px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  color: rgba(255,255,255,.78);
  font-weight: 900;
}
.cart-item{
  display:grid;
  grid-template-columns: 44px 1fr auto;
  gap:12px;
  align-items:center;
  padding:12px 12px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.09);
  background: rgba(0,0,0,.14);
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.cart-item:hover{transform: translateY(-1px); border-color: rgba(255,255,255,.16); background: rgba(0,0,0,.18)}
.icon{
  width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background: linear-gradient(135deg, rgba(51,166,255,.22), rgba(124,77,255,.20));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  font-size:18px;font-weight:980;
}
.ci-name{font-weight:980}
.ci-meta{font-size:13px;color:var(--muted); margin-top:2px}
.ci-actions{display:flex; align-items:center; gap:10px}
.ci-price{font-weight:980}

/* --- Cart items polish (visual only) --- */
.cart-item{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.18));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px rgba(0,0,0,.18);
}
.cart-item:hover{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 22px 52px rgba(0,0,0,.22);
}
.ci-name{font-size:16px; letter-spacing:.1px}
.ci-meta{font-size:12px}
.ci-actions{
  min-width: 140px;
  justify-content: flex-end;
}
.ci-price{
  font-size:16px;
  color: rgba(255,255,255,.92);
}
.cart-item .btn.small.danger{
  width:34px; height:34px;
  padding:0;
  border-radius:12px;
  display:inline-flex;
}

.divider{height:1px; background: rgba(255,255,255,.08); margin:12px 0}
.kv{display:flex; justify-content:space-between; gap:10px; padding:8px 0; color:var(--muted)}
.kv b{color:var(--text)}
.neg{color:var(--bad); font-weight:980}
.total-wrap{
  padding:12px 12px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: radial-gradient(420px 120px at 20% 0%, rgba(51,166,255,.14), transparent 60%),
              radial-gradient(420px 120px at 85% 50%, rgba(124,77,255,.12), transparent 60%),
              rgba(0,0,0,.14);
}
.total{
  display:flex; justify-content:space-between; gap:10px;
  padding-top:4px;
  font-size:18px;
}
.total b{font-size:26px; letter-spacing:-.6px}
.note{
  padding:12px 14px;
  border-radius: 16px;
  border:1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.02);
  color:var(--muted);
  font-size:13px;
  margin-top:14px;
}


.input{
  width: 100%;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: var(--text);
  outline: none;
  font-weight:850;
}
.input::placeholder{color: rgba(233,240,255,.45)}
.help{font-size:12px; color: var(--muted); margin-top:8px}

/* FAQ */
.faq{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; align-items:start}
.faq details{display:flex; flex-direction:column; align-self:start;}
.faq summary{display:flex; align-items:center; min-height:48px;}
@media (max-width: 860px){ .faq{grid-template-columns:1fr} }
details{border:1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.02); padding:12px 14px;}
summary{cursor:pointer; font-weight:980}
details p{color:var(--muted); margin:10px 0 0}

/* FOOTER */
.footer{padding:26px 0 40px; border-top:1px solid var(--line); color:var(--muted)}
.footer-grid{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.footer-brand{display:flex; align-items:center; gap:12px; font-weight:950; letter-spacing:.3px}
.footer-logo{width:60px; height:60px; border-radius:18px; padding:8px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.02); object-fit:contain}

.toast{
  position: fixed;
  bottom: 18px; left: 50%;
  transform: translateX(-50%);
  padding:12px 14px;
  border-radius: 16px;
  background: rgba(0,0,0,.62);
  border:1px solid rgba(255,255,255,.12);
  color: var(--text);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  z-index: 40;
  display:none;
  max-width: min(680px, 92vw);
}
.toast.show{display:block; animation: toastIn .18s var(--ease)}

@keyframes toastIn{
  from{ opacity:0; transform: translateX(-50%) translateY(8px); }
  to{ opacity:1; transform: translateX(-50%) translateY(0); }
}

/* Subtle divider between sections on dark bg */
.soft-divider{height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent); margin: 14px 0;}


/* Recommendation card (cart page) */
.recommend{ margin-bottom: 14px; }
.rec-card{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 14px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  background: radial-gradient(520px 160px at 20% 0%, rgba(51,166,255,.16), transparent 60%),
              radial-gradient(520px 160px at 85% 60%, rgba(124,77,255,.14), transparent 60%),
              rgba(0,0,0,.14);
}
.rec-title{ font-weight: 980; letter-spacing: -.2px; }
.rec-desc{ color: var(--muted); font-weight: 850; font-size: 13px; margin-top:4px; }
.rec-desc b{ color: var(--text); }
.rec-right{ display:flex; align-items:center; gap:10px; }

.rec-card{
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.rec-card:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 18px 44px rgba(0,0,0,.34);
}
.rec-card:before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(520px 160px at 20% 0%, rgba(51,166,255,.10), transparent 60%),
              radial-gradient(520px 160px at 85% 60%, rgba(124,77,255,.10), transparent 60%);
  pointer-events:none;
  opacity:.85;
}
.rec-left, .rec-right{ position:relative; z-index:1; }
.rec-title{ font-size: 14px; }
.rec-desc{ line-height: 1.35; font-size: 13.5px; }
#recommendSecond .btn.small{
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 920;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
#recommendSecond .btn.small:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.22);
}




/* Bundle discount highlight */
.badge-inline{
  margin-left: 10px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 10px;
  border-radius: 999px;
  border:1px solid rgba(124,255,178,.35);
  background: rgba(124,255,178,.08);
  color: rgba(190,255,220,.95);
  font-weight: 950;
  font-size: 12px;
  vertical-align: middle;
  white-space: nowrap;
}
.bundle-active #bundleDiscount{
  color: rgba(124,255,178,.95) !important;
}
.bundle-active{
  border-radius: 12px;
  padding: 8px 10px;
  background: radial-gradient(420px 120px at 20% 0%, rgba(124,255,178,.12), transparent 60%),
              rgba(255,255,255,.02);
  border: 1px solid rgba(124,255,178,.18);
  animation: bundlePulse 1.8s ease-in-out infinite;
}
@keyframes bundlePulse{
  0%{ box-shadow: 0 0 0 rgba(124,255,178,0); transform: translateY(0); }
  50%{ box-shadow: 0 16px 44px rgba(124,255,178,.10); transform: translateY(-1px); }
  100%{ box-shadow: 0 0 0 rgba(124,255,178,0); transform: translateY(0); }
}

.select{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color: var(--text);
  border-radius: 10px;
  padding:6px 10px;
  outline:none;
}
textarea{
  width:100%;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color: var(--text);
  border-radius: 12px;
  padding:10px 12px;
  resize: vertical;
}


/* Detail lists */
.list{margin:0; padding-left:18px}
.list li{margin:8px 0; line-height:1.5}


/* ===== Detail page UI (Yetkili Denetim / Guard) ===== */
.product-detail .detail-hero{
  display:grid;
  grid-template-columns:1.4fr 0.9fr;
  gap:18px;
  padding:18px 0 8px;
}
@media (max-width: 900px){
  .product-detail .detail-hero{ grid-template-columns:1fr; }
}
.detail-hero .lead{ margin-top:8px; }
.badge-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:14px 0;
}
.badge{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  font-size:13px;
}
.detail-actions{
  display:flex;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}

.detail-badges{margin-top:10px; display:flex; gap:10px; flex-wrap:wrap}
.info-card{
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.04);
  border-radius:14px;
  padding:14px;
}
.check-list,.mono-list{ margin:10px 0 0; padding-left:18px; }

.mono-list li{ margin:6px 0; }
.mono-list li .cmd-desc{ color: var(--muted); font-size:13px; line-height:1.35; }
.mono-list li code{ padding:2px 6px; border-radius:8px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); }


.check-list li{ margin:6px 0; }
.mono-list li{ margin:8px 0; }
.mono-list code{ font-size:13px; }

.detail-section{
  padding:18px 0;
  border-top:1px solid rgba(255,255,255,0.08);
}
.grid-3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  margin-top:12px;
}
@media (max-width: 900px){
  .grid-3{ grid-template-columns:1fr; }
}
.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:12px;
}
@media (max-width: 900px){
  .grid-2{ grid-template-columns:1fr; }
}
.feature-card{
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.03);
  border-radius:14px;
  padding:14px;
}

.accordion details{
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.03);
  border-radius:14px;
  padding:10px 12px;
  margin-top:10px;
}
.accordion summary{
  cursor:pointer;
  font-weight:600;
  list-style:none;
}
.accordion summary::-webkit-details-marker{ display:none; }


/* Detail flow list */
.flow-ol {
  margin: 10px 0 0;
  padding-left: 18px;
}
.flow-ol li {
  margin: 8px 0;
}

/* Improve details FAQ spacing */
.accordion details p {
  margin: 10px 0 0;
}


/* --- UI polish: package cards consistent actions + tone --- */
.product-card {
  display: flex;
  flex-direction: column;
}

.product-card .features {
  margin-bottom: 14px;
}

.product-actions {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.product-actions .btn {
  height: 40px;
  line-height: 40px;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 12px;
}

.product-actions .btn.btn-ghost {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
}

.product-actions .btn.btn-ghost:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
}

/* Customization note under title */
.custom-note {
  margin-top: 8px;
  max-width: 720px;
}

.custom-note a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Slightly soften card background / border for cleaner tone */
.product-card {
  border-color: rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.03) !important;
}

.product-card:hover {
  border-color: rgba(255,255,255,0.14) !important;
  background: rgba(255,255,255,0.04) !important;
}


/* --- Buttons: consistent icon spacing + responsive stacking --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.product-actions .btn {
  min-width: 160px;
}

/* On small screens, make action buttons stack and fill */
@media (max-width: 560px) {
  .product-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .product-actions .btn {
    width: 100%;
    min-width: 0;
  }
}

/* Ensure both action buttons look equally sized */
.product-actions .btn.btn-primary,
.product-actions .btn.btn-ghost {
  flex: 1 1 auto;
}

/* Prevent emoji/icon from affecting line height */
.btn .icon,
.btn svg {
  flex: 0 0 auto;
}


/* --- Align actions between cards --- */
.product-card .features {
  min-height: 140px; /* keeps buttons aligned even if bullet counts differ */
}

.card-note {
  margin: 0 0 12px;
  opacity: 0.85;
}

/* Slightly lower Guard actions to match visual baseline */
.product-card .product-actions {
  padding-top: 2px;
}


/* --- V2 alignment: force equal button baseline via CSS grid --- */
.product-card{
  display: grid !important;
  grid-template-rows: auto auto 1fr auto;
}

.product-card .price{ grid-row: 2; }
.product-card .features{ grid-row: 3; align-self: start; }
.product-card .product-actions{ grid-row: 4; align-self: end; }



/* Trial product highlight */
.product.trial {
  border: 1px dashed rgba(255,255,255,0.25);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
}
.badge-warn {
  background: rgba(255,200,0,0.15);
  color: #ffd66e;
  border: 1px solid rgba(255,200,0,0.35);
}



/* Payment result pages */
.panel { padding: 22px; }
.panel-head{
  display:flex; align-items:flex-start; gap:14px;
  padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 14px;
}
.panel-icon{
  width:42px; height:42px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 18px;
}
.panel-icon.ok{ background: rgba(0,255,140,0.10); border-color: rgba(0,255,140,0.20); }
.panel-icon.bad{ background: rgba(255,180,0,0.10); border-color: rgba(255,180,0,0.20); }

.kv{ display:flex; flex-direction:column; gap:10px; margin-top: 14px; }
.kv-row{
  display:flex; justify-content:space-between; gap:12px;
  padding: 10px 12px; border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.kv-k{ opacity:0.8; }
.kv-v{ font-weight: 600; }

.panel-actions{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top: 16px;
}
@media (max-width: 640px){
  .panel-actions{ flex-direction:column; }
  .panel-actions .btn{ width:100%; }
}



/* Return pages helpers */
.center-card{
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.badge-success{
  background: rgba(80, 200, 120, 0.12);
  border: 1px solid rgba(80, 200, 120, 0.35);
  color: rgba(160, 255, 200, 0.95);
}
.badge-danger{
  background: rgba(255, 80, 80, 0.10);
  border: 1px solid rgba(255, 80, 80, 0.35);
  color: rgba(255, 170, 170, 0.95);
}
.order-box{
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 14px 14px;
  background: rgba(255,255,255,0.03);
  text-align: left;
}
.order-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.order-row:last-child{ border-bottom: none; }


/* ===== Mini SSS ===== */
.faq{
  padding: 32px 0;
}
.faq-head{
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.faq-head h2{
  margin: 0;
}
.faq-list{
  display: grid;
  gap: 10px;
}
.faq-item{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  border-radius: 14px;
  overflow: hidden;
}
.faq-item summary{
  list-style: none;
  cursor: pointer;
  padding: 14px 14px;
  font-weight: 600;
}
.faq-item summary::-webkit-details-marker{
  display: none;
}
.faq-item[open] summary{
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.faq-body{
  padding: 12px 14px 14px;
  line-height: 1.55;
}

/* ===== Footer Notu ===== */
.footer-note{
  margin-top: 10px;
  font-size: 0.92rem;
  opacity: 0.88;
}

/* --- Subtle grain overlay to remove gradient banding --- */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("assets/noise.png");
  background-size: 220px 220px;
  opacity: .06;
  mix-blend-mode: overlay;
}

/* --- Keep section backgrounds unified (avoid hard seams) --- */
#features, #pricing, #how, #faq{
  background: transparent;
}

/* top-only subtle shade */
body::after{
  content:"";
  position: fixed;
  left:0; right:0; top:0;
  height:160px;
  pointer-events:none;
  z-index: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.35) 0%,
    rgba(0,0,0,.18) 45%,
    rgba(0,0,0,0) 100%
  );
}


/* --- No seam bands between sections --- */
#pricing::before,
#pricing::after,
#features::before,
#features::after,
#how::before,
#how::after,
#faq::before,
#faq::after{
  display: none !important;
  content: none !important;
}

#features, #pricing, #how, #faq{
  background: transparent !important;
  box-shadow: none;
  border-top: 0;
}

/* === CLEAN SALES THEME (eye-friendly, no gradients) === */
html, body{
  background-color:#0b1424;
  color:#e6ebf5;
}

/* section spacing for clarity */
section{
  padding-top:80px;
  padding-bottom:80px;
}

/* cards take the spotlight */
.card, .product, .feature{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}

/* primary buttons */
.btn.primary, .btn-primary{
  background: linear-gradient(135deg,#4f7cff,#7a5cff);
  border:none;
  box-shadow: 0 10px 30px rgba(79,124,255,.35);
}

/* remove any leftover overlays */
body::before, body::after{
  content:none !important;
}

/* ================================
   CART – SALES CHECKOUT REWORK
   ================================ */

/* Layout */
.cart-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:36px;
  align-items:start;
}
@media (max-width: 980px){
  .cart-grid{ grid-template-columns: 1fr; }
}

/* Left + right panels */
.cart, .invoice{
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  box-shadow: 0 26px 80px rgba(0,0,0,.45);
  padding:22px;
}

/* Make invoice the hero box */
.invoice{
  position: sticky;
  top: 96px;
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 34px 110px rgba(0,0,0,.55);
}

/* Headers */
.cart h3, .invoice h3{
  margin:0 0 14px 0;
  font-size:18px;
  color:#f3f6ff;
}

/* Top row in cart */
.cart-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.badge{
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  color:#dfe6ff;
}

/* Cart items */
.cart-items{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:14px;
}
.cart-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 14px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
}
.cart-item .icon{
  width:42px;
  height:42px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}
.ci-name{
  font-weight:700;
  color:#f1f5ff;
}
.ci-meta{
  font-size:13px;
  opacity:.75;
}
.ci-price{
  font-weight:800;
  color:#b9c6ff;
  white-space:nowrap;
}

/* Remove button: not aggressive */
.cart-item button[data-remove]{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  color:#c9d4ff;
  border-radius:12px;
  padding:10px 12px;
}
.cart-item button[data-remove]:hover{
  background: rgba(255,255,255,.06);
}

/* Divider */
.divider{
  border:0;
  height:1px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.14), rgba(255,255,255,0));
  margin:16px 0;
}

/* Invoice rows */
.kv{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 0;
  font-size:14px;
}
.kv b{
  font-size:15px;
  color:#f2f6ff;
}
.neg{ color:#8ff2b2; font-weight:800; } /* discount positive green */

/* Big total */
#payTotal, .pay-total, .total{
  font-size:34px;
  font-weight:900;
  letter-spacing:.2px;
}
.invoice .big-total{
  margin-top:12px;
  padding-top:14px;
  border-top:1px dashed rgba(255,255,255,.16);
}

/* Trust badges */
.pill-badge{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
  opacity:.9;
}

/* Main CTA */
.btn.primary.checkout, #checkoutShopier{
  width:100%;
  padding:16px 16px;
  font-size:17px;
  font-weight:800;
  border-radius:16px;
  background: linear-gradient(135deg,#4f7cff,#7a5cff);
  box-shadow:0 16px 45px rgba(79,124,255,.45);
  border:none;
}

/* Secondary actions */
#copyOrder, #goDiscord{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  color:#d7e0ff;
}
#copyOrder:hover, #goDiscord:hover{
  background: rgba(255,255,255,.06);
}

/* Hide coupon UI in cart for clean sales flow */
#couponSection, .coupon, .coupon-wrap{
  display:none !important;
}

/* Keep only ONE note field: show in invoice, hide in left panel */
.cart .field{ display:none; }
.invoice .field{ display:block; }

/* Textarea styling */
textarea{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  color:#eaf0ff;
}

/* === CART (clean + aligned) === */

/* IMPORTANT: Do NOT constrain body width (it breaks the global background) */
.page-cart{min-height:100vh;}

/* Cart page vertical tuning: move layout slightly up and reduce unused bottom space */
.page-cart section{padding-top:24px; padding-bottom:28px;}
.page-cart .section-title{margin-bottom:10px;}
.page-cart .steps{margin:10px 0 12px;}
.page-cart .cart-grid{margin-top:10px;}


/* Layout */
.page-cart .cart-grid{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:18px;
  align-items:start;
  margin-top:14px;
}

@media (max-width: 980px){
  .page-cart .cart-grid{grid-template-columns:1fr;}
  .page-cart .invoice{position:static;}
}

/* Stepper: full width inside container */
.page-cart .steps{
  margin: 12px 0 14px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}

/* Cards: match home style (subtle, no harsh radials that cause banding) */
.page-cart .cart,
.page-cart .invoice{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(0,0,0,.16) 80%);
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
}

/* Sticky invoice (desktop only) */
.page-cart .invoice{
  position: sticky;
  /* keep below sticky navbar */
  top: 86px;
}

/* Checkout panel (note + actions) */
.page-cart .checkout-panel{
  /* Pull slightly upward so it sits tighter under the main cart grid */
  margin-top:10px;
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:18px;
  align-items:start;
}
.page-cart .cart-left{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* Sipariş notu: üst tarafa taşınan kart (checkout panel ile aynı görünüm) */
.page-cart .order-note-card{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(0,0,0,.16) 80%);
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
  padding:16px 18px;
}
.page-cart .order-note-card .field{padding:0; border:0; background:transparent; box-shadow:none;}
.page-cart .checkout-panel .field,
.page-cart .checkout-panel .checkout-actions{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(0,0,0,.16) 80%);
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
  padding:16px 18px;
}

/* Invoice actions: "Ödemeye Geç" bloğunu faturanın altına yapıştır (yaklaşık 1cm boşluk) */
.page-cart .invoice-actions{
  margin-top:38px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(0,0,0,.16) 80%);
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
  padding:16px 18px;
}


/* Checkout panel: soldaki boş alan görünmesin (sadece hizalama için) */
.page-cart .checkout-panel .checkout-spacer{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  height: 1px;
}

/* Order note: premium input styling */
.page-cart .checkout-panel .field label,
.page-cart .order-note-card .field label{
  display:block;
  font-size: 15px;
  letter-spacing: .2px;
  margin-bottom:10px;
}
.page-cart .checkout-panel textarea,
.page-cart .order-note-card textarea{
  width:100%;
  min-height:76px;
  resize:vertical;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(0,0,0,.18) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  padding:12px 14px;
  color: rgba(255,255,255,.92);
  outline: none;
}
.page-cart .checkout-panel textarea::placeholder,
.page-cart .order-note-card textarea::placeholder{color: rgba(255,255,255,.50);}
.page-cart .checkout-panel textarea:focus,
.page-cart .order-note-card textarea:focus{
  border-color: rgba(122, 162, 255, .45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 4px rgba(122, 162, 255, .12);
}
.page-cart .checkout-actions .checkout{margin-top:2px;}

/* Actions: consistent button sizing/alignment */
.page-cart .checkout-actions .row{gap:10px;}
.page-cart .checkout-actions .btn{min-height:44px;}
.page-cart .checkout-actions .btn.checkout{min-height:52px;}

/* Note card: keep it compact */
.page-cart .checkout-panel .field small,
.page-cart .order-note-card .field small{
  display:block;
  margin-top:10px;
  color: rgba(255,255,255,.62);
}

@media (max-width: 980px){
  .page-cart .checkout-panel{grid-template-columns:1fr;}
  .page-cart .checkout-panel .checkout-spacer{display:none;}
}

/* Top bar inside cart card */
.page-cart .cart-top{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  /* No extra layer */
  padding:0;
  background: transparent;
  border: 0;
  border-radius: 0;
  /* Pin the button to the header line (align with "Sepet") */
  position:absolute;
  top: 22px;
  right: 22px;
  margin:0;
}

/* Let the clear button sit on the same line as the cart title */
.page-cart .cart{ position:relative; }

.page-cart .cart-top .spacer{ display:none; }

/* Slightly smaller clear button to match the header scale */
.page-cart #clearCart{
  font-size: 13px;
  padding: 8px 12px;
  min-height: 34px;
}

/* Cart header spacing: keep compact and aligned */
.page-cart .cart h3{ margin-bottom: 16px; }

/* Add a little breathing room below the header before the product rows */
.page-cart .cart-items{ margin-top: 22px; }
.page-cart .cart .divider{ margin: 10px 0; }

/* Make the product row look balanced */
.page-cart .cart-item{
  grid-template-columns: 44px 1fr auto;
}

/* Total area: keep hierarchy but avoid huge text */
.page-cart .total{font-size:17px;}
.page-cart .total b{font-size:24px;}

/* Invoice: slightly more compact + cleaner hierarchy */
.page-cart .invoice{
  padding: 14px;
}
.page-cart .invoice h3{
  font-size: 16px;
  margin-bottom: 10px;
}

/* Invoice: premium summary block (improves Ara Toplam look) */
.page-cart .invoice 
/* Cart page: remove outer invoice shell so only the summary card remains */
.page-cart .invoice{
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.page-cart .invoice::before{ display:none; }
.page-cart .invoice > *{ position: relative; z-index: 1; }

/* Invoice title now lives inside .invoice-summary */
.page-cart .invoice-summary .invoice-title{
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .2px;
  margin: 2px 0 10px;
  color: rgba(240,248,255,.92);
}

.invoice-summary{
  /* Remove the back/outer layer behind the invoice content */
  border-radius: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Keep the invoice content premium by styling the summary rows directly */
.page-cart .invoice-summary{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-cart .invoice-summary .kv{
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(116,159,255,.12) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.16));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 30px rgba(0,0,0,.28);
}

/* Rounded group edges for the three summary rows */
.page-cart .invoice-summary .kv:first-of-type{ border-radius: 18px 18px 0 0; }
.page-cart .invoice-summary #bundleRow{ border-top: 0; border-radius: 0; }
.page-cart .invoice-summary #couponDiscountRow{ border-top: 0; border-radius: 0 0 18px 18px; }

/* Prevent generic "kv + kv" borders from altering the grouped summary panel */
.page-cart .invoice-summary .kv + .kv{ border-top: 0 !important; }

/* The divider between summary and total becomes redundant once the outer shell is removed */
.page-cart .invoice-summary > .divider{ display:none; }
.page-cart .invoice .kv{
  /* force 2-column layout (global .kv is overridden elsewhere) */
  display:flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: rgba(225,236,255,.78);
}
.page-cart .invoice .kv span{ display:flex; align-items:center; gap:8px; }
.page-cart .invoice .kv b,
.page-cart .invoice .kv .neg{
  font-size: 14.5px;
  font-weight: 980;
  letter-spacing: .2px;
}
.page-cart .invoice #subtotal{
  font-size: 16px;
  color: rgba(240,247,255,.98);
}
.page-cart .invoice .kv .neg{
  color: #7fffb6;
}
.page-cart .invoice .badge-inline{
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  border: 1px solid rgba(127,255,182,.35);
  background: rgba(127,255,182,.10);
  color: rgba(203,255,227,.95);
}
.page-cart .invoice .kv + .kv{ border-top: 1px solid rgba(255,255,255,.06); }
.page-cart .invoice .kv b{
  font-size: 14.5px;
}
.page-cart .invoice .total-wrap{
  margin-top: 12px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(140% 110% at 100% 0%, rgba(112, 76, 255, .22) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}

.page-cart .invoice .divider{ margin: 10px 0; opacity: .7; }

/* Make the separator inside the invoice summary look intentional */
.page-cart .invoice .invoice-summary .divider{
  height: 1px;
  margin: 10px 0;
  border: 0;
  opacity: 1;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.14), rgba(255,255,255,0));
}
.page-cart .invoice .trust-row{ gap: 8px; }
.page-cart .invoice .pill-badge{
  padding: 6px 8px;
  font-size: 10px;
}

/* Big CTA: consistent height + full width */
.page-cart .checkout{
  width:100%;
  justify-content:center;
  font-weight: 980;
}

/* Recommendation band: cleaner */
.page-cart .rec-card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}



@media (min-width: 981px){
  .hero-grid{align-items:stretch;
}
  .hero-main{display:flex; flex-direction:column; min-height: 100%;}
  .hero-main .note{margin-top:auto;}
}



/* --- Hero bottom alignment (note + sales flow) --- */
.hero-grid{align-items:stretch;}
.hero-main{display:flex; flex-direction:column;}
.hero-main .note{margin-top:auto;}
.hero-card{display:flex; flex-direction:column;}
.hero-card .feature.flow{margin-top:auto;}


/* --- Fine typography (smaller text) while keeping bottom alignment --- */
.hero-main .note{font-size:13px; line-height:1.5;}
.hero-main .note b{font-size:13px;}
.hero-card .feature.flow{font-size:13px;}
.hero-card .feature.flow p{font-size:13px; line-height:1.55;}


/* --- Enhancements: Product clarity + comparison (safe, additive) --- */
.card-sub{
  margin:6px 0 0;
  font-size:13px;
  line-height:1.35;
  color:rgba(255,255,255,.72);
}

.bundle-reco{
  margin-top:18px;
  padding:14px 14px;
  border-radius:16px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.bundle-reco p{
  margin:0;
  font-size:14px;
  line-height:1.5;
  color:rgba(255,255,255,.82);
}

/* Old compare CSS removed to prevent layout conflicts */


/* Footer links + legal lists */
.footer-links{display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:flex-end; text-align:right;}
.footer-links a{
  color: rgba(233,240,255,.72);
  font-weight: 850;
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px solid rgba(233,240,255,.16);
  padding-bottom: 2px;
}
.footer-links a:hover{ color: rgba(233,240,255,.92); border-bottom-color: rgba(233,240,255,.28); }
.legal{padding:26px 0 10px;}
.legal li{margin:8px 0;}



/* Cart note */
.cart-note{
  margin: 14px auto 0;
  max-width: min(920px, 92vw);
  color: var(--muted);
  border:1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.02);
  padding: 10px 12px;
  border-radius: 14px;
}


/* Payment result pages */
.result-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
  margin-top: 14px;
  margin-bottom: 14px;
}
@media (max-width: 860px){
  .result-grid{grid-template-columns: 1fr;}
}
.result-card{
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  border-radius: 18px;
  padding: 14px 14px;
}
.result-title{
  margin: 0 0 10px;
  font-size: 16px;
  letter-spacing: .2px;
}
.result-steps{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.55;
}
.result-steps li{margin: 6px 0;}
.result-list{
  margin: 0;
  padding-left: 16px;
  color: var(--muted);
  line-height: 1.55;
}
.result-list li{margin: 6px 0;}
.result-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.result-hint{margin: 10px 0 0;}


/* Quality & Performance Tweaks */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, .btn {
  transition: background-color .15s ease, color .15s ease, transform .1s ease;
}
button:active, .btn:active {
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* Mobile spacing polish */
@media (max-width: 640px){
  main.container{
    padding-left: 16px;
    padding-right: 16px;
  }
  h1{font-size: 22px;}
  h2{font-size: 18px;}
}


/* Why Vantix */
.why-vantix{padding: 28px 0 10px;}
.why-head{
  text-align: center;
  margin: 0 auto 16px;
  max-width: 760px;
}
.why-head h2{
  margin:0 0 8px;
  font-size: 22px;
  letter-spacing: .2px;
}
.why-head .muted{
  margin:0;
  line-height: 1.55;
}

.why-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 860px){
  .why-grid{grid-template-columns: 1fr;}
}

.why-card{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  border-radius: 20px;
  padding: 16px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
}
.why-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 42px rgba(0,0,0,.22);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.045);
}

.why-title{
  font-weight: 950;
  margin-bottom: 8px;
  color: var(--text);
  letter-spacing: .15px;
}
.why-text{
  color: var(--muted);
  line-height: 1.6;
}

@media (max-width: 640px){
  .why-vantix{padding-top: 22px;}
  .why-head h2{font-size: 20px;}
}

/* why-vantix visibility fix */
.why-vantix{
  position: relative;
  z-index: 1;
  margin-top: 12px;
}


/* Snow (Winter toggle) */
.snow-canvas{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9990;
}
.snow-toggle{
  position: relative;
  z-index: 1;
width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.035);
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 34px rgba(0,0,0,.22);
  transition: transform .14s ease, background-color .14s ease, border-color .14s ease, box-shadow .14s ease, opacity .14s ease;
}
.snow-toggle:hover{
  border-color: rgba(255,255,255,.26);
  background: rgba(255,255,255,.05);
  transform: translateY(-1px);
  box-shadow: 0 16px 44px rgba(0,0,0,.26);
}
.snow-toggle:active{
  transform: translateY(0px);
}
.snow-toggle .snow-ico{
  font-size: 16px;
  line-height: 1;
  opacity: .9;
}
.snow-toggle[aria-pressed="false"]{
  opacity: .75;
}
/* Snow toggle (header) */
.snow-toggle{ flex: 0 0 auto; }
.snow-toggle .snow-ico{ display:block; transform-origin: 50% 50%; }
.snow-toggle[aria-pressed="true"]{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); box-shadow: 0 10px 26px rgba(0,0,0,.22); }
.snow-toggle[aria-pressed="true"] .snow-ico{ animation: snowSpin 2.2s linear infinite; }
.snow-toggle:hover{ transform: translateY(-1px) scale(1.02); }
@keyframes snowSpin{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }



/* --- Nav utility: cart badge + action alignment --- */
.nav-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.cart-btn{ position:relative; }
.cart-badge{
  position:absolute;
  top:-6px; right:-6px;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  font-size:12px;
  line-height:18px;
  text-align:center;
  background: var(--accent);
  color:#fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  display:none;
}
.cart-badge.is-visible{ display:inline-block; }
.cart-btn.is-active{ opacity:.85; cursor:default; }

/* Add-to-cart disabled state (no layout change) */
button.is-disabled, .btn.is-disabled{
  opacity: .6;
  cursor: not-allowed;
}


/* --- Cart premium tweaks --- */
.page-cart .cart-items{display:flex; flex-direction:column; gap:12px;}
.page-cart .cart-empty{
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 14px 34px rgba(0,0,0,.28);
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* subtle accent bar for the empty state (visible improvement without changing layout) */
.page-cart .cart-empty::after{
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(124, 92, 255, .95), rgba(124, 92, 255, .25));
  opacity: .75;
  pointer-events: none;
}

.page-cart .cart-empty::before{
  content: "";
  position: absolute;
  inset: -40px;
  background: radial-gradient(closest-side, rgba(124, 92, 255, .18), rgba(124, 92, 255, 0) 60%);
  pointer-events: none;
  transform: translate(18%, -10%);
}

.page-cart .cart-empty > *{ position: relative; }
.page-cart .cart-empty .ce-title{font-weight:980; font-size:18px; margin-bottom:6px;}
.page-cart .cart-empty .ce-desc{color: rgba(255,255,255,.78); margin-bottom:12px; line-height:1.4;}
.page-cart .cart-empty .ce-actions{display:flex; gap:10px; flex-wrap:wrap;}

.page-cart .cart-empty .btn.primary{
  padding: 10px 14px;
  border-radius: 14px;
}

.page-cart .cart-item{
  display:grid;
  grid-template-columns: 44px 1fr auto;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.page-cart .cart-item .icon{
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:14px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.page-cart .ci-actions{display:flex; align-items:center; gap:12px;}
.page-cart .ci-actions .btn.danger{min-width:44px; padding:0; display:grid; place-items:center;}
.page-cart .ci-price{font-weight:980;}
.page-cart .ci-meta{color: rgba(255,255,255,.75); margin-top:2px; font-size:13px;}

.page-cart .checkout-panel{
  margin-top:16px;
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:18px;
  align-items:stretch;
}
.page-cart .checkout-panel .checkout-actions{display:flex; flex-direction:column; justify-content:space-between;}
.page-cart .checkout-actions .checkout{font-size:16px; letter-spacing:.2px;}
.page-cart .checkout-actions .checkout-sub{
  margin-top:10px;
  color: rgba(255,255,255,.75);
  font-size:13px;
  line-height:1.35;
}
@media (max-width: 980px){
  .page-cart .checkout-panel{grid-template-columns:1fr;}
}


/* --- Invoice vertical compact (requested) --- */
.invoice{
  /* keep left/right width; compact top/bottom */
  padding:14px 18px;
}
.invoice h3{
  margin-bottom:10px;
}
.invoice .kv{
  padding:6px 0;
}
.invoice .divider{
  margin:10px 0;
}
.invoice .total-wrap{
  padding:10px 12px;
}
.invoice #paymentHelp{
  margin-top:4px !important;
}
.invoice .trust-row{
  margin-top:8px !important;
}
.invoice .pill-badge{
  padding:7px 10px;
  font-size: 11px;
}




/* === Premium Cart Item Treatment (visual only) === */
.page-cart .cart-items{gap:12px}
.page-cart .cart-item{
  position: relative;
  overflow: hidden;
  padding:14px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.11);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.24));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 22px 60px rgba(0,0,0,.22);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.page-cart .cart-item::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(620px 90px at 18% 0%, rgba(51,166,255,.18), transparent 62%),
    radial-gradient(520px 90px at 92% 45%, rgba(124,77,255,.16), transparent 64%);
  opacity:.95;
  pointer-events:none;
  z-index:0;
}
.page-cart .cart-item::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:42px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), transparent);
  opacity:.55;
  pointer-events:none;
  z-index:0;
}
.page-cart .cart-item > *{position:relative; z-index:1}
.page-cart .cart-item:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 28px 72px rgba(0,0,0,.26);
}
.page-cart .icon{
  width:46px;height:46px;border-radius:16px;
  background:
    radial-gradient(40px 40px at 30% 20%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, rgba(51,166,255,.22), rgba(124,77,255,.22));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 16px 34px rgba(0,0,0,.26);
}
.page-cart .ci-actions{min-width: 150px; gap:12px}
.page-cart .ci-price{
  font-size:16px;
  font-weight: 980;
  color: rgba(255,255,255,.94);
  padding:6px 10px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.page-cart .cart-item .btn.small.danger{
  width:36px;height:36px;
  border-radius: 12px;
  background: rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.10);
}
.page-cart .cart-item .btn.small.danger:hover{
  background: rgba(0,0,0,.22);
  border-color: rgba(255,255,255,.16);
}




/* v17 – Invoice summary: less boxy, more premium (vertical-only visual upgrade) */
.page-cart .invoice-summary{
  gap: 10px;
}

.page-cart .invoice-summary .kv{
  position: relative;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background:
    radial-gradient(140% 180% at 15% 0%, rgba(124,77,255,.12) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(180deg, rgba(255,255,255,.030), rgba(0,0,0,.18));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 26px rgba(0,0,0,.22);
}

.page-cart .invoice-summary .kv:first-of-type,
.page-cart .invoice-summary #bundleRow,
.page-cart .invoice-summary #couponDiscountRow{
  border-top: 1px solid rgba(255,255,255,.10) !important;
}

.page-cart .invoice-summary .kv span{
  font-size: 12.5px;
  letter-spacing: .2px;
  color: rgba(225,236,255,.72);
}

.page-cart .invoice-summary .kv b,
.page-cart .invoice-summary .kv .neg{
  font-size: 15px;
  font-weight: 980;
  letter-spacing: .2px;
}

.page-cart .invoice-summary #subtotal{
  font-size: 17px;
  color: rgba(245,250,255,.98);
}

/* Subtle accent bar for discount rows */
.page-cart .invoice-summary #bundleRow,
.page-cart .invoice-summary #couponDiscountRow{
  padding-left: 18px !important;
}

.page-cart .invoice-summary #bundleRow::before,
.page-cart .invoice-summary #couponDiscountRow::before{
  content:"";
  position:absolute;
  left:10px;
  top:10px;
  bottom:10px;
  width:2px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(127,255,182,.0), rgba(127,255,182,.55), rgba(127,255,182,.0));
  opacity:.9;
}

/* =========================
   CART LAYOUT TIDY (v25-01-02)
   Purpose: premium alignment + cleaner spacing WITHOUT changing markup/IDs.
   ========================= */
.page-cart .cart-grid{
  /* tighter, more intentional proportions */
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
  max-width: 1120px;
  margin: 0 auto;
}
@media (min-width: 1280px){
  .page-cart .cart-grid{ grid-template-columns: minmax(0, 1fr) 380px; }
}
@media (max-width: 980px){
  .page-cart .cart-grid{ max-width: 720px; }
}

/* Keep sidebar visible while scrolling (desktop) */
@media (min-width: 981px){
  .page-cart .invoice{
    position: sticky;
    top: 92px; /* header + breathing room */
  }
}

/* Unify card spacing */
.page-cart .cart,
.page-cart .order-note-card{
  padding: 20px;
}
.page-cart .cart h3{
  margin-bottom: 8px;
}
.page-cart .cart-top{
  margin: 8px 0 14px;
}
.page-cart .divider{
  margin: 16px 0;
}

/* Cart list rhythm */
.page-cart .cart-items{
  display:flex;
  flex-direction: column;
  gap: 12px;
}
.page-cart .cart-item{
  padding: 14px 14px;
  border-radius: 20px;
  grid-template-columns: 46px minmax(0, 1fr) auto;
}
.page-cart .ci-name{ line-height: 1.1; }
.page-cart .ci-meta{ line-height: 1.2; }

/* Price + actions feel like one compact cluster */
.page-cart .ci-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  justify-content: flex-end;
  min-width: 170px;
}
.page-cart .ci-price{
  padding: 6px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
}

/* Coupon row: prevent wrap chaos */
.page-cart #couponRow{
  flex-wrap: nowrap;
}
.page-cart #couponRow .input{ flex: 1; min-width: 160px; }
.page-cart #couponRow .btn{ white-space: nowrap; }
@media (max-width: 620px){
  .page-cart #couponRow{ flex-wrap: wrap; }
  .page-cart #couponRow .btn{ flex: 1; }
}

/* Sidebar spacing: summary + actions should feel like a single stack */
.page-cart .invoice-actions{
  margin-top: 16px;
}

/* Fatura header stronger hierarchy */
.page-cart .invoice-summary .invoice-title{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 8px;
}


/* --- Cart page: lift content so page fits without extra top gap --- */
body.page-cart section{padding-top:16px; padding-bottom:28px;}
body.page-cart .section-title{margin-bottom:12px;}
body.page-cart .steps{margin-bottom:14px;}

/* --- Cart page: move content further up (safe overrides) --- */
body.page-cart section{
  padding-top: 8px !important;
}
body.page-cart .section-title{
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.page-cart .steps{
  margin-top: 8px !important;
  margin-bottom: 10px !important;
}
body.page-cart .cart-grid{
  margin-top: 8px !important;
}

/* === Cart: slightly compact invoice panel (requested) === */
.page-cart .invoice{ padding:16px; }
.page-cart .invoice-summary{ gap:10px; }
.page-cart .invoice-summary .invoice-title{
  font-size:17px;
  margin: 0 0 8px;
}
.page-cart .invoice-summary .kv{
  padding:8px 10px;
  border-radius:14px;
}
.page-cart .invoice-summary .divider{ margin: 2px 0; }
.page-cart .invoice .total-wrap{
  padding:10px 10px;
  border-radius:16px;
}
.page-cart .invoice .total{
  font-size:15px;
}
.page-cart .invoice .total b{ font-size:20px; }
.page-cart .invoice .help{ font-size:12.5px; line-height:1.35; }

.page-cart .invoice .trust-row{ gap:8px; margin-top:8px; }
.page-cart .invoice .pill-badge{ padding:6px 9px; font-size:12px; }

.page-cart .invoice-actions{
  margin-top:26px;
  padding:14px 16px;
  border-radius:20px;
}
.page-cart .invoice-actions #checkoutShopier{
  padding:14px 14px;
  font-size:16px;
  border-radius:14px;
}
.page-cart .invoice-actions .checkout-sub{ margin-top:10px; font-size:13px; }
.page-cart .invoice-actions .row{ margin-top:12px; gap:10px; }
.page-cart .invoice-actions #copyOrder,
.page-cart .invoice-actions #goDiscord{
  padding:12px 12px;
  border-radius:14px;
  font-size:14px;
}

/* --- Cart page: tighten invoice spacing (micro compact) --- */
.page-cart .invoice{
  padding: 14px 14px;
}
.page-cart .invoice-summary{
  gap: 6px;
}
.page-cart .invoice .kv{
  padding: 10px 12px;
}
.page-cart .invoice .divider{
  margin: 6px 0;
}
.page-cart .invoice .total-wrap{
  margin-top: 10px;
  padding: 10px 10px;
}
.page-cart .invoice .trust-row{
  margin-top: 6px;
  gap: 6px;
}
.page-cart .invoice-actions{
  margin-top: 10px;
}
.page-cart .invoice-actions .checkout-sub{
  margin-top: 8px;
}
.page-cart .invoice-actions .row{
  margin-top: 8px;
  gap: 8px;
}
.page-cart .invoice-actions #copyOrder,
.page-cart .invoice-actions #goDiscord{
  padding: 11px 11px;
}

/* Cart: Clear button – slightly more premium without changing layout */
body.page-cart #clearCart{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 10px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
  padding: 10px 14px;
}
body.page-cart #clearCart:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  border-color: rgba(255,255,255,.20);
  transform: translateY(-1px);
}
body.page-cart #clearCart:active{
  transform: translateY(0px);
}


/* Cart: clear button spacing tweak (only cart page) */
body.page-cart .cart .cart-top{
  margin-top:-6px;
  margin-bottom:14px;
  padding:8px 12px;
}
body.page-cart .cart #clearCart{
  position: relative;
  top: -6px;
}



/* Sepet: ödeme altı mini bilgi */
.checkout-mini{margin-top:8px;font-size:12px;opacity:.85;line-height:1.4;}


/* --- FIX: Sepeti temizle butonu 'Sepet' başlığıyla aynı hizaya gelsin (page-cart) --- */
body.page-cart .cart{ position: relative; }
body.page-cart .cart h3{ padding-right: 220px; } /* buton alanı */
body.page-cart .cart-top{
  position: absolute;
  /* Align to the card's internal padding so it visually matches the left/right spacing */
  top: 14px;
  right: 22px;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.page-cart .cart-top .spacer{ display:none !important; }
body.page-cart .cart #clearCart{
  position: relative;
  top: 0 !important;
}




/* --- Komut görünümü (kompakt kutu/pill) --- */
.command-list{list-style:none;padding-left:0;margin:0}
.command-list li{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.command-list li:last-child{border-bottom:0}
.command-bullet{width:5px;height:5px;border-radius:999px;background:rgba(255,255,255,.75);flex:0 0 auto}
.command-pill{display:inline-flex;align-items:center;padding:3px 8px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);font-weight:600;font-size:12.5px;line-height:1.2;white-space:nowrap;flex:0 0 auto}
.command-sep{opacity:.8;flex:0 0 auto}
.command-desc{opacity:.85;line-height:1.35}
/* Eski yapı (strong) varsa: otomatik kutu gibi dursun */
.command-list li strong{display:inline-flex;align-items:center;padding:3px 8px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);font-weight:600;font-size:12.5px;line-height:1.2}
.command-list li strong + span{margin-left:6px}
/* --- /Komut görünümü --- */


/* --- Subgroups inside a single panel (Sistem Ayarları) --- */
.cmd-subgroup{ margin-top: 10px; }
.cmd-subgroup:first-child{ margin-top: 0; }
.cmd-subtitle{ font-weight: 700; opacity: 0.9; margin: 6px 0 6px; }
/* --- End subgroups --- */


/* WL panel subtitles */
.cmd-subtitle{ font-weight:700; opacity:.9; margin:6px 0 6px; }


/* --- MoR / Embed Checkout (Lemon Squeezy Overlay) --- */
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.hint-mor { margin-top: 10px; font-size: 0.95rem; opacity: 0.85; }

/* Payment result modal (Lemon Squeezy overlay close/success) */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 60;
}
.modal.show{ display:flex; }
.modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal-card{
  position: relative;
  width: min(720px, 96vw);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: radial-gradient(680px 220px at 15% 0%, rgba(51,166,255,.18), transparent 58%),
              radial-gradient(680px 220px at 85% 55%, rgba(124,77,255,.16), transparent 58%),
              rgba(12,14,20,.96);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  overflow: hidden;
}
.modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding: 16px 16px 0 16px;
}
.modal-title{ font-weight: 990; letter-spacing: -.2px; font-size: 18px; }
.modal-close{
  appearance:none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 14px;
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 900;
}
.modal-body{ padding: 12px 16px 16px 16px; }
.modal-desc{ color: var(--muted); font-weight: 850; line-height: 1.45; }
.modal-kv{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.modal-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  font-weight: 900;
}
.modal-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px; }
.modal-actions .btn{ flex:1; min-width: 200px; }


/* === Professional responsive polish: mobile menu, theme variables, skeletons === */
:root { color-scheme: dark; }
body[data-theme="light"]{
  color-scheme: light;
  --bg:#F6F8FC;
  --panel:rgba(15,23,42,.045);
  --panel2:rgba(255,255,255,.86);
  --text:#101828;
  --muted:#667085;
  --line:rgba(15,23,42,.10);
  --shadow:0 18px 55px rgba(15,23,42,.10);
}
.mobile-menu-btn,.theme-toggle-btn{display:none;align-items:center;justify-content:center;border:1px solid var(--line);background:rgba(255,255,255,.035);color:var(--text);border-radius:14px;min-width:42px;height:42px;font-weight:950;cursor:pointer}.theme-toggle-btn{display:inline-flex;padding:0 12px;width:auto;gap:8px}.mobile-menu-panel{display:none}.skeleton{position:relative;overflow:hidden;border-radius:14px;background:rgba(255,255,255,.06);min-height:44px}.skeleton:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);animation:skeletonMove 1.35s infinite}@keyframes skeletonMove{100%{transform:translateX(100%)}}
@media(max-width:980px){.mobile-menu-btn{display:inline-flex}.nav-inner{position:relative}.nav-actions{display:flex;align-items:center;gap:10px}.nav-links{position:absolute;left:18px;right:18px;top:calc(100% + 10px);display:none!important;flex-direction:column;align-items:stretch;padding:14px;border:1px solid var(--line);border-radius:18px;background:rgba(7,10,18,.96);box-shadow:var(--shadow);backdrop-filter:blur(18px)}body[data-theme="light"] .nav-links{background:rgba(255,255,255,.96)}.nav-links.open{display:flex!important}.nav-links a{width:100%;text-align:left}.container{padding-left:16px;padding-right:16px}.hero{padding-top:34px}.hero-actions .btn{flex:1 1 220px}.card,.hero-card{border-radius:22px}.stat-grid{grid-template-columns:1fr!important}.products,.grid3,.cart-grid{grid-template-columns:1fr!important}}
@media(max-width:560px){.nav-logo{width:44px;height:44px;border-radius:13px}.brand span:not(.brand-name){display:none}.hero-actions{display:grid;grid-template-columns:1fr}.btn{width:100%;white-space:normal}.container{padding-left:14px;padding-right:14px}h1{font-size:clamp(32px,10vw,40px)}}


/* === ADVANCED PROFESSIONAL THEME SYSTEM (Light / Dark / System) === */
:root{
  color-scheme: dark light;
  --bg-soft: rgba(255,255,255,.035);
  --surface: rgba(255,255,255,.04);
  --surface-strong: rgba(255,255,255,.07);
  --surface-hover: rgba(255,255,255,.08);
  --input-bg: rgba(255,255,255,.045);
  --placeholder: rgba(169,180,208,.52);
  --focus-ring: rgba(51,166,255,.18);
  --nav-bg: rgba(7,10,18,.72);
  --menu-bg: rgba(7,10,18,.96);
  --skeleton-a: rgba(255,255,255,.055);
  --skeleton-b: rgba(255,255,255,.14);
  --glow-accent: rgba(51,166,255,.20);
  --glow-purple: rgba(124,77,255,.18);
}
html[data-theme="dark"], body[data-theme="dark"]{
  color-scheme: dark;
  --bg:#070A12;
  --panel: rgba(255,255,255,.035);
  --panel2: rgba(255,255,255,.055);
  --text:#EAF0FF;
  --muted:#A9B4D0;
  --line:rgba(255,255,255,.09);
  --accent:#33A6FF;
  --accent2:#8B5CF6;
  --good:#7CFFB2;
  --bad:#FF9B9B;
  --warn:#FFA94D;
  --shadow: 0 18px 55px rgba(0,0,0,.48);
  --bg-soft: rgba(255,255,255,.035);
  --surface: rgba(255,255,255,.04);
  --surface-strong: rgba(255,255,255,.07);
  --surface-hover: rgba(255,255,255,.085);
  --input-bg: rgba(255,255,255,.045);
  --placeholder: rgba(169,180,208,.52);
  --focus-ring: rgba(51,166,255,.18);
  --nav-bg: rgba(7,10,18,.76);
  --menu-bg: rgba(7,10,18,.96);
  --skeleton-a: rgba(255,255,255,.055);
  --skeleton-b: rgba(255,255,255,.14);
  --glow-accent: rgba(51,166,255,.22);
  --glow-purple: rgba(124,77,255,.18);
}
html[data-theme="light"], body[data-theme="light"]{
  color-scheme: light;
  --bg:#F6F8FC;
  --panel:rgba(15,23,42,.045);
  --panel2:rgba(255,255,255,.90);
  --text:#101828;
  --muted:#667085;
  --line:rgba(15,23,42,.11);
  --accent:#1677FF;
  --accent2:#6D5DFB;
  --good:#027A48;
  --bad:#D92D20;
  --warn:#B54708;
  --shadow:0 18px 55px rgba(15,23,42,.10);
  --bg-soft: rgba(15,23,42,.035);
  --surface: rgba(255,255,255,.72);
  --surface-strong: rgba(255,255,255,.92);
  --surface-hover: rgba(15,23,42,.055);
  --input-bg: rgba(255,255,255,.78);
  --placeholder: rgba(102,112,133,.62);
  --focus-ring: rgba(22,119,255,.16);
  --nav-bg: rgba(255,255,255,.82);
  --menu-bg: rgba(255,255,255,.96);
  --skeleton-a: rgba(15,23,42,.075);
  --skeleton-b: rgba(15,23,42,.13);
  --glow-accent: rgba(22,119,255,.16);
  --glow-purple: rgba(109,93,251,.12);
}
html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after{
  transition: background-color .24s ease, color .24s ease, border-color .24s ease, box-shadow .24s ease, fill .24s ease !important;
}
body{
  background:
    radial-gradient(900px 420px at 12% -8%, var(--glow-accent), transparent 62%),
    radial-gradient(760px 420px at 88% 0%, var(--glow-purple), transparent 58%),
    var(--bg);
}
.nav{background:var(--nav-bg);}
body[data-theme="light"] .nav-logo,
body[data-theme="light"] .brand img{background:rgba(255,255,255,.84);border-color:var(--line);box-shadow:0 12px 32px rgba(15,23,42,.08)}
.card,.hero-card,.product,.cart-card,.panel,.summary,.support-card,.feature-card,.glass,.auth-card{
  background:var(--surface);
  border-color:var(--line);
  box-shadow:var(--shadow);
}
.card:hover,.product:hover,.feature-card:hover{background:var(--surface-strong)}
input,textarea,select,.form-input,.qty-input,.coupon-input{
  background:var(--input-bg)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}
input::placeholder, textarea::placeholder{color:var(--placeholder)!important;}
input:focus,textarea:focus,select:focus,.form-input:focus{
  border-color:color-mix(in srgb, var(--accent) 52%, transparent)!important;
  box-shadow:0 0 0 4px var(--focus-ring)!important;
  outline:none!important;
}
select option{background:var(--bg);color:var(--text)}
.mobile-menu-btn,.theme-toggle-btn,[data-theme-toggle]{
  background:var(--surface)!important;
  border:1px solid var(--line)!important;
  color:var(--text)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.10);
}
.theme-toggle-btn:hover,[data-theme-toggle]:hover,.mobile-menu-btn:hover{background:var(--surface-hover)!important;transform:translateY(-1px)}
.theme-toggle-btn[data-theme-mode="system"],[data-theme-toggle][data-theme-mode="system"]{border-color:color-mix(in srgb, var(--accent) 32%, var(--line))!important;}
.skeleton{background:var(--skeleton-a)!important;}
.skeleton:after{background:linear-gradient(90deg,transparent,var(--skeleton-b),transparent)!important;}
.badge,.pill,.tag,.status{border-color:var(--line)}
@media(max-width:980px){
  .nav-links{background:var(--menu-bg)!important;box-shadow:var(--shadow)}
}
@media (prefers-reduced-motion: reduce){
  html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after{transition:none!important;}
}


/* Auth nav: Hesabım butonu ilk boyamada oturum sistemini beklemeden görünür. */
.auth-user{gap:8px;display:none;}
.auth-login{display:inline-flex;}
html[data-auth="session"] #navUserBtn{display:inline-flex !important;}
html[data-auth="session"] #navLoginBtn{display:none !important;}
html[data-auth="guest"] #navUserBtn{display:none !important;}
html[data-auth="guest"] #navLoginBtn{display:inline-flex !important;}


/* Vantix UX polish patch */
.skip-link{position:fixed;left:16px;top:12px;z-index:9999;transform:translateY(-140%);padding:10px 14px;border-radius:999px;background:var(--accent,#33A6FF);color:#fff;text-decoration:none;font-weight:900;box-shadow:0 12px 30px rgba(0,0,0,.22);transition:transform .18s ease}
.skip-link:focus{transform:translateY(0);outline:3px solid rgba(255,255,255,.55);outline-offset:3px}
:focus-visible{outline:3px solid color-mix(in srgb,var(--accent,#33A6FF) 60%,transparent);outline-offset:3px}
button:disabled,.btn:disabled{cursor:not-allowed;opacity:.62;transform:none!important}
img{max-width:100%;height:auto}
.nav{padding-top:env(safe-area-inset-top)}
.cart-badge{min-width:20px;height:20px;display:none;place-items:center;padding:0 6px;border-radius:999px;font-size:11px;font-weight:950;line-height:1;background:var(--accent,#33A6FF);color:#fff}
.cart-badge.is-visible{display:inline-grid}
@media(max-width:980px){html.nav-menu-open{overflow:hidden}.nav-links.open{animation:vantixMenuIn .16s ease both}.nav-links.open a{min-height:44px;display:flex;align-items:center}}
@keyframes vantixMenuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:640px){.nav-actions{gap:8px}.nav-actions .btn{padding-inline:12px}.cart-grid,.products,.grid3{gap:16px}.section{scroll-margin-top:88px}}
@media(prefers-reduced-motion:reduce){.skip-link,.nav-links.open{animation:none!important;transition:none!important}}

/* === MAVI TON BIRLESTIRME DOKUNUSU ===
   İstek: siyah-mavi geçiş hissini azalt, yalnızca mavimsi bir zemin kullan.
   Kapsam: Sadece varsayılan/dark görünüm. Layout ve bileşen yapısını bozmaz. */
html[data-theme="dark"],
html:not([data-theme]){
  --bg:#09172d;
  --nav-bg:rgba(9,23,45,.78);
  --menu-bg:rgba(9,23,45,.96);
  --glow-accent:rgba(51,166,255,.18);
  --glow-purple:rgba(79,124,255,.10);
}

html[data-theme="dark"] body,
html:not([data-theme]) body{
  background-color:#09172d !important;
  background:
    radial-gradient(960px 420px at 12% -8%, rgba(51,166,255,.16), transparent 62%),
    radial-gradient(820px 400px at 88% 0%, rgba(79,124,255,.10), transparent 58%),
    linear-gradient(180deg, #09172d 0%, #0a1a33 48%, #0b1d39 100%) !important;
  background-attachment: fixed;
}

html[data-theme="dark"] body::after,
html:not([data-theme]) body::after{
  background: linear-gradient(
    to bottom,
    rgba(28,56,102,.20) 0%,
    rgba(18,39,76,.10) 45%,
    rgba(9,23,45,0) 100%
  ) !important;
}

html[data-theme="dark"] body #features,
html[data-theme="dark"] body #pricing,
html[data-theme="dark"] body #how,
html[data-theme="dark"] body #faq,
html[data-theme="dark"] body .why-vantix,
html:not([data-theme]) body #features,
html:not([data-theme]) body #pricing,
html:not([data-theme]) body #how,
html:not([data-theme]) body #faq,
html:not([data-theme]) body .why-vantix{
  background: transparent !important;
}

/* === TEK RENK MAVI TEMA DENGELEME ===
   İstek: renk uyumsuzluklarını kaldır, tek mavi tona yaklaş.
   Kapsam: Dark/default görünümde arka plan ve ana vurgu renkleri tek ailede tutulur. */
html[data-theme="dark"],
html:not([data-theme]){
  --bg:#0a1930;
  --accent:#33A6FF;
  --accent2:#5E8FFF;
  --nav-bg:rgba(10,25,48,.82);
  --menu-bg:rgba(10,25,48,.96);
  --glow-accent:rgba(51,166,255,.12);
  --glow-purple:rgba(94,143,255,.08);
}

html[data-theme="dark"] body,
html:not([data-theme]) body{
  background-color:#0a1930 !important;
  background:
    radial-gradient(760px 300px at 14% -4%, rgba(51,166,255,.11), transparent 60%),
    radial-gradient(680px 260px at 86% 0%, rgba(94,143,255,.07), transparent 58%),
    linear-gradient(180deg, #0a1930 0%, #0a1930 100%) !important;
  background-attachment: fixed;
}

html[data-theme="dark"] body::after,
html:not([data-theme]) body::after{
  background: linear-gradient(
    to bottom,
    rgba(22,47,88,.10) 0%,
    rgba(22,47,88,.04) 45%,
    rgba(10,25,48,0) 100%
  ) !important;
}

html[data-theme="dark"] .btn.primary,
html[data-theme="dark"] .btn-primary,
html:not([data-theme]) .btn.primary,
html:not([data-theme]) .btn-primary{
  background:linear-gradient(135deg, rgba(51,166,255,.96), rgba(94,143,255,.96)) !important;
}

html[data-theme="dark"] .bundle-reco,
html[data-theme="dark"] .compare,
html[data-theme="dark"] .hero-card,
html[data-theme="dark"] .product:hover,
html[data-theme="dark"] .feature:hover,
html[data-theme="dark"] .why-card:hover,
html:not([data-theme]) .bundle-reco,
html:not([data-theme]) .compare,
html:not([data-theme]) .hero-card,
html:not([data-theme]) .product:hover,
html:not([data-theme]) .feature:hover,
html:not([data-theme]) .why-card:hover{
  border-color: rgba(120,170,255,.16);
}

/* Dark/default: mor tonlari mavi aileye yaklastir */
html[data-theme="dark"] .mini-flow,
html[data-theme="dark"] .cart,
html[data-theme="dark"] .invoice,
html[data-theme="dark"] .total-wrap,
html:not([data-theme]) .mini-flow,
html:not([data-theme]) .cart,
html:not([data-theme]) .invoice,
html:not([data-theme]) .total-wrap{
  background:
    radial-gradient(520px 180px at 14% 0%, rgba(51,166,255,.10), transparent 60%),
    radial-gradient(520px 180px at 90% 28%, rgba(94,143,255,.06), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.012)) !important;
}

html[data-theme="dark"] .product::before,
html:not([data-theme]) .product::before{
  background:
    radial-gradient(600px 180px at 20% 0%, rgba(51,166,255,.13), transparent 55%),
    radial-gradient(600px 180px at 85% 30%, rgba(94,143,255,.08), transparent 55%) !important;
}

html[data-theme="dark"] .ribbon,
html[data-theme="dark"] .icon,
html:not([data-theme]) .ribbon,
html:not([data-theme]) .icon{
  background:linear-gradient(135deg, rgba(51,166,255,.16), rgba(94,143,255,.14)) !important;
}

html[data-theme="dark"] .features li::marker,
html:not([data-theme]) .features li::marker{
  color: rgba(94,143,255,.85);
}

/* === SON DOKUNUS: yatay bant sorununu kesin kapat ===
   Sadece dark/default görünümde arka plan tek renk olsun.
   Kartlar ve içerik korunur, sadece sayfa zemini sadeleşir. */
html[data-theme="dark"],
html:not([data-theme]){
  background:#0a1930 !important;
}

html[data-theme="dark"] body,
html:not([data-theme]) body{
  background:#0a1930 !important;
  background-image:none !important;
  background-attachment:scroll !important;
}

html[data-theme="dark"] body::before,
html[data-theme="dark"] body::after,
html:not([data-theme]) body::before,
html:not([data-theme]) body::after{
  content:none !important;
  display:none !important;
  background:none !important;
}

html[data-theme="dark"] main,
html[data-theme="dark"] section,
html[data-theme="dark"] #top,
html[data-theme="dark"] #features,
html[data-theme="dark"] #pricing,
html[data-theme="dark"] #how,
html[data-theme="dark"] #faq,
html:not([data-theme]) main,
html:not([data-theme]) section,
html:not([data-theme]) #top,
html:not([data-theme]) #features,
html:not([data-theme]) #pricing,
html:not([data-theme]) #how,
html:not([data-theme]) #faq{
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* === PREMIUM SOFT BLUE GLOW ===
   Tek renk mavi zemini korur, sadece cok hafif premium glow ekler.
   Bant olusturmaz; section ve layout yapisina dokunmaz. */
html[data-theme="dark"],
html:not([data-theme]){
  background:#0a1930 !important;
}

html[data-theme="dark"] body,
html:not([data-theme]) body{
  background-color:#0a1930 !important;
  background-image:
    radial-gradient(680px 240px at 18% 0%, rgba(51,166,255,.07), transparent 68%),
    radial-gradient(620px 220px at 82% 8%, rgba(94,143,255,.05), transparent 66%),
    linear-gradient(180deg, #0a1930 0%, #0a1930 100%) !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
}

html[data-theme="dark"] .nav,
html:not([data-theme]) .nav{
  background:rgba(10,25,48,.82) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .hero-card,
html[data-theme="dark"] .feature,
html[data-theme="dark"] .product,
html:not([data-theme]) .card,
html:not([data-theme]) .hero-card,
html:not([data-theme]) .feature,
html:not([data-theme]) .product{
  box-shadow:
    0 18px 50px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.02),
    0 0 28px rgba(51,166,255,.04) !important;
}

/* ======= ANA SAYFA PROFESYONEL BEYAZ TEMA ======= */
html[data-theme="light"],
html[data-theme="light"] body{
  background:#F0F2F5 !important;
  background-image:none !important;
  color:#0F172A !important;
}
html[data-theme="light"] body::before,
html[data-theme="light"] body::after{
  content:none !important;
  display:none !important;
}
/* Navbar */
html[data-theme="light"] .nav{
  background:rgba(255,255,255,.88) !important;
  border-bottom-color:#E2E8F0 !important;
  backdrop-filter:blur(20px) saturate(1.2);
}
html[data-theme="light"] .nav-links a{ color:#475569; }
html[data-theme="light"] .nav-links a:hover{
  color:#0F172A;
  background:rgba(15,23,42,.04);
}
html[data-theme="light"] .nav-logo{
  background:#fff;
  border-color:#E2E8F0;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
html[data-theme="light"] .brand span{ color:#0F172A; }
/* Buttons */
html[data-theme="light"] .btn{
  background:#fff;
  border-color:#E2E8F0;
  color:#334155;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
html[data-theme="light"] .btn:hover{
  background:#F8FAFC;
  border-color:#CBD5E1;
}
html[data-theme="light"] .btn.primary,
html[data-theme="light"] .btn-primary{
  background:linear-gradient(135deg,#2563EB,#4F46E5) !important;
  border:none !important;
  color:#fff !important;
  box-shadow:0 4px 14px rgba(37,99,235,.28) !important;
}
html[data-theme="light"] .btn.primary:hover,
html[data-theme="light"] .btn-primary:hover{
  box-shadow:0 6px 20px rgba(37,99,235,.4) !important;
}
html[data-theme="light"] .btn.ghost{
  background:transparent;
  border-color:#E2E8F0;
}
/* Hero */
html[data-theme="light"] .pill{
  background:#fff;
  border-color:#E2E8F0;
  color:#475569;
}
html[data-theme="light"] .pill b{ color:#0F172A; }
html[data-theme="light"] h1{
  color:#0F172A;
  text-shadow:none;
}
html[data-theme="light"] .sub{ color:#475569; }
html[data-theme="light"] .note{
  background:#F8FAFC;
  border-color:#E2E8F0;
  color:#475569;
}
/* Cards */
html[data-theme="light"] .card,
html[data-theme="light"] .hero-card,
html[data-theme="light"] .feature,
html[data-theme="light"] .product{
  background:#fff !important;
  border-color:#E2E8F0 !important;
  box-shadow:0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04) !important;
}
html[data-theme="light"] .hero-card::before{ display:none; }
html[data-theme="light"] .product::before{ display:none; }
html[data-theme="light"] .product:hover{
  border-color:#BFDBFE !important;
  box-shadow:0 8px 24px rgba(0,0,0,.08) !important;
}
/* Stat cards */
html[data-theme="light"] .stat{
  background:#F8FAFC;
  border-color:#E2E8F0;
}
html[data-theme="light"] .stat:hover{
  background:#EFF6FF;
  border-color:#BFDBFE;
}
html[data-theme="light"] .stat .k{ color:#94A3B8; }
html[data-theme="light"] .stat .v{ color:#0F172A; }
html[data-theme="light"] .small{ color:#64748B; }
/* Tags */
html[data-theme="light"] .tag{
  background:#F8FAFC;
  border-color:#E2E8F0;
  color:#475569;
}
html[data-theme="light"] .tag i{
  background:linear-gradient(135deg,#2563EB,#4F46E5);
}
/* Feature cards */
html[data-theme="light"] .feature .t{ color:#0F172A; }
html[data-theme="light"] .feature .d{ color:#64748B; }
/* Flow cards */
html[data-theme="light"] .flow-card::before{ display:none; }
html[data-theme="light"] .flow-card:hover{
  background:#F8FAFC !important;
  border-color:#BFDBFE !important;
}
html[data-theme="light"] .flow-num{
  background:#EFF6FF;
  border-color:#BFDBFE;
  color:#2563EB;
}
html[data-theme="light"] .flow-title{ color:#0F172A; }
html[data-theme="light"] .flow-sub{ color:#94A3B8; }
html[data-theme="light"] .flow-desc{ color:#64748B; }
/* Product cards */
html[data-theme="light"] .card-header h3{ color:#0F172A; }
html[data-theme="light"] .card-sub{ color:#64748B; }
html[data-theme="light"] .card-price{ color:#0F172A; }
html[data-theme="light"] .card-price span{ color:#94A3B8; }
html[data-theme="light"] .features li{ color:#334155; }
html[data-theme="light"] .features li::marker{ color:#2563EB; }
html[data-theme="light"] .card-note{ color:#64748B; }
html[data-theme="light"] .ribbon{
  background:#EFF6FF;
  border-color:#BFDBFE;
  color:#2563EB;
  box-shadow:0 4px 12px rgba(37,99,235,.1);
}
html[data-theme="light"] .pill-badge{
  background:#F8FAFC;
  border-color:#E2E8F0;
  color:#475569;
}
/* Bundle */
html[data-theme="light"] .bundle-reco{
  color:#475569;
}
html[data-theme="light"] .bundle-reco strong{ color:#0F172A; }
/* Compare table */
html[data-theme="light"] .compare{
  color:#0F172A;
}
html[data-theme="light"] table{
  border-color:#E2E8F0;
}
html[data-theme="light"] th{
  background:#F1F5F9;
  color:#0F172A;
  border-color:#E2E8F0;
}
html[data-theme="light"] td{
  border-color:#F1F5F9;
  color:#334155;
}
/* FAQ */
html[data-theme="light"] details{
  background:#fff;
  border-color:#E2E8F0;
}
html[data-theme="light"] summary{ color:#0F172A; }
html[data-theme="light"] details p{ color:#64748B; }
/* Why Vantix */
html[data-theme="light"] .why-card{
  background:#fff;
  border-color:#E2E8F0;
}
html[data-theme="light"] .why-title{ color:#0F172A; }
html[data-theme="light"] .why-text{ color:#64748B; }
html[data-theme="light"] .why-head p{ color:#64748B; }
/* Section titles */
html[data-theme="light"] .section-title h2{ color:#0F172A; }
html[data-theme="light"] .section-title p{ color:#64748B; }
/* Footer */
html[data-theme="light"] .footer{
  border-top-color:#E2E8F0;
  color:#64748B;
}
html[data-theme="light"] .footer-logo{
  background:#fff;
  border-color:#E2E8F0;
}
html[data-theme="light"] .footer-note{ color:#94A3B8; }
/* Toast */
html[data-theme="light"] .toast{
  background:#fff;
  border-color:#E2E8F0;
  color:#0F172A;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}
/* Cart badge */
html[data-theme="light"] .cart-badge{
  background:#2563EB;
  color:#fff;
}
/* Muted */
html[data-theme="light"] .muted{ color:#64748B; }
/* Snow toggle */

/* ======= CLEAN SOLID PREMIUM COMPARE TABLE ======= */
.compare {
  margin-top: 48px;
  border-radius: 20px;
  background: transparent;
}

.compare h3 {
  font-size: 20px;
  margin-bottom: 24px;
  text-align: left;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text);
}

.table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  background: #0f172a; /* SOLID DEEP NAVY */
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  text-align: left;
}

th {
  background: rgba(255, 255, 255, 0.02);
  font-weight: 700;
  font-size: 14px;
  color: #f8fafc;
}

tr:last-child td { border-bottom: none; }

tr:hover td { background: rgba(255, 255, 255, 0.02) !important; }

/* Feature styling */
.feat-name {
  font-weight: 600;
  font-size: 14px;
  color: #cbd5e1;
}

/* Light Mode Overrides */
html[data-theme="light"] .compare {
  background: transparent;
}
html[data-theme="light"] .table-wrap {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}
html[data-theme="light"] td {
  border-bottom-color: rgba(15, 23, 42, 0.04);
  color: #334155;
}
html[data-theme="light"] th {
  background: #f8fafc;
  color: #0f172a;
}
html[data-theme="light"] tr:hover td { background: #f1f5f9 !important; }
html[data-theme="light"] .feat-name { color: #334155; }

/* Dark Mode Overrides for strict solid color */
html[data-theme="dark"] .table-wrap,
html:not([data-theme]) .table-wrap {
  background: #0f172a;
}

/* === MOBILE RESPONSIVENESS FOR COMPARE TABLE === */
@media (max-width: 768px) {
  .compare {
    margin-top: 40px;
    padding: 20px 16px;
    border-radius: 20px;
  }
  .compare h3 {
    font-size: 22px;
    margin-bottom: 24px;
    letter-spacing: -0.5px;
  }
  th, td {
    padding: 16px 12px;
  }
  th {
    font-size: 10px;
    letter-spacing: 1px;
  }
  .feat-name {
    font-size: 13px;
    gap: 10px;
  }
  .feat-icon {
    width: 32px;
    height: 32px;
    font-size: 16px;
    border-radius: 10px;
  }
  .check-icon {
    width: 16px;
    height: 16px;
  }
}

/* === FINAL BACKGROUND HARMONY ===
   Arka planlari koyu ve acik tema icin tek, tutarli bir palete baglar. */
html[data-theme="dark"],
html:not([data-theme]){
  --bg:#080d14;
  --nav-bg:rgba(8,13,20,.84);
  --menu-bg:rgba(10,17,26,.96);
  --surface:rgba(15,24,38,.78);
  --surface-strong:rgba(20,32,49,.88);
  --surface-hover:rgba(28,44,66,.88);
  --line:rgba(183,203,232,.12);
  --glow-accent:rgba(51,166,255,.12);
  --glow-purple:rgba(20,184,166,.08);
  background:#080d14 !important;
}

html[data-theme="dark"] body,
html:not([data-theme]) body{
  background-color:#080d14 !important;
  background-image:
    radial-gradient(900px 360px at 12% -6%, rgba(51,166,255,.12), transparent 64%),
    radial-gradient(780px 320px at 88% 0%, rgba(20,184,166,.08), transparent 62%),
    linear-gradient(180deg, #080d14 0%, #0a1320 48%, #0b111a 100%) !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
}

html[data-theme="dark"] .nav,
html:not([data-theme]) .nav{
  background:rgba(8,13,20,.84) !important;
  border-bottom-color:rgba(183,203,232,.12) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .hero-card,
html[data-theme="dark"] .feature,
html[data-theme="dark"] .product,
html[data-theme="dark"] .bundle-reco,
html[data-theme="dark"] .compare,
html[data-theme="dark"] .cart-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .summary,
html[data-theme="dark"] .support-card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] details,
html:not([data-theme]) .card,
html:not([data-theme]) .hero-card,
html:not([data-theme]) .feature,
html:not([data-theme]) .product,
html:not([data-theme]) .bundle-reco,
html:not([data-theme]) .compare,
html:not([data-theme]) .cart-card,
html:not([data-theme]) .panel,
html:not([data-theme]) .summary,
html:not([data-theme]) .support-card,
html:not([data-theme]) .auth-card,
html:not([data-theme]) details{
  background:linear-gradient(180deg, rgba(19,30,46,.82), rgba(12,20,32,.74)) !important;
  border-color:rgba(183,203,232,.12) !important;
  box-shadow:0 18px 48px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.035) !important;
}

html[data-theme="dark"] .stat,
html[data-theme="dark"] .mini-flow-steps li,
html[data-theme="dark"] .cart-item,
html[data-theme="dark"] .total-wrap,
html[data-theme="dark"] .note,
html[data-theme="dark"] .table-wrap,
html:not([data-theme]) .stat,
html:not([data-theme]) .mini-flow-steps li,
html:not([data-theme]) .cart-item,
html:not([data-theme]) .total-wrap,
html:not([data-theme]) .note,
html:not([data-theme]) .table-wrap{
  background:rgba(8,13,20,.46) !important;
  border-color:rgba(183,203,232,.10) !important;
}

html[data-theme="dark"] .mini-flow,
html:not([data-theme]) .mini-flow{
  background:
    radial-gradient(520px 180px at 14% 0%, rgba(51,166,255,.10), transparent 62%),
    radial-gradient(500px 170px at 88% 22%, rgba(20,184,166,.07), transparent 60%),
    linear-gradient(180deg, rgba(19,30,46,.78), rgba(12,20,32,.70)) !important;
}

html[data-theme="light"],
html[data-theme="light"] body{
  --bg:#edf2f7;
  --surface:#ffffff;
  --surface-strong:#f8fafc;
  --surface-hover:#eef6ff;
  --line:#dbe4ef;
  background-color:#edf2f7 !important;
  background-image:
    radial-gradient(860px 300px at 12% -8%, rgba(37,99,235,.10), transparent 64%),
    radial-gradient(720px 280px at 88% 0%, rgba(20,184,166,.08), transparent 62%),
    linear-gradient(180deg, #edf2f7 0%, #f7f9fc 52%, #eef2f7 100%) !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
}

html[data-theme="light"] .nav{
  background:rgba(255,255,255,.88) !important;
  border-bottom-color:#dbe4ef !important;
}

html[data-theme="light"] .card,
html[data-theme="light"] .hero-card,
html[data-theme="light"] .feature,
html[data-theme="light"] .product,
html[data-theme="light"] .bundle-reco,
html[data-theme="light"] .compare,
html[data-theme="light"] .cart-card,
html[data-theme="light"] .panel,
html[data-theme="light"] .summary,
html[data-theme="light"] .support-card,
html[data-theme="light"] .auth-card,
html[data-theme="light"] details{
  background:#ffffff !important;
  border-color:#dbe4ef !important;
  box-shadow:0 12px 34px rgba(15,23,42,.07) !important;
}

html[data-theme="light"] .stat,
html[data-theme="light"] .mini-flow-steps li,
html[data-theme="light"] .cart-item,
html[data-theme="light"] .total-wrap,
html[data-theme="light"] .note,
html[data-theme="light"] .table-wrap,
html[data-theme="light"] th{
  background:#f8fafc !important;
  border-color:#dbe4ef !important;
}

html[data-theme="light"] .mini-flow{
  background:
    radial-gradient(520px 180px at 14% 0%, rgba(37,99,235,.08), transparent 62%),
    radial-gradient(500px 170px at 88% 22%, rgba(20,184,166,.07), transparent 60%),
    #ffffff !important;
  border-color:#dbe4ef !important;
}

html[data-theme="dark"] .compare,
html:not([data-theme]) .compare,
html[data-theme="light"] .compare{
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}

/* === HOME SCROLL BACKGROUND SEAM FIX ===
   Ana sayfada scroll ederken olusan yatay renk gecislerini kapatir. */
html[data-theme="dark"],
html:not([data-theme]){
  background:#080d14 !important;
  background-image:none !important;
}

html[data-theme="dark"] body,
html:not([data-theme]) body{
  background:#080d14 !important;
  background-image:none !important;
  background-attachment:scroll !important;
}

html[data-theme="dark"] body::before,
html[data-theme="dark"] body::after,
html:not([data-theme]) body::before,
html:not([data-theme]) body::after{
  content:none !important;
  display:none !important;
  background:none !important;
}

html[data-theme="dark"] main,
html[data-theme="dark"] section,
html[data-theme="dark"] #top,
html[data-theme="dark"] #features,
html[data-theme="dark"] #pricing,
html[data-theme="dark"] #how,
html[data-theme="dark"] #faq,
html[data-theme="dark"] .why-vantix,
html:not([data-theme]) main,
html:not([data-theme]) section,
html:not([data-theme]) #top,
html:not([data-theme]) #features,
html:not([data-theme]) #pricing,
html:not([data-theme]) #how,
html:not([data-theme]) #faq,
html:not([data-theme]) .why-vantix{
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}