/* Keyfi 101 — ana menü ekranı.
   Masanın üstünde tam ekran bir katman; oyun ancak buradan kurulur.
   Pencere katmanının (z-index 80) altında kalır ki kurallar penceresi
   menünün üzerine açılabilsin. */

.menu {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  /* Masanın üstüne tam örten bir katman: menüye dönüldüğünde önceki elin
     taşları arkadan sızmasın diye altta düz bir zemin var. */
  background:
    radial-gradient(70% 60% at 50% 38%, rgba(37, 46, 63, .96) 0%, rgba(10, 13, 19, .98) 62%, #06080c 100%),
    #06080c;
}
.menu[hidden] { display: none; }

.menu-card {
  width: 560px;
  max-width: 96vw;
  padding: 30px 34px 26px;
  background: linear-gradient(180deg, #1b1f27, #12151b);
  border: 1px solid rgba(215, 165, 63, .3);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  animation: modal-in .28s ease-out;
}

.menu-brand {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -1.2px;
  line-height: 1;
  color: var(--txt);
}
.menu-brand b {
  color: var(--gold);
  font-weight: 900;
  margin-left: 4px;
}
.menu-tag .ms-davet { color: var(--gold-hi); }
/* Misafiri kalıcı hesaba çevirme penceresi (profil penceresinin alanları). */
.hc-form { display: flex; flex-direction: column; }
.hc-sebep { margin: 0 0 6px; color: var(--gold-hi); }
.menu-tag {
  margin: 8px 0 20px;
  font-size: 14px;
  color: var(--txt-mute);
}

.menu-fields { border-top: 1px solid var(--panel-line); }

.menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.menu-row > span {
  font-size: 15px;
  color: var(--txt);
}

.menu-row input {
  width: 232px;
  height: 38px;
  padding: 0 12px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--panel-line);
  border-radius: 9px;
  color: var(--txt);
  font-size: 15px;
  font-weight: 600;
}
.menu-row input::placeholder { color: var(--txt-mute); font-weight: 400; }
.menu-row input:focus { outline: none; border-color: rgba(215, 165, 63, .55); }

.menu-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}

/* .btn-primary mutlak konumlu olduğu için menüde kendi düğmesi kullanılır */
.menu-go {
  flex: 1;
  height: 50px;
  color: #2a1c00;
  background: linear-gradient(180deg, #f0c063 0%, var(--gold) 55%, #b4821f 100%);
  border-color: #6f5014;
  box-shadow: 0 3px 0 #6f5014, var(--shadow-1);
  font-size: 16px;
  font-weight: 700;
}
.menu-link {
  height: 50px;
  color: var(--txt-dim);
  background: rgba(255, 255, 255, .05);
  border-color: var(--panel-line);
}
.menu-link:hover { color: var(--txt); }

.menu-foot {
  margin: 0;
  font-size: 13px;
  color: var(--txt-mute);
}

/* ————————————————————————————————————— giriş / kayıt */

.auth-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
  padding: 3px;
  background: rgba(255, 255, 255, .05);
  border-radius: 10px;
}
.auth-tabs button {
  flex: 1;
  height: 36px;
  background: none;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--txt-mute);
  transition: background .15s, color .15s;
}
.auth-tabs button.on { background: rgba(215, 165, 63, .9); color: #241900; }
.auth-tabs button:not(.on):hover { color: var(--txt); }

.auth-form { display: block; }
.auth-form .menu-row:first-child { border-top: 1px solid var(--panel-line); }

.auth-hint {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--txt-mute);
}

.auth-error, .pf-error {
  margin: 12px 0 0;
  padding: 9px 12px;
  background: rgba(196, 54, 46, .14);
  border: 1px solid rgba(196, 54, 46, .4);
  border-radius: 9px;
  font-size: 13px;
  color: #eb9089;
}
.auth-error[hidden], .pf-error[hidden] { display: none; }

.menu-quiet {
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  background: none;
  border: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--txt-mute);
  border-radius: 9px;
}
.menu-quiet:hover { color: var(--gold-hi); background: rgba(255, 255, 255, .04); }

.auth-note {
  margin: 14px 0 0;
  padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  font-size: 12px;
  line-height: 1.6;
  color: var(--txt-mute);
}

/* ————————————————————————————————————— hesap şeridi */

.menu-who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 4px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-md);
}
.who-avatar {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #f0c063, var(--gold));
  color: #2a1c00;
  font-size: 19px; font-weight: 800;
}
.who-text { flex: 1; min-width: 0; }
.who-text b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.who-tag { color: var(--gold); font-weight: 600; }
.who-sub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--txt-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.who-sub .ok { color: var(--green-hi); }
.who-btn {
  flex: none;
  height: 32px;
  padding: 0 13px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  font-size: 13px; font-weight: 600;
  color: var(--txt-dim);
}
.who-btn:hover { color: var(--txt); background: rgba(255, 255, 255, .11); }
.menu-who.is-guest .who-avatar { background: rgba(255, 255, 255, .12); color: var(--txt-dim); }

/* ————————————————————————————————————— pencerelerdeki metin kutuları */

.pf-input {
  width: 200px; height: 38px;
  padding: 0 12px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--panel-line);
  border-radius: 9px;
  color: var(--txt); font-size: 15px; font-weight: 600;
}
.pf-input:focus { outline: none; border-color: rgba(215, 165, 63, .55); }

/* ————————————————————————————————————————————— lobi (masa listesi) */

/* Lobi bir kart değil, EKRANIN KENDİSİ: üstte marka şeridi, altında sekme,
   süzgeç çubuğu ve pencereyi dolduran masa listesi. Ölçüler tasarım tuvali
   pikselidir, menü de tuvalin içinde durduğu için her pencerede aynı oranda
   görünür. Giriş ve masa görünümleri ortada kart olarak kalmaya devam eder. */
.menu.lobby-mode {
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
}
.menu.lobby-mode .menu-foot { display: none; }

.menu-card.is-lobby {
  width: 100%;
  height: 100%;
  max-width: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  animation: none;
}
/* Üstteki marka şeridinin zemini: üstü opak, aşağı doğru saydamlaşıp kayan
   arka planla birleşir. Kart akışta durduğu için bu zemin kayan arka planın
   (z-index -1) üstüne, içeriğin altına çizilir. */
.menu-card.is-lobby {
  background: linear-gradient(180deg,
    rgb(20, 23, 30) 0, rgba(17, 20, 27, .96) 52px, rgba(15, 18, 25, .7) 110px,
    rgba(14, 17, 23, .3) 150px, rgba(14, 17, 23, 0) 185px) no-repeat;
}

.lobby-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-width: 0;
  padding: 18px 44px;
  /* Zemini kendisinde değil lobinin kartında (.menu-card.is-lobby): opaktan
     saydama geçiş sekme şeridinin altına kadar iner. Altında ayırıcı yok. */
}
.lobby-head .menu-brand { margin: 0; font-size: 34px; }
/* Lobideki logo bir düğme: basınca MENÜ'nün kök sayfasına döner. */
button.menu-brand {
  padding: 0;
  background: none; border: 0;
  transition: filter .15s, transform .15s;
}
button.menu-brand:hover { filter: brightness(1.15) drop-shadow(0 0 8px rgba(215, 165, 63, .35)); }
button.menu-brand:active { transform: translateY(1px); }

/* ————————————————————————————— lobinin kayan arka planı

   Lobinin tamamı yatay şeritler: komşular ters yöne, çok yavaş kayar;
   içlerinde para, elmas, kedi ve savrulmuş taşlar (js/menubg.js). Bütün
   katman çok soluk; yalnızca lobide görünür. Marka şeridinin altında da
   durur, şeridin saydamlaşan alt yarısında belirir.
   z-index -1: #menu'nün zemininin üstünde, içeriğin altında. */
.menu-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: none;
  overflow: hidden;
  pointer-events: none;
  opacity: .05;
}
.menu.lobby-mode .menu-bg { display: block; }

/* Şerit kırpmaz: büyük parçalar (kediler) dönerken şeridin kenarından
   taşabilir; dıştaki katman zaten kırpıyor. */
.mbg-serit { position: relative; height: 124px; }
/* Şeritler belli olsun diye biri açık biri koyu; katmanın soluğunda
   ancak sezilir. */
.mbg-serit:nth-child(odd) { background: rgba(255, 255, 255, .22); }

/* Yol aynı diziyi yan yana iki kez taşır; bir dizi boyu (yolun yarısı)
   kayınca başa sarar ve dikiş görünmez. Süresi ve gecikmesi şeride göre
   js/menubg.js'ten gelir. */
.mbg-yol {
  display: flex;
  width: max-content;
  height: 100%;
  animation: mbg-kay 200s linear infinite;
  will-change: transform;
}
.mbg-serit.is-ters .mbg-yol { animation-direction: reverse; }
/* Bir liste kaydırılırken hareket kısa süre durur (js/menubg.js duraklat). */
.menu-bg.is-durgun .mbg-yol,
.menu-bg.is-durgun .mbg-don { animation-play-state: paused; }
@keyframes mbg-kay { to { transform: translateX(-50%); } }

.mbg-dizi { position: relative; flex: none; height: 100%; }
.mbg-parca { position: absolute; top: 50%; display: grid; line-height: 0; }
.mbg-parca img { object-fit: contain; }
/* Her parça kendi çevresinde çok yavaş döner; süresi ve yönü parçaya göre
   js/menubg.js'ten gelir. */
.mbg-don { display: grid; animation: mbg-don 90s linear infinite; }
@keyframes mbg-don { to { transform: rotate(360deg); } }

/* Hareket istemeyen için şeritler dursun; genel kural (css/base.css)
   süreyi sıfıra indirir, sonsuz tekrarda bu titremeye döner. */
@media (prefers-reduced-motion: reduce) {
  .mbg-yol, .mbg-don { animation: none; }
}

/* ————————————————————————————— ödül simgeleri: para, elmas, kedi maması */

/* Başlıktaki kasalarda, çarkta, mağazada ve pencerelerde aynı çizim; boyu
   bulunduğu yer verir (width/height). İç ölçüler yüzde: her boyda aynı
   görünsün.

   Jeton: kabartma kenarlı altın, ortasında basılı yıldız. Yıldızın biraz
   altında açık bir kopyası var: oyulmuş gibi görünür. */
.coin {
  position: relative;
  flex: 0 0 auto;
  display: inline-block; vertical-align: middle;
  width: 20px; height: 20px;
  border-radius: 50%;
  background:
    radial-gradient(circle closest-side, transparent 0 66%, rgba(120, 82, 14, .6) 68.5% 74.5%, transparent 77%),
    radial-gradient(circle at 34% 28%, #fff6d2 0%, #f7d06a 30%, #daa63d 62%, #8f6417 100%);
  box-shadow:
    inset 0 0 0 1px rgba(92, 62, 10, .9),
    inset 0 -2px 3px rgba(110, 72, 8, .42),
    inset 0 1px 1px rgba(255, 248, 220, .6),
    0 1px 3px rgba(0, 0, 0, .45);
}
.coin::before,
.coin::after {
  content: "";
  position: absolute; inset: 28%;
  clip-path: polygon(50% 0, 61.8% 34.5%, 98% 34.5%, 68.5% 56.5%, 79.5% 91%,
    50% 70%, 20.5% 91%, 31.5% 56.5%, 2% 34.5%, 38.2% 34.5%);
}
.coin::before { transform: translateY(7%); background: rgba(255, 244, 205, .75); }
.coin::after { background: linear-gradient(180deg, #a26f16, #7d540d); }

/* Elmas: kesme taş. Gövde tek parça kırpılır; üst taç daha açık, alt
   ortadaki yüzey parlak. Kırpıldığı için gölgesi yok — gölge isteyen yer
   onu saran kutuya verir (bkz. .kasa-ikon). */
.gem {
  position: relative;
  flex: 0 0 auto;
  display: inline-block; vertical-align: middle;
  width: 18px; height: 18px;
  clip-path: polygon(22% 16%, 78% 16%, 98% 40%, 50% 92%, 2% 40%);
  background: linear-gradient(140deg, #aee3ff 0%, #56b3f3 38%, #2a82d2 62%, #15488a 100%);
}
.gem::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 16%; height: 24%;
  clip-path: polygon(22% 0, 78% 0, 98% 100%, 2% 100%);
  background:
    linear-gradient(90deg, transparent 32%, rgba(255, 255, 255, .45) 32% 68%, transparent 68%),
    linear-gradient(180deg, #eefaff, #92d3ff);
}
.gem::after {
  content: "";
  position: absolute; inset: 0;
  clip-path: polygon(30% 40%, 70% 40%, 50% 92%);
  background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .06));
}

/* ————————————————————————————— sağ üst: kasalar ve profil */

/* Para ve elmas kasaları, iki yanlarında ince ayraçlarla başlık düğmeleri
   ile profilin arasında bir öbek. */
.head-kasa {
  display: flex; align-items: center; gap: 14px;
  height: 44px;
  margin: 0 4px;
  padding: 0 20px;
  border-left: 1px solid var(--panel-line);
  border-right: 1px solid var(--panel-line);
}

/* Kasa: koyu, içe gömük bir kapsül. Solda kabartma jeton ya da kesme elmas,
   sağda + düğmesi; ikisi de kapsülün içinde, kenarlara eşit uzaklıkta.
   Miktar sağa yaslı ve sabit genişlikli rakamlarla: sayı değişince kasa
   kıpırdamasın. */
.kasa {
  position: relative;
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  min-width: 178px; height: 44px;
  padding: 0 5px;
  background: linear-gradient(180deg, rgba(3, 5, 9, .78), rgba(14, 17, 24, .62));
  border: 1px solid rgba(215, 165, 63, .34);
  border-radius: 999px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .05);
}
.kasa.is-elmas { border-color: rgba(110, 190, 255, .36); }
.kasa b {
  flex: 1;
  font-size: 17px; font-weight: 800; letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
  color: #fff1d2;
  text-align: right;
}
.kasa.is-elmas b { color: #e2f3ff; }

/* Kasanın simgesi: ortak jeton ya da elmas, kasa boyunda. Elmasın gölgesi
   burada, kırpılmasın diye dıştaki kutuda. */
.kasa-ikon {
  position: relative;
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 32px; height: 32px;
}
.kasa-ikon .coin { width: 32px; height: 32px; }
.kasa-ikon .gem { width: 32px; height: 32px; }
.kasa-ikon.is-elmas { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .55)); }

/* + düğmesi kapsülün sağ ucunda, içinde oturur. */
.kasa-arti {
  flex: 0 0 auto;
  width: 32px; height: 32px; padding: 0;
  display: grid; place-content: center;
  color: #2a1c00;
  background: linear-gradient(180deg, #ffe7a6 0%, #f0c063 45%, #c48c2a 100%);
  border: 1px solid #6f5014;
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 2px 4px rgba(0, 0, 0, .45);
  transition: filter .15s, transform .1s;
}
.kasa-arti svg { display: block; width: 16px; height: 16px; stroke-width: 3.2; }
.kasa-arti:hover { filter: brightness(1.12); }
.kasa-arti:active { transform: translateY(1px); }
.kasa.is-elmas .kasa-arti {
  color: #05202e;
  background: linear-gradient(180deg, #e2f5ff 0%, #8fd0ff 45%, #3a92d4 100%);
  border-color: #1f5d86;
}

/* Profil öbeği: arkadaşlar düğmesi ve hesap kapsülü. */
.lobby-me {
  position: relative;
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
}

/* Hesap kapsülü bütünüyle bir düğme: basınca hesap menüsü açılır. */
.me-profil {
  display: flex; align-items: center; gap: 12px;
  height: 58px; padding: 0 16px 0 5px;
  text-align: left;
  background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025));
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  transition: border-color .18s, background .18s;
}
.me-profil:hover,
.me-profil.is-on,
.me-profil[aria-expanded="true"] {
  border-color: rgba(215, 165, 63, .5);
  background: linear-gradient(180deg, rgba(215, 165, 63, .14), rgba(215, 165, 63, .05));
}

/* Profil resmi (bkz. css/profil.css .av). Çevresindeki halka sezon
   puanıyla dolar, altındaki etiket sezon seviyesi. */
.me-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 48px; height: 48px; padding: 4px;
  border-radius: 50%;
  background: conic-gradient(var(--gold-hi) calc(var(--xp, 0) * 1%), rgba(255, 255, 255, .12) 0);
}
.me-avatar b {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #4d4432 0%, #2b2619 55%, #17140e 100%);
  box-shadow: 0 0 0 1.5px #12151b, inset 0 1px 0 rgba(255, 255, 255, .08);
  font-size: 19px; font-weight: 800; color: var(--gold-hi);
}
.me-rutbe {
  position: absolute; left: 50%; bottom: -6px;
  transform: translateX(-50%);
  padding: 0 7px;
  font-size: 10px; font-weight: 800; letter-spacing: .5px; line-height: 15px;
  color: #241900;
  background: linear-gradient(180deg, #f8d67f, #c8912e);
  border: 1.5px solid #12151b;
  border-radius: 999px;
  white-space: nowrap;
}

.me-kim { display: flex; flex-direction: column; gap: 3px; min-width: 0; max-width: 210px; line-height: 1.2; }
.me-kim b {
  font-size: 16px; font-weight: 700; color: var(--txt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.me-kim i { font-style: normal; margin-left: 2px; font-weight: 600; color: var(--gold); }
.me-alt { font-size: 12px; color: var(--txt-mute); white-space: nowrap; }

.me-chev {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  color: var(--txt-mute); stroke-width: 2.2;
  transition: transform .18s, color .18s;
}
.me-profil:hover .me-chev { color: var(--gold-hi); }
.me-profil[aria-expanded="true"] .me-chev { transform: rotate(180deg); color: var(--gold-hi); }

.me-drop {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 170px; padding: 6px;
  display: flex; flex-direction: column;
  background: var(--panel-2);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  z-index: 5;
}
.me-drop[hidden] { display: none; }
.me-drop button {
  padding: 9px 12px;
  text-align: left; font-size: 15px; font-weight: 700; letter-spacing: .2px; color: #f3eee2;
  background: none; border: 0; border-radius: 8px;
}
.me-drop button:hover { color: var(--gold-hi); background: rgba(255, 255, 255, .06); }

/* Sekme şeridi: boydan boya ayırıcı yok. Seçili sekmenin altında, yazısı
   kadar geniş düz altın bir çubuk durur (koleksiyonun bölüm şeridindeki
   gibi); sekme değişince çubuk yeni sekmenin altına kayar (yeri js/ui.js
   sekmeCizgisi). */
.lobby-tabs {
  position: relative;
  display: flex; gap: 6px; margin: 0; padding: 18px 44px 0;
}
.lobby-tabs button {
  padding: 10px 2px 15px; margin-right: 26px;
  background: none; border: 0;
  font-size: 26px; font-weight: 800; letter-spacing: .6px;
  color: var(--txt-mute);
  transition: color .3s;
}
.lobby-tabs button.on { color: var(--txt); }

.tab-cizgi {
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 3px;
  background: var(--gold);
  pointer-events: none;
}
/* Kayma hızlı başlar, yavaşlayarak oturur (ease-out). */
.tab-cizgi.is-kayar {
  transition: transform .32s cubic-bezier(.16, 1, .3, 1), width .32s cubic-bezier(.16, 1, .3, 1);
}

.lobby-bar {
  display: flex; align-items: center; gap: 16px;
  margin: 16px 44px 0;
  padding: 14px 18px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-md);
}
.lb-spacer { flex: 1; }
.lb-check { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--txt-dim); }
.lb-check input { width: 17px; height: 17px; accent-color: var(--gold); }
.lb-icon {
  width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--panel-line);
  border-radius: 8px; color: var(--txt-dim);
}
.lb-icon svg { width: 17px; height: 17px; }
.lb-icon:hover { color: var(--gold-hi); }
.lb-ghost, .lb-go { height: 42px; padding: 0 22px; font-size: 15px; }
.lb-ghost { color: var(--txt); background: var(--panel-2); border-color: var(--panel-line); }
.lb-ghost:hover { border-color: rgba(215, 165, 63, .5); }
.lb-go {
  color: #2a1c00; font-weight: 700;
  background: linear-gradient(180deg, #f0c063 0%, var(--gold) 55%, #b4821f 100%);
  border-color: #6f5014;
}

/* ————————————————————————————— masa listesi */

/* Liste kalan yüksekliği doldurur: masa sayısı ne olursa olsun ekran dolu
   görünsün, satırlar yukarıda toplansın. */
.lobby-list {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  margin: 14px 44px 0;
}
.lt-head, .lt-row {
  display: grid;
  grid-template-columns: minmax(0, 2.6fr) 1fr .7fr .9fr 1fr .9fr;
  align-items: center; gap: 10px;
}
.lt-head {
  padding: 0 18px 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--txt-mute);
}
.lt-head span + span, .lt-col { text-align: center; }
.lt-head span:first-child { text-align: left; }

.lt-rows { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }

.lt-row {
  padding: 15px 18px; margin-bottom: 3px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: 15px; color: var(--txt-dim);
}
/* Örnekteki gibi bir satır atlamalı koyuluk: uzun listede göz kaymasın. */
.lt-row:nth-child(even) { background: rgba(255, 255, 255, .015); }
.lt-row:hover { background: rgba(255, 255, 255, .06); }
.lt-row.is-mine { border-color: rgba(215, 165, 63, .45); background: rgba(215, 165, 63, .08); }
.lt-name { display: flex; flex-direction: column; min-width: 0; }
.lt-name b { color: var(--txt); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-name i { font-style: normal; font-size: 12px; color: var(--txt-mute); }
.lt-seats { color: var(--txt); font-weight: 600; }

.lt-state { font-size: 13px; }
.lt-state.open { color: var(--green-hi); }
.lt-state.full { color: var(--txt-mute); }
.lt-state.playing { color: var(--gold-hi); }

.lt-play {
  padding: 7px 16px;
  background: none; border: 1px solid transparent; border-radius: 7px;
  font-size: 13px; font-weight: 700; letter-spacing: .6px; color: var(--gold);
}
.lt-play:hover:not(:disabled) { color: #2a1c00; background: var(--gold); }
.lt-play:disabled { color: var(--txt-mute); cursor: default; }


.lobby-note {
  margin: 0;
  padding: 12px 44px 16px;
  font-size: 12px; line-height: 1.6; color: var(--txt-mute);
}

/* ————————————————————————————————— MENÜ sekmesi */

/* Kutular başlıkların altında ayrı bir alan. Solda alt alta üç kart,
   sağ kenarda görev ve arkadaş panelleri, ortada hızlı oyun. */
.menu-page {
  /* Kartların ve panellerin çerçevesi: altın tonlu kenar, dışında ince
     koyu bir halka (arka plandan ayrılsın), üstte içten ışık çizgisi. */
  --kart-kenar: rgba(215, 165, 63, .3);
  --kart-golge: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 22px rgba(0, 0, 0, .45);
  flex: 1; min-height: 0;
  position: relative;
  padding: 28px 44px;
}

/* Üstte geniş sezon kartı, altında iki kare: günlük çark ve etkinlikler. */
.menu-kartlar {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 18px;
}

.menu-tile {
  position: relative;
  flex: 0 0 auto;
  width: 196px; height: 188px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  gap: 4px;
  padding: 18px 18px 17px;
  text-align: left;
  background:
    radial-gradient(120% 100% at 18% 12%, rgba(215, 165, 63, .16) 0%, rgba(215, 165, 63, 0) 58%),
    linear-gradient(160deg, #1d222b 0%, #14181f 62%, #10131a 100%);
  border: 1px solid var(--kart-kenar);
  border-radius: var(--r-lg);
  box-shadow: var(--kart-golge);
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.menu-tile.is-genis { width: 300px; height: 176px; }
.menu-tile:hover {
  border-color: rgba(242, 208, 137, .75);
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .1),
    var(--shadow-2), 0 0 20px rgba(215, 165, 63, .16);
}
.menu-tile:active { transform: translateY(0); }

.mt-icon {
  position: absolute; left: 18px; top: 18px;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(215, 165, 63, .12);
  border: 1px solid rgba(215, 165, 63, .35);
}
.mt-icon svg {
  width: 29px; height: 29px;
  fill: none; stroke: var(--gold-hi); stroke-width: 2; stroke-linecap: round;
}
.mt-name { font-size: 19px; font-weight: 800; letter-spacing: 1.2px; color: var(--txt); }

/* ————————————————————————————— çark ekranı */

/* ————————————————————————————— MENÜ alt sayfaları */

.alt-sayfa {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
}

/* Henüz doldurulmamış alt sayfalar: sayfayı dolduran sessiz bir alan. */
.sayfa-bos {
  flex: 1; min-height: 0;
  display: grid; place-items: center;
}
.sayfa-bos p { margin: 0; font-size: 15px; color: var(--txt-mute); }

/* Günlük çark: sayfada çarktan başka bir şey yok. Gözler kedi çarkıyla
   ortak (.donen-cark), çarkın adı üstünde yazıyor. */
.gc-sayfa {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 22px 34px 22px;
}

/* Ortada çarkın adı, sağda "Atla": ad tam ortada kalsın diye üç sütun. */
.gc-ust {
  width: 100%;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.gc-kademe-ad {
  grid-column: 2;
  font-size: 22px; font-weight: 800; letter-spacing: 1.2px; color: var(--gold-hi);
}

/* ————————————————————————————— görev paneli */

/* Sağ kenara dayalı sütun, sayfanın boyu kadar: üstte görevler, altta
   arkadaşlar; boyu ikisi eşit paylaşır. */
.menu-sag {
  position: absolute;
  right: 44px; top: 28px; bottom: 28px;
  width: 350px;
  display: flex; flex-direction: column; gap: 16px;
}
.gorev-panel {
  flex: 1 1 0; min-height: 0;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #191d25 0%, #12161d 100%);
  border: 1px solid var(--kart-kenar);
  border-radius: var(--r-lg);
  box-shadow: var(--kart-golge);
  overflow: hidden;
}

.gorev-bas {
  position: relative;
  padding: 18px 60px 14px;
  text-align: center;
  border-bottom: 1px solid var(--panel-line);
}
/* Panel başlığının sağındaki simge (görevler: işaretli liste, arkadaşlar:
   iki kişi); soldaki ekle düğmesinin kutusuyla aynı. Basınca panel küçük
   bir kutuya katlanır. */
.panel-ikon {
  position: absolute; right: 14px; top: 50%;
  width: 38px; height: 38px; margin-top: -19px;
  display: grid; place-items: center;
  color: var(--gold-hi);
  background: rgba(215, 165, 63, .12);
  border: 1px solid rgba(215, 165, 63, .38);
  border-radius: 10px;
  transition: color .15s, background .15s, border-color .15s;
}
.panel-ikon svg { width: 21px; height: 21px; stroke-width: 1.9; }
.panel-ikon:hover {
  color: #2a1c00;
  background: linear-gradient(180deg, #f8d67f 0%, var(--gold) 60%, #b4821f 100%);
  border-color: #6f5014;
}

/* Katlanmış panel: sağ kenarda simgeli küçük kutu; açık panel boşalan yeri
   alır. İkisi de katlıysa iki kutu alt alta, dikeyde ortada. */
.panel-kutu {
  position: relative;
  flex: none; align-self: flex-end;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  color: var(--gold-hi);
  background: linear-gradient(180deg, #191d25 0%, #12161d 100%);
  border: 1px solid var(--kart-kenar);
  border-radius: 14px;
  box-shadow: var(--kart-golge);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.panel-kutu svg { width: 25px; height: 25px; stroke-width: 1.9; }
.panel-kutu:hover {
  border-color: rgba(242, 208, 137, .75);
  transform: translateY(-1px);
  box-shadow: var(--kart-golge), 0 0 16px rgba(215, 165, 63, .18);
}
.panel-kutu-say {
  position: absolute; right: -7px; top: -7px;
  min-width: 22px; height: 22px; padding: 0 6px;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 800; color: #2a1c00;
  background: var(--gold);
  border: 2px solid #12161d;
  border-radius: 999px;
}
/* Her panelin yuvası sütunun yarısı; katlanınca yuva yerinde kalır (öteki
   panel büyümez). Görev kutusu yuvasının altında, arkadaş kutusu üstünde:
   ikisi de katlıyken ortada buluşurlar. */
.gorev-kutu { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.menu-sag.ark-kapali .ark-kutu { justify-content: flex-end; }
.ark-kutu > .panel-kutu { align-self: flex-start; }
.gorev-bas b { font-size: 22px; font-weight: 800; letter-spacing: 1.2px; color: var(--txt); }

/* ——— kaydırma: liste ve yanında özel dikey çubuk (tarayıcınınki gizli) */

.kaydir-kutu { flex: 1; min-height: 0; display: flex; }
.kaydir-kutu > :first-child {
  flex: 1; min-width: 0;
  scrollbar-width: none;
}
.kaydir-kutu > :first-child::-webkit-scrollbar { display: none; }

/* Sezon yolundaki yatay çubuğun dik hâli: üstte ve altta yalın altın ok,
   aradaki koyu hatta camsı, altın çerçeveli tutamak. */
.dk-cubuk {
  flex: none;
  width: 22px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 8px 8px 8px 0;
}
.dk-cubuk[hidden] { display: none; }
.dk-ok {
  flex: none;
  width: 16px; height: 16px;
  display: grid; place-items: center;
  padding: 0;
  color: var(--gold);
  background: none; border: 0;
  opacity: .75;
  transition: opacity .15s, color .15s;
}
.dk-ok svg { width: 15px; height: 15px; stroke-width: 2.6; }
.dk-ok:hover:not(:disabled) { opacity: 1; color: var(--gold-hi); }
.dk-ok:disabled { opacity: .2; cursor: default; }
.dk-yol {
  position: relative; flex: 1;
  width: 12px;
  background: linear-gradient(90deg, #07090d, #151a23);
  border: 1px solid rgba(215, 165, 63, .35);
  border-radius: 999px;
  box-shadow: inset 2px 0 4px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .4);
  cursor: pointer;
}
.dk-tutamak {
  /* Hattın içine tam oturur: kenarı hattın kenarının üstüne biner. */
  position: absolute; top: 0; left: -1px; right: -1px;
  box-sizing: border-box;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(215, 165, 63, .34), rgba(185, 138, 46, .2));
  border: 1.5px solid rgba(215, 165, 63, .75);
  box-shadow: 0 0 6px rgba(242, 208, 137, .22);
  cursor: grab;
  will-change: transform;
  transition: box-shadow .15s, background .15s, border-color .15s;
}
.dk-tutamak:hover,
.dk-tutamak.is-tutuldu {
  background: linear-gradient(90deg, rgba(242, 208, 137, .42), rgba(215, 165, 63, .26));
  border-color: rgba(242, 208, 137, .9);
  box-shadow: 0 0 10px rgba(242, 208, 137, .35);
}
.dk-tutamak.is-tutuldu { cursor: grabbing; }

/* Liste hem tekerlekle hem basılı tutup sürükleyerek kayar. */
.gorev-liste {
  flex: 1; min-height: 0;
  margin: 0; padding: 0;
  list-style: none;
  display: flex; flex-direction: column;
  overflow-y: auto;
  cursor: grab;
  touch-action: pan-y;
}
.gorev-liste.is-grabbing { cursor: grabbing; user-select: none; }

/* Bölümler kutu içinde kutu değil, panelin eninde dilimler: altın tonlu
   başlık bandı (solda ad ve yenilenme süresi, sağda sandık), altında dört
   görev; band listeyle birlikte kayar. Bölümler altın bir çizgiyle
   ayrılır. */
.gorev-bolum { display: flex; flex-direction: column; }
.gorev-bolum + .gorev-bolum { border-top: 1px solid rgba(215, 165, 63, .28); }
.gb-bas {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px 8px 16px;
  background:
    linear-gradient(90deg, rgba(215, 165, 63, .14), rgba(215, 165, 63, .03) 70%),
    #171b23;
  border-bottom: 1px solid var(--panel-line);
}
.gb-baslik { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gb-baslik b { font-size: 14px; font-weight: 800; letter-spacing: 1.5px; color: var(--gold-hi); white-space: nowrap; }
.gb-baslik span { font-size: 11px; color: var(--txt-mute); }
.gb-kartlar { display: flex; flex-direction: column; gap: 8px; padding: 10px 6px 12px 12px; }

.gorev-kart + .gorev-grup { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--panel-line); }
.gorev-grup b { font-size: 12px; font-weight: 800; letter-spacing: 1.4px; color: var(--gold-hi); }
.gorev-grup span { font-size: 11px; color: var(--txt-mute); white-space: nowrap; }

.gorev-kart {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 14px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-md);
}
.gk-no {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: rgba(215, 165, 63, .12);
  border: 1px solid rgba(215, 165, 63, .3);
  font-size: 14px; font-weight: 700; color: var(--gold-hi);
}
.gk-no svg { width: 17px; height: 17px; stroke-width: 2.6; }
.gk-govde { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.gk-ust { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.gk-ad { font-size: 14px; font-weight: 600; color: var(--txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gk-sayi { flex: none; font-size: 12px; font-weight: 700; color: var(--txt-mute); }
/* Biten görev: numara yerine altın zeminde onay, çubuk dolu, yazı sönük. */
.gorev-kart.is-bitti { border-color: rgba(215, 165, 63, .35); background: rgba(215, 165, 63, .06); }
.gorev-kart.is-bitti .gk-no { color: #2a1c00; background: var(--gold); border-color: #6f5014; }
.gorev-kart.is-bitti .gk-ad { color: var(--txt-dim); }
.gorev-kart.is-bitti .gk-sayi { color: var(--gold-hi); }

/* Ödül satırı: kartın altında küçük para / elmas / sezon puanı; sağda AL.
   Alınmış görev sönük durur. */
.gk-alt { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.gk-odul { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gk-o { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--txt-dim); }
.gk-o .coin { width: 13px; height: 13px; }
.gk-o .gem { width: 13px; height: 13px; }
.sp-rozet {
  display: inline-grid; place-items: center;
  height: 13px; padding: 0 3px;
  font-size: 8px; font-weight: 900; letter-spacing: .3px; color: #2a1c00;
  background: var(--gold-hi); border-radius: 3px;
}
.gk-al {
  flex: none;
  height: 24px; padding: 0 14px;
  font-size: 11px; font-weight: 800; letter-spacing: 1.2px;
  color: #2a1c00;
  background: linear-gradient(180deg, #f8d67f 0%, var(--gold) 60%, #b4821f 100%);
  border: 1px solid #6f5014; border-radius: 6px;
}
.gk-al:hover { filter: brightness(1.08); }
/* Nabız: parlayan hâle ayrı bir katmanda, yalnızca saydamlığı canlanır.
   (Gölgeyi canlandırmak her karede yeniden çizim demekti; sezon yolunu
   kaydırırken kasmaya yol açıyordu.) */
@keyframes nabiz-parla { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.gk-al, .gb-sandik.is-hazir, .sz-odul.is-alinabilir { position: relative; }
.gk-al::before, .gb-sandik.is-hazir::before, .sz-odul.is-alinabilir::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 0 4px rgba(242, 208, 137, .18), 0 0 12px rgba(242, 208, 137, .45);
  opacity: 0;
  animation: nabiz-parla 1.8s ease-in-out infinite;
  will-change: opacity;
  pointer-events: none;
}
.gk-alindi { flex: none; font-size: 11px; font-weight: 700; color: var(--txt-mute); }
.gorev-kart.is-alindi { opacity: .6; }

/* Bölümün sandığı: başlık bandının sağında küçük bir düğme; köşesinde
   durumu. Kilitliyken sönük, hazırken parlar ve sallanır, açıldıktan sonra
   soluk. Basınca içindekileri gösteren kutu açılır (.sandik-balon). */
.gb-sandik {
  position: relative;
  flex: none;
  width: 50px; height: 44px;
  display: grid; place-items: center;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: background .15s, border-color .15s;
}
.gb-sandik:hover,
.gb-sandik.is-secili { background: rgba(215, 165, 63, .12); border-color: rgba(215, 165, 63, .45); }
.gb-sandik-ikon { width: 42px; height: 42px; display: grid; place-items: center; }
.gb-sandik-ikon svg { width: 40px; height: 40px; }
.gb-sandik.is-kilitli .gb-sandik-ikon { filter: grayscale(1) brightness(.65); opacity: .7; }
.gb-sandik.is-acildi .gb-sandik-ikon { filter: grayscale(.7) brightness(.75); opacity: .6; }
.gb-sandik.is-hazir .gb-sandik-ikon {
  filter: drop-shadow(0 0 7px rgba(242, 208, 137, .85));
  animation: sandik-salla 2.4s ease-in-out infinite;
}
.gb-sandik-kose {
  position: absolute; right: -3px; bottom: -3px;
  min-width: 24px; height: 16px; padding: 0 5px;
  display: grid; place-items: center;
  font-size: 9.5px; font-weight: 800; letter-spacing: .3px; line-height: 1;
  color: var(--gold-hi);
  background: #0d1015;
  border: 1px solid rgba(215, 165, 63, .5);
  border-radius: 999px;
}
.gb-sandik-kose svg { width: 10px; height: 10px; stroke-width: 3; }
.gb-sandik.is-hazir .gb-sandik-kose {
  color: #2a1c00;
  background: linear-gradient(180deg, #f8d67f 0%, var(--gold) 60%, #b4821f 100%);
  border-color: #6f5014;
}
.gb-sandik.is-acildi .gb-sandik-kose { color: var(--green-hi); border-color: rgba(71, 193, 115, .5); }

/* Sandığın kutusu: sağ sütunda, sandığın altında (yer yoksa üstünde);
   ok sandığı gösterir. İçinden çıkanlar alt alta, hazırsa altta AÇ. */
.sandik-balon {
  position: absolute; z-index: 20;
  width: 272px;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px 14px;
  background: linear-gradient(180deg, #232833 0%, #171b23 100%);
  border: 1px solid rgba(215, 165, 63, .6);
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), var(--shadow-2), 0 0 22px rgba(215, 165, 63, .12);
  animation: balon-ac .16s ease-out;
}
.sandik-balon::before {
  content: "";
  position: absolute; left: var(--ok-x, 50%); top: -7px;
  width: 12px; height: 12px; margin-left: -6px;
  background: #232833;
  border-left: 1px solid rgba(215, 165, 63, .6);
  border-top: 1px solid rgba(215, 165, 63, .6);
  transform: rotate(45deg);
}
.sandik-balon.is-ustte::before {
  top: auto; bottom: -7px;
  background: #171b23;
  border: 0;
  border-right: 1px solid rgba(215, 165, 63, .6);
  border-bottom: 1px solid rgba(215, 165, 63, .6);
}
@keyframes balon-ac { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sandik-balon.is-ustte { animation-name: balon-ac-ust; }
@keyframes balon-ac-ust { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.sb-bas { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sb-bas b { font-size: 13px; font-weight: 800; letter-spacing: 1.3px; color: var(--gold-hi); }
.sb-kapat {
  flex: none;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  color: var(--txt-mute);
  background: none; border: 1px solid transparent; border-radius: 6px;
}
.sb-kapat svg { width: 10px; height: 10px; stroke-width: 2.2; }
.sb-kapat:hover { color: var(--txt); background: rgba(255, 255, 255, .06); border-color: var(--panel-line); }

.sb-odul {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--panel-line);
  border-radius: 8px;
}
.sb-odul.is-kedi { border-color: rgba(168, 118, 255, .35); background: rgba(168, 118, 255, .07); }
.sb-kediler { flex: none; display: flex; }
.sb-kediler img {
  width: 30px; height: 30px;
  object-fit: cover; object-position: 50% 18%;
  background: #1b1f28;
  border: 1.5px solid #2a2140;
  border-radius: 50%;
}
.sb-kediler img + img { margin-left: -10px; }
.sb-ikon { flex: none; width: 30px; display: grid; place-items: center; }
.sb-ikon .coin, .sb-ikon .gem { width: 20px; height: 20px; }
.sb-yazi { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sb-yazi b { font-size: 13px; font-weight: 700; color: var(--txt); }
.sb-yazi i { font-style: normal; font-size: 11px; color: var(--txt-mute); }
.sb-odul.is-kedi .sb-yazi b { color: #c9a8ff; }
.sb-durum { margin: 0 2px; font-size: 11.5px; color: var(--txt-mute); }
.sandik-balon.is-hazir .sb-durum { color: var(--gold-hi); }
.sandik-balon.is-acildi .sb-durum { color: var(--green-hi); }
.sb-ac {
  height: 36px;
  font-size: 13px; font-weight: 800; letter-spacing: 1.3px;
  color: #2a1c00;
  background: linear-gradient(180deg, #f8d67f 0%, var(--gold) 60%, #b4821f 100%);
  border: 1px solid #6f5014; border-radius: 8px;
}
.sb-ac:hover { filter: brightness(1.08); }
@keyframes sandik-salla {
  0%, 70%, 100% { transform: rotate(0); }
  76% { transform: rotate(-9deg) scale(1.08); }
  82% { transform: rotate(8deg) scale(1.08); }
  88% { transform: rotate(-5deg); }
  94% { transform: rotate(3deg); }
}

/* ————————————————————————————— arkadaş paneli ve sohbet */

/* Sağ sütunun alt yarısı. Sohbet penceresi bu kutunun solunda açılır. */
.ark-kutu { position: relative; flex: 1 1 0; min-height: 0; display: flex; }

.ark-panel {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #191d25 0%, #12161d 100%);
  border: 1px solid var(--kart-kenar);
  border-radius: var(--r-lg);
  box-shadow: var(--kart-golge);
  overflow: hidden;
}

/* Başlık görevlerinkiyle aynı; solda ekle düğmesi, sağda katlama simgesi. */
.ap-bas {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 62px; padding: 14px 60px;
  border-bottom: 1px solid var(--panel-line);
}
.ap-bas b { font-size: 22px; font-weight: 800; letter-spacing: 1.2px; color: var(--txt); }
.ap-ekle-dugme {
  position: absolute; left: 14px; top: 50%;
  width: 38px; height: 38px; margin-top: -19px;
  display: grid; place-items: center;
  color: var(--gold-hi);
  background: rgba(215, 165, 63, .12);
  border: 1px solid rgba(215, 165, 63, .38);
  border-radius: 10px;
  transition: color .15s, background .15s, border-color .15s;
}
.ap-ekle-dugme svg { width: 20px; height: 20px; stroke-width: 2; }
.ap-ekle-dugme:hover,
.ap-ekle-dugme.is-on {
  color: #2a1c00;
  background: linear-gradient(180deg, #f8d67f 0%, var(--gold) 60%, #b4821f 100%);
  border-color: #6f5014;
}
.ap-ekle-dugme.is-on svg { width: 15px; height: 15px; stroke-width: 2.4; }

/* Ekle kipi: arama kutusu ve sonuçlar paneli kaplar (arkadaş listeleri
   bu kipte gizli); arama yokken altta gönderdiğin istekler durur. */
.ap-ekle {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 10px 10px;
}
/* Normal kipte listenin üstündeki "Arkadaş ara" kutusu. */
.ap-suz { flex: none; padding: 12px 10px 0; }
.ap-ara {
  flex: none;
  display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 6px 0 12px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--panel-line);
  border-radius: 9px;
}
.ap-ara:focus-within { border-color: rgba(215, 165, 63, .55); }
.ap-ara svg { flex: none; width: 17px; height: 17px; color: var(--txt-mute); stroke-width: 2; }
.ap-ara input {
  flex: 1; min-width: 0; height: 100%;
  padding: 0;
  font: inherit; font-size: 14px; color: var(--txt);
  background: none; border: 0; outline: none;
}
.ap-sonuc {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 6px;
  overflow-y: auto;
}
.ap-sonuc:empty { display: none; }
.ap-ekle .kaydir-kutu .dk-cubuk { padding: 0 0 0 6px; width: 20px; }
.ap-not { margin: 2px 2px 0; font-size: 12px; line-height: 1.5; color: var(--txt-mute); }

.ap-liste {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 6px 10px 10px;
  overflow-y: auto;
}
.ap-bos { margin: 14px 8px; font-size: 13px; line-height: 1.6; color: var(--txt-mute); text-align: center; }
.ap-bos b { color: var(--gold-hi); }

.ap-bolum { display: flex; flex-direction: column; gap: 6px; padding-bottom: 6px; }
.ap-bolum h4 {
  margin: 4px 4px 0;
  font-size: 11px; font-weight: 800; letter-spacing: 1.3px; color: var(--txt-mute);
}
.ap-bolum h4 em {
  font-style: normal; margin-left: 4px; padding: 1px 7px;
  font-size: 10px; color: #10131a; background: var(--gold-hi); border-radius: 999px;
}
/* Arkadaşlar iki liste: "ÇEVRİMİÇİ – 15" yeşil, "ÇEVRİMDIŞI – 4" sönük. */
.ap-grup + .ap-grup { margin-top: 4px; }
.ap-grup.is-cevrimici h4 { color: var(--green-hi); }

/* Bir kişi satırı: avatar, ad#etiket ve durumu; sağda rozet ya da düğmeler. */
.ap-kisi {
  flex: none;
  width: 100%;
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px;
  text-align: left;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-md);
  transition: border-color .15s, background .15s;
}
button.ap-kisi:hover { border-color: rgba(215, 165, 63, .45); background: rgba(215, 165, 63, .06); }
.ap-kisi.is-secili { border-color: rgba(215, 165, 63, .7); background: rgba(215, 165, 63, .11); }
.ap-kisi.is-istek { border-color: rgba(215, 165, 63, .3); }

/* Arkadaşın profil resmi (bkz. ui.apAvatarHtml). */
.ap-avatar {
  position: relative;
  flex: none;
  width: 36px; height: 36px;
  background: #20242c;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(242, 208, 137, .35);
}
.ap-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* Çevrimdışı arkadaş sönük; çevrimiçinin köşesinde yeşil nokta. */
.ap-avatar:not(.is-online) img { filter: grayscale(.75) brightness(.7); }
.ap-avatar:not(.is-online) { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .12); }
.ap-avatar i { display: none; }
.ap-avatar.is-online i {
  display: block;
  position: absolute; right: -1px; bottom: -1px;
  width: 11px; height: 11px;
  background: var(--green-hi);
  border: 2px solid #151920;
  border-radius: 50%;
}
.ap-kim { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ap-kim b {
  font-size: 14px; font-weight: 700; color: var(--txt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ap-kim b i { font-style: normal; margin-left: 2px; font-weight: 600; color: var(--gold); }
.ap-kim span { font-size: 11.5px; color: var(--txt-mute); }
.ap-avatar.is-online + .ap-kim span { color: var(--green-hi); }
.ap-kisi.is-istek .ap-kim span { color: var(--gold-hi); }

.ap-okunmamis {
  flex: none;
  min-width: 22px; height: 22px; padding: 0 6px;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800; color: #fff;
  background: #d9493f;
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(217, 73, 63, .25);
}

.ap-onay, .ap-red {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 8px;
  border: 1px solid var(--panel-line);
  background: rgba(255, 255, 255, .04);
  transition: color .15s, background .15s, border-color .15s;
}
.ap-onay { color: var(--green-hi); }
.ap-onay svg { width: 16px; height: 16px; stroke-width: 2.6; }
.ap-onay:hover { color: #0f2a18; background: var(--green-hi); border-color: #1f7a40; }
.ap-red { color: var(--txt-mute); }
.ap-red svg { width: 11px; height: 11px; stroke-width: 2.2; }
.ap-red:hover { color: #ff8a80; background: rgba(196, 54, 46, .14); border-color: rgba(196, 54, 46, .35); }

.ap-ekle-btn {
  flex: none;
  height: 30px; padding: 0 13px;
  font-size: 11px; font-weight: 800; letter-spacing: 1.1px;
  color: #2a1c00;
  background: linear-gradient(180deg, #f8d67f 0%, var(--gold) 60%, #b4821f 100%);
  border: 1px solid #6f5014; border-radius: 7px;
}
.ap-ekle-btn:hover { filter: brightness(1.08); }
.ap-durum { flex: none; font-size: 11px; font-weight: 700; color: var(--txt-mute); }
.ap-kisi.is-sonuc { padding: 6px 8px; }
.ap-kisi.is-sonuc .ap-avatar { width: 30px; height: 30px; font-size: 13px; }

/* Sohbet penceresi: arkadaş panelinin solunda, altları hizalı, boyu panel
   kadar. Başlıkta kimle konuşulduğu, altta yazı kutusu. */
.dm-pencere {
  position: absolute; right: calc(100% + 14px); bottom: 0; z-index: 5;
  width: 330px; height: 100%; min-height: 300px;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #1b2029 0%, #12161d 100%);
  border: 1px solid rgba(215, 165, 63, .4);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2), 0 0 0 1px rgba(0, 0, 0, .3);
  overflow: hidden;
  animation: dm-ac .18s ease-out;
}
@keyframes dm-ac { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }

.dm-bas {
  flex: none;
  display: flex; align-items: center; gap: 11px;
  padding: 11px 10px 11px 14px;
  background: rgba(215, 165, 63, .06);
  border-bottom: 1px solid var(--panel-line);
}
.dm-kapat {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  color: var(--txt-mute);
  background: none; border: 1px solid transparent; border-radius: 8px;
}
.dm-kapat svg { width: 11px; height: 11px; stroke-width: 2.2; }
.dm-kapat:hover { color: var(--txt); background: rgba(255, 255, 255, .06); border-color: var(--panel-line); }
/* Arkadaşlıktan çıkar: kapat düğmesinin yanında, üstüne gelince kırmızı. */
.dm-cikar svg { width: 17px; height: 17px; stroke-width: 1.9; }
.dm-cikar:hover { color: #ff8a80; background: rgba(196, 54, 46, .14); border-color: rgba(196, 54, 46, .35); }

.dm-mesajlar {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(215, 165, 63, .5) rgba(255, 255, 255, .05);
}
.dm-bos { margin: auto; padding: 0 20px; font-size: 13px; line-height: 1.6; color: var(--txt-mute); text-align: center; }
.dm-gun { display: flex; justify-content: center; margin: 4px 0 2px; }
.dm-gun span {
  padding: 2px 10px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .6px; color: var(--txt-mute);
  background: rgba(255, 255, 255, .05);
  border-radius: 999px;
}
/* Balon: onunkiler solda koyu, benimkiler sağda altın. */
.dm-msg {
  align-self: flex-start;
  max-width: 82%;
  display: flex; flex-direction: column; gap: 2px;
  padding: 7px 11px 5px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--panel-line);
  border-radius: 12px 12px 12px 4px;
}
.dm-msg p {
  margin: 0;
  font-size: 13.5px; line-height: 1.45; color: var(--txt);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.dm-msg time { align-self: flex-end; font-size: 10px; color: var(--txt-mute); }
.dm-msg.is-ben {
  align-self: flex-end;
  background: linear-gradient(180deg, rgba(240, 192, 99, .26), rgba(215, 165, 63, .18));
  border-color: rgba(215, 165, 63, .42);
  border-radius: 12px 12px 4px 12px;
}
.dm-msg.is-ben time { color: rgba(242, 208, 137, .7); }

.dm-yaz {
  flex: none;
  display: flex; align-items: center; gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--panel-line);
}
.dm-yaz input {
  flex: 1; min-width: 0;
  height: 40px; padding: 0 13px;
  font: inherit; font-size: 14px; color: var(--txt);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--panel-line);
  border-radius: 9px;
}
.dm-yaz input:focus { outline: none; border-color: rgba(215, 165, 63, .55); }
.dm-gonder {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  color: #2a1c00;
  background: linear-gradient(180deg, #f8d67f 0%, var(--gold) 60%, #b4821f 100%);
  border: 1px solid #6f5014; border-radius: 9px;
}
.dm-gonder svg { width: 18px; height: 18px; stroke-width: 2; }
.dm-gonder:hover { filter: brightness(1.08); }

/* Sandık penceresi: destansı kediler kart kart, biri seçilir. */
.sandik-pencere { width: 620px; }
.sandik-kediler { display: grid; grid-template-columns: repeat(auto-fit, 160px); justify-content: center; gap: 12px; }
.sandik-kedi {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 10px 12px;
  background: linear-gradient(180deg, #191d25 0%, #12161d 100%);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-md);
  transition: border-color .15s, background .15s, transform .15s;
}
.sandik-kedi img { width: 110px; height: 110px; object-fit: contain; }
.sandik-kedi b { font-size: 14px; color: var(--txt); }
.sandik-kedi i { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .6px; color: #a45cff; }
.sandik-kedi:hover { border-color: rgba(215, 165, 63, .45); transform: translateY(-2px); }
.sandik-kedi.is-secili {
  border-color: var(--gold-hi);
  background: linear-gradient(180deg, rgba(215, 165, 63, .16) 0%, #12161d 100%);
  box-shadow: 0 0 0 2px rgba(242, 208, 137, .35);
}
.sandik-ekler {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 16px; font-size: 13px; color: var(--txt-dim);
}
.sandik-ek { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--txt); }
.sandik-ek .coin, .sandik-ek .gem { width: 18px; height: 18px; }
.gk-cizgi {
  height: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .06);
  overflow: hidden;
}
.gk-cizgi i { display: block; height: 100%; background: var(--gold); }

/* ————————————————————————————— başlıktaki koleksiyon ve mağaza düğmeleri */

.lobby-head-sag { display: flex; align-items: center; gap: 14px; }

.head-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 20px 0 16px;
  font-size: 14px; font-weight: 800; letter-spacing: 1.3px;
  color: var(--gold-hi);
  background: rgba(215, 165, 63, .08);
  border: 1px solid rgba(215, 165, 63, .38);
  border-radius: 999px;
  transition: background .18s, border-color .18s, color .18s, filter .18s;
}
.head-btn svg { width: 19px; height: 19px; stroke-width: 1.9; }
.head-btn:hover,
.head-btn.is-on {
  color: #2a1c00;
  background: linear-gradient(180deg, #f0c063 0%, var(--gold) 55%, #b4821f 100%);
  border-color: #6f5014;
}

/* Mağaza hep dolu altın: başlıktaki asıl çağrı o. */

/* Uygulamayı kur (yalnızca telefonda, kurulu değilken görünür; bkz.
   js/uygulama.js). iPhone'da açılan pencerede adım adım tarif. */
.kurulum-adim {
  margin: 0; padding-left: 22px;
  display: grid; gap: 10px;
  font-size: 14px; line-height: 1.5; color: var(--txt-dim);
}
.kurulum-adim b { color: var(--txt); }
.kurulum-adim svg { width: 17px; height: 17px; vertical-align: -3px; stroke: var(--gold-hi); }

/* Toplanmayı bekleyen aylık paket ödülü sayısı. */
.head-rozet {
  position: absolute; right: -6px; top: -8px;
  min-width: 22px; height: 22px; padding: 0 6px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800; letter-spacing: 0; color: #fff;
  background: #d63a2f;
  border: 2px solid #12161d;
  border-radius: 999px;
}

/* Hesabı sıfırlama düğmesi: denemek için, o yüzden küçük ve sessiz. */
.head-sifirla {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  color: var(--txt-mute);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--panel-line);
  border-radius: 50%;
  transition: color .16s, border-color .16s, background .16s;
}
.head-sifirla svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.head-sifirla:hover { color: var(--red); border-color: rgba(196, 54, 46, .5); background: rgba(196, 54, 46, .12); }

/* ————————————————————————————— koleksiyon sayfası */

/* Bölüm şeridi: örnekteki gibi sayfanın üstünde yatay, altında ızgara. */
.kol-tabs {
  display: flex; gap: 30px;
  padding: 0 44px;
  border-bottom: 1px solid var(--panel-line);
}
.kol-tabs button {
  padding: 14px 0 15px;
  background: none; border: 0; border-bottom: 3px solid transparent;
  font-size: 14px; font-weight: 800; letter-spacing: 1.2px;
  color: var(--txt-mute);
}
.kol-tabs button:hover { color: var(--txt-dim); }
.kol-tabs button.on { color: var(--txt); border-bottom-color: var(--gold); }

/* Kartlar sitenin özel dikey çubuğuyla kayar (bkz. .kaydir-kutu, .dk-cubuk). */
.kol-kutu { flex: 1; min-height: 0; }
.kol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 400px));
  align-content: start;
  gap: 28px;
  padding: 30px 44px;
  overflow-y: auto;
}

/* Kozmetik kartı: üstte önizleme, altında adı, anlatımı ve TAK / ÇIKAR.
   Takılı olanın çerçevesi altına döner, köşesinde TAKILI rozeti. */
.koz-kart {
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px 16px 18px;
  background: linear-gradient(180deg, #25211a, #17150f);
  border: 2px solid rgba(215, 165, 63, .42);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 236, 170, .1), 0 12px 26px rgba(0, 0, 0, .45);
}
.koz-kart.is-takili {
  border-color: transparent;
  background:
    linear-gradient(180deg, #2c2414, #1a150c) padding-box,
    linear-gradient(160deg, #fff0b8 0%, #d7a53f 35%, #8a6416 62%, #f2d089 100%) border-box;
  box-shadow: 0 0 24px rgba(242, 208, 137, .25), 0 12px 26px rgba(0, 0, 0, .45);
}
.koz-rozet {
  position: absolute; right: 14px; top: 14px; z-index: 2;
  padding: 4px 10px;
  font-size: 11px; font-weight: 900; letter-spacing: 1.4px;
  color: #3a2500;
  background: linear-gradient(180deg, #ffe7a6, #d7a53f);
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}
.koz-onizleme {
  position: relative;
  height: 172px;
  overflow: hidden;
  background: radial-gradient(70% 70% at 50% 45%, #33333c 0%, #23232a 50%, #121216 100%);
  border: 1px solid rgba(215, 165, 63, .25);
  border-radius: 12px;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
}
.koz-bilgi b { font-size: 21px; font-weight: 900; color: #fff4d6; text-shadow: 0 2px 0 rgba(60, 40, 5, .9); }
.koz-kart .mg-fiyat { align-self: flex-start; min-width: 130px; }

/* Kart tıklanabilir: üstüne gelince kalkar, çerçevesi parlar, önizleme
   hafifçe büyür ve köşesinde BÜYÜT / İZLE ipucu belirir. */
.koz-kart { cursor: pointer; transition: transform .18s, box-shadow .18s, border-color .18s; }
.koz-kart:hover, .koz-kart:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(242, 208, 137, .8);
  box-shadow: 0 0 24px rgba(242, 208, 137, .28), 0 18px 34px rgba(0, 0, 0, .5);
  outline: none;
}
.koz-kart.is-takili:hover { box-shadow: 0 0 32px rgba(242, 208, 137, .42), 0 18px 34px rgba(0, 0, 0, .5); }
.koz-onizleme { transition: border-color .18s; }
.koz-kart:hover .koz-onizleme { border-color: rgba(242, 208, 137, .6); }
.koz-kart:hover .istaka-onizleme { transform: translate(-50%, -50%) scale(.47); }
.koz-kart:hover .efekt-onizleme { transform: scale(1.06); }
.efekt-onizleme { transition: transform .25s; }
.koz-ipucu {
  position: absolute; right: 10px; bottom: 10px; z-index: 4;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px 5px 8px;
  font-size: 11.5px; font-weight: 900; letter-spacing: 1.2px;
  color: #3a2500;
  background: linear-gradient(180deg, #ffe7a6, #d7a53f);
  border-radius: 999px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .5);
  opacity: 0; transform: translateY(4px);
  transition: opacity .18s, transform .18s;
  pointer-events: none;
}
.koz-ipucu svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.koz-ipucu svg path[d^="M8 5.5"] { fill: currentColor; stroke: none; }
.koz-kart:hover .koz-ipucu, .koz-kart:focus-visible .koz-ipucu { opacity: 1; transform: none; }

/* Büyük kart (kozmetiği incele): geniş pencere; ıstaka yakından ve masada,
   efekt kaydırılabilir iki sayfada, masanın küçük kopyasında oynar. */
.modal.is-genis { width: 980px; max-height: 1010px; }
.koz-incele .modal-body { display: flex; flex-direction: column; gap: 14px; }
.koz-incele .modal-foot { justify-content: center; }
/* Kartın iki yanında, dışında: önceki / sonraki parça. Okun altında adı.
   Yanlardaki boşluğun ortasında durur (kart 980px, ortada). */
.koz-gez {
  position: absolute; top: 50%; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 0;
  background: none; border: 0;
  translate: -50% -50%;           /* açılış animasyonu `transform` kullanıyor */
  animation: modal-in .22s ease-out;
}
.koz-gez.is-sol { left: calc((50% - 490px) / 2); }
.koz-gez.is-sag { left: calc(100% - (50% - 490px) / 2); }
.koz-gez-ok {
  width: 68px; height: 68px;
  display: grid; place-items: center;
  color: #3a2500;
  background: linear-gradient(180deg, #ffe7a6, #d7a53f);
  border: 1px solid #6f5014;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(242, 208, 137, .12), 0 8px 20px rgba(0, 0, 0, .6);
  transition: transform .15s, filter .15s, box-shadow .15s;
}
.koz-gez-ok svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2.8; }
.koz-gez-ad {
  max-width: 200px;
  font-size: 14px; font-weight: 800; letter-spacing: .3px; text-align: center;
  color: var(--txt-dim);
  transition: color .15s;
}
.koz-gez:hover .koz-gez-ok, .koz-gez:focus-visible .koz-gez-ok {
  transform: scale(1.08); filter: brightness(1.08);
  box-shadow: 0 0 0 7px rgba(242, 208, 137, .2), 0 0 26px rgba(242, 208, 137, .35), 0 8px 20px rgba(0, 0, 0, .6);
}
.koz-gez:hover .koz-gez-ad, .koz-gez:focus-visible .koz-gez-ad { color: var(--gold-hi); }
.koz-gez:focus-visible { outline: none; }
.ib-on {
  --ib-olcek: 1.1;
  position: relative; flex: none;
  height: 250px;
  perspective: 1400px;
  background: radial-gradient(70% 70% at 50% 45%, #33333c 0%, #23232a 50%, #121216 100%);
  border: 1px solid rgba(215, 165, 63, .3);
  border-radius: 12px;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
  overflow: hidden;
}
/* Ön ve arka yüz aynı yerde; ARKASI'na basınca ıstaka yatay eksende takla
   atar (bkz. ui.istakaInceleHtml). Arka yüz, rakip ıstakasının arka yüzüdür:
   aynı sınıflar, düz ve büyük (720 × 101, oyundakinin iki katı). */
.ib-on .istaka-onizleme,
.ib-on .istaka-arka {
  top: 45%;
  transition: transform .55s cubic-bezier(.4, .1, .25, 1), opacity .28s;
  backface-visibility: hidden;
}
.ib-on .istaka-onizleme { transform: translate(-50%, -50%) scale(var(--ib-olcek)); }
.ib-on .istaka-arka {
  --ri-en: 720px; --ri-derin: 101px; --ri-yuz-boy: 101px; --ri-egim: 0deg;
  left: 50%;
  transform: translate(-50%, -50%) rotateX(180deg) scale(var(--ib-olcek));
  opacity: 0;
  pointer-events: none;
}
.ib-on .istaka-arka .ri-yuz { border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55), 0 12px 26px rgba(0, 0, 0, .6); }
.ib-on.is-arka .istaka-onizleme { transform: translate(-50%, -50%) rotateX(-180deg) scale(var(--ib-olcek)); opacity: 0; }
.ib-on.is-arka .istaka-arka { transform: translate(-50%, -50%) scale(var(--ib-olcek)); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ib-on .istaka-onizleme, .ib-on .istaka-arka { transition: opacity .2s; } }
.ib-cevir {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  height: 30px; padding: 0 12px 0 9px;
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 900; letter-spacing: 1px;
  color: var(--gold-hi);
  background: rgba(10, 11, 14, .72);
  border: 1px solid rgba(215, 165, 63, .5);
  border-radius: 8px;
  transition: background .15s, border-color .15s;
}
.ib-cevir svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ib-cevir:hover, .ib-cevir:focus-visible { background: rgba(40, 32, 14, .85); border-color: var(--gold); outline: none; }
.em-bas b { display: block; font-size: 14px; font-weight: 900; letter-spacing: 1.6px; color: var(--gold-hi); }
/* Örnek masa: oyundaki masanın tasarım ölçüsünde kurulur, kartın enine
   küçültülür; üstteki ve alttaki boş şerit kırpılır (--em-ust, --em-boy). */
.em-cerceve {
  --em-ust: 60px;
  --em-boy: 900px;
  position: relative; flex: none;
  overflow: hidden;
  background: radial-gradient(80% 90% at 50% 40%, #1b1f27, #0a0c10);
  border: 1px solid rgba(215, 165, 63, .3);
  border-radius: 12px;
}
.em-sahne {
  position: absolute; left: 0; top: 0;
  width: 1904px; height: 1070px;
  transform-origin: 0 0;
  pointer-events: none;
}
/* Kaydırıcı: sayfalar yan yana bir şeritte; şerit kayar. */
.em-kaydirici { position: relative; overflow: hidden; touch-action: pan-y; user-select: none; }
/* Sayfalar arası boşluk: yuvarlamada komşu sayfanın kenarı sızmasın. */
.em-serit { display: flex; gap: 40px; transition: transform .38s cubic-bezier(.3, .7, .3, 1); }
.em-serit.is-surukle { transition: none; }
.em-sayfa { flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
/* Sayfa okları kartın içinde, sade: koyu cam, altın çerçeve ve ok. (Kartın
   dışındaki dolu altın oklar başka parçaya geçer; karışmasınlar.) */
.em-ok {
  position: absolute; top: calc(50% + 24px); z-index: 5;
  width: 42px; height: 42px; margin-top: -21px;
  display: grid; place-items: center;
  color: var(--gold-hi);
  background: rgba(8, 10, 14, .72);
  border: 1.5px solid rgba(242, 208, 137, .6);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .55);
  backdrop-filter: blur(2px);
  transition: transform .15s, background .15s, border-color .15s;
}
.em-ok:hover { transform: scale(1.06); background: rgba(40, 32, 16, .85); border-color: #ffe08f; }
.em-ok svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.8; }
.em-ok.is-sol { left: 12px; }
.em-ok.is-sag { right: 12px; }
.em-noktalar { display: flex; justify-content: center; gap: 8px; }
.em-noktalar button {
  width: 10px; height: 10px; padding: 0;
  background: rgba(255, 255, 255, .22);
  border: 0; border-radius: 999px;
  transition: width .2s, background .2s;
}
.em-noktalar button.on { width: 26px; background: var(--gold-hi); }

/* Istaka önizlemesi: gerçek ıstakanın küçüğü (aynı parçalar, aynı görünüm
   sınıfları), taşsız, önizlemenin ortasında. */
.istaka-onizleme {
  position: absolute; left: 50%; top: 50%;
  width: 794px; height: 163px;
  transform: translate(-50%, -50%) scale(.44);
  background: #0a0a0a;
  border-radius: 5px 5px 4px 4px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .6);
}

/* Efekt önizlemesi: masada tek taş; üstüne döne döne yıldırım düşer ya da
   alev topu iner. */
.efekt-onizleme { position: absolute; inset: 0; }
.eo-zemin {
  position: absolute; left: 50%; top: 72%;
  width: 240px; height: 60px; margin: -30px 0 0 -120px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}
.eo-tas.tile { position: absolute; left: 50%; top: 72%; --ts: .9; translate: -50% -85%; }
.eo-simsek {
  position: absolute; left: 50%; top: 0;
  width: 60px; height: 124px; margin-left: -34px;
  fill: none; stroke: #fff; stroke-width: 3; stroke-linejoin: round;
  filter: drop-shadow(0 0 4px #7cc8ff) drop-shadow(0 0 10px #7cc8ff);
  opacity: 0;
  animation: eo-simsek 2.4s linear infinite;
}
.eo-parlama {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 66%, rgba(200, 230, 255, .7), rgba(120, 180, 255, .15) 40%, rgba(0, 0, 0, 0) 70%);
  opacity: 0;
  animation: eo-parlama 2.4s linear infinite;
}
@keyframes eo-simsek { 0%, 55% { opacity: 0; } 57% { opacity: 1; } 62% { opacity: .2; } 66% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes eo-parlama { 0%, 56% { opacity: 0; } 58% { opacity: 1; } 80%, 100% { opacity: 0; } }
.eo-top {
  position: absolute; left: 50%; top: 66%;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 42%, #fffbe0 0%, #ffd36b 24%, #ff8a2a 50%, #e0380f 68%, rgba(200, 40, 10, 0) 74%);
  box-shadow: 0 0 22px 8px rgba(255, 120, 30, .5);
  opacity: 0;
  animation: eo-top 2.4s cubic-bezier(.55, 0, .9, .45) infinite;
}
@keyframes eo-top {
  0% { opacity: 1; transform: translate(90px, -150px) scale(.5); }
  28% { opacity: 1; transform: translate(0, 0) scale(1.1); }
  30%, 100% { opacity: 0; transform: translate(0, 0) scale(1.4); }
}
.eo-halka {
  position: absolute; left: 50%; top: 66%;
  width: 60px; height: 60px; margin: -30px 0 0 -30px;
  border: 3px solid rgba(255, 170, 70, .9);
  border-radius: 50%;
  opacity: 0;
  animation: eo-halka 2.4s ease-out infinite;
}
@keyframes eo-halka { 0%, 27% { opacity: 0; transform: scale(.2, .1); } 29% { opacity: 1; } 60%, 100% { opacity: 0; transform: scale(3.4, 1.3); } }
.eo-alev {
  position: absolute; left: calc(50% - 44px + var(--i) * 22px); top: 70%;
  width: 22px; height: 40px;
  translate: -50% -100%;
  transform-origin: 50% 100%;
  border-radius: 50% 50% 35% 35% / 65% 65% 35% 35%;
  background: radial-gradient(ellipse at 50% 85%, #fff5c8 0%, #ffd05a 22%, #ff7a22 50%, rgba(214, 46, 10, .85) 68%, rgba(180, 30, 10, 0) 80%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: eo-alev 2.4s ease-out infinite, ef-alev-titre .24s ease-in-out infinite;
  animation-delay: calc(var(--i) * 40ms), 0s;
}
@keyframes eo-alev { 0%, 30% { opacity: 0; scale: 1 .2; } 38% { opacity: 1; scale: 1 1; } 80% { opacity: 1; scale: 1 1; } 95%, 100% { opacity: 0; scale: .8 .4; } }

/* ————————————————————————————— sezon bileti sayfası */

.sezon-bar {
  display: flex; align-items: center; gap: 22px;
  padding: 18px 44px;
  background: linear-gradient(180deg, rgba(215, 165, 63, .1), rgba(215, 165, 63, 0));
}
.sz-ad { font-size: 20px; font-weight: 800; letter-spacing: 1.6px; color: var(--gold-hi); }
.sz-seviye { font-size: 14px; letter-spacing: 1px; color: var(--txt-mute); }
.sz-seviye b { margin-left: 6px; font-size: 20px; color: var(--txt); }

/* Sezon puanı çubuğu: dolu kısım altın, üstünde sayı. */
.sz-xp {
  position: relative; flex: 1; max-width: 520px; height: 26px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  overflow: hidden;
}
.sz-xp i {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(180deg, #f0c063, var(--gold) 60%, #b4821f);
}
.sz-xp em {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .6px;
  color: var(--txt);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}

.sz-bilet {
  margin-left: auto; height: 42px; padding: 0 22px;
  font-size: 14px; font-weight: 800; letter-spacing: 1.2px;
  color: #2a1c00;
  background: linear-gradient(180deg, #f0c063 0%, var(--gold) 55%, #b4821f 100%);
  border-color: #6f5014;
}
.sz-bilet.is-var {
  color: var(--gold-hi);
  background: rgba(215, 165, 63, .12);
  border-color: rgba(215, 165, 63, .45);
}

/* ————————————————————————————— seviye yolu */

.sezon-yol {
  /* Ödül boyu ve satır yükseklikleri: ücretsiz satır bir hücre, biletli
     satır iki hücre (ek ödül) kadar. Yol dikeyde ortalanır. */
  --sz-hucre: 125px;
  --sz-ust: calc(var(--sz-hucre) + 18px);
  --sz-alt: calc(var(--sz-hucre) * 2 + 10px + 18px);
  flex: 1; min-height: 0;
  display: flex; align-items: center;
  overflow-x: auto; overflow-y: hidden;
  /* Tarayıcının çubuğu gizli; yerine alttaki .sz-cubuk. */
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-x;
}
.sezon-yol::-webkit-scrollbar { display: none; }

/* Özel kaydırma çubuğu. Solda ve sağda yalın altın oklar; aradaki ince
   hatta ulaşılan seviyeye kadar altın dolgu. Üstünde
   ince altın çerçeveli, camsı bir pencere (tutamak) ekranda görünen kısmı
   gösterir: sürüklenir, hatta tıklanınca oraya kayar. */
.sz-cubuk {
  display: flex; align-items: center; gap: 14px;
  padding: 2px 44px 20px 150px;
}
.sz-cubuk[hidden] { display: none; }
.sz-cubuk-ok {
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  padding: 0;
  color: var(--gold);
  background: none; border: 0;
  opacity: .75;
  transition: opacity .15s, color .15s;
}
/* Yalnızca ok: çember yok. */
.sz-cubuk-ok svg { width: 22px; height: 22px; stroke-width: 2.4; }
.sz-cubuk-ok:hover { opacity: 1; color: var(--gold-hi); }
.sz-cubuk-ok:disabled { opacity: .2; cursor: default; }
.sz-cubuk-yol {
  position: relative; flex: 1;
  height: 12px;
  background: linear-gradient(180deg, #07090d, #151a23);
  border: 1px solid rgba(215, 165, 63, .35);
  border-radius: 999px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .4);
  cursor: pointer;
}
.sz-cubuk-dolu {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #6f5014, #b98a2e 70%, #d7a53f);
  box-shadow: 0 0 5px rgba(242, 208, 137, .25);
  pointer-events: none;
}
.sz-cubuk-tutamak {
  /* Hattın içine tam oturur: kenarı hattın kenarının üstüne biner. */
  position: absolute; left: 0; top: -1px; bottom: -1px;
  box-sizing: border-box;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 240, 200, .12), rgba(255, 240, 200, .04));
  border: 1.5px solid rgba(215, 165, 63, .7);
  box-shadow: 0 0 6px rgba(242, 208, 137, .22);
  cursor: grab;
  will-change: transform;
  transition: box-shadow .15s, background .15s, border-color .15s;
}
.sz-cubuk-tutamak:hover,
.sz-cubuk-tutamak.is-tutuldu {
  background: linear-gradient(180deg, rgba(255, 240, 200, .18), rgba(255, 240, 200, .07));
  border-color: rgba(242, 208, 137, .85);
  box-shadow: 0 0 10px rgba(242, 208, 137, .35);
}
.sz-cubuk-tutamak.is-tutuldu { cursor: grabbing; }
.sezon-yol.is-grabbing { cursor: grabbing; user-select: none; }

/* Sıra adları solda sabit durur, yol altından kayar. */
.sz-etiketler {
  position: sticky; left: 0; z-index: 2;
  flex: 0 0 auto; width: 150px;
  /* Boydan boya uzanır (zemini kayan ödülleri örter), içerik ortada. */
  align-self: stretch; align-content: center;
  display: grid; grid-template-rows: var(--sz-ust) 54px var(--sz-alt);
  padding: 18px 14px 18px 44px;
  background: linear-gradient(90deg, var(--bg-1) 70%, rgba(14, 17, 23, 0));
}
.sz-etiket {
  display: grid; place-items: center;
  font-size: 13px; font-weight: 800; letter-spacing: 1.2px;
  color: var(--txt-mute);
  text-align: center;
}
.sz-etiket-premium { color: var(--gold-hi); }
/* Etiketler ödül satırlarının hizasında: ücretsiz çizginin üstünde, bilet
   çizginin altında (bkz. .sz-grup). */
.sz-etiketler .sz-etiket:first-child { align-self: end; height: var(--sz-hucre); margin-bottom: 18px; }
.sz-etiketler .sz-etiket-premium { align-self: start; height: var(--sz-hucre); margin-top: 18px; }

.sz-kolonlar {
  flex: 0 0 auto; display: flex; padding: 18px 44px 18px 0;
  /* Kayan içerik tek bir katman: kaydırırken yeniden çizilmez, taşınır. */
  will-change: transform;
}

.sz-kolon {
  flex: 0 0 auto; width: 158px;
  display: grid; grid-template-rows: var(--sz-ust) 54px var(--sz-alt); gap: 0;
  justify-items: center;
}
/* Bir sıranın ödül(leri). Ücretsiz sıra çizgiye doğru (alta), biletli sıra
   çizgiden aşağı dizilir: ana ödüller her kolonda aynı hizada kalır, ek
   ödül ana ödülün altına gelir. */
.sz-grup { display: flex; flex-direction: column; gap: 10px; }
.sz-grup.is-u { align-self: end; margin-bottom: 18px; }
.sz-grup.is-b { align-self: start; margin-top: 18px; }

/* Ödül kutusu: içi boş, ödüller henüz tanımlı değil. */
.sz-odul {
  position: relative;
  width: var(--sz-hucre); height: var(--sz-hucre);
  align-self: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 8px 4px 6px;
  background: linear-gradient(180deg, #191d25 0%, #12161d 100%);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-md);
  cursor: default;
  transition: border-color .15s, transform .15s;
}
/* Simge ve miktar: para, elmas, mama, bilet ya da kedinin kendisi. */
.sz-ikon { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; }
.sz-ikon .coin { width: 46px; height: 46px; }
.sz-ikon .gem { width: 48px; height: 48px; }
.sz-ikon .mama svg { width: 55px; height: 55px; }
.sz-ikon .bilet svg { width: 55px; height: 55px; }
.sz-ikon .odul-kedi { width: 80px; height: 80px; object-fit: contain; }
.sz-miktar { font-size: 15px; font-weight: 800; color: var(--txt); white-space: nowrap; }
/* Kediler tier rengiyle belli: destansı mor, efsanevi turuncu hâleli. */
.sz-odul.is-destansi { border-color: rgba(164, 92, 255, .45); background: linear-gradient(180deg, rgba(164, 92, 255, .14) 0%, #12161d 100%); }
.sz-odul.is-destansi .sz-miktar { color: #c79bff; }
.sz-odul.is-efsanevi { border-color: rgba(240, 169, 58, .7); background: linear-gradient(180deg, rgba(240, 169, 58, .22) 0%, #12161d 100%); }
.sz-odul.is-efsanevi .sz-miktar { color: #ffc56b; }
.sz-odul.is-efsanevi .sz-ikon { filter: drop-shadow(0 0 8px rgba(240, 169, 58, .6)); }
/* Açılmamış seviye sönük. */
.sz-odul:not(.is-acik) .sz-ikon, .sz-odul:not(.is-acik) .sz-miktar { opacity: .55; }
/* Biletsizken biletli sıra kilitli: köşede kilit. */
.sz-odul.is-kilitli { border-style: dashed; }
.sz-odul.is-kilitli .sz-ikon, .sz-odul.is-kilitli .sz-miktar { opacity: .4; filter: grayscale(.5); }
.sz-kilit {
  position: absolute; right: 6px; top: 6px;
  width: 18px; height: 18px;
  fill: none; stroke: var(--txt-dim); stroke-width: 1.8; stroke-linecap: round;
}
/* Alınabilir: altın çerçeve, nabız; tıklanır. */
.sz-odul.is-alinabilir {
  cursor: pointer;
  border-color: var(--gold-hi);
}
.sz-odul.is-alinabilir:hover { transform: translateY(-3px); }
/* Alınmış: soluk, köşede altın onay. */
.sz-odul.is-alindi .sz-ikon, .sz-odul.is-alindi .sz-miktar { opacity: .35; }
.sz-tik {
  position: absolute; right: 6px; top: 6px;
  width: 20px; height: 20px; display: grid; place-items: center;
  color: #2a1c00; background: var(--gold); border-radius: 50%;
}
.sz-tik svg { width: 13px; height: 13px; stroke-width: 3; }

/* Ortadaki seviye çizgisi ve numarası. */
.sz-orta { position: relative; width: 100%; display: grid; place-items: center; }
.sz-orta::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; margin-top: -1px;
  background: var(--panel-line);
}
.sz-no {
  position: relative;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--panel-2);
  border: 1px solid var(--panel-line);
  font-size: 13px; font-weight: 800; color: var(--txt-mute);
}
.sz-kolon.is-acik .sz-no {
  color: #2a1c00;
  background: linear-gradient(180deg, #f0c063, var(--gold));
  border-color: #6f5014;
}
.sz-etiket-orta { position: relative; }

/* ————————————————————————————— masa ücreti */

.lb-ucret { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--txt-dim); }
.lb-ucret select {
  height: 42px; padding: 0 12px;
  font: inherit; font-size: 15px; font-weight: 700; color: var(--gold-hi);
  background: var(--panel); border: 1px solid rgba(215, 165, 63, .35); border-radius: 8px;
}
.lb-ucret select:focus { outline: none; border-color: rgba(215, 165, 63, .7); }

.lt-ucret { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--gold-hi); font-weight: 700; }
.lt-ucret .coin { width: 16px; height: 16px; }

.kasa-satir {
  margin: 10px 0 0;
  text-align: center; font-size: 15px; color: var(--txt-dim);
}
.kasa-satir b { color: var(--gold-hi); }

/* Arkadaşlar sayfasındaki küçük altın düğme (ekle, kabul et). */
.seat-add {
  margin-top: 6px; height: 30px; padding: 0 14px;
  font-size: 13px; font-weight: 700;
  color: var(--gold-hi);
  background: rgba(215, 165, 63, .1);
  border: 1px solid rgba(215, 165, 63, .35);
  border-radius: 8px;
}
.seat-add:hover { color: #2a1c00; background: var(--gold); border-color: #6f5014; }

.menu-go:disabled { opacity: .45; cursor: default; filter: grayscale(.4); }

/* ————————————————————————————— dükkân kartları */

.shop-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  margin-bottom: 14px;
}
.shop-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 12px;
  background: linear-gradient(170deg, #1d222b, #13171e);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-md);
  transition: border-color .18s, transform .18s;
}
.shop-item:hover:not(:disabled) { border-color: rgba(215, 165, 63, .5); transform: translateY(-2px); }
.shop-item:disabled { opacity: .45; cursor: default; }
/* Elmas yetmiyor: basılır (yetersiz elmas penceresi açılır), bedel kırmızı. */
.shop-item.is-yetmez .shop-fiyat { color: #ff9a8f; border-color: rgba(255, 120, 105, .35); background: rgba(255, 110, 95, .08); }

/* ——— Yetersiz elmas penceresi: ortada başlık şeridi, ışıklar içinde elmas
   yığını, çevresinde süzülen birkaç elmas, tek altın düğme (bkz. ui.elmasYetmedi). */
.modal.elmas-yok { width: 500px; }
.elmas-yok .modal-head { position: relative; justify-content: center; padding: 22px 22px 8px; border-bottom: 0; }
.elmas-yok .modal-head h2 {
  padding: 7px 30px 8px;
  font-family: 'Archivo Black', Inter, sans-serif; font-weight: 400; font-size: 20px; letter-spacing: 1.2px;
  color: #ffe6a0;
  background: linear-gradient(180deg, #2c3039, #14171d);
  border: 1px solid rgba(215, 165, 63, .55);
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.elmas-yok .modal-x { position: absolute; right: 14px; top: 14px; }
.elmas-yok .modal-body { padding: 8px 22px 4px; }
.elmas-yok .modal-foot { justify-content: center; padding: 8px 22px 24px; border-top: 0; }
.ey-sahne {
  position: relative;
  height: 210px;
  overflow: hidden;
  background: radial-gradient(70% 85% at 50% 60%, #6d5220 0%, #3b2d12 48%, #1a150b 100%);
  border: 1px solid rgba(215, 165, 63, .32);
  border-radius: 12px;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .6);
}
.ey-isik {
  position: absolute; left: 50%; top: 58%;
  width: 460px; height: 460px; margin: -230px 0 0 -230px;
  background: repeating-conic-gradient(from 0deg, rgba(255, 232, 170, .15) 0 7deg, rgba(255, 232, 170, 0) 7deg 17deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 15%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 15%, transparent 100%);
  animation: ey-don 60s linear infinite;
}
.ey-yigin {
  position: absolute; left: 50%; top: 32px;
  width: 220px; height: 106px; margin-left: -110px;
  transform: scale(1.45); transform-origin: 50% 0;
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .45)) drop-shadow(0 0 18px rgba(110, 190, 255, .3));
}
.ey-yigin .gem { position: absolute; }
.ey-ucan {
  position: absolute;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .45));
  animation: ey-suz 3.4s ease-in-out infinite;
}
.ey-ucan .gem { display: block; width: 100%; height: 100%; }
.ey-ucan.is-1 { left: 46px; top: 34px; width: 30px; height: 30px; rotate: -18deg; }
.ey-ucan.is-2 { right: 50px; top: 24px; width: 38px; height: 38px; rotate: 16deg; animation-delay: -1.2s; }
.ey-ucan.is-3 { left: 74px; bottom: 28px; width: 22px; height: 22px; rotate: 22deg; animation-delay: -2.1s; }
.ey-ucan.is-4 { right: 82px; bottom: 38px; width: 24px; height: 24px; rotate: -10deg; animation-delay: -.6s; }
@keyframes ey-suz { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes ey-don { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .ey-isik, .ey-ucan { animation: none; } }
.ey-yazi { margin: 14px 0 0; text-align: center; font-size: 15px; font-weight: 600; color: var(--txt); }
.ey-yazi b { display: inline-flex; align-items: center; gap: 5px; font-weight: 900; color: #a8dcff; }
.ey-yazi b .gem { width: 16px; height: 16px; }
.ey-yazi span { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 500; color: var(--txt-dim); }
.ey-al { min-width: 230px; }

.shop-ust { display: flex; align-items: center; gap: 8px; }
.shop-ust b { font-size: 19px; font-weight: 800; color: var(--txt); }
.shop-bonus {
  padding: 2px 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  color: var(--green-hi);
  background: rgba(47, 158, 87, .14);
  border: 1px solid rgba(71, 193, 115, .3);
  border-radius: 999px;
}
.shop-fiyat {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  font-size: 14px; font-weight: 800; color: var(--gold-hi);
  background: rgba(215, 165, 63, .1);
  border: 1px solid rgba(215, 165, 63, .3);
  border-radius: 999px;
}
.shop-fiyat.is-tl { color: var(--txt); background: rgba(255, 255, 255, .06); border-color: var(--panel-line); }

/* Davet penceresindeki arkadaş satırının profil resmi. */
.ark-avatar {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  background: #20242c;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(242, 208, 137, .35);
}
.ark-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ————————————————————————————— kediler

   Mağazanın dilinde: altın başlık, koyu kartlar, altın çerçeveler, sayfanın
   dibinde altın ışık. Ortada başlık, özet ve kartlar; sağda iki gözlü
   envanter (bkz. ui.petBolumHtml). Kartın rengi kedinin tier rengi (--tier). */
.kd-sayfa {
  flex: 1; min-height: 0;
  position: relative; isolation: isolate;
  display: flex; align-items: flex-start; justify-content: center; gap: 34px;
  padding: 26px 44px 30px;
  overflow-y: auto; scrollbar-width: thin;
}
.kd-sayfa::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: radial-gradient(70% 46% at 50% 110%, rgba(240, 180, 70, .26) 0%, rgba(215, 150, 50, .1) 45%, rgba(0, 0, 0, 0) 76%);
}
.kd-ana { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 18px; }

/* Özet: takılı yuvalar (beş elmas biçimli göz) ve toplam altın artışı. */
.kd-ozet { display: flex; gap: 14px; }
.kd-yuvalar, .kd-toplam {
  display: flex; align-items: center; gap: 12px;
  height: 46px; padding: 0 18px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  color: var(--txt-dim);
  background: linear-gradient(180deg, rgba(38, 33, 24, .92), rgba(22, 20, 15, .92));
  border: 1px solid rgba(215, 165, 63, .35);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 236, 170, .06);
}
.kd-yuvalar b, .kd-toplam b { font-size: 18px; font-weight: 900; letter-spacing: 0; color: var(--gold-hi); }
.kd-yuva-sira { display: flex; gap: 7px; }
.kd-yuva-sira i {
  width: 12px; height: 12px;
  background: rgba(0, 0, 0, .35);
  border: 1.5px solid rgba(215, 165, 63, .5);
  border-radius: 3px;
  rotate: 45deg;
}
.kd-yuva-sira i.on {
  background: linear-gradient(180deg, #ffe7a6, #d7a53f);
  border-color: #fff0b8;
  box-shadow: 0 0 8px rgba(242, 208, 137, .6);
}

.kd-grid { display: grid; grid-template-columns: repeat(3, 268px); gap: 22px; }

.kd-kart {
  position: relative;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #25211a, #17150f);
  border: 2px solid rgba(215, 165, 63, .35);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 236, 170, .08), 0 12px 26px rgba(0, 0, 0, .45);
  overflow: hidden;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.kd-kart:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--tier) 65%, #f2d089);
  box-shadow: 0 0 22px color-mix(in srgb, var(--tier) 30%, transparent), 0 16px 30px rgba(0, 0, 0, .5);
}
/* Takılı kedi: kozmetik kartlarındaki gibi altın çerçeve. */
.kd-kart.is-takili {
  border-color: transparent;
  background:
    linear-gradient(180deg, #2c2414, #1a150c) padding-box,
    linear-gradient(160deg, #fff0b8 0%, #d7a53f 35%, #8a6416 62%, #f2d089 100%) border-box;
  box-shadow: 0 0 24px rgba(242, 208, 137, .25), 0 12px 26px rgba(0, 0, 0, .45);
}

/* Sahne: tier renginde ışık ve hafif ışınlar, önünde kedi. */
.kd-sahne {
  position: relative;
  height: 200px;
  display: grid; place-items: center;
  overflow: hidden;
  background:
    radial-gradient(58% 66% at 50% 62%, color-mix(in srgb, var(--tier) 42%, transparent) 0%, transparent 72%),
    repeating-conic-gradient(from 0deg at 50% 64%, rgba(255, 240, 200, .045) 0 6deg, transparent 6deg 16deg),
    linear-gradient(180deg, #1b1712, #0f0d0a);
  border-bottom: 1px solid rgba(215, 165, 63, .22);
}
.kd-sahne img {
  width: 84%; height: 92%; object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .55));
  transition: transform .25s;
}
.kd-kart:hover .kd-sahne img { transform: scale(1.04); }
.kd-tier, .kd-rozet {
  position: absolute; top: 12px;
  padding: 4px 10px;
  font-size: 10.5px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase;
  border-radius: 999px;
}
.kd-tier {
  left: 12px;
  color: #fff;
  background: color-mix(in srgb, var(--tier) 70%, #120a00);
  border: 1px solid color-mix(in srgb, var(--tier) 80%, #fff);
}
.kd-rozet {
  right: 12px;
  color: #2a1c00;
  background: linear-gradient(180deg, #ffe7a6, #d7a53f);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .4);
}
.kd-kilit {
  position: absolute;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
}
.kd-kilit svg { width: 26px; height: 26px; fill: none; stroke: #d7dbe2; stroke-width: 2; }
.kd-kart.is-kilitli .kd-sahne img { filter: grayscale(1) brightness(.32); }

.kd-govde { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 14px 16px 16px; }
.kd-ad { font-size: 18px; font-weight: 800; color: #fff4d6; }
.kd-sv { display: flex; align-items: center; gap: 10px; }
.kd-sv > span:first-child { font-size: 12px; font-weight: 900; letter-spacing: 1px; color: var(--tier); }
.kd-cizgiler { display: flex; gap: 4px; }
.kd-cizgiler i { width: 16px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .1); }
.kd-cizgiler i.on { background: var(--tier); box-shadow: 0 0 6px color-mix(in srgb, var(--tier) 60%, transparent); }
.kd-artis { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--txt-dim); }
.kd-artis b { font-size: 17px; font-weight: 900; color: var(--gold-hi); }
.kd-artis em { font-style: normal; font-size: 13px; font-weight: 800; color: #7fd49a; }

/* Sonraki seviye: sayaç, çubuk ve malzeme (kopya + kedinin yediği mama). */
.kd-ilerleme {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, .25);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 10px;
}
.kd-il-ust { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--txt-dim); }
.kd-il-ust b { color: var(--txt); }
.kd-cubuk { height: 7px; overflow: hidden; background: rgba(255, 255, 255, .08); border-radius: 4px; }
.kd-cubuk i {
  display: block; height: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tier) 65%, #fff), var(--tier));
  border-radius: 4px;
}
.kd-malzeme { display: flex; gap: 14px; font-size: 12px; color: var(--txt-mute); }
.kd-malzeme span { display: inline-flex; align-items: center; gap: 4px; }
.kd-malzeme b { color: var(--txt); }
.kd-malzeme .mama svg { width: 17px; height: 17px; }
.kd-doruk {
  padding: 12px;
  font-size: 13px; font-weight: 900; letter-spacing: 1.4px; text-align: center;
  color: var(--gold-hi);
  background: rgba(215, 165, 63, .1);
  border: 1px solid rgba(215, 165, 63, .4);
  border-radius: 10px;
}

.kd-dugmeler { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }
.kd-dugmeler > :only-child { grid-column: 1 / -1; }
.kd-dugmeler .mg-fiyat.is-kucuk { height: 42px; padding: 0 10px; font-size: 14px; }
.kd-besle {
  height: 42px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 14px; font-weight: 900; letter-spacing: 1px;
  color: #eaf7ee;
  background: linear-gradient(180deg, #2f8f55, #1d6b3c);
  border: 1px solid #56c07e;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 6px 14px rgba(0, 0, 0, .35);
  cursor: pointer;
  transition: filter .15s, transform .15s;
}
.kd-besle .mama svg { width: 22px; height: 22px; }
.kd-besle:not(:disabled):hover { filter: brightness(1.1); transform: translateY(-1px); }
.kd-besle:disabled {
  cursor: default;
  color: #8a8f99;
  background: linear-gradient(180deg, #2a2e36, #1c1f25);
  border-color: rgba(255, 255, 255, .1);
  box-shadow: none;
}
.kd-besle:disabled .mama { filter: grayscale(1) opacity(.55); }

/* Kilitli kart: nereden çıktığı ve artış aralığı; düğme yerine KİLİTLİ. */
.kd-ipucu { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--txt-mute); }
.kd-kilitli {
  margin-top: auto; height: 42px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; font-weight: 900; letter-spacing: 1.4px;
  color: var(--txt-mute);
  background: rgba(255, 255, 255, .04);
  border: 1px dashed rgba(255, 255, 255, .16);
  border-radius: 12px;
}
.kd-kilitli svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; }

/* Envanter: iki göz — kedi maması (destansı, mor) ve premium kedi maması
   (efsanevi, altın). Ödüller kediler sayfası açıkken buraya uçar. */
.kd-env {
  flex: 0 0 170px;
  display: flex; flex-direction: column; gap: 16px;
  margin-top: 92px;
  padding: 16px 14px 18px;
  background: linear-gradient(180deg, rgba(38, 33, 24, .95), rgba(20, 18, 13, .95));
  border: 1px solid rgba(215, 165, 63, .4);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 236, 170, .08), 0 12px 26px rgba(0, 0, 0, .45);
}
.kd-env h3 { margin: 0; font-size: 13px; font-weight: 900; letter-spacing: 2px; text-align: center; color: var(--gold-hi); }
.kd-env-goz { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.kd-env-kutu {
  position: relative;
  width: 96px; height: 96px;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .07), rgba(0, 0, 0, .28));
  border: 2px solid rgba(164, 92, 255, .55);
  border-radius: 14px;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .5);
}
.kd-env-goz.is-pmama .kd-env-kutu { border-color: rgba(240, 169, 58, .75); box-shadow: inset 0 0 18px rgba(0, 0, 0, .5), 0 0 14px rgba(240, 169, 58, .22); }
.kd-env-kutu .mama svg { width: 58px; height: 58px; }
.kd-env-kutu b {
  position: absolute; right: 7px; bottom: 4px;
  font-size: 16px; font-weight: 900; color: #fff;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, .8);
}
.kd-env-kutu b::before { content: "×"; margin-right: 1px; font-size: 12px; color: var(--txt-dim); }
.kd-env-ad { font-size: 13px; font-weight: 800; text-align: center; color: var(--txt); }
.kd-env-kim { font-size: 11px; font-weight: 700; letter-spacing: .4px; color: #c69bff; }
.kd-env-goz.is-pmama .kd-env-kim { color: #f0c36a; }

/* ————————————————————————————— etkinlikler */

.mt-rozet {
  position: absolute; right: 14px; top: 14px;
  min-width: 24px; height: 24px; padding: 0 7px;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 800;
  color: #2a1c00; background: var(--gold);
  border-radius: 20px;
}

/* ——— Altın Çark kartı: üstte gerçek çarkın net, küçük bir kopyası */

.menu-tile.is-cark, .menu-tile.is-etkinlik { overflow: visible; }
/* Arkada çarkın ardında altın bir ışık halesi; çark kartın içine sığar. */
.mt-cark-arka {
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(46% 36% at 50% 40%, rgba(242, 193, 78, .26) 0%, rgba(242, 193, 78, 0) 72%),
    radial-gradient(70% 50% at 50% 100%, rgba(215, 165, 63, .08), rgba(0, 0, 0, 0) 70%);
}
.mt-cark-arka .donen-cark {
  --dc-boy: 118px;
  position: absolute; left: 50%; top: 16px;
  transform: translateX(-50%);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .6)) drop-shadow(0 0 10px rgba(242, 193, 78, .25));
}
/* Küçük çarkta gözlerin yazısı okunmaz: yalnızca simgeler. */
.mt-cark-arka .cg-ad { display: none; }
.menu-tile.is-cark .mt-name, .menu-tile.is-etkinlik .mt-name {
  position: relative; z-index: 2;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .8);
}
/* Ücretsiz hak: sağ üstte, kartın sağ kenarından dışarı taşan eğik altın etiket
   (üstteki sezon kartına değmez). */
.mt-ucretsiz {
  position: absolute; right: -20px; top: 5px; z-index: 3;
  padding: 5px 11px;
  font-size: 12px; font-weight: 900; letter-spacing: .6px; white-space: nowrap;
  color: #2a1c00;
  background: linear-gradient(180deg, #ffe08f 0%, #f0c063 45%, #c8912e 100%);
  border: 1px solid #6f5014;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 4px 12px rgba(0, 0, 0, .55);
  transform: rotate(14deg);
}
.mt-ucretsiz::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 14px rgba(242, 208, 137, .7);
  opacity: 0;
  animation: nabiz-parla 1.8s ease-in-out infinite;
  will-change: opacity;
  pointer-events: none;
}

/* ——— Etkinlikler kartı: etkinlikler slayt slayt, 10 saniyede bir kayar */

.es-pencere {
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.es-pencere::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12, 14, 19, 0) 45%, rgba(12, 14, 19, .8) 85%, rgba(12, 14, 19, .92) 100%);
}
.es-serit {
  display: flex; height: 100%;
  transform: translateX(calc(var(--i, 0) * -100%));
  transition: transform .6s cubic-bezier(.65, 0, .35, 1);
  will-change: transform;
}
.es-serit.is-anlik { transition: none; }
/* Bir slayt: etkinliğin renginde ışık, türünün iri motifi, görseli ve adı. */
.es-slayt {
  position: relative;
  flex: 0 0 100%; height: 100%;
  background:
    radial-gradient(90% 75% at 78% 30%, color-mix(in srgb, var(--ev) 34%, transparent) 0%, rgba(0, 0, 0, 0) 70%),
    linear-gradient(160deg, #1d222b 0%, #13171e 70%);
}
.es-motif {
  position: absolute; right: -26px; top: 6px;
  width: 150px; height: 150px;
  color: var(--ev);
  opacity: .2;
  transform: rotate(-14deg);
}
.es-motif svg { width: 100%; height: 100%; stroke-width: 1.6; }
.es-gorsel {
  position: absolute; right: -10px; bottom: 36px;
  height: 112px; width: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6));
}
.es-ad {
  position: absolute; left: 12px; top: 12px;
  max-width: calc(100% - 58px);
  padding: 4px 9px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: var(--ev);
  background: rgba(10, 12, 16, .72);
  border: 1px solid color-mix(in srgb, var(--ev) 55%, transparent);
  border-radius: 999px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Hangi slaytta olunduğu: adın altında, kartın alt kenarında ortada küçük çizgiler. */
.es-noktalar {
  position: absolute; left: 50%; bottom: 7px; z-index: 2;
  transform: translateX(-50%);
  display: flex; gap: 4px;
}
.es-noktalar i {
  width: 8px; height: 4px;
  background: rgba(255, 255, 255, .28);
  border-radius: 999px;
  transition: width .3s, background .3s;
}
.es-noktalar i.on { width: 16px; background: var(--gold-hi); }
.menu-tile.is-etkinlik .mt-rozet { z-index: 3; }

/* ——— sezon kartı: sağda sonraki ödül, altta seviye çubuğu */

/* Sonraki seviyenin ödülü: sağ üstte içe gömük altın çerçeveli kutu. */
.mt-odul {
  position: absolute; right: 16px; top: 14px;
  width: 104px; height: 104px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: radial-gradient(70% 60% at 50% 45%, rgba(215, 165, 63, .16), rgba(0, 0, 0, 0) 70%),
    linear-gradient(180deg, #0f1218, #171b23);
  border: 1px solid rgba(215, 165, 63, .4);
  border-radius: 12px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55);
}
.mt-odul i {
  font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .9px;
  color: var(--gold);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.mt-odul-ikon { height: 48px; display: grid; place-items: center; }
.mt-odul-ikon .coin, .mt-odul-ikon .gem { width: 40px; height: 40px; }
.mt-odul-ikon .mama svg, .mt-odul-ikon .bilet svg { width: 44px; height: 44px; }
.mt-odul-ikon .odul-kedi { width: 52px; height: 52px; object-fit: contain; }
.mt-odul-ikon > svg { width: 28px; height: 28px; color: var(--green-hi); stroke-width: 2.6; }
.mt-odul b {
  max-width: 96px;
  font-size: 13.5px; font-weight: 800; color: var(--gold-hi);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mt-odul.is-kedi.is-destansi { border-color: rgba(168, 118, 255, .55); }
.mt-odul.is-kedi.is-destansi b { color: #c9a8ff; }
.mt-odul.is-kedi.is-efsanevi { border-color: rgba(242, 160, 60, .7); }
.mt-odul.is-kedi.is-efsanevi b { color: #ffc070; }
.mt-odul.is-bitti b { color: var(--green-hi); }
/* Bekleyen ödül rozeti kutunun köşesine biner. */
.menu-tile.is-genis .mt-rozet { right: 8px; top: 8px; z-index: 1; }

/* Seviye çubuğu: solda mevcut seviye, ortada o seviyedeki ilerleme, sağda puan. */
.mt-seviye {
  align-self: stretch;
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px;
}
.mt-seviye b { flex: none; font-size: 11px; font-weight: 800; letter-spacing: .8px; color: var(--gold-hi); }
.mt-xp {
  position: relative; flex: 1;
  height: 8px;
  background: linear-gradient(180deg, #07090d, #151a23);
  border: 1px solid rgba(215, 165, 63, .35);
  border-radius: 999px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6);
  overflow: hidden;
}
.mt-xp i {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, #8a6416, #d7a53f 70%, #f2d089);
  border-radius: 999px;
}
.mt-seviye em { flex: none; font-style: normal; font-size: 12.5px; font-weight: 800; color: var(--txt); }

/* Depo kedileri saklayamıyorsa sayfanın üstünde duran uyarı. */
.kayit-kapali {
  margin: 14px 28px 0;
  padding: 10px 16px;
  font-size: 13px; line-height: 1.5; color: #ffd9a8;
  background: rgba(196, 54, 46, .16);
  border: 1px solid rgba(196, 54, 46, .5);
  border-radius: var(--r-md);
}

/* Sayfa mağazanın düzeninde (.mg-sayfa, .mg-nav, .mg-icerik; bkz. mağaza):
   solda etkinlik listesi, yanında sabit genişlikte içerik alanı, ikisi
   birlikte sayfanın ortasında. İçerik: üstte altın başlık ve kalan süre,
   altında solda ödül vitrini, yanında çark ya da görev kartları. */
.mg-sayfa.etk-sayfa { --mg-raf-en: 1140px; }

/* ——— liste: satırın simgesi etkinliğin resmi, altın halkalı madalyon;
   köşesinde türü (çark ya da kupa). Altında kalan süre. */
.etk-satir.is-pasif { opacity: .55; }
.etk-ikon { position: relative; }
.etk-ikon img {
  width: 48px; height: 48px;
  object-fit: cover; object-position: 50% 16%;
  border: 2px solid transparent;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 30%, #3a3222, #15130e) padding-box,
    linear-gradient(160deg, #fff0b8 0%, #d7a53f 45%, #8a6416 100%) border-box;
}
.etk-tur {
  position: absolute; right: -6px; bottom: -4px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  background: #12161d;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .6);
}
.etk-tur svg { width: 19px; height: 19px; stroke: none; }
.mg-nav-ad .etk-kalan {
  display: inline-flex; align-items: center; gap: 4px;
  color: #e7c98a;
}
.etk-kalan svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.mg-nav-ad .etk-kalan.is-gelecek { color: #9cc7ff; }
.mg-nav-ad .etk-kalan.is-bitti { color: var(--txt-mute); }

/* ——— baş: solda mağazanın başlığı (küçük altın satır, büyük ad), sağda
   kalan süre ve bilgi düğmesi. Çarkta başlık yok: sağ üstte bilet sayacı ve
   bilgi düğmesi (süre çarkın altında). */
.etk-bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.etk-bas.is-sade { justify-content: flex-end; }
.etk-bas-sag { display: flex; align-items: center; gap: 12px; padding-bottom: 6px; }
.etk-bas-sag .bilet-sayac { margin-left: 0; height: 46px; }
.etk-sure {
  display: inline-flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 20px 0 12px;
  background: linear-gradient(180deg, rgba(3, 5, 9, .78), rgba(14, 17, 24, .62));
  border: 1px solid rgba(242, 193, 78, .45);
  border-radius: 999px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6);
}
.etk-sure > svg { width: 26px; height: 26px; fill: none; stroke: var(--gold-hi); stroke-width: 2; }
.etk-sure > span { display: flex; flex-direction: column; line-height: 1.1; }
.etk-sure i { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: var(--txt-mute); }
.etk-sure b { font-size: 17px; font-weight: 800; color: #fff1d2; font-variant-numeric: tabular-nums; }
.etk-sure.is-gelecek > svg { stroke: #9cc7ff; }
.etk-sure.is-bitti > svg { stroke: var(--txt-mute); }
.etk-sure.is-bitti b { font-size: 15px; color: var(--txt-dim); }
.etk-bas .etk-bilgi { position: static; flex: none; }

/* ——— vitrin: altın çerçeveli uzun kart; tepede etiket, ortada ışınların
   önünde ödülün kendisi, altında adı, nadirliği ve ilerleme kutusu. */
.etk-vitrin {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 32px 20px 20px;
  text-align: center;
  border: 3px solid transparent;
  border-radius: 18px;
  background:
    radial-gradient(95% 52% at 50% 36%, color-mix(in srgb, var(--tier) 36%, transparent) 0%, rgba(0, 0, 0, 0) 72%) padding-box,
    linear-gradient(180deg, #2c2414 0%, #1b160e 60%, #120f09 100%) padding-box,
    linear-gradient(160deg, #fff0b8 0%, #d7a53f 35%, #8a6416 62%, #f2d089 100%) border-box;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 236, 170, .2), 0 14px 30px rgba(0, 0, 0, .5);
}
.ev-etiket {
  position: absolute; left: 50%; top: -17px;
  transform: translateX(-50%);
  padding: 6px 22px 7px;
  font-size: 13px; font-weight: 900; letter-spacing: 2px; white-space: nowrap;
  color: #3a2500;
  text-shadow: 0 1px 0 rgba(255, 244, 205, .7);
  background: linear-gradient(180deg, #ffe7a6 0%, #f0c063 45%, #c48c2a 100%);
  border: 1px solid #6f5014;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 10px rgba(0, 0, 0, .45);
}
.ev-sahne { position: relative; flex: 1 1 auto; min-height: 220px; width: 100%; }
.ev-isik {
  position: absolute; inset: -6% -12%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 232, 170, .12) 0 7deg, rgba(255, 232, 170, 0) 7deg 17deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
  pointer-events: none;
}
.ev-sahne img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .6));
}
.ev-ad {
  margin-top: 6px;
  font-size: 26px; font-weight: 900; letter-spacing: .2px;
  color: #fff4d6;
  text-shadow: 0 2px 0 rgba(60, 40, 5, .9), 0 4px 10px rgba(0, 0, 0, .5);
}
.ev-tier {
  margin-top: 2px;
  font-size: 13px; font-weight: 900; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--tier);
  text-shadow: 0 0 12px color-mix(in srgb, var(--tier) 55%, transparent);
}
.ev-alt {
  align-self: stretch;
  margin-top: 16px; padding: 12px 14px 11px;
  display: flex; flex-direction: column; gap: 7px;
  text-align: left;
  background: rgba(0, 0, 0, .34);
  border: 1px solid rgba(215, 165, 63, .3);
  border-radius: 12px;
}
.ev-alt-yazi { font-size: 15px; font-weight: 700; color: var(--txt); }
.ev-alt-yazi b { color: var(--gold-hi); }
.ev-not { font-style: normal; font-size: 12px; line-height: 1.35; color: var(--txt-mute); }
/* İlerleme çubuğu: koyu oluk, altın dolgu (görev kartında yeşil). */
.ev-cubuk {
  position: relative;
  height: 12px;
  background: linear-gradient(180deg, #07090d, #151a23);
  border: 1px solid rgba(215, 165, 63, .42);
  border-radius: 999px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6);
  overflow: hidden;
}
.ev-cubuk > i {
  display: block; height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #b8832a, #f7d77e);
  box-shadow: 0 0 8px rgba(242, 208, 137, .5);
}
.ev-cubuk.is-yesil > i { background: linear-gradient(90deg, #168a45, #3fd67c 70%, #9bffc2); box-shadow: 0 0 8px rgba(94, 224, 142, .5); }

/* ——— kedi çarkı (referanstaki "şanslı çark" gibi): solda ana ödül
   çerçevesiz ve büyük, ortada çark, sağda sandık yolu. Çark Altın Çark'ın
   aynısı; arkasında sıcak bir hale, altında kalan süre, kazanç şeridi ve iki
   düğme + ATLA. */
.ec-govde { display: grid; grid-template-columns: 330px 560px 190px; gap: 30px; }

/* Ana ödül: ışınların önünde, ayağının altında parlak bir zemin; altında
   adı, nadirliği ve garanti sayacı. */
.ec-kedi { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ek-sahne { position: relative; flex: 1 1 auto; min-height: 260px; width: 100%; }
.ek-sahne .ev-isik { inset: -4% -14% 4%; }
.ek-zemin {
  position: absolute; left: 12%; right: 12%; bottom: 0;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tier) 55%, transparent), rgba(0, 0, 0, 0));
  pointer-events: none;
}
/* Resim sütundan geniş: kedinin çevresindeki saydam boşluk yanlara taşar,
   kedi büyük görünür (referanstaki kahraman gibi). */
.ek-sahne img {
  position: absolute; left: -22%; right: -22%; bottom: 18px;
  width: 144%; height: calc(100% - 18px);
  object-fit: contain; object-position: 50% 100%;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .6));
  pointer-events: none;
}
.ec-kedi .ev-ad { font-size: 30px; }
.ek-garanti {
  align-self: stretch;
  margin-top: 14px; padding: 10px 16px 11px;
  display: flex; flex-direction: column; gap: 7px;
  text-align: left;
  background: linear-gradient(180deg, rgba(3, 5, 9, .78), rgba(14, 17, 24, .62));
  border: 1px solid rgba(242, 193, 78, .45);
  border-radius: 14px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6);
}
.ek-garanti-yazi { font-size: 16px; font-weight: 700; color: var(--txt); }
.ek-garanti-yazi b { color: var(--gold-hi); }
.ec-orta {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.ec-orta::before {
  content: "";
  position: absolute; left: 50%; top: 270px; z-index: -1;
  width: 760px; height: 760px; margin: -380px 0 0 -380px;
  background: radial-gradient(closest-side, rgba(240, 180, 70, .2), rgba(240, 180, 70, 0));
  pointer-events: none;
}
.ec-sure { margin: -2px 0 0; font-size: 15px; font-weight: 600; color: var(--txt-dim); }
.ec-sure b { font-weight: 800; color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.ec-sure.is-bitti b { color: var(--txt-dim); }
.ec-dugmeler { display: flex; align-items: center; justify-content: center; gap: 12px; }
.ec-dugmeler .cark-atla { margin-left: 0; }
.cark-bedel .bilet svg { width: 21px; height: 21px; }

.cark-atla {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 13px 0 10px;
  font-size: 11.5px; font-weight: 800; letter-spacing: 1.2px;
  color: var(--txt-dim);
  background: linear-gradient(180deg, #1d222b 0%, #13171e 100%);
  border: 1px solid rgba(215, 165, 63, .3);
  border-radius: 9px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
}
.cark-atla svg { width: 15px; height: 15px; fill: currentColor; stroke: none; opacity: .75; }
.cark-atla:hover { color: var(--gold-hi); border-color: rgba(215, 165, 63, .6); }
/* Açıkken altın: çark hızlı döner. */
.cark-atla.is-acik {
  color: var(--gold-hi);
  background: linear-gradient(180deg, rgba(240, 192, 99, .4) 0%, rgba(185, 138, 46, .24) 100%);
  border-color: rgba(242, 208, 137, .8);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 12px rgba(215, 165, 63, .25);
}
.cark-atla.is-acik svg { opacity: 1; filter: drop-shadow(0 0 3px rgba(242, 208, 137, .7)); }
/* Altın Çark'ta iki çevirme düğmesi (solda tek, sağda 10'lu) ortada,
   ATLA hemen sağlarında. */
.gc-sayfa .cark-dugmeler {
  width: 100%;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
}
/* İki düğme aynı boyda: dar yan boşlukla en uzun yazı (10× ÇEVİR 💎5.000) da sığar. */
.gc-cevir { grid-column: 2; display: grid; grid-template-columns: repeat(2, 192px); gap: 12px; }
.gc-cevir .cark-btn { width: 100%; padding: 0 10px; font-size: 14px; letter-spacing: .4px; }
.gc-cevir .cark-bedel { margin-left: 7px; padding: 3px 8px 3px 6px; gap: 4px; font-size: 13px; }
.gc-cevir .cark-bedel .gem { width: 15px; height: 15px; }
.gc-sayfa .cark-dugmeler .cark-atla { grid-column: 3; justify-self: start; margin-left: 0; }
/* Ücretsiz hak varken tek düğme, mavi: bedava olduğu altın düğmelerden
   ayrılsın. Haklar bitince yine iki altın düğme gelir. */
.gc-cevir.is-tek { grid-template-columns: 220px; }
.cark-btn.is-ucretsiz {
  color: #fff;
  text-shadow: 0 1px 1px rgba(8, 40, 90, .55);
  background: linear-gradient(180deg, #74c8ff 0%, #3a97ea 55%, #1f64be 100%);
  border-color: #16468a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 3px 0 #16468a, var(--shadow-1);
}
.cark-btn.is-ucretsiz:not(:disabled) { animation: pulse-mavi 2s ease-in-out infinite; }
@keyframes pulse-mavi {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 3px 0 #16468a, var(--shadow-1); }
  50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 3px 0 #16468a, 0 0 22px rgba(80, 170, 255, .55); }
}

/* ————————————————— dönen çark (günlük çark ve kedi çarkı) */

/* Bütün ölçüler --dc-boy'dan (çap) türer: sayfa çapı verir, gerisi orantılı
   büyür. Dışta sabit altın kasnak, içinde dönen disk (gözler bir çemberin
   üstünde, yüzleri hep dik), ortada altın göbek ve tepeyi gösteren alev
   ibre. Çark durunca tepedeki göz kazanılandır. */
.donen-cark {
  --dc-boy: 520px;
  --dc-goz: calc(var(--dc-boy) * var(--dc-goz-oran, .165));
  position: relative;
  flex: 0 0 auto;
  width: var(--dc-boy); height: var(--dc-boy);
  border-radius: 50%;
}

/* Kasnak: konik degradeyle dövme altın bir halka, içinde koyu plaka. Plakanın
   kenarında ince bir altın çizgi, halkanın üstünde on iki perçin. */
.dc-kasnak {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle closest-side, transparent 0 80.8%, rgba(242, 208, 137, .38) 81.2% 81.8%, transparent 82.2%),
    radial-gradient(circle closest-side, #1d2330 0%, #151922 60%, #0f1218 84%, transparent 84.6%),
    conic-gradient(#f7d77e, #b8832a 12%, #f0c063 25%, #9c6a1c 37%, #f7d77e 50%, #b8832a 62%, #f0c063 75%, #9c6a1c 87%, #f7d77e);
  box-shadow:
    0 0 0 3px #4d360c,
    inset 0 0 0 2px rgba(255, 238, 190, .45),
    0 22px 60px rgba(0, 0, 0, .65);
}
.dc-kasnak::before {
  content: "";
  position: absolute; inset: 2.6%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 15deg, rgba(80, 52, 10, .6) 0 1.6deg, transparent 1.6deg 30deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 86%, #000 87% 100%);
          mask: radial-gradient(circle closest-side, transparent 0 86%, #000 87% 100%);
}

/* Dönen disk. Gözlerin arasındaki ince ışınlar dilimleri ayırır; ödüller
   ayrı kutu içinde değil, bu dilimlerin içinde durur. Işınlar diskle
   döner: dönüş gözle görülsün, bulanıklık da ışınları çizgiye çevirsin. */
.dc-disk {
  position: absolute; inset: 8%;
  border-radius: 50%;
  background: repeating-conic-gradient(from calc(180deg / var(--n, 10)),
    rgba(242, 208, 137, .3) 0 .8deg, transparent .8deg calc(360deg / var(--n, 10)));
  will-change: transform, filter;
}
.dc-goz {
  position: absolute; left: 50%; top: 50%;
  width: var(--dc-goz); height: var(--dc-goz);
}
.dc-yuz {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  padding: 10% 6% 7%;
  /* Kutusuz: ödül doğrudan dilimin içinde durur. */
  transition: filter .25s;
}
/* Asıl ödül altın bir hâleyle, kazanılan göz parlayarak belli olur. */
.dc-goz.is-ana .cg-ikon { filter: drop-shadow(0 0 6px rgba(242, 208, 137, .55)); }
.dc-goz.is-secili .dc-yuz {
  filter: drop-shadow(0 0 10px rgba(242, 208, 137, .95)) drop-shadow(0 0 22px rgba(242, 208, 137, .6));
}
.dc-goz.is-secili .cg-ad { color: #fff0c2; }
.dc-yuz .cg-ikon {
  position: relative;
  flex: 1; min-height: 0; width: 100%;
  display: grid; place-items: center;
}
.dc-yuz .coin { width: calc(var(--dc-goz) * .42); height: calc(var(--dc-goz) * .42); }
.dc-yuz .gem { width: calc(var(--dc-goz) * .46); height: calc(var(--dc-goz) * .46); }
.dc-yuz .mama svg { width: calc(var(--dc-goz) * .58); height: calc(var(--dc-goz) * .58); }
.dc-yuz .bilet svg { width: calc(var(--dc-goz) * .56); height: calc(var(--dc-goz) * .56); }
.dc-yuz .odul-kedi {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}
.dc-yuz .cg-ad {
  font-size: calc(var(--dc-goz) * .13); font-weight: 800; line-height: 1.1;
  color: #f1e6c8; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
.dc-goz.is-ana .cg-ad { color: var(--gold-hi); }

/* Göbek: altın halka, koyu içi. İbre onun üstünde. */
.dc-gobek {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--dc-boy) * .3); height: calc(var(--dc-boy) * .3);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle closest-side, #2c2619 0%, #17140e 72%, transparent 76%),
    conic-gradient(#f7d77e, #b8832a 25%, #f0c063 50%, #9c6a1c 75%, #f7d77e);
  box-shadow: 0 0 0 2px #4d360c, 0 8px 24px rgba(0, 0, 0, .6), inset 0 0 0 2px rgba(255, 238, 190, .35);
}
/* Alev ibre: dönme ekseni alevin yuvarlak dibi (%60), göbeğin ortası. Titreme
   animasyonu içteki span'de, konum dıştaki kutuda: ikisi karışmasın. */
.dc-ibre {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--dc-boy) * .152); height: calc(var(--dc-boy) * .38);
  transform: translate(-50%, -60%);
  pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .55));
}
.dc-ibre > span { display: block; width: 100%; height: 100%; transform-origin: 50% 60%; }
.dc-ibre svg { display: block; width: 100%; height: 100%; stroke: none; }

.gc-sayfa .donen-cark { --dc-boy: 540px; }
.ec-orta .donen-cark { --dc-boy: 540px; }

/* Çevirme sonuçları: 5'li çevirmede beş rozet yan yana. */
.cark-sonuc {
  width: 100%; min-height: 34px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
}
.cark-bos { font-size: 12px; color: var(--txt-mute); }
.cark-kazanc {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  font-size: 12px; font-weight: 600; color: var(--txt-dim);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--panel-line);
  border-radius: 20px;
}
.cark-kazanc.is-ana { color: var(--gold-hi); border-color: rgba(215, 165, 63, .5); background: rgba(215, 165, 63, .12); }
.cark-kazanc .coin { width: 16px; height: 16px; }
.cark-kazanc .gem { width: 17px; height: 17px; }
.cark-kazanc .mama svg { width: 18px; height: 18px; }
.cark-kazanc .odul-kedi { width: 20px; height: 20px; object-fit: contain; }

.cark-dugmeler { display: flex; gap: 12px; min-height: 46px; }
/* .btn-primary masadaki yerine göre konumlanıyor (position: absolute);
   burada akışta duruyor. */
.cark-btn {
  position: static; width: auto;
  height: 46px; padding: 0 26px;
  font-size: 15px; font-weight: 800; letter-spacing: .8px;
}
/* Altın Çark ücretsiz haklar bitince: düğmede elmas bedeli. */
.cark-bedel {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 10px; padding: 3px 10px 3px 7px;
  font-size: 14px;
  background: rgba(0, 0, 0, .3);
  border-radius: 20px;
}
.cark-bedel .gem { width: 17px; height: 17px; }

/* Ödül listelerinde kedi küçük bir madalyon; çarkın gözünde büyür. */
.odul-kedi { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; }

/* Kedi maması: üstünde pati basılı bir konserve. Para ve elmasın CSS
   karşılığı var, bunun çizimi var (js/ui.js, MAMA_IKON); renkleri çizimde. */
.mama { display: inline-grid; place-items: center; }
.mama svg { width: 18px; height: 18px; stroke: none; }

/* ————————————————————————————— etkinlik görev kartları */

/* Ad `.gorev-panel` menüdeki GÖREVLER sütununun: burası etkinliğin görevleri.
   Kartlar koyu, ince altın çerçeveli; ödülü hazır olan altın çerçeveye
   bürünüp parlar, alınan söner ve yeşil onay alır. */
.eg-govde { display: grid; grid-template-columns: 300px 810px; gap: 30px; }
.eg-gorevler {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 290px; gap: 24px;
}
.eg-kart {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 18px 16px 16px;
  background: linear-gradient(180deg, #25211a, #17150f);
  border: 2px solid rgba(215, 165, 63, .42);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 236, 170, .1), 0 12px 26px rgba(0, 0, 0, .45);
}
.eg-kart.is-hazir {
  border-color: transparent;
  background:
    radial-gradient(80% 50% at 50% 16%, rgba(255, 214, 120, .26), rgba(255, 214, 120, 0) 72%) padding-box,
    linear-gradient(180deg, #4a3714 0%, #2d2210 55%, #1b150b 100%) padding-box,
    linear-gradient(160deg, #fff0b8 0%, #d7a53f 35%, #8a6416 62%, #f2d089 100%) border-box;
  animation: eg-parla 2s ease-in-out infinite;
}
@keyframes eg-parla {
  50% { box-shadow: inset 0 1px 0 rgba(255, 236, 170, .1), 0 0 26px rgba(242, 208, 137, .45), 0 12px 26px rgba(0, 0, 0, .45); }
}
.eg-kart.is-alindi { filter: saturate(.5) brightness(.72); }
.eg-ikon {
  width: 66px; height: 66px; flex: none;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 32%, #3a3222, #15130e);
  border: 2px solid rgba(215, 165, 63, .55);
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 236, 170, .15);
}
.eg-ikon .olcu-ikon { width: 44px; height: 44px; stroke: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
/* Adı "eg-ad" DEĞİL: EasyList ve AdGuard Base'teki genel "##.eg-ad" kuralı
   reklam engelleyicili tarayıcılarda görevin adını gizliyordu. Yeni sınıf
   adlarında "-ad" sonekinden kaçın (bkz. README, "Reklam engelleyiciler"). */
.eg-isim {
  margin-top: 10px;
  font-size: 21px; font-weight: 900; letter-spacing: .2px; text-align: center;
  color: #fff4d6;
  text-shadow: 0 2px 0 rgba(60, 40, 5, .9), 0 4px 8px rgba(0, 0, 0, .5);
}
.eg-ilerleme { align-self: stretch; margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.eg-ilerleme .ev-cubuk { flex: 1; }
.eg-ilerleme > i { font-style: normal; font-size: 13px; font-weight: 800; color: var(--txt-dim); font-variant-numeric: tabular-nums; }
.eg-oduller { margin-top: auto; display: flex; justify-content: center; gap: 8px; }
.eg-oduller .go-odul { width: 62px; height: 62px; }
.eg-oduller .go-odul .coin, .eg-oduller .go-odul .gem { width: 32px; height: 32px; }
.eg-oduller .go-odul .mama svg, .eg-oduller .go-odul .bilet svg { width: 36px; height: 36px; }
.eg-oduller .go-odul .odul-kedi { width: 54px; height: 54px; }
.eg-oduller .go-odul b { font-size: 12px; }
.eg-kart .mg-fiyat, .eg-alindi { align-self: stretch; margin-top: 12px; }
.eg-kart .mg-fiyat.is-kucuk { height: 44px; font-size: 15px; }
.eg-alindi {
  height: 44px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 14px; font-weight: 900; letter-spacing: 1.4px;
  color: var(--green-hi);
  background: rgba(94, 224, 142, .08);
  border: 1px solid rgba(94, 224, 142, .35);
  border-radius: 12px;
}
.eg-alindi svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3; }
.eg-yakin {
  align-self: center; margin: 0; padding: 28px 30px;
  font-size: 18px; font-weight: 600; text-align: center; color: var(--txt-dim);
  background: linear-gradient(180deg, #25211a, #17150f);
  border: 2px solid rgba(215, 165, 63, .42);
  border-radius: 16px;
}

/* ————————————————————————————— mağaza

   Referans bir oyunun pazar yeri; renkler ve dil bizim: koyu zemin, altın
   çerçeve ve vurgular, sıcak bir ışık. Sayfa iki parça: solda renkli simgeli
   raf listesi, sağda seçilen rafın kartları. Kartlar bir panelin içinde
   değil, sayfanın üstünde durur; sayfanın dibinde altın bir ışık yanar.

   Her ürünün köşesinde yeşil zümrütlü GERİ ÖDEME rozeti: o alışverişin
   kazandırdığı puan (fiyatın on katı, bkz. js/shop.js). */

/* Sabit düzen (referanstaki gibi): solda liste, yanında sabit genişlikte
   içerik alanı; ikisi BİRLİKTE sayfanın ortasında ve raf değişince hiçbiri
   yer değiştirmez. Alan en geniş rafa (geri ödeme yolu, --mg-raf-en) göre:
   o rafta listeyle içerik arası dar, daha dar raflar alanın ortasına oturur
   ve arada daha çok boşluk kalır. Listenin solundaki boşluk en geniş rafın
   sağındaki boşluğa eşit: içerik alanının sağında kartların taşan mühürleri
   için 40px iç boşluk var, sol kenar boşluğu o kadar fazla (44 + 40).
   İkisi dikeyde de ortada. */
.mg-sayfa {
  --mg-raf-en: 1080px;
  flex: 1; min-height: 0;
  position: relative; isolation: isolate;
  display: flex; align-items: center; justify-content: center;
  padding: 22px 44px 26px 84px;
}
.mg-sayfa::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70% 46% at 56% 110%, rgba(240, 180, 70, .30) 0%, rgba(215, 150, 50, .12) 45%, rgba(0, 0, 0, 0) 76%),
    radial-gradient(36% 30% at 16% 104%, rgba(240, 180, 70, .14), rgba(0, 0, 0, 0) 72%);
}

/* ——— sol liste: koyu dikey şerit, seçili rafta soldan altın ışık */
.mg-nav {
  flex: 0 0 262px;
  display: flex; flex-direction: column;
  padding: 10px 0;
  background: linear-gradient(180deg, rgba(10, 12, 17, .9), rgba(10, 12, 17, .68));
  border: 1px solid rgba(215, 165, 63, .16);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.mg-nav-oge {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  min-height: 84px; padding: 10px 20px 10px 18px;
  text-align: left;
  background: none; border: 0;
  transition: background .18s;
}
.mg-nav-oge + .mg-nav-oge::before {
  content: "";
  position: absolute; left: 18px; right: 18px; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(215, 165, 63, 0), rgba(215, 165, 63, .24), rgba(215, 165, 63, 0));
}
.mg-nav-oge:hover { background: rgba(255, 255, 255, .035); }
/* Rozetli satırda yazı rozetin altına girmesin. */
.mg-nav-oge:has(.mg-nav-rozet) { padding-right: 48px; }
.mg-nav-oge.is-secili {
  background: linear-gradient(90deg, rgba(240, 192, 99, .34) 0%, rgba(240, 192, 99, .12) 60%, rgba(240, 192, 99, 0) 100%);
}
.mg-nav-oge.is-secili::after {
  content: "";
  position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #ffe08f, #d7a53f);
  box-shadow: 0 0 12px rgba(242, 208, 137, .6);
}
.mg-nav-ikon {
  flex: none;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .55));
}
.mg-nav-ikon > svg { width: 44px; height: 44px; stroke: none; }
.mg-nav-ikon .geri-ikon { width: 46px; height: 46px; }
.mg-ni-elmas { position: relative; width: 46px; height: 40px; }
.mg-ni-elmas .gem { position: absolute; width: 23px; height: 23px; }
.mg-ni-elmas .gem:nth-child(1) { left: 2px; top: 15px; transform: rotate(-12deg); }
.mg-ni-elmas .gem:nth-child(2) { left: 21px; top: 15px; transform: rotate(10deg); }
.mg-ni-elmas .gem:nth-child(3) { left: 11px; top: 2px; }
.mg-ni-para { position: relative; width: 46px; height: 40px; }
.mg-ni-para .coin { position: absolute; width: 22px; height: 22px; }
.mg-ni-para .coin:nth-child(1) { left: 3px; top: 16px; }
.mg-ni-para .coin:nth-child(2) { left: 21px; top: 16px; }
.mg-ni-para .coin:nth-child(3) { left: 12px; top: 3px; }
.mg-nav-ad { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mg-nav-ad b {
  font-size: 18px; font-weight: 800; letter-spacing: .2px;
  color: var(--txt);
  text-shadow: 0 2px 4px rgba(0, 0, 0, .6);
}
.mg-nav-oge.is-secili .mg-nav-ad b { color: #fff3cf; }
.mg-nav-ad i { font-style: normal; font-size: 12.5px; font-weight: 800; color: #5ee08e; }
.mg-nav-rozet {
  position: absolute; right: 16px; top: 50%;
  min-width: 24px; height: 24px; margin-top: -12px; padding: 0 7px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: #fff;
  background: linear-gradient(180deg, #e55a4f, #b32a21);
  border: 2px solid #12161d;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}

/* ——— içerik: başlık ve kartlar */
/* İçerik alanı sabit genişlikte (26 + en geniş raf + 40), sayfa boyu uzanır
   (taşan raf kayar); raf içinde hem yatayda hem dikeyde ortalanır. Soldaki
   26px en geniş rafta listeyle kartlar arasındaki boşluk. Raf taşarsa
   otomatik kenar boşluğu sıfıra iner, üstten kesilmez. */
.mg-icerik {
  flex: 0 1 calc(var(--mg-raf-en) + 66px); min-width: 0; align-self: stretch;
  display: flex; flex-direction: column;
  overflow-x: hidden; overflow-y: auto; scrollbar-width: thin;
  padding: 4px 40px 12px 26px;
}
.mg-icerik > .mg-raf { margin: auto; }
.mg-raf { display: flex; flex-direction: column; gap: 22px; }
.mg-bas { display: flex; flex-direction: column; gap: 2px; }
.mg-bas span {
  font-size: 17px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}
.mg-bas h2 {
  margin: 0;
  font-size: 44px; font-weight: 900; letter-spacing: 1px; line-height: 1.05;
  background: linear-gradient(180deg, #fff3c4 0%, #f2d089 45%, #d7a53f 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 0 rgba(90, 60, 10, .85)) drop-shadow(0 6px 14px rgba(0, 0, 0, .5));
}

/* ——— geri ödeme puanı: madalyon ve ürün köşesindeki "+300" rozeti */
.geri-ikon { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; vertical-align: middle; }
.geri-ikon svg { display: block; width: 100%; height: 100%; stroke: none; }
.geri-rozet {
  position: absolute; z-index: 3;
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none;
}
.geri-rozet .geri-ikon {
  width: 54px; height: 54px;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .55)) drop-shadow(0 0 8px rgba(94, 224, 142, .35));
}
.geri-rozet b {
  margin-top: 3px; padding: 1px 8px 2px;
  font-size: 16px; font-weight: 900; line-height: 1.1; letter-spacing: .2px;
  color: #7dffac;
  background: linear-gradient(180deg, rgba(10, 44, 24, .95), rgba(4, 22, 12, .95));
  border: 1px solid rgba(125, 255, 172, .45);
  border-radius: 999px;
  text-shadow:
    1px 1px 0 #0b3a1d, -1px -1px 0 #0b3a1d, 1px -1px 0 #0b3a1d, -1px 1px 0 #0b3a1d,
    0 2px 0 #0b3a1d, 0 3px 5px rgba(0, 0, 0, .6);
}
.geri-rozet.is-kose { right: -12px; bottom: -14px; }
.geri-rozet.is-sol { left: 14px; top: 50%; transform: translateY(-50%); }
.geri-rozet.is-sol .geri-ikon { width: 42px; height: 42px; }
.geri-rozet.is-sol b { margin-top: 2px; font-size: 14px; }
.geri-rozet.is-ust { right: -16px; top: -22px; }

/* ——— mühür: kartın köşesine eğik basılmış altın yıldız (aylık paketin
   değeri) */
.ay-deger {
  position: absolute; z-index: 3;
  isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #3a2500;
  text-align: center;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5));
  pointer-events: none;
}
.ay-deger::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  clip-path: polygon(50.0% 0.0%, 56.6% 8.5%, 65.5% 2.4%, 69.1% 12.6%, 79.4% 9.5%, 79.7% 20.3%, 90.5% 20.6%, 87.4% 30.9%, 97.6% 34.5%, 91.5% 43.4%, 100.0% 50.0%, 91.5% 56.6%, 97.6% 65.5%, 87.4% 69.1%, 90.5% 79.4%, 79.7% 79.7%, 79.4% 90.5%, 69.1% 87.4%, 65.5% 97.6%, 56.6% 91.5%, 50.0% 100.0%, 43.4% 91.5%, 34.5% 97.6%, 30.9% 87.4%, 20.6% 90.5%, 20.3% 79.7%, 9.5% 79.4%, 12.6% 69.1%, 2.4% 65.5%, 8.5% 56.6%, 0.0% 50.0%, 8.5% 43.4%, 2.4% 34.5%, 12.6% 30.9%, 9.5% 20.6%, 20.3% 20.3%, 20.6% 9.5%, 30.9% 12.6%, 34.5% 2.4%, 43.4% 8.5%);
  background: radial-gradient(circle, #fff3c2 0%, #f7cf66 52%, #c8912e 100%);
}
.ay-deger::after {
  content: "";
  position: absolute; inset: 12%; z-index: -1;
  border: 1.5px dashed rgba(110, 72, 8, .45);
  border-radius: 50%;
}
.ay-deger b { font-weight: 900; line-height: 1; letter-spacing: -.3px; }
.ay-deger i { font-style: normal; font-weight: 900; letter-spacing: 1px; }

/* ——— satın alma düğmesi: iri, dolu altın; fiyatı yazar */
.mg-fiyat {
  position: relative;
  min-width: 190px; height: 58px; padding: 0 28px;
  font-size: 26px; font-weight: 900; letter-spacing: .6px;
  color: #3a2500;
  text-shadow: 0 1px 0 rgba(255, 244, 205, .7);
  background: linear-gradient(180deg, #ffe7a6 0%, #f0c063 42%, #d39a34 78%, #a8741f 100%);
  border: 1px solid #6f5014;
  border-radius: 12px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), inset 0 -3px 0 rgba(110, 72, 8, .45), 0 6px 14px rgba(0, 0, 0, .45);
  transition: filter .15s, transform .12s;
}
.mg-fiyat:not(:disabled):hover { filter: brightness(1.07); transform: translateY(-1px); }
.mg-fiyat:not(:disabled):active { transform: translateY(1px); }
.mg-fiyat:disabled {
  cursor: default;
  color: #8a8f99; text-shadow: none;
  background: linear-gradient(180deg, #2a2e36, #1c1f25);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.mg-fiyat.is-kucuk { min-width: 0; height: 46px; padding: 0 18px; font-size: 14px; letter-spacing: 1px; }
.mg-fiyat.is-ikincil {
  color: var(--gold-hi); text-shadow: none;
  background: rgba(215, 165, 63, .12);
  border-color: rgba(215, 165, 63, .5);
  box-shadow: none;
}

/* Mağazaya başka yerden bir pakete gelindi (ör. çantadaki bilet): o kart
   birkaç kez hafifçe yanıp söner. */
@keyframes mg-vurgu {
  0%, 100% { box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 18px 40px rgba(0, 0, 0, .5); }
  50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ev) 75%, transparent), 0 0 36px color-mix(in srgb, var(--ev) 50%, transparent); }
}

/* Altın çerçeve: kartın zemini iç kutuda, çerçevenin degradesi kenarda. */
.gem-kart, .pk-kart {
  --kart-ic: linear-gradient(180deg, #4a3714 0%, #2d2210 55%, #1b150b 100%);
  border: 3px solid transparent;
  background:
    var(--kart-isik, none) padding-box,
    var(--kart-ic) padding-box,
    linear-gradient(160deg, #fff0b8 0%, #d7a53f 35%, #8a6416 62%, #f2d089 100%) border-box;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 236, 170, .2), 0 14px 30px rgba(0, 0, 0, .5);
}

/* ——— elmas rafı: 3 × 2 kart; kese büyüdükçe yığın büyür */
/* Satır arası geniş: alttaki kartın mührü üstteki kartın geri ödeme rozetine değmesin. */
.gem-grid { display: grid; grid-template-columns: repeat(3, 330px); gap: 46px 30px; }
/* İlk alış başlığı: küçük altın satır, altında iri, altın degradeli yazı. */
.gem-baslik {
  margin: 0 0 10px 4px;
  display: flex; flex-direction: column; align-items: flex-start;
  font-family: 'Archivo Black', Inter, sans-serif; font-weight: 400;
  pointer-events: none;
}
.gem-baslik i {
  font-style: normal; font-size: 22px; letter-spacing: .6px; line-height: 1.1;
  color: #f7cf66;
  text-shadow: 0 2px 0 #3a2400, 0 0 16px rgba(255, 190, 60, .3);
}
.gem-baslik b {
  font-weight: 400; font-size: 48px; letter-spacing: .4px; line-height: 1.05;
  color: transparent;
  background: linear-gradient(180deg, #fffbe0 0%, #ffe07a 38%, #f5b52c 70%, #d98a12 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 3px 0 #3a2400) drop-shadow(0 8px 16px rgba(0, 0, 0, .6));
}
.gem-kart {
  --kart-isik: radial-gradient(75% 62% at 50% 32%, rgba(255, 214, 120, .30) 0%, rgba(255, 214, 120, 0) 72%);
  position: relative;
  height: 226px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 0 14px 16px;
  border-radius: 16px;
  transition: transform .16s, filter .16s;
}
.gem-kart:hover { transform: translateY(-3px); filter: brightness(1.07); }
/* İlk alış: sağ üst köşeye eğik basılmış turuncu-altın yıldız mühür, kartın
   dışına taşar. Üstte "İLK ALIŞ", altında iri "+250"; yazılar beyaz, kalın
   koyu kahve kenarlı — her zeminde okunur. Alınınca kalkar.
   Netlik: gölge yalnızca zeminde (yazı filtreye girmez) ve mühür kıpırdamaz;
   kenar gerçek çizgi (text-stroke, dolgunun ALTINDA). Eskiden bütün mühre
   gölge filtresi ve sürekli büyüme animasyonu vardı: tarayıcı yazıyı resim
   gibi ölçekleyip bulanıklaştırıyordu. */
.gem-ilk {
  --ilk-kontur: #5c2800;
  position: absolute; right: -34px; top: -22px; z-index: 3;
  isolation: isolate;
  width: 156px; height: 90px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: 'Archivo Black', Inter, sans-serif; font-weight: 400;
  color: #fff;
  text-align: center;
  transform: rotate(-13deg);
  pointer-events: none;
}
/* Zemin ayrı katmanda: yıldız kırpması gölgeyi de keseceği için gölge dış kapta. */
.gem-ilk-zemin {
  position: absolute; inset: 0; z-index: -1;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .55));
}
.gem-ilk-zemin::before {
  content: "";
  position: absolute; inset: 0;
  clip-path: polygon(50.0% 0.0%, 54.5% 6.7%, 60.4% 1.1%, 63.4% 8.6%, 70.3% 4.3%, 71.8% 12.3%, 79.4% 9.5%, 79.1% 17.7%, 87.2% 16.5%, 85.2% 24.4%, 93.3% 25.0%, 89.7% 32.3%, 97.6% 34.5%, 92.5% 41.0%, 99.7% 44.8%, 93.5% 50.0%, 99.7% 55.2%, 92.5% 59.0%, 97.6% 65.5%, 89.7% 67.7%, 93.3% 75.0%, 85.2% 75.6%, 87.2% 83.5%, 79.1% 82.3%, 79.4% 90.5%, 71.8% 87.7%, 70.3% 95.7%, 63.4% 91.4%, 60.4% 98.9%, 54.5% 93.3%, 50.0% 100.0%, 45.5% 93.3%, 39.6% 98.9%, 36.6% 91.4%, 29.7% 95.7%, 28.3% 87.7%, 20.6% 90.5%, 20.9% 82.3%, 12.8% 83.5%, 14.8% 75.6%, 6.7% 75.0%, 10.3% 67.7%, 2.4% 65.5%, 7.5% 59.0%, 0.3% 55.2%, 6.5% 50.0%, 0.3% 44.8%, 7.5% 41.0%, 2.4% 34.5%, 10.3% 32.3%, 6.7% 25.0%, 14.8% 24.4%, 12.8% 16.5%, 20.9% 17.7%, 20.6% 9.5%, 28.3% 12.3%, 29.7% 4.3%, 36.6% 8.6%, 39.6% 1.1%, 45.5% 6.7%);
  background: radial-gradient(ellipse at 50% 38%, #fff4b0 0%, #ffd23f 40%, #f59a16 76%, #c9620a 100%);
}
.gem-ilk-zemin::after {
  content: "";
  position: absolute; inset: 11px 16px;
  border: 1.5px dashed rgba(110, 50, 0, .45);
  border-radius: 50%;
}
.gem-ilk i, .gem-ilk b {
  font-style: normal; font-weight: 400; line-height: 1;
  -webkit-text-stroke: var(--ilk-cizgi) var(--ilk-kontur);
  paint-order: stroke fill;
}
.gem-ilk i { --ilk-cizgi: 4px; font-size: 14px; letter-spacing: .6px; color: #fff3cf; }
.gem-ilk b {
  --ilk-cizgi: 6px;
  margin-top: 3px;
  font-size: 28px; letter-spacing: .2px;
  text-shadow: 0 4px 0 #3d1a00;
}
.gem-isik {
  position: absolute; left: 50%; top: 4px;
  width: 240px; height: 150px; margin-left: -120px;
  background: repeating-conic-gradient(from 0deg, rgba(255, 232, 170, .13) 0 7deg, rgba(255, 232, 170, 0) 7deg 17deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 18%, transparent 100%);
  pointer-events: none;
}
.gem-sahne {
  position: absolute; left: 50%; top: 8px;
  width: 220px; height: 106px; margin-left: -110px;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .45)) drop-shadow(0 0 14px rgba(110, 190, 255, .25));
  pointer-events: none;
}
.gem-sahne .gem, .gem-sahne .coin { position: absolute; }
/* Para rafı: aynı kart, altın yığını; ışık mavi değil altın. */
.gem-kart.is-para .gem-sahne { filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .45)) drop-shadow(0 0 14px rgba(255, 200, 90, .3)); }
/* Fiyat elmasla: düğmede elmas simgesi. */
.gem-fiyat.is-elmas { display: inline-flex; align-items: center; gap: 7px; }
.gem-fiyat.is-elmas .gem { width: 21px; height: 21px; }
.gem-miktar {
  position: relative;
  font-size: 28px; font-weight: 900; letter-spacing: .3px;
  color: #fff4d6;
  text-shadow: 0 2px 0 rgba(60, 40, 5, .9), 0 4px 10px rgba(0, 0, 0, .5);
}
.gem-ad { position: relative; margin-top: 1px; font-size: 14px; font-weight: 600; color: #e7c98a; }
.gem-fiyat {
  position: relative;
  margin-top: 9px; padding: 5px 22px;
  font-size: 23px; font-weight: 900; letter-spacing: .4px;
  color: #3a2500;
  text-shadow: 0 1px 0 rgba(255, 244, 205, .7);
  background: linear-gradient(180deg, #ffe7a6 0%, #f0c063 45%, #c48c2a 100%);
  border: 1px solid #6f5014;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 3px 8px rgba(0, 0, 0, .45);
}

/* ——— paketler: uzun kartlar; üstte sahne, altında adı, içindekiler ve fiyat */
.paket-grid { display: grid; grid-template-columns: repeat(2, 390px); gap: 36px; }
.pk-kart {
  --kart-ic: linear-gradient(180deg, #2c2313 0%, #1d1910 42%, #15130e 100%);
  position: relative;
  display: flex; flex-direction: column;
  border-radius: 20px;
}
.pk-kart.is-vurgu { animation: mg-vurgu 1.5s ease-in-out 4; }
.pk-sahne {
  position: relative;
  height: 264px; margin: 8px 8px 0;
  border-radius: 13px;
  overflow: hidden;
  background: radial-gradient(70% 70% at 50% 44%,
    color-mix(in srgb, var(--ev) 62%, #fff 8%) 0%,
    color-mix(in srgb, var(--ev) 30%, #1b1509) 46%, #15110a 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 236, 170, .25), inset 0 -34px 40px rgba(0, 0, 0, .35);
}
.pk-isik {
  position: absolute; inset: -45%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 240, 200, .17) 0 7deg, rgba(255, 240, 200, 0) 7deg 16deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 22%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 22%, transparent 100%);
  animation: pk-don 80s linear infinite;
}
@keyframes pk-don { to { transform: rotate(360deg); } }
/* Sahne yalnızca ana içerik: arkada her yere serpilmiş küçük, bulanık,
   soluk kopyalar (uzakta da doluymuş gibi), önde iri yığın. Boyları
   --pk-k ile küçülür (telefon). */
.pk-uzaklar { position: absolute; inset: 0; }
.pk-uzak {
  position: absolute;
  width: calc(var(--b) * var(--pk-k, 1)); height: calc(var(--b) * var(--pk-k, 1));
  transform: translate(-50%, -50%) rotate(var(--a));
  filter: blur(calc(var(--bl) * var(--pk-k, 1)));
}
.pk-on {
  position: absolute; left: 50%; top: 50%;
  width: 360px; height: 240px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .5));
}
.pk-mama { position: absolute; width: var(--b); height: var(--b); }
.pk-bilet {
  position: absolute; left: 50%; top: 50%;
  width: var(--b, 200px); height: var(--b, 200px);
  margin: calc(var(--b, 200px) * -.48) 0 0 calc(var(--b, 200px) * -.5);
  transform: rotate(var(--a)); transform-origin: 50% 175%;
}
.pk-uzak > span, .pk-mama > span, .pk-bilet > span { display: block; width: 100%; height: 100%; }
.pk-uzak .mama svg, .pk-uzak .bilet svg,
.pk-mama .mama svg, .pk-bilet .bilet svg { display: block; width: 100%; height: 100%; }
.pk-adet {
  position: absolute; right: 18px; bottom: 8px;
  font-size: 46px; font-weight: 900; letter-spacing: -.5px;
  color: #fff4d6;
  text-shadow: 0 3px 0 rgba(70, 45, 5, .95), 0 0 18px rgba(255, 210, 110, .5);
}
.pk-tukendi {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 30px; font-weight: 900; letter-spacing: 5px;
  color: #efeadf;
  background: rgba(8, 10, 14, .62);
}
.pk-kart.is-bitti .pk-on, .pk-kart.is-bitti .pk-uzaklar, .pk-kart.is-bitti .pk-adet { filter: grayscale(.85) brightness(.6); }
.pk-kart.is-bitti .geri-rozet { display: none; }
.pk-kart.is-bitti .pk-bas { padding-left: 20px; }

.pk-bas {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 20px 12px 86px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 214, 120, .13), rgba(255, 214, 120, 0));
  border-bottom: 1px solid rgba(215, 165, 63, .22);
}
.pk-tur { font-size: 12px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ev); }
.pk-ad {
  font-size: 30px; font-weight: 900; letter-spacing: .3px;
  color: #fff4d6;
  text-shadow: 0 2px 0 rgba(60, 40, 5, .9), 0 4px 10px rgba(0, 0, 0, .45);
}
.pk-liste { margin: 0; padding: 8px 24px 4px; list-style: none; display: flex; flex-direction: column; }
.pk-liste li {
  display: flex; align-items: center; gap: 14px;
  height: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.pk-liste li:last-child { border-bottom: 0; }
.pk-ikon {
  flex: none;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #2c3240, #1b1f28);
  border: 1px solid rgba(215, 165, 63, .32);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.pk-ikon .coin, .pk-ikon .gem { width: 28px; height: 28px; }
.pk-ikon .mama svg, .pk-ikon .bilet svg { width: 34px; height: 34px; }
.pk-oge { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; color: var(--txt); }
.pk-liste b { font-size: 21px; font-weight: 900; color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.pk-alt { margin-top: auto; display: flex; justify-content: center; padding: 12px 20px 22px; }

/* ——— aylık paketler: uzun kartlar; temel altın, gelişmiş sedef */
.aylik-grid { display: grid; grid-template-columns: repeat(2, 440px); gap: 46px; padding: 18px 0 0; }
.ay-kart {
  position: relative;
  min-height: 590px;
  display: flex; flex-direction: column; gap: 18px;
  padding: 30px 30px 26px;
  border: 3px solid transparent;
  border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 20px 44px rgba(0, 0, 0, .55);
}
.ay-kart.is-temel {
  background:
    radial-gradient(90% 55% at 28% 0%, rgba(255, 220, 130, .34) 0%, rgba(255, 220, 130, 0) 70%) padding-box,
    linear-gradient(170deg, #5b4318 0%, #3a2b11 46%, #211a0d 100%) padding-box,
    linear-gradient(160deg, #fff0b8, #d7a53f 35%, #8a6416 64%, #f2d089) border-box;
}
.ay-kart.is-gelismis {
  background:
    radial-gradient(90% 55% at 28% 0%, rgba(214, 170, 255, .36) 0%, rgba(214, 170, 255, 0) 70%) padding-box,
    linear-gradient(170deg, #3e2b66 0%, #2a2149 46%, #19152f 100%) padding-box,
    conic-gradient(from 210deg, #f6d4ff, #a8e6ff, #c7b3ff, #ffd1ec, #b8fff1, #f6d4ff) border-box;
}
/* Sedef parıltısı: kartın üstünden geçen çapraz ışık. */
.ay-kart.is-gelismis::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 17px;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, .09) 44%, rgba(190, 240, 255, .12) 50%, rgba(255, 210, 240, .06) 56%, rgba(255, 255, 255, 0) 68%);
  pointer-events: none;
}
.ay-kart.is-acik { box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 0 4px rgba(71, 193, 115, .35), 0 20px 44px rgba(0, 0, 0, .55); }
.ay-ad { position: relative; margin: 0; font-size: 42px; font-weight: 900; line-height: 1.02; letter-spacing: .5px; }
.is-temel .ay-ad {
  background: linear-gradient(180deg, #fff3c4 0%, #f2d089 45%, #e0a93c 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 0 rgba(80, 52, 8, .9));
}
.is-gelismis .ay-ad { color: #fbf4ff; text-shadow: 0 3px 0 #3b2263, 0 0 22px rgba(200, 160, 255, .6); }
.ay-deger { right: -30px; top: 104px; width: 116px; height: 116px; transform: rotate(12deg); }
.ay-deger b { font-size: 25px; }
.ay-deger i { margin-top: 2px; font-size: 11px; }
.ay-bolum { position: relative; display: flex; flex-direction: column; gap: 9px; }
.ay-bolum h4 {
  margin: 0; padding: 6px 12px;
  font-size: 14px; font-weight: 800; letter-spacing: .6px;
  color: #f7e7c0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .38), rgba(0, 0, 0, .06));
  border-radius: 7px;
}
.is-gelismis .ay-bolum h4 { color: #efe4ff; }
.ay-hemen { display: flex; gap: 10px; }
.ay-hemen-kutu {
  flex: 1;
  display: flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 16px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 236, 170, .32);
  border-radius: 11px;
}
.ay-hemen-kutu .gem, .ay-hemen-kutu .coin { width: 32px; height: 32px; }
.ay-hemen-kutu b { font-size: 26px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
.ay-ayricalik { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 1.4; color: var(--txt); }
.ay-ayricalik b { color: var(--gold-hi); }
.ay-cark-ikon { flex: none; width: 28px; height: 28px; stroke: none; }
.ay-gunluk { display: flex; flex-wrap: wrap; gap: 10px; }
.ay-kutu {
  position: relative;
  width: 86px; height: 86px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #2f3646, #1a1e27);
  border: 2px solid rgba(215, 165, 63, .5);
  border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 3px 8px rgba(0, 0, 0, .35);
}
.is-gelismis .ay-kutu { border-color: rgba(190, 160, 255, .55); }
.ay-kutu .gem, .ay-kutu .coin { width: 42px; height: 42px; }
.ay-kutu .mama svg, .ay-kutu .bilet svg { width: 50px; height: 50px; }
.ay-kutu b {
  position: absolute; right: 6px; bottom: 4px;
  font-size: 14px; font-weight: 900; color: #fff;
  text-shadow: 0 0 3px #000, 0 1px 2px #000;
}
.ay-alt { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ay-kalan {
  padding: 4px 14px;
  font-size: 13px; font-weight: 800; color: var(--green-hi);
  background: rgba(47, 158, 87, .16);
  border: 1px solid rgba(71, 193, 115, .4);
  border-radius: 999px;
}
.ay-dugmeler { display: flex; gap: 10px; }

/* ——— geri ödeme (referanstaki "satın alma ödülleri" gibi): yolda altı
   hediye kutusu, altında puanla dolan çubuk; en altta seçili kutunun
   içindekiler, mevcut ilerleme ve düğme. Sayfanın ışığı daha sıcak, sağ
   üstten altın bir ışık huzmesi iner. */
.mg-sayfa.is-geri::before {
  background:
    radial-gradient(50% 36% at 56% 52%, rgba(240, 180, 70, .16), rgba(0, 0, 0, 0) 72%),
    radial-gradient(80% 52% at 56% 112%, rgba(240, 180, 70, .44) 0%, rgba(215, 150, 50, .15) 45%, rgba(0, 0, 0, 0) 78%);
}
.mg-sayfa.is-geri::after {
  content: "";
  position: absolute; z-index: -1;
  right: 16%; top: -20%;
  width: 280px; height: 130%;
  transform: rotate(24deg);
  background: linear-gradient(90deg, rgba(255, 226, 150, 0), rgba(255, 226, 150, .09) 30%, rgba(255, 226, 150, .15) 50%, rgba(255, 226, 150, .09) 70%, rgba(255, 226, 150, 0));
  filter: blur(10px);
  pointer-events: none;
}
.go-raf .mg-bas { position: relative; max-width: 1080px; }
/* Başlığın sağında, bilgi düğmesinin solunda: haftalık yenilenmeye kalan süre. */
.go-hafta {
  position: absolute; right: 40px; top: 10px;
  height: 30px; margin: 0; padding: 0 12px;
  display: flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600; color: var(--txt-dim);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  cursor: help;
}
.go-hafta b { color: var(--gold); font-weight: 800; }
.go-bilgi {
  position: absolute; right: 0; top: 10px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  font: italic 900 16px/1 Georgia, serif;
  color: var(--txt-dim);
  background: rgba(255, 255, 255, .08);
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  cursor: help;
}
.go-yol { position: relative; width: 1080px; margin-top: 10px; }
.go-kutular { display: grid; grid-template-columns: repeat(6, 1fr); }
.go-kutu {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 0;
  background: none; border: 0;
}
.go-hediye {
  position: relative;
  width: 150px; height: 155px;
  display: grid; place-items: end center;
}
.go-hediye .hediye {
  position: relative;
  width: 150px; height: 155px;
  stroke: none;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .45));
  transition: transform .2s, filter .2s;
}
.go-kutu:hover .hediye { transform: translateY(-4px); }
.go-kutu b {
  margin-top: -4px;
  font-size: 30px; font-weight: 900; letter-spacing: .3px;
  color: #fff4d6;
  text-shadow: 2px 2px 0 #3b2a0a, -2px -2px 0 #3b2a0a, 2px -2px 0 #3b2a0a, -2px 2px 0 #3b2a0a, 0 4px 8px rgba(0, 0, 0, .6);
}
.go-kutu.is-secili b { color: #ffe08f; }
/* Seçili kutunun altında parlak bir hale. */
.go-kutu.is-secili .go-hediye::after {
  content: "";
  position: absolute; left: 8%; right: 8%; bottom: 0;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 230, 150, .8), rgba(255, 230, 150, 0));
}
/* Hazır kutu: arkasında altın ışık, kutu zıplar. */
.go-kutu.is-hazir .go-hediye::before {
  content: "";
  position: absolute; inset: 6% -8% 0;
  background: radial-gradient(closest-side, rgba(255, 220, 120, .75), rgba(255, 200, 90, 0));
  animation: go-isik 1.6s ease-in-out infinite;
}
.go-kutu.is-hazir .hediye { animation: go-zipla 1.2s ease-in-out infinite; }
@keyframes go-zipla { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes go-isik { 50% { opacity: .45; transform: scale(.92); } }
/* Açılmış kutu: kapağı kalkık, soluk, köşede yeşil onay. */
.hediye-kapak { transform-box: fill-box; transform-origin: 12% 100%; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.go-kutu.is-acik .hediye-kapak { transform: translate(-2px, -11px) rotate(-15deg); }
.go-kutu.is-acik .hediye { filter: saturate(.5) brightness(.72) drop-shadow(0 8px 12px rgba(0, 0, 0, .45)); }
.go-tik {
  position: absolute; right: 22px; bottom: 16px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--green-hi);
  border: 3px solid #12161d;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .5);
}
.go-tik::after {
  content: "";
  position: absolute; left: 8px; top: 3px;
  width: 8px; height: 14px;
  border: solid #0d1a12; border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.go-cubuk {
  position: relative;
  height: 16px; margin-top: 14px;
  background: linear-gradient(180deg, #07090d, #151a23);
  border: 1px solid rgba(215, 165, 63, .42);
  border-radius: 999px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .4);
}
.go-cubuk > i {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--dolgu);
  border-radius: inherit;
  background: linear-gradient(90deg, #168a45, #3fd67c 70%, #9bffc2);
  box-shadow: 0 0 10px rgba(94, 224, 142, .5);
}
.go-cubuk .geri-ikon {
  position: absolute; left: var(--dolgu); top: 50%;
  width: 40px; height: 40px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6));
}
.go-panel {
  position: relative;
  width: 1080px; margin-top: 24px;
  display: flex; align-items: center; gap: 24px;
  padding: 20px 26px;
  background: linear-gradient(180deg, #25211a, #17150f);
  border: 2px solid rgba(215, 165, 63, .55);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 236, 170, .12), 0 14px 30px rgba(0, 0, 0, .45);
}
/* Panelin üstünde seçili kutuyu gösteren ok. */
.go-panel::before {
  content: "";
  position: absolute; left: var(--ok); top: -13px;
  width: 22px; height: 22px; margin-left: -11px;
  background: #25211a;
  border-left: 2px solid rgba(215, 165, 63, .55);
  border-top: 2px solid rgba(215, 165, 63, .55);
  transform: rotate(45deg);
}
.go-panel-sol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.go-panel-sol p { margin: 0; font-size: 19px; font-weight: 600; color: var(--txt); }
.go-panel-sol p b { color: #7dffac; }
.go-oduller { display: flex; flex-wrap: wrap; gap: 12px; }
.go-odul {
  position: relative;
  width: 78px; height: 78px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #2f3646, #1a1e27);
  border: 2px solid rgba(215, 165, 63, .5);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 3px 8px rgba(0, 0, 0, .35);
}
.go-odul.is-kedi { border-color: rgba(190, 140, 255, .75); background: linear-gradient(180deg, #3a2a5c, #1e1832); }
.go-odul .coin, .go-odul .gem { width: 40px; height: 40px; }
.go-odul .mama svg, .go-odul .bilet svg { width: 46px; height: 46px; }
.go-odul .odul-kedi { width: 68px; height: 68px; }
.go-odul b {
  position: absolute; right: 5px; bottom: 3px;
  font-size: 13px; font-weight: 900; color: #fff;
  text-shadow: 0 0 3px #000, 0 1px 2px #000;
}
.go-panel-sag { flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.go-ilerleme { display: flex; align-items: center; gap: 8px; }
.go-ilerleme > .geri-ikon { width: 36px; height: 36px; }
.go-ilerleme span { display: flex; flex-direction: column; }
.go-ilerleme i { font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #9fe8bb; }
.go-ilerleme b {
  font-size: 21px; font-weight: 900; color: #7dffac;
  text-shadow: 1px 1px 0 #0b3a1d, -1px -1px 0 #0b3a1d, 1px -1px 0 #0b3a1d, -1px 1px 0 #0b3a1d, 0 2px 0 #0b3a1d;
}
.mg-fiyat.is-orta { min-width: 200px; height: 54px; padding: 0 24px; font-size: 20px; letter-spacing: 1.4px; }

/* ————————————————————————————— ödül uçuşu */

/* Çarktan kazanılan ödüller sağ üste uçar. Katman tuvalin içinde, her şeyin
   üstünde; tıklamayı engellemez. Konumlar tasarım pikseli (js/ui.js). */
.ucus-katmani {
  position: absolute; inset: 0;
  z-index: 95;
  pointer-events: none;
  overflow: hidden;
}
.ucan {
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  will-change: transform, opacity;
}
.ucan .coin { width: 36px; height: 36px; }
.ucan .gem { width: 38px; height: 38px; }
.ucan .mama svg { width: 50px; height: 50px; }
.ucan .odul-kedi { width: 64px; height: 64px; object-fit: contain; }
.ucan.is-para { filter: drop-shadow(0 0 7px rgba(255, 210, 110, .75)); }
.ucan.is-elmas { filter: drop-shadow(0 0 7px rgba(120, 200, 255, .8)); }
.ucan.is-mama { filter: drop-shadow(0 0 7px rgba(255, 170, 110, .7)); }
.ucan.is-pmama { filter: drop-shadow(0 0 8px rgba(255, 210, 110, .8)); }
.ucan.is-kedi { filter: drop-shadow(0 0 10px rgba(255, 230, 160, .8)); }
.ucan .sp-rozet { height: 26px; padding: 0 7px; font-size: 15px; border-radius: 6px; }
.ucan.is-sp { filter: drop-shadow(0 0 8px rgba(242, 208, 137, .85)); }

/* Hedefin altında beliren "+500". */
.ucus-arti {
  position: absolute; left: 0; top: 0;
  padding: 3px 10px;
  font-size: 16px; font-weight: 800; letter-spacing: .3px; white-space: nowrap;
  color: #fff4d6;
  background: rgba(12, 14, 19, .88);
  border: 1px solid rgba(215, 165, 63, .55);
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .5);
}
.ucus-arti.is-elmas { color: #e2f3ff; border-color: rgba(110, 190, 255, .6); }
.ucus-arti.is-mama { color: #ffd9c2; border-color: rgba(226, 102, 58, .6); }

/* ————————————————————————————— altın bilet */

.bilet { display: inline-grid; place-items: center; vertical-align: middle; }
.bilet svg { width: 18px; height: 18px; stroke: none; }
.cark-kazanc .bilet svg { width: 20px; height: 20px; }
.shop-ust .bilet svg { width: 28px; height: 28px; }
.ucan .bilet svg { width: 46px; height: 46px; }
.ucan.is-bilet { filter: drop-shadow(0 0 7px rgba(255, 214, 110, .8)); }
.ucus-arti.is-bilet { color: #fff0c2; border-color: rgba(242, 193, 78, .7); }
.ucus-arti.is-pmama { color: #ffe9a6; border-color: rgba(240, 169, 58, .7); }
.ucus-arti.is-kedi { color: var(--gold-hi); }

/* Kedi çarkının üstündeki bilet sayacı: kasalarla aynı içe gömük kapsül. */
.bilet-sayac {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 5px 0 6px;
  background: linear-gradient(180deg, rgba(3, 5, 9, .78), rgba(14, 17, 24, .62));
  border: 1px solid rgba(242, 193, 78, .45);
  border-radius: 999px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6);
}
.bilet-sayac .bilet svg { width: 30px; height: 30px; }
.bilet-sayac b {
  min-width: 36px;
  font-size: 17px; font-weight: 800; text-align: right;
  font-variant-numeric: tabular-nums; color: #fff1d2;
}
.bilet-sayac .kasa-arti { width: 30px; height: 30px; }
.bilet-eksik { color: #ffd9a8; }
.bilet-eksik b { color: var(--gold-hi); }

/* ————————————————————————————— çevirme ödülleri (sandık yolu) */

/* Çarkın sağında dikey bir yol, aşağıdan yukarı: dipte çevrilen sayı,
   üstünde sandıklar ve eşikleri. Çubuk sandıkların ortasından geçer ve
   çevrilen sayıyla aşağıdan yukarı dolar; dipten ilk sandığa kadarki parça
   ilk eşiğe giden yol. Eşiğe ulaşan sandık parlar ve zıplar, basınca açılır;
   açılanda yeşil onay. */
.esik-serit {
  position: relative;
  display: flex; flex-direction: column;
  padding: 14px 16px 16px;
  background: linear-gradient(180deg, #25211a, #17150f);
  border: 2px solid rgba(215, 165, 63, .55);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 236, 170, .12), 0 14px 30px rgba(0, 0, 0, .45);
}
.es-bas {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(215, 165, 63, .25);
}
.es-bas b { font-size: 34px; font-weight: 900; line-height: 1; color: #fff4d6; text-shadow: 0 2px 0 rgba(60, 40, 5, .9); }
.es-bas i { font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: 1.4px; color: var(--gold); }
.es-yol { position: relative; flex: 1; min-height: 0; margin-bottom: 6px; }
.es-cizgi {
  position: absolute; left: 37px; top: 46px; bottom: 0;
  width: 12px;
  background: linear-gradient(90deg, #07090d, #151a23);
  border: 1px solid rgba(215, 165, 63, .42);
  border-radius: 999px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6);
  overflow: hidden;
}
.es-cizgi > i {
  position: absolute; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  background: linear-gradient(0deg, #b8832a, #f7d77e);
  box-shadow: 0 0 8px rgba(242, 208, 137, .5);
}
.es-dugum {
  position: absolute; left: 0; right: 0;
  cursor: pointer;
  top: calc(46px + (100% - 46px) * (1 - var(--k)));
  transform: translateY(-50%);
  display: flex; align-items: center; gap: 12px;
  padding: 0 0 0 7px;
  text-align: left;
  background: none; border: 0;
}
.es-sandik {
  position: relative; flex: none; display: block;
  width: 72px; height: 72px;
  filter: grayscale(.75) brightness(.6);
  transition: filter .2s;
}
.es-sandik svg { display: block; width: 100%; height: 100%; stroke: none; }
.es-dugum:not(.is-hazir):hover .es-sandik,
.es-dugum.is-secili .es-sandik { filter: grayscale(.3) brightness(.95) drop-shadow(0 0 8px rgba(242, 208, 137, .55)); }
.es-dugum.is-alindi.is-secili .es-sandik { filter: saturate(.8) brightness(1) drop-shadow(0 0 8px rgba(94, 224, 142, .5)); }
.es-dugum.is-hazir .es-sandik {
  filter: drop-shadow(0 0 10px rgba(242, 208, 137, .9));
  animation: sandik-zipla 1.1s ease-in-out infinite;
}
.es-dugum.is-hazir:hover .es-sandik { filter: drop-shadow(0 0 14px rgba(255, 230, 160, 1)) brightness(1.1); }
.es-dugum.is-aciliyor .es-sandik { filter: none; animation: sandik-ac .45s ease-out; }
.es-dugum.is-alindi .es-sandik { filter: saturate(.55) brightness(.85); }
.es-tik {
  position: absolute; right: -2px; bottom: 6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--green-hi);
  border: 2px solid #12161d;
}
.es-tik::after {
  content: "";
  position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid #0d1a12; border-width: 0 2.4px 2.4px 0;
  transform: rotate(45deg);
}
.es-bilgi { display: flex; flex-direction: column; line-height: 1.05; min-width: 52px; }
.es-bilgi b {
  font-size: 28px; font-weight: 900;
  color: #d9cdb2;
  text-shadow: 1.5px 1.5px 0 #3b2a0a, -1.5px -1.5px 0 #3b2a0a, 1.5px -1.5px 0 #3b2a0a, -1.5px 1.5px 0 #3b2a0a;
}
.es-bilgi i { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: var(--txt-mute); }
.es-dugum.is-ulasildi .es-bilgi b { color: #ffe08f; }
@keyframes sandik-zipla {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* Sandığın içindekiler: yolun solunda, sandığa bakan oklu balon. */
.es-balon {
  position: absolute; right: calc(100% + 16px); z-index: 6;
  width: 270px;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 9px;
  padding: 14px 16px 13px;
  background: linear-gradient(180deg, #25211a, #17150f);
  border: 2px solid rgba(215, 165, 63, .7);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 236, 170, .12), 0 16px 34px rgba(0, 0, 0, .6);
  animation: es-balon-ac .16s ease-out;
}
.es-balon::after {
  content: "";
  position: absolute; right: -12px; top: 50%;
  width: 20px; height: 20px; margin-top: -10px;
  background: #1e1b14;
  border-top: 2px solid rgba(215, 165, 63, .7);
  border-right: 2px solid rgba(215, 165, 63, .7);
  transform: rotate(45deg);
}
@keyframes es-balon-ac { from { opacity: 0; transform: translate(8px, -50%); } }
.es-balon-bas { font-size: 17px; font-weight: 900; letter-spacing: .2px; color: #fff4d6; }
.es-balon-oduller { display: flex; flex-wrap: wrap; gap: 8px; }
.es-balon .go-odul { width: 68px; height: 68px; }
.es-balon .go-odul .coin, .es-balon .go-odul .gem { width: 34px; height: 34px; }
.es-balon .go-odul .mama svg, .es-balon .go-odul .bilet svg { width: 40px; height: 40px; }
.es-balon .go-odul .odul-kedi { width: 60px; height: 60px; }
.es-balon .go-odul b { font-size: 13px; }
.es-balon-ad { font-size: 14px; font-weight: 700; color: var(--gold-hi); }
.es-balon-durum { font-style: normal; font-size: 13px; font-weight: 600; color: var(--txt-dim); }
.es-balon-durum.is-hazir { color: #ffe08f; }
.es-balon-durum.is-alindi { color: var(--green-hi); }
@keyframes sandik-ac {
  0% { transform: scale(1); }
  45% { transform: scale(1.3) rotate(-6deg); }
  100% { transform: scale(1); }
}

/* ————————————————————————————— hızlı oyun (ana menünün ortası) */

/* Menü sayfasının tam ortası. Büyük düğme sütunu ortalanır; ücret seçimi
   düğmenin hemen sağına taşar, kural ve tur seçimi düğmenin altında. */
/* Tasarım dili: sayfanın tek dolu altın düğmesi HIZLI OYUN. Altındaki
   seçimler görev paneli ve kartlarla aynı koyu panel (--panel-line çerçeve,
   --r-md köşe); seçili olan başlıktaki düğmeler gibi altın çerçeveli.
   Hepsi aynı boyda, düğmenin eniyle hizalı tek bir satır. */
.hizli-oyun {
  position: absolute; left: 50%; top: 50%;
  z-index: 2;
  width: 520px;
  display: flex; flex-direction: column; gap: 12px;
  transform: translate(-50%, -50%);
}
.ho-ust { position: relative; }

.ho-dugme {
  position: relative; overflow: hidden;
  width: 100%; height: 104px;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  font-size: 36px; font-weight: 900; letter-spacing: 2.4px;
  color: #2a1c00;
  text-shadow: 0 1px 0 rgba(255, 240, 200, .6);
  background: linear-gradient(180deg, #ffe7a6 0%, #f0c063 38%, #d39a34 72%, #a8741f 100%);
  border: 1px solid #6f5014;
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .6),
    inset 0 -4px 0 rgba(110, 72, 8, .45),
    0 14px 40px rgba(215, 165, 63, .28),
    0 10px 24px rgba(0, 0, 0, .55);
  transition: transform .12s, filter .15s;
}
.ho-dugme svg { width: 34px; height: 34px; fill: currentColor; stroke: none; }
/* Işıltı: düğmenin üstünden ara ara geçen parlak bir şerit. */
.ho-dugme::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -40%;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-18deg);
  animation: ho-isilti 3.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ho-isilti {
  0%, 62% { left: -40%; }
  100% { left: 120%; }
}
.ho-dugme:hover { filter: brightness(1.06); transform: translateY(-2px); }
.ho-dugme:active { transform: translateY(1px); }
.ho-dugme:disabled { filter: grayscale(.35) brightness(.8); cursor: wait; transform: none; }

/* Düğmenin altındaki satır: kural, tur, ücret (düğmenin eniyle hizalı). */
.ho-alt { display: grid; grid-template-columns: 1fr 108px 138px; gap: 10px; }

/* Açılır listeler: görev kartlarıyla aynı koyu panel. */
.ma-alan.ho-secim {
  height: 54px; padding: 0 14px;
  background: linear-gradient(180deg, #191d25 0%, #12161d 100%);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  transition: border-color .15s;
}
.ma-alan.ho-secim:hover,
.ma-alan.ho-secim.is-acik { border-color: rgba(215, 165, 63, .45); }
.ho-secim > span { font-size: 9px; letter-spacing: 1px; }
.ho-secim .ma-secim-dugme { font-size: 15px; font-weight: 700; }
.ho-secim::after { right: 13px; }
.ho-ucret .ma-ucret .coin { width: 17px; height: 17px; }

/* Kural: iki parçalı anahtar, aynı koyu panelin içinde. Seçili parça
   başlıktaki düğmeler gibi altın çerçeveli, önünde onay; öteki sönük. */
.ho-kurallar {
  display: flex; gap: 4px;
  height: 54px; padding: 5px;
  background: linear-gradient(180deg, #191d25 0%, #12161d 100%);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}
.ho-kural {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: 1.3px;
  color: var(--txt-mute);
  background: none;
  border: 1px solid transparent;
  border-radius: 7px;
  transition: color .15s, background .15s, border-color .15s;
}
.ho-kural:hover:not(.is-secili) { color: var(--txt-dim); background: rgba(255, 255, 255, .04); }
.ho-kural.is-secili {
  color: var(--gold-hi);
  background: rgba(215, 165, 63, .12);
  border-color: rgba(215, 165, 63, .45);
}
.ho-kural.is-secili::before {
  content: "";
  width: 10px; height: 5px;
  border: solid currentColor; border-width: 0 0 2.5px 2.5px;
  transform: translateY(-2px) rotate(-45deg);
}