/* ORION tanıtım sitesi — ortak stiller.
   index.html ve ürün sayfaları bu dosyayı paylaşır. */
/* ═══════════════════════════════════════════════════════════════════
   ORION — tanıtım sayfası
   Dil: kısıtlı, neredeyse tek renk. Marka rengi bağırmaz; yalnızca
   mikro etiketlerde ve durum noktalarında görünür.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --bg:#08080A;
  --bg-2:#0B0B0E;
  --surface:#0E0E13;
  --surface-2:#131319;
  --line:#1C1C24;
  --line-2:#26262F;

  --bone:#EEF0F3;
  --muted:#A8ABB4;
  --dim:#7C7F89;
  /* En kucuk yazilar icin. var(--faint) kullaniliyordu: bu zeminde 3.1:1
     kontrast veriyordu, WCAG'in 4.5 esiginin altinda ve 11px mono
     metinde okunmuyordu. Bu ton 6.0:1. */
  --faint:#8A8D97;

  --amber:#E3B341;   /* bölüm etiketleri */
  --mint:#5FD49B;    /* iyi / tamam */
  --kick:#00E701;    /* canlı */
  --crimson:#E62043; /* müdahale — dolgu olarak (.row i.r) */
  /* ⚠️ KÜÇÜK YAZIDA --crimson KULLANMA: bu zeminde 4.4:1 veriyor, AA
     eşiği 4.5'in hemen altında. Bu açık eş 6.2:1. Dolgu/nokta için
     --crimson, yazı için bu. */
  --crimson-2:#FF4D68;
  --discord:#7A87F5; /* Discord kimliği — yalnızca durum noktasında */

  /* Apple cihazda GERCEK SF Pro gelir; digerlerinde Inter en yakin karsilik.
     SF Pro lisansi web e gomulmeye izin vermiyor, bu yuzden zincir boyle. */
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter",
        system-ui,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",Consolas,monospace;
  /* kelime isareti de ayni aileden — Apple markasini ayri fontla yazmaz */
  --brand:var(--sans);

  --pad:clamp(1.15rem,4vw,2rem);
  --maxw:1140px;
}
*,*::before,*::after{box-sizing:border-box}
/* ⚠️ Kırpma `html`de ve `clip` — `hidden` DEĞİL, `body`de DEĞİL.
   Başlık halesi (h1::after) kasten kutusundan taşıyor; dar ekranda o hale
   sayfaya yatay kaydırma açıyordu. `body{overflow-x:hidden}` bunu
   durdurmuyor (taşma html'e geçiyor), `html{overflow-x:hidden}` ise
   kaydırma kabı yaratıp `position:sticky`yi bozuyor. `clip` ikisini de
   çözüyor: hale görünmeyen yerde kesiliyor, sticky çalışmaya devam ediyor. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--bone);font-family:var(--sans);
  font-size:17px;line-height:1.5;overflow-x:clip;-webkit-font-smoothing:antialiased}
/* ⚠️ `height:auto` ŞART. <img> üstünde width/height niteliği var (CLS'i
   önlemek için). Sadece max-width verilirse tarayıcı height niteliğini
   sabit yükseklik sanıyor ve yatay ekran görüntüsü dikey olarak eziliyor. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1px solid var(--mint);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);position:relative;z-index:3}

/* ── mikro etiket ───────────────────────────────────────────────── */
.lbl{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--amber)}
.lbl--d{color:var(--dim)}
.lbl--m{color:var(--muted)}

/* ── üstteki ilerleme çubuğu ────────────────────────────────────── */
.prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--amber),var(--mint));box-shadow:0 0 12px rgba(95,212,155,.4)}

/* ── yüzen hap menü ─────────────────────────────────────────────── */
.nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:150;
  width:min(1080px,calc(100% - 2rem))}
.nav-in{position:relative;display:flex;align-items:center;gap:1.4rem;height:66px;padding:0 .5rem 0 1.35rem;
  border:1px solid var(--line-2);border-radius:999px;
  background:linear-gradient(180deg,rgba(28,28,36,.92),rgba(10,10,13,.92));
  backdrop-filter:blur(16px);box-shadow:0 18px 40px -22px #000}
.nav-brand{display:flex;align-items:center;gap:.7rem;position:relative;
  padding:.35rem .6rem;margin:-.35rem -.6rem;border-radius:999px;
  transition:background .3s}
.nav-brand:hover{background:rgba(255,255,255,.032)}
/* logonun arkasında hover'da doğan yumuşak ışık */
.nav-brand::before{content:"";position:absolute;left:.6rem;top:50%;
  width:32px;height:32px;border-radius:50%;pointer-events:none;
  transform:translateY(-50%) scale(.7);
  background:radial-gradient(closest-side,rgba(238,242,248,.5),rgba(190,200,215,.16) 55%,transparent 74%);
  opacity:0;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.3,1)}
.nav-brand:hover::before{opacity:1;transform:translateY(-50%) scale(1.9)}
.nav-brand img{width:32px;height:32px;opacity:1;position:relative;
  transition:transform .4s cubic-bezier(.2,.8,.3,1)}
.nav-brand:hover img{transform:scale(1.07)}
.nav-brand > span{position:relative}
.nav-brand b{font-family:var(--brand);font-size:21px;font-weight:600;letter-spacing:-.005em;line-height:1}
.nav-brand span{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--dim);
  display:block;margin-top:2px;white-space:nowrap}
.nav-links{display:flex;gap:1.5rem;margin-left:auto;position:relative}
.nav-links a{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);transition:color .25s,opacity .15s;padding:.35rem 0;position:relative}
.nav-links a:hover{color:var(--bone)}
.nav-links a.on{color:var(--bone)}
.nav-links a:active{opacity:.55;transition:opacity 0s}
/* menünün altında kayan gösterge — hangi bölümdeysen oraya süzülüyor */
.nav-ind{position:absolute;bottom:-2px;left:0;height:1.5px;width:0;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--mint),transparent);
  opacity:0;pointer-events:none}
/* GSAP kaydırmayı devraldığında CSS'in kendi yumuşatması kapanmalı,
   yoksa ikisi aynı anda kaydırmaya çalışıp titriyor. */
html.js-scroll{scroll-behavior:auto}
.nav-cta{margin-left:auto;font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;padding:.66rem 1.2rem;border-radius:999px;
  border:1px solid var(--line-2);color:var(--bone);
  background:linear-gradient(180deg,#25252E,#141419);transition:.22s;white-space:nowrap}
.nav-cta:hover{border-color:#3A3A46;background:linear-gradient(180deg,#2E2E39,#1A1A21)}
@media(max-width:900px){.nav-links{display:none}.nav-cta{margin-left:auto}}
/* ⚠️ Dar ekranda hap menü daralmıyordu: flex öğeleri varsayılan olarak
   yazılarını sıkıştırmaz, `.nav-in`e de `overflow:hidden` konamaz (dil
   menüsü içeride). O yüzden içeriği burada elle küçültüyoruz — yoksa
   CTA haptan taşıp sayfaya yatay kaydırma açıyor. */
@media(max-width:560px){
  .nav{top:12px}
  .nav-in{gap:.55rem;height:58px;padding:0 .4rem 0 .9rem}
  .nav-brand{gap:.5rem}
  .nav-brand img{width:27px;height:27px}
  .nav-brand b{font-size:18px}
  .nav-brand > span > span{display:none}       /* alt satır: KICK · TWITCH · DISCORD */
  .nav-cta{font-size:11px;letter-spacing:.1em;padding:.55rem .8rem}
}

/* ── dil seçici ─────────────────────────────────────────────────── */
#langWrap{position:relative;flex:none}
#langBtn{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:12px;
  letter-spacing:.1em;padding:.55rem .8rem;border-radius:999px;border:1px solid var(--line-2);
  color:var(--muted);background:transparent;cursor:pointer;transition:.2s}
#langBtn:hover{color:var(--bone);border-color:#3A3A46}
#langBtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}
#langMenu{position:absolute;top:calc(100% + 10px);right:0;width:270px;max-height:340px;
  overflow-y:auto;padding:.35rem;border:1px solid var(--line-2);border-radius:12px;
  background:rgba(12,12,16,.97);backdrop-filter:blur(16px);
  box-shadow:0 22px 50px -20px #000;display:none;z-index:200}
#langWrap.open #langMenu{display:block}
#langMenu button{display:flex;width:100%;align-items:baseline;gap:.6rem;padding:.55rem .65rem;
  border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer;
  font:inherit;font-size:14px;text-align:left;transition:background .15s,color .15s}
#langMenu button:hover:not([disabled]){background:var(--surface-2);color:var(--bone)}
#langMenu button.on{background:var(--surface-2);color:var(--bone)}
#langMenu button.on .code{color:var(--mint)}
#langMenu button[disabled]{opacity:.32;cursor:not-allowed}
#langMenu .code{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--dim);
  flex:none;width:26px}
#langMenu .name{flex:1}
#langMenu .en{font-size:11.5px;color:var(--dim)}
/* sağdan-sola diller */
html[dir="rtl"] .rail{right:auto;left:max(1.5rem,4vw);text-align:left}
html[dir="rtl"] .rail div{justify-content:flex-start;flex-direction:row-reverse}
html[dir="rtl"] .snav.on::before{left:auto;right:0}
html[dir="rtl"] .mline .tm,html[dir="rtl"] .row .st{margin-left:0;margin-right:auto}


/* ── menüde imleci takip eden ışık ──────────────────────────────────
   ⚠️ `.nav-in`e `overflow:hidden` KOYULAMAZ — dil menüsü onun içinde ve
   kırpılırdı. Bu yüzden ışık kendi kırpılan katmanında duruyor, içerik
   de onun üstünde (z-index:1). */
.nav-glow{position:absolute;inset:0;border-radius:999px;overflow:hidden;
  pointer-events:none;z-index:0}
.nav-glow::before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;
  left:var(--mx,50%);top:var(--my,50%);transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(226,234,246,.14),rgba(180,192,210,.05) 45%,transparent 72%);
  opacity:0;transition:opacity .4s ease}
.nav-in:hover .nav-glow::before{opacity:1}
.nav-brand,.nav-links,.nav-cta,#langWrap{position:relative;z-index:1}

/* ── kaydırma çubukları siteyle aynı dilde ──────────────────────────
   Varsayılan açık gri çubuk koyu zeminde yamalı duruyordu. */
*{scrollbar-width:thin;scrollbar-color:#2C2C38 transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#2C2C38;border-radius:99px;
  border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#3E3E4E;background-clip:content-box}
#langMenu::-webkit-scrollbar{width:8px}
#langMenu::-webkit-scrollbar-thumb{border-width:2px}

/* ── satır maskesi ──────────────────────────────────────────────── */
/* ⚠️ Maskeye üstten/alttan pay ŞART. Satır yüksekliği 1.06 olduğu için
   maske satır kutusu kadar yüksek kalıyor ve Türkçe'nin ÜSTTEKİ işaretleri
   (İ'nin noktası, Ğ'nin çizgisi) ile ALTTAKİLERİ (Ş, Ç kuyruğu) kırpılıyor.
   Negatif margin ile pay geri alınıyor, yerleşim kaymıyor.
   ⚠️ Pay verilince başlangıç ofseti de büyümeli: 105% artık maskenin
   içinde kalıp metni sızdırıyordu, bu yüzden GSAP'ta 135% kullanılıyor. */
.ln{display:block;overflow:hidden;padding:.22em 0;margin:-.22em 0}
.ln>span{display:block;will-change:transform,filter}
.js .ln>span{transform:translateY(135%)}
.no-js .ln>span{transform:none}
.js .fade{opacity:0}
.no-js .fade{opacity:1}

/* ── hero ───────────────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  padding:7rem 0 4rem;text-align:center}
/* ⚠️ `width/height:100%` ŞART. <canvas> replaced element'tir; `inset:0`
   onu germez, varsayılan 300×150 boyutunda kalır ve sahne sol üst köşeye
   sıkışır. Bu satır olmadan arka plan efekti görünmez.
   Artık hero'nun içinde değil, SAYFANIN TAMAMINDA sabit duruyor; hangi
   bölümdeysen o bölümün sahnesi öne çıkıyor. */
/* Arka plan sahnelerinin genel parlakligi TEK yerden kisiliyor. Tek tek
   alfalari dusurmek yerine buradan kismak, sahneler arasi dengeyi
   bozmadan hepsini birden karartiyor. */
.mesh{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.55}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(125% 88% at 50% 46%,transparent 42%,rgba(8,8,10,.88) 96%)}
.eyebrow{max-width:34ch;margin:0 auto;line-height:2}
h1{position:relative;isolation:isolate;
  font-weight:600;font-size:clamp(2.6rem,6.8vw,5rem);line-height:1.06;
  letter-spacing:-.028em;margin:1.9rem auto 0;max-width:15ch}
/* ⚠️ Hale h1'in üstünde, satır maskesinin DIŞINDA duruyor. Daha önce
   `.soft::before` idi; `.ln` animasyon için `overflow:hidden` taşıdığından
   hale o kutuda kırpılıp kenarı DİKDÖRTGEN olarak görünüyordu. */
h1::after{content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;bottom:-10%;width:min(820px,104%);height:52%;
  transform:translateX(-50%) scale(1);
  /* Notr. Yesil bu sitede "canli/tamam" DURUM rengi; basligi
     renklendirmek icin kullanilinca anlami suluyordu. */
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(232,238,248,.24),rgba(186,196,214,.13) 44%,transparent 74%);
  filter:blur(38px);
  animation:aura 7s ease-in-out infinite}
/* ⚠️ Parlama `filter` ile DEĞİL `text-shadow` ile veriliyor. Bu eleman
   GSAP'ın canlandırdığı `.ln > span`'in ta kendisi; GSAP giriş animasyonunda
   `filter`'ı blur(7px)→blur(0px) diye eziyor, oraya konan drop-shadow
   animasyon biter bitmez siliniyordu. text-shadow'a dokunmuyor.
   Dolgu saydam olduğu için parlama harflerin içinden de sızıyor — istenen
   etki bu. */
/* Arkasındaki hale AYRI bir katman: nefes alıp büyüyor. Metnin kendi
   text-shadow'u keskin kenarı verirken bu katman geniş ve yumuşak
   ışığı taşıyor. */
h1 .soft{
  position:relative;isolation:isolate;
  background:linear-gradient(102deg,#FFFFFF 0%,#E2E6EE 28%,#AEB4C2 60%,#828998 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  /* Üç katman: yakın-sıkı, orta, geniş hale. Tek katman koyunca ya bulanık
     ya da hiç görünmüyordu; katmanlayınca harfin kenarı keskin kalıp
     çevresine ışık yayılıyor. */
  text-shadow:
    0 0 14px rgba(232,238,248,.40),
    0 0 38px rgba(186,198,218,.32),
    0 0 88px rgba(150,165,190,.22);
  animation:sheen 9s ease-in-out infinite;
}

@keyframes aura{
  0%,100%{transform:translateX(-50%) scale(1);opacity:.68}
  50%{transform:translateX(-50%) scale(1.13);opacity:1}
}
@keyframes sheen{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
.hero p.sub{color:var(--muted);max-width:54ch;margin:1.5rem auto 0;font-size:1.19rem;
  line-height:1.42;letter-spacing:-.01em}
.acts{display:flex;gap:.7rem;justify-content:center;margin-top:2.2rem;flex-wrap:wrap}
.pill{font-family:var(--mono);font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
  padding:.85rem 1.5rem;border-radius:999px;border:1px solid var(--line-2);color:var(--bone);
  background:linear-gradient(180deg,#212129,#101015);transition:.22s;
  display:inline-flex;align-items:center;gap:.5rem}
.pill:hover{border-color:#41414F;transform:translateY(-1px)}
.pill svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.scrollcue{position:absolute;bottom:2.2rem;left:0;right:0;z-index:4;text-align:center}
.scrollcue i{display:block;width:1px;height:44px;margin:.8rem auto 0;
  background:linear-gradient(var(--dim),transparent)}

/* sağ ray — üç aşama */
.rail{position:absolute;right:max(1.5rem,4vw);top:50%;transform:translateY(-50%);z-index:4;
  display:grid;gap:2.4rem;text-align:right}
@media(max-width:1120px){.rail{display:none}}
.rail div{display:flex;align-items:center;gap:.75rem;justify-content:flex-end}
.rail span{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim)}
.rail i{width:7px;height:7px;border-radius:50%;border:1px solid var(--line-2);display:block}
.rail div.on i{background:var(--mint);border-color:var(--mint);box-shadow:0 0 10px rgba(95,212,155,.6)}
.rail div.on span{color:var(--muted)}

/* ── bölüm ──────────────────────────────────────────────────────── */
.sec{padding:clamp(4rem,9vw,7.5rem) 0;position:relative;z-index:1}
.sec--line{border-top:1px solid var(--line)}
h2{font-weight:600;font-size:clamp(1.85rem,4.2vw,3.05rem);line-height:1.08;letter-spacing:-.026em;
  margin:1.1rem 0 0;max-width:20ch}
.sec p.note{color:var(--muted);max-width:58ch;margin:1.3rem 0 0;font-size:1.09rem;
  line-height:1.45;letter-spacing:-.008em}

/* ince çizgili ızgara — referanstaki tablo bloğu */
.rule{display:grid;grid-template-columns:1fr;border:1px solid var(--line);margin-top:3rem;
  background:rgba(8,8,10,.62);backdrop-filter:blur(2px)}
@media(min-width:820px){.rule{grid-template-columns:repeat(3,1fr)}}
.cell{padding:clamp(1.5rem,3vw,2.2rem);border-bottom:1px solid var(--line)}
.cell:last-child{border-bottom:0}
@media(min-width:820px){
  .cell{border-bottom:0;border-right:1px solid var(--line)}
  .cell:last-child{border-right:0}
}
.cell h3{font-weight:600;font-size:1.35rem;line-height:1.22;letter-spacing:-.019em;margin:1rem 0 0}
.cell p{color:var(--muted);margin:.8rem 0 0;font-size:.985rem}

/* ── ortalanmış bölüm başlığı ───────────────────────────────────── */
.sec--mid{text-align:center}
.sec--mid h2{margin-inline:auto}
.sec--mid p.note{margin-inline:auto}
.sec--mid .lbl{display:block}

/* ── çekirdek işlevler: 3×2 çizgili ızgara ──────────────────────── */
.grid6{display:grid;grid-template-columns:1fr;border:1px solid var(--line);margin-top:3rem;
  text-align:left;background:rgba(8,8,10,.62);backdrop-filter:blur(2px)}
@media(min-width:640px){.grid6{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.grid6{grid-template-columns:repeat(3,1fr)}}
.fn{padding:clamp(1.6rem,3vw,2.3rem);border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;min-height:230px;position:relative;
  transition:background .25s}
.fn:hover{background:rgba(255,255,255,.014)}
.fn:last-child{border-bottom:0}
@media(min-width:640px){
  .fn{border-right:1px solid var(--line)}
  .fn:nth-child(2n){border-right:0}
  .fn:nth-last-child(-n+2){border-bottom:0}
}
@media(min-width:960px){
  .fn{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .fn:nth-child(2n){border-right:1px solid var(--line)}
  .fn:nth-child(3n){border-right:0}
  .fn:nth-last-child(-n+3){border-bottom:0}
}
.fn .ic{width:30px;height:30px;stroke:var(--bone);fill:none;stroke-width:1.45;
  stroke-linecap:round;stroke-linejoin:round;opacity:.92;
  transition:stroke .25s}
.fn:hover .ic{stroke:var(--mint)}
.fn h3{font-weight:600;font-size:1.06rem;letter-spacing:-.012em;margin:1.4rem 0 0}
.fn p{color:var(--muted);margin:.75rem 0 0;font-size:.96rem}
.fn p em{font-style:normal;color:var(--amber)}
.fn .act{margin-top:auto;padding-top:1.5rem;font-family:var(--mono);font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim);transition:color .25s}
.fn:hover .act{color:var(--muted)}


/* ── akış şeridi: mesaj → kayıt ─────────────────────────────────────
   Sinyal soldan sağa yürüyor: basamak yanar, aradaki çizgi dolar, sonraki
   basamak yanar. KAYIT'a varınca bir süre bekleyip baştan başlıyor.

   ⚠️ Bağlayıcı çizgi ::before DEĞİL gerçek eleman: pseudo'yu GSAP
   doğrudan hedefleyemiyor, dolum animasyonu yazılamıyordu. */
.flow{margin-top:clamp(2.5rem,5vw,3.5rem);display:grid;gap:.4rem;
  grid-template-columns:repeat(auto-fit,minmax(112px,1fr));align-items:start}
.step{text-align:center;position:relative;padding-top:1.4rem}
.step .dot{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:11px;height:11px;border-radius:50%;border:1px solid var(--line-2);
  background:var(--bg);display:block;z-index:2}
.step .bar{position:absolute;top:5px;left:calc(50% + 10px);right:calc(-50% + 10px);
  height:1px;background:var(--line-2);display:block;overflow:hidden;z-index:1}
.step:last-child .bar{display:none}
/* ⚠️ `auto-fit` dar ekranda satır kırıyor; satır sonundaki basamağın
   bağlayıcı çizgisi boşluğa uzanıp sayfaya yatay kaydırma açıyordu.
   Sütun sayısını sabitleyip o basamakların çizgisini kapatıyoruz. */
@media(max-width:620px){
  .flow{grid-template-columns:repeat(3,1fr);row-gap:1.6rem}
  .step:nth-child(3n) .bar{display:none}
}
@media(max-width:400px){
  .flow{grid-template-columns:repeat(2,1fr)}
  .step:nth-child(3n) .bar{display:block}
  .step:nth-child(2n) .bar{display:none}
  .step:last-child .bar{display:none}
}
/* ⚠️ Buradaki gradyan yalnızca yedek. Gerçek renkleri sayfa.js her
   segmente ayrı ayrı yazıyor (her çizgi kendi basamağının renginden
   sonrakine geçiyor) — tek bir sabit gradyan bunu ifade edemez. */
.step .fill{position:absolute;inset:0;display:block;transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg,rgba(124,156,196,.85),rgba(95,212,155,.85))}
.step .cap{font-family:var(--mono);font-size:12px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--faint);display:block}

/* ── 2×2 kontrol kartları ───────────────────────────────────────── */
.lanes{display:grid;grid-template-columns:1fr;border:1px solid var(--line);
  margin-top:clamp(2.5rem,5vw,3.5rem);text-align:left;
  background:rgba(8,8,10,.62);backdrop-filter:blur(2px)}
@media(min-width:820px){.lanes{grid-template-columns:1fr 1fr}}
.lane{padding:clamp(1.6rem,3vw,2.3rem);border-bottom:1px solid var(--line);
  transition:background .25s}
.lane:hover{background:rgba(255,255,255,.014)}
.lane:last-child{border-bottom:0}
@media(min-width:820px){
  .lane{border-right:1px solid var(--line)}
  .lane:nth-child(2n){border-right:0}
  .lane:nth-last-child(-n+2){border-bottom:0}
}
.lane h3{font-weight:600;font-size:1.06rem;letter-spacing:-.012em;margin:0}
.lane > p{color:var(--muted);margin:.7rem 0 0;font-size:.96rem}
.lane ul{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;gap:.55rem;
  font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--faint)}
.lane li{display:flex;gap:.6rem}
.lane li::before{content:"–";flex:none;color:var(--dim)}
.lane em{font-style:normal;color:var(--amber)}

/* ── güven bölümü: solda başlık, sağda tanım listesi ────────────── */
.split{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.split{grid-template-columns:1fr 1.15fr}}
.split h2{max-width:14ch}
.defs{border-top:1px solid var(--line)}
.def{display:grid;grid-template-columns:1fr;gap:.3rem;padding:1.15rem 0;
  border-bottom:1px solid var(--line)}
@media(min-width:560px){.def{grid-template-columns:132px 1fr;gap:1.5rem}}
.def dt{font-family:var(--mono);font-size:12px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--faint);padding-top:.25rem}
.def dd{margin:0;color:var(--muted);font-size:.97rem}
.def dd b{color:var(--bone);font-weight:600}

/* ── tasarım ilkesi alıntısı ────────────────────────────────────── */
.principle{margin-top:clamp(3rem,6vw,4.5rem);padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--line)}
.principle p{font-weight:300;font-size:clamp(1.25rem,2.9vw,1.95rem);line-height:1.45;
  letter-spacing:-.02em;margin:0;max-width:34ch}
.chip-q{display:inline-block;font-family:var(--mono);font-size:.68em;letter-spacing:.02em;
  color:var(--amber);background:rgba(227,179,65,.09);border:1px solid rgba(227,179,65,.32);
  border-radius:7px;padding:.22em .6em;vertical-align:.12em}
.principle .cap{display:block;margin-top:1.4rem;font-family:var(--mono);font-size:12.5px;
  letter-spacing:.19em;text-transform:uppercase;color:var(--faint)}


/* ── kullanım senaryoları: solda soru, sağda yanıt ──────────────── */
.cases{display:grid;gap:clamp(2rem,5vw,3.5rem);grid-template-columns:1fr;
  margin-top:clamp(2.5rem,5vw,3.5rem);align-items:start}
@media(min-width:960px){.cases{grid-template-columns:.9fr 1.1fr}}
.qlist{border-top:1px solid var(--line)}
.q{display:flex;gap:1rem;align-items:baseline;width:100%;text-align:left;
  padding:1.15rem .9rem;border:0;border-bottom:1px solid var(--line);border-left:2px solid transparent;
  background:none;color:var(--muted);font:inherit;font-size:1.02rem;cursor:pointer;
  transition:color .22s,background .22s,border-color .22s}
.q:hover{color:var(--bone);background:rgba(255,255,255,.02)}
.q.on{color:var(--bone);border-left-color:var(--mint);background:rgba(255,255,255,.03)}
.q .no{flex:none;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--faint)}
.q.on .no{color:var(--mint)}

.answer{border:1px solid var(--line-2);border-radius:12px;background:var(--surface);
  box-shadow:0 34px 76px -44px #000;overflow:hidden}
.answer-h{display:flex;align-items:center;gap:1rem;padding:1rem 1.15rem;
  border-bottom:1px solid var(--line);background:var(--bg-2)}
.answer-h b{font-family:var(--mono);font-size:13px;font-weight:600}
.answer-h .tag{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mint);border:1px solid rgba(95,212,155,.35);
  border-radius:6px;padding:.24rem .6rem}
/* ⚠️ Yukseklikler TAM piksel olmali. rem tabanli dolgu + 1.5 katsayili
   satir yuksekligi satiri 50.87px yapiyordu; etiketler kesirli y
   konumuna dusup alt-piksel hizasinda bulaniklasiyordu. En cok
   duz dikey cizgili kelimelerde (SUNUCU) belli oluyordu. */
.arow{display:grid;grid-template-columns:1fr;gap:4px;padding:15px 18px;
  border-bottom:1px solid var(--line);animation:rowIn .3s ease both}
@media(min-width:560px){.arow{grid-template-columns:126px 1fr;gap:1.2rem}}
.arow:last-child{border-bottom:0}
.arow dt{font-family:var(--mono);font-size:12.5px;line-height:20px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint)}
.arow dd{margin:0;font-family:var(--mono);font-size:13px;line-height:20px;color:var(--muted)}
.arow.ok dt{color:var(--mint)}
.arow.warn dt{color:var(--amber)}

/* ── tek nefeste: numaralı dikey akış ───────────────────────────── */
.breath{max-width:760px;margin:clamp(2.5rem,5vw,3.5rem) auto 0;
  border-left:1px solid var(--line);padding-left:clamp(1.4rem,3vw,2.4rem);text-align:left}
.bstep{position:relative;padding:.95rem 0}
.bstep::before{content:attr(data-n);position:absolute;left:calc(-1 * clamp(1.4rem,3vw,2.4rem) - 1px);
  transform:translateX(-50%);font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  color:var(--faint);background:var(--bg);padding:.15rem .25rem}
.bstep p{margin:0;color:var(--muted);font-size:1.04rem;line-height:1.5}
.bstep p b{color:var(--bone);font-weight:600}
.bstep.mid::before{color:var(--amber)}
.bstep.end::before{color:var(--mint)}
.breath-cta{margin-top:2.4rem;text-align:center}

/* ── sahte panel arayüzü ────────────────────────────────────────── */
.bench{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);
  box-shadow:0 40px 90px -50px #000;margin-top:3rem}
.bench-bar{display:flex;align-items:center;gap:.6rem;padding:.9rem 1.15rem;
  border-bottom:1px solid var(--line);background:var(--bg-2)}
.bench-bar img{width:19px;height:19px;opacity:.85}
.bench-bar .t{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)}
.bench-bar .r{margin-left:auto;display:flex;align-items:center;gap:.5rem;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.bench-bar .r i{width:6px;height:6px;border-radius:50%;background:var(--kick);
  box-shadow:0 0 8px rgba(0,231,1,.6)}
.bench-body{display:grid;grid-template-columns:1fr}
@media(min-width:760px){.bench-body{grid-template-columns:212px 1fr}}
.bench-side{border-bottom:1px solid var(--line);padding:.75rem}
@media(min-width:760px){.bench-side{border-bottom:0;border-right:1px solid var(--line);min-height:330px}}
.snav{display:flex;width:100%;align-items:center;gap:.6rem;padding:.62rem .7rem;border-radius:6px;
  background:none;border:0;text-align:left;cursor:pointer;font:inherit;position:relative;
  transition:background .2s,color .2s;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);cursor:default}
.snav b{margin-left:auto;font-weight:400;color:var(--dim);font-size:12px}
/* Canlı sekmenin işareti: sayı değil, nabız atan bir nokta. Diğer
   sekmelerde <b> satır sayısı gösteriyor; burada gösterilecek sabit bir
   sayı yok çünkü içerik anlık geliyor. */
.snav .canli-nokta{margin-left:auto;width:7px;height:7px;border-radius:50%;
  background:var(--kick);box-shadow:0 0 8px rgba(0,231,1,.65);flex:none;
  animation:canliNabiz 2.4s ease-in-out infinite}
@keyframes canliNabiz{0%,100%{opacity:.45}50%{opacity:1}}
/* Bağlanma / boş durum satırı — gerçek mesaj değil, o yüzden sönük. */
.row.sohbet-durum{opacity:.7}
.row.sohbet-durum .txt{color:var(--faint);font-style:italic}

/* ── sohbet satırındaki ORION rozeti ──────────────────────────────
   Kick'in kendi rozetleri gibi adın solunda duruyor. İçerik <img>,
   sohbet metniyle hiç karışmıyor. */
/* ⚠️ `display:inline-block` ŞART. Yukarıdaki genel sıfırlama (satır 58)
   her <img>'i `display:block` yapıyor; onsuz rozet de emote de kendi
   satırına düşüyor, ad ile mesaj alt alta biniyordu. */
.orion-rozet{display:inline-block;width:16px;height:16px;margin-right:.42rem;
  vertical-align:-3.5px;border-radius:4px;padding:1px;
  background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px var(--line)}

/* ── sohbetteki emote'lar (Kick kanal/global + 7TV) ────────────────
   Satır yüksekliği 20px; emote 22px'e kadar büyüyüp satırı itmesin
   diye `vertical-align` ile oturtuluyor. En/boy oranı korunuyor:
   Kick emote'ları kare değil, 7TV'de geniş olanlar var. */
/* ⚠️ Buraya `overflow-wrap:anywhere` YAZMA. `.txt` bir flex ögesi ve
   `anywhere` en-küçük-içerik genişliğini de kırpıyor: öge daracık bir
   sütuna düşüyor, ad/emote/metin alt alta biniyordu. Uzun kelime taşması
   zaten `min-width:0` ile dizginleniyor. */
.row .emote{display:inline-block;height:20px;width:auto;max-width:88px;
  object-fit:contain;vertical-align:-5px;margin:0 1px}

/* ══ panel sekmelerinin kendi biçimleri ═══════════════════════════
   Beş sekme de aynı satır listesiydi; hepsi birbirine benziyordu.
   Artık her yüzey anlattığı şeye benziyor. */

/* ── moderasyon: günün rakamları + şiddet çubuklu eylemler ───────── */
.sayaclar{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:8px;
  overflow:hidden;margin:1.1rem 0 .4rem}
.sayaclar div{background:var(--bg-2);padding:.85rem 1rem}
.sayaclar b{display:block;font-family:var(--mono);font-size:1.5rem;font-weight:500;
  line-height:1;color:var(--bone)}
.sayaclar span{display:block;margin-top:.35rem;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.mrow{display:flex;align-items:center;gap:.85rem;padding:12px 0;line-height:20px;
  border-bottom:1px solid var(--line);animation:rowIn .32s ease both}
.mrow:last-child{border-bottom:0}
/* Şiddet çubuğu: sayı değil kalınlık anlatıyor — göz taramada okuyor. */
.mrow .sev{width:3px;height:20px;border-radius:2px;flex:none;background:var(--line-2)}
.mrow .sev1{background:var(--mint)}
.mrow .sev2{background:var(--amber)}
.mrow .sev3{background:var(--crimson-2)}
.mrow .kural{font-family:var(--mono);font-size:12.5px;color:var(--bone);flex:none}
.mrow .ey{color:var(--muted);font-size:.95rem;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.mrow .st{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);flex:none}

/* ── klipler: satır değil kart ────────────────────────────────────── */
.klipler{display:grid;gap:.9rem;grid-template-columns:1fr;margin-top:1.1rem}
@media(min-width:620px){.klipler{grid-template-columns:repeat(3,1fr)}}
.klip{margin:0;border:1px solid var(--line);border-radius:9px;overflow:hidden;
  background:var(--bg-2);animation:rowIn .32s ease both;transition:border-color .25s}
.klip:hover{border-color:var(--line-2)}
/* ⚠️ Gerçek klip karesi YOK — sahte küçük resim koymak yanıltıcı olurdu.
   Onun yerine soyut bir zemin ve süre rozeti. */
.onizleme{position:relative;aspect-ratio:16/9;
  background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.015) 60%),
             repeating-linear-gradient(115deg,rgba(255,255,255,.03) 0 1px,transparent 1px 12px)}
.onizleme .sure{position:absolute;right:.5rem;bottom:.5rem;font-family:var(--mono);
  font-size:11px;color:var(--bone);background:rgba(0,0,0,.62);
  border-radius:4px;padding:.12rem .35rem}
.klip figcaption{padding:.7rem .8rem .8rem}
.klip figcaption b{display:block;font-family:var(--mono);font-size:12.5px;color:var(--bone)}
.klip figcaption span{display:block;margin-top:.2rem;font-size:.88rem;color:var(--muted)}
.klip figcaption em{display:inline-block;margin-top:.5rem;font-style:normal;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  border-radius:999px;padding:.2rem .5rem}
.klip em.hazir{color:var(--mint);border:1px solid rgba(95,212,155,.3);background:rgba(95,212,155,.08)}
.klip em.suruyor{color:var(--amber);border:1px solid rgba(227,179,65,.3);background:rgba(227,179,65,.08)}

/* ── widget: açık/kapalı anahtarlı katman yığını ──────────────────── */
.katman{display:flex;align-items:center;gap:.9rem;padding:13px 0;
  border-bottom:1px solid var(--line);animation:rowIn .32s ease both}
.katman:last-child{border-bottom:0}
.katman .anahtar{width:30px;height:17px;border-radius:999px;flex:none;position:relative;
  background:var(--surface-2);border:1px solid var(--line-2);transition:background .25s,border-color .25s}
.katman .anahtar i{position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;
  background:var(--dim);transition:transform .25s,background .25s}
.katman.acik .anahtar{background:rgba(95,212,155,.18);border-color:rgba(95,212,155,.45)}
.katman.acik .anahtar i{transform:translateX(13px);background:var(--mint)}
.katman .ad{min-width:0}
.katman .ad b{display:block;font-size:.98rem;font-weight:500;color:var(--bone)}
.katman .ad > span{display:block;font-size:.88rem;color:var(--muted);margin-top:.1rem}
.katman .st{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint)}
.katman.acik .st{color:var(--mint)}

/* ── kayıt: zaman oluklu yoğun log ────────────────────────────────── */
.logdefter{margin-top:1rem;font-family:var(--mono);font-size:12.5px;
  border-left:1px solid var(--line-2);padding-left:1rem}
.lsatir{display:flex;gap:.9rem;padding:9px 0;line-height:19px;
  animation:rowIn .32s ease both}
.lsatir .zaman{color:var(--faint);flex:none}
.lsatir .kim{color:var(--amber);flex:none;min-width:5.2em}
.lsatir .ne{color:var(--muted);min-width:0}

@media(max-width:560px){
  .sayaclar{grid-template-columns:1fr}
  .mrow{flex-wrap:wrap}
  .mrow .st{margin-left:0}
  .lsatir{flex-wrap:wrap;gap:.4rem .9rem}
}
@media(prefers-reduced-motion:reduce){.snav .canli-nokta{animation:none;opacity:1}}
.snav:hover{background:rgba(255,255,255,.035);color:var(--bone)}
.snav.on{background:var(--surface-2);color:var(--bone)}
.snav.on b{color:var(--muted)}
/* seçili sekmenin sol kenarındaki gösterge — superset'teki dikey sekme dili */
.snav.on::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:2px;
  border-radius:2px;background:var(--mint)}
/* satırlar sekme değişince yumuşak girsin */
.row{animation:rowIn .32s ease both}
@keyframes rowIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bench-main{padding:1.25rem 1.35rem 1.5rem;display:flex;flex-direction:column}
.bench-h{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.bench-h b{font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.02em}
.bench-h .chip{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--dim);border:1px solid var(--line);border-radius:5px;
  padding:.3rem .6rem}
.row{display:flex;align-items:center;gap:.8rem;padding:12px 0;line-height:20px;
  border-bottom:1px solid var(--line);font-family:var(--mono);font-size:13.5px}
.row i{width:6px;height:6px;border-radius:50%;flex:none}
.row i.a{background:var(--amber)}
.row i.g{background:var(--mint)}
.row i.r{background:var(--crimson)}
.row .txt{color:var(--muted);min-width:0}
.row .txt b{color:var(--bone);font-weight:500}
.row .st{margin-left:auto;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--dim);flex:none}
.bench-foot{margin-top:auto;padding-top:1.3rem;color:var(--muted);font-size:.97rem}
.bench-foot b{color:var(--muted);font-weight:500}

/* ── panel vitrini ──────────────────────────────────────────────── */
.show{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;grid-template-columns:1fr;
  padding:clamp(2.5rem,6vw,4.5rem) 0;border-top:1px solid var(--line)}
/* Genis ekranda vitrin sarmalayicinin disina tasiyor — ekran goruntusu
   metin sutunundan belirgin sekilde buyuk kalsin diye. */
@media(min-width:1240px){.show{margin-inline:calc((100vw - var(--maxw)) / -5)}}
@media(min-width:920px){
  .show{grid-template-columns:.72fr 1.28fr}
  /* ⚠️ Ters çevrilen vitrinde SÜTUN ORANI da ters çevrilmeli. Yalnızca
     `order` değiştirilirse görsel dar sütuna düşüyor ve ikinci panel
     birincinin yarısı kadar görünüyordu (722px'e karşı 406px). */
  .show--flip{grid-template-columns:1.28fr .72fr}
  .show--flip .show-t{order:2}}
.show-t h3{font-weight:600;font-size:clamp(1.6rem,3.1vw,2.2rem);line-height:1.1;letter-spacing:-.024em;margin:1rem 0 0}
.show-t p{color:var(--muted);margin:.95rem 0 0;font-size:1.01rem}
.meta{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.1rem}
.meta span{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:5px;padding:.28rem .55rem;color:var(--dim)}
/* ── gerçek ekran görüntüsü, tarayıcı çerçevesi içinde ─────────────
   Çerçeve sayfanın kendi renkleriyle çizildiği için, içindeki kırmızı
   (Kick paneli) ve mavi (Discord paneli) görüntüler tek renk palete
   çarpmıyor; ekranın içinde duruyorlar. */
.shotwrap{display:block;border:1px solid var(--line-2);border-radius:11px;overflow:hidden;
  background:var(--bg-2);box-shadow:0 40px 90px -46px #000,0 0 0 1px rgba(255,255,255,.02);
  transition:border-color .25s,transform .5s cubic-bezier(.16,1,.3,1)}
.show:hover .shotwrap{border-color:#33333F;transform:translateY(-3px)}
.shotbar{display:flex;align-items:center;gap:.45rem;padding:.6rem .8rem;
  border-bottom:1px solid var(--line);background:var(--surface)}
.shotbar i{width:8px;height:8px;border-radius:50%;background:#2A2A33;flex:none}
.shotbar .url{margin-left:.55rem;flex:1;font-family:var(--mono);font-size:11.5px;
  color:var(--dim);background:var(--bg);border:1px solid var(--line);border-radius:5px;
  padding:.22rem .6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shotbar .live{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mint);display:inline-flex;align-items:center;gap:.35rem;flex:none}
.shotbar .live b{width:6px;height:6px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 7px rgba(95,212,155,.7);display:block}



/* ── vitrin çağrısı ─────────────────────────────────────────────── */
.show-cta{display:inline-flex;align-items:center;gap:.55rem;margin-top:1.6rem;
  font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  padding:.8rem 1.35rem;border-radius:999px;border:1px solid var(--line-2);color:var(--bone);
  background:linear-gradient(180deg,#212129,#101015);transition:.22s}
.show-cta:hover{border-color:var(--mint);color:var(--mint);transform:translateY(-1px)}
.show-cta svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.1;
  transition:transform .22s}
.show-cta:hover svg{transform:translate(2px,-2px)}
/* görüntünün üstünde beliren "aç" işareti */
.shotwrap{position:relative}
.shotwrap::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(8,8,10,.55));
  opacity:0;transition:opacity .3s}
.show:hover .shotwrap::after{opacity:1}


/* ── çerçeve içi hareket ────────────────────────────────────────────
   Sahte arayüz uydurmak yerine GERÇEK sayfanın görüntüsü hareket ediyor:
   orionmodes'ta uzun sayfa yavaşça kayıyor, orionmod'da (sayfası tam
   ekran boyunda olduğu ve kayacak içeriği bulunmadığı için) imleç giriş
   butonuna gidip tıklıyor. İkisi de üzerine gelince duruyor — bakmak
   isteyen dursun diye. */
.shotview{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--bg-2)}
.shotview img{position:absolute;top:0;left:0;width:100%;height:auto;display:block;
  will-change:transform}

/* sahte imleç */
.ptr{position:absolute;left:0;top:0;width:20px;height:20px;pointer-events:none;
  opacity:0;z-index:3;filter:drop-shadow(0 2px 4px rgba(0,0,0,.65))}
.ptr svg{width:100%;height:100%;fill:#fff;stroke:#0A0A0D;stroke-width:1.2}
.ripple{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;
  border-radius:50%;border:1.5px solid rgba(255,255,255,.75);pointer-events:none;
  opacity:0;z-index:2}

/* ── özellik listesi ───────────────────────────────────────────── */
.feat{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.42rem 1.4rem;
  grid-template-columns:1fr}
@media(min-width:560px){.feat{grid-template-columns:1fr 1fr}}
.feat li{display:flex;gap:.55rem;align-items:flex-start;color:var(--muted);font-size:.96rem}
.feat li svg{width:14px;height:14px;flex:none;margin-top:.3rem;stroke:var(--mint);
  fill:none;stroke-width:2.4}

/* ── ürün yüzeyi maketleri ──────────────────────────────────────────
   Ham ekran görüntüsü yerine sayfanın kendi diliyle çizilmiş maket.
   Sebep: elimizdeki görüntüler GİRİŞ ekranıydı — ürünü değil login
   sayfasını gösteriyordu; ayrıca biri kırmızı biri mavi olduğu için
   tek renk paleti bozuyorlardı. Maket hem ürünün ne yaptığını
   anlatıyor hem palete oturuyor. */
.mock{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg-2);
  box-shadow:0 36px 80px -46px #000;transition:border-color .25s}
.show:hover .mock{border-color:var(--line-2)}
.mock-bar{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;
  border-bottom:1px solid var(--line);background:var(--surface)}
.mock-bar .dot{width:7px;height:7px;border-radius:50%;flex:none}
.mock-bar .dot.k{background:var(--kick);box-shadow:0 0 8px rgba(0,231,1,.55)}
.mock-bar .dot.d{background:var(--discord,#7A87F5);box-shadow:0 0 8px rgba(122,135,245,.5)}
.mock-bar .t{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--muted)}
.mock-bar .t b{color:var(--bone);font-weight:500}
.mock-bar .r{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)}
.mock-body{display:grid;grid-template-columns:1fr}
@media(min-width:520px){.mock-body{grid-template-columns:132px 1fr}}
.mock-side{padding:.6rem;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.15rem}
@media(min-width:520px){.mock-side{border-bottom:0;border-right:1px solid var(--line);display:block}}
.mock-side span{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  color:var(--dim);padding:.4rem .5rem;border-radius:5px}
.mock-side span.on{background:var(--surface-2);color:var(--bone)}
.mock-main{padding:.85rem .95rem 1rem;display:flex;flex-direction:column;gap:.42rem;min-height:212px}
.mline{display:flex;gap:.5rem;align-items:baseline;font-family:var(--mono);font-size:12px}
.mline .w{color:var(--dim);flex:none}
.mline .m{color:var(--muted);min-width:0}
.mline.act .w{color:var(--mint)}
.mline.act .m{color:var(--bone)}
.mline .tm{margin-left:auto;color:var(--faint);font-size:11px;flex:none}
.mtag{flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line-2);border-radius:4px;padding:.1rem .35rem;color:var(--dim)}
/* içerideki uyarı kutusu önizlemesi */
.alertbox{margin-top:auto;border:1px dashed var(--line-2);border-radius:7px;padding:.6rem .75rem;
  background:rgba(255,255,255,.014)}
.alertbox .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim)}
.alertbox .v{font-size:.95rem;margin-top:.2rem}
.alertbox .v b{font-weight:600}
/* alt istatistik şeridi */
.mfoot{display:flex;flex-wrap:wrap;gap:1.1rem;padding:.7rem .95rem;border-top:1px solid var(--line);
  background:var(--surface);font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  color:var(--dim)}
.mfoot b{color:var(--bone);font-weight:500}

/* ── araç tablosu ───────────────────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse;margin-top:2.6rem;font-size:1rem;
  background:rgba(8,8,10,.62)}
.tbl th{text-align:left;font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);font-weight:500;padding:.75rem 1rem;
  border-bottom:1px solid var(--line)}
.tbl td{padding:1rem;border-bottom:1px solid var(--line);color:var(--muted);vertical-align:top}
.tbl td:first-child{color:var(--bone);font-weight:500;white-space:nowrap}
.tbl tr{transition:background .18s}
.tbl tbody tr:hover{background:var(--surface)}


/* ── alt ────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:clamp(3rem,6vw,4.5rem) 0 3rem;
  position:relative;background:var(--bg)}
.foot-grid{display:grid;gap:2.6rem;grid-template-columns:1fr}
@media(min-width:700px){.foot-grid{grid-template-columns:1.5fr 1fr 1fr}}
@media(min-width:1000px){.foot-grid{grid-template-columns:1.7fr repeat(4,1fr);gap:2rem}}

.foot-b{display:flex;align-items:center;gap:.7rem}
.foot-b img{width:30px;height:30px;opacity:.95}
.foot-b b{font-family:var(--brand);font-size:21px;font-weight:600;letter-spacing:-.005em;
  display:block;line-height:1}
.foot-b span{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--dim);
  display:block;margin-top:3px;white-space:nowrap}
.foot-tag{color:var(--dim);font-size:.95rem;margin:1.1rem 0 0;max-width:30ch}

/* sosyal ikonlar */
.social{display:flex;gap:.5rem;margin-top:1.5rem;flex-wrap:wrap}
.social a{width:38px;height:38px;display:grid;place-items:center;border-radius:9px;
  border:1px solid var(--line);color:var(--dim);transition:.2s}
.social a:hover{color:var(--bone);border-color:var(--line-2);background:var(--surface);
  transform:translateY(-2px)}
.social svg{width:17px;height:17px;fill:currentColor}
.social .todo{display:flex;align-items:center;padding:0 .9rem;width:auto;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);border-style:dashed;cursor:default}
.social .todo:hover{transform:none;background:none;color:var(--faint);border-color:var(--line)}

.foot-col h4{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);margin:0 0 1rem}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.foot-col a{color:var(--muted);font-size:.97rem;transition:color .18s;
  display:inline-flex;align-items:center;gap:.4rem}
.foot-col a:hover{color:var(--bone)}
.foot-col a .ext{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;
  opacity:0;transition:opacity .18s,transform .18s;transform:translate(-2px,2px)}
.foot-col a:hover .ext{opacity:.8;transform:none}

.foot-bottom{margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.6rem;
  border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:1rem;
  align-items:center;justify-content:space-between;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;color:var(--faint)}
/* Yasal bağlantılar her sayfanın altında — yalnızca ana sayfada durması
   hem beklenti dışı hem de pratikte bulunmaz oluyordu. */
.foot-yasal{display:flex;flex-wrap:wrap;gap:1.4rem}
.foot-yasal a{color:var(--faint);transition:color .2s}
.foot-yasal a:hover{color:var(--bone)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .ln>span{transform:none}
  .js .fade{opacity:1}
  .mesh{display:none}
  h1 .soft{animation:none}
  h1::after{animation:none}
}

/* ── ürün adı bağlantısı (ORIONMOD · ORIONMODES) ─────────────────
   Sitenin kırmızısında ve parlıyor — tıklanabilir olduğu DURURKEN de
   belli olsun diye. Üç işaret birden veriyor:
     1) yazı kırmızı ve halesi nefes alıyor
     2) ok baştan görünüyor (eskiden yalnızca hover'da beliriyordu —
        fareyi üstüne getirmeyen bağlantı olduğunu hiç anlamıyordu)
     3) altı çizgi kısmen dolu duruyor, hover'da sonuna kadar doluyor

   ⚠️ Nabız `::before`de, `text-shadow`da DEĞİL. Yazının kendi
   `text-shadow`u hover'da değişiyor; ikisi aynı özellikte olsaydı
   animasyon hover'ı ezerdi.
   ⚠️ `--crimson` DEĞİL `--crimson-2`: koyu kırmızı bu zeminde 4.4:1,
   açık eşi 6.2:1. Başlık büyük ama yanındaki ok ince. */
/* Her ürün KENDİ panelinin rengini taşıyor: orionmod.com kırmızı,
   orionmodes.com mavi. Renkler paneller tahmin edilerek değil, panel
   ekran görüntülerinden örneklenerek seçildi.

   ⚠️ Mavi panelin ham tonu (#1E1EFA) bu zeminde 2.5:1 — büyük yazı
   için bile eşiğin (3:1) altında. Aynı ton korunup parlaklığı
   açıldı: 4.3:1 → 8.1:1.
   ⚠️ Renkler tek yerde, değişken olarak. Gradyan, hale, alt çizgi ve
   ok hepsi aynı ikiliyi okuyor; biri değişince dördü birden değişiyor. */
.prod-link{--p1:#E62846;--p2:#FF6478;--pg:255,100,120;
  display:inline-flex;align-items:center;gap:.5rem;position:relative;
  isolation:isolate;color:var(--p2);
  background-image:linear-gradient(100deg,var(--p1),var(--p2));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  /* ⚠️ Gölge saydam dolgunun ALTINA çiziliyor, yani harf saydam olsa
     da hale görünüyor. `filter:drop-shadow` da olurdu ama GSAP
     başlıklarda filter'ı eziyor; text-shadow güvenli taraf. */
  text-shadow:0 0 22px rgba(var(--pg),.34);
  transition:text-shadow .25s,color .22s}
.prod-link--mavi{--p1:#5F5FFB;--p2:#9B9BFD;--pg:110,110,252}
.prod-link::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-6%;right:-6%;top:50%;height:150%;transform:translateY(-50%);
  border-radius:50%;filter:blur(20px);
  background:radial-gradient(closest-side,rgba(var(--pg),.32),rgba(var(--pg),0) 72%);
  animation:urunNabiz 3.2s ease-in-out infinite}
/* Ok gradyandan pay almıyor (SVG'ye background-clip işlemiyor); açık
   uçtan düz renk alıyor ki yazıyla aynı aileden görünsün. */
.prod-link svg{width:.5em;height:.5em;stroke:var(--p2);fill:none;stroke-width:2.2;
  opacity:.6;transform:none;transition:opacity .22s,transform .22s}
.prod-link::after{content:"";position:absolute;left:0;right:42%;bottom:.04em;height:2px;
  background:linear-gradient(90deg,var(--p1),var(--p2));border-radius:2px;
  box-shadow:0 0 12px rgba(var(--pg),.55);
  transition:right .32s cubic-bezier(.4,0,.2,1)}
.prod-link:hover{text-shadow:0 0 34px rgba(var(--pg),.7)}
.prod-link:hover svg{opacity:1;transform:translate(2px,-2px)}
.prod-link:hover::after{right:0}
.prod-link:focus-visible{outline:2px solid var(--p2);outline-offset:6px;border-radius:4px}
@keyframes urunNabiz{
  0%,100%{opacity:.55;transform:translateY(-50%) scale(.94)}
  50%{opacity:1;transform:translateY(-50%) scale(1.04)}
}
@media(prefers-reduced-motion:reduce){
  .prod-link::before{animation:none;opacity:.8}
}