/* BUNGEE — slot bölümünün "tabela" yüzü.
 *
 * Inter iyi bir arayüz fontu ama kabinde YAZILIM gibi duruyordu.
 * Bungee bir tabela/işaret yüzü; yalnızca başlık, kredi ve kazanç
 * rakamlarında kullanılıyor, gövde metni Inter kalıyor.
 *
 * Lisans: SIL OFL 1.1 (ticari kullanım serbest). Tam metin
 * `fonts/BUNGEE-OFL.txt`, kaynak `fonts/CREDITS.md`.
 *
 * İKİ ALT KÜME BİRDEN gerekiyor. Ölçüldü: `latin`de ğ/Ğ/İ/ş/Ş yok,
 * `latin-ext`te ç/Ç/ı/ö/Ö/ü/Ü yok. Tek dosya yükleseydik "Çevir"
 * ya da "Bahşiş" gibi kelimelerde harfler başka fonta düşer ve yazı
 * ortasında yüz değişirdi. `unicode-range` ile tarayıcı harf başına
 * doğru dosyayı seçiyor — Inter için de aynı düzen kurulu.
 */
@font-face {
  font-family: 'Bungee'; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/bungee-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bungee'; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/bungee-latin-400-normal.woff2') format('woff2');
}

/* SLOT BÖLÜMÜ — kendi dosyası.
 *
 * `style.css`e karışmıyor: slot renkleri kasten oyunun geri kalanından
 * daha parlak ve doygun. Aynı dosyaya koysaydık masa oyunlarının sakin
 * paleti ile buranın neon paleti birbirine sızardı.
 *
 * Tema renkleri `data-tema` üzerinden geliyor; yeni bir makine
 * eklemek için burada bir blok açmak yetiyor.
 */

.slot-govde {
  --slot-1: #2a1f4e;
  --slot-2: #17102e;
  --slot-vurgu: #ffd23f;
  --slot-kenar: rgba(255, 210, 63, .35);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- makine seçici ---- */

.slot-secici { display: flex; gap: 10px; flex-wrap: wrap; }

.slot-kart {
  flex: 1 1 180px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, #1b2430, #141b25);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: transform .12s, border-color .12s;
}
.slot-kart:hover { transform: translateY(-2px); }
.slot-kart.secili {
  border-color: var(--slot-vurgu);
  box-shadow: 0 0 0 2px rgba(255, 210, 63, .45), 0 0 22px rgba(255, 210, 63, .3);
}
/* Seçili kartta bakışta belli olan "▶ PLAYING" rozeti — özellikle
   telefonda hangi oyunu seçtiğin belirsiz kalıyordu. */
.slot-kart.secili::after {
  content: "▶ PLAYING";
  position: absolute;
  top: 8px; right: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--slot-vurgu);
  color: #241a02;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}
/* Kart seçildiğinde kısa "pop" — dokunuşun işe yaradığını gösterir. */
.slot-kart.secildi-vurgu {
  animation: slot-kart-pop .45s cubic-bezier(.2, 1.6, .4, 1);
}
@keyframes slot-kart-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); box-shadow: 0 0 0 3px var(--slot-vurgu), 0 0 30px rgba(255, 210, 63, .55); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .slot-kart.secildi-vurgu { animation: none; }
}
.slot-kart-ad { font-weight: 700; font-size: 1rem; }
.slot-kart-alt { font-size: .78rem; color: var(--text-dim); }
/* Kit logosu kartın yüzü: kuru isim yerine oyunun kendi tabelası. */
.slot-kart-logo {
  width: 100%; max-width: 260px; height: auto; margin-bottom: 4px;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5));
}
/* LOBİ AFİŞİ — 9 oyunun tek stilde üretilmiş kartı (adı, teması ve
   sembolleri gömülü). Kart artık afişin kendisi; çerçeve ve kenarlık
   afişte olduğu için buton sade duruyor. */
.slot-kart-lobi {
  padding: 0; gap: 0; border: none; background: none;
  overflow: visible;
}
.slot-kart-lobi:hover { transform: translateY(-3px); }
.slot-kart-afis {
  width: 100%; height: auto; display: block; border-radius: 14px;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55));
  transition: filter .15s;
}
.slot-kart-lobi .slot-kart-alt { margin-top: 8px; }
.slot-kart-lobi.secili { box-shadow: none; }
.slot-kart-lobi.secili .slot-kart-afis {
  filter: drop-shadow(0 0 0 3px var(--slot-vurgu))
          drop-shadow(0 0 18px rgba(255, 210, 63, .55));
}
.slot-kart-lobi.secildi-vurgu { animation: slot-kart-pop .45s cubic-bezier(.2, 1.6, .4, 1); }
.slot-kart {
  align-items: center; text-align: center;
  padding: 14px 16px; overflow: hidden; position: relative;
}
.slot-kart[data-tema="gold"] { background: linear-gradient(160deg, #2a1e0a, #140d04); }
.slot-kart[data-tema="misir"] { background: linear-gradient(160deg, #0c2a28, #06110f); }
.slot-kart[data-tema="gold"].secili { background: linear-gradient(160deg, #4a3512, #241806); }
.slot-kart[data-tema="misir"].secili { background: linear-gradient(160deg, #12403c, #0a1d1d); }
.slot-kart:disabled { opacity: .55; cursor: default; }
.slot-kart:disabled:hover { transform: none; }

/* ---- sahne ---- */

/* SAHNE — "içine alan" his buradan geliyor.
 *
 * Düz bir koyu zemin yerine üç katman: derin renk gradyanı, ARKADA
 * yavaşça dönen ışık huzmeleri ve kenarlarda vinyet. Referans
 * görseldeki neon kabin hissinin çoğu bu üç katmanda; sembolleri
 * yeniden çizmeden alınabilen en büyük kazanç buydu.
 */
.slot-sahne {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 22px;
  padding: 18px;
  border: 1px solid var(--slot-kenar);
  background:
    radial-gradient(120% 90% at 50% -10%, var(--slot-1), var(--slot-2) 72%);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .55),
              inset 0 1px 0 rgba(255, 255, 255, .07);
}
/* Işık huzmeleri. `conic-gradient` + yavaş dönüş: hareketli ama
   dikkat dağıtmayacak kadar yavaş (28 sn tam tur). */
.slot-sahne::before {
  content: "";
  position: absolute;
  inset: -60%;
  z-index: -2;
  background: conic-gradient(from 0deg,
    transparent 0deg, var(--slot-isik) 12deg, transparent 26deg,
    transparent 60deg, var(--slot-isik-2) 72deg, transparent 88deg,
    transparent 140deg, var(--slot-isik) 152deg, transparent 168deg,
    transparent 230deg, var(--slot-isik-2) 242deg, transparent 258deg,
    transparent 320deg, var(--slot-isik) 332deg, transparent 348deg);
  opacity: .5;
  animation: slot-huzme 28s linear infinite;
}
@keyframes slot-huzme { to { transform: rotate(360deg); } }
/* Vinyet: kenarları karartıp gözü ortadaki makaraya çekiyor. */
.slot-sahne::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(75% 65% at 50% 45%,
              transparent 40%, rgba(0, 0, 0, .55) 100%);
}
.slot-sahne[data-tema="gold"] {
  --slot-1: #6e4a12; --slot-2: #1a1008;
  --slot-isik: rgba(255, 196, 63, .55);
  --slot-isik-2: rgba(255, 140, 40, .40);
}
.slot-sahne[data-tema="misir"] {
  --slot-1: #0f5a52; --slot-2: #08160f;
  --slot-isik: rgba(80, 220, 200, .5);
  --slot-isik-2: rgba(255, 200, 70, .42);
}
@media (prefers-reduced-motion: reduce) {
  .slot-sahne::before { animation: none; }
}

.slot-tepe {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
/* Başlık Inter kalıyor — parıltısı var ama yüzü değişmiyor.
   Bungee denendi ve TÜRKÇEDE BOZUYOR: küçük harfi yok, "Bahçesi"
   ekranda "BAHÇESI" çıkıyor, yani i'nin noktası kayboluyor.
   Türkçede İ ile I ayrı harf; bu yazım hatası. Bungee bu yüzden
   yalnızca BÜYÜK HARF ya da RAKAM olan yerlerde kullanılıyor. */
.slot-baslik h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--slot-vurgu);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 0 18px var(--slot-neon, transparent);
}
.slot-baslik p { margin: 2px 0 0; font-size: .82rem; color: var(--text-dim); }

.slot-etiket {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-dim);
}
.slot-kredi-kutu {
  display: flex; flex-direction: column; align-items: flex-end;
  padding: 6px 16px; border-radius: 12px;
  background: rgba(0, 0, 0, .35); border: 1px solid var(--slot-kenar);
}
.slot-kredi-kutu b {
  font-family: 'Bungee', 'Inter', system-ui, sans-serif;
  font-size: 1.42rem; color: var(--slot-vurgu);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 14px rgba(255, 210, 63, .5);
}

/* ---- makaralar ---- */

/* HÜCRE BOYU HEM ENE HEM BOYA BAĞLI OLMALI.
 *
 * İlk yazışımda hücreye `aspect-ratio: 1` verip sütunları `1fr`
 * yapmıştım. Sonuç TERS bir davranıştı — boy tamamen ENE bağlı
 * kalınca ekran genişledikçe makara UZUYOR. Ölçüldü:
 *
 *     1366x768  → hücre 194px, makara  623px, ÇEVİR 212px aşağıda
 *     1920x1080 → hücre 305px, makara  956px, ÇEVİR 233px aşağıda
 *     2560x1440 → hücre 433px, makara 1340px, ÇEVİR 261px aşağıda
 *
 * Yani ekran büyüdükçe daha beter oluyordu.
 *
 * Sınır ÇERÇEVENİN ENİNE konuyor, hücreye değil. İlk düzeltmemde
 * hücreye `min(%, vh)` yazdım ve çalışmadı: aynı `100%` bir yerde
 * ızgaranın enine, başka yerde hücrenin kendi kutusuna çözülüyor —
 * iki farklı sayı, sonuç hep tabana düşüyordu (ölçüldü: her ekranda
 * 56px). Yüzde yerine tek anlamı olan bir ölçü gerekiyordu.
 */
.slot-cerceve {
  --ara: 8px;
  /* Sahne dışındaki dikey maliyet: sayfa başlığı, makine seçici,
     sahne başlığı, mesaj satırı, bahis paneli, alt şerit ve
     boşluklar. Ölçülerek bulundu, tahmin değil. */
  --cevre: 430px;
  /* Boyun izin verdiği hücre. Tavan 160px: 4K'da gereksiz büyümesin.
     Taban 56px: altında sembol okunmuyor, kaydırmak daha iyi. */
  --hucre-boy: clamp(56px, calc((100vh - var(--cevre)) / 3), 160px);
  /* Çerçeve bundan geniş olamaz, dolayısıyla hücre de boyun izin
     verdiğinden büyüyemez. Dar ekranda zaten enden küçülüyor. */
  max-width: calc(5 * var(--hucre-boy) + 4 * var(--ara)
                  + 2 * 10px + 2 * 2px);
  margin-inline: auto;
  border-radius: 18px;
  padding: 12px;
  /* KABİN. Tek bir kenarlık yerine üst üste gölgeler: dıştan içe
     altın kenar → koyu gövde → içeride neon halka → derin iç gölge.
     Metal hissi tek bir `border` ile çıkmıyor, katman gerekiyor. */
  background:
    linear-gradient(180deg, #12080a, #05030a) padding-box,
    linear-gradient(160deg, #ffe9a8, #c98b00 28%, #6d4a00 52%,
                    #c98b00 74%, #ffe9a8) border-box;
  border: 4px solid transparent;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .7),
    0 0 26px var(--slot-neon, rgba(255, 210, 63, .38)),
    inset 0 0 0 2px rgba(0, 0, 0, .55),
    inset 0 0 34px rgba(0, 0, 0, .8);
  position: relative;
}
.slot-sahne[data-tema="gold"] .slot-cerceve {
  --slot-neon: rgba(255, 190, 90, .45);
}
.slot-sahne[data-tema="misir"] .slot-cerceve {
  --slot-neon: rgba(90, 220, 200, .45);
}
.slot-izgara {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--ara);
  /* Açık sıra: makaralar en altta, altın üstünde, rakam en üstte.
     Belirsiz bıraksaydık kazanan kutunun `z-index: 1`i ile
     yarışırlardı. */
  position: relative;
  z-index: 0;
}
.slot-makara {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: var(--ara);
  /* Dönerken taşan sembolleri kırpıyor: gerçek makara gibi. */
  overflow: hidden;
  border-radius: 10px;
}
.slot-kutu {
  position: relative;
  display: grid;
  place-items: center;
  /* Kare oran burada kalıyor: hücrenin BÜYÜKLÜĞÜNÜ çerçevenin
     `max-width`i sınırlıyor, biçimini bu satır veriyor. */
  aspect-ratio: 1;
  border-radius: 12px;
  padding: 9px;
  /* Karo artık düz değil: üstten aydınlık, altta koyu, kenarda ince
     bir kabartma. Sembol de gölge alıyor — ikisi birlikte "yüzeyin
     üstünde duran nesne" hissi veriyor. */
  background:
    linear-gradient(168deg, #fffdf6 0%, #f4ecdb 45%, #ddd0b6 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .95),
    inset 0 -4px 0 rgba(120, 96, 56, .22),
    inset 0 0 0 1px rgba(120, 96, 56, .18),
    0 2px 4px rgba(0, 0, 0, .35);
  overflow: hidden;
}
/* Cam parlaması: sol üstten geçen diyagonal ışık. */
.slot-kutu::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(150deg,
    rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .1) 34%,
    transparent 52%);
}
.slot-kutu svg, .slot-gorsel {
  width: 100%; height: 100%; display: block; object-fit: contain;
  /* Sembolü zeminden ayıran gölge. Tek satır ama farkı büyük:
     semboller düz çıkartma gibi durmaktan çıkıyor. */
  filter: drop-shadow(0 2px 2px rgba(60, 40, 10, .38));
}
.slot-bilinmez { font-size: .6rem; color: #666; }

/* Dönerken belirgin dikey hareket + bulanıklık: eskiden yalnızca
   1px blur vardı ve dönüş "görünmüyordu". */
.slot-makara.donuyor {
  filter: blur(2px);
  animation: slot-spin .13s linear infinite;
}
@keyframes slot-spin {
  0% { transform: translateY(-9%); }
  100% { transform: translateY(9%); }
}
.slot-makara.durdu { animation: slot-carp .32s cubic-bezier(.2, 1.4, .5, 1); }
@keyframes slot-carp {
  0% { transform: translateY(-14px); }
  55% { transform: translateY(4px); }
  100% { transform: translateY(0); }
}

/* Kazanan kutu, sembolün KENDİ rengiyle parlıyor (`--sem`). Tek bir
   altın hâle de olurdu ama 15 kutunun arasında hangi sembolün
   kazandığını renk daha hızlı söylüyor. */
.slot-kutu.kazanan {
  box-shadow: 0 0 0 3px var(--sem), 0 0 18px var(--sem);
  animation: slot-yanip 900ms ease-in-out infinite alternate;
  z-index: 1;
}
@keyframes slot-yanip {
  from { filter: brightness(1); }
  to { filter: brightness(1.25); }
}

/* Hareket hassasiyeti olan kullanıcı için: yanıp sönme ve zıplama
   kapanıyor, bilgi (renkli çerçeve) duruyor. */
@media (prefers-reduced-motion: reduce) {
  .slot-kutu.kazanan { animation: none; }
  .slot-makara.durdu { animation: none; }
  .slot-makara.donuyor { animation: none; }
  .slot-sahne.kutlama { animation: none; }
  .slot-bigwin { animation: none; }
}

/* ---- mesaj ---- */

.slot-mesaj {
  margin: 12px 0 10px;
  min-height: 26px;
  text-align: center;
  font-weight: 600;
  color: var(--text-dim);
}
.slot-mesaj.iyi { color: var(--green-lt, #7fe08a); }
.slot-mesaj.kotu { color: #ff8a8a; }
/* Mesaj karışık yazımlı ("MUHTEŞEM! 1.603 kredi · 5× Kiraz"),
   o yüzden Bungee değil — bkz. başlıktaki not. */
.slot-mesaj.buyuk {
  color: var(--slot-vurgu);
  font-size: 1.08rem;
  text-shadow: 0 0 14px rgba(255, 210, 63, .55);
}
/* Kazanç kademeleri — sesle aynı isimler (minor/major/mega/jackpot).
   Renk soğuktan sıcağa yükseliyor ki kademeyi bakışta ayırt edilsin. */
.slot-mesaj.minor { color: #8fd0ff; font-weight: 700; }
.slot-mesaj.major {
  color: #7fe0a0; font-weight: 800; font-size: 1.05rem;
  text-shadow: 0 0 12px rgba(120, 240, 160, .5);
}
.slot-mesaj.mega {
  color: var(--slot-vurgu); font-weight: 800; font-size: 1.12rem;
  text-shadow: 0 0 16px rgba(255, 210, 63, .6);
}
.slot-mesaj.jackpot {
  color: #ffcf3f; font-weight: 900; font-size: 1.22rem;
  letter-spacing: .5px;
  text-shadow: 0 0 8px #ff8a00, 0 0 22px rgba(255, 190, 40, .85);
  animation: slot-jackpot-yanip .5s ease-in-out 3 alternate;
}
@keyframes slot-jackpot-yanip {
  from { filter: brightness(1); }
  to { filter: brightness(1.6); }
}
@media (prefers-reduced-motion: reduce) {
  .slot-mesaj.jackpot { animation: none; }
}

.slot-sahne.kutlama { animation: slot-kutla 1.4s ease-out; }
@keyframes slot-kutla {
  0%, 100% { box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
  30% { box-shadow: 0 0 0 3px var(--slot-vurgu), 0 0 60px rgba(255, 210, 63, .5); }
}

/* ---- panel ---- */

.slot-panel {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.slot-bahis { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.slot-bahis-dugmeler { display: flex; gap: 6px; }
.slot-bahis-btn {
  min-width: 40px; padding: 7px 10px;
  border-radius: 10px; border: 1px solid var(--line);
  background: rgba(0, 0, 0, .3); color: var(--text);
  font-weight: 700; cursor: pointer;
}
.slot-bahis-btn.secili {
  background: var(--slot-vurgu); color: #241a02; border-color: var(--slot-vurgu);
}
.slot-toplam { font-size: .85rem; color: var(--text-dim); }
.slot-toplam b { color: var(--slot-vurgu); }

.slot-eylem { display: flex; gap: 10px; align-items: center; }
.slot-cevir {
  min-width: 160px;
  font-family: 'Bungee', 'Inter', system-ui, sans-serif;
  font-size: 1rem; letter-spacing: .04em;
  /* Bungee'nin kendi ağırlığı var; `font-weight: 800` istemek
     tarayıcıyı sahte kalınlaştırmaya (synthetic bold) itiyor ve
     harfler bulanıklaşıyor. */
  font-weight: 400;
  box-shadow: 0 4px 0 #8a6100, 0 8px 20px rgba(0, 0, 0, .5);
}
.slot-cevir:active { transform: translateY(2px); box-shadow: 0 2px 0 #8a6100; }
.slot-cevir:disabled { opacity: .55; cursor: progress; }
.slot-oto.acik { border-color: var(--slot-vurgu); color: var(--slot-vurgu); }

.slot-alt {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: .82rem; color: var(--text-dim);
}
.slot-alt b { color: var(--text); }

/* ---- ödeme tablosu ---- */

.slot-odeme {
  border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
  background: rgba(0, 0, 0, .22);
}
.slot-odeme h4 { margin: 0 0 10px; font-size: .95rem; }
.slot-ipuc { font-weight: 400; font-size: .78rem; color: var(--text-dim); }
.slot-odeme table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.slot-odeme th, .slot-odeme td {
  padding: 5px 8px; text-align: right; border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.slot-odeme thead th { color: var(--text-dim); font-size: .78rem; }
.slot-odeme tbody th {
  text-align: left; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.slot-odeme em { font-style: normal; font-size: .74rem; color: var(--slot-vurgu); }
.slot-mini { width: 24px; height: 24px; display: inline-block; flex: 0 0 auto; }
.slot-mini svg, .slot-mini img { width: 100%; height: 100%; display: block; }
.slot-not { margin: 8px 0 0; font-size: .8rem; }

.slot-uyari {
  margin: 0; font-size: .82rem; color: var(--text-dim);
  padding: 10px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
}

/* ---- dar ekran ---- */

@media (max-width: 720px) {
  .slot-izgara { gap: 5px; }
  .slot-makara { gap: 5px; }
  .slot-kutu { padding: 4px; border-radius: 8px; }
  .slot-sahne { padding: 10px; border-radius: 14px; }
  .slot-cerceve { padding: 6px; }
  .slot-kredi-kutu b { font-size: 1.2rem; }
  .slot-panel { flex-direction: column; align-items: stretch; }
  .slot-eylem { justify-content: stretch; }
  .slot-cevir { flex: 1; }
  /* Ödeme tablosu dar ekranda kendi içinde kaysın; sayfayı yana
     kaydırmasın. Aynı kural masa oyunlarında da geçerli. */
  .slot-odeme { overflow-x: auto; }
}

/* ---- kutlama: rakam ve altın yağmuru ---- */

/* Çerçeve, uçuşan şeylerin sahnesi. `overflow: hidden` YOK: altın
   makaranın dışına taşarak düşsün, kutunun içinde hapsolmasın. */
.slot-cerceve { position: relative; }

/* Kazanç rakamı HER kazançta çıkıyor — küçük kazanç da görülsün.
   Altın yalnızca büyük kazançta yağıyor (bkz. slot.js/KUTLAMA):
   her dönüşte yağsaydı kutlama gürültüye dönerdi, dönüşlerin
   %40'ı kazanıyor. */
.slot-kazanc-rakam {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 5;
  transform: translate(-50%, -50%);
  /* Rakam BEYAZ taşların üstüne düşüyor; koyu bir yastık olmadan
     altın sarısı okunmuyordu. */
  padding: 4px 22px;
  border-radius: 999px;
  background: rgba(12, 8, 2, .55);
  backdrop-filter: blur(3px);
  font-family: 'Bungee', 'Inter', system-ui, sans-serif;
  font-size: clamp(1.5rem, 4.6vw, 2.7rem);
  font-weight: 400;
  color: #fff6d0;
  text-shadow: 0 0 12px rgba(255, 210, 63, .9), 0 3px 0 #b57f00,
               0 6px 22px rgba(0, 0, 0, .6);
  pointer-events: none;
  animation: slot-rakam 1.5s cubic-bezier(.2, .8, .2, 1) forwards;
}
/* Rakam UZUN DURUYOR, kısa uçuyor. İlk sürümde daha en baştan
   yukarı süzülüp soluyordu; ekran görüntüsünde okunmuyordu bile.
   Artık ömrünün %70'ini tam görünür geçiriyor. */
@keyframes slot-rakam {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(.6); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.14); }
  22% { transform: translate(-50%, -50%) scale(1); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -105%) scale(.96); }
}

.slot-altin-yagmuru {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.slot-altin {
  position: absolute;
  top: -12%;
  display: block;
  animation-name: slot-altin-dus;
  animation-timing-function: cubic-bezier(.35, .1, .6, 1);
  animation-fill-mode: forwards;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .45));
}
.slot-altin svg { width: 100%; height: auto; display: block; }
@keyframes slot-altin-dus {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  85% { opacity: 1; }
  100% {
    /* `--dus` JS'ten piksel olarak geliyor: yüzde yazsaydık paranın
       kendi boyunun yüzdesi olur ve düşmezdi (ölçüldü). */
    transform: translate(var(--kay), var(--dus)) rotate(var(--don));
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Süs kalkıyor, BİLGİ kalıyor: rakam yerinde beliriyor, uçmuyor.
     Altın yağmuru JS tarafında hiç kurulmuyor. */
  .slot-kazanc-rakam { animation: slot-rakam-sakin 1.2s ease forwards; }
  @keyframes slot-rakam-sakin {
    0%, 80% { opacity: 1; transform: translate(-50%, -50%); }
    100% { opacity: 0; transform: translate(-50%, -50%); }
  }
}

/* ---- kredi nasıl kazanılır ---- */

/* Site ücretsiz; kredinin bir anlamı olması için masaya bağlandı.
   Bunu EKRANDA söylemek şart: oyuncu kuruduğunda "bitti mi" demesin,
   ne yapacağını bilsin. */
.slot-kazanma-yolu {
  border: 1px solid var(--slot-kenar);
  border-radius: 14px;
  padding: 14px 16px;
  background: linear-gradient(160deg, rgba(255, 210, 63, .08),
                                      rgba(255, 210, 63, .02));
}
.slot-kazanma-yolu > b { color: var(--slot-vurgu); }
.slot-kazanma-yolu p { margin: 6px 0; font-size: .88rem; }
.slot-kazanma-yolu ul {
  margin: 8px 0 0; padding: 0; list-style: none;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.slot-kazanma-yolu li {
  padding: 6px 12px; border-radius: 999px;
  background: rgba(0, 0, 0, .3); border: 1px solid var(--line);
  font-size: .84rem;
}
.slot-kazanma-yolu li b { color: var(--slot-vurgu); }


/* ---- bedava dönüş şeridi ---- */
.slot-bedava-serit {
  text-align: center;
  margin: 6px auto 2px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--text);
}
.slot-bedava-serit b {
  color: #ffd23f;
  text-shadow: 0 0 12px rgba(255, 200, 60, .7);
  letter-spacing: 2px;
}
.slot-bedava-serit span { font-weight: 800; color: #fff; }

/* ---- ses düğmesi ---- */
.slot-ses { min-width: 46px; font-size: 1.05rem; line-height: 1; }

/* ---- BIG WIN / MEGA WIN / FREE SPINS afişi ---- */
.slot-bigwin {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
  z-index: 6;
  text-align: center;
}
.slot-bigwin-ust {
  font-family: Bungee, system-ui, sans-serif;
  font-size: clamp(30px, 7vw, 74px);
  color: #ffd23f;
  text-shadow: 0 2px 0 #7a4b00, 0 0 24px rgba(255, 200, 60, .85);
  animation: slot-bigwin-in .45s cubic-bezier(.2, 1.5, .4, 1) both;
}
.slot-bigwin-rakam {
  font-family: Bungee, system-ui, sans-serif;
  font-size: clamp(22px, 5vw, 52px);
  color: #fff;
  text-shadow: 0 0 18px rgba(255, 255, 255, .6);
  animation: slot-bigwin-in .45s .12s cubic-bezier(.2, 1.5, .4, 1) both;
}
/* Free-spin afişi kazanç afişiyle çakışmasın: alta hizala. */
.slot-freespin { justify-content: flex-end; padding-bottom: 6%; }
.slot-freespin .slot-bigwin-ust {
  color: #7cffb0; font-size: clamp(24px, 5.5vw, 56px);
  text-shadow: 0 2px 0 #0a5a30, 0 0 24px rgba(90, 255, 160, .85);
}
@keyframes slot-bigwin-in {
  from { transform: scale(.2) rotate(-8deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}

/* ---- kazanan ödeme hatları (makaraların üstünde) ---- */
.slot-izgara { position: relative; }
.slot-hatlar {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 3; overflow: visible;
}
.slot-hat-cizgi {
  filter: drop-shadow(0 0 6px currentColor);
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: slot-hat-ciz .5s ease-out forwards, slot-hat-yanip 1s .5s ease-in-out infinite alternate;
}
@keyframes slot-hat-ciz { to { stroke-dashoffset: 0; } }
@keyframes slot-hat-yanip { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .slot-hat-cizgi { animation: none; stroke-dashoffset: 0; opacity: .9; }
}

/* ---- yeni tema paletleri (data-tema) ---- */
.slot-kart[data-tema="sevens"] { background: linear-gradient(160deg, #3a1220, #170812); }
.slot-kart[data-tema="sevens"].secili { background: linear-gradient(160deg, #5a1a30, #24101a); }
.slot-kart[data-tema="space"] { background: linear-gradient(160deg, #10183a, #070a1a); }
.slot-kart[data-tema="space"].secili { background: linear-gradient(160deg, #1a2a5a, #0a1024); }
.slot-kart[data-tema="enchanted"] { background: linear-gradient(160deg, #1a3a2a, #0a1a12); }
.slot-kart[data-tema="enchanted"].secili { background: linear-gradient(160deg, #235a3c, #0f241a); }
.slot-kart[data-tema="xmas"] { background: linear-gradient(160deg, #3a1414, #0a1a14); }
.slot-kart[data-tema="xmas"].secili { background: linear-gradient(160deg, #5a1c1c, #0f2418); }
.slot-kart[data-tema="zombie"] { background: linear-gradient(160deg, #1a2a12, #0a1408); }
.slot-kart[data-tema="zombie"].secili { background: linear-gradient(160deg, #2a4518, #12240a); }
.slot-kart[data-tema="pinup"] { background: linear-gradient(160deg, #3a122a, #170812); }
.slot-kart[data-tema="pinup"].secili { background: linear-gradient(160deg, #5a1a40, #24101c); }

.slot-sahne[data-tema="sevens"] { --slot-1: #6e1230; --slot-2: #1a0810;
  --slot-isik: rgba(255,90,140,.5); --slot-isik-2: rgba(255,200,70,.4); }
.slot-sahne[data-tema="space"] { --slot-1: #12235e; --slot-2: #060a1a;
  --slot-isik: rgba(90,160,255,.5); --slot-isik-2: rgba(180,120,255,.42); }
.slot-sahne[data-tema="enchanted"] { --slot-1: #135a3c; --slot-2: #08160f;
  --slot-isik: rgba(120,255,180,.45); --slot-isik-2: rgba(255,180,240,.4); }
.slot-sahne[data-tema="xmas"] { --slot-1: #6e1414; --slot-2: #08160f;
  --slot-isik: rgba(255,90,90,.5); --slot-isik-2: rgba(120,255,140,.4); }
.slot-sahne[data-tema="zombie"] { --slot-1: #2a4a12; --slot-2: #0a1408;
  --slot-isik: rgba(140,255,80,.45); --slot-isik-2: rgba(120,120,140,.4); }
.slot-sahne[data-tema="pinup"] { --slot-1: #6e1250; --slot-2: #170812;
  --slot-isik: rgba(255,90,180,.5); --slot-isik-2: rgba(255,210,90,.4); }

.slot-sahne[data-tema="sevens"] .slot-cerceve { --slot-neon: rgba(255,120,160,.45); }
.slot-sahne[data-tema="space"] .slot-cerceve { --slot-neon: rgba(120,170,255,.45); }
.slot-sahne[data-tema="enchanted"] .slot-cerceve { --slot-neon: rgba(120,255,190,.45); }
.slot-sahne[data-tema="xmas"] .slot-cerceve { --slot-neon: rgba(255,120,120,.45); }
.slot-sahne[data-tema="zombie"] .slot-cerceve { --slot-neon: rgba(150,255,100,.45); }
.slot-sahne[data-tema="pinup"] .slot-cerceve { --slot-neon: rgba(255,120,200,.45); }