/* ============================================================
   Metio Games — ortak stil
   Tek sayfalik "coming soon" sayfasindan cok sayfali siteye
   gecerken tasarim kimligi (uzay/gaming: gradient, yildizlar,
   neon grid) BILEREK korundu. Arka plan sahnesi position:fixed
   oldugu icin sayfalar arasi gecerken yerinde kalir; icerik
   onun uzerinde kayar. "Ayni dunyanin parcasi" hissi buradan
   geliyor.
   ============================================================ */

:root{
  --bg:#07060f;
  --ink:#eef0ff;
  --muted:#9aa0c4;
  --violet:#7c5cff;
  --cyan:#38e8ff;
  --magenta:#ff5cc8;
  --line:rgba(140,110,255,.46);

  /* Cok sayfali yapiyla gelen yeni tokenlar */
  --bar:64px;                          /* ust bar yuksekligi */
  --kenar:rgba(140,110,255,.22);       /* ince mor cerceve */
  --cam:rgba(16,13,38,.62);            /* cam panel dolgusu */
  --cam-koyu:rgba(9,7,24,.86);         /* ust bar / acilir menu */
  --olcu:min(980px,100%);              /* icerik genisligi */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100svh;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,"Noto Sans Arabic",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
}
/* Tek sayfali surumde body'de overflow:hidden vardi (hic kaydirma yoktu).
   Cok sayfali yapida icerik uzuyor; sadece YATAY tasma kilitli. */
body{overflow-x:hidden}

img{max-width:100%;height:auto}
a{color:inherit}

/* Klavye odagi her yerde gorunur olsun — koyu zeminde ince mor halka */
:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:6px;
}

/* Ekran okuyucuya ozel: gorunmez ama okunur */
.gizli-metin{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* Icerige atlama baglantisi — sadece odaklaninca gorunur */
.atla{
  position:fixed;inset-inline-start:12px;top:-100px;z-index:60;
  padding:10px 16px;border-radius:10px;
  background:var(--cam-koyu);border:1px solid var(--kenar);
  color:var(--ink);text-decoration:none;font-size:.9rem;
  transition:top .18s ease;
}
.atla:focus{top:12px}


/* ============================================================
   1) Arka plan sahnesi (arkadan one dogru katmanlar)
   ============================================================ */
.sahne{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none}

/* Temel gradient: derin lacivert -> mor */
.taban{
  position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 8%, #1b1740 0%, #0d0a20 45%, #07060f 100%);
}

/* Nebula: genis, yumusak radial lekeler */
.nebula{position:absolute;inset:-20%;filter:blur(60px);opacity:.55}
.nebula i{position:absolute;display:block;border-radius:50%}
.n1{width:52vmax;height:52vmax;left:-8vmax;top:-14vmax;
    background:radial-gradient(circle,rgba(124,92,255,.55),transparent 62%)}
.n2{width:44vmax;height:44vmax;right:-10vmax;top:2vmax;
    background:radial-gradient(circle,rgba(255,92,200,.34),transparent 62%)}
.n3{width:60vmax;height:60vmax;left:18vmax;bottom:-30vmax;
    background:radial-gradient(circle,rgba(56,232,255,.26),transparent 60%)}

/* Yildiz alani (canvas) */
#yildizlar{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Uzak gezegen siluetleri */
.gezegen{position:absolute;border-radius:50%}
.gezegen-buyuk{
  width:min(46vmax,620px);aspect-ratio:1;
  right:-14vmax;bottom:-20vmax;
  background:radial-gradient(circle at 32% 28%, #241f52 0%, #14113200 68%),
             radial-gradient(circle at 50% 50%, #0c0a1e 60%, #0a0818 100%);
  box-shadow:inset 18px -14px 60px rgba(124,92,255,.22), 0 0 90px rgba(124,92,255,.10);
  opacity:.9;
}
/* .gezegen-kucuk ve .halka (sol-ust statik gezegen) kaldirildi: yerini
   src/assets/planet-anim.js'in cizdigi donen halkali canvas aldi
   (bkz. #metio-planet-canvas, src/layout.html). Sag-alttaki .gezegen-buyuk
   dokunulmadan duruyor. */

/* Neon perspektif grid (devre karti hissi).
   Yukseklik bilerek alt ucte tutuluyor: yuksek olunca ufuk cizgisi ekranin
   ortasina, yani basligin uzerine denk gelip metni ustu cizili gosteriyordu. */
.grid{
  position:absolute;left:-50%;right:-50%;bottom:-2vh;height:30vh;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to top,   var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  transform:perspective(300px) rotateX(72deg);
  transform-origin:bottom center;
  mask-image:linear-gradient(to top, #000 10%, transparent 88%);
  -webkit-mask-image:linear-gradient(to top, #000 10%, transparent 88%);
  animation:kaydir 9s linear infinite;
}
@keyframes kaydir{to{background-position:0 64px, 0 -64px}}

/* Grid'in ufuk cizgisindeki parlama.
   Cizgi tam ortadan gectigi icin ortadaki butonlarin uzerine biniyor, ikonu
   ikiye bolmus gibi gosteriyordu. Iki duzeltme:
     1) Gradient'in ORTASINDA sabit px genisliginde saydam bir pencere var.
        Yuzde degil px: buton genisligi viewport ile olceklenmiyor. Dar
        ekranda calc() negatife dusup duraklar kirpilir ve cizgi tamamen
        kaybolur — orada zaten yer yok, istenen davranis bu.
     2) box-shadow yerine filter: drop-shadow. box-shadow elemanin KUTUSUNU
        takip ettigi icin saydam ortada bile parlamaya devam ederdi;
        drop-shadow ise alfayi takip eder. */
.ufuk{
  position:absolute;left:0;right:0;bottom:calc(30vh - 2vh);height:2px;
  background:linear-gradient(90deg,
    transparent 0,
    rgba(124,92,255,.9) 18%,
    rgba(124,92,255,.9) calc(50% - 560px),
    transparent           calc(50% - 390px),
    transparent           calc(50% + 390px),
    rgba(56,232,255,.75)  calc(50% + 560px),
    rgba(56,232,255,.75) 82%,
    transparent 100%);
  filter:blur(.5px) drop-shadow(0 0 14px rgba(124,92,255,.55));
  opacity:.85;
}
/* Dar ekranda icerik neredeyse tum genisligi kapliyor: cizginin sigacagi bir
   bosluk yok, ustelik calc() negatife dusunce duraklar kirpilip kenarda kisa
   bir cubuk artigi birakiyordu. Ufuk hissini grid zaten veriyor. */
@media (max-width:900px){ .ufuk{display:none} }

.vinyet{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 45%, transparent 40%, rgba(3,2,10,.72) 100%);
}


/* ============================================================
   2) Ust bar / gezinme
   ============================================================ */
/* Ust bar sabit kalir ve icerik altindan akar. Bulaniklastirma destegi
   olmadiginda saydam zemin altindan gecen metni okunur biraktigi icin
   varsayilan opak; cam gorunumu @supports ile ekleniyor. */
.ustbar{
  position:sticky;top:0;z-index:30;
  background:#09071a;
  border-bottom:1px solid var(--kenar);
}
@supports ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .ustbar{
    background:linear-gradient(180deg, rgba(9,7,24,.92), rgba(9,7,24,.72));
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  }
}
.ustbar-ic{
  width:var(--olcu);margin:0 auto;
  min-height:var(--bar);
  padding:0 clamp(14px,3vw,28px);
  display:flex;align-items:center;gap:clamp(10px,2vw,20px);
}

.ustbar-marka{
  display:flex;align-items:center;
  margin-inline-end:auto;
}
/* Tam logo: meteor ikonu + "METIO GAMES" yazisi, seffaf PNG (bkz. gorev_
   site_logo_guncelleme.md). Tek kural birakildi: .ustbar-marka img (element
   secici) .navbar-tam-logo'dan (sadece sinif) daha yuksek ozguculukte oldugu
   icin, ikisi ayni ozellikte ayri ayri tanimlanmisken oncekinin degeri her
   zaman kazaniyordu — boyut degisikligi gorunmez kalirdi. */
.navbar-tam-logo{
  height:90px;width:auto;display:block;
}
@media (max-width:480px){
  .navbar-tam-logo{height:70px}
}

/* Hamburger — sadece dar ekranda gorunur */
.menu-dugme{
  display:none;
  width:42px;height:42px;padding:0;
  border-radius:10px;border:1px solid var(--kenar);
  background:rgba(124,92,255,.10);color:var(--ink);
  cursor:pointer;align-items:center;justify-content:center;
}
.menu-dugme svg{width:20px;height:20px}
.menu-dugme .kapat{display:none}
.menu-dugme[aria-expanded="true"] .kapat{display:block}
.menu-dugme[aria-expanded="true"] .ac{display:none}

.ana-menu{display:flex;align-items:center;gap:clamp(6px,1.4vw,14px)}
.menu-liste{
  display:flex;align-items:center;gap:clamp(2px,1vw,10px);
  list-style:none;margin:0;padding:0;
}
.menu-bag{
  display:inline-block;
  padding:9px 12px;border-radius:10px;
  color:var(--muted);text-decoration:none;
  font-size:.92rem;font-weight:500;letter-spacing:.02em;
  transition:color .2s ease, background .2s ease;
  white-space:nowrap;
}
.menu-bag:hover{color:var(--ink);background:rgba(124,92,255,.12)}
/* Aktif sayfa: alt cizgi yerine ince neon nokta — bar yuksekligini bozmuyor */
.menu-bag[aria-current="page"]{
  color:var(--ink);
  background:rgba(124,92,255,.16);
  box-shadow:inset 0 -2px 0 rgba(56,232,255,.7);
}

/* Acilir menuler (Yasal + dil) <details> uzerine kurulu:
   JS calismasa bile acilip kapaniyor ve klavyeyle erisilebiliyor. */
.acilir{position:relative}
.acilir>summary{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 12px;border-radius:10px;
  color:var(--muted);font-size:.92rem;font-weight:500;
  cursor:pointer;list-style:none;white-space:nowrap;
  transition:color .2s ease, background .2s ease;
}
.acilir>summary::-webkit-details-marker{display:none}
.acilir>summary:hover{color:var(--ink);background:rgba(124,92,255,.12)}
.acilir[open]>summary{color:var(--ink);background:rgba(124,92,255,.16)}
/* Yasal sayfalardayken ust kategori de aktif isaretlenir */
.acilir-aktif>summary{
  color:var(--ink);background:rgba(124,92,255,.16);
  box-shadow:inset 0 -2px 0 rgba(56,232,255,.7);
}
.acilir>summary .ok{
  width:9px;height:9px;flex:none;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .2s ease;
}
.acilir[open]>summary .ok{transform:translateY(1px) rotate(225deg)}
/* Acilir panel varsayilan olarak OPAK.
   Cam efekti yalnizca backdrop-filter destegi varken devreye giriyor:
   destek yoksa (ya da tarayici hizlandirmayi kapattiysa) yari saydam
   zeminin arkasindaki parlak baslik metni panelin icinden okunuyor,
   menu ogeleri okunmaz hale geliyordu. */
.acilir-govde{
  position:absolute;inset-inline-end:0;top:calc(100% + 10px);z-index:40;
  min-width:210px;max-height:min(60vh,420px);overflow-y:auto;
  padding:8px;
  border-radius:14px;border:1px solid var(--kenar);
  background:#0c0a20;
  box-shadow:0 22px 50px rgba(3,2,12,.6);
  animation:acilirGir .18s ease both;
}
@supports ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .acilir-govde{
    background:var(--cam-koyu);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  }
}
@keyframes acilirGir{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.acilir-govde ul{list-style:none;margin:0;padding:0}
.acilir-govde a{
  display:block;padding:10px 12px;border-radius:9px;
  color:var(--muted);text-decoration:none;font-size:.9rem;
  transition:color .18s ease, background .18s ease;
}
.acilir-govde a:hover{color:var(--ink);background:rgba(124,92,255,.14)}
.acilir-govde a[aria-current]{color:var(--cyan);background:rgba(56,232,255,.08)}
.acilir-baslik{
  padding:6px 12px 8px;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(154,160,196,.55);
}

/* Dil secici — kod rozeti (TR/EN) her zaman gorunur, ad genis ekranda */
.dil-kod{
  font-family:"Space Grotesk",Inter,"Noto Sans Arabic",sans-serif;font-weight:700;
  letter-spacing:.1em;font-size:.8rem;
}
.dil-govde a{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dil-govde .kod{
  font-size:.68rem;letter-spacing:.12em;
  color:rgba(154,160,196,.6);
}

/* Dar ekran: menu ust barin altina acilan tam genislikte panele donusur */
@media (max-width:820px){
  .menu-dugme{display:inline-flex}
  .ana-menu{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:4px;
    padding:12px clamp(14px,3vw,28px) 18px;
    /* Tam genislikte panel icerigin uzerine biniyor: burada saydamlik
       bilerek YOK. Yari saydam birakildiginda arkadaki kahraman basligi
       menu ogelerinin arasindan okunuyordu. */
    background:#09071a;
    border-bottom:1px solid var(--kenar);
    box-shadow:0 24px 40px rgba(3,2,12,.5);
    /* Kapaliyken DOM'da ama erisim disinda: display:none klavye tuzagini onler */
    display:none;
  }
  .ustbar[data-acik="1"] .ana-menu{display:flex;animation:acilirGir .2s ease both}
  .menu-liste{flex-direction:column;align-items:stretch;gap:2px}
  .menu-bag{padding:12px 14px;font-size:1rem}
  .acilir>summary{padding:12px 14px;font-size:1rem;justify-content:space-between}
  /* Dar ekranda mutlak konumlu acilir panel tasiyordu — akisa alindi */
  .acilir-govde{
    position:static;min-width:0;margin:4px 0 4px 10px;
    box-shadow:none;background:rgba(124,92,255,.07);animation:none;
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
}


/* ============================================================
   3) Sayfa govdesi
   ============================================================ */
/* z-index:2 -> #metio-planet-canvas'in (1) ustunde: icerik gezegen
   animasyonunun onunde kalmali. */
.govde{position:relative;z-index:2;flex:1 0 auto;width:100%}

/* Standart icerik sayfasi (Hakkimizda, Iletisim, Yasal...) */
.sayfa{
  width:var(--olcu);margin:0 auto;
  padding:clamp(34px,7vh,72px) clamp(18px,4vw,28px) clamp(48px,9vh,96px);
}
.sayfa-ust{margin-bottom:clamp(26px,5vh,44px)}
.ust-etiket{
  display:block;
  font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--cyan);opacity:.8;margin-bottom:12px;
}
.sayfa-baslik{
  font-family:"Space Grotesk",Inter,"Noto Sans Arabic",system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(1.9rem,6vw,3.1rem);
  line-height:1.06;letter-spacing:.01em;margin:0;
  background:linear-gradient(180deg,#ffffff 32%,#a99cff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 30px rgba(124,92,255,.3));
}
.sayfa-ozet{
  max-width:62ch;margin:clamp(14px,2.4vh,20px) 0 0;
  color:var(--muted);font-size:clamp(.95rem,2.3vw,1.06rem);line-height:1.7;
}

/* Cam panel — tum sayfalarin ortak icerik blogu */
.bolum{
  margin-top:clamp(14px,2.4vh,20px);
  padding:clamp(18px,3.4vw,28px);
  border-radius:16px;
  border:1px solid var(--kenar);
  background:var(--cam);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.bolum h2{
  font-family:"Space Grotesk",Inter,"Noto Sans Arabic",sans-serif;
  font-size:clamp(1.05rem,2.9vw,1.28rem);font-weight:700;
  margin:0 0 10px;letter-spacing:.01em;color:var(--ink);
}
.bolum h3{
  font-size:clamp(.95rem,2.4vw,1.05rem);font-weight:600;
  margin:20px 0 8px;color:#cfd4f4;
}
.bolum p{margin:0 0 12px;color:var(--muted);line-height:1.75;font-size:.98rem}
.bolum p:last-child{margin-bottom:0}
.bolum ul{margin:0 0 12px;padding-inline-start:20px;color:var(--muted);line-height:1.75}
.bolum li{margin-bottom:6px}
.bolum a{color:#b9a8ff;text-decoration-color:rgba(185,168,255,.4);text-underline-offset:3px}
.bolum a:hover{color:var(--cyan)}

/* Metni henuz gomulmemis alanlar. Gorev geregi gercek metinler ayri bir
   turda eklenecek; bu yer tutucu BILEREK goze carpiyor ki yayina yanlislikla
   bos bir bolum cikarsa hemen fark edilsin. */
.yer-tutucu{
  display:flex;align-items:flex-start;gap:10px;
  padding:14px 16px;border-radius:12px;
  border:1px dashed rgba(140,110,255,.4);
  background:rgba(124,92,255,.06);
  color:rgba(154,160,196,.9);
  font-size:.9rem;line-height:1.6;
}
.yer-tutucu::before{
  content:"";flex:none;width:8px;height:8px;margin-top:7px;border-radius:50%;
  background:var(--violet);box-shadow:0 0 12px rgba(124,92,255,.9);
}
/* Sirket unvani gibi sonradan doldurulacak tekil alanlar */
.doldurulacak{
  font-family:"Space Grotesk",monospace;
  font-size:.9em;letter-spacing:.04em;
  padding:2px 7px;border-radius:6px;
  border:1px dashed rgba(255,92,200,.45);
  background:rgba(255,92,200,.08);
  color:#ffb3e2;white-space:nowrap;
}

/* Yasal sayfalarin tepesindeki taslak uyarisi */
.taslak-uyari{
  display:flex;align-items:flex-start;gap:12px;
  margin-bottom:clamp(18px,3vh,26px);
  padding:16px 18px;border-radius:14px;
  border:1px solid rgba(255,92,200,.34);
  background:rgba(255,92,200,.08);
  color:#ffc9ec;font-size:.92rem;line-height:1.65;
}
.taslak-uyari strong{color:#fff;font-weight:600}
.taslak-rozet{
  flex:none;margin-top:1px;padding:3px 9px;border-radius:999px;
  border:1px solid rgba(255,92,200,.5);
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:#ffb3e2;
}

/* Icindekiler — uzun yasal sayfalarda bolumlere hizli erisim */
.icindekiler ol{
  margin:0;padding-inline-start:20px;
  color:var(--muted);line-height:1.9;font-size:.94rem;
}
.icindekiler a{text-decoration:none;color:var(--muted)}
.icindekiler a:hover{color:var(--cyan)}
/* Sticky ust bar, ic baglantiyla gelen bolumun basligini kesiyordu */
.bolum[id]{scroll-margin-top:calc(var(--bar) + 16px)}


/* ============================================================
   4) Ana sayfa kahramani (eski tek sayfali tasarimin govdesi)
   ============================================================ */
.kabuk{
  width:100%;
  min-height:calc(100svh - var(--bar));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:clamp(20px,5vw,48px);
  padding-bottom:max(clamp(20px,5vw,48px), env(safe-area-inset-bottom));
}
/* Tasan tek bir cocuk, flex konteynerinin icerik genisligini viewport'un
   otesine tasiyip ORTALANMIS diger her seyi ekran disina itiyordu (mobilde
   baslik ve aciklama tamamen gorunmez olmustu). Guvenlik kemeri: */
.kabuk > *{max-width:100%}

.marka{
  font-family:"Space Grotesk",Inter,"Noto Sans Arabic",system-ui,sans-serif;font-weight:700;
  /* Dar ekranda hem punto hem harf araligi kuculuyor: .34em sabit birakilinca
     "METIO GAMES" 390px viewport'a sigmiyordu. */
  font-size:clamp(1.05rem,4.4vw,2.6rem);
  letter-spacing:clamp(.16em,1.1vw,.34em);
  text-indent:clamp(.16em,1.1vw,.34em);  /* letter-spacing'in sagda biraktigi bosluk telafisi */
  margin:0;
  /* .btn-birincil ("See our games") ile AYNI gradyan (bkz. gorev_gradient_metin.md). */
  background:linear-gradient(100deg,#7c5cff,#38e8ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 44px rgba(124,92,255,.25);
}
/* Ilk harf (M) kullaniciya gore koyu zeminle dusuk kontrastli/gorunmez
   kaliyordu (bkz. eskiden ayni cozumu kullanan, artik gorsel logo/img'a
   donusen .ustbar-marka — gorev_site_logo_ekleme.md). Ilk harf gradyandan
   bagimsiz, "E"nin (ve M'den sonraki ilk birkac harfinin) zaten gorundugu
   tonla (#7c5cff, gradyanin kendi baslangic rengi) sabitleniyor. */
.marka::first-letter{
  background:none;-webkit-background-clip:initial;background-clip:initial;
  color:#7c5cff;
  -webkit-text-fill-color:#7c5cff;
}
.ayrac{
  width:min(240px,54vw);height:1px;margin:clamp(20px,3.6vh,32px) auto;
  background:linear-gradient(90deg,transparent,rgba(124,92,255,.85),rgba(56,232,255,.7),transparent);
  box-shadow:0 0 18px rgba(124,92,255,.45);
}
.baslik{
  font-family:"Space Grotesk",Inter,"Noto Sans Arabic",system-ui,sans-serif;font-weight:700;
  font-size:clamp(2.5rem,10.5vw,6.4rem);
  /* 1.08: eskiden .98'di ama basliktaki metin artik dile gore 2 satira
     sarabiliyor (once hep tek kelimeydi: "COMING SOON" vb.); siki satir
     yuksekliginde ust/alt uzanti olan harfler (Turkce İ noktasi, Ğ, Arapca
     kuyruklu harfler) bir ustteki/alttaki satirla cakisiyordu. */
  line-height:1.08;letter-spacing:.02em;margin:0;text-transform:uppercase;
  background:linear-gradient(180deg,#ffffff 30%,#a99cff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 34px rgba(124,92,255,.35));
}
.aciklama{
  max-width:46ch;margin:clamp(22px,4vh,34px) auto 0;
  color:var(--muted);font-size:clamp(.95rem,2.5vw,1.08rem);line-height:1.65;
}

/* Platform ve sosyal alanlari — hepsi su an PASIF (hesap/sayfa yok).
   Pasif ama OKUNUR: "gri gorunsun" gorunmez olsun demek degil; ilk denemede
   kontrast cok dusuktu ve arka planda kayboluyordu. */
.baglantilar{
  margin-top:clamp(28px,5vh,44px);
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(10px,1.6vh,14px);
}
.rozetler{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(8px,1.4vw,14px)}
.rozet{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 22px;border-radius:999px;
  border:1px solid rgba(178,184,220,.42);
  background:rgba(178,184,220,.10);
  color:#c2c7e4;
  font-size:clamp(.85rem,2.2vw,.98rem);font-weight:500;letter-spacing:.04em;
  cursor:not-allowed;
  transition:border-color .25s ease, background .25s ease;
}
.rozet:hover{border-color:rgba(178,184,220,.6);background:rgba(178,184,220,.16)}
.rozet svg{width:20px;height:20px;flex:none}

.sosyal{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(8px,1.2vw,12px)}
.sosyal span{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(178,184,220,.32);
  background:rgba(178,184,220,.07);
  color:#aeb3d2;cursor:not-allowed;
  transition:border-color .25s ease, background .25s ease;
}
.sosyal span:hover{border-color:rgba(178,184,220,.52);background:rgba(178,184,220,.13)}
.sosyal svg{width:19px;height:19px}

.not{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(178,184,220,.6);
}

/* Birincil/ikincil CTA butonlari — ana sayfa kahramaninda ve iletisim
   formunda kullanilir, ayni gorsel dili paylasirlar. */
.btn-birincil{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 30px;border-radius:999px;border:none;cursor:pointer;
  background:linear-gradient(100deg,#7c5cff,#38e8ff);
  color:#0a0818;font-family:inherit;font-weight:700;
  font-size:clamp(.92rem,2vw,1rem);letter-spacing:.02em;
  text-decoration:none;
  box-shadow:0 10px 30px rgba(124,92,255,.35);
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, opacity .2s ease;
}
.btn-birincil:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(124,92,255,.45)}
.btn-birincil:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
.btn-ikincil{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:999px;
  border:1px solid var(--kenar);background:rgba(124,92,255,.06);
  color:var(--ink);font-weight:600;font-size:.94rem;
  text-decoration:none;
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.btn-ikincil:hover{border-color:rgba(140,110,255,.5);background:rgba(124,92,255,.14);transform:translateY(-2px)}


/* ============================================================
   5) Oyunlar listesi — tek oyunla baslayip buyuyecek kart izgarasi
   ============================================================ */
.oyun-izgara{
  display:grid;gap:clamp(14px,2.4vw,20px);
  grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
  margin-top:clamp(18px,3vh,26px);
}
.oyun-kart{
  display:flex;flex-direction:column;
  border-radius:18px;overflow:hidden;
  border:1px solid var(--kenar);
  background:var(--cam);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .28s cubic-bezier(.2,.7,.3,1), border-color .28s ease, box-shadow .28s ease;
}
.oyun-kart:hover{
  transform:translateY(-4px);
  border-color:rgba(140,110,255,.5);
  box-shadow:0 18px 44px rgba(6,4,20,.55);
}
/* Kapak gorseli henuz yok: yer tutucu olarak sahnenin renk paletinden
   uretilmis soyut bir gradient kullaniliyor. */
.oyun-kapak{
  position:relative;aspect-ratio:16/9;
  background:
    radial-gradient(90% 120% at 22% 18%, rgba(124,92,255,.5), transparent 62%),
    radial-gradient(80% 110% at 82% 78%, rgba(56,232,255,.34), transparent 60%),
    linear-gradient(140deg,#151137,#0a0820);
  display:flex;align-items:center;justify-content:center;
}
.oyun-kapak span{
  font-family:"Space Grotesk",Inter,"Noto Sans Arabic",sans-serif;font-weight:700;
  font-size:clamp(1.5rem,5vw,2rem);
  letter-spacing:.2em;text-indent:.2em;
  color:rgba(255,255,255,.16);
}
/* Gercek kapak gorseli: kutuyu (aspect-ratio:16/9) tamamen kaplar, oranı
   tutmayan kaynaklarda kenarlar kirpilir (object-fit:cover) — arkadaki
   gradient bu yuzden hicbir zaman gorunmez, sadece gorsel yuklenene kadar
   kisa bir renk verir. */
.oyun-kapak img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.oyun-govde{padding:clamp(16px,3vw,22px);display:flex;flex-direction:column;flex:1}
.oyun-ad{
  font-family:"Space Grotesk",Inter,"Noto Sans Arabic",sans-serif;font-weight:700;
  font-size:1.15rem;margin:0 0 8px;color:var(--ink);
}
.oyun-ozet{margin:0 0 16px;color:var(--muted);font-size:.94rem;line-height:1.65;flex:1}
.oyun-alt{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.durum{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px;border-radius:999px;
  border:1px solid rgba(56,232,255,.34);
  background:rgba(56,232,255,.08);
  color:#9ce9ff;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
}
.durum::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 10px var(--cyan);
}
.platform{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;
  border:1px solid rgba(178,184,220,.3);
  background:rgba(178,184,220,.07);
  color:#b3b8d6;font-size:.76rem;
}
.platform svg{width:14px;height:14px}
/* Etiketler — kucuk, sessiz bir pill listesi; kategori (oyun-ozet
   satirinda gosteriliyor, bkz. build.js) ile durum rozeti arasinda. */
.etiket{
  display:inline-flex;align-items:center;
  padding:4px 10px;border-radius:999px;
  border:1px solid rgba(178,184,220,.22);
  background:rgba(178,184,220,.05);
  color:var(--muted);font-size:.7rem;
}

/* Ana sayfadaki kucultulmus oyun kartlari — .oyun-kart'in ta kendisi
   (ayni gorsel dil), sadece <a> olarak butun kart tiklanabilir ve
   govdesi daha sade: isim, kategori, tek satir, "detaylari gor". */
.izgara-baslik{
  text-align:center;font-family:"Space Grotesk",Inter,"Noto Sans Arabic",sans-serif;
  font-weight:700;font-size:clamp(1.3rem,3.6vw,1.8rem);
  margin:0 0 clamp(18px,3vh,26px);color:var(--ink);
}
.onizleme-kart{text-decoration:none;color:inherit}
.onizleme-kategori{
  display:inline-block;margin-top:2px;
  font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;
  color:#9ce9ff;
}
.onizleme-kart .oyun-ozet{margin-top:8px}
.onizleme-baglanti{
  margin-top:auto;padding-top:10px;
  color:#b9a8ff;font-size:.88rem;font-weight:600;
  transition:color .2s ease;
}
.onizleme-kart:hover .onizleme-baglanti{color:var(--cyan)}

/* Ana sayfa kapanisi — kisa vizyon cumlesi + About Us CTA'si */
.kapanis{text-align:center;margin-top:clamp(36px,6vh,56px)}
.kapanis p{color:var(--muted);font-size:1rem;margin:0 0 16px}


/* ============================================================
   6) Devlog listesi — henuz yazi yokken tek yer-tutucu, yazi
   eklendikce dikey kart listesi (oyun kartlarindan farkli olarak
   izgara degil liste: devlog girdileri kronolojik akis, kapak
   gorseli yok).
   ============================================================ */
.devlog-liste{
  display:flex;flex-direction:column;gap:clamp(14px,2.2vw,18px);
  margin-top:clamp(18px,3vh,26px);
}
.devlog-kart{
  padding:clamp(18px,3.2vw,26px);border-radius:16px;
  border:1px solid var(--kenar);background:var(--cam);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color .25s ease, transform .25s ease;
}
.devlog-kart:hover{border-color:rgba(140,110,255,.5);transform:translateY(-2px)}
.devlog-tarih{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px;border-radius:999px;margin-bottom:12px;
  border:1px solid rgba(56,232,255,.34);background:rgba(56,232,255,.08);
  color:#9ce9ff;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
}
.devlog-baslik{
  margin:0 0 8px;font-family:"Space Grotesk",Inter,"Noto Sans Arabic",sans-serif;
  font-weight:700;font-size:1.15rem;
}
.devlog-baslik a{color:var(--ink);text-decoration:none}
.devlog-baslik a:hover{color:var(--cyan)}
.devlog-ozet{margin:0 0 12px;color:var(--muted);font-size:.94rem;line-height:1.7}
.devlog-devami{color:#b9a8ff;font-size:.88rem;font-weight:600;text-decoration:none;transition:color .2s ease}
.devlog-devami:hover{color:var(--cyan)}
/* Tekil yazi sayfasindaki govde: paragraflar arasi bosluk .bolum'un
   varsayilanindan biraz daha rahat, uzun metin okunurlugu icin. */
.devlog-icerik p{line-height:1.85}


/* ============================================================
   7) Iletisim / cerez tercihleri kutulari
   ============================================================ */
.kutu-izgara{
  display:grid;gap:clamp(12px,2vw,18px);
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  margin-top:clamp(14px,2.4vh,20px);
}
.kutu{
  padding:clamp(16px,3vw,22px);border-radius:16px;
  border:1px solid var(--kenar);background:var(--cam);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.kutu h2{
  font-family:"Space Grotesk",Inter,"Noto Sans Arabic",sans-serif;
  font-size:1rem;font-weight:700;margin:0 0 10px;
}
.kutu p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.7}

/* Iletisim formu — Formspree'ye dogrudan POST atar (bkz. build.js
   SITE.formspreeEndpoint). Kategori/alt kategori sececi TAMAMEN CSS
   ile calisir: radyo dugmeleri ve .alt-kategori bloklari ayni
   .pill-grup'un duz kardesleri, ":checked ~" bu yuzden calisiyor —
   JS gerekmiyor, sayfa gecisinden sonra da bozulmuyor. */
.form{
  display:flex;flex-direction:column;gap:18px;
  margin-top:clamp(14px,2.4vh,20px);
}
.form-alan{display:flex;flex-direction:column;gap:8px;border:0;padding:0;margin:0}
.form-etiket{
  font-size:.82rem;font-weight:600;color:var(--ink);letter-spacing:.02em;
  padding:0;
}
.form-etiket-kucuk{
  font-size:.74rem;font-weight:500;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em;
}
.form-satir{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
}
.form input[type="text"],
.form input[type="email"],
.form textarea{
  width:100%;padding:12px 14px;border-radius:10px;
  border:1px solid var(--kenar);background:rgba(10,8,24,.5);
  color:var(--ink);font-family:inherit;font-size:.94rem;
  transition:border-color .2s ease, background .2s ease;
}
.form input:focus,.form textarea:focus{
  outline:none;border-color:rgba(124,92,255,.6);background:rgba(10,8,24,.7);
}
.form input::placeholder,.form textarea::placeholder{color:rgba(154,160,196,.5)}
.form textarea{resize:vertical;min-height:120px;line-height:1.6}

/* Kategori/alt kategori pill'leri — native radio gorsel olarak
   gizleniyor, bitisik <label> pill olarak stilleniyor. */
.pill-grup{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;margin-top:2px}
.pill-grup input[type="radio"]{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;
}
.pill-etiket{
  display:inline-flex;align-items:center;cursor:pointer;
  padding:9px 18px;border-radius:999px;
  border:1px solid var(--kenar);background:rgba(178,184,220,.06);
  color:var(--muted);font-size:.88rem;font-weight:500;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.pill-grup input[type="radio"]:checked + .pill-etiket{
  border-color:rgba(124,92,255,.55);
  background:linear-gradient(100deg,rgba(124,92,255,.28),rgba(56,232,255,.16));
  color:var(--ink);
}
.pill-grup input[type="radio"]:focus-visible + .pill-etiket{
  outline:2px solid var(--cyan);outline-offset:2px;
}
.pill-etiket-ikincil{padding:7px 14px;font-size:.8rem}

/* Alt kategori bloklari: varsayilan gizli, sadece ilgili ana kategori
   secildiginde gorunur — 'basin'/'destek' disinda (orn. genel) hicbir
   zaman acilmaz. */
.alt-kategori{
  flex-basis:100%;display:none;flex-direction:column;gap:8px;
  margin-top:6px;padding-top:14px;border-top:1px dashed rgba(140,110,255,.22);
}
#kat-basin:checked ~ .alt-kategori[data-alt="basin"],
#kat-destek:checked ~ .alt-kategori[data-alt="destek"]{display:flex}

/* Honeypot: goze gorunmez ama display:none degil — bazi basit botlar
   display:none alanlari atlar, bu yontem daha guvenilir kabul edilir.
   Buyuk negatif left/right OFFSET KULLANMA: RTL sayfalarda (dir=rtl)
   tarayici negatif-x tasmasini "gercek" kaydirilabilir tasma sayiyor,
   bu da tum sayfayi (ve position:fixed arka plan sahnesini) binlerce
   piksel genisletiyordu. clip-rect + 1px boyut, offset gerektirmeden
   ayni gorunmezligi sagliyor (radyo dugmelerindeki teknikle ayni). */
.hp-alan{
  position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;
}

.form-durum{
  margin:0;padding:12px 16px;border-radius:12px;font-size:.9rem;line-height:1.6;
}
.form-durum-basari{
  border:1px solid rgba(56,232,255,.4);background:rgba(56,232,255,.08);color:#9ce9ff;
}
.form-durum-hata{
  border:1px solid rgba(255,92,200,.4);background:rgba(255,92,200,.08);color:#ffc9ec;
}

/* Cerez kategorileri — anahtarlar BILEREK pasif.
   Calisir gibi gorunen ama hicbir seyi degistirmeyen bir onay arayuzu
   yaniltici olurdu; sitede su an cerez de yok. Yapisi kurulu, davranisi
   hukuki metinlerle birlikte gelecek. */
.cerez-satir{
  display:flex;align-items:flex-start;gap:16px;
  padding:16px 0;border-bottom:1px solid rgba(140,110,255,.16);
}
.cerez-satir:last-child{border-bottom:0;padding-bottom:0}
.cerez-metin{flex:1;min-width:0}
.cerez-metin h3{margin:0 0 6px;font-size:1rem;font-weight:600;color:var(--ink)}
.cerez-metin p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.65}
.anahtar{
  flex:none;position:relative;width:48px;height:27px;margin-top:2px;
  border-radius:999px;border:1px solid rgba(178,184,220,.34);
  background:rgba(178,184,220,.09);cursor:not-allowed;
}
.anahtar::after{
  content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;
  border-radius:50%;background:rgba(178,184,220,.55);transition:transform .2s ease;
}
/* Zorunlu cerezler: kapatilamaz oldugu icin acik ve kilitli gosteriliyor */
.anahtar[data-durum="zorunlu"]{
  border-color:rgba(56,232,255,.4);background:rgba(56,232,255,.16);
}
.anahtar[data-durum="zorunlu"]::after{
  transform:translateX(21px);background:var(--cyan);box-shadow:0 0 12px rgba(56,232,255,.6);
}


/* ============================================================
   8) Cerez bildirim seridi
   Riza istemeyen, bilgilendirme amacli tek seritlik alt bar (bkz.
   cerez-bildirim.html'deki aciklama). Yukleme cubugu gibi fixed ama
   z-index'i ondan dusuk tutuldu — ikisinin cakismasi pratikte olmaz
   (biri gecis basinda kisa sureli, digeri kalici) ama ayni katmanda
   olmalari gerekmiyor.
   ============================================================ */
.cerez-bildirim{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  padding:14px clamp(14px,3vw,22px);
  padding-bottom:max(14px,env(safe-area-inset-bottom));
  border-top:1px solid var(--kenar);
  background:var(--cam-koyu);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.cerez-bildirim-ic{
  width:var(--olcu);margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;
}
.cerez-bildirim-ic p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.6;max-width:68ch}
.cerez-bildirim-ic a{color:#b9a8ff;text-decoration-color:rgba(185,168,255,.4);text-underline-offset:3px}
.cerez-bildirim-ic a:hover{color:var(--cyan)}
.cerez-bildirim-buton{
  flex:none;padding:9px 20px;border-radius:999px;
  border:1px solid rgba(140,110,255,.5);
  background:rgba(124,92,255,.14);
  color:var(--ink);font-size:.86rem;font-weight:600;
  cursor:pointer;transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.cerez-bildirim-buton:hover{border-color:rgba(140,110,255,.7);background:rgba(124,92,255,.22);transform:translateY(-1px)}


/* ============================================================
   9) Alt bilgi
   ============================================================ */
.altbilgi{
  position:relative;z-index:2;flex:none;
  border-top:1px solid var(--kenar);
  background:rgba(7,6,15,.72);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.altbilgi-ic{
  width:var(--olcu);margin:0 auto;
  padding:clamp(28px,5vh,44px) clamp(18px,4vw,28px) clamp(22px,4vh,32px);
  display:grid;gap:clamp(22px,4vw,40px);
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);
}
@media (max-width:720px){
  .altbilgi-ic{grid-template-columns:1fr;gap:26px}
}
.altbilgi-marka{
  font-family:"Space Grotesk",Inter,"Noto Sans Arabic",sans-serif;font-weight:700;
  font-size:.92rem;letter-spacing:.2em;text-indent:.2em;
  margin:0 0 10px;
  color:#fff;
  background:none;
  -webkit-background-clip:initial;background-clip:initial;
  -webkit-text-fill-color:initial;
}
.altbilgi-slogan{margin:0;color:rgba(154,160,196,.7);font-size:.88rem;line-height:1.6;max-width:34ch}
.altbilgi-baslik{
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(154,160,196,.55);margin:0 0 12px;
}
.altbilgi-liste{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.altbilgi-liste a{
  color:rgba(190,195,225,.8);text-decoration:none;font-size:.89rem;
  transition:color .2s ease;
}
.altbilgi-liste a:hover{color:var(--cyan)}
.altbilgi-sosyal{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:10px}
.altbilgi-sosyal span,.altbilgi-sosyal a{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(178,184,220,.28);background:rgba(178,184,220,.06);
  color:#aeb3d2;
  transition:border-color .25s ease, background .25s ease;
}
/* Discord henuz aktif degil: span olarak kalip pasif imleci koruyor.
   X/Instagram/YouTube artik gercek <a> linki, tarayicinin varsayilan
   pointer imleci zaten dogru davranisi veriyor. */
.altbilgi-sosyal span{cursor:not-allowed}
.altbilgi-sosyal span:hover,.altbilgi-sosyal a:hover{border-color:rgba(178,184,220,.48);background:rgba(178,184,220,.12)}
.altbilgi-sosyal svg{width:17px;height:17px}
.telif{
  width:var(--olcu);margin:0 auto;
  padding:16px clamp(18px,4vw,28px) clamp(20px,3vh,28px);
  border-top:1px solid rgba(140,110,255,.14);
  color:rgba(154,160,196,.55);font-size:.78rem;letter-spacing:.06em;
  display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:space-between;
}


/* ============================================================
   10) Sayfa gecisleri
   Sert yenileme yerine yumusak gecis: nav.js <main> icerigini
   degistirirken .cikis sinifini takar, yeni icerik girAnim ile
   gelir. Arka plan sahnesi hic yeniden yuklenmedigi icin
   yildizlar ve grid akmaya devam eder.
   ============================================================ */
.govde{transition:opacity .18s ease, transform .18s ease}
.govde.cikis{opacity:0;transform:translateY(-10px)}

.gir{animation:girAnim .9s cubic-bezier(.2,.7,.3,1) both}
.g1{animation-delay:.05s} .g2{animation-delay:.18s} .g3{animation-delay:.3s}
.g4{animation-delay:.42s} .g5{animation-delay:.54s} .g6{animation-delay:.66s}
/* Baslangic durumu (opacity:0) BILEREK .gir kuralinda degil, keyframe'in
   from'unda: kuralda dursaydi animasyon herhangi bir sebeple calismazsa
   (destek yok, CSS yarim yuklendi) icerik KALICI olarak gorunmez kalirdi.
   Bu haliyle en kotu durumda animasyon atlanir ve her sey gorunur olur. */
@keyframes girAnim{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
/* Sayfa gecisinden sonra gelen icerik: kahraman disindaki sayfalarda
   kademeli gecikme gereksiz, tek parca halinde girsin. */
.sayfa{animation:girAnim .5s cubic-bezier(.2,.7,.3,1) both}

/* Yukleme cubugu — gecis 250ms'i asarsa gorunur olur, kisa geciste hic
   goze carpmaz (yanip sonen "flash" etkisini onler). */
.yukleme-cubugu{
  position:fixed;left:0;top:0;height:2px;width:100%;z-index:50;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--violet),var(--cyan));
  box-shadow:0 0 12px rgba(124,92,255,.8);
  opacity:0;transition:opacity .2s ease;pointer-events:none;
}
.yukleme-cubugu.etkin{opacity:1;animation:yuklemeAnim 1.4s ease-out both}
@keyframes yuklemeAnim{
  0%{transform:scaleX(0)} 40%{transform:scaleX(.55)} 100%{transform:scaleX(.92)}
}

/* Kisa ekranlarda grid'i kucult ki icerikle bogusmasin */
@media (max-height:620px){
  .grid{height:38vh}
  .ufuk{bottom:calc(38vh - 2vh)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .grid{animation:none}
  .gir,.sayfa,.acilir-govde{animation:none;opacity:1;transform:none}
  .govde{transition:none}
  .govde.cikis{opacity:1;transform:none}
  .oyun-kart{transition:none}
  .oyun-kart:hover{transform:none}
  .yukleme-cubugu.etkin{animation:none;transform:scaleX(.6)}
}


/* ============================================================
   11) Sagdan sola (RTL) — Arapca
   Duzenin buyuk kismi zaten flex/grid oldugu icin yon degisimiyle
   kendiliginden aynalaniyor; asagidakiler aynalanmayan tek tek
   noktalar. Yon duyarli olan yerler ayrica fiziksel (left/right)
   yerine mantiksal (inset-inline-*, padding-inline-*) ozelliklere
   cevrildi, o yuzden burada tekrar edilmiyor.
   ============================================================ */

/* Cerez anahtarinin topuzu: konumu ve acik durumdaki kaymasi elle aynalaniyor
   (transform yon bilmiyor). */
[dir="rtl"] .anahtar::after{left:auto;right:3px}
[dir="rtl"] .anahtar[data-durum="zorunlu"]::after{transform:translateX(-21px)}

/* Yukleme cubugu sagdan buyusun */
[dir="rtl"] .yukleme-cubugu{transform-origin:100% 50%}

/* Arap yazisi bitisik yazilir: harf araligi acmak kelimeleri gorsel olarak
   parcalar ve okunurlugu dusurur. Latin marka metinlerinde (METIO GAMES,
   TR/EN kodlari, kart kapagindaki "DF") aralik bilerek korunuyor. */
[dir="rtl"] .ust-etiket,
[dir="rtl"] .not,
[dir="rtl"] .altbilgi-baslik,
[dir="rtl"] .acilir-baslik,
[dir="rtl"] .durum,
[dir="rtl"] .onizleme-kategori,
[dir="rtl"] .form-etiket-kucuk,
[dir="rtl"] .doldurulacak,
[dir="rtl"] .telif{letter-spacing:normal;text-indent:0}

/* Yer tutucu etiketinin monospace yiginini Arapca kapsamiyor */
[dir="rtl"] .doldurulacak{font-family:"Noto Sans Arabic",Inter,monospace}

/* Baslik satir yuksekligi.
   .98 ve 1.06 gibi degerler Latin BUYUK harfe gore secilmisti; Arap yazisinin
   asagi uzanan kuyruklari (ق, ي) o kadar dar bir satir kutusuna sigmiyor.
   Sadece tasip kirpilmis gibi degil, GERCEKTEN kayboluyorlardi: baslikta
   background-clip:text var, yani gradient yalnizca elemanin arka plan
   kutusu icinde boyaniyor; kutunun disina tasan harfin boyanacak zemini
   kalmiyor. Cozum kirpmayi acmak degil, satir kutusunu buyutmek.
   CJK (zh/ja/ko) bu sorunu yasamiyor: glifler em kutusuna siginiyor. */
[dir="rtl"] .baslik{line-height:1.32}
[dir="rtl"] .sayfa-baslik{line-height:1.3}

/* text-indent, letter-spacing'in SAGDA biraktigi boslugu telafi etmek icin
   konmustu; RTL'de ayni deger metni ters yone kaydiriyor.
   ustbar-marka artik gorsel logo (img) oldugu icin bu satirdan cikarildi
   — bkz. gorev_site_logo_ekleme.md. */
[dir="rtl"] .marka{text-indent:0}