/* ==========================================================================
   WOXO Dijital Marketing — tasarım sistemi
   ========================================================================== */

:root{
  /* zemin */
  --ink:#050410;
  --ink-2:#0a0919;
  --ink-3:#111029;
  --ink-4:#17153a;

  /* marka */
  --indigo:#6366f1;
  --violet:#8b5cf6;
  --glow:#a5b4fc;
  --mint:#34d399;
  --amber:#fbbf24;

  /* metin */
  --text:#ecebf7;
  --muted:#9b97c0;
  --dim:#6f6b94;

  --line:rgba(124,124,248,.16);
  --line-2:rgba(124,124,248,.32);

  /* tek sıcak vurgu — görünür alanın %1.5'ini geçmez */
  --signal:#ff5c38;

  --rad:20px;
  --rad-sm:13px;
  --rad-xs:10px;

  /* hareket */
  --hiz-hizli:.22s;
  --hiz:.42s;
  --hiz-yavas:.8s;
  --egri:cubic-bezier(.22,1,.36,1);        /* çıkış — yumuşak yavaşlama */
  --egri-giris:cubic-bezier(.65,0,.35,1);  /* iki yönlü */
  --egri-zipla:cubic-bezier(.34,1.56,.64,1);

  --kenar:clamp(18px, 4vw, 34px);
  --bolum:clamp(72px, 10vw, 130px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink);
  color:var(--text);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--indigo);color:#fff}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px;border-radius:4px}

/* ---------- atmosfer ---------- */
.zemin{position:fixed;inset:0;z-index:-2;pointer-events:none}
.zemin::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(1100px 700px at 82% -12%, rgba(99,102,241,.26), transparent 62%),
    radial-gradient(820px 620px at -12% 26%, rgba(139,92,246,.16), transparent 62%),
    radial-gradient(900px 800px at 48% 112%, rgba(52,211,153,.07), transparent 60%);
}
.zemin::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:
    linear-gradient(rgba(124,124,248,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,124,248,.04) 1px, transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(ellipse 85% 62% at 50% 0%, #000 28%, transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 85% 62% at 50% 0%, #000 28%, transparent 76%);
}
.kum{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

.sar{width:min(1200px, 100% - var(--kenar) * 2);margin-inline:auto}
.bolum{padding:var(--bolum) 0}
.bolum-ince{padding:calc(var(--bolum) * .6) 0}

/* ---------- tipografi ---------- */
h1,h2,h3,h4,.baslik{font-family:'Unbounded',sans-serif;font-weight:700;letter-spacing:-.025em;line-height:1.12}
h1{font-size:clamp(2.2rem, 5.8vw, 4.3rem);font-weight:800;line-height:1.02;letter-spacing:-.035em}
h2{font-size:clamp(1.75rem, 4vw, 2.85rem)}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
h3{font-size:clamp(1.15rem, 2vw, 1.45rem)}
h4{font-size:1.02rem;letter-spacing:-.01em}

/* Başlıkta gradyan metin kullanılmaz; vurgu tek bir el çizimi altı çizgiyle verilir. */
.alti-cizili{position:relative;display:inline-block}
.alti-cizili::after{
  content:"";position:absolute;left:-.4%;right:-.4%;bottom:-.04em;height:.1em;
  border-radius:999px;background:var(--signal);
  transform:scaleX(0);transform-origin:left;
  animation:ciz .62s .95s var(--egri) forwards;
}
@keyframes ciz{to{transform:scaleX(1)}}
.kicker{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.73rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--glow);
}
.kicker::before{
  content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--mint);box-shadow:0 0 12px var(--mint);
  animation:nabiz 2.4s ease-in-out infinite;
}
@keyframes nabiz{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.72)}}

.bolum-bas{max-width:760px;margin-bottom:clamp(36px, 5vw, 58px)}
.bolum-bas.orta{margin-inline:auto;text-align:center}
.bolum-bas h2{margin:14px 0 16px}
.bolum-bas p{color:var(--muted);font-size:1.03rem}

/* ---------- düğmeler ---------- */
.dg{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:inherit;font-weight:700;font-size:.93rem;line-height:1;
  padding:15px 28px;border-radius:999px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform var(--hiz-hizli) var(--egri),
             box-shadow var(--hiz-hizli) var(--egri),
             background var(--hiz-hizli), border-color var(--hiz-hizli), color var(--hiz-hizli);
}
.dg-ana{
  background:linear-gradient(135deg, var(--indigo), var(--violet));
  color:#fff;box-shadow:0 12px 34px -12px rgba(99,102,241,.85);
}
.dg-ana:hover{transform:translateY(-2px);box-shadow:0 20px 48px -14px rgba(99,102,241,1)}
.dg-hayalet{border-color:var(--line);color:#dcd9f2;background:rgba(255,255,255,.035)}
.dg-hayalet:hover{border-color:var(--line-2);background:rgba(124,124,248,.12);color:#fff;transform:translateY(-2px)}
.dg-wa{background:#25d366;color:#05230f}
.dg-wa:hover{transform:translateY(-2px);box-shadow:0 18px 44px -16px rgba(37,211,102,.9)}
.dg-blok{width:100%}
.dg-kucuk{padding:11px 20px;font-size:.85rem}

/* ==========================================================================
   Üst bar
   ========================================================================== */
.ust{
  position:sticky;top:0;z-index:60;
  background:rgba(5,4,16,.72);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color var(--hiz), background var(--hiz);
}
.ust.kaydi{border-bottom-color:var(--line);background:rgba(5,4,16,.9)}
.ust .ic{display:flex;align-items:center;justify-content:space-between;gap:22px;height:74px}
.marka{display:flex;align-items:center;text-decoration:none;flex:none}
.marka svg{height:34px;width:auto}
.menu{display:flex;align-items:center;gap:4px}
.menu a{
  position:relative;text-decoration:none;color:var(--muted);
  font-weight:600;font-size:.89rem;padding:9px 14px;border-radius:999px;
  transition:color var(--hiz-hizli), background var(--hiz-hizli);
}
.menu a:hover,.menu a[aria-current]{color:#fff;background:rgba(124,124,248,.1)}
.ust-sag{display:flex;align-items:center;gap:10px}

.menu-dg{
  display:none;width:44px;height:44px;border-radius:12px;flex:none;
  border:1px solid var(--line);background:rgba(255,255,255,.04);cursor:pointer;
  align-items:center;justify-content:center;
}
.menu-dg span{display:block;width:19px;height:2px;background:#fff;border-radius:2px;position:relative;transition:var(--hiz-hizli)}
.menu-dg span::before,.menu-dg span::after{
  content:"";position:absolute;left:0;width:19px;height:2px;background:#fff;border-radius:2px;
  transition:transform var(--hiz-hizli) var(--egri), top var(--hiz-hizli);
}
.menu-dg span::before{top:-6px}
.menu-dg span::after{top:6px}
.menu-dg[aria-expanded="true"] span{background:transparent}
.menu-dg[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.menu-dg[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative;padding:clamp(56px, 9vw, 110px) 0 clamp(50px, 7vw, 84px);overflow:hidden}
.hero h1{margin:22px 0 24px;max-width:17ch}
.hero h1 .satir{display:block;overflow:hidden}
.hero h1 .satir > span{display:block;animation:yukari .95s var(--egri) both}
.hero h1 .satir:nth-child(2) > span{animation-delay:.1s}
@keyframes yukari{from{transform:translateY(105%)}to{transform:translateY(0)}}

.hero .spot{max-width:660px;font-size:clamp(1rem, 1.5vw, 1.14rem);color:var(--muted);animation:belir .8s .34s both}
.hero .kicker{animation:belir .8s .1s both}
.hero-dg{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px;animation:belir .8s .46s both}
.hero-alt{margin-top:22px;font-size:.84rem;color:var(--dim);animation:belir .8s .56s both}
@keyframes belir{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* dönen hizmet kelimesi */
.dondur{display:inline-grid;vertical-align:bottom;overflow:hidden;height:1.12em}
.dondur span{
  grid-area:1/1;opacity:0;transform:translateY(100%);
  animation:kelime 13.2s infinite;
  background:linear-gradient(100deg, var(--glow), var(--violet));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.dondur span:nth-child(1){animation-delay:0s}
.dondur span:nth-child(2){animation-delay:2.2s}
.dondur span:nth-child(3){animation-delay:4.4s}
.dondur span:nth-child(4){animation-delay:6.6s}
.dondur span:nth-child(5){animation-delay:8.8s}
.dondur span:nth-child(6){animation-delay:11s}
@keyframes kelime{
  0%{opacity:0;transform:translateY(100%)}
  3%,14%{opacity:1;transform:translateY(0)}
  17%,100%{opacity:0;transform:translateY(-100%)}
}

/* hero istatistik şeridi */
.hero-sayilar{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:1px;
  margin-top:clamp(44px, 6vw, 72px);
  background:var(--line);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;
  animation:belir .8s .66s both;
}
.hero-sayilar div{background:var(--ink-2);padding:22px 24px}
.hero-sayilar b{
  display:block;font-family:'Unbounded',sans-serif;font-size:clamp(1.4rem,2.6vw,1.95rem);
  font-weight:800;line-height:1.1;color:#fff;
}
.hero-sayilar span{font-size:.78rem;color:var(--muted);letter-spacing:.02em}

/* ---------- kayan şerit ---------- */
.serit{
  border-block:1px solid var(--line);
  padding:17px 0;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.serit-ray{display:flex;gap:46px;width:max-content;animation:kay 34s linear infinite}
.serit:hover .serit-ray{animation-play-state:paused}
.serit span{
  font-family:'Unbounded',sans-serif;font-weight:600;font-size:.84rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--dim);white-space:nowrap;
  display:flex;align-items:center;gap:46px;
}
.serit span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--indigo);flex:none}
@keyframes kay{to{transform:translateX(-50%)}}

/* ==========================================================================
   Hizmet kartları
   ========================================================================== */
.hizmetler{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hk{
  position:relative;display:flex;flex-direction:column;
  padding:32px 28px 28px;text-decoration:none;
  background:linear-gradient(168deg, var(--ink-3), var(--ink-2) 72%);
  border:1px solid var(--line);border-radius:var(--rad);
  overflow:hidden;isolation:isolate;
  transition:transform var(--hiz) var(--egri), border-color var(--hiz), box-shadow var(--hiz);
}
.hk::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(420px 220px at var(--mx,50%) var(--my,0%), rgba(124,124,248,.17), transparent 70%);
  transition:opacity var(--hiz);
}
.hk:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:0 30px 70px -32px rgba(99,102,241,.6)}
.hk:hover::before{opacity:1}
.hk .ikon{
  font-family:'Unbounded',sans-serif;font-weight:800;font-size:.86rem;letter-spacing:.06em;
  color:var(--dim);margin-bottom:18px;display:block;
  transition:color var(--hiz-hizli);
}
.hk:hover .ikon{color:var(--signal)}
.hk::after{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,var(--indigo),var(--violet));
  transform:scaleX(0);transform-origin:left;
  transition:transform .32s var(--egri);
}
.hk:hover::after{transform:scaleX(1)}
.hk h3{margin-bottom:10px}
.hk p{color:var(--muted);font-size:.92rem;flex:1}
.hk .git{
  display:inline-flex;align-items:center;gap:8px;margin-top:22px;
  font-weight:800;font-size:.85rem;color:var(--glow);
}
.hk .git svg{transition:transform var(--hiz-hizli) var(--egri)}
.hk:hover .git svg{transform:translateX(5px)}
.hk .fiyat-ipucu{
  font-size:.79rem;color:var(--dim);margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
}
.hk .fiyat-ipucu b{color:#fff;font-weight:800}

/* ==========================================================================
   Neden biz
   ========================================================================== */
.neden{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.nk{
  padding:28px 24px;border-radius:var(--rad);
  background:linear-gradient(168deg, var(--ink-3), var(--ink-2) 72%);
  border:1px solid var(--line);
  transition:border-color var(--hiz), transform var(--hiz) var(--egri);
}
.nk:hover{border-color:var(--line-2);transform:translateY(-4px)}
.nk .ikon{
  font-family:'Unbounded',sans-serif;font-weight:800;font-size:.82rem;
  letter-spacing:.06em;color:var(--dim);margin-bottom:14px;
  transition:color var(--hiz-hizli);
}
.nk:hover .ikon{color:var(--signal)}
.nk h4{margin-bottom:9px;color:#fff}
.nk p{color:var(--muted);font-size:.88rem}

/* ==========================================================================
   Süreç
   ========================================================================== */
.surec{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.sa{position:relative;padding:0 26px}
.sa + .sa{border-left:1px solid var(--line)}
.sa:first-child{padding-left:0}
.sa .no{
  font-family:'Unbounded',sans-serif;font-weight:800;font-size:2.3rem;line-height:1;
  background:linear-gradient(135deg, var(--indigo), var(--violet));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  margin-bottom:14px;display:block;
}
.sa h4{margin-bottom:8px;color:#fff}
.sa p{color:var(--muted);font-size:.89rem}

/* ==========================================================================
   Manifesto
   ========================================================================== */
.manifesto{
  position:relative;border-radius:var(--rad);overflow:hidden;
  padding:clamp(40px, 6vw, 72px);
  background:linear-gradient(152deg, var(--ink-4), var(--ink-2) 68%);
  border:1px solid var(--line-2);
}
.manifesto::before{
  content:"";position:absolute;top:-55%;right:-12%;width:60%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle, rgba(99,102,241,.26), transparent 66%);
  filter:blur(44px);pointer-events:none;
}
.manifesto p{position:relative;font-size:clamp(1.02rem,1.7vw,1.22rem);color:#d7d4ee;max-width:790px}
.manifesto p + p{margin-top:17px}
.manifesto p:first-of-type{
  font-family:'Unbounded',sans-serif;font-weight:700;font-size:clamp(1.3rem,2.6vw,1.9rem);
  line-height:1.25;color:#fff;letter-spacing:-.02em;
}
.manifesto p:last-of-type{
  font-family:'Unbounded',sans-serif;font-weight:600;color:var(--glow);
  font-size:clamp(1.02rem,1.8vw,1.26rem);
}

/* ==========================================================================
   Fiyat kartları
   ========================================================================== */
.fiyatlar{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:18px;align-items:stretch}
.fiyatlar[data-adet="4"]{grid-template-columns:repeat(4,1fr)}
.fiyatlar[data-adet="5"]{grid-template-columns:repeat(5,1fr)}
.fk{
  position:relative;display:flex;flex-direction:column;
  padding:34px 24px 28px;border-radius:var(--rad);
  background:linear-gradient(168deg, var(--ink-3), var(--ink-2) 72%);
  border:1px solid var(--line);
  transition:transform var(--hiz) var(--egri), border-color var(--hiz), box-shadow var(--hiz);
}
.fk:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:0 26px 62px -28px rgba(99,102,241,.5)}
.fk.one-cikan{
  background:linear-gradient(168deg, #1c1748, #0e0c28 72%);
  border-color:rgba(124,124,248,.55);
  box-shadow:0 0 0 1px rgba(124,124,248,.2), 0 32px 80px -34px rgba(99,102,241,.55);
}
.rozet{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg, var(--indigo), var(--violet));
  color:#fff;font-size:.67rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  padding:7px 17px;border-radius:999px;white-space:nowrap;
  box-shadow:0 7px 22px -7px rgba(99,102,241,.85);
}
.fk .no{font-family:'Unbounded',sans-serif;font-size:.74rem;font-weight:600;color:var(--glow);letter-spacing:.2em}
.fk h3{margin:10px 0 7px;font-size:1.26rem}
.fk .ic-metin{font-size:.85rem;color:var(--muted);min-height:54px;margin-bottom:16px}
.fk .tutar{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.fk .rakam{font-family:'Unbounded',sans-serif;font-weight:800;font-size:1.95rem;line-height:1;color:#fff}
.fk.one-cikan .rakam{background:linear-gradient(118deg,#fff,var(--glow));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fk .birim{font-size:.82rem;font-weight:700;color:var(--muted)}
.fk .kdv{flex:1 0 100%;font-size:.73rem;color:var(--dim)}
.fk ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:26px;flex:1}
.fk li{display:flex;gap:10px;font-size:.87rem;color:#cfccec}
.fk li::before{
  content:"";flex:none;width:17px;height:17px;margin-top:3px;border-radius:50%;
  background:rgba(99,102,241,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a5b4fc' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;
}
.fk li.vurgu{color:#fff;font-weight:700}
.fk li.vurgu::before{background-color:rgba(52,211,153,.18);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.fiyat-notu{text-align:center;color:var(--muted);font-size:.88rem;margin-top:30px}
.fiyat-notu a{color:var(--glow);font-weight:700;text-decoration:none}
.fiyat-notu a:hover{text-decoration:underline}

/* ==========================================================================
   Paket hesaplayıcı
   ========================================================================== */
.builder{display:grid;grid-template-columns:1.35fr .9fr;gap:24px;align-items:start}
.b-panel{
  background:linear-gradient(168deg, var(--ink-3), var(--ink-2) 72%);
  border:1px solid var(--line);border-radius:var(--rad);padding:34px 32px;
}
.b-presets{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:30px}
.b-presets button{
  font-family:inherit;font-size:.82rem;font-weight:700;color:var(--muted);
  background:rgba(255,255,255,.035);border:1px solid var(--line);
  padding:9px 16px;border-radius:999px;cursor:pointer;
  transition:color var(--hiz-hizli), border-color var(--hiz-hizli), background var(--hiz-hizli);
}
.b-presets button:hover{color:#fff;border-color:var(--line-2)}
.b-presets button[aria-pressed="true"]{background:rgba(124,124,248,.16);border-color:rgba(124,124,248,.6);color:#fff}
.b-row{padding:22px 0;border-top:1px solid var(--line)}
.b-row:first-of-type{border-top:none;padding-top:0}
.b-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:6px}
.b-top label{font-weight:800;font-size:1rem;color:#fff}
.b-val{font-family:'Unbounded',sans-serif;font-weight:700;font-size:1.08rem;color:var(--glow);white-space:nowrap;font-variant-numeric:tabular-nums}
.b-hint{font-size:.8rem;color:var(--muted);margin-bottom:14px}
.b-row input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;
  background:rgba(255,255,255,.1);outline:none;cursor:pointer;
}
.b-row input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,var(--indigo),var(--violet));cursor:pointer;
  border:3px solid var(--ink-2);
  box-shadow:0 0 0 1px rgba(124,124,248,.6), 0 6px 18px -4px rgba(99,102,241,.9);
}
.b-row input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;border:3px solid var(--ink-2);
  background:linear-gradient(135deg,var(--indigo),var(--violet));cursor:pointer;
  box-shadow:0 0 0 1px rgba(124,124,248,.6);
}
.b-scale{display:flex;justify-content:space-between;font-size:.72rem;color:var(--dim);margin-top:7px}
.b-chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:4px}
.b-chip{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:rgba(255,255,255,.035);border:1px solid var(--line);
  padding:10px 16px;border-radius:999px;font-size:.86rem;font-weight:600;
  color:var(--muted);transition:color var(--hiz-hizli), border-color var(--hiz-hizli), background var(--hiz-hizli);
}
.b-chip:hover{color:#fff;border-color:var(--line-2)}
.b-chip input{accent-color:var(--indigo);width:15px;height:15px;cursor:pointer}
.b-chip.on{background:rgba(124,124,248,.16);border-color:rgba(124,124,248,.6);color:#fff}
.b-chip.locked{opacity:.55;cursor:default}
.b-switch{
  display:flex;align-items:flex-start;gap:13px;cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:14px;padding:16px 18px;
  transition:background var(--hiz-hizli), border-color var(--hiz-hizli);
}
.b-switch.on{background:rgba(52,211,153,.08);border-color:rgba(52,211,153,.4)}
.b-switch input{accent-color:var(--mint);width:17px;height:17px;margin-top:3px;cursor:pointer;flex:none}
.b-switch b{display:block;color:#fff;font-size:.95rem}
.b-switch span span{font-size:.82rem;color:var(--muted);font-weight:500}
.b-sum{
  position:sticky;top:96px;
  background:linear-gradient(168deg,#1c1748,#0e0c28 72%);
  border:1px solid rgba(124,124,248,.5);border-radius:var(--rad);padding:30px 28px;
  box-shadow:0 30px 80px -32px rgba(99,102,241,.5);
}
.b-sum h4{font-family:'Unbounded',sans-serif;font-weight:700;font-size:1.05rem;margin-bottom:20px}
.b-lines{display:flex;flex-direction:column;gap:11px;margin-bottom:20px}
.b-line{display:flex;justify-content:space-between;gap:14px;font-size:.86rem;color:#cfccec}
.b-line span:last-child{font-weight:700;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
.b-line.off{opacity:.36}
.b-total{border-top:1px solid rgba(124,124,248,.3);padding-top:20px;margin-bottom:8px}
.b-total .lbl{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--glow);font-weight:800}
.b-total .amt{
  font-family:'Unbounded',sans-serif;font-weight:800;font-size:2.2rem;line-height:1.15;
  color:#fff;margin-top:6px;font-variant-numeric:tabular-nums;
}
.b-total .amt small{font-family:'Manrope',sans-serif;font-size:.84rem;font-weight:700;color:var(--muted)}
.b-kdv{font-size:.8rem;color:var(--muted);margin-bottom:20px}
.b-match{
  font-size:.82rem;background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.32);
  color:#a7f3d0;border-radius:12px;padding:11px 14px;margin-bottom:18px;
}
.b-note{font-size:.75rem;color:var(--dim);text-align:center;margin-top:14px;line-height:1.5}

/* ==========================================================================
   Referans vitrini
   ========================================================================== */
.ref-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:16px}
.rk{
  position:relative;border-radius:var(--rad-sm);overflow:hidden;
  background:var(--ink-3);border:1px solid var(--line);
  aspect-ratio:9/16;
  transition:transform var(--hiz) var(--egri), border-color var(--hiz), box-shadow var(--hiz);
}
.rk.kare{aspect-ratio:1}
.rk:hover{transform:translateY(-6px) scale(1.012);border-color:var(--line-2);box-shadow:0 28px 64px -30px rgba(99,102,241,.6);z-index:2}
.rk img,.rk video{width:100%;height:100%;object-fit:cover}
.rk .ust-etiket{
  position:absolute;top:11px;left:11px;z-index:3;
  background:rgba(5,4,16,.74);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);
  padding:5px 11px;border-radius:999px;font-size:.68rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;
}
.rk .ust-etiket.konsept{
  left:auto;right:11px;
  background:rgba(255,92,56,.9);border-color:rgba(255,255,255,.25);color:#fff;
}
.rk .alt{
  position:absolute;inset:auto 0 0 0;z-index:3;padding:34px 15px 15px;
  background:linear-gradient(transparent, rgba(5,4,16,.93) 62%);
}
.rk .alt b{display:block;font-size:.92rem;color:#fff;font-weight:800;line-height:1.3}
.rk .alt span{display:block;font-size:.76rem;color:var(--muted);margin-top:3px}
.rk .oynat{
  position:absolute;inset:0;z-index:2;display:grid;place-items:center;pointer-events:none;
  transition:opacity var(--hiz);
}
.rk .oynat i{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:rgba(5,4,16,.6);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.22);
}
.rk.oynuyor .oynat{opacity:0}
.rk-hesap{
  aspect-ratio:auto;display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;padding:30px 20px;gap:5px;min-height:200px;
  text-decoration:none;
}
.rk-hesap .av{
  width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-size:1.6rem;
  background:linear-gradient(135deg, var(--indigo), var(--violet));margin-bottom:10px;
}
.rk-hesap b{font-size:.98rem;color:#fff}
.rk-hesap span{font-size:.82rem;color:var(--glow)}
.rk-hesap small{font-size:.78rem;color:var(--muted);margin-top:6px}
.ref-bos{
  grid-column:1/-1;text-align:center;padding:56px 24px;color:var(--muted);
  border:1px dashed var(--line-2);border-radius:var(--rad);font-size:.92rem;
}

/* ==========================================================================
   Rehber
   ========================================================================== */
.yazilar{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.yk{
  position:relative;display:flex;flex-direction:column;padding:30px 28px;text-decoration:none;
  background:linear-gradient(168deg, var(--ink-3), var(--ink-2) 72%);
  border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;
  transition:transform var(--hiz) var(--egri), border-color var(--hiz), box-shadow var(--hiz);
}
.yk::after{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,var(--indigo),var(--violet));
  transform:scaleX(0);transform-origin:left;transition:transform .32s var(--egri);
}
.yk:hover{transform:translateY(-5px);border-color:var(--line-2);box-shadow:0 28px 64px -30px rgba(99,102,241,.55)}
.yk:hover::after{transform:scaleX(1)}
.yk-etiket{
  display:inline-block;align-self:flex-start;margin-bottom:14px;
  font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--glow);background:rgba(124,124,248,.14);
  border:1px solid var(--line);padding:5px 12px;border-radius:999px;
}
.yk h2{font-size:1.16rem;line-height:1.28;margin-bottom:10px;color:#fff}
.yk p{color:var(--muted);font-size:.9rem;flex:1}
.yk .git{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-weight:800;font-size:.85rem;color:var(--glow)}
.yk .git svg{transition:transform var(--hiz-hizli) var(--egri)}
.yk:hover .git svg{transform:translateX(5px)}

/* yazı gövdesi */
.yazi{max-width:760px}
.yazi h1{font-size:clamp(1.8rem,4.2vw,2.9rem);margin-bottom:18px}
.yazi-ozet{font-size:clamp(1rem,1.6vw,1.14rem);color:var(--muted);margin-bottom:18px}
.yazi-meta{font-size:.84rem;color:var(--dim);padding-bottom:26px;margin-bottom:34px;border-bottom:1px solid var(--line)}
.yazi-meta a{color:var(--glow);text-decoration:none;font-weight:700}
.yazi-meta a:hover{text-decoration:underline}
.yazi-govde{font-size:1.02rem;line-height:1.78;color:#d4d1ea}
.yazi-govde h2{
  font-size:clamp(1.25rem,2.4vw,1.6rem);margin:42px 0 16px;color:#fff;
}
.yazi-govde p{margin-bottom:18px}
.yazi-govde strong{color:#fff;font-weight:800}
.yazi-govde em{color:var(--muted)}
.yazi-govde a{color:var(--glow);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.yazi-govde a:hover{color:#fff}
.yazi-govde ul{list-style:none;display:flex;flex-direction:column;gap:13px;margin:0 0 24px}
.yazi-govde li{display:flex;gap:12px}
.yazi-govde li::before{
  content:"";flex:none;width:7px;height:7px;margin-top:11px;border-radius:50%;
  background:var(--signal);
}
.yazi-govde table{
  width:100%;border-collapse:collapse;margin:8px 0 28px;font-size:.92rem;
  display:block;overflow-x:auto;
}
.yazi-govde th,.yazi-govde td{
  border:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top;
}
.yazi-govde th{
  background:rgba(124,124,248,.1);color:#fff;font-weight:800;
  font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
}
.yazi-govde td{color:#cfccec}

/* ==========================================================================
   SSS
   ========================================================================== */
.sss{display:flex;flex-direction:column;gap:12px;max-width:860px;margin-inline:auto}
.sss details{
  background:linear-gradient(168deg, var(--ink-3), var(--ink-2) 72%);
  border:1px solid var(--line);border-radius:var(--rad-sm);overflow:hidden;
  transition:border-color var(--hiz-hizli);
}
.sss details[open]{border-color:var(--line-2)}
.sss summary{
  list-style:none;cursor:pointer;padding:19px 56px 19px 22px;position:relative;
  font-weight:700;font-size:.97rem;color:#fff;
}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{
  content:"";position:absolute;right:22px;top:50%;width:13px;height:13px;
  margin-top:-6px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a5b4fc' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform var(--hiz) var(--egri);
}
.sss details[open] summary::after{transform:rotate(135deg)}
.sss .cevap{padding:0 22px 20px;color:var(--muted);font-size:.93rem}
.sss .cevap a{color:var(--glow);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.sss .cevap a:hover{color:#fff}

/* ==========================================================================
   Kapanış
   ========================================================================== */
.kapanis{
  position:relative;text-align:center;border-radius:var(--rad);overflow:hidden;
  padding:clamp(44px, 7vw, 82px) clamp(24px, 5vw, 56px);
  background:linear-gradient(152deg, var(--ink-4), var(--ink-2) 70%);
  border:1px solid var(--line-2);
}
.kapanis::before{
  content:"";position:absolute;top:-62%;left:50%;transform:translateX(-50%);
  width:76%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle, rgba(99,102,241,.3), transparent 66%);
  filter:blur(52px);pointer-events:none;
}
.kapanis > *{position:relative}
.kapanis h2{margin:14px 0 14px}
.kapanis p{color:var(--muted);max-width:560px;margin-inline:auto}
.kapanis .dgler{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.kapanis .iletisim{margin-top:22px;font-size:.86rem;color:var(--dim)}
.kapanis .iletisim a{color:var(--glow);text-decoration:none;font-weight:700}

/* ==========================================================================
   Alt bilgi
   ========================================================================== */
.alt-bilgi{border-top:1px solid var(--line);padding:52px 0 34px;margin-top:var(--bolum)}
.alt-izgara{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
.alt-izgara h5{
  font-size:.74rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:var(--glow);margin-bottom:16px;
}
.alt-izgara ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.alt-izgara a{color:var(--muted);text-decoration:none;font-size:.89rem;transition:color var(--hiz-hizli)}
.alt-izgara a:hover{color:#fff}
.alt-marka svg{height:32px;width:auto;margin-bottom:16px}
.alt-marka p{color:var(--muted);font-size:.88rem;max-width:300px}
.alt-son{
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:40px;padding-top:24px;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--dim);
}
.alt-son a{color:var(--muted);text-decoration:none}
.alt-son a:hover{color:#fff}

/* ==========================================================================
   Çerez tercihi
   ========================================================================== */
.cerez{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:80;
  width:min(720px, calc(100% - 28px));
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:16px 20px;border-radius:16px;
  background:rgba(10,9,25,.96);backdrop-filter:blur(16px);
  border:1px solid var(--line-2);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.9);
  animation:cerez-gir .5s var(--egri) both;
}
.cerez[hidden]{display:none}
.cerez p{flex:1 1 320px;font-size:.84rem;color:var(--muted);margin:0;line-height:1.55}
.cerez-dg{display:flex;gap:9px;flex-wrap:wrap}
@keyframes cerez-gir{from{opacity:0;transform:translate(-50%, 14px)}to{opacity:1;transform:translate(-50%, 0)}}
@media(max-width:560px){
  .cerez{bottom:12px;padding:15px 17px}
  .cerez-dg{width:100%}
  .cerez-dg .dg{flex:1;justify-content:center}
}

/* ==========================================================================
   Görünürlük animasyonu
   ========================================================================== */
.ac{opacity:0;transform:translateY(26px);transition:opacity .72s var(--egri), transform .72s var(--egri)}
.ac.gir{opacity:1;transform:none}

/* ==========================================================================
   Duyarlı
   ========================================================================== */
/* Menü 10 bağlantıya çıktı: orta genişliklerde sıkıştır ki taşmasın. */
@media(max-width:1400px){
  .menu{gap:0}
  .menu a{padding:9px 10px;font-size:.84rem}
}
@media(max-width:1180px){
  .ust .ic{gap:12px}
  .menu a{padding:8px 7px;font-size:.79rem}
}
@media(max-width:1080px){
  .hizmetler{grid-template-columns:repeat(2,1fr)}
  .neden{grid-template-columns:repeat(2,1fr)}
  .fiyatlar[data-adet="4"],.fiyatlar[data-adet="5"]{grid-template-columns:repeat(2,1fr)}
  .surec{grid-template-columns:repeat(2,1fr);gap:32px 0}
  .sa:nth-child(3){padding-left:0;border-left:none}
  .alt-izgara{grid-template-columns:1fr 1fr}
}
@media(max-width:780px){
  .menu{
    position:fixed;inset:74px 0 auto 0;flex-direction:column;align-items:stretch;gap:2px;
    background:rgba(5,4,16,.97);backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);padding:14px var(--kenar) 24px;
    transform:translateY(-14px);opacity:0;pointer-events:none;
    transition:opacity var(--hiz) var(--egri), transform var(--hiz) var(--egri);
  }
  .menu.acik{transform:none;opacity:1;pointer-events:auto}
  .menu a{padding:13px 14px;font-size:.98rem}
  .menu-dg{display:flex}
  .ust-sag .dg:not(.menu-dg){display:none}
  .hizmetler{grid-template-columns:1fr}
  .neden{grid-template-columns:1fr}
  .fiyatlar,.fiyatlar[data-adet="4"],.fiyatlar[data-adet="5"]{grid-template-columns:1fr;max-width:430px;margin-inline:auto}
  .fk.one-cikan{order:-1}
  .builder{grid-template-columns:1fr}
  .b-panel{padding:26px 20px}
  .b-sum{position:static}
  .surec{grid-template-columns:1fr;gap:30px}
  .sa{padding:0;border-left:none!important}
  .ref-izgara{grid-template-columns:repeat(2,1fr);gap:12px}
  .alt-izgara{grid-template-columns:1fr;gap:30px}
}
@media(max-width:420px){
  .ref-izgara{grid-template-columns:1fr;max-width:330px;margin-inline:auto}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .ac{opacity:1;transform:none}
  .hero h1 .satir > span{transform:none}
}