/* ═══════════════════════════════════════════════
   cudezyazilim — Design System
   Bağımlılık yok. Saf CSS. Koyu tema.
   ═══════════════════════════════════════════════ */

:root{
  /* Renkler */
  --bg:            #000000;
  --bg-2:          #08080a;
  --bg-3:          #0e0e12;
  --surface:       rgba(255,255,255,.045);
  --surface-2:     rgba(255,255,255,.075);
  --line:          rgba(255,255,255,.10);
  --line-strong:   rgba(255,255,255,.18);
  --text:          #f5f5f7;
  --text-dim:      #a1a1aa;
  --text-faint:    #6e6e78;

  --c1:            #5ee7ff;   /* cyan  */
  --c2:            #7b61ff;   /* violet*/
  --c3:            #ff7ac3;   /* pink  */
  --grad:          linear-gradient(115deg, var(--c1), var(--c2) 48%, var(--c3));

  /* Tipografi */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Ölçü */
  --wrap: 1200px;
  --nav-h: 62px;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 40px;

  /* Hareket */
  --ease:      cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

/* ── Reset ─────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{
  background:var(--bg);
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust:100%;
}
body{
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
  letter-spacing:-.011em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg,canvas{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button,input,select,textarea{ font:inherit; color:inherit }
ul,ol{ list-style:none }
::selection{ background:rgba(123,97,255,.4); color:#fff }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:#fff; color:#000; padding:12px 20px; border-radius:0 0 10px 0;
}
.skip-link:focus{ left:0 }
:focus-visible{ outline:2px solid var(--c1); outline-offset:3px; border-radius:6px }

/* ── Layout ────────────────────────────────── */
.wrap{ width:min(100% - 44px, var(--wrap)); margin-inline:auto }
.wrap--narrow{ width:min(100% - 44px, 820px) }
.section{ position:relative; padding:clamp(90px,13vw,180px) 0 }

/* ── Tipografi yardımcıları ────────────────── */
.eyebrow{
  font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:18px;
}
.sec-title{
  font-size:clamp(2.1rem,6vw,4.4rem);
  line-height:1.03; font-weight:700; letter-spacing:-.035em;
}
.sec-sub{ margin-top:20px; font-size:clamp(1rem,2vw,1.2rem); color:var(--text-dim); max-width:56ch }
.sec-head{ margin-bottom:clamp(48px,7vw,88px) }
.sec-head--center{ text-align:center }
.sec-head--center .sec-sub{ margin-inline:auto }
.dim{ color:var(--text-faint) }
.lead{ font-size:clamp(1.05rem,2vw,1.28rem); color:var(--text-dim); max-width:52ch }
.grad-text{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.br-md{ display:none }
@media(min-width:700px){ .br-md{ display:inline } }

/* ── Butonlar ──────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 28px; border-radius:999px; border:1px solid transparent;
  font-size:.97rem; font-weight:600; letter-spacing:-.01em; cursor:pointer;
  transition:transform .3s var(--ease), background .3s var(--ease),
             border-color .3s var(--ease), box-shadow .3s var(--ease), opacity .3s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px) }
.btn:active{ transform:translateY(0) scale(.985) }
.btn--primary{
  color:#0a0a0c; background:#f5f5f7;
  box-shadow:0 8px 30px -10px rgba(255,255,255,.45);
}
.btn--primary:hover{ background:#fff; box-shadow:0 14px 44px -12px rgba(255,255,255,.6) }
.btn--ghost{ border-color:var(--line-strong); background:var(--surface); backdrop-filter:blur(10px) }
.btn--ghost:hover{ background:var(--surface-2); border-color:rgba(255,255,255,.32) }
.btn--sm{ padding:9px 19px; font-size:.88rem }
.btn--block{ width:100%; margin-top:26px }
.btn__arrow{ transition:transform .35s var(--ease) }
.btn:hover .btn__arrow{ transform:translateX(4px) }

/* ── Nav ───────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .45s var(--ease-soft), backdrop-filter .45s, border-color .45s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(8,8,10,.72);
  backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  border-bottom-color:var(--line);
}
.nav__inner{
  width:min(100% - 36px, 1320px); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:22px;
}
.brand{ display:inline-flex; align-items:center; gap:10px }
.brand__mark{ width:26px; height:26px; flex:none }
.brand__text{ font-size:1.06rem; font-weight:700; letter-spacing:-.03em }
.brand__thin{ font-weight:300; color:var(--text-dim) }

.nav__links{ display:none; gap:26px; font-size:.88rem; color:var(--text-dim) }
.nav__links a{ position:relative; transition:color .25s }
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-7px; height:1px;
  background:var(--grad); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav__links a:hover{ color:var(--text) }
.nav__links a:hover::after{ transform:scaleX(1) }
@media(min-width:1080px){ .nav__links{ display:flex } }

.nav__actions{ display:flex; align-items:center; gap:12px }
.nav__actions .btn{ display:none }
@media(min-width:640px){ .nav__actions .btn{ display:inline-flex } }

.nav__burger{
  width:38px; height:38px; display:grid; place-content:center; gap:5px;
  background:none; border:0; cursor:pointer;
}
.nav__burger span{
  display:block; width:19px; height:1.6px; background:var(--text); border-radius:2px;
  transition:transform .4s var(--ease), opacity .3s;
}
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(3.3px) rotate(45deg) }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.3px) rotate(-45deg) }
@media(min-width:1080px){ .nav__burger{ display:none } }

.mobile-menu{
  position:fixed; inset:var(--nav-h) 0 0; z-index:99;
  background:rgba(6,6,8,.94); backdrop-filter:blur(26px);
  -webkit-backdrop-filter:blur(26px);
  display:grid; place-items:center;
  animation:menuIn .45s var(--ease);
}
.mobile-menu[hidden]{ display:none }
.mobile-menu nav{ display:grid; gap:8px; text-align:center }
.mobile-menu a{
  font-size:clamp(1.7rem,7vw,2.4rem); font-weight:600; letter-spacing:-.03em;
  padding:10px 24px; opacity:0; animation:menuItem .55s var(--ease) forwards;
}
.mobile-menu a:nth-child(1){ animation-delay:.04s } .mobile-menu a:nth-child(2){ animation-delay:.09s }
.mobile-menu a:nth-child(3){ animation-delay:.14s } .mobile-menu a:nth-child(4){ animation-delay:.19s }
.mobile-menu a:nth-child(5){ animation-delay:.24s } .mobile-menu a:nth-child(6){ animation-delay:.29s }
@keyframes menuIn{ from{ opacity:0 } to{ opacity:1 } }
@keyframes menuItem{ from{ opacity:0; transform:translateY(22px) } to{ opacity:1; transform:none } }

/* ── HERO ──────────────────────────────────── */
.hero{
  position:relative; min-height:100svh; display:grid;
  align-items:end; justify-items:center;
  overflow:hidden; isolation:isolate; text-align:center;
  padding:calc(var(--nav-h) + 40px) 0 clamp(112px,15vh,168px);
}
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:-2 }
.hero__veil{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    /* metnin arkasını karartan scrim — 3D obje üstünde okunurluk */
    radial-gradient(52% 34% at 50% 68%, rgba(0,0,0,.72), transparent 74%),
    radial-gradient(120% 80% at 50% 42%, transparent 30%, rgba(0,0,0,.45) 74%, #000 100%),
    linear-gradient(to bottom, rgba(0,0,0,.55) 0%, transparent 22%, transparent 62%, #000 100%);
}
.grain{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.55'/></svg>");
}
.hero__content{ position:relative; width:min(100% - 44px, 980px); margin-inline:auto }
.hero__title{
  font-size:clamp(2.6rem,8.6vw,6.4rem); line-height:1.02; font-weight:700;
  letter-spacing:-.045em; margin-bottom:26px;
}
.hero__sub{ font-size:clamp(1.02rem,2.3vw,1.35rem); color:var(--text-dim); margin-bottom:42px }
.hero__sub strong{ color:var(--text); font-weight:600 }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center }

.hero__scroll{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  display:grid; justify-items:center; gap:11px;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-faint);
  animation:floaty 3.4s ease-in-out infinite;
}
.hero__mouse{
  width:23px; height:36px; border:1.4px solid var(--line-strong); border-radius:14px;
  display:grid; justify-items:center; padding-top:7px;
}
.hero__mouse i{ width:3px; height:7px; border-radius:2px; background:var(--text-dim); animation:wheel 1.9s var(--ease) infinite }
@keyframes wheel{ 0%{opacity:0;transform:translateY(-4px)} 40%{opacity:1} 100%{opacity:0;transform:translateY(11px)} }
@keyframes floaty{ 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-7px)} }

/* WebGL yoksa hero yine de etkileyici kalsın */
.hero--fallback{
  background:
    radial-gradient(52% 46% at 50% 42%, rgba(123,97,255,.42), transparent 68%),
    radial-gradient(38% 34% at 26% 62%, rgba(94,231,255,.26), transparent 70%),
    radial-gradient(40% 36% at 76% 58%, rgba(255,122,195,.24), transparent 70%),
    #000;
}

/* ── MANIFESTO (kelime kelime açılan metin) ── */
.manifesto{ padding:clamp(110px,17vw,230px) 0; background:linear-gradient(#000,var(--bg-2)) }
.manifesto__text{
  width:min(100% - 44px, 1000px); margin-inline:auto;
  font-size:clamp(1.55rem,4.6vw,3.1rem); font-weight:600;
  line-height:1.26; letter-spacing:-.035em; text-align:center;
}
.manifesto__text .w{ color:rgba(245,245,247,.13); transition:color .35s var(--ease-soft) }
.manifesto__text .w.on{ color:var(--text) }

/* ── HİZMET KARTLARI ───────────────────────── */
.services{ background:var(--bg-2) }
.cards{ display:grid; gap:24px; grid-template-columns:1fr }
@media(min-width:900px){ .cards{ grid-template-columns:repeat(3,1fr) } }

.card{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  border:1px solid var(--line); background:linear-gradient(180deg,var(--surface),rgba(255,255,255,.015));
  transform-style:preserve-3d; will-change:transform;
  transition:border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.card:hover{ border-color:var(--line-strong); box-shadow:0 40px 80px -40px rgba(94,231,255,.28) }
.card__glow{
  position:absolute; inset:-1px; opacity:0; pointer-events:none; transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(123,97,255,.20), transparent 62%);
}
.card:hover .card__glow{ opacity:1 }
.card__art{
  height:210px; display:grid; place-items:center; position:relative; overflow:hidden;
  border-bottom:1px solid var(--line);
  transform:translateZ(38px);
}
.card__art--web{ background:radial-gradient(110% 100% at 50% 0%, rgba(94,231,255,.16), transparent 62%) }
.card__art--ads{ background:radial-gradient(110% 100% at 50% 0%, rgba(255,122,195,.15), transparent 62%) }
.card__art--product{ background:radial-gradient(110% 100% at 50% 0%, rgba(123,97,255,.18), transparent 62%) }
.card__body{ padding:28px 28px 32px; transform:translateZ(18px) }
.card__body h3{ font-size:1.32rem; font-weight:650; letter-spacing:-.028em; margin-bottom:11px }
.card__body p{ color:var(--text-dim); font-size:.97rem; margin-bottom:20px }

.ticks{ display:grid; gap:11px; font-size:.92rem; color:var(--text-dim) }
.ticks li{ position:relative; padding-left:26px }
.ticks li::before{
  content:""; position:absolute; left:0; top:.42em; width:15px; height:15px; border-radius:50%;
  background:var(--grad);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='black'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='black'/></svg>") center/contain no-repeat;
  opacity:.28;
}
.ticks li::after{
  content:""; position:absolute; left:3.6px; top:.72em; width:8px; height:4.4px;
  border-left:1.7px solid var(--c1); border-bottom:1.7px solid var(--c1);
  transform:rotate(-45deg);
}

/* Mini tarayıcı görseli */
.mini-browser{
  width:78%; border-radius:12px; overflow:hidden; border:1px solid var(--line-strong);
  background:rgba(10,10,14,.75); box-shadow:0 24px 50px -22px rgba(0,0,0,.9);
  animation:hover3d 7s ease-in-out infinite;
}
.mini-browser__bar{ display:flex; gap:5px; padding:9px 11px; background:rgba(255,255,255,.055) }
.mini-browser__bar i{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.22) }
.mini-browser__body{ padding:16px; display:grid; gap:8px }
.skel{ height:8px; border-radius:5px; background:linear-gradient(90deg,rgba(255,255,255,.2),rgba(255,255,255,.06)) }
.skel--xl{ width:72%; height:13px } .skel--md{ width:92% } .skel--sm{ width:54% }
.mini-browser__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:6px }
.mini-browser__grid span{ height:28px; border-radius:7px; background:linear-gradient(140deg,rgba(94,231,255,.34),rgba(123,97,255,.16)) }
@keyframes hover3d{ 0%,100%{transform:translateY(0) rotate(-.6deg)} 50%{transform:translateY(-9px) rotate(.6deg)} }

/* Grafik görseli */
.chart{ position:relative; width:74%; }
.chart__bars{ display:flex; align-items:flex-end; gap:8px; height:120px }
.chart__bars span{
  flex:1; height:var(--h); border-radius:6px 6px 3px 3px;
  background:linear-gradient(180deg,var(--c3),rgba(123,97,255,.25));
  transform-origin:bottom; animation:grow 1.1s var(--ease) backwards;
}
.chart__bars span:nth-child(1){animation-delay:.05s} .chart__bars span:nth-child(2){animation-delay:.1s}
.chart__bars span:nth-child(3){animation-delay:.15s} .chart__bars span:nth-child(4){animation-delay:.2s}
.chart__bars span:nth-child(5){animation-delay:.25s} .chart__bars span:nth-child(6){animation-delay:.3s}
.chart__bars span:nth-child(7){animation-delay:.35s}
@keyframes grow{ from{ transform:scaleY(.05); opacity:0 } to{ transform:scaleY(1); opacity:1 } }
.chart__badge{
  position:absolute; top:-14px; right:-10px; font-size:.76rem; padding:6px 12px; border-radius:999px;
  background:rgba(10,10,14,.9); border:1px solid var(--line-strong); backdrop-filter:blur(8px);
}
.chart__badge b{ color:var(--c1) }

/* Yörünge görseli */
.orbit{ position:relative; width:170px; height:170px; display:grid; place-items:center }
.orbit__core{
  width:46px; height:46px; border-radius:50%; background:var(--grad);
  filter:blur(.4px); box-shadow:0 0 44px rgba(123,97,255,.75);
}
.orbit__ring{
  position:absolute; inset:0; border:1px solid var(--line-strong); border-radius:50%;
  animation:spin 9s linear infinite;
}
.orbit__ring i{
  position:absolute; top:-4px; left:calc(50% - 4px); width:8px; height:8px; border-radius:50%;
  background:var(--c1); box-shadow:0 0 14px var(--c1);
}
.orbit__ring--1{ transform:rotateX(68deg) }
.orbit__ring--2{ inset:22px; transform:rotateY(68deg); animation-duration:6.5s; animation-direction:reverse }
.orbit__ring--2 i{ background:var(--c3); box-shadow:0 0 14px var(--c3) }
.orbit__ring--3{ inset:44px; transform:rotateX(24deg) rotateY(40deg); animation-duration:4.5s }
.orbit__ring--3 i{ background:#fff; box-shadow:0 0 14px #fff }
@keyframes spin{ to{ transform:rotate(360deg) } }
.orbit__ring--1{ animation-name:spinX } .orbit__ring--2{ animation-name:spinY } .orbit__ring--3{ animation-name:spinZ }
@keyframes spinX{ from{transform:rotateX(68deg) rotateZ(0)} to{transform:rotateX(68deg) rotateZ(360deg)} }
@keyframes spinY{ from{transform:rotateY(68deg) rotateZ(0)} to{transform:rotateY(68deg) rotateZ(360deg)} }
@keyframes spinZ{ from{transform:rotateX(24deg) rotateY(40deg) rotateZ(0)} to{transform:rotateX(24deg) rotateY(40deg) rotateZ(360deg)} }

/* ── REVIEW CARD (3D) ──────────────────────── */
.rc{ padding:0; height:260vh; background:var(--bg-2) }
.rc__sticky{
  position:sticky; top:0; height:100svh; display:grid; align-items:center;
  overflow:hidden; isolation:isolate;
}
.rc__bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(60% 60% at 78% 45%, rgba(123,97,255,.30), transparent 70%),
    radial-gradient(50% 50% at 20% 70%, rgba(94,231,255,.16), transparent 70%),
    var(--bg-2);
}
.rc__grid{
  display:grid; gap:56px; align-items:center; grid-template-columns:1fr;
  padding-block:70px;
}
@media(min-width:960px){ .rc__grid{ grid-template-columns:1.02fr 1fr; gap:70px } }

.rc__copy .lead{ margin-top:18px }
.rc__feats{ display:grid; gap:16px; margin:32px 0 34px }
.rc__feats li{
  padding:16px 20px; border-radius:var(--r-md); border:1px solid var(--line);
  background:var(--surface); backdrop-filter:blur(10px);
  transition:border-color .5s var(--ease), background .5s var(--ease), transform .5s var(--ease);
}
.rc__feats li.on{ border-color:rgba(123,97,255,.55); background:rgba(123,97,255,.10); transform:translateX(6px) }
.rc__feats b{ display:block; font-size:1rem; font-weight:620; margin-bottom:3px }
.rc__feats span{ font-size:.9rem; color:var(--text-dim) }
.rc__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:18px }
.rc__price{ font-size:.9rem; color:var(--text-dim) } .rc__price b{ color:var(--text); font-size:1.05rem }

.rc__stage{ position:relative; display:grid; justify-items:center; perspective:1700px }

/* Ürün fotoğrafı — kaydırdıkça 3D olarak dönen çerçeve */
.rc__frame{
  position:relative; height:min(46svh,430px); aspect-ratio:820/1047;
  max-width:min(76vw,340px);
  border-radius:24px; overflow:hidden; isolation:isolate;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 54px 100px -44px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.04) inset;
  transform-style:preserve-3d; will-change:transform;
  transform:rotateX(9deg) rotateY(-16deg);
  transition:transform .18s linear;
}
.rc__photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.06);
  transition:opacity .55s var(--ease), transform .9s var(--ease);
}
.rc__photo.is-active{ opacity:1; transform:none }
.rc__sheen{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.14) 46%,rgba(94,231,255,.12) 52%,transparent 64%);
  transform:translateX(var(--sheen,0%));
}
.rc__shadow{
  width:58%; height:32px; margin-top:-14px; border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.85),transparent);
  filter:blur(14px);
}

/* Tasarım seçici */
.rc__picker{ margin-top:26px; width:100%; max-width:430px; text-align:center }
.rc__pickhead{
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-faint); margin:0 0 10px;
}
.rc__pickhead span{ text-transform:none; letter-spacing:0 }
.rc__swatches{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:20px }
.rc__swatches:last-child{ margin-bottom:0 }
.sw{
  background:none; border:1px solid var(--line); border-radius:14px; cursor:pointer;
  padding:6px 6px 7px; display:grid; justify-items:center; gap:5px; width:70px;
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.sw img{ width:100%; border-radius:9px; aspect-ratio:1/1; object-fit:cover }
.sw span{ font-size:.7rem; color:var(--text-faint); letter-spacing:-.01em }
.sw:hover{ border-color:var(--line-strong); background:var(--surface); transform:translateY(-2px) }
.sw.is-active{ border-color:rgba(123,97,255,.75); background:rgba(123,97,255,.12) }
.sw.is-active span{ color:var(--text) }

/* Dar ve alçak ekranlarda sabitleme kapanır, içerik normal akar */
@media(max-width:959px), (max-height:700px){
  .rc{ height:auto }
  .rc__sticky{ position:static; height:auto }
  .rc__grid{ padding-block:clamp(70px,11vw,110px) }
  .rc__frame{ height:auto; width:min(76vw,340px); max-width:none; transform:rotateX(6deg) rotateY(-12deg) }
  .rc__feats li{ border-color:var(--line); background:var(--surface); transform:none }
}

/* ── EK HİZMETLER ──────────────────────────── */
.extras{ background:var(--bg-2); border-top:1px solid var(--line) }
.extras__grid{ display:grid; gap:18px; grid-template-columns:1fr }
@media(min-width:640px){ .extras__grid{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:1060px){ .extras__grid{ grid-template-columns:repeat(4,1fr) } }

.xcard{
  position:relative; padding:26px 24px 28px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--surface);
  display:flex; flex-direction:column; gap:9px;
  transition:transform .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease);
}
.xcard:hover{
  transform:translateY(-5px); border-color:rgba(123,97,255,.45); background:var(--surface-2);
}
.xcard__ico{
  width:30px; height:30px; margin-bottom:6px; flex:none;
  fill:none; stroke:url(#brandGrad); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
  color:var(--c1);
}
.xcard h3{ font-size:1.06rem; font-weight:640; letter-spacing:-.026em; line-height:1.25 }
.xcard p{ font-size:.9rem; color:var(--text-dim); flex:1 }
.xcard__price{
  font-size:.82rem; font-weight:600; color:var(--c1);
  padding-top:12px; border-top:1px solid var(--line);
}
.extras__note{ margin-top:32px; text-align:center; font-size:.94rem; color:var(--text-dim) }
.extras__note a{ color:var(--c1); border-bottom:1px solid rgba(94,231,255,.35) }

/* ── MARKA BANDI ───────────────────────────── */
.brandband{
  padding:clamp(70px,10vw,120px) 0; text-align:center;
  background:var(--bg-2); border-top:1px solid var(--line);
}
.brandband__mark{ width:clamp(72px,11vw,104px); height:auto; margin:0 auto 22px }
.brandband__name{
  font-size:clamp(1.9rem,5.5vw,3.2rem); font-weight:700; letter-spacing:-.04em; line-height:1;
}
.brandband__name em{ font-style:normal; font-weight:300; color:var(--text-dim) }
.brandband__tag{ margin-top:14px; font-size:clamp(.95rem,2vw,1.1rem); color:var(--text-faint) }

/* ── SÜREÇ ─────────────────────────────────── */
.process{ background:linear-gradient(var(--bg-2),var(--bg-3)); padding-bottom:0 }
.process__sticky{ height:300vh; position:relative }
.process__grid{
  position:sticky; top:0; height:100svh;
  display:grid; align-items:center; gap:50px; grid-template-columns:1fr;
}
@media(min-width:960px){ .process__grid{ grid-template-columns:1fr .9fr; gap:70px } }

.process__list{ display:grid; gap:14px }
.process__list li{
  padding:20px 24px; border-radius:var(--r-md); border:1px solid transparent;
  opacity:.35; transition:opacity .5s var(--ease), background .5s var(--ease),
              border-color .5s var(--ease), transform .5s var(--ease);
}
.process__list li.is-active{
  opacity:1; background:var(--surface); border-color:var(--line-strong); transform:translateX(8px);
}
.process__num{
  font-size:.74rem; letter-spacing:.2em; color:var(--c1); font-weight:600;
}
.process__list h3{ font-size:clamp(1.3rem,3vw,1.85rem); font-weight:650; letter-spacing:-.03em; margin:6px 0 8px }
.process__list p{ color:var(--text-dim); font-size:.96rem; max-width:46ch }

.process__visual{ perspective:1400px; display:grid; place-items:center; min-height:300px }
.deck{ position:relative; width:min(78vw,320px); aspect-ratio:4/3; transform-style:preserve-3d;
       transform:rotateX(52deg) rotateZ(-38deg); }
.deck__layer{
  position:absolute; inset:0; border-radius:18px; border:1px solid var(--line-strong);
  background:linear-gradient(140deg,rgba(255,255,255,.10),rgba(255,255,255,.02));
  backdrop-filter:blur(6px); display:grid; place-items:center;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9);
  transition:transform .8s var(--ease), opacity .8s var(--ease), border-color .8s;
  opacity:.30;
}
.deck__label{ font-size:.8rem; letter-spacing:.22em; text-transform:uppercase; color:var(--text-dim) }
.deck__layer--1{ transform:translateZ(0) }
.deck__layer--2{ transform:translateZ(38px) }
.deck__layer--3{ transform:translateZ(76px) }
.deck__layer--4{ transform:translateZ(114px) }
.deck__layer.on{
  opacity:1; border-color:rgba(94,231,255,.55);
  background:linear-gradient(140deg,rgba(94,231,255,.24),rgba(123,97,255,.10));
}
.deck__layer.on .deck__label{ color:#fff }

/* ── İSTATİSTİK ────────────────────────────── */
.stats{ padding:clamp(70px,9vw,110px) 0; background:var(--bg-3); border-block:1px solid var(--line) }
.stats__grid{ display:grid; gap:38px; grid-template-columns:repeat(2,1fr); text-align:center }
@media(min-width:820px){ .stats__grid{ grid-template-columns:repeat(4,1fr) } }
.stat b{
  display:block; font-size:clamp(2.2rem,5.5vw,3.4rem); font-weight:700; letter-spacing:-.04em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; font-variant-numeric:tabular-nums;
}
.stat span{ font-size:.88rem; color:var(--text-dim) }

/* ── FİYATLAR ──────────────────────────────── */
.pricing{ background:var(--bg-3) }
.plans{ display:grid; gap:22px; grid-template-columns:1fr; align-items:start }
@media(min-width:900px){ .plans{ grid-template-columns:repeat(3,1fr) } }
.plan{
  position:relative; padding:34px 30px 36px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--surface);
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.plan:hover{ transform:translateY(-6px); border-color:var(--line-strong) }
.plan--featured{
  border-color:rgba(123,97,255,.5);
  background:linear-gradient(180deg,rgba(123,97,255,.14),rgba(255,255,255,.03));
  box-shadow:0 40px 90px -46px rgba(123,97,255,.75);
}
@media(min-width:900px){ .plan--featured{ transform:scale(1.035) } .plan--featured:hover{ transform:scale(1.035) translateY(-6px) } }
.plan__badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  font-size:.72rem; font-weight:600; padding:6px 16px; border-radius:999px;
  background:var(--grad); color:#0a0a0c; white-space:nowrap;
}
.plan__name{ font-size:1.06rem; font-weight:620; color:var(--text-dim); margin-bottom:12px }
.plan__price{ font-size:clamp(2rem,4.4vw,2.7rem); font-weight:700; letter-spacing:-.04em; line-height:1 }
.plan__price small{ font-size:.5em; vertical-align:.55em; margin-right:2px; color:var(--text-dim) }
.plan__price span{ font-size:.36em; font-weight:500; color:var(--text-faint); letter-spacing:0 }
.plan__desc{ margin:12px 0 24px; color:var(--text-dim); font-size:.94rem }
.pricing__note{ margin-top:32px; text-align:center; font-size:.82rem; color:var(--text-faint) }

/* ── SSS ───────────────────────────────────── */
.faq{ background:linear-gradient(var(--bg-3),var(--bg-2)) }
.acc{ display:grid; gap:12px }
.acc__item{
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface);
  overflow:hidden; transition:border-color .4s, background .4s;
}
.acc__item[open]{ border-color:var(--line-strong); background:var(--surface-2) }
.acc__item summary{
  padding:20px 56px 20px 24px; cursor:pointer; list-style:none; position:relative;
  font-size:1.02rem; font-weight:560; letter-spacing:-.02em;
}
.acc__item summary::-webkit-details-marker{ display:none }
.acc__item summary::after{
  content:""; position:absolute; right:24px; top:50%; width:11px; height:11px;
  border-right:1.8px solid var(--text-dim); border-bottom:1.8px solid var(--text-dim);
  transform:translateY(-70%) rotate(45deg); transition:transform .4s var(--ease);
}
.acc__item[open] summary::after{ transform:translateY(-20%) rotate(-135deg) }
.acc__body{ padding:0 24px 22px; color:var(--text-dim); font-size:.95rem;
            animation:accIn .45s var(--ease) }
@keyframes accIn{ from{ opacity:0; transform:translateY(-8px) } to{ opacity:1; transform:none } }

/* ── İLETİŞİM ──────────────────────────────── */
.contact{ background:var(--bg-2); position:relative; overflow:hidden }
.contact__aura{
  position:absolute; top:-30%; left:50%; transform:translateX(-50%);
  width:min(1100px,140vw); aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side,rgba(123,97,255,.22),transparent 70%);
  filter:blur(30px);
}
.form{ display:grid; gap:16px; position:relative }
.form__row{ display:grid; gap:16px; grid-template-columns:1fr }
@media(min-width:680px){ .form__row{ grid-template-columns:1fr 1fr } }
.field{ position:relative }
.field input,.field textarea,.field select{
  width:100%; padding:22px 18px 10px; border-radius:14px;
  background:var(--surface); border:1px solid var(--line);
  transition:border-color .3s, background .3s; resize:vertical;
}
.field select{ padding-top:22px; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23a1a1aa' stroke-width='1.6'/></svg>");
  background-repeat:no-repeat; background-position:right 18px center; background-size:12px }
.field option{ background:#111 }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:rgba(123,97,255,.7); background:var(--surface-2);
}
.field label{
  position:absolute; left:19px; top:17px; font-size:.97rem; color:var(--text-faint);
  pointer-events:none; transition:transform .28s var(--ease), font-size .28s var(--ease), color .28s;
  transform-origin:left top;
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field .label--static{ transform:translateY(-9px) scale(.78); color:var(--text-dim) }
.field textarea + label{ top:19px }
.form__send{ display:grid; gap:12px; margin-top:26px }
@media(min-width:560px){ .form__send{ grid-template-columns:1fr 1fr } }
.form__send .btn{ width:100% }
.form__status{ font-size:.9rem; text-align:center; min-height:1.3em; color:var(--c1) }
.form__status.err{ color:#ff7a7a }
.contact__alt{
  margin-top:38px; text-align:center; font-size:.92rem; color:var(--text-dim);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
}
.contact__alt a{ transition:color .25s } .contact__alt a:hover{ color:var(--c1) }

/* ── FOOTER ────────────────────────────────── */
.footer{ background:#000; border-top:1px solid var(--line); padding:60px 0 34px }
.footer__inner{
  display:flex; flex-wrap:wrap; gap:34px; justify-content:space-between; align-items:flex-start;
  padding-bottom:34px; border-bottom:1px solid var(--line);
}
.footer__brand p{ margin-top:9px; color:var(--text-faint); font-size:.9rem; max-width:34ch }
.footer__nav{ display:flex; flex-wrap:wrap; gap:12px 26px; font-size:.9rem; color:var(--text-dim) }
.footer__nav a:hover{ color:var(--text) }
.footer__bottom{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
  padding-top:24px; color:var(--text-faint); font-size:.82rem;
}

/* ── Scroll reveal ─────────────────────────────
   Gizleme yalnızca JS varken uygulanır: script
   yüklenmezse içerik yine de görünür kalır.     */
.js .reveal{ opacity:0; transform:translateY(26px) }
.reveal{ transition:opacity .9s var(--ease), transform .9s var(--ease) }
.reveal.in{ opacity:1; transform:none }
.reveal[data-delay="1"]{ transition-delay:.09s }
.reveal[data-delay="2"]{ transition-delay:.18s }
.reveal[data-delay="3"]{ transition-delay:.27s }

/* ── Erişilebilirlik: hareket azaltma ──────── */
@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none }
  .manifesto__text .w{ color:var(--text) }
  .rc{ height:auto } .rc__sticky{ position:static; height:auto }
  .process__sticky{ height:auto } .process__grid{ position:static; height:auto; padding-block:60px }
  .process__list li{ opacity:1 } .deck__layer{ opacity:1 }
}

/* ── WebP <picture> sarmalayıcıları ─────────────
   Mevcut .rc__photo / .sw img kuralları korunur;
   picture bloğunun içindeki img'in kutuyu doldurması için ek. */
.rc__photo img{ width:100%; height:100%; object-fit:cover; display:block }
.sw picture{ display:block; width:100% }
/* width/height öznitelikleri (CLS için doğru olmalı) sunum ipucu olarak
   yükseklik dayatıyor; aspect-ratio'nun çalışması için height:auto şart. */
.sw img{ height:auto }