/* ============================================================
   goodbyedpi.xyz · mor / sisli / derinlikli tema
   ============================================================ */

/* ---------- 1. jetonlar ---------- */
:root{
  color-scheme: dark;

  /* zemin */
  --bg:        #07050e;
  --bg-2:      #0b0818;
  --bg-3:      #100c22;

  /* mor ölçek */
  --v-50:  #f4eeff;
  --v-100: #e9d5ff;
  --v-200: #d3b4ff;
  --v-300: #b98cff;
  --v-400: #9d63f8;
  --v-500: #7c3aed;
  --v-600: #6425c9;
  --v-700: #4a1a97;

  /* yardımcı */
  --mint:  #5eead4;
  --rose:  #fb7185;
  --amber: #fbbf24;

  /* metin */
  --tx:      #f3f0ff;
  --tx-mid:  #c3bade;
  --tx-dim:  #948ab4;
  --tx-fade: #6f6690;

  /* yüzey */
  --glass:      rgba(255,255,255,.045);
  --glass-2:    rgba(255,255,255,.075);
  --line:       rgba(255,255,255,.085);
  --line-hi:    rgba(255,255,255,.16);
  --sheen:      rgba(255,255,255,.13);

  /* ışık */
  --glow-v:  0 0 0 1px rgba(157,99,248,.34), 0 12px 36px -8px rgba(124,58,237,.55), 0 2px 10px -2px rgba(0,0,0,.6);
  --glow-vh: 0 0 0 1px rgba(185,140,255,.5), 0 18px 52px -8px rgba(124,58,237,.8), 0 2px 12px -2px rgba(0,0,0,.6);
  --lift:    0 1px 0 var(--sheen) inset, 0 22px 60px -28px rgba(0,0,0,.9);

  /* tipografi */
  --fd: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --fb: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fm: "JetBrains Mono", "Cascadia Code", ui-monospace, "Consolas", monospace;

  /* düzen */
  --w: 1180px;
  --r: 18px;
  --r-lg: 26px;
  --ease: cubic-bezier(.22,.68,0,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:86px;
  overflow-x:hidden;   /* body'deki hidden tek başına html seviyesini kapsamıyor */
}

body{
  margin:0;
  background:var(--bg);
  color:var(--tx);
  font-family:var(--fb);
  font-size:16.5px;
  line-height:1.68;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ max-width:100%; }
a{ color:var(--v-200); text-decoration:none; }
a:hover{ color:var(--v-100); }

:focus-visible{
  outline:2px solid var(--v-300);
  outline-offset:3px;
  border-radius:6px;
}

::selection{ background:rgba(124,58,237,.45); color:#fff; }

.skip-link{
  position:fixed; top:-100px; left:14px; z-index:200;
  background:var(--v-500); color:#fff; padding:.7rem 1.1rem; border-radius:10px;
  font-weight:600; font-size:.9rem;
}
.skip-link:focus{ top:14px; color:#fff; }

/* ---------- 2. atmosfer ---------- */
.atmosphere{
  position:fixed; inset:0; z-index:-2; overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, #1a1038 0%, transparent 60%),
    radial-gradient(90% 60% at 90% 10%,  #241046 0%, transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 42%, #06040c 100%);
}

.mist{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:.5;
  will-change:transform;
  /* fare paralaksı app.js'ten gelir */
  transform:translate3d(calc(var(--mx,0) * var(--dep,1) * 1px), calc(var(--my,0) * var(--dep,1) * 1px), 0);
}
.mist--1{ --dep:2.4; width:56vw; height:56vw; left:-12vw; top:-14vw;
  background:radial-gradient(circle, #7c3aed 0%, rgba(124,58,237,0) 68%); animation:drift1 26s ease-in-out infinite; }
.mist--2{ --dep:-1.8; width:44vw; height:44vw; right:-8vw; top:4vw;
  background:radial-gradient(circle, #a855f7 0%, rgba(168,85,247,0) 66%); opacity:.42; animation:drift2 32s ease-in-out infinite; }
.mist--3{ --dep:1.2; width:62vw; height:40vw; left:18vw; top:52vh;
  background:radial-gradient(ellipse, #4c1d95 0%, rgba(76,29,149,0) 70%); opacity:.55; animation:drift3 38s ease-in-out infinite; }
.mist--4{ --dep:-2.6; width:30vw; height:30vw; right:22vw; top:118vh;
  background:radial-gradient(circle, #c084fc 0%, rgba(192,132,252,0) 64%); opacity:.24; animation:drift2 29s ease-in-out infinite reverse; }

@keyframes drift1{ 0%,100%{ margin:0 0 } 50%{ margin:5vh 0 0 4vw } }
@keyframes drift2{ 0%,100%{ margin:0 0 } 50%{ margin:-6vh 3vw 0 0 } }
@keyframes drift3{ 0%,100%{ margin:0 0 } 50%{ margin:4vh 0 0 -5vw } }

/* tepeden inen ışık huzmesi */
.beam{
  position:absolute; top:-30vh; left:50%; width:140vw; height:90vh;
  transform:translateX(-50%) perspective(600px) rotateX(58deg);
  background:
    repeating-linear-gradient(90deg, rgba(167,139,250,.055) 0 1px, transparent 1px 84px);
  mask-image:radial-gradient(60% 70% at 50% 30%, #000 0%, transparent 75%);
  opacity:.8;
}

/* dipteki 3B ızgara zemin */
.grid-floor{
  position:absolute; bottom:-6vh; left:50%; width:200vw; height:60vh;
  transform:translateX(-50%) perspective(420px) rotateX(72deg);
  background:
    repeating-linear-gradient(90deg, rgba(167,139,250,.10) 0 1px, transparent 1px 78px),
    repeating-linear-gradient(0deg,  rgba(167,139,250,.10) 0 1px, transparent 1px 78px);
  mask-image:linear-gradient(0deg, #000 0%, transparent 72%);
  opacity:.55;
}

/* film grenİ */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3. düzen yardımcıları ---------- */
.wrap{ width:min(var(--w), calc(100% - 3rem)); margin-inline:auto; position:relative; z-index:2; }
.wrap--narrow{ width:min(820px, calc(100% - 3rem)); }

.section{ padding:clamp(4.25rem, 7vw, 6.75rem) 0; position:relative; }
.section--alt::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, transparent, rgba(124,58,237,.055) 35%, transparent);
  pointer-events:none;
}

.muted{ color:var(--tx-dim); }
.fine{ font-size:.845rem; color:var(--tx-dim); line-height:1.6; }
.grad{
  background:linear-gradient(102deg, var(--v-100) 0%, var(--v-300) 45%, #8b5cf6 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- 4. tipografi ---------- */
h1,h2,h3,h4{ font-family:var(--fd); font-weight:600; letter-spacing:-.03em; line-height:1.08; margin:0; }

h1{ font-size:clamp(2.35rem, 5.5vw, 3.95rem); font-weight:700; }
h1 em{
  display:block; font-style:normal; font-weight:500;
  font-size:.46em; letter-spacing:-.02em; line-height:1.3;
  color:var(--tx-dim); margin-top:.85rem;
}
h2{ font-size:clamp(1.95rem, 4.2vw, 3rem); }
h3{ font-size:1.16rem; letter-spacing:-.02em; line-height:1.35; }
h4{ font-size:.98rem; }

.lede{ font-size:clamp(1.02rem, 1.7vw, 1.16rem); color:var(--tx-mid); max-width:53ch; margin:1.5rem 0 0; }
.lede strong{ color:var(--v-100); font-weight:600; }
.lede em{ font-style:normal; color:var(--tx); }

code{
  font-family:var(--fm); font-size:.855em;
  background:rgba(157,99,248,.15); color:var(--v-100);
  padding:.15em .45em; border-radius:6px;
  border:1px solid rgba(157,99,248,.2);
  white-space:nowrap;
}
kbd{
  font-family:var(--fm); font-size:.78em; color:var(--tx);
  background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
  border:1px solid var(--line-hi); border-bottom-width:2px;
  padding:.14em .42em; border-radius:5px;
}

.kicker{
  display:inline-block; font-family:var(--fm); font-size:.735rem;
  text-transform:uppercase; letter-spacing:.18em; font-weight:500;
  color:var(--v-300); margin-bottom:1rem;
}

.shead{ max-width:62ch; margin-bottom:clamp(2.5rem,5vw,4rem); }
.shead--center{ margin-inline:auto; text-align:center; }
.shead__p{ color:var(--tx-mid); margin:1.15rem 0 0; font-size:1.02rem; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--fm); font-size:.775rem; letter-spacing:.02em;
  color:var(--tx-mid);
  background:var(--glass); border:1px solid var(--line);
  padding:.42rem .9rem; border-radius:100px;
  backdrop-filter:blur(12px);
}
.eyebrow{ align-items:flex-start; }
.eyebrow__t{ text-align:left; }
.eyebrow .dot{
  width:6px; height:6px; border-radius:50%; background:var(--mint);
  box-shadow:0 0 0 3px rgba(94,234,212,.18); flex:none;
  margin-top:.55em;   /* çok satıra sarınca ilk satırla hizalı kalsın */
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

/* ---------- 5. butonlar ---------- */
.btn{
  --bp: .82rem 1.35rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:var(--bp);
  font-family:var(--fd); font-size:.94rem; font-weight:600; letter-spacing:-.01em;
  border:0; border-radius:13px; cursor:pointer;
  text-decoration:none; white-space:nowrap;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), background .2s;
  position:relative; isolation:isolate;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn__ico{ width:1em; height:1em; flex:none; fill:none; }
.btn__ico--r{ transition:transform .3s var(--ease); }
.btn:hover .btn__ico--r{ transform:translateX(3px); }

.btn--primary{
  color:#fff;
  background:linear-gradient(180deg, var(--v-400) 0%, var(--v-500) 55%, var(--v-600) 100%);
  box-shadow:var(--glow-v), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn--primary::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.22), transparent 60%);
  opacity:0; transition:opacity .3s;
}
.btn--primary:hover{ color:#fff; transform:translateY(-2px); box-shadow:var(--glow-vh), inset 0 1px 0 rgba(255,255,255,.34); }
.btn--primary:hover::after{ opacity:1; }

.btn--ghost{
  color:var(--tx);
  background:var(--glass); border:1px solid var(--line-hi);
  backdrop-filter:blur(14px);
}
.btn--ghost:hover{ color:#fff; background:var(--glass-2); border-color:var(--v-400); transform:translateY(-2px); }

.btn--sm{ --bp:.58rem 1rem; font-size:.855rem; border-radius:10px; }
.btn--lg{ --bp:1rem 1.7rem; font-size:1rem; }
.btn--xl{ --bp:1.15rem 2.1rem; font-size:1.06rem; border-radius:15px; }

.btn__meta{
  font-family:var(--fm); font-size:.72rem; font-weight:400;
  opacity:.75; padding-left:.6rem; margin-left:.15rem;
  border-left:1px solid rgba(255,255,255,.28);
}

/* ---------- 6. navigasyon ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(9,6,20,.72);
  backdrop-filter:blur(22px) saturate(150%);
  border-bottom-color:var(--line);
}
.nav__inner{
  width:min(var(--w), calc(100% - 3rem)); margin-inline:auto;
  display:flex; align-items:center; gap:1.5rem;
  padding:.95rem 0;
}

.brand{ display:inline-flex; align-items:center; gap:.6rem; color:var(--tx); font-family:var(--fd); font-weight:700; letter-spacing:-.025em; font-size:1.06rem; }
.brand:hover{ color:var(--tx); }
.brand__mark{ width:28px; height:28px; display:grid; place-items:center; flex:none; filter:drop-shadow(0 2px 8px rgba(124,58,237,.6)); }
.brand__tld{ color:var(--v-400); font-weight:500; }

/* nowrap: bağlantı metni iki satıra kırılırsa çubuk 40px'ten 64px'e büyüyüp
   sayfayı aşağı itiyordu. Sığmama durumu artık sessizce bozulmak yerine
   ölçümde görünüyor, 940px altında zaten hamburger menüye geçiliyor. */
.nav__links{ display:flex; gap:.35rem; margin-left:auto; white-space:nowrap; }
.nav__links a{
  color:var(--tx-dim); font-size:.895rem; font-weight:500;
  padding:.5rem .8rem; border-radius:9px;
  transition:color .2s, background .2s;
}
.nav__links a:hover{ color:var(--tx); background:var(--glass); }

.nav__burger{
  display:none; width:40px; height:40px; flex:none;
  background:var(--glass); border:1px solid var(--line); border-radius:10px;
  cursor:pointer; padding:0; place-items:center; gap:4px;
}
.nav__burger span{ display:block; width:16px; height:1.6px; background:var(--tx); border-radius:2px; transition:transform .28s var(--ease), opacity .2s; }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.6px) rotate(-45deg); }

/* ---------- 7. hero ---------- */
/* Üst boşluk bilinçli olarak kısıldı: H1 marka adını da taşıdığı için dört
   satıra çıkıyordu ve indirme düğmesi 1366×768 dizüstülerde ilk ekranın altında
   kalıyordu. Ölçüm: CTA 748px → 596px. */
.hero{ padding:clamp(6.4rem, 11vh, 9rem) 0 clamp(4rem, 8vw, 7rem); }
.hero__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(2.5rem, 5vw, 4.5rem); align-items:center;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.3rem; }

.trust-row{
  list-style:none; margin:2.5rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem 1.6rem;
  font-size:.885rem; color:var(--tx-dim);
}
.trust-row li{ display:inline-flex; align-items:center; gap:.5rem; }
.trust-row svg{ width:14px; height:14px; flex:none; fill:none; color:var(--mint); }
.trust-row strong{ color:var(--tx-mid); }

/* 3B sahne */
.hero__stage{ position:relative; }
.stage{
  /* min-height + aspect-ratio birlikte genişliği zorlayabiliyor (min-height/oran).
     Bu yüzden taban yükseklik viewport'a bağlı: dar ekranda genişliği taşırmıyor. */
  position:relative; width:100%;
  aspect-ratio:1/.86; min-height:min(320px, 74vw);
  border-radius:var(--r-lg);
  background:
    radial-gradient(80% 70% at 50% 40%, rgba(124,58,237,.14), transparent 70%),
    linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
  border:1px solid var(--line);
  box-shadow:var(--lift), 0 0 90px -30px rgba(124,58,237,.5);
  overflow:hidden;
  backdrop-filter:blur(10px);
}
.stage canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.stage__fallback{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); margin:0; }

.stage__label{
  position:absolute; z-index:3;
  font-family:var(--fm); font-size:.68rem; letter-spacing:.05em;
  color:var(--tx-fade);
  pointer-events:none; white-space:nowrap;
  /* text-transform:lowercase KULLANMA: lang="tr" altında Türkçe küçültme
     kuralı devreye girip "ISP · DPI" ifadesini "ısp · dpı" yapıyor. */
}
.stage__label--far{ top:1.1rem; left:50%; transform:translateX(-50%); }
.stage__label--wall{ top:40%; right:1.1rem; color:var(--v-300); }
.stage__label--near{ bottom:5.4rem; left:50%; transform:translateX(-50%); }

.stage__hud{
  position:absolute; left:1rem; right:1rem; bottom:1rem; z-index:4;
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.8rem 1rem;
  background:rgba(10,7,22,.66);
  border:1px solid var(--line); border-radius:14px;
  backdrop-filter:blur(18px) saturate(150%);
}
.stage__status{ display:flex; align-items:center; gap:.55rem; font-size:.815rem; color:var(--tx-mid); line-height:1.35; }
.stage__statusDot{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--rose); box-shadow:0 0 0 3px rgba(251,113,133,.2);
  transition:background .35s, box-shadow .35s;
}
.stage.is-on .stage__statusDot{ background:var(--mint); box-shadow:0 0 0 3px rgba(94,234,212,.2); }

.switch{ display:inline-flex; align-items:center; gap:.6rem; margin-left:auto; cursor:pointer; user-select:none; }
.switch input{ position:absolute; opacity:0; width:1px; height:1px; }
.switch__track{
  width:42px; height:24px; border-radius:100px; flex:none; position:relative;
  background:rgba(255,255,255,.11); border:1px solid var(--line-hi);
  transition:background .3s, border-color .3s;
}
.switch__knob{
  position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:var(--tx-dim);
  transition:transform .32s var(--ease), background .3s;
}
.switch input:checked + .switch__track{ background:linear-gradient(180deg, var(--v-400), var(--v-600)); border-color:var(--v-400); }
.switch input:checked + .switch__track .switch__knob{ transform:translateX(18px); background:#fff; }
.switch input:focus-visible + .switch__track{ outline:2px solid var(--v-300); outline-offset:3px; }
.switch__text{ font-family:var(--fd); font-size:.85rem; font-weight:600; color:var(--tx); }

.stage__hint{ text-align:center; font-size:.79rem; color:var(--tx-fade); margin:.9rem 0 0; }

/* ---------- 8. kartlar ---------- */
.cards{ display:grid; gap:1.15rem; }
.cards--4{ grid-template-columns:repeat(auto-fit, minmax(255px,1fr)); }
.cards--3{ grid-template-columns:repeat(auto-fit, minmax(min(100%,280px),1fr)); }

/* ---------- uygulama ekran görüntüleri ---------- */
.shot{
  margin:0 0 clamp(1.8rem,3.5vw,2.6rem);
  padding:0; border-radius:var(--r-lg);
  background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.015));
  border:1px solid var(--line);
  box-shadow:var(--lift), 0 0 90px -34px rgba(124,58,237,.6);
  overflow:hidden;
}
.shot img{
  display:block; width:100%; height:auto;
  border-bottom:1px solid var(--line);
}
.shot figcaption{
  padding:.75rem 1.1rem;
  font-family:var(--fm); font-size:.76rem; color:var(--tx-fade);
  text-align:center;
}
.shots{
  display:grid; gap:1.15rem;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,340px),1fr));
  margin-top:clamp(1.8rem,3.5vw,2.6rem);
}
.shots .shot{ margin:0; }
.shot--sm figcaption{ font-size:.72rem; padding:.6rem .9rem; }

/* SHA256 kutusunun (.hash) stilleri Temmuz 2026'da kaldırıldı: doğrulama
   bölümü siteden çıktı. Geri eklenirse kural da geri gelmeli. */

.card{
  position:relative;
  padding:1.7rem 1.6rem;
  border-radius:var(--r);
  background:linear-gradient(158deg, var(--glass-2), rgba(255,255,255,.014));
  border:1px solid var(--line);
  box-shadow:var(--lift);
  backdrop-filter:blur(16px);
  transition:border-color .3s, box-shadow .3s, transform .1s linear;
}
.card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(420px circle at var(--px,50%) var(--py,0%), rgba(167,139,250,.13), transparent 42%);
  opacity:0; transition:opacity .35s;
}
.card:hover{ border-color:var(--line-hi); box-shadow:var(--lift), 0 0 50px -22px rgba(124,58,237,.6); }
.card:hover::before{ opacity:1; }
.card h3, .card h4{ margin:0 0 .6rem; }
.card p{ margin:0; color:var(--tx-dim); font-size:.925rem; line-height:1.66; }
.card p strong{ color:var(--tx-mid); }
.card--sm{ padding:1.35rem 1.4rem; }
.card--sm h4{ margin-bottom:.5rem; }
.card--sm p{ font-size:.885rem; }
.card--sm .btn{ margin-top:1rem; }

.card__ico{
  display:grid; place-items:center; width:42px; height:42px;
  border-radius:12px; margin-bottom:1.1rem;
  border:1px solid var(--line-hi);
  background:linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.02));
}
.card__ico svg{ width:21px; height:21px; fill:none; }
.card__ico--v{ color:var(--v-200); }
.card__ico--t{ color:var(--mint); }
.card__ico--w{ color:var(--amber); }
.card__ico--m{ color:var(--v-300); }

.card__link{
  display:inline-block; margin-top:1rem;
  font-size:.87rem; font-weight:600; color:var(--v-200);
}
.card__link:hover{ color:var(--v-100); }

/* ---------- 9. bilgi kutuları ---------- */
.notice{
  display:flex; gap:1rem; align-items:flex-start;
  margin-top:1.6rem; padding:1.15rem 1.35rem;
  border-radius:var(--r);
  background:rgba(124,58,237,.09);
  border:1px solid rgba(157,99,248,.24);
  font-size:.9rem; color:var(--tx-mid); line-height:1.65;
}
.notice__badge{
  display:grid; place-items:center; flex:none;
  width:22px; height:22px; border-radius:50%; margin-top:.15rem;
  background:var(--v-500); color:#fff;
  font-family:var(--fd); font-size:.78rem; font-weight:700;
}
.notice strong{ color:var(--tx); }
.notice em{ font-style:normal; color:var(--tx); }
.notice + .notice{ margin-top:.85rem; }

.notice--warn{
  background:rgba(251,191,36,.075);
  border-color:rgba(251,191,36,.3);
  color:#f2e6c8;
}
.notice--warn strong, .notice--warn em{ color:#fdf3dd; }
.notice--warn code{
  background:rgba(251,191,36,.14); color:#fde3a7;
  border-color:rgba(251,191,36,.26);
}
.notice__badge--warn{ background:var(--amber); color:#33240a; }

/* Olumlu bildirim: "bu işe yarıyor" mesajları için. Nane tonu, uyarı sarısıyla
   karışmasın diye bilinçli olarak farklı. */
.notice--ok{
  background:rgba(94,234,212,.07);
  border-color:rgba(94,234,212,.28);
  color:#d3f6ef;
}
.notice--ok strong, .notice--ok em{ color:#eafdf9; }
.notice--ok code{
  background:rgba(94,234,212,.13); color:#a7f3e4;
  border-color:rgba(94,234,212,.24);
}
.notice__badge--ok{ background:var(--mint); color:#06302a; }

.warn, .ok-box{
  margin-top:1rem; padding:.85rem 1.05rem; border-radius:12px;
  font-size:.875rem; line-height:1.6;
  border:1px solid; border-left-width:3px;
}
.warn{ background:rgba(251,191,36,.075); border-color:rgba(251,191,36,.28); color:#f8e9c4; }
.warn b{ color:var(--amber); }
.ok-box{ background:rgba(94,234,212,.06); border-color:rgba(94,234,212,.24); color:#cdeee7; }
.ok-box b{ color:var(--mint); }

/* ---------- 10. akış (nasıl çalışır) ---------- */
.flow{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(270px,1fr));
  gap:1.4rem;
  perspective:1400px;
}
.flow__step{
  position:relative;
  padding:1.8rem 1.65rem 1.7rem;
  border-radius:var(--r-lg);
  background:linear-gradient(160deg, rgba(255,255,255,.065), rgba(255,255,255,.012));
  border:1px solid var(--line);
  box-shadow:var(--lift);
  backdrop-filter:blur(14px);
  transform-style:preserve-3d;
  transition:transform .5s var(--ease), border-color .4s, box-shadow .4s;
}
.flow__step:hover{
  transform:translateZ(30px) rotateX(2.5deg);
  border-color:rgba(157,99,248,.4);
  box-shadow:var(--lift), 0 0 60px -20px rgba(124,58,237,.7);
}
.flow__num{
  position:absolute; top:-.7rem; left:1.5rem;
  width:34px; height:34px; border-radius:11px; display:grid; place-items:center;
  font-family:var(--fd); font-size:.95rem; font-weight:700; color:#fff;
  background:linear-gradient(180deg, var(--v-400), var(--v-600));
  box-shadow:0 8px 22px -8px rgba(124,58,237,.9), inset 0 1px 0 rgba(255,255,255,.3);
}
.flow__step h3{ margin:.55rem 0 .7rem; }
.flow__step p{ margin:0; color:var(--tx-dim); font-size:.92rem; }
.flow__step p em{ font-style:normal; color:var(--tx-mid); }

.flow__art{
  height:104px; margin:1rem 0 1.3rem;
  border-radius:14px; overflow:hidden;
  background:radial-gradient(70% 90% at 50% 50%, rgba(124,58,237,.16), transparent 72%);
  border:1px solid var(--line);
  display:grid; place-items:center;
}
.art{ width:100%; height:100%; }
.a-pkt{ fill:rgba(167,139,250,.16); stroke:var(--v-300); stroke-width:1.3; }
.a-pkt--ok{ fill:rgba(94,234,212,.12); stroke:var(--mint); }
.a-pkt--split1{ animation:sl 3s ease-in-out infinite; }
.a-pkt--split2{ animation:sl 3s ease-in-out .12s infinite; }
.a-pkt--split3{ animation:sl 3s ease-in-out .24s infinite; }
@keyframes sl{ 0%,100%{ transform:translateX(0) } 50%{ transform:translateX(7px) } }
.a-lbl{ font-family:var(--fm); font-size:9px; fill:var(--v-100); }
.a-arrow{ stroke:var(--v-400); stroke-width:1.4; stroke-dasharray:5 4; animation:march 1.4s linear infinite; }
.a-arrow--ok{ stroke:var(--mint); }
@keyframes march{ to{ stroke-dashoffset:-18 } }
.a-eyeC{ fill:rgba(251,113,133,.1); stroke:var(--rose); stroke-width:1.4; }
.a-eyeP{ fill:var(--rose); animation:scan 2.4s ease-in-out infinite; }
@keyframes scan{ 0%,100%{ transform:translateX(-5px) } 50%{ transform:translateX(5px) } }
.a-eye--blind{ opacity:.42; }
.a-eye--blind .a-eyeC{ stroke:var(--tx-fade); fill:none; }
.a-slash{ stroke:var(--tx-fade); stroke-width:1.6; stroke-linecap:round; }
.a-check{ fill:none; stroke:var(--mint); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- 11. karşılaştırma tablosu ---------- */
.compare{ margin-top:clamp(3rem,6vw,4.5rem); }
.compare__h{ text-align:center; font-size:1.3rem; margin-bottom:1.5rem; }
.table-scroll{
  overflow-x:auto; border-radius:var(--r); border:1px solid var(--line);
  background:rgba(255,255,255,.022);
  /* sağ kenarda solma: daha fazla kolon olduğunu belli eder.
     Kaydırma sonuna gelince kaybolur (local + scroll attachment). */
  background-image:linear-gradient(90deg, transparent calc(100% - 44px), rgba(7,5,14,.85) 100%);
  background-repeat:no-repeat;
  background-attachment:local;
  scrollbar-width:thin;
}
.table-scroll::-webkit-scrollbar{ height:8px; }
.table-scroll::-webkit-scrollbar-thumb{ background:rgba(157,99,248,.4); border-radius:4px; }
.tbl{ width:100%; border-collapse:collapse; font-size:.915rem; min-width:520px; }
.tbl th, .tbl td{ padding:.9rem 1.15rem; text-align:left; border-bottom:1px solid rgba(255,255,255,.055); }
.tbl thead th{
  font-family:var(--fd); font-size:.85rem; font-weight:600; color:var(--tx);
  background:rgba(124,58,237,.13); border-bottom-color:var(--line-hi);
  position:sticky; top:0;
}
.tbl thead th:nth-child(2){ color:var(--v-100); }
.tbl tbody tr:last-child td{ border-bottom:0; }
.tbl tbody tr:hover td{ background:rgba(255,255,255,.024); }
.tbl td:first-child{ color:var(--tx-dim); }
.tbl td.ok{ color:#a7f3e4; }
.tbl td.no{ color:var(--tx-dim); }
.tbl td.ok::before{ content:"✓ "; color:var(--mint); font-weight:700; }
.tbl td.no::before{ content:"✕ "; color:var(--tx-fade); }
.compare__note{ margin:1.3rem auto 0; max-width:66ch; font-size:.895rem; color:var(--tx-dim); text-align:center; }
.compare__note em{ font-style:normal; color:var(--tx-mid); }

/* ---------- 12. indirme ---------- */
.dl{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:1.3rem; align-items:start; }

.dl__main{
  position:relative; overflow:hidden;
  padding:2.2rem 2rem;
  border-radius:var(--r-lg);
  background:
    radial-gradient(120% 90% at 20% -10%, rgba(124,58,237,.28), transparent 62%),
    linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
  border:1px solid rgba(157,99,248,.32);
  box-shadow:var(--lift), 0 0 100px -34px rgba(124,58,237,.85);
  backdrop-filter:blur(18px);
  transition:transform .1s linear, box-shadow .35s;
}
.dl__badge{
  display:inline-block; margin-bottom:1.2rem;
  font-family:var(--fm); font-size:.7rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--v-100);
  background:rgba(157,99,248,.2); border:1px solid rgba(157,99,248,.36);
  padding:.32rem .7rem; border-radius:100px;
}
.dl__os{ position:absolute; top:1.9rem; right:1.9rem; width:34px; height:34px; color:var(--v-300); opacity:.5; }
.dl__title{ font-size:1.7rem; margin:0 0 .6rem; }
.dl__ver{ font-family:var(--fm); font-size:.62em; font-weight:400; color:var(--v-300); letter-spacing:0; }
.dl__sub{ color:var(--tx-mid); font-size:.945rem; margin:0 0 1.7rem; max-width:46ch; }
.dl__btn{ width:100%; }

.dl__specs{ list-style:none; margin:1.6rem 0 0; padding:1.4rem 0 0; border-top:1px solid var(--line); display:grid; gap:.7rem; }
.dl__specs li{ display:flex; justify-content:space-between; gap:1rem; font-size:.875rem; align-items:baseline; }
.dl__specs span{ color:var(--tx-fade); }
.dl__specs b{ color:var(--tx-mid); font-weight:500; font-family:var(--fm); font-size:.82rem; text-align:right; }
.dl__ghnote{ margin:1.2rem 0 0; font-size:.8rem; color:var(--tx-fade); text-align:center; }
.dl__ghnote b{ color:var(--tx-dim); }

/* Grid öğelerinin varsayılan min-width'i "auto", yani min-content. Doğrulama
   kartındaki uzun PowerShell komutu (white-space:pre) kartı 492px'e zorluyor ve
   kolonu taşırıyordu. minmax(0,1fr) + min-width:0 tabanı sıfırlıyor; komut
   kendi .code kutusunda kayıyor, SHA256 ise overflow-wrap ile satır kırıyor. */
.dl__side{ display:grid; grid-template-columns:minmax(0,1fr); gap:1.1rem; }
.dl__side > *{ min-width:0; }
/* .notice varsayılan olarak üstten boşluk alıyor; kolon içinde gap yeterli. */
.dl__side .notice{ margin-top:0; }
.card--mac p code{ white-space:normal; }

/* kod bloğu */
.code, .term{
  position:relative; margin-top:1rem;
  border-radius:12px; overflow:hidden;
  background:rgba(4,3,10,.78);
  border:1px solid var(--line);
}
.code pre, .term pre{
  margin:0; padding:.95rem 1.05rem; overflow-x:auto;
  font-family:var(--fm); font-size:.795rem; line-height:1.75;
  color:var(--tx-mid);
}
/* Kopyala butonu olan bloklarda metin butonun altına kaçmasın.
   Sağa boşluk vermek uzun satırlarda yetmiyor, bu yüzden üstten yer açıyoruz. */
.code:has(.code__copy) pre{ padding-top:2.45rem; }
.code .code__copy{ top:.5rem; right:.5rem; }
.code code, .term code{ background:none; border:0; padding:0; color:inherit; font-size:inherit; white-space:pre; }
.code__copy{
  position:absolute; top:.55rem; right:.55rem; z-index:2;
  font-family:var(--fm); font-size:.68rem; color:var(--tx-dim);
  background:rgba(255,255,255,.07); border:1px solid var(--line);
  padding:.25rem .55rem; border-radius:7px; cursor:pointer;
  transition:color .2s, background .2s, border-color .2s;
}
.code__copy:hover{ color:#fff; background:var(--v-500); border-color:var(--v-400); }
.code__copy.is-done{ color:var(--mint); border-color:rgba(94,234,212,.4); }

.term__bar{
  display:flex; align-items:center; gap:.4rem;
  padding:.6rem .85rem; border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.035);
}
.term__bar span{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.16); flex:none; }
.term__bar span:first-child{ background:rgba(251,113,133,.6); }
.term__bar span:nth-child(2){ background:rgba(251,191,36,.6); }
.term__bar span:nth-child(3){ background:rgba(94,234,212,.55); }
.term__bar b{ font-family:var(--fm); font-size:.72rem; font-weight:400; color:var(--tx-fade); margin-left:.4rem; }

.c-p{ color:var(--v-300); }
.c-c{ color:var(--tx-fade); }
.c-ok{ color:var(--mint); }
.c-f{ color:var(--v-200); }
.c-v{ color:var(--amber); }
.c-d{ color:var(--tx-fade); font-style:italic; }

/* ---------- 13. sekmeler + adımlar ---------- */
.tabs__bar{
  display:inline-flex; gap:.3rem; padding:.35rem; margin-bottom:2.2rem;
  background:var(--glass); border:1px solid var(--line); border-radius:15px;
  backdrop-filter:blur(14px);
}
.tabs__btn{
  display:flex; flex-direction:column; align-items:flex-start; gap:.05rem;
  padding:.65rem 1.2rem; border:0; border-radius:11px; cursor:pointer;
  background:transparent; color:var(--tx-dim);
  font-family:var(--fd); font-size:.94rem; font-weight:600; text-align:left;
  transition:background .28s, color .28s, box-shadow .28s;
}
.tabs__btn span{ font-family:var(--fm); font-size:.68rem; font-weight:400; opacity:.7; letter-spacing:.03em; }
.tabs__btn:hover{ color:var(--tx); }
.tabs__btn.is-active{
  color:#fff;
  background:linear-gradient(180deg, var(--v-400), var(--v-600));
  box-shadow:0 8px 22px -10px rgba(124,58,237,.9), inset 0 1px 0 rgba(255,255,255,.25);
}
.tabs__panel[hidden]{ display:none; }
.tabs__panel.is-active{ animation:fadeUp .5s var(--ease) both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:1.1rem; counter-reset:s; }
.step{
  min-width:0;
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.4rem;
  padding:1.6rem 1.7rem;
  border-radius:var(--r);
  background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
  border:1px solid var(--line);
  box-shadow:var(--lift);
  backdrop-filter:blur(14px);
  transition:border-color .3s, transform .35s var(--ease);
}
.step:hover{ border-color:rgba(157,99,248,.34); transform:translateX(4px); }
.step__k{
  font-family:var(--fm); font-size:.9rem; font-weight:500;
  color:var(--v-400); padding-top:.15rem;
}
.step__b h3{ margin:0 0 .55rem; }
.step__b h3 em{ font-style:normal; color:var(--v-200); }
.step__b > p{ margin:0; color:var(--tx-dim); font-size:.925rem; }
.step__b > p + p{ margin-top:.7rem; }
.step--danger .step__k{ color:var(--rose); }

/* ---------- 14. sss ---------- */
.faq{ display:grid; gap:.7rem; }
.qa{
  border-radius:14px; overflow:hidden;
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  border:1px solid var(--line);
  backdrop-filter:blur(12px);
  transition:border-color .3s, background .3s;
}
.qa[open]{ border-color:rgba(157,99,248,.34); background:rgba(124,58,237,.055); }
.qa summary{
  display:flex; align-items:center; gap:1rem;
  padding:1.15rem 1.4rem; cursor:pointer; list-style:none;
  font-family:var(--fd); font-size:1rem; font-weight:600; color:var(--tx);
  transition:color .2s;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--v-100); }
.qa summary span{ flex:1; }
.qa summary i{
  position:relative; width:16px; height:16px; flex:none;
}
.qa summary i::before, .qa summary i::after{
  content:""; position:absolute; top:50%; left:0; width:100%; height:1.8px;
  background:var(--v-300); border-radius:2px; transform:translateY(-50%);
  transition:transform .32s var(--ease);
}
.qa summary i::after{ transform:translateY(-50%) rotate(90deg); }
.qa[open] summary i::after{ transform:translateY(-50%) rotate(0); }
.qa__b{ padding:0 1.4rem 1.5rem; animation:fadeUp .38s var(--ease) both; }
.qa__b p{ margin:0 0 .85rem; color:var(--tx-dim); font-size:.925rem; }
.qa__b p:last-child{ margin-bottom:0; }
.qa__b b{ color:var(--tx-mid); }
.qa__b em{ font-style:normal; color:var(--tx-mid); }
.qa__list{ margin:.6rem 0 0; padding-left:1.3rem; color:var(--tx-dim); font-size:.92rem; }
.qa__list li{ margin-bottom:.5rem; }
.qa__list li::marker{ color:var(--v-400); }
.qa__list--num{ padding-left:1.5rem; }

/* ---------- 15. kapanış + footer ---------- */
.closing{ padding:clamp(4.5rem,8vw,7rem) 0; position:relative; }
.closing::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(880px, 92%); height:min(400px, 90%);
  background:radial-gradient(ellipse at center, rgba(124,58,237,.26), transparent 68%);
  filter:blur(30px);
}
.closing__in{ text-align:center; }
.closing h2{ max-width:22ch; margin:0 auto; }
.closing p{ color:var(--tx-dim); font-size:1.06rem; margin:1.1rem auto 2.2rem; }
.closing__fine{ display:block; margin-top:1.2rem; font-family:var(--fm); font-size:.76rem; color:var(--tx-fade); }

.foot{
  padding:clamp(3rem,6vw,4.5rem) 0 2rem;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, transparent, rgba(124,58,237,.05));
}
.foot__grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:2.5rem;
  padding-bottom:2.5rem;
}
.foot__brand p{ margin:1rem 0 0; font-size:.855rem; color:var(--tx-fade); max-width:34ch; line-height:1.65; }
.foot__col h4{ font-size:.78rem; text-transform:uppercase; letter-spacing:.13em; color:var(--tx-fade); margin:0 0 1rem; font-family:var(--fm); font-weight:500; }
.foot__col a{ display:block; font-size:.885rem; color:var(--tx-dim); padding:.22rem 0; }
.foot__col a:hover{ color:var(--v-200); }
.foot__col--legal p{ margin:0; font-size:.82rem; color:var(--tx-fade); line-height:1.62; }
.foot__bottom{
  display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  padding-top:1.8rem; border-top:1px solid rgba(255,255,255,.055);
  font-size:.79rem; color:var(--tx-fade);
}

/* ---------- 16. bildirim ---------- */
.toast{
  position:fixed; bottom:1.6rem; left:50%; z-index:300;
  transform:translate(-50%, 130%);
  padding:.75rem 1.3rem; border-radius:12px;
  background:rgba(16,11,32,.94); border:1px solid rgba(157,99,248,.4);
  box-shadow:0 18px 44px -14px rgba(0,0,0,.9);
  backdrop-filter:blur(18px);
  font-size:.87rem; font-weight:500; color:var(--tx);
  transition:transform .45s var(--ease), opacity .3s;
  opacity:0; pointer-events:none;
}
.toast.is-up{ transform:translate(-50%,0); opacity:1; }

/* ---------- 17. görünüme girme animasyonu ---------- */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s var(--ease) var(--d,0ms), transform .8s var(--ease) var(--d,0ms);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- 18. duyarlılık ---------- */
@media (max-width:1040px){
  .foot__grid{ grid-template-columns:1fr 1fr; gap:2.2rem; }
}

@media (max-width:940px){
  /* minmax(0,1fr): sade "1fr" olursa kolonun otomatik alt sınırı
     içerikten büyüyüp satırı taşırabiliyor. */
  .hero__grid{ grid-template-columns:minmax(0,1fr); }
  /* Animasyon eskiden order:-1 ile başlığın üstüne alınıyordu; telefonda bu düzen
     mesajı ve indirme düğmesini ekranın altına itiyordu. Artık DOM sırası
     korunuyor: önce başlık ve düğme, sonra animasyon. */
  .hero__stage{ min-width:0; }
  .stage{ aspect-ratio:1/.72; }
  .dl{ grid-template-columns:minmax(0,1fr); }
  .nav__links{
    position:fixed; inset:64px 0 auto; flex-direction:column; gap:0;
    padding:1rem 1.5rem 1.6rem; margin:0;
    background:rgba(9,6,20,.96); backdrop-filter:blur(24px);
    border-bottom:1px solid var(--line);
    transform:translateY(-130%); transition:transform .42s var(--ease);
  }
  .nav__links.is-open{ transform:none; }
  .nav__links a{ padding:.8rem .2rem; font-size:1rem; border-radius:0; border-bottom:1px solid rgba(255,255,255,.05); }
  .nav__burger{ display:grid; }
  .nav .btn--sm{ margin-left:auto; }
}

@media (max-width:640px){
  body{ font-size:16px; }
  .wrap, .wrap--narrow, .nav__inner{ width:calc(100% - 2rem); }
  h1 em{ font-size:.5em; }
  .btn--lg, .btn--xl{ --bp:.95rem 1.4rem; font-size:.96rem; width:100%; }
  .hero__cta{ flex-direction:column; }
  .trust-row{ gap:.55rem 1.1rem; font-size:.83rem; }
  .step{ grid-template-columns:minmax(0,1fr); gap:.5rem; padding:1.35rem 1.25rem; }
  .step__k{ padding:0; }
  .dl__main{ padding:1.7rem 1.35rem; }
  .dl__os{ display:none; }
  .dl__title{ font-size:1.4rem; }
  .tabs__bar{ display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .tabs__btn{ padding:.6rem .7rem; font-size:.85rem; align-items:center; text-align:center; }
  .foot__grid{ grid-template-columns:1fr; gap:1.8rem; }
  .stage__label--wall{ font-size:.62rem; }
  .stage__label--near{ display:none; }   /* kısa sahnede HUD'un altında kalıyor */
  .stage__hud{ padding:.7rem .85rem; }
  .switch{ margin-left:auto; }
  /* nav: marka + CTA + hamburger 390px'e sığsın */
  .nav__inner{ gap:.55rem; }
  .brand__text{ font-size:.98rem; }
  .nav .btn--sm{ padding:.5rem .72rem; font-size:.8rem; }
  .nav__burger{ flex:none; }
  /* mobil performansı: en pahalı bulanıklıkları kıs */
  .mist{ filter:blur(60px); }
  .beam{ display:none; }
}

/* ---------- 19. erişilebilirlik tercihleri ---------- */
@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; }
}

@media (prefers-contrast: more){
  :root{ --tx-dim:#d6cfee; --tx-fade:#b3a9cf; --line:rgba(255,255,255,.2); }
}

/* ---------- 20. yazdırma ---------- */
@media print{
  .atmosphere,.grain,.nav,.stage,.closing,.toast{ display:none !important; }
  body{ background:#fff; color:#000; }
  .card,.step,.qa,.dl__main{ border:1px solid #ccc; background:none; box-shadow:none; }
  .qa__b{ display:block !important; }
  a::after{ content:" (" attr(href) ")"; font-size:.8em; color:#555; }
}