/* ==================================================================
   GECCEBET · OYUN SAYFASI
   app.css'ten SONRA yuklenir. Oyun karti (.gcard) ve raylar
   app.css'ten geliyor - bu sayfa kendi kart dilini icat etmiyor.
   ================================================================== */


/* ==================================================================
   SAHNE
   Tek kural: OYUN ILK EKRANDA VE TAM GORUNSUN. Altina bilgi,
   benzer oyunlar, aciklama koyabiliriz; oyunu asagi iten hicbir sey
   koymayiz.
   ================================================================== */

.gp-stage {
  position: relative;
  z-index: 1;
  padding-top: 18px;
  /* Su sutunu burada durmuyor: oyunun kendi rengi ne olursa olsun
     etrafi notr kalsin, sayfanin gradyani oyunun kenarindan sizmasin. */
  background: linear-gradient(180deg, rgba(17, 8, 5, .55), rgba(17, 8, 5, .2));
}

.gp-in { display: grid; gap: 10px; }


/* ---------------- Ust satir ----------------
   Cercevenin USTUNDE ve ayri. Cerceve uzerine binen bir baslik
   oyunun kendi arayuzunu kapatiyor. */
.gp-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.gp-back {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--tx-2);
  transition: border-color var(--t), color var(--t);
}
.gp-back:hover { border-color: rgba(255, 138, 146, .4); color: var(--tx); }
.gp-back svg { width: 17px; height: 17px; }
/* Ok yon isareti: RTL'de geri yonu de doner. */
[dir="rtl"] .gp-back svg { transform: scaleX(-1); }

.gp-id { flex: 1; min-width: 0; }
.gp-name {
  margin: 0;
  font-size: clamp(17px, 1.9vw, 21px);
  font-weight: 700;
  letter-spacing: -.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gp-prov { font-size: 12.5px; font-weight: 300; color: var(--tx-3); }

/* Favori burada kartin uzerinde degil, kendi basina bir dugme:
   her zaman gorunur (kartlarda hover'da beliriyor). */
.gp-fav {
  position: static;
  flex: none;
  opacity: 1;
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  background: transparent;
}
.gp-fav:hover { border-color: rgba(255, 115, 95, .45); }

/* Tam ekran dugmesi - kalbin yaninda, ayni daire kabugu. */
.gp-full {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--tx-2, #d6d9de);
  cursor: pointer;
}
.gp-full svg { width: 17px; height: 17px; }
.gp-full:hover { border-color: rgba(255, 115, 95, .45); color: #fff; }
.gp-full:focus-visible { outline: 2px solid #ed2337; outline-offset: 2px; }

/* Yedek tam ekran (oyun.js, iPhone Safari): cerceve ekrani kaplar. */
.gp-screen.gp-tam {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  min-height: 0;
  aspect-ratio: auto;
  border-radius: 0;
  margin: 0;
}
.gp-screen.gp-tam .gp-fs-exit { display: flex; }
html.gp-tam-acik, html.gp-tam-acik body { overflow: hidden; }
/* .gp-stage (position:relative; z-index:1) bir katman baglami kuruyor;
   icindeki fixed cerceve z-index'i ne olursa olsun basligin (50) ve alt
   menunun (94) ALTINDA kalirdi. Yedek tam ekran acikken baglam kalkar. */
html.gp-tam-acik .gp-stage { z-index: auto; }


/* ---------------- Cerceve ----------------
   YUKSEKLIK EKRANI OLCU ALIYOR, sayfayi degil. 16/9 oran kisa ve
   genis ekranlarda (dizustu, yatay telefon) cerceveyi ekrandan
   tasiriyordu ve oyuncu oynarken kaydirmak zorunda kaliyordu.

   dvh bilerek: mobil tarayicilarda adres cubugu kayboldukca 100vh
   degisiyor ve oyun ziplayarak buyuyor. dvh desteklenmeyen eski
   tarayicida bir onceki satirdaki vh degeri gecerli kaliyor. */
.gp-screen {
  position: relative;
  width: 100%;
  aspect-ratio: var(--oran, 16 / 9);
  max-height: calc(100vh - var(--hd) - 190px);
  max-height: calc(100dvh - var(--hd) - 190px);
  margin-inline: auto;
  border-radius: var(--r);
  overflow: hidden;
  background: #170c07;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07),
              0 22px 60px rgba(0, 0, 0, .5);
}
/* Oran korunurken yukseklik sinirlanirsa genislik de kisilmali,
   yoksa kutu genis kalip icini siyah biraktiriyor. */
.gp-screen { width: min(100%, calc((100dvh - var(--hd) - 190px) * var(--oran, 16 / 9))); }

/* iframe'in KENDISINE border-radius + overflow:hidden verilmedi:
   iOS'ta yuvarlatilmis bir kapsayicinin icindeki iframe kose
   taskinini yanlis ciziyor ve oyunun kenari titriyor. Yuvarlatma
   disardaki kutuda, iframe duz duruyor. */
.gp-game {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Onizleme yer tutucusu. Entegrasyonda silinecek. */
.gp-stub {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .018) 0 14px, transparent 14px 28px),
    #1f100b;
}
.gp-stub-k {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(245, 244, 236, .5);
}
.gp-stub-n { font-size: 12.5px; font-weight: 300; color: rgba(245, 244, 236, .58); }

/* ---------------- Tam ekrandan cikis ----------------
   TASARIMDA YOK - bkz. tema/games/_gp-fs-exit.blade.php basindaki yorum.
   .gp-bar (tek cikis dugmesinin bulundugu yer) .gp-screen'in KARDESI,
   native tam ekran SADECE .gp-screen'in alt agacini ciziyor - bu dugme
   o yuzden .gp-screen'in ICINDE duruyor. Varsayilan GIZLI: yalniz
   tarayici GERCEKTEN .gp-screen'i tam ekrana aldiginda gorunur, boylece
   normal gorunumde tasarimin kendi .gp-screen'ine hicbir sey eklenmis
   gibi gorunmez. */
.gp-fs-exit {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  z-index: 5;
  display: none;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(245, 244, 236, .35);
  background: rgba(20, 11, 7, .78);
  color: var(--tx);
  cursor: pointer;
}
.gp-fs-exit svg { width: 18px; height: 18px; }
.gp-fs-exit:hover { border-color: rgba(255, 138, 146, .5); }
.gp-fs-exit:focus-visible { outline: 2px solid var(--aqua-soft); outline-offset: 2px; }
.gp-screen:fullscreen .gp-fs-exit,
.gp-screen:-webkit-full-screen .gp-fs-exit { display: flex; }


/* ---------------- Ziyaretci ortusu ----------------
   Oyunu ziyaretciden GIZLEMIYORUZ: demo calisiyor, ustunde yalniz
   gercek parayla oynamanin yolu duruyor. Oyunu kilitlemek kisiyi
   denemeden kayit olmaya zorluyor ve genelde geri cevirtiyor. */
.gp-gate {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 4px;
  padding: 22px 20px 20px;
  background: linear-gradient(180deg, rgba(23, 12, 7, 0), rgba(23, 12, 7, .93) 42%);
}
.gp-gate-k { margin: 0; font-size: 14.5px; font-weight: 700; }
.gp-gate-n { margin: 0; font-size: 13px; font-weight: 300; color: rgba(245, 244, 236, .74); }
.gp-gate-go { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }


/* ---------------- Cubuk ----------------
   CERCEVENIN ALTINDA, USTUNDE DEGIL. Oyunun kendi arayuzu (bahis,
   spin, ayarlar) genelde alt kenarda duruyor; uzerine binen bir
   seritte dugmeler birbirini oruyor. */
.gp-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, .03);
}

.gp-bal {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.gp-bal span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(245, 244, 236, .68);
}
.gp-bal b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Oturum suresi: lisansli casinolarda sorumlu oyun tarafinin
   istedigi bir sey. Kaldirmadan once uyumluluk tarafina sorun. */
.gp-session {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-inline-start: auto;
  flex: none;
  font-size: 13px;
  color: var(--tx-2);
}
.gp-session svg { width: 15px; height: 15px; flex: none; color: var(--tx-3); }
.gp-session b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  /* RTL'de saat soldan saga okunur. */
  direction: ltr;
  unicode-bidi: isolate;
}

.gp-tools { position: relative; display: flex; align-items: center; gap: 6px; flex: none; }
.gp-tool { width: 36px; height: 36px; }
/* Ses dugmesi tek dugme, iki simge: durum degisince yer degistirmiyor. */
[data-sound] .is-off { display: none; }
[data-sound][aria-pressed="false"] .is-on { display: none; }
[data-sound][aria-pressed="false"] .is-off { display: block; }

.gp-info-pop {
  inset-inline-end: 0;
  width: 270px;
  padding: 14px 16px;
}
.gp-info-pop p { margin: 0 0 8px; font-size: 13px; font-weight: 300; color: var(--tx-2); }
.gp-info-pop p b { font-weight: 700; color: var(--tx); }
.gp-info-pop a { font-size: 13px; font-weight: 600; color: var(--aqua-soft); }


/* ==================================================================
   OYUN BILGILERI
   Kart degil satir: alti tane kucuk kutu yapmak sayfayi yine
   "her sey kart" haline getiriyordu.
   ================================================================== */

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--line-soft);
}
.fact {
  /* Mantiksal dolgu: sag bosluk RTL'de sola gecmeli, yoksa
     Divehi'de sutunlar birbirine yapisiyor. */
  padding-block: 15px;
  padding-inline: 0 18px;
  border-bottom: 1px solid var(--line-soft);
}
.fact dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(245, 244, 236, .68);
}
.fact dd {
  margin: 6px 0 0;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* ==================================================================
   DAR EKRAN
   ================================================================== */

@media (max-width: 980px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  /* Cubuk iki satira cikiyor: bakiye + yatir ustte, sure ve
     dugmeler altta. Tek satirda kalirsa bakiye eziliyor ve para
     rakami en son kisilmasi gereken sey. */
  .gp-bar { flex-wrap: wrap; gap: 10px 12px; }
  .gp-bal { flex: 1 0 100%; }
  .gp-session { margin-inline-start: 0; }
  .gp-tools { margin-inline-start: auto; }

  /* Ekran yuksekligi sinirini gevsetiyoruz: dar ekranda 16/9 bir
     cerceve zaten kisa ve ustteki sinir onu gereksiz kuculturuyor. */
  .gp-screen {
    width: 100%;
    max-height: none;
  }

  /* DIKEY TELEFON (kullanici bildirimi 2026-09-26, Aviator): 16/9 kutu
     dikey ekranda ~230px yukseklikte kaliyordu; mobil oyunlar (Aviator,
     crash, slotlarin mobil surumu) dikey arayuz cizdigi icin oyunun
     yalniz ust kismi gorunuyor, bahis paneli kutunun disinda kaliyordu.
     Burada oran birakilir, kutu ilk ekranin geri kalanini doldurur:
     arsenal mobil basligi (body padding-top 132px) + oyun ust satiri
     (~58px) + alttaki sabit menu (~96px) dusulur. Cubuk (bakiye/sure)
     kutunun ALTINDA kalir - oyun ilk ekranda ve tam. */
  .gp-screen {
    aspect-ratio: auto;
    height: calc(100vh - 286px);
    height: calc(100dvh - 286px);
    min-height: 440px;
  }
  /* Kutu genisligi: page-frame zaten kenar boslugu veriyor; .wrap'in ek
     yan boslugu dar ekranda oyundan ~36px yiyordu. */
  .gp-in.wrap { padding-inline: 0; }
}

/* KISA VE GENIS EKRAN (yatay telefon, kucuk dizustu).
   Cerceve yuksekligi "ekran eksi baslik eksi 190px" ile
   sinirliydi; 400px yuksekliginde bu, oyuna 148px birakiyordu.
   Burada kaybedilecek 190px yok: ust satir ve cubuk sikisiyor,
   kazanilan yerin tamami oyuna gidiyor.
   min-width sarti bilerek: dar VE kisa bir ekran (kucuk telefon,
   dikey) zaten alttaki kuralla tam genislige geciyor. */
@media (max-height: 600px) and (min-width: 561px) {
  .gp-stage { padding-top: 10px; }
  .gp-in { gap: 7px; }
  .gp-head { gap: 10px; }
  .gp-back, .gp-fav { width: 32px; height: 32px; }
  .gp-name { font-size: 16px; }
  .gp-prov { display: none; }
  .gp-bar { padding: 7px 12px; }
  .gp-tool { width: 32px; height: 32px; }
  .gp-screen {
    max-height: calc(100vh - var(--hd) - 116px);
    max-height: calc(100dvh - var(--hd) - 116px);
    width: min(100%, calc((100dvh - var(--hd) - 116px) * var(--oran, 16 / 9)));
  }
}

@media (max-width: 560px) {
  .facts { grid-template-columns: 1fr; }
  .gp-stage { padding-top: 12px; }
  .gp-gate-go .btn { flex: 1; }
}

/* Ziyaretcinin durum rozeti. Bakiyenin durdugu yerde duruyor:
   cubugun o kosesi "bu oyun hangi parayla oynaniyor" kosesi. */
.gp-demo {
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 115, 95, .34);
  background: rgba(255, 115, 95, .09);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ffb59f;
  white-space: nowrap;
}