/* ==================================================================
   GECCEBET · CASINO LOBISI
   app.css'ten SONRA yuklenir. Yalniz bu sayfaya ait olan seyler
   burada. Oyun karti (.gcard), chip (.chip-nav), acilir liste (.pop)
   ve dugmeler app.css'ten geliyor - lobi kendi karti icat etmiyor.
   ================================================================== */


/* ==================================================================
   FILTRE CUBUGU
   Basligin altina YAPISIYOR. Bir lobide kullanici asagi indikce
   filtre ihtiyaci artiyor; her seferinde yukari donmek zorunda
   kalmasin diye.
   ================================================================== */

.fbar {
  position: sticky;
  top: var(--hd);
  z-index: 40;                       /* baslik 50, cekmece 90 */
  margin-top: 30px;
  /* Kenardan kenara bir bant: sayfa iceriginin uzerinden gecerken
     altindaki kartlarin ucu gorunmesin. */
  background: rgba(29, 14, 9, .88);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-block: 1px solid var(--line-soft);
}

.fbar-in {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 12px;
}

/* Chip rayi KAYIYOR. Dokuz kategori dar ekranda alt alta sarsa
   cubuk uc satira cikip iceriğin yarisini kapatiyordu. */
.fbar-chips {
  display: flex;
  gap: 6px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 94%, transparent 100%);
}
/* Solma DEVAMIN oldugu tarafta olmali. RTL'de ray sola dogru
   kayiyor, yani sonu solda; maskeyi cevirmezsek Divehi'de baslangic
   kenari soluyor ve aktif kategori yariya kadar silik duruyor.
   Maske mantiksal ozellik kabul etmiyor, o yuzden acikca ceviriyoruz. */
[dir="rtl"] .fbar-chips {
  -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 94%, transparent 100%);
          mask-image: linear-gradient(270deg, #000 0%, #000 94%, transparent 100%);
}

.fbar-tools { display: flex; align-items: center; gap: 8px; flex: none; }


/* ---------------- Sayfa ici arama ----------------
   Baslikdaki buyutec butun siteyi ariyor. Burada kisi zaten "oyun
   ariyorum" modunda; ustune bir katman acmak fazladan bir adim. */
.fbar-q {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
}
.fbar-q-ico {
  position: absolute;
  inset-inline-start: 12px;
  width: 15px; height: 15px;
  color: var(--tx-3);
  pointer-events: none;
}
.fbar-q input {
  width: 196px;
  padding: 9px 14px;
  padding-inline-start: 35px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  color: var(--tx);
  font: inherit;
  font-size: 13.5px;
  transition: border-color var(--t), width var(--t), background var(--t);
}
.fbar-q input::placeholder { color: var(--tx-3); }
.fbar-q input:focus {
  outline: none;
  width: 236px;
  border-color: rgba(255, 138, 146, .4);
  background: rgba(255, 255, 255, .05);
}
/* Tarayicinin kendi temizleme carpisi koyu zeminde gorunmuyor. */
.fbar-q input::-webkit-search-cancel-button { -webkit-appearance: none; }


/* ---------------- Siralama ----------------
   Gercek bir <select>: dokunmatikte isletim sisteminin kendi
   tekerlegi aciliyor ve klavye tarafi bedava geliyor. Kendi
   acilir listemizi yazmak burada hicbir sey kazandirmiyordu. */
.fbar-sort { position: relative; display: flex; align-items: center; gap: 8px; }
.fbar-sort select {
  appearance: none;
  -webkit-appearance: none;
  /* Mantiksal dolgu: 34px'lik bosluk caret'in durdugu kenarda
     olmali. Fiziksel yazilinca RTL'de caret sola, bosluk saga
     dusuyordu ve ok secili degerin uzerine biniyordu. */
  padding-block: 9px;
  padding-inline: 15px 34px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  color: var(--tx-2);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--t), color var(--t);
}
.fbar-sort select:hover { border-color: rgba(255, 138, 146, .34); color: var(--tx); }
/* Acilir listenin kendisi tarayicinin: koyu zemin gelsin diye
   secenekleri de boyuyoruz, yoksa Windows'ta beyaz uzerine beyaz. */
.fbar-sort option { background: #2c150f; color: #f5f4ec; }
.fbar-sort-caret {
  position: absolute;
  inset-inline-end: 78px;
  width: 11px; height: 8px;
  color: var(--tx-3);
  pointer-events: none;
}
/* Script varken secim aninda gonderiliyor ve bu dugme gizleniyor;
   scriptsiz kalirsa gorunur ve tek calisan yol o oluyor.
   [hidden] acikca yaziliyor: .btn ailesi display: inline-flex
   tasiyor ve tarayicinin [hidden] kuralini eziyor. */
.fbar-go { flex: none; }
.fbar-go[hidden] { display: none; }

/* Genis ekranda secili siralamanin adi zaten yaziyor; ok ve "Sort"
   etiketi yalniz dar ekranda, ad gizlenince gorev aliyor. */
.fbar-updown,
.fbar-sort-label { display: none; }
.fbar-sort[data-js] .fbar-sort-caret { inset-inline-end: 14px; }


/* ==================================================================
   SONUC SATIRI
   Filtre acildiginda ekranin neyi gosterdigini YAZIYLA da soylemek
   gerekiyor: yalniz izgaranin degismesi "filtre calisti mi"
   sorusunu birakiyor.
   ================================================================== */

.res-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-bottom: 20px;
}
/* --tx-2 (.62) idi. Ic sayfada hero olmadigi icin su sutununun
   en ACIK ust bandi gorunuyor ve orada 4.34:1'e dusuyordu. */
.res-n { margin: 0; font-size: 14.5px; font-weight: 300; color: rgba(245, 244, 236, .74); }
.res-n b { font-weight: 700; color: var(--tx); font-variant-numeric: tabular-nums; }
/* --tx-4 degil: ic sayfanin acik ust bandinda 4.15:1'de kaliyordu. */
.res-of { color: var(--tx-3); }

.res-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-inline-start: auto;
}

/* Etiket kendini kaldiran bir LINK, buton degil: script olmadan da
   calissin diye capraz isaret filtresiz adrese gidiyor. */
.res-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 138, 146, .28);
  background: rgba(255, 138, 146, .08);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--aqua-soft);
  transition: background var(--t), border-color var(--t);
}
.res-tag:hover { background: rgba(255, 138, 146, .15); border-color: rgba(255, 138, 146, .45); }
.res-tag svg { width: 12px; height: 12px; flex: none; }

.res-clear { font-size: 12.5px; font-weight: 600; color: var(--tx-3); }
.res-clear:hover { color: var(--tx); }


/* ==================================================================
   IZGARA
   Anasayfadaki 5'li ray degil, gercek bir izgara: lobide amac
   gezdirmek degil BULMAK, o yuzden satirlar dolu.

   Sutun sayisi ACIKCA yaziliyor. Once auto-fill + minmax vardi ve
   daha zarifti; ama olculdugunde 560px'te uc sutun, 620px'te IKI
   sutun veriyordu - ekran genisledikce kart sayisi azaliyordu.
   Sebep, dar ekran icin dusurulen minimum ile normal minimumun
   arasindaki sicrama. Boyle bir hatayi gozle yakalamak zor,
   kullanici da "sayfa bozuldu" diye okuyor. Acik sutun sayisi
   daha uzun ama her olcude ne oldugu belli.
   ================================================================== */

/* Sablon v2 (2026-09-23): kart yeniden DIKEY (.72, arsenal.css "ORTAK
   DIKEY OYUN KARTI"); sablonun slot izgarasi gibi alti sutun, 11px
   aralik (Desktop/index/slot.css 28). 6 / 4 <=1180 / 3 <=760. Dar ekranda
   sablon yatay ray yapiyor; burasi "daha fazla"li katalog izgarasi, ray
   degil - uc sutunda kalir (kart ~110px, dikey poster okunur).
   (Onceki yatay 4:3 kartta 5 / 4 / 3 / 2 idi.) */
.grid-gm {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 11px;
}


/* ==================================================================
   DAHA FAZLA
   SONSUZ KAYDIRMA YOK. Sonsuz kaydirma footer'i ulasilamaz yapiyor
   (destek, lisans ve sorumlu oyun linkleri orada), geri tusundan
   donunce listeyi bastan basliyor ve "kac oyun kaldi" hissini
   olduruyor. Acik bir dugme daha yavas ama kullanicinin elinde.
   ================================================================== */

/* ==================================================================
   BOS DURUM
   Bos bir izgara ve tek satirlik "No results" kullaniciyi cikmaza
   sokuyor. Buradaki iki cikis aramanin nereden devam edecegini
   soyluyor.
   ================================================================== */

.nores {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 10px;
  padding: 58px 24px 62px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(255, 138, 146, .07), transparent 62%),
    var(--panel);
}
.nores-ico {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin-bottom: 4px;
  border-radius: 50%;
  border: 1px solid rgba(255, 138, 146, .22);
  background: rgba(255, 138, 146, .07);
  color: var(--aqua-soft);
}
.nores-ico svg { width: 22px; height: 22px; }
.nores-t { margin: 0; font-size: clamp(21px, 2.4vw, 27px); }
.nores-n { margin: 0; font-size: 14px; font-weight: 300; color: var(--tx-2); }
.nores-go { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }


/* ==================================================================
   DAR EKRAN
   ================================================================== */

@media (max-width: 1180px) {
  /* Siralama KAYBOLMUYOR, kuculuyor. Once komple gizliyordu ve
     ekran biraz daralinca "Most played / Newest" secenegi ortadan
     kalkiyordu; cubuk da yarim kalmis gibi duruyordu. Simdi secili
     siralamanin adi gidiyor, yerine iki yonlu ok ve "Sort" kaliyor:
     alan kazaniliyor, secenek duruyor.
     Secim yine gercek <select>, uzerine seffaf olarak biniyor -
     dokunmatikte isletim sisteminin tekerlegi, klavyede normal
     acilir liste. */
  .fbar-sort { gap: 0; }
  .fbar-sort::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .03);
    pointer-events: none;
  }
  .fbar-sort-label {
    display: block;
    position: absolute;
    inset-inline-start: 32px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tx-2);
    white-space: nowrap;
    pointer-events: none;
  }
  .fbar-sort select {
    width: 78px;
    padding: 9px 0;
    border-color: transparent;
    background: none;
    color: transparent;
    text-indent: -9999px;          /* secili deger yerine "Sort" gorunuyor */
  }
  .fbar-sort option { color: #f5f4ec; text-indent: 0; }
  /* Caret yerine iki yonlu ok: burada acilir liste degil SIRALAMA
     oldugunu soyluyor. */
  .fbar-sort-caret { display: none; }
  .fbar-sort .fbar-updown {
    display: block;
    position: absolute;
    inset-inline-start: 12px;
    width: 13px; height: 13px;
    color: var(--tx-3);
    pointer-events: none;
  }

  .grid-gm { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .fbar-in { flex-wrap: wrap; gap: 10px; }
  /* Ray tam genislige cikiyor, araclar altina. Yan yana kalirsa
     dokuz kategoriden ikisi gorunuyor. */
  .fbar-chips { flex: 1 0 100%; order: 1; }
  .fbar-tools { order: 2; width: 100%; }
  .fbar-q { flex: 1; }
  .fbar-q input,
  .fbar-q input:focus { width: 100%; }

  .res-head { gap: 10px 14px; }
  .res-tags { margin-inline-start: 0; width: 100%; }

  .grid-gm { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Uc arac tek satirda sigmiyor: arama kutusu "Search tab..." diye
   kesiliyordu. Arama kendi satirina, digerleri altina. */
@media (max-width: 560px) {
  .fbar-tools { flex-wrap: wrap; }
  .fbar-q { flex: 1 0 100%; }
  .fbar-tools .pop-wrap { flex: 1; }
  .fbar-tools .pop-wrap .disco-btn { width: 100%; justify-content: space-between; }
  .fbar-sort { flex: 1; }
  .fbar-sort select { width: 100%; }

  /* Sablonun dar ekran araligi (slot.css 44/48: 7px / 6px). */
  .grid-gm { gap: 7px; }

  /* Dar ekranda oyun adlarinin cogu tek satira sigmiyor: "Sweet
     Bonanz...", "Fire in the Hol...". Lobide amac BULMAK; hangi oyun
     oldugunu okuyamayan kullanici icin kart bos bir renk. Iki satira
     izin veriyoruz - meta seridi gorselin altinda, kart bir satir kadar
     uzuyor. Yazi boyu ortak kartin dar ekran boyu (arsenal.css).
     YALNIZ lobi izgarasinda: anasayfadaki raylarda tek satir dogru
     duruyor. */
  .grid-gm .gcard-meta b {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .more-btn { width: 100%; min-width: 0; }
  .nores { padding: 44px 20px 48px; }
}


/* ==================================================================
   ONIZLEME ISARETI
   Yalniz teslim paketinde var. Entegrasyonda hem bu kural hem de
   .prev-note tasiyan satirlar SILINECEK - canlida boyle bir sey
   olmayacak. Burada duruyor cunku bos durum ekrani baska turlu
   gorulemiyordu ve isaretsiz birakilirsa "sayfada iki sonuc bloku
   var" gibi okunuyor.
   ================================================================== */
.prev-note {
  margin: 0 0 12px;
  padding: 7px 13px;
  border-radius: 8px;
  border: 1px dashed rgba(255, 115, 95, .38);
  background: rgba(255, 115, 95, .07);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #ffb59f;
}