/* ===== Mağaza — `purchaseItem` yüzeyi (2026-08-21, F4) =====
   Görsel dil `cark.css`/`gunluk.css` ile aynı ailedendir (overlay + kart + kit çerçevesi).
   Ortak kabuk KOPYALANMAZ; yalnız mağazaya özgü olanlar burada. */

.mg-overlay {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(38, 22, 10, 0.55);
  opacity: 0; transition: opacity .2s ease;
  overflow-y: auto;
}
.mg-overlay.mg-acik { opacity: 1; }
/* `hidden` gizlemesi TEK YASA'dan gelir: style.css `[hidden]{display:none !important}` — buraya KOPYA yazma. */

.mg-kart {
  position: relative;
  width: 100%; max-width: 440px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 22px 20px 18px;
  border-radius: 24px;
  background: var(--bg-card, #fdf6e6);
  border: 3px solid var(--frame-wood, #c08652);
  box-shadow: 0 14px 40px rgba(38, 22, 10, 0.35);
  transform: translateY(10px); transition: transform .2s ease;
}
.mg-acik .mg-kart { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .mg-overlay, .mg-kart { transition: none; }
}

.mg-kart h3 {
  margin: 0 0 10px; text-align: center;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.45rem;
  color: var(--ink, #3a2415);
}
.mg-kart h4 {
  margin: 16px 0 8px;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1rem;
  color: var(--ink, #3a2415); opacity: .8;
}

.mg-kapat {
  position: absolute; top: 8px; right: 10px;
  width: 34px; height: 34px; line-height: 1;
  border: none; border-radius: 50%; cursor: pointer;
  background: rgba(58, 36, 21, 0.08); color: var(--ink, #3a2415);
  font-size: 1.5rem; font-family: 'Fredoka', sans-serif;
}
.mg-kapat:hover { background: rgba(58, 36, 21, 0.16); }

.mg-bakiye { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.mg-bk {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(58, 36, 21, 0.07);
  font-family: 'Fredoka', sans-serif; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.mg-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.mg-urun {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 14px 10px 12px;
  border: none; border-radius: 18px; cursor: pointer;
  background: #fff;
  box-shadow: var(--shadow-soft, 0 3px 9px rgba(58,36,21,0.14));
  font-family: 'Fredoka', sans-serif; color: var(--ink, #3a2415);
  transition: transform .13s ease, box-shadow .13s ease;
}
.mg-urun:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 9px 20px rgba(58,36,21,0.2); }
.mg-urun:active:not(:disabled) { transform: translateY(0); }
/* Alınamayan ürün GİZLENMEZ, SÖNER — oyuncu neyin var olduğunu görmeli, sebebini de (`.mg-not`). */
.mg-urun.mg-kapali { opacity: .5; cursor: not-allowed; }

.mg-urun-ikon { object-fit: contain; }
.mg-urun-ad { font-weight: 600; font-size: .92rem; text-align: center; }
.mg-fiyat {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.mg-fiyat s { opacity: .55; font-weight: 400; }
.mg-not { font-size: .72rem; opacity: .7; text-align: center; }

/* Günlük Fırsat — renk TEK sinyal değil: rozet metni de var (renk körlüğü) */
.mg-firsat { box-shadow: inset 0 0 0 3px #e0a03a, var(--shadow-soft, 0 3px 9px rgba(58,36,21,0.14)); }
.mg-firsat-rozet {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  padding: 2px 10px; border-radius: 999px; white-space: nowrap;
  background: #e0a03a; color: #3a2415;
  font-size: .66rem; font-weight: 700;
}

.mg-durum { min-height: 1.4em; margin: 14px 0 0; text-align: center; font-weight: 600; }
.mg-durum-ok { color: #2f7d26; }
.mg-durum-hata { color: #c0562d; }

@media (max-width: 380px) {
  .mg-liste { grid-template-columns: 1fr; }
  .mg-urun { flex-direction: row; justify-content: space-between; padding: 12px 14px; }
  .mg-urun-ad { text-align: left; flex: 1; }
  .mg-firsat-rozet { left: 14px; transform: none; }
}

/* Bonus kategorileri — `claimBonusLevel` yüzeyi.
   ⚠️ 35 kartlık tam ızgara BİLİNÇLİ olarak yok: yalnız ilerlemesi olan kategoriler listelenir. */
.mg-bonus-liste { display: flex; flex-direction: column; gap: 8px; }
.mg-bonus {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px;
  padding: 10px 12px; border-radius: 14px; background: #fff;
  box-shadow: var(--shadow-soft, 0 3px 8px rgba(58,36,21,0.12));
  font-family: 'Fredoka', sans-serif;
}
.mg-bonus-ad { font-weight: 600; font-size: .92rem; }
.mg-bonus-sayi { font-weight: 700; font-variant-numeric: tabular-nums; font-size: .86rem; opacity: .75; }
.mg-bonus-bar {
  grid-column: 1 / -1; height: 7px; border-radius: 999px;
  background: rgba(58,36,21,0.14); overflow: hidden;
}
.mg-bonus-bar > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #f0a835, #e0752d);
}
/* Hazır: renk TEK sinyal değil — buton da belirir */
.mg-bonus-hazir { box-shadow: inset 0 0 0 3px #4c9c3f, var(--shadow-soft, 0 3px 8px rgba(58,36,21,0.12)); }
.mg-bonus-hazir .mg-bonus-bar > i { background: linear-gradient(90deg, #6fbf5f, #4c9c3f); }
.mg-bonus-btn { grid-column: 1 / -1; justify-self: stretch; padding: 8px 14px; font-size: .9rem; }

/* Bonus dükkânı (bonusPuan ile alınan kademeler) */
.mg-tier-bakiye {
  margin-bottom: 8px; font-family: 'Fredoka', sans-serif; font-weight: 600;
  font-size: .9rem; opacity: .8;
}