/* Baslik fontu: Baloo 2 — yuvarlak geometrik, Turkce glifleri tam (Fredoka'da ğ/ş/Ğ/İ/Ş yok) */
@font-face{font-family:'GGDisplay';src:url('/fonts/baloo.ttf') format('truetype');font-weight:400 900;font-display:swap}

:root{
  --coral:#EF715C; --coral-dark:#D45744;
  --ink:#1d1d1f; --grey:#6e6e73; --line:rgba(0,0,0,.09); --wash:#f5f5f7;
  --sans:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --disp:'GGDisplay',var(--sans);
  --gut:max(22px, calc((100vw - 1080px) / 2));   /* sayfa sol/sag payi */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:17px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}

/* ---------- header ---------- */
.nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.72);
     backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
     border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:22px;height:62px}
.nav .mark{height:21px;width:auto}
.nav .brandDot{width:9px;height:9px;border-radius:50%;background:var(--coral);flex:0 0 auto}
.nav .brand{display:flex;align-items:center;gap:9px}
.nav ul{display:flex;gap:26px;list-style:none;margin:0 0 0 auto;padding:0;font-size:14.5px}
.nav ul a{position:relative;opacity:.78;padding:4px 0}
.nav ul a:hover{opacity:1}
.nav ul a::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;
  background:var(--coral);transform:scaleX(0);transition:transform .22s ease}
.nav ul a:hover::after{transform:scaleX(1)}
.navCta{background:var(--coral);color:#fff;font-weight:600;font-size:14px;padding:9px 18px;border-radius:980px;
        white-space:nowrap;transition:background .2s ease,transform .2s ease}
.navCta:hover{background:var(--coral-dark);transform:translateY(-1px)}
@media (max-width:760px){ .nav ul{display:none} .navCta{margin-left:auto} }

/* ---------- ortak tipografi ---------- */
h1{font-family:var(--disp);font-size:clamp(40px,6vw,74px);line-height:1.02;letter-spacing:-.032em;margin:0}
h2{font-family:var(--disp);font-size:clamp(30px,4.4vw,48px);line-height:1.06;letter-spacing:-.025em;margin:0}
h3{font-family:var(--disp);letter-spacing:-.02em;margin:0}
.c{color:var(--coral)}
.eyebrow{display:block;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
         color:var(--coral);margin-bottom:14px}
.sub{font-size:clamp(16px,1.5vw,19px);color:var(--grey);margin:16px auto 0;max-width:34em}
.head{text-align:center;padding:0 22px}
.pillbtn{display:inline-block;background:var(--coral);color:#fff;font-weight:600;font-size:16px;
         padding:14px 30px;border-radius:980px;transition:background .2s ease,transform .2s ease}
.pillbtn:hover{background:var(--coral-dark);transform:translateY(-2px)}
.ghostbtn{display:inline-block;border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:16px;
          padding:13px 26px;border-radius:980px;transition:border-color .2s ease,background .2s ease}
.ghostbtn:hover{border-color:rgba(0,0,0,.28);background:var(--wash)}
section{padding:96px 0}
@media (max-width:720px){ section{padding:64px 0} }

/* ---------- hero: solda yazi, sagda ekran kenarina yapisik key-art ----------
   Gorselin sag kenari SAYFA kenarina dayanir; boylece duz kesigi ekran disinda kalir. */
.hero{padding:66px 0 26px;padding-left:var(--gut);
      display:grid;grid-template-columns:minmax(260px,.84fr) minmax(0,1.16fr);
      column-gap:22px;align-items:center}
.heroCopy{text-align:left}
.heroCopy .sub{margin:18px 0 0;max-width:21em}
.heroBtns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.heroArt{display:block;min-width:0;height:clamp(280px,34vw,460px)}
/* ⚠️ picture satir-ici ve yuksekligi auto -> icindeki yuzde yukseklik cozulmez, object-fit calismaz */
.heroArt picture{display:block;width:100%;height:100%}
.heroArt img{width:100%;height:100%;object-fit:contain;object-position:right bottom;
  -webkit-mask-image:linear-gradient(to bottom,#000 84%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to bottom,#000 84%,rgba(0,0,0,0) 100%)}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding:44px 0 12px;padding-left:0;row-gap:8px}
  .heroCopy{text-align:center;padding:0 22px}
  .heroCopy .sub{margin-left:auto;margin-right:auto}
  .heroBtns{justify-content:center}
  .heroArt{height:clamp(210px,52vw,330px)}
}

/* ---------- rakam seridi ---------- */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
.strip b{display:block;font-family:var(--disp);font-size:clamp(26px,3vw,34px);letter-spacing:-.02em}
.strip span{font-size:13.5px;color:var(--grey)}
@media (max-width:600px){ .strip .wrap{grid-template-columns:repeat(2,1fr);gap:22px} }

/* ---------- oyun vitrini ---------- */
.showcase{max-width:900px;margin:46px auto 0;padding:38px 40px;background:var(--wash);border-radius:34px;
          display:grid;grid-template-columns:auto minmax(0,1fr);gap:34px;align-items:center}
.scIcon{position:relative;display:block}
.scIcon::before{content:'';position:absolute;inset:-16%;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(239,113,92,.35),rgba(239,113,92,0) 68%)}
.scIcon img{position:relative;z-index:1;width:190px;height:190px;border-radius:23%;
  box-shadow:0 18px 38px -16px rgba(0,0,0,.5);transition:transform .25s ease}
.scIcon:hover img{transform:translateY(-3px)}
.scBody h3{font-size:38px;line-height:1.05}
.scBody p{color:var(--grey);font-size:16.5px;margin:12px 0 0;max-width:30em}
.scMeta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.scMeta span{font-size:13px;font-weight:600;background:#fff;border-radius:980px;padding:6px 13px;
             box-shadow:0 1px 2px rgba(0,0,0,.06)}
.scBody .pillbtn{margin-top:20px}
@media (max-width:720px){
  .showcase{grid-template-columns:1fr;text-align:center;justify-items:center;padding:32px 24px;gap:22px}
  .scIcon img{width:150px;height:150px}
  .scBody p{margin-left:auto;margin-right:auto}
  .scMeta{justify-content:center}
}

/* ---------- kart rayi ---------- */
.railHead{max-width:1080px;margin:0 auto;padding:0 var(--gut)}
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
      padding:28px var(--gut) 10px;scroll-padding-left:var(--gut)}
.rail::-webkit-scrollbar{display:none}
.card{position:relative;flex:0 0 286px;height:410px;border-radius:28px;overflow:hidden;scroll-snap-align:start;
      display:flex;flex-direction:column;padding:28px 26px 0;color:#fff;isolation:isolate;
      transition:transform .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px -18px rgba(0,0,0,.45)}
.card h3{font-size:26px;line-height:1.12;max-width:8.5em}
.card small{display:block;margin-top:10px;font-size:14.5px;opacity:.82}
.card.coral{background:linear-gradient(165deg,#F58A72,#EF715C 55%,#D9553F)}
.card.dark {background:linear-gradient(165deg,#2a2a30,#141417)}
.card.wash {background:linear-gradient(165deg,#fff,#eceef2);color:var(--ink)}
.card.deep {background:linear-gradient(165deg,#4b3568,#2a1c3d)}
.card.sky  {background:linear-gradient(165deg,#eaf4fd,#d6e8f7);color:var(--ink)}
.card.sand {background:linear-gradient(165deg,#ffd9a8,#f7b26a);color:#4a2a10}
/* figur mutlak DEGIL: yazidan ARTAN alani kaplar -> baslik kac satir sararsa sarsin binme olmaz */
.card .figure{flex:1 1 auto;min-height:0;margin:14px -26px 0;display:flex;justify-content:center;
              align-items:flex-end;pointer-events:none}
.card .figure picture{display:flex;align-items:flex-end;justify-content:center;width:100%;height:100%}
.card .figure img{width:var(--fw,88%);height:100%;object-fit:contain;object-position:center bottom;
                  filter:drop-shadow(0 14px 18px rgba(0,0,0,.22))}

/* ---------- canavarlar ---------- */
#canavarlar{padding:96px 0 4px}
.mons{max-width:1080px;margin:46px auto 0;padding:0 22px;display:grid;gap:18px;
      grid-template-columns:repeat(4,minmax(0,1fr))}
.mon{position:relative;background:#fff;border:1px solid var(--line);border-radius:24px;
     padding:10px 10px 18px;text-align:center;overflow:hidden;
     transition:transform .25s ease,box-shadow .25s ease}
.mon:hover{transform:translateY(-5px);box-shadow:0 18px 38px -20px rgba(0,0,0,.35)}
/* konsept gorseli kendi studyo zeminiyle geliyor -> tam genislikte panel olarak goster */
.mon .ph{border-radius:16px;overflow:hidden;background:#eceef0;margin-bottom:14px}
.mon img{width:100%;height:auto;display:block}
.mon h3{font-size:18px}
.mon small{display:block;color:var(--grey);font-size:13.5px;margin-top:5px;min-height:2.6em}
.mon .lvl{display:inline-block;margin-top:12px;font-size:11.5px;font-weight:700;letter-spacing:.08em;
     text-transform:uppercase;color:var(--grey);background:#fff;border:1px solid var(--line);
     border-radius:980px;padding:5px 12px}
.mon.boss{background:linear-gradient(170deg,#fff7e8,#fdefd6);border-color:#f0dcb4}
.mon.boss .lvl{color:#9a6a12;border-color:#eeD9a8;background:#fffaf0}
@media (max-width:900px){ .mons{grid-template-columns:repeat(2,minmax(0,1fr))} .mon img{height:132px} }
@media (max-width:420px){ .mon img{height:118px} .mon small{min-height:0} }

/* ---------- nasil calisiyoruz ---------- */
.ways{max-width:980px;margin:52px auto 0;padding:0 22px;display:grid;gap:20px;
      grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.way{background:var(--wash);border-radius:24px;padding:26px 24px}
.way .ic{width:38px;height:38px;border-radius:12px;background:#fff;display:grid;place-items:center;
         margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.way .ic svg{width:20px;height:20px;stroke:var(--coral)}
.way b{display:block;font-size:16.5px;margin-bottom:7px}
.way p{margin:0;font-size:15px;color:var(--grey)}

/* ---------- band ---------- */
.band{background:var(--wash)}
.media{max-width:1160px;margin:40px auto 0;padding:0 22px}
.media img{width:auto;max-width:min(100%,660px);margin:0 auto}

/* ---------- yol haritasi ---------- */
.road{max-width:820px;margin:48px auto 0;padding:0 22px;display:grid;gap:14px}
.road li{list-style:none;display:flex;align-items:flex-start;gap:16px;background:#fff;border:1px solid var(--line);
         border-radius:20px;padding:20px 22px}
.road .tag{flex:0 0 auto;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
           padding:5px 11px;border-radius:980px;margin-top:2px}
.road .tag.now{background:#fdece8;color:var(--coral-dark)}
.road .tag.next{background:#eef1f6;color:#4a5568}
.road .tag.idea{background:#f3eefb;color:#6b4ca0}
.road b{display:block;font-size:16.5px}
.road span{font-size:14.5px;color:var(--grey)}

/* ---------- studyo ---------- */
.tell{max-width:720px;margin:0 auto;text-align:center}
.tell p{color:var(--grey);font-size:17px;margin:16px 0 0}
.crew{margin:40px auto 0;max-width:760px;padding:0 22px}

/* ---------- iletisim ---------- */
.contact{max-width:900px;margin:0 auto;padding:0 22px}
.contactBox{background:linear-gradient(165deg,#F58A72,#EF715C 55%,#D9553F);color:#fff;border-radius:34px;
            padding:52px 44px;text-align:center}
.contactBox h2{color:#fff}
.contactBox p{margin:16px auto 0;max-width:30em;opacity:.92;font-size:17px}
.contactBtns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.contactBox .pillbtn{background:#fff;color:var(--coral-dark)}
.contactBox .pillbtn:hover{background:#fff5f2}
.contactBox .ghostbtn{border-color:rgba(255,255,255,.5);color:#fff}
.contactBox .ghostbtn:hover{background:rgba(255,255,255,.14);border-color:#fff}
@media (max-width:640px){ .contactBox{padding:38px 24px} }

/* ---------- alt ---------- */
footer{border-top:1px solid var(--line);padding:40px 0 48px;font-size:13.5px;color:var(--grey)}
footer .wrap{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
footer .links{display:flex;gap:22px;flex-wrap:wrap}
footer .links a:hover{color:var(--coral)}
/* 🔑 Sisme logo SADECE buyuk boyda anlamli: 21 px'te malzeme kayboluyor (olculdu),
   navda bu yuzden duz SVG var. Footer'da 52 px -> yastik dokusu goruluyor. */
footer .footMark{height:52px;width:auto;display:block}
@media (max-width:720px){ footer .footMark{height:42px} }

/* ================================================================
   3 OYUNLU VITRIN — 28 Agu 2026
   Deep Glow magazaya cikinca ana sayfa tek oyunluktan studyo
   vitrinine cevrildi. BoomRush'a ozel bolumler /boomrush/ sayfasina
   tasindi; asagidaki bilesenler iki sayfada da kullaniliyor.
   ================================================================ */

/* ---------- hero: uc oyun ikonu ---------- */
/* Eski hero tek oyunun key-art'ini tasiyordu; uc oyunda tek oyunun
   gorseli sayfayi yanlis yere yasliyor -> ikon uclusu. */
.heroTri{padding:60px 0 0;text-align:center}
.heroTri h1{margin:0 auto}
.heroTri .sub{margin:20px auto 0}
.heroBtnsC{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.trio{display:flex;justify-content:center;align-items:flex-end;gap:clamp(14px,3.4vw,38px);
      margin:clamp(38px,6vw,62px) auto 0;padding:0 22px;max-width:760px}
.trio a{position:relative;display:block;flex:0 1 auto;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.trio a:hover{transform:translateY(-8px)}
.trio img{width:clamp(84px,17vw,158px);height:auto;border-radius:23%;
          box-shadow:0 22px 44px -18px rgba(0,0,0,.45)}
/* ortadaki hafif buyuk: uc esit ikon sirali dizilince ritm olusmuyor */
.trio a.mid img{width:clamp(100px,20vw,186px)}
.trio b{display:block;font-family:var(--disp);font-size:clamp(13px,1.6vw,17px);margin-top:12px;
        letter-spacing:-.01em}
.trio span{display:block;font-size:clamp(11px,1.3vw,12.5px);color:var(--grey);margin-top:2px}

/* ---------- magaza rozetleri ---------- */
.stores{display:flex;flex-wrap:wrap;gap:11px}
.stores.mid{justify-content:center}
.store{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;
       border-radius:14px;padding:9px 16px;transition:transform .2s ease,opacity .2s ease}
.store:hover{transform:translateY(-2px);opacity:.9}
.store svg{width:21px;height:21px;flex:0 0 auto}
.store small{display:block;font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;opacity:.72;line-height:1.3}
.store b{display:block;font-size:14.5px;font-weight:600;line-height:1.15}
.store.soon{background:var(--wash);color:var(--grey);cursor:default}
.store.soon:hover{transform:none;opacity:1}

/* ---------- oyun karti (3'lu) ---------- */
.games{max-width:1080px;margin:52px auto 0;padding:0 22px;display:grid;gap:22px}
.game{background:var(--wash);border-radius:34px;padding:34px 36px;
      display:grid;grid-template-columns:auto minmax(0,1fr);gap:32px;align-items:center}
/* yayindaki oyun one cikar: beyaz kart + cerceve, digerleri duz zemin */
.game.live{background:#fff;border:1px solid var(--line);box-shadow:0 24px 60px -34px rgba(0,0,0,.4)}
.gIcon{position:relative;display:block;flex:0 0 auto}
.gIcon::before{content:'';position:absolute;inset:-14%;border-radius:50%;z-index:0;
  background:radial-gradient(circle,var(--glow,rgba(239,113,92,.32)),rgba(0,0,0,0) 68%)}
.gIcon img{position:relative;z-index:1;width:168px;height:168px;border-radius:23%;
  box-shadow:0 18px 38px -16px rgba(0,0,0,.5);transition:transform .25s ease}
.gIcon:hover img{transform:translateY(-3px)}
.gBody h3{font-size:34px;line-height:1.05}
.gBody .role{display:block;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
        color:var(--coral);margin-bottom:9px}
.gBody p{color:var(--grey);font-size:16.5px;margin:12px 0 0;max-width:34em}
.gMeta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.gMeta span{font-size:13px;font-weight:600;background:#fff;border-radius:980px;padding:6px 13px;
            box-shadow:0 1px 2px rgba(0,0,0,.06)}
.game.live .gMeta span{background:var(--wash);box-shadow:none}
.gActs{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:20px}
/* yakinda etiketi */
.soonTag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
         background:#f3eefb;color:#6b4ca0;border-radius:980px;padding:6px 13px}
@media (max-width:760px){
  .game{grid-template-columns:1fr;text-align:center;justify-items:center;padding:30px 22px;gap:22px}
  .gIcon img{width:132px;height:132px}
  .gBody p{margin-left:auto;margin-right:auto}
  .gMeta,.gActs,.stores{justify-content:center}
}

/* ---------- alt sayfa basligi (/boomrush/) ---------- */
.subhero{padding:56px 0 0;text-align:center}
.crumb{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--grey);margin-bottom:18px}
.crumb a:hover{color:var(--coral)}
.subhero .stores,.subhero .heroBtnsC{justify-content:center}