/*
 * Launcher stili. Ölçüler referans launcher'dan alındı: masaüstünde panel
 * 220px (orada 22rem, kök yazı boyu 10px), oyun ızgarası 2 sütun, kazanan
 * satırı 50px.
 *
 * Renkler ana sayfadan geliyor (bkz. lib.js temaDegiskenleri). Aşağıdaki
 * değerler YALNIZ yedek: ana sayfa tema yollamazsa launcher yine okunur kalsın.
 */
:root {
  --gl-bg: 0, 12, 36;
  --gl-fg: 255, 255, 255;
  --gl-accent: 233, 202, 96;
  /*
   * Kiracının paletinin kalanı. demo1'de üçü de TANIMLI ve yoğun kullanımda
   * (ölçüldü: --hero 266, --oc-1 87, --oc-2 37 kural). Referans launcher da
   * aynı adları kullanıyor: aktif sekme --hero, para düğmesi --oc-1,
   * tutar/vurgu --oc-2.
   *
   * ⚠️ Buradakiler YALNIZ yedek. Gerçek değerler `gl:init` ile geliyor
   * (lib.js temaDegiskenleri) ve biçimi doğrulanmadan stile yazılmıyor.
   */
  --gl-hero: 233, 202, 96;
  --gl-oc-1: 104, 255, 154;
  --gl-oc-2: 229, 225, 99;
  --gl-panel-w: 220px;
}

* { box-sizing: border-box; }

/*
 * 🔴 ZEMİN `gl:init` GELENE KADAR SAYDAM (2026-08-24).
 *
 * Burada `background: rgb(var(--gl-bg))` yazıyordu. Yedek değer LACİVERT
 * (`0, 12, 36`) ve belge POST'la açıldıktan sonra `gl:init` gelene kadar
 * tarayıcı onu boyuyordu: oyuncu her oyun açılışında ~1 sn MAVİ bir ekran
 * görüyordu (operatör bildirimi, casiwon — kiracının gövde rengi `26, 31, 41`,
 * yani lacivertle alakası yok).
 *
 * Saydam bırakınca gömen sayfanın zemini görünüyor ve o zemin ZATEN doğru
 * renk — ikisi de kiracının kendi `--b`sinden geliyor:
 *   mobil    demo1 `.game-iframe`         → `rgba(var(--b, 5,6,10), 1)`
 *   masaüstü demo1 `.casino-full-game-bg` → `rgba(var(--b), 1)`
 * Yani boşluk göze çarpmıyor ve kiracı başına ayar gerekmiyor.
 *
 * Opaklık `data-zemin` ile geliyor (launcher.js: init uygulanınca ve
 * tek-başına uyarısı çıkarken). Tema DEĞİŞKENLERİ opaklıktan ÖNCE yazılıyor,
 * yoksa aradaki tek karede yine yedek renk boyanırdı.
 *
 * ⚠️ `oyun.html` bu kuralın DIŞINDA: o sayfa iframe içinde değil, oyuncunun
 * sekmesinde ÜST SEVİYE açılıyor (rota). Arkasında gömen sayfa yok; saydam
 * kalsa beyaz tuval + beyaz yazı olurdu. Bu yüzden `data-zemin` işaretini
 * işaretlemesinde HAZIR taşıyor.
 */
html, body {
  height: 100%;
  margin: 0;
  background: transparent;
  color: rgb(var(--gl-fg));
  font: 400 13px/1.4 Roboto, Arial, Helvetica, sans-serif;
  overflow: hidden;
}

html[data-zemin], html[data-zemin] body { background: rgb(var(--gl-bg)); }

/*
 * Panel kapalıyken ızgara tek sütuna iner; oyun genişler.
 *
 * 🔴 `grid-template-rows: minmax(0, 1fr)` ŞART: örtük satır varsayılan olarak
 * İÇERİĞE göre büyüyor. Panel içeriği (24 oyunluk ızgara) uzun olduğu için
 * satır 1396px'e çıkıyor, `height:100%` olan kap 765px'te kalıyor ve panel
 * hiçbir zaman sınırlanmıyordu — o yüzden içindeki `overflow:auto` da hiç
 * devreye girmiyor, oyunlar aşağı KAYDIRILAMIYORDU (ölçüldü).
 */
.gl {
  display: grid;
  grid-template-columns: 1fr var(--gl-panel-w);
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
}
/*
 * 🔴 `hidden` ÖZNİTELİĞİNİ GERİ VER (2026-08-22).
 *
 * Yukarıdaki `display: grid` tarayıcının `[hidden] { display: none }` kuralını
 * EZİYOR — yazar kuralı UA kuralını yener. Yani `<div class="gl" hidden>` hiç
 * gizlenmiyordu: belge ilk karede `data-panel` OLMADAN çiziliyor ve mobilde
 * panel (`position: fixed; inset: 0`) tüm ekranı kaplıyordu. `init` gelene
 * kadar (~1 sn) oyuncu BOŞ panel iskeletini görüyor, sonra panel kayboluyor —
 * operatör bildirimi: "menü açılıyor, içeriği boş, tasarım hali, sonra
 * kapanıyor, 1 saniyeliğine oluyor".
 *
 * ⚠️ Bu dosya aynı tuzağı 6 yerde zaten yamamış (`.gl-title[hidden]`,
 * `.gl-recent[hidden]`, `.gl-provpanel[hidden]`, `.gl-standalone[hidden]`,
 * `.glo-btn[hidden]`, `.glo-hata[hidden]`) — kabın kendisi atlanmıştı.
 * Kural `display` veren HER seçici için gerekli.
 */
.gl[hidden] { display: none; }

.gl[data-panel="closed"] { grid-template-columns: 1fr 0; }

/*
 * Panelsiz gömme (mobil). `closed`dan FARKI: aç/kapa düğmesi de yok — panel
 * hiç istenmediğinde oyuncuya onu açacak bir tutamak bırakmak yanlış olur,
 * üstelik listeler yüklenmediği için açılsa boş çıkardı.
 */
.gl[data-panel="yok"] { grid-template-columns: 1fr; }
.gl[data-panel="yok"] .gl-panel { display: none; }

/* ── oyun ───────────────────────────────────────────────────────────────── */
.gl-stage { position: relative; min-width: 0; }

.gl-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/*
 * Yükleme göstergesi KALDIRILDI. Sağlayıcının oyunu kendi açılış ekranını
 * zaten çiziyor; üstüne bizim dönen halkamızı koymak iki ayrı "yükleniyor"
 * ekranı üst üste bindiriyordu. Boşluk `--gl-bg` (kiracının zemini) kalıyor.
 */

/* ── panel ──────────────────────────────────────────────────────────────── */
.gl-panel {
  position: relative;
  min-width: 0;
  min-height: 0;
  border-left: 1px solid rgba(var(--gl-fg), .06);
  background: rgb(var(--gl-bg));
}

.gl-panel__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 10px;
  gap: 10px;
  overflow: hidden;
}
.gl[data-panel="closed"] .gl-panel__inner { display: none; }

/*
 * Aç/kapa düğmesi panelin SOL kenarına taşar (referansta da öyle): panel
 * kapalıyken de tıklanabilir tek şey bu kalmalı, yoksa açmanın yolu kalmaz.
 */
.gl-panel__toggle {
  /*
   * 🔴 İkon ORTALANIYOR. Eskiden `::before` yalnız `margin: 0 auto` ile
   * yatayda ortalanıyordu, dikeyde yoktu: ok düğmenin EN TEPESİNE yapışıyor,
   * köşe yuvarlamasının içinde kayboluyordu. 28×54'lük kenar tutamağında
   * göze batmıyordu; mobilde 36×36'ya inince ikon fiilen görünmez oldu
   * (ölçüldü: `::before` margin `0px 12.33px`, yani üst boşluk 0).
   */
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: -14px;
  width: 28px;
  height: 54px;
  margin-top: -27px;
  padding: 0;
  border: 1px solid rgba(var(--gl-fg), .2);
  border-radius: 14px;
  background: rgba(var(--gl-fg), .1);
  color: rgb(var(--gl-fg));
  cursor: pointer;
  z-index: 3;
}
.gl-panel__toggle::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.gl[data-panel="closed"] .gl-panel__toggle::before { transform: rotate(135deg); }

.gl-tabs {
  display: flex;
  flex: 0 0 auto;
  border-radius: 4px;
  background: rgba(var(--gl-fg), .06);
  overflow: hidden;
}
.gl-tab {
  flex: 1;
  height: 34px;
  border: 0;
  background: none;
  color: rgba(var(--gl-fg), .6);
  font: inherit;
  cursor: pointer;
}
/*
 * Aktif sekme referanstaki gibi DOLU (`--hero` zemin, koyu yazı). Eskiden
 * `--gl-fg`nin %10'uydu: koyu temada iki sekme neredeyse aynı görünüyordu.
 * Yazı rengi zemine göre DEĞİL sabit koyu — `--hero` her kiracıda açık bir
 * vurgu rengi (altın/yeşil), üstüne beyaz yazı okunmazdı.
 */
.gl-tab--active { background: rgb(var(--gl-hero)); color: rgb(var(--gl-bg)); font-weight: 600; }

/* `position: relative`: sağlayıcı listesi bu bölmenin üstünü kaplıyor. */
.gl-tabpane { position: relative; display: none; flex-direction: column; min-height: 0; gap: 8px; }
.gl-tabpane--active { display: flex; flex: 1; }

.gl-search__input {
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  background: rgba(var(--gl-fg), .06);
  color: rgb(var(--gl-fg));
  font: inherit;
}
.gl-search__input::placeholder { color: rgba(var(--gl-fg), .5); }

/* ── son oynananlar ─────────────────────────────────────────────────────── */
.gl-title { flex: 0 0 auto; font-size: 12px; font-weight: 600; opacity: .85; }
.gl-title[hidden] { display: none; }

.gl-recent { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
.gl-recent[hidden] { display: none; }

/*
 * Son oynananlar da `.gl-grid` — aynı 2 sütun, aynı kart ölçüsü. Tek farkı
 * yüksekliğinin SINIRLI olması: `flex: 1` olsaydı alttaki "Tüm Oyunlar"
 * ızgarasıyla yeri paylaşır ve ikisi de daralırdı.
 *
 * ⚠️ Sınır piksel: kart ölçüsü panel genişliğinden geliyor (masaüstünde 90px,
 * dar ekranda 128px), yüzdeyle vermek esnek kapta güvenilir çözülmüyor.
 * Masaüstünde iki sıra görünür, gerisi kaydırılır.
 */
.gl-strip { flex: 0 0 auto; max-height: 190px; }

/*
 * 🔴 `grid-auto-rows: min-content` ŞART — yoksa KARTLAR ÜST ÜSTE BİNER.
 *
 * Ölçüldü (2026-08-16, 24 kart): satırlar 38,25px, kartlar 90px → 42 çift
 * kart birbirinin üstüne bindi. Sebep `.gl-game`daki `overflow: hidden`:
 * kaydırma kabı olan bir kutunun OTOMATİK EN KÜÇÜK BOYU 0'dır, bu yüzden
 * `auto` satır, kartın `aspect-ratio`dan gelen 90px yüksekliğini GÖREMİYOR.
 * Kart yine 90px çiziliyor ama 38px'lik satıra sığmıyor ve taşıyor.
 *
 * `min-content` satırı açıkça kartın en küçük içerik boyuna (= en-boy
 * oranından gelen 90px) sabitliyor. Görselin yüklenip yüklenmemesiyle İLGİSİ
 * YOK — yüklenmiş görselle de ölçüldü, ikisinde de aynı.
 *
 * ⚠️ `overflow: hidden`ı kaldırmak da düzeltiyor ama kartın yuvarlatılmış
 * köşeleri görseli kırpmayı bırakıyor — çözüm o değil.
 *
 * 🔴 `flex: 1` ŞART: sütun yönlü esnek kutuda yalnız `overflow-y:auto` vermek
 * yetmiyor — kutu içeriği kadar BÜYÜYOR, üst kap `overflow:hidden` olduğu için
 * taşan kısım kırpılıyor ve kaydırma çubuğu HİÇ çıkmıyor. Ölçüldü: oyun
 * ızgarası aşağı kaydırılamıyordu. `min-height:0` da şart, yoksa esnek öğenin
 * en küçük boyu içeriği kadar olur ve yine taşar.
 */
.gl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: min-content;
  gap: 4px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  align-content: start;
}

.gl-game {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(var(--gl-fg), .05);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
}
.gl-game__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gl-game__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 4px;
  color: rgba(var(--gl-fg), .7);
  font-size: 11px;
  text-align: center;
}

.gl-wins { flex: 1; min-height: 0; overflow-y: auto; }

/*
 * KAYDIRMA ŞERİDİ (2026-08-22). Panelde üç kutu kayıyor: `.gl-grid`,
 * `.gl-wins`, `.gl-provpanel__list`. Hiçbirine biçim verilmemişti, yani
 * işletim sisteminin VARSAYILAN şeridi çıkıyordu.
 *
 * 🔴 Ölçüldü (1280x800, masaüstü): şerit 15px ve panel 220px — panelin
 * %6.8'i. Üstelik açık gri varsayılan şerit koyu panelin üstünde duruyor.
 * Operatör bildirimi: "sekme çubuğunda aşağı kaydırırken default bir
 * overflow çıkıyor". Referans da tam olarak bunu biçimlendiriyor
 * (`html.browser ::-webkit-scrollbar`, launcher.html).
 *
 * İki yazım birlikte ŞART ve çakışmıyor:
 *  - `scrollbar-width`/`scrollbar-color` standart. Chrome 121+, Firefox, yeni
 *    Safari bunu kullanır.
 *  - `::-webkit-scrollbar` eski WebKit için. Standart özellikler tanınıyorsa
 *    tarayıcı sözde-öğeyi zaten yok sayar. Sözde-öğe kalıtılmaz, ayrı yazılıyor.
 *
 * 🔴 `* ` ŞART: `scrollbar-color` KALITIMLI ama `scrollbar-width` DEĞİL.
 * Yalnız `.gl-panel`e yazınca ölçüldü — `.gl-grid`te renk iniyordu
 * (`rgba(255,255,255,.25) transparent`) ama `scrollbar-width` `auto` kalıyor,
 * yani şerit hâlâ 15px. İkisi aynı bloktaydı, biri sessizce düşüyordu.
 *
 * Mobilde zararsız: dar ekranda şerit zaten üste binen (overlay) türde,
 * yer kaplamıyor.
 */
.gl-panel, .gl-panel * {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--gl-fg), .25) transparent;
}
.gl-panel ::-webkit-scrollbar { width: 6px; height: 6px; }
.gl-panel ::-webkit-scrollbar-track { background: transparent; }
.gl-panel ::-webkit-scrollbar-thumb {
  background: rgba(var(--gl-fg), .25);
  border-radius: 3px;
}

/* ── sağlayıcı seçimi ───────────────────────────────────────────────────── */
.gl-provbtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 4px;
  background: rgba(var(--gl-fg), .06);
  color: rgb(var(--gl-fg));
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.gl-provbtn:hover { background: rgba(var(--gl-fg), .1); }
.gl-provbtn__label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gl-provbtn__chev {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: .7;
}

.gl-provpanel {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgb(var(--gl-bg));
}
.gl-provpanel[hidden] { display: none; }

.gl-provpanel__head { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; }
.gl-provpanel__back {
  height: 30px;
  padding: 0 6px;
  border: 0;
  border-radius: 4px;
  background: rgba(var(--gl-fg), .06);
  color: rgb(var(--gl-fg));
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.gl-provpanel__list { flex: 1; min-height: 0; overflow-y: auto; }

.gl-prov {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: rgba(var(--gl-fg), .8);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.gl-prov:hover { background: rgba(var(--gl-fg), .08); }
.gl-prov--active { background: rgba(var(--gl-accent), .18); color: rgb(var(--gl-fg)); font-weight: 600; }

.gl-win {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  margin-bottom: 5px;
  padding: 8px;
  border-radius: 6px;
  background: rgba(var(--gl-fg), .05);
}
.gl-win__img { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 4px; object-fit: cover; }
.gl-win__img--bos { background: rgba(var(--gl-fg), .08); }
.gl-win__text { flex: 1; min-width: 0; }
.gl-win__name { display: block; font-size: 12px; }
.gl-win__game {
  display: block;
  color: rgba(var(--gl-fg), .6);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gl-win__amount { flex: 0 0 auto; color: rgb(var(--gl-accent)); font-weight: 600; font-size: 12px; }

.gl-more {
  flex: 0 0 auto;
  height: 30px;
  border: 0;
  border-radius: 4px;
  background: rgba(var(--gl-fg), .08);
  color: rgb(var(--gl-fg));
  font: inherit;
  cursor: pointer;
}

.gl-empty { margin: 12px 0; color: rgba(var(--gl-fg), .6); text-align: center; }

.gl-standalone { margin: 40px auto; max-width: 320px; text-align: center; opacity: .7; }
.gl-standalone[hidden] { display: none; }

/*
 * Dar ekran (#261). Panel yandan açılan dar bir çekmece DEĞİL, referanstaki
 * gibi TAM EKRAN bir katman: soldan başlar, oyunun tamamını örter.
 *
 * 🔴 Bir ara `inset: 0 0 0 auto` + `min(280px, 85vw)` ile SAĞDAN açılıyordu.
 * Yanlıştı: referansta `.sidebar-container` `left: 0; width: 100%` ve panel
 * açıldığında ekranda oyun hiç görünmüyor. 280px'lik çekmecede oyun kartları
 * iki sütuna sıkışıp okunmuyordu da.
 */
@media (max-width: 700px) {
  .gl { grid-template-columns: 1fr; }

  .gl-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    border: 0;
    /* Referanstaki gibi yarı saydam + bulanık: altta oyunun durduğu belli olur. */
    background: rgba(var(--gl-bg), .92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    z-index: 10;
  }

  /*
   * 🔴 KAPALIYKEN PANEL TAMAMEN YOK. `width: 0` yetmez: tam ekran katman
   * `position: fixed` olduğu için sıfır genişlikte bile oyunun üstünde durur
   * ve tutamağı ekranın dışına taşırdı (375px'te ölçülmüştü: 361→389,
   * `elementFromPoint` düğmenin ORTASINDA null — açmanın yolu yoktu).
   * Oyun alanı temiz kalıyor; paneli sitenin üst çubuğundaki hamburger açıyor
   * (`gl:panel-set`, bkz. launcher.js).
   */
  .gl[data-panel="closed"] .gl-panel { display: none; }

  /*
   * Tutamak PANELİN İÇİNDE, sağ üstte — referanstaki kapatma (X) ile aynı yer.
   * Masaüstündeki `left: -14px` burada ekranın dışına düşerdi: panel sol
   * kenardan başlıyor, yani -14px negatif koordinat demek.
   */
  .gl-panel__toggle {
    top: 8px;
    left: 8px;
    right: auto;
    width: 36px;
    height: 36px;
    margin-top: 0;
    border-radius: 8px;
  }

  /*
   * Tam ekran katmanda ok DEĞİL kapatma (X) gerekiyor: panel bir çekmece gibi
   * "yana kaymıyor", tamamen kapanıyor. Referansta da X var.
   *
   * `inset: 0; margin: auto` + sabit ölçü = mutlak konumlu kutunun ortalanması;
   * düğmenin kendi flex ortalaması mutlak çocukları hizalamaz.
   */
  .gl-panel__toggle::before,
  .gl-panel__toggle::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px;
    height: 2px;
    border: 0;
    border-radius: 2px;
    background: currentColor;
  }
  .gl-panel__toggle::before { transform: rotate(45deg); }
  .gl-panel__toggle::after { transform: rotate(-45deg); }

  /* Sekmeler tutamağın ALTINDAN başlasın; yoksa üstüne biner. */
  .gl-panel__inner { padding-top: 52px; }
}

/* ── üst seviye oyun sayfası (oyun.html) ────────────────────────────────────
 *
 * Gömülü akışta (index.html) üst çubuğu SİTE çiziyor (`.m-header`). Burada site
 * yok — oyuncu doğrudan bu sekmede, o yüzden geri dönüş ve para yatırma
 * yolunu bu sayfa vermek zorunda.
 *
 * 🔴 Çubuk AKIŞTA (bindirme değil): oyunun üstünü örtmesin. Aynı hata gömülü
 * tarafta yaşandı ve geri alındı — operatör "oyunun yukarısı kesiliyor" dedi.
 * Yükseklik SAYIYLA oyuna yazılmıyor; kap flex sütun, oyun `flex: 1` alıyor.
 *
 * ⚠️ `100dvh` (`100vh` DEĞİL): mobil tarayıcıların adres çubuğu kayarken
 * `100vh` viewport'u taşırır ve oyunun altı kesilir.
 */
.glo {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

.glo-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 8px;
  background: rgb(var(--gl-bg));
}

.glo .gl-stage { flex: 1 1 auto; min-height: 0; }

.glo-baslik { flex: 1 1 auto; font-size: 14px; font-weight: 600; text-align: center; min-width: 0; }

/*
 * Kiracı logosu — sabit "Oyun" yazısının yerini aldı (istek 2026-08-27).
 *
 * ⚠️ Yükseklik ÇUBUĞA GÖRE sınırlı, görselin kendi boyuna göre DEĞİL:
 * kiracıların `logo_url`u serbest ölçüde (ölçüldü: 200×60'lık markasız yedekten
 * 1000px genişlikteki webp'lere kadar). Sınırsız bırakılsaydı tek bir büyük
 * logo çubuğu ve altındaki oyun sahnesini aşağı iterdi.
 *
 * `object-fit: contain` + `max-width` en-boy oranını korur; `vertical-align`
 * satır kutusunun altındaki 4px boşluğu keser (aksi hâlde çubuk 46px'i aşar).
 */
.glo-logo {
  max-height: 26px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
}

/*
 * casiwon logosu büyük (istek 2026-10-08). Logosu 960×540'lık bir GIF ve
 * görünen kısmı yalnız ortadaki %42 (y 104–329); üstü ve altı SAYDAM. 26px'te
 * logonun kendisi ~11px kalıyordu.
 *
 * 63px'lik görsel 46px'lik çubuğa sığmaz: kap çubuğun yüksekliğinde ve
 * `overflow: hidden` — kırpılan yalnız saydam şeritler, logo değil, ve hiçbir
 * şey oyunun üstüne taşmıyor.
 *
 * 🔴 YALNIZ casiwon: logosu sıkı kırpılmış bir markada 63px kuralı logonun
 * KENDİSİNİ keserdi. Kanca `oyun.js`te izin listesinden geçmiş site adresi
 * (`data-site-host`); casiwon'un bütün adresleri (casiwonNNN.com, casiwon.vip)
 * "casiwon" taşıyor.
 */
html[data-site-host*="casiwon"] .glo-baslik {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  overflow: hidden;
}
/* Görünen kısmın ortası görselin ortasından ~6px yukarıda (216/540 vs 270/540
 * × 63px) — kaydırma logonun KENDİSİNİ çubukta ortalıyor. */
html[data-site-host*="casiwon"] .glo-logo { max-height: 63px; transform: translateY(6px); }

.glo-btn {
  flex: 0 0 auto;
  min-width: 34px;
  height: 30px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(var(--gl-fg), .08);
  /* 🔴 `color` ŞART: çıplak `<button>` rengi miras ALMAZ, tarayıcı siyah verir
   * ve koyu zeminde ok görünmez. Aynısı sitenin oyun çubuğunda da yaşandı. */
  color: rgb(var(--gl-fg));
  font: inherit;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.glo-btn[hidden] { display: none; }
.glo-btn--vurgu { background: rgb(var(--gl-accent)); color: rgb(var(--gl-bg)); font-weight: 600; }

/*
 * Hamburger, kaldırılan GERİ düğmesinin yerine geçti ve büyütüldü
 * (2026-08-24). Ölçüler çubuğa göre: `.glo-bar` 46px, 36px'lik düğme altta ve
 * üstte 5'er piksel bırakıyor — daha yükseği çubuğa yapışırdı.
 *
 * `line-height: 1` ŞART: `font: inherit` gövdeden 1.4 satır yüksekliği
 * getiriyor, 20px'lik glifte bu 28px'lik bir satır kutusu demek ve ☰ düğmenin
 * dikey ortasından aşağı kayıyor (`align-items: center` satır KUTUSUNU
 * ortalıyor, glifi değil).
 */
#glo-menu {
  min-width: 40px;
  height: 36px;
  font-size: 20px;
  line-height: 1;
}

/* Oyun açılamadığında sahneyi kaplar (akışta dursa `100dvh`in altına düşer). */
.glo-hata {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  background: rgb(var(--gl-bg));
  z-index: 3;
}
.glo-hata[hidden] { display: none; }