/* ==================================================================
   GECCEBET · STUDYOLAR, ARAMA SONUCLARI
   app.css ve casino.css'ten SONRA yuklenir. Sayfa basligi, sonuc
   satiri ve bos durum onlardan geliyor; burada yalniz bu iki
   sayfaya ait olanlar var.
   ================================================================== */


/* ==================================================================
   STUDYOLAR
   LOGO YUVASI, LOGO DEGIL. Studyo logolari birbirinden cok farkli
   geliyor: kimi genis bir yazim, kimi kare bir amblem; kimi tek
   renk beyaz, kimi tam renkli. Hepsini ayni kutuya sokmanin tek
   saglam yolu SABIT YUKSEKLIKLI bir plaka ve object-fit: contain -
   logo kutuyu doldurmaya calismiyor, kutunun icine oturuyor.
   ================================================================== */

.st-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.st {
  display: grid;
  gap: 12px;
  padding: 20px 18px 16px;
  border-radius: var(--r);
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, .022);
  text-align: center;
  transition: border-color var(--t), background var(--t), transform var(--t);
}
.st:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 138, 146, .32);
  background: rgba(255, 255, 255, .05);
}

/* Plakanin yuksekligi SABIT. Logolarin oranlari tutmuyor; sabit
   yukseklik olmadan izgara satir satir ziplar. */
.st-mark {
  display: grid;
  place-items: center;
  height: 54px;
}
.st-mark img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* Renkli logolar koyu zeminde bazen okunmuyor; hafif bir
     parlaklik artisi hepsini ayni dunyaya cekiyor. Logo beyazsa
     zaten hicbir sey degismiyor. */
  filter: brightness(1.06);
}

/* Logo gelene kadar plakada studyonun ADI yaziyor. Yedek degil,
   BILEREK: bos bir kutu "gorsel yuklenmedi" gibi duruyor, ad yazan
   bir plaka calisiyor. */
.st-word {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: var(--tx);
}
.st-n { font-size: 12.5px; font-weight: 300; color: var(--tx-3); }
.st-n b { font-weight: 700; color: var(--tx-2); font-variant-numeric: tabular-nums; }

/* En cok oynanan dordu hafifce one cikiyor. Rozet DEGIL: kart
   basina en fazla bir vurgu kurali burada da gecerli ve burada o
   vurgu cercevenin kendisi. */
.st.is-top { border-color: rgba(255, 138, 146, .22); background: rgba(255, 138, 146, .05); }


/* ==================================================================
   ARAMA SONUCLARI
   ================================================================== */

.sr-form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 620px;
  margin-top: 6px;
}
.sr-ico {
  position: absolute;
  inset-inline-start: 16px;
  width: 17px; height: 17px;
  color: var(--tx-3);
  pointer-events: none;
}
.sr-form input {
  flex: 1;
  min-width: 0;
  padding: 13px 16px;
  padding-inline-start: 44px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  color: var(--tx);
  font: inherit;
  font-size: 15px;
}
.sr-form input::placeholder { color: var(--tx-3); }
.sr-form input:focus {
  outline: none;
  border-color: rgba(255, 138, 146, .45);
  background: rgba(255, 255, 255, .05);
}
.sr-form input::-webkit-search-cancel-button { -webkit-appearance: none; }
.sr-form .btn { flex: none; }

/* Studyo ve kategori eslesmeleri oyunlardan ONCE ve ayri: kisi
   "pragmatic" yazdiginda aradigi sey bir oyun degil, o studyonun
   butun oyunlari. */
.sr-jump {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0 0;
  border-top: 1px solid var(--line-soft);
}
.sr-jump-k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(245, 244, 236, .68);
  margin-inline-end: 4px;
}
.sr-jump .chip-nav {
  border: 1px solid var(--line);
  padding: 7px 14px;
  font-size: 13px;
}


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

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

@media (max-width: 620px) {
  .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .st { padding: 16px 14px 14px; }
  .st-mark { height: 44px; }
  .st-word { font-size: 14px; }
}

@media (max-width: 430px) {
  .sr-form { flex-wrap: wrap; }
  .sr-form input { flex: 1 0 100%; }
  .sr-form .btn { width: 100%; }
}