/* ============================================================================
   AGAMED Games — tasarım sistemi (2026-08 yeniden yazım)
   ----------------------------------------------------------------------------
   ÖNEMLİ: Bundan önceki main.css, beş ayrı sayfanın stil dosyasının uç uca
   yapıştırılmış hâliydi (her birinde ayrı bir :root). Sonraki bloklar
   öncekileri global olarak eziyordu — mobildeki bozuklukların kaynağı buydu:
   hamburger 0x0 kalıyordu, kahraman görselleri metnin üstüne biniyordu,
   başlık 60px'e sabitleniyordu.

   Bu dosya TEK kaynaktır. Mobil önce yazılmıştır: temel kurallar telefon
   içindir, büyük ekranlar min-width ile eklenir.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700;800&family=Inter:wght@400;500;700;800;900&display=swap');

/* ---------------------------------------------------------------- 1. Belirteçler */
:root{
  /* Yüzeyler */
  --bg:              #070a12;
  --bg-2:            #0a0f1c;
  --surface:         rgba(255,255,255,.045);
  --surface-2:       rgba(255,255,255,.075);
  --line:            rgba(255,255,255,.11);
  --line-strong:     rgba(255,255,255,.22);

  /* Metin */
  --text:            #eef5ff;
  --muted:           #9db0d0;

  /* Vurgu renkleri — oyun başına --accent ile değiştirilir */
  --cyan:            #55e6ff;
  --green:           #7df56a;
  --gold:            #ffc857;
  --purple:          #a77cff;
  --pink:            #ff59d6;
  --steam:           #66c0f4;
  --accent:          var(--cyan);
  --accent-2:        var(--purple);

  /* Ölçek */
  --container:       1180px;
  --gutter:          20px;
  --radius:          20px;
  --radius-lg:       28px;
  --radius-pill:     999px;

  /* Gölge */
  --shadow:          0 20px 60px rgba(0,0,0,.42);
  --shadow-lg:       0 30px 90px rgba(0,0,0,.5);

  /* Tipografi — mobilde okunabilir minimumlar, masaüstünde açılır */
  --h1:   clamp(2.15rem, 8.5vw, 4.6rem);
  --h2:   clamp(1.65rem, 5.2vw, 3rem);
  --h3:   clamp(1.15rem, 3.4vw, 1.5rem);
  --lead: clamp(1rem,  2.4vw, 1.15rem);

  /* Hareket */
  --ease:  cubic-bezier(.22,.61,.36,1);
  --dur:   .32s;
}

/* Aydınlık tema.
   Not: bu neon bir marka — düz beyaz bir sayfa kimliği öldürüyor. O yüzden
   sayfa kabuğu açılıyor ama oyun görsellerinin durduğu yüzeyler koyu kalıyor,
   böylece ekran görüntüleri ve key art'lar hâlâ parlıyor. */
:root.theme-light{
  --bg:#eef2fa; --bg-2:#e3eaf7;
  --surface:rgba(12,22,44,.05); --surface-2:rgba(12,22,44,.09);
  --line:rgba(12,22,44,.14); --line-strong:rgba(12,22,44,.28);
  --text:#0c1424; --muted:#4a5c7d;
  --shadow:0 16px 44px rgba(18,32,64,.13);
  --shadow-lg:0 24px 64px rgba(18,32,64,.17);
}
/* Görsel taşıyan yüzeyler koyu kalır */
:root.theme-light .studio-cover,
:root.theme-light .project-media,
:root.theme-light .hero-art .phone img,
:root.theme-light .wide-stage,
:root.theme-light .shot-grid img,
:root.theme-light .video-wrap{ background:#080d18 }
:root.theme-light .btn.primary{ color:#04070f }
:root.theme-light .accent,:root.theme-light .neon-title{
  background:linear-gradient(120deg,#0072a8,#5b21b6 55%,#be1e8a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
:root.theme-light .status{ color:#0f6f9c }

/* ---------------------------------------------------------------- 2. Sıfırlama */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  overflow-x:hidden;               /* yatay kaydırma asla olmasın */
  -webkit-font-smoothing:antialiased;
  min-height:100svh;
}
a{ color:inherit; text-decoration:none }
img,svg,video,iframe{ display:block; max-width:100%; height:auto }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
ul{ list-style:none }
::selection{ background:var(--accent); color:#04070f }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px }

/* ---------------------------------------------------------------- 3. Arka plan */
/* Beş katman, hepsi CSS — JavaScript ve canvas YOK (eski parçacık motoru
   sürekli rAF çalıştırıp mobilde pil yiyordu).
   Katmanlar sayfanın --accent rengini aldığı için her oyun sayfası kendi
   atmosferinde nefes alıyor. Hepsi yalnız transform/opacity ile hareket
   ediyor, yani GPU'da kalıyor ve kaydırmayı yavaşlatmıyor. */

/* 1) Taban: dikey degrade + hafif vinyet */
body::after{
  content:""; position:fixed; inset:0; z-index:-4; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 48%, var(--bg) 100%);
}

/* 2) Büyük renk bulutları — yavaş, organik, birbirinden bağımsız */
body::before{
  content:""; position:fixed; inset:-25% -15%; z-index:-3; pointer-events:none;
  opacity:.85;
  background:
    radial-gradient(46vw 46vw at 14% 16%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 72%),
    radial-gradient(42vw 42vw at 86% 10%, color-mix(in srgb, var(--accent-2) 42%, transparent), transparent 72%),
    radial-gradient(50vw 50vw at 62% 88%, color-mix(in srgb, var(--pink) 26%, transparent), transparent 74%);
  /* filter:blur YOK — radyal degrade zaten yumuşak. Tam ekran sabit
     katmanda blur, her karede pahalı yeniden çizim demek (mobilde takılma). */
  animation:nebula 34s ease-in-out infinite alternate;
}
@keyframes nebula{
  0%   { transform:translate3d(0,0,0) scale(1) }
  50%  { transform:translate3d(-3%,-2%,0) scale(1.12) }
  100% { transform:translate3d(3%,-5%,0) scale(1.06) }
}

/* 3) İkinci, daha hızlı bulut katmanı — .stars::before'u kullanıyoruz,
      böylece HTML'e yeni bir eleman eklemeye gerek kalmıyor */
.stars::before{
  content:""; position:fixed; inset:-20%; z-index:-2; pointer-events:none;
  opacity:.5;
  background:
    radial-gradient(34vw 34vw at 78% 62%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 72%),
    radial-gradient(30vw 30vw at 22% 78%, color-mix(in srgb, var(--accent-2) 30%, transparent), transparent 72%);
  animation:nebula2 23s ease-in-out infinite alternate;
}
@keyframes nebula2{
  from{ transform:translate3d(-2%,3%,0) scale(1.05) }
  to  { transform:translate3d(4%,-4%,0) scale(.92) }
}

/* 4) Yıldız dokusu — iki farklı hızda kayan iki nokta ızgarası (paralaks) */
.stars{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 1.6px),
    radial-gradient(circle, color-mix(in srgb, var(--accent) 85%, transparent) 0 1px, transparent 1.8px),
    radial-gradient(circle, color-mix(in srgb, var(--accent-2) 70%, transparent) 0 1px, transparent 2px);
  background-size:104px 104px, 167px 167px, 233px 233px;
  animation:stardrift 120s linear infinite;
}
@keyframes stardrift{ to{ background-position:800px 500px, -640px 760px, 520px -880px } }

/* 5) Işıltı: yavaşça nefes alan tek bir parlaklık, sayfaya can veriyor */
.stars::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(60vw 40vw at 50% -10%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%);
  animation:breathe 11s ease-in-out infinite alternate;
}
@keyframes breathe{ from{ opacity:.35 } to{ opacity:.75 } }

/* Aydınlık temada bulutlar sayfayı boğmasın */
:root.theme-light body::before{ opacity:.34 }
:root.theme-light .stars{ opacity:.18 }
:root.theme-light .stars::before{ opacity:.22 }
:root.theme-light .stars::after{ opacity:.25; animation:none }

/* Eski parçacık canvas'ı artık kullanılmıyor: mobilde sürekli rAF pil yiyordu */
#particles{ display:none !important }

/* ---------------------------------------------------------------- 4. Yerleşim */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter) }
.section{ padding:clamp(48px, 9vw, 96px) 0; position:relative }
.section-head{ max-width:62ch; margin-bottom:clamp(24px,4vw,40px) }
.section-head p, .section-kicker{ color:var(--muted); font-size:var(--lead) }

/* ---------------------------------------------------------------- 5. Tipografi */
h1,h2,h3{ font-family:'Space Grotesk',Inter,sans-serif; line-height:1.08; letter-spacing:-.03em; font-weight:800 }
h1{ font-size:var(--h1); margin-block:.35em .5em; text-wrap:balance }
h2{ font-size:var(--h2); margin-block:.3em .55em; text-wrap:balance }
h3{ font-size:var(--h3) }
p{ overflow-wrap:anywhere }
.lead{ font-size:var(--lead); color:var(--muted); max-width:60ch }
.muted{ color:var(--muted) }
.accent,.neon-title{
  background:linear-gradient(120deg, var(--accent), #fff 45%, var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.eyebrow,.kicker{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-pill); padding:8px 14px; margin-bottom:6px;
}
.eyebrow::before,.kicker::before{
  content:""; width:7px; height:7px; border-radius:50%; flex:0 0 7px;
  background:var(--accent); box-shadow:0 0 14px var(--accent);
}
.inline-link{ color:var(--accent); text-decoration:underline; text-underline-offset:3px }

/* ---------------------------------------------------------------- 6. Düğmeler */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px;                        /* dokunma hedefi — Apple/Google önerisi */
  padding:12px 20px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:var(--surface);
  font-weight:800; font-size:.95rem; text-align:center;
  transition:transform var(--dur) var(--ease), border-color var(--dur), box-shadow var(--dur);
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); border-color:var(--line-strong) }
.btn:active{ transform:translateY(0) scale(.98) }
.btn.primary{
  background:linear-gradient(120deg, var(--accent), var(--accent-2));
  color:#05080f; border-color:transparent;
  box-shadow:0 12px 34px color-mix(in srgb, var(--accent) 34%, transparent);
}
.btn.neon,.btn.cyan,.btn.secondary{
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  border-color:color-mix(in srgb, var(--accent) 40%, transparent);
}
.btn.steam{
  background:linear-gradient(135deg,#1b2838,#2a475e);
  border-color:rgba(102,192,244,.42); color:#eaf6ff;
}
.btn.steam:hover{ border-color:rgba(102,192,244,.85); box-shadow:0 0 26px rgba(102,192,244,.26) }
.btn.steam::before{
  content:""; width:17px; height:17px; flex:0 0 17px;
  background:no-repeat center/contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2366c0f4'%3E%3Cpath d='M12 2a10 10 0 0 0-9.96 9.16l5.35 2.21a2.82 2.82 0 0 1 1.6-.5h.14l2.38-3.45v-.05a3.77 3.77 0 1 1 3.77 3.77h-.09l-3.4 2.42v.12a2.83 2.83 0 0 1-5.6.55L2.36 14.6A10 10 0 1 0 12 2Zm-3.5 15.17.78.33a2.12 2.12 0 1 0 1.16-2.79l.9.38a1.56 1.56 0 1 1-1.2 2.88Zm8.28-6.03a2.51 2.51 0 1 0-2.51-2.51 2.51 2.51 0 0 0 2.51 2.51Zm0-.62a1.89 1.89 0 1 1 1.89-1.89 1.89 1.89 0 0 1-1.89 1.89Z'/%3E%3C/svg%3E");
}
/* Henuz yayinlanmamis oyun sayfasinda magaza rozetinin yerini alir.
   .store-badge ile ayni yukseklikte durur ki satir hizasi bozulmasin. */
/* Uc veya daha fazla dilde tek dugme anlamsizlasiyor (hangi dile?),
   acilir menuye geciliyor. Iki dilde bu kurallar hic kullanilmiyor. */
.lang-menu{ position:relative; display:inline-block }
.lang-menu > summary{ list-style:none; cursor:pointer }
.lang-menu > summary::-webkit-details-marker{ display:none }
.lang-menu > summary::after{ content:"▾"; margin-left:6px; opacity:.7 }
.lang-menu-list{
  position:absolute; top:calc(100% + 8px); right:0; z-index:95;
  display:flex; flex-direction:column; min-width:150px; padding:6px;
  border-radius:14px; border:1px solid var(--line-strong);
  background:var(--surface-solid, var(--surface));
  box-shadow:0 18px 44px rgba(0,0,0,.45);
}
.lang-menu-list a{
  display:block; padding:10px 14px; border-radius:9px;
  font-weight:700; font-size:.92rem; white-space:nowrap;
}
.lang-menu-list a:hover{ background:color-mix(in srgb, var(--accent) 14%, transparent) }
.pill-soon{
  display:inline-flex; align-items:center; min-height:46px; padding:12px 20px;
  border-radius:var(--radius-pill); font-weight:800; font-size:.9rem;
  letter-spacing:.02em; color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  border:1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
}
.small-link{
  display:inline-flex; align-items:center; min-height:48px; padding:12px 18px;
  border-radius:var(--radius-pill); border:1px solid var(--line);
  background:var(--surface); font-weight:800; font-size:.9rem;
  transition:border-color var(--dur), transform var(--dur) var(--ease);
}
.small-link:hover{ border-color:color-mix(in srgb, var(--accent) 55%, transparent); transform:translateY(-2px) }
.store-badge{ display:inline-block; border:0; background:none }
.store-badge img{ height:46px; width:auto }
.badges,.links,.hero-cta,.store-row,.studio-actions,.link-row,.trailer-links,.download-pills{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:20px;
}

/* ---------------------------------------------------------------- 7. Gezinme */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:90;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line);
  transition:background var(--dur), border-color var(--dur);
}
.nav.scrolled{ background:color-mix(in srgb, var(--bg) 94%, transparent) }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:64px }
.brand{ display:flex; align-items:center; gap:11px; font-weight:900; min-width:0 }
.brand img{ width:38px; height:38px; border-radius:11px; flex:0 0 38px }
.brand span{ display:flex; flex-direction:column; line-height:1.15; min-width:0 }
.brand small{ color:var(--muted); font-size:.66rem; letter-spacing:.06em; font-weight:600 }

/* Mobil: bağlantılar tam ekran panele taşınır.
   ⚠️ TUZAK: .nav üzerinde backdrop-filter var ve bu, içindeki
   position:fixed elemanlar için YENİ BİR KONUMLANDIRMA BAĞLAMI yaratıyor
   (filter/transform/will-change de aynısını yapar). fixed + inset kullanınca
   panel ekrana değil 64px'lik menü çubuğuna göre konumlanıp yüksekliği
   64px'e çöküyordu. Çözüm: .nav zaten bağlam olduğu için absolute + top:100%. */
.nav-links{
  position:absolute; top:100%; left:0; right:0;
  height:calc(100svh - 64px); z-index:89;
  display:flex; flex-direction:column; gap:4px;
  padding:24px var(--gutter) 40px;
  background:color-mix(in srgb, var(--bg) 97%, transparent);
  backdrop-filter:blur(20px);
  transform:translateY(-8px); opacity:0; visibility:hidden;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  overflow-y:auto;
}
.nav-links.open{ transform:translateY(0); opacity:1; visibility:visible }
.nav-links a{
  display:flex; align-items:center; min-height:56px;
  font-size:1.15rem; font-weight:800;
  border-bottom:1px solid var(--line);
}
.nav-links a:active{ color:var(--accent) }
.nav-actions{ display:flex; align-items:center; gap:8px }
/* Mobilde yalnız ASIL çağrı düğmesi kalır (indir / istek listesi);
   ikincil düğmelerin yeri menünün içi. */
.nav-actions .btn:not(.mobile-toggle):not(.primary):not(.steam){ display:none }
.nav-actions .btn.primary,.nav-actions .btn.steam{ padding:10px 14px; font-size:.85rem; min-height:44px }
.brand small{ display:none }   /* dar ekranda yer açar */
.mobile-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; min-height:46px; padding:0;   /* eski 0x0 hatası burada bitiyor */
  border:1px solid var(--line); border-radius:14px; background:var(--surface);
  font-size:1.1rem;
}
body.menu-open{ overflow:hidden }   /* menü açıkken arka plan kaymasın */

/* ---------------------------------------------------------------- 8. Kahraman */
.hero{ padding:calc(64px + 28px) 0 clamp(40px,8vw,72px); position:relative }
.hero-grid{ display:grid; gap:clamp(28px,6vw,52px); align-items:center }
.hero-copy{ min-width:0 }
/* Mobilde görseller metnin ÜSTÜNE binmiyor: normal akışta, altında */
.hero-art{
  position:relative; display:flex; gap:14px; justify-content:center;
  min-height:0; margin:0; isolation:isolate;
}
.hero-art .orb,.hero-ring{
  position:absolute; inset:auto; width:min(78vw,340px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent), transparent 68%);
  filter:blur(38px); z-index:-1; pointer-events:none;
}
.floating-logo{ display:none }        /* mobilde gereksiz kalabalık */
.hero-art .phone{ position:static; width:min(44%,190px); flex:0 1 auto }
.hero-art .phone img{
  width:100%; border-radius:20px; border:1px solid var(--line-strong);
  box-shadow:var(--shadow-lg);
}
.hero-art .phone.one{ transform:rotate(-5deg) }
.hero-art .phone.two{ transform:rotate(5deg) }
/* Yatay ekran goruntulu oyunlar (Funny Hunter Frog). 190px genislik dikey
   bir goruntude dogru, ama 1400x615 bir goruntude 83px yukseklik demek --
   resim okunamiyordu. Yatay olanlara daha genis ve daha az egik bir cerceve. */
.hero-art.landscape .phone{ width:min(48%,290px) }
.hero-art.landscape .phone.one{ transform:rotate(-3deg) }
.hero-art.landscape .phone.two{ transform:rotate(3deg) }
.hero-stage,.phone-stage,.wide-stage{
  position:relative; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:12px; background:var(--surface);
  box-shadow:0 24px 70px color-mix(in srgb, var(--accent) 16%, transparent);
}
.big-phone,.phone-main,.screen-main{ margin-inline:auto; border-radius:18px; max-height:none }

/* İstatistik kutuları: mobilde 2'li, masaüstünde 4'lü */
.stats,.hero-stats,.trust-strip{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:26px;
}
.stat,.trust-strip>div{
  padding:14px 16px; border:1px solid var(--line); border-radius:16px;
  background:var(--surface); min-width:0;
}
.stat b,.trust-strip strong{ display:block; font-size:1.35rem; font-family:'Space Grotesk',sans-serif }
.stat span,.trust-strip span{ color:var(--muted); font-size:.82rem; line-height:1.35; display:block }
.stat br{ display:none }

/* ---------------------------------------------------------------- 9. Yüzeyler */
.card,.panel,.feature,.feature-card,.theme-card,.download-card,.mode,.mode-card,
.platform,.about-card,.promise-panel,.copy-panel,.trailer-card,.screenshot-card{
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow:var(--shadow);
}
.pad{ padding:clamp(20px,4vw,30px) }
.card,.panel,.feature,.feature-card,.theme-card,.mode,.mode-card,.platform{ padding:clamp(18px,3.6vw,26px) }
.split,.intro-grid,.gallery-layout,.safety-grid,.showcase,.about-card,.download-section{
  display:grid; gap:18px; align-items:start;
}
.feature-grid,.mode-grid,.theme-grid,.platforms,.project-grid,.studio-game-list,.check-list,.promise-list{
  display:grid; gap:16px;
}
.icon-title{ display:flex; gap:14px; align-items:center; margin-bottom:12px }
.icon-title img,.appicon,.download-icon,.about-card>img{
  width:60px; height:60px; flex:0 0 60px; border-radius:16px; object-fit:cover;
  border:1px solid var(--line); box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px }
.tags span,.mini-pill{
  font-size:.74rem; font-weight:700; color:var(--muted);
  border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:5px 11px; background:var(--surface);
}
.status{ color:var(--accent); font-size:.78rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase }

/* --------------------------------------------------------- 10. Oyun kartları */
.studio-game-card,.project-card{
  --accent:var(--cyan);
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow:var(--shadow);
  display:grid; gap:0;
  transition:transform var(--dur) var(--ease), border-color var(--dur), box-shadow var(--dur);
}
.studio-game-card:hover,.project-card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow:var(--shadow-lg), 0 0 42px color-mix(in srgb, var(--accent) 16%, transparent);
}
.studio-cover,.project-media{
  position:relative; overflow:hidden; aspect-ratio:16/10; background:var(--bg-2);
}
.studio-cover img,.project-media img{ width:100%; height:100%; object-fit:cover }
/* Dikey telefon görüntüsü 16:10 kutuya kırpılınca berbat olur:
   kendi bulanık kopyasını arka plan yapıp net hâlini ortada tutuyoruz. */
.studio-cover.phone-preview img,.project-card.icon-preview .project-media img{
  object-fit:contain; padding:14px; position:relative; z-index:1;
}
.cover-backdrop{
  position:absolute; inset:0; z-index:0;
  background:var(--preview) center/cover no-repeat;
  filter:blur(26px) saturate(120%); transform:scale(1.2); opacity:.5;
}
.studio-info,.project-content{ padding:clamp(18px,4vw,26px); display:flex; flex-direction:column }
.game-top{ display:flex; gap:14px; align-items:center; margin-bottom:12px }
.studio-summary,.project-content p{ color:var(--muted); font-size:.96rem }
.studio-game-card .store-row,.project-card .store-row{ margin-top:auto; padding-top:16px }

/* ------------------------------------------------------------ 11. Galeriler */
/* Mobilde parmakla kaydırılan şerit, masaüstünde ızgara. */
.shot-grid,.thumb-grid{
  display:grid; grid-auto-flow:column; grid-auto-columns:76%;
  gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:12px; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);
  scrollbar-width:none;
}
.shot-grid::-webkit-scrollbar,.thumb-grid::-webkit-scrollbar{ display:none }
.shot-grid>*,.thumb-grid>*{ scroll-snap-align:center }
.shot-grid img{
  width:100%; border-radius:16px; border:1px solid var(--line);
  background:var(--bg-2); box-shadow:var(--shadow); object-fit:cover; aspect-ratio:9/19.5;
}
.shot-grid.wide{ grid-auto-columns:88% }
.shot-grid.wide img{ aspect-ratio:16/9 }
/* Funny Hunter Frog görüntüleri 2.28:1 — 16:9'a kırpmak üstten/alttan yerdi */
.shot-grid.ultrawide{ grid-auto-columns:88% }
.shot-grid.ultrawide img{ aspect-ratio:21/9 }
.gallery-main img,.floating-shot,.safety-visual img,.mode-card img{
  width:100%; border-radius:16px; border:1px solid var(--line); box-shadow:var(--shadow);
}
.thumb{
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:var(--surface); padding:0; transition:border-color var(--dur);
}
.thumb.active,.thumb:hover{ border-color:color-mix(in srgb, var(--accent) 60%, transparent) }
.thumb img{ width:100%; aspect-ratio:9/16; object-fit:cover }
.video-wrap,.trailer-frame{
  position:relative; width:100%; max-width:920px; margin:22px auto 0;
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow-lg); background:#04070e;
}
.video-wrap::before,.trailer-frame::before{ content:""; display:block; padding-top:56.25% }
.video-wrap iframe,.trailer-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

/* ------------------------------------------------------------ 12. Metin sayfaları */
.content{ max-width:70ch }
.content h2{ font-size:clamp(1.35rem,4vw,1.9rem); margin:34px 0 12px }
.content ul,.content ol{ padding-left:22px; list-style:disc; color:var(--muted) }
.content li{ margin-bottom:8px }
.content a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px }
.check-item{ display:flex; gap:12px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line) }

/* ------------------------------------------------------------ 13. Alt bilgi */
.footer{ border-top:1px solid var(--line); padding:34px 0 44px; background:var(--surface); color:var(--muted) }
.footer-inner,.footer-top,.footer-links{ display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center }
.footer a:hover{ color:var(--text) }

/* Sosyal hesaplar — footer. Marka logoları satır içi SVG (dış istek yok,
   her ölçekte net). Renkler RESMİ marka renkleri, path'in kendisinde.
   ⚠️ Buraya fill:currentColor koyma — markanın rengini ezer.
   Kutu 48x48: dokunma hedefi minimumun üstünde. 30 Ağu'daki "görünüyor ama
   dokunulmuyor" dersi. Simge 26px — 1 Eyl'de 20'den büyütüldü. */
.social{ display:flex; align-items:center; gap:2px }
.social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:14px;
  border:1px solid transparent;
  transition:background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.social a:hover{ background:var(--surface-2); border-color:var(--line); transform:translateY(-2px) }
.social a:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px }
.social svg{ width:26px; height:26px; display:block }
/* TikTok'un ana gövdesi temaya göre: koyu temada beyaz, açıkta siyah.
   Markanın kendi kuralı da bu. Camgöbeği/pembe kopyalar sabit kalıyor. */
.social .tt-main{ fill:var(--text) }
@media (prefers-reduced-motion: reduce){ .social a{ transition:none } .social a:hover{ transform:none } }

/* ------------------------------------------------------------ 14. Hareket */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease) }
.reveal.visible{ opacity:1; transform:none }
.tap-spark{
  position:fixed; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%;
  background:var(--accent); pointer-events:none; z-index:200; animation:spark .55s var(--ease) forwards;
}
@keyframes spark{ to{ transform:scale(4.5); opacity:0 } }

/* Hareket hassasiyeti: sistem ayarına saygı */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important }
  html{ scroll-behavior:auto }
  .reveal{ opacity:1; transform:none }
}

/* ============================================================================
   15. BÜYÜK EKRANLAR
   Yukarısı telefon içindir. Buradan itibaren ekran genişledikçe açılıyor.
   ========================================================================== */

/* ---- 600px: iki sütuna geçişler ---- */
@media (min-width:600px){
  .stats,.hero-stats,.trust-strip{ grid-template-columns:repeat(4,minmax(0,1fr)) }
  .feature-grid,.mode-grid,.theme-grid,.platforms,.project-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .shot-grid{ grid-auto-columns:40% }
  .shot-grid.wide,.shot-grid.ultrawide{ grid-auto-columns:60% }
  .hero-art .phone{ width:min(38%,210px) }
}

/* ---- 900px: masaüstü düzeni ---- */
@media (min-width:900px){
  :root{ --gutter:24px }

  /* Gezinme yatay şeride döner, hamburger kaybolur */
  .nav-inner{ min-height:72px }
  .brand img{ width:42px; height:42px; flex-basis:42px }
  .nav-links{
    position:static; inset:auto; flex-direction:row; align-items:center; gap:24px;
    /* height'i SIFIRLAMAK ŞART: mobil kuralı calc(100svh - 64px) veriyor,
       geçersiz kılınmazsa masaüstünde menü 650px yüksekliğinde kalıp
       sayfanın yarısını kaplıyor. */
    height:auto; width:auto;
    padding:0; background:none; backdrop-filter:none;
    transform:none; opacity:1; visibility:visible; overflow:visible;
  }
  .nav-links a{
    min-height:auto; font-size:.93rem; font-weight:600; border-bottom:0;
    color:var(--muted); transition:color var(--dur);
  }
  .nav-links a:hover{ color:var(--text) }
  /* ⚠️ ÖZGÜLLÜK TUZAĞI — 28 Ağu 2026'da bulundu, ay boyunca sessizce bozuktu.
     Yukarıdaki mobil kural
       .nav-actions .btn:not(.mobile-toggle):not(.primary):not(.steam){display:none}
     0,5,0 özgüllükte. Buradaki 0,3,0'lık kural onu YENEMİYOR, yani masaüstünde
     dil düğmesi görünmüyordu. nav-links'teki dil bağlantısı da masaüstünde
     gizli olduğu için sitede dil değiştirmenin HİÇBİR yolu kalmıyordu.
     Çözüm: aynı :not() zinciri, aynı özgüllük, ama daha sonra gelen kural. */
  .nav-actions .btn:not(.mobile-toggle){ display:inline-flex }
  .nav-actions .btn:not(.mobile-toggle):not(.primary):not(.steam){ display:inline-flex }
  .nav-actions .lang-menu{ display:inline-block }
  .nav-actions .btn.primary,.nav-actions .btn.steam{ padding:12px 20px; font-size:.95rem; min-height:48px }
  .brand small{ display:block }
  .mobile-toggle{ display:none }

  /* Kahraman iki sütun */
  .hero{ padding:calc(72px + 56px) 0 clamp(56px,7vw,96px) }
  .hero-grid{ grid-template-columns:1.05fr .95fr; gap:56px }
  .floating-logo{
    display:block; position:absolute; top:-18px; right:6%;
    width:88px; border-radius:22px; opacity:.9; z-index:2;
    animation:bob 7s var(--ease) infinite alternate;
  }
  @keyframes bob{ from{ transform:translateY(0) rotate(-4deg) } to{ transform:translateY(-14px) rotate(4deg) } }
  .hero-art{ gap:20px }
  .hero-art .phone{ width:min(46%,240px) }

  /* İçerik ızgaraları */
  .split,.intro-grid,.gallery-layout,.safety-grid,.showcase,.download-section{ grid-template-columns:1.05fr .95fr; gap:26px }
  .about-card{ grid-template-columns:auto 1fr; gap:28px; align-items:center; padding:clamp(24px,3vw,36px) }
  .about-card>img{ width:110px; height:110px; flex-basis:110px; border-radius:26px }
  .feature-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .platforms{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .project-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) }

  /* Öne çıkan oyun kartları: görsel bir yanda, metin diğer yanda */
  .studio-game-card{ grid-template-columns:1.02fr .98fr; align-items:stretch }
  .studio-cover{ aspect-ratio:auto; min-height:340px }
  .studio-game-card.reverse .studio-cover{ order:2 }
  .studio-game-card.reverse .studio-info{ order:1 }

  /* Galeriler ızgaraya döner, kaydırma biter */
  .shot-grid,.thumb-grid{
    grid-auto-flow:row; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-columns:auto;
    overflow:visible; margin-inline:0; padding-inline:0; padding-bottom:0;
  }
  .shot-grid.wide,.shot-grid.ultrawide{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .shot-grid.wide img.span-2{ grid-column:1 / -1 }
  .thumb-grid{ grid-template-columns:repeat(5,minmax(0,1fr)) }
}

/* ---- 1100px: nefes payı ---- */
@media (min-width:1100px){
  .section{ padding:clamp(64px,7vw,110px) 0 }
  .icon-title img,.appicon,.download-icon{ width:68px; height:68px; flex-basis:68px }
}

/* ============================================================================
   16. SAYFA RENKLERİ
   Her sayfa kendi vurgu rengini alıyor; arka plan bulutları, düğmeler,
   kart parıltıları ve bağlantılar otomatik olarak o renge dönüyor.
   ========================================================================== */
.page-home     { --accent:var(--cyan);   --accent-2:var(--purple) }
.page-swipe    { --accent:var(--cyan);   --accent-2:var(--pink) }
.page-funny    { --accent:var(--green);  --accent-2:var(--cyan) }
.page-boomy    { --accent:var(--gold);   --accent-2:var(--pink) }
.page-hordelight{ --accent:var(--purple); --accent-2:var(--pink) }
.page-contact  { --accent:var(--cyan);   --accent-2:var(--green) }
.page-privacy  { --accent:var(--cyan);   --accent-2:var(--purple) }
.page-press    { --accent:var(--gold);   --accent-2:var(--cyan) }
.page-chain    { --accent:var(--purple); --accent-2:var(--cyan) }

/* Kart bazında renk: JS her karta --glow veriyor, onu vurguya bağlıyoruz */
.studio-game-card[style*="--glow"]{ --accent:var(--glow) }

/* ============================================================================
   17. ESKİ SAYFALARDAN GELEN, HENÜZ YENİDEN YAZILMAMIŞ PARÇALAR
   Oyun sayfaları bu sınıfları kullanıyor. Yeni dile uyacak şekilde sade
   tutuldular; sayfalar tek tek elden geçirildikçe buradan silinecekler.
   ========================================================================== */
.game-card{ display:flex; flex-direction:column }
.mode-card img,.theme-card img,.safety-visual img{ aspect-ratio:16/10; object-fit:cover; margin-bottom:14px }
.mode-large,.big,.large{ grid-column:1 / -1 }
.center{ text-align:center; margin-inline:auto }
.play-button{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%;
  background:color-mix(in srgb, var(--accent) 26%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 50%, transparent);
}
.trailer-link{ display:block; position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line) }
.trailer-link img{ width:100%; transition:transform .5s var(--ease) }
.trailer-link:hover img{ transform:scale(1.04) }
.youtube-note{ color:var(--muted); font-size:.84rem; margin-top:10px }
.brand-text{ font-weight:900 }
.grid{ display:grid; gap:16px }
.two{ grid-template-columns:1fr }
@media (min-width:900px){ .two{ grid-template-columns:1fr 1fr } }


/* ------------------------------------------------------- Tema düğmesi */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; min-height:46px; padding:0; flex:0 0 46px;
  border:1px solid var(--line); border-radius:14px; background:var(--surface);
  font-size:1.05rem; line-height:1;
}
.theme-toggle:hover{ border-color:var(--line-strong) }


/* ---------------------------------------------------- Dil değiştirici */
/* Mobilde nav-actions kalabalık olmasın diye gizli — dilin yeri menünün
   içi (nav-links'te ayrı bir madde olarak duruyor). Masaüstünde görünür. */
.lang-switch{ display:none; min-height:46px; padding:10px 14px; font-size:.85rem }
.nav-links a[hreflang]{ color:var(--accent) }
@media (min-width:900px){
  .lang-switch{ display:inline-flex }
  .nav-links a[hreflang]{ display:none }   /* masaüstünde düğme zaten var */
}


/* ============================================================================
   18. FRAGMAN PENCERESİ
   Fragmanlar artık YouTube'a götürmüyor, sayfanın üstünde açılıyor.
   JavaScript kapalıysa bağlantı normal davranıp YouTube'a gider (yedek).
   ========================================================================== */
.video-modal{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  padding:var(--gutter);
  background:color-mix(in srgb, #01030a 88%, transparent);
  backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; transition:opacity .28s var(--ease), visibility .28s;
}
.video-modal.open{ opacity:1; visibility:visible }
.video-modal__inner{
  position:relative; width:min(100%, 1000px);
  border:1px solid var(--line-strong); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-lg);
  background:#04070e;
  transform:scale(.96); transition:transform .28s var(--ease);
}
.video-modal.open .video-modal__inner{ transform:scale(1) }
.video-modal__inner::before{ content:""; display:block; padding-top:56.25% }
.video-modal iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.video-modal__close{
  position:absolute; top:calc(var(--gutter) * -1 - 6px); right:0;
  width:44px; height:44px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--line-strong);
  color:var(--text); font-size:1.1rem;
}
@media (max-width:600px){
  .video-modal__close{ top:auto; bottom:calc(var(--gutter) * -1 - 52px); right:50%; transform:translateX(50%) }
}

/* Kart görselinin üstünde oynat düğmesi — fragmanı olan oyunlarda.
   ⚠️ Bu rozet önceden ::after ile çiziliyordu ve pointer-events:none
   taşıyordu — yani GÖRÜNÜYORDU ama TIKLANMIYORDU. Masaüstünde hover
   büyümesi olduğu için fark edilmiyordu; telefonda kullanıcı video sanıp
   dokunuyor, hiçbir şey olmuyordu. Artık gerçek bir <a>, kapağın tamamı
   tıklanabilir ve klavyeyle de erişilebilir. ::after'a geri dönme. */
.cover-play{
  position:absolute; inset:0; z-index:3;
  display:grid; place-items:center; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.cover-play span{
  width:66px; height:66px; border-radius:50%;
  display:grid; place-items:center; font-size:1.2rem; color:#fff;
  background:color-mix(in srgb, var(--accent) 34%, rgba(4,7,14,.72));
  border:1px solid color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow:0 10px 34px rgba(0,0,0,.45);
  transition:transform var(--dur) var(--ease), background var(--dur);
}
.cover-play:hover span,.cover-play:focus-visible span{ transform:scale(1.1) }
.cover-play:active span{ transform:scale(.96) }
.cover-play:focus-visible{ outline:2px solid var(--accent); outline-offset:-4px; border-radius:inherit }