/* ORION tanitim sitesi - urun sayfasi stilleri.
   orionmod.html ve orionmodes.html bu dosyayi PAYLASIR.
   Burayi degistirince iki sayfa birden degisir - kasitli.
   Sayfaya ozel bir sey lazimsa o sayfanin kendi <style> blogunda dursun. */
/* ── ürün sayfasına özel ───────────────────────────────────────────── */
.p-hero{position:relative;padding:clamp(7rem,12vw,9.5rem) 0 clamp(3rem,6vw,4.5rem)}
.p-hero h1{max-width:18ch;margin-inline:0}
.p-hero .lede{color:var(--muted);font-size:clamp(1.05rem,2vw,1.22rem);max-width:56ch;
  margin:1.5rem 0 0;line-height:1.45}
.geri{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:12px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--faint);transition:color .2s,gap .2s}
.geri:hover{color:var(--bone);gap:.75rem}
.geri svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2}

/* künye şeridi */
.kunye{display:grid;grid-template-columns:1fr;border:1px solid var(--line);
  margin-top:clamp(2.5rem,5vw,3.5rem);background:rgba(8,8,10,.62)}
@media(min-width:700px){.kunye{grid-template-columns:repeat(4,1fr)}}
.kunye div{padding:1.2rem 1.4rem;border-bottom:1px solid var(--line)}
.kunye div:last-child{border-bottom:0}
@media(min-width:700px){
  .kunye div{border-bottom:0;border-right:1px solid var(--line)}
  .kunye div:last-child{border-right:0}
}
.kunye dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);margin:0}
.kunye dd{margin:.5rem 0 0;font-size:1.02rem;font-weight:500}
/* Ana metin <b> icinde — cevirinin ayri anahtar gormesi icin. Gorunum
   degismesin diye kalinligi dd'den devraliyor. */
.kunye dd b{font-weight:inherit}
.kunye dd small{display:block;font-weight:400;color:var(--muted);font-size:.9rem;margin-top:.2rem}

/* özellik blokları */
.ozellik{border-top:1px solid var(--line);padding:clamp(2.2rem,4vw,3rem) 0;
  display:grid;gap:clamp(1.5rem,4vw,3rem);grid-template-columns:1fr}
@media(min-width:900px){.ozellik{grid-template-columns:.85fr 1.15fr}}
.ozellik h3{font-weight:600;font-size:clamp(1.35rem,2.6vw,1.75rem);letter-spacing:-.02em;
  margin:.9rem 0 0;line-height:1.15}
.ozellik > div > p{color:var(--muted);margin:.85rem 0 0;font-size:1rem;max-width:44ch}
.ozellik ul{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.ozellik li{display:grid;grid-template-columns:1fr;gap:.2rem;
  padding:.95rem 0;border-bottom:1px solid var(--line)}
.ozellik li:first-child{padding-top:0}
.ozellik li:last-child{border-bottom:0}
.ozellik li b{font-weight:600;font-size:1rem}
.ozellik li span{color:var(--muted);font-size:.95rem}
.ozellik li code{font-family:var(--mono);font-size:.86em;color:var(--amber);
  background:rgba(227,179,65,.08);border:1px solid rgba(227,179,65,.22);
  border-radius:5px;padding:.06em .4em}

/* katkı kartları */
.katki{display:grid;grid-template-columns:1fr;border:1px solid var(--line);
  margin-top:clamp(2rem,4vw,3rem);background:rgba(8,8,10,.62)}
@media(min-width:760px){.katki{grid-template-columns:repeat(3,1fr)}}
.katki article{padding:clamp(1.5rem,3vw,2.1rem);border-bottom:1px solid var(--line)}
.katki article:last-child{border-bottom:0}
@media(min-width:760px){
  .katki article{border-bottom:0;border-right:1px solid var(--line)}
  .katki article:last-child{border-right:0}
}
/* ⚠️ Mint DEĞİL amber. Mint sitenin "canlı / tamam" durum rengi —
   bunlar durum göstergesi değil, bölüm işaretleri. */
.katki .n{font-family:var(--mono);font-size:2rem;font-weight:500;color:var(--amber);
  line-height:1;letter-spacing:-.02em}
.katki h4{font-weight:600;font-size:1.05rem;margin:.9rem 0 0}
.katki p{color:var(--muted);margin:.6rem 0 0;font-size:.95rem}

/* ── nasıl çalışır: solda adımlar, sağda canlı konsol ─────────────── */
.calisir{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:1fr;
  margin-top:clamp(2.5rem,5vw,3.5rem);align-items:start}
@media(min-width:940px){.calisir{grid-template-columns:.85fr 1.15fr}}
.adim{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:1.15rem 0;
  border-bottom:1px solid var(--line);opacity:.45;transition:opacity .35s}
.adim:last-child{border-bottom:0}
.adim.on{opacity:1}
.adim .no{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--faint);
  padding-top:.3rem;transition:color .35s}
.adim.on .no{color:var(--mint)}
.adim b{display:block;font-weight:600;font-size:1.02rem}
.adim b + span{display:block;color:var(--muted);font-size:.95rem;margin-top:.25rem}

/* ⚠️ Satırlar alttan yığılıyor (`justify-content:flex-end`): yeni satır
   eklendikçe konsolun yüksekliği zıplamasın diye sabit `min-height`. */
.konsol{border:1px solid var(--line-2);border-radius:12px;overflow:hidden;
  background:var(--surface,rgba(14,14,18,.72));box-shadow:0 34px 76px -44px #000}
.konsol-bar{display:flex;align-items:center;gap:.6rem;padding:.75rem 1rem;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.022);
  font-family:var(--mono);font-size:12px;color:var(--muted)}
.konsol-bar i{width:7px;height:7px;border-radius:50%;background:var(--kick,#00E701);
  box-shadow:0 0 8px rgba(0,231,1,.6);flex:none}
.konsol-bar b{color:var(--bone);font-weight:500}
.konsol-bar em{margin-left:auto;font-style:normal;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}
.konsol-govde{padding:1rem;min-height:272px;display:flex;flex-direction:column;
  gap:3px;justify-content:flex-end;font-family:var(--mono);font-size:12.5px;
  overflow:hidden}
.ksatir{display:flex;gap:.55rem;align-items:baseline;line-height:19px;
  animation:ksatirIn .28s ease both}
@keyframes ksatirIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ksatir .k{flex:none;color:var(--faint)}
.ksatir .m{color:var(--muted);min-width:0;overflow-wrap:anywhere}
.ksatir .m b{color:var(--bone);font-weight:500}
.ksatir.act{background:rgba(227,179,65,.09);border-left:2px solid var(--amber);
  margin-inline:-1rem;padding:2px 1rem 2px calc(1rem - 2px)}
.ksatir.act .k{color:var(--amber);font-weight:700}
.ksatir.ok{background:rgba(95,212,155,.08);border-left:2px solid var(--mint);
  margin-inline:-1rem;padding:2px 1rem 2px calc(1rem - 2px)}
.ksatir.ok .k{color:var(--mint);font-weight:700}

/* ── premium ─────────────────────────────────────────────────────── */
.prem{display:grid;grid-template-columns:1fr;border:1px solid var(--line);
  margin-top:clamp(2.2rem,4vw,3rem);background:rgba(8,8,10,.62)}
@media(min-width:820px){.prem{grid-template-columns:1fr 1fr}}
.prem article{padding:clamp(1.6rem,3vw,2.2rem);border-bottom:1px solid var(--line)}
.prem article:last-child{border-bottom:0}
@media(min-width:820px){
  .prem article{border-right:1px solid var(--line);border-bottom:0}
  .prem article:last-child{border-right:0}
}
/* ── premium rozeti: altın parıltı ────────────────────────────────
   Parıltı HAPIN üstünden geçiyor, yazının üstünden değil.

   ⚠️ Yazıya `background-clip:text` + `-webkit-text-fill-color:transparent`
   UYGULAMA. Şık duruyor ama metni bir doku hâline getirdiği için alt
   piksel yumuşatma kapanıyor; 11px genişletilmiş mono yazı incelip
   okunaksızlaşıyor. Yazı katı renkte kalıyor, hareket arka planda.
   ⚠️ Şerit `::before`in İÇİNDE ve o katman `overflow:hidden` — hapın
   yuvarlak kenarından taşmasın diye. Hale ayrı katmanda (`::after`),
   çünkü `overflow:hidden` `box-shadow`u da keserdi. */
.prem .rozet{position:relative;isolation:isolate;
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;
  color:#F3CE72;                       /* zemine karşı 11.4:1 */
  border:1px solid rgba(227,179,65,.38);border-radius:999px;padding:.28rem .62rem;
  animation:rozetYazi 3.4s ease-in-out infinite}
.prem .rozet::before{content:"";position:absolute;inset:0;border-radius:inherit;
  z-index:-1;overflow:hidden;background:rgba(227,179,65,.08);
  background-image:linear-gradient(100deg,
    rgba(255,241,204,0) 38%,rgba(255,245,220,.30) 47%,rgba(255,253,245,.42) 51%,
    rgba(255,245,220,.30) 55%,rgba(255,241,204,0) 64%);
  background-size:260% 100%;background-repeat:no-repeat;background-position:150% 0;
  animation:rozetParilti 3.4s cubic-bezier(.5,0,.35,1) infinite}
.prem .rozet::after{content:"";position:absolute;inset:-1px;border-radius:999px;
  z-index:-2;pointer-events:none;
  animation:rozetHale 3.4s ease-in-out infinite}
@keyframes rozetParilti{
  0%,60%{background-position:150% 0}
  90%,100%{background-position:-50% 0}
}
@keyframes rozetHale{
  0%,60%,100%{box-shadow:0 0 0 rgba(227,179,65,0)}
  76%{box-shadow:0 0 18px -2px rgba(227,179,65,.55)}
}
/* Şerit geçerken yazı da bir tık açılıyor — ama hep okunur kalıyor. */
@keyframes rozetYazi{
  0%,60%,100%{color:#F3CE72}
  76%{color:#FFF3D4}
}
/* ── bölüm etiketi de aynı ritimde parlıyor ───────────────────────
   Rozetlerle AYNI 3.4sn döngü, aynı gecikmeler — üçü birlikte parlıyor.

   ⚠️ Burada hap yok, sweep edecek zemin de yok. O yüzden ışık YAZININ
   ARKASINDAN geçiyor: `::before` bulanık bir altın bant, `z-index:-1`
   ile metnin altında. Şeridi yine metnin üstüne koysaydım rozette
   düzelttiğim alt piksel sorununu geri getirirdim.
   ⚠️ `overflow:hidden` YOK — bandın kenarları zaten şeffafa iniyor,
   kırpma olsaydı hale de kesilirdi. Bant etiket kutusundan taşıyor,
   `html{overflow-x:clip}` yatay kaymayı zaten engelliyor. */
#premium > .wrap > .lbl{position:relative;display:inline-block;isolation:isolate;
  animation:rozetYazi 3.4s ease-in-out infinite}
#premium > .wrap > .lbl::before{content:"";position:absolute;z-index:-1;
  top:50%;left:0;width:52%;height:190%;transform:translate(-95%,-50%) scaleX(1.9);
  border-radius:50%;pointer-events:none;filter:blur(11px);
  background:radial-gradient(closest-side,rgba(255,240,205,.62),rgba(227,179,65,0) 76%);
  opacity:0;animation:etiketIsik 3.4s cubic-bezier(.45,0,.4,1) infinite}
/* ⚠️ `scaleX` her karede TEKRAR yazılmalı. transform tek bir özellik;
   kare içinde sadece `translate` verilseydi geniş elips animasyon
   boyunca daireye dönerdi. */
@keyframes etiketIsik{
  0%,56%{transform:translate(-95%,-50%) scaleX(1.9);opacity:0}
  64%{opacity:1}
  84%{opacity:1}
  92%,100%{transform:translate(150%,-50%) scaleX(1.9);opacity:0}
}

/* Hareketi kısıtlayan kullanıcıda her şey durur, yazılar okunur kalır. */
@media(prefers-reduced-motion:reduce){
  .prem .rozet,.prem .rozet::before,.prem .rozet::after,
  #premium > .wrap > .lbl,#premium > .wrap > .lbl::before{animation:none}
  #premium > .wrap > .lbl::before{opacity:0}
}
.prem h3{font-weight:600;font-size:1.22rem;margin:1rem 0 0;letter-spacing:-.015em}
.prem > article > p{color:var(--muted);margin:.7rem 0 0;font-size:.97rem}
.prem ul{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:.62rem;
  font-size:.95rem;color:var(--muted)}
.prem li{display:flex;gap:.6rem;align-items:flex-start}
.prem li svg{width:14px;height:14px;flex:none;margin-top:.32rem;stroke:var(--amber);
  fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.prem-not{margin-top:1.6rem;color:var(--faint);font-size:.93rem}
/* ⚠️ Bağlantının rengi BURADA, satır içi `style` ile DEĞİL. Bu cümle
   çeviri sözlüğünde de duruyor; renk satır içi yazılsaydı üç dilde
   ayrı ayrı tekrar edilir, biri unutulunca dil değişince renk de
   değişirdi. */
.prem-not a{color:var(--amber);text-decoration:none;
  border-bottom:1px solid rgba(227,179,65,.3);
  transition:color .2s,border-color .2s}
.prem-not a:hover{color:#FFE9B0;border-bottom-color:rgba(255,233,176,.6)}

/* kapanış */
.p-cta{border-top:1px solid var(--line);padding:clamp(3rem,6vw,4.5rem) 0;text-align:center}
.p-cta h2{margin-inline:auto}
.p-cta .acts{justify-content:center}