/* ════════════════════════════════════════════════════════════════
   ITER 597 (2026-05-21) — BS-PARALEL BC-LOADER
   ════════════════════════════════════════════════════════════════
   Kullanıcı talep: BS'in click→139ms eski içerik silinir, bc-loader
   full + ortada logo pattern'ini MR'a aktarmak. Hız 1ms artmasın.

   Mekanizma:
   - pointerdown'da JS html.mr-nav-pending class set (ITER 588'den var)
   - CSS rule: mr-nav-pending altında #mainContentWrap children opacity:0
   - CSS rule: mr-nav-pending altında ::before pseudo MR logo + pulse
   - astro:after-swap → mr-nav-pending kalk → içerik fade-in, logo gider

   Süre ayarı: --mr-loader-pulse-duration CSS variable
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Loader pulse animation süresi — değiştirilebilir */
  --mr-loader-pulse-duration: 1.5s;
  /* Eski içerik gizleme transition süresi */
  --mr-content-hide-duration: 60ms;
  /* Logo boyutu */
  --mr-loader-size: 130px;
  /* Logo opacity min/max — ITER 597 başlangıç değerleri (kullanıcı talebi) */
  --mr-loader-opacity-min: 0.3;
  --mr-loader-opacity-max: 0.75;
}

/* ITER 606 (2026-05-21): TEMİZ YAKLAŞIM — body::after full-screen dark overlay.
   Cascade/visibility/display problemleri ATLA — sadece tile'ların ÜSTÜNE
   opak siyah katman koy. Header + bottom-tab z-index 100, overlay z-index 90,
   content (tile'lar) z-index auto altta. Kullanıcı sadece overlay görür.

   Hız etkisi: 0ms (CSS class toggle ile pseudo-element render). */
html.mr-nav-pending body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #0a0a0a;
  z-index: 90;
  pointer-events: none;
}

/* Header overlay üstünde kalmalı (logo + GIRIŞ + sub-nav) */
html.mr-nav-pending header.mobileHeader,
html.mr-nav-pending .mobileHeader,
html.mr-nav-pending .hdr-navigation-scrollable-bc-holder {
  z-index: 100 !important;
  position: relative !important;
}

/* Bottom-tab overlay üstünde kalmalı */
html.mr-nav-pending .tab-navigation-w-bc,
html.mr-nav-pending .mobFooter,
html.mr-nav-pending [class*='bottom-tab'],
html.mr-nav-pending [class*='bottom-nav'] {
  z-index: 100 !important;
  pointer-events: auto !important;
}

/* ITER 599 (2026-05-21): Astro View Transition snapshot sızıntısını engelle.
   Astro ClientRouter view-transition kullanır → ::view-transition-old/new pseudo
   element'leri eski+yeni HTML snapshot'larını gösterir. Bizim
   .layout-content-holder-bc visibility:hidden rule'umuz bunlara uygulanmıyor
   → yeni canlı casino sayfasının elementleri (Sağlayıcı seç, game cards)
   transition esnasında sızıyordu.

   Fix: view-transition pseudo-element'lerini de gizle. Sadece MR logo
   (body::before) + persistent elements (header, bottom-tab) görünür kalır. */
html.mr-nav-pending::view-transition-old(root),
html.mr-nav-pending::view-transition-new(root),
html.mr-nav-pending::view-transition-group(root),
html.mr-nav-pending::view-transition-image-pair(root) {
  visibility: hidden !important;
  animation: none !important;
}

/* MR brand logo loader — content alanı ortasında pulse.
   ::before pseudo-element body üzerinde (fixed pos zaten) */
html.mr-nav-pending body::before {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  width: var(--mr-loader-size);
  height: var(--mr-loader-size);
  background: url('/assets/images/mrvip-logo-v2.png') center/contain no-repeat;
  opacity: var(--mr-loader-opacity-min);
  z-index: 95; /* overlay (z:90) ÜSTÜNDE, header (z:100) altında */
  pointer-events: none;
  animation: mr-loader-pulse var(--mr-loader-pulse-duration) ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes mr-loader-pulse {
  0%,
  100% {
    opacity: var(--mr-loader-opacity-min);
    transform: translate(-50%, -50%) scale(0.94);
  }
  50% {
    opacity: var(--mr-loader-opacity-max);
    transform: translate(-50%, -50%) scale(1.02);
  }
}

/* Reduced motion — animation kapatılır, statik logo */
@media (prefers-reduced-motion: reduce) {
  html.mr-nav-pending body::before {
    animation: none !important;
    opacity: 0.5;
    transform: translate(-50%, -50%);
  }
}

/* ITER 581 (2026-05-21) — Ambient Loading Brand Language
 * Hedef: BS'in 29 aktif ambient animation pattern'ini MR'a uyarla.
 * Kullanım: sayfa transition'larında "dead zone" (700-1000ms boş ekran)
 *           olduğunda kullanıcı header'da sürekli pulse/glow görsün —
 *           "ölü hissetmesin", site canlı görünsün.
 *
 * BS extract: navUnderlineBreath (10×) + navTextGlow (10×) + qaRotate (8×)
 *             3000ms linear infinite, MR brand gold (#d4af37) ile uyumlu.
 *
 * Performance: animation-name'lerin GPU-accelerated property kullanması
 * (opacity, transform, box-shadow) — layout/paint trigger etmez.
 */

@keyframes mr-nav-breath {
  0%, 100% {
    opacity: 0.75;
    box-shadow: 0 1px 0 rgba(212, 175, 55, 0.25);
  }
  50% {
    opacity: 1;
    box-shadow: 0 1px 0 rgba(212, 175, 55, 0.85);
  }
}

@keyframes mr-nav-glow {
  0%, 100% {
    text-shadow: 0 0 4px rgba(212, 175, 55, 0.2);
  }
  50% {
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
  }
}

@keyframes mr-quick-access-rotate {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(1.5deg);
  }
}

/* mr-nav-underline: alt çizgi nefes-pulse (header nav linkleri) */
@keyframes mr-nav-underline-breath {
  0%, 100% {
    box-shadow: inset 0 -2px 0 rgba(212, 175, 55, 0.3);
  }
  50% {
    box-shadow: inset 0 -2px 0 rgba(212, 175, 55, 0.9);
  }
}

/* — APPLY ZONES — */

/* ITER 634 (2026-05-21) — AMBIENT ANIMATION APPLY ZONES İPTAL.
 *
 * Kullanıcı raporu: /slot scroll FPS 1.3 (BS ~60). Tab pair audit +
 * document.getAnimations() ölçümü:
 *   - 9× mr-nav-glow (textShadow) — PAINT every frame
 *   - 9× mr-nav-breath (boxShadow + opacity) — boxShadow PAINT every frame
 *   - 5× mr-quick-access-rotate (transform) — GPU OK ama gereksiz
 *
 * = 48+ paint-only CSS animation × 60fps = saniyede 2,880 paint operation.
 * Main thread blocked %55+. Scroll path'inde sürekli compositor wake-up.
 *
 * BS extract'i "29 ambient animation" göstermiş olabilir AMA BS'in 760
 * total DOM element'inde dağıtılmış. MR 8079 element + 9 nav link × 2
 * (a + span) = 18 selector instance + 5 quick tile. Bunlar her frame
 * paint istiyor → /slot sayfası bile boğuluyor.
 *
 * Animation @keyframes'ları file altında DURUYOR (silmedik); apply zones
 * burada inert edildi. İhtiyaç olursa is-home-page veya html.mr-nav-pending
 * scope'unda yeniden açılabilir.
 */
/*
.hdr-navigation-scrollable-bc-holder a,
.bs-deposit-tabs a,
.site-nav-tabs a,
.header-nav-link,
.main-nav a,
.nav-link-bc,
header nav a,
.mobileHeader nav a {
  animation: mr-nav-breath 3s linear infinite;
}

.hdr-navigation-scrollable-bc-holder a span,
.bs-deposit-tabs a span,
.site-nav-tabs a span,
.header-nav-link span,
.main-nav a span,
.nav-link-bc span,
header nav a span,
.mobileHeader nav a span,
.nav-menu-title {
  animation: mr-nav-glow 3s linear infinite;
}

.sp-button-bc,
.quick-access-tile,
.quick-link-tile,
.qa-tile,
[class*='quick-link'] [class*='tile'] {
  animation: mr-quick-access-rotate 3s linear infinite;
  transform-origin: center center;
  will-change: transform;
}
*/

/* Reduced motion accessibility — animation kapatılır */
@media (prefers-reduced-motion: reduce) {
  .hdr-navigation-scrollable-bc-holder a,
  .bs-deposit-tabs a,
  .site-nav-tabs a,
  .header-nav-link,
  .main-nav a,
  .nav-link-bc,
  header nav a,
  .mobileHeader nav a,
  .hdr-navigation-scrollable-bc-holder a span,
  .bs-deposit-tabs a span,
  .site-nav-tabs a span,
  .header-nav-link span,
  .main-nav a span,
  .nav-link-bc span,
  header nav a span,
  .mobileHeader nav a span,
  .nav-menu-title,
  .sp-button-bc,
  .quick-access-tile,
  .quick-link-tile,
  .qa-tile,
  [class*='quick-link'] [class*='tile'] {
    animation: none !important;
    will-change: auto !important;
  }
}

/* — SKELETON SHIMMER — BS birebir extract (an-skeleton-loader)
   BS production CSS: @keyframes an-skeleton-loader {
     0%   { background-position: 200% center; }
     50%  { background-position: 100% center; }
     100% { background-position: 0px center; }
   }
   Duration: 1000ms linear infinite. Bizim önceki 1500ms ease-in-out → düzelt. */
@keyframes mr-skel-shimmer {
  0% {
    background-position: 200% center;
  }
  50% {
    background-position: 100% center;
  }
  100% {
    background-position: 0px center;
  }
}

/* — POPUP / MODAL OPEN — BS birebir (popupSlideIn) */
@keyframes mr-popup-slide-in {
  0% {
    opacity: 0;
    scale: 0.95;
    translate: 0px 20px;
  }
  100% {
    opacity: 1;
    scale: 1;
    translate: 0px;
  }
}

/* — MODAL BACKDROP — BS birebir (casino-game-layer) */
@keyframes mr-modal-backdrop {
  0% {
    opacity: 0;
    pointer-events: none;
  }
  100% {
    opacity: 1;
    pointer-events: auto;
    backdrop-filter: blur(2px);
    background: rgba(0, 0, 0, 0.5);
  }
}

/* — FAVORITE ICON WIGGLE — BS birebir (favorite-loading-animation) */
@keyframes mr-favorite-wiggle {
  0% {
    rotate: -10deg;
  }
  50% {
    rotate: 10deg;
  }
  100% {
    rotate: 0deg;
  }
}

/* — COUNT POP — BS birebir (count-blink-odd) */
@keyframes mr-count-pop {
  0% {
    scale: 0;
  }
  100% {
    scale: 1;
  }
}

/* — CSS VARIABLE ROTATION — BS qaRotate modern pattern
   BS: @keyframes qaRotate { 100% { --qa-angle: 360deg; } }
   Sonra başka selectorda transform: rotate(var(--qa-angle, 0deg))
   Bu register edilmemiş CSS variable olduğu için animasyon = discrete jump
   olabilir. Bizde direct transform yaklaşımı tercih: */
@keyframes mr-qa-angle-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* — LOADER RULET — BS birebir (loader-rulet, 5× rotation) */
@keyframes mr-loader-rulet {
  0% {
    transform: rotate(0deg);
  }
  80%,
  100% {
    transform: rotate(1800deg);
  }
}

.route-skeleton {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  background: var(--bg-color, #0a0a0a);
}

.route-skeleton--slot,
.route-skeleton--casino {
  /* Slot/casino grid — 2 column mobile */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.route-skeleton--livecasino {
  /* Livecasino grid — 1 column wider cards */
  grid-template-columns: 1fr;
}

.skel-card {
  aspect-ratio: 4 / 3;
  background: linear-gradient(
    110deg,
    rgba(20, 20, 25, 1) 25%,
    rgba(40, 40, 50, 1) 50%,
    rgba(20, 20, 25, 1) 75%
  );
  background-size: 200% 100%;
  /* BS birebir: 1000ms linear infinite (önceki 1500ms ease-in-out yanlıştı) */
  animation: mr-skel-shimmer 1s linear infinite;
  border-radius: 8px;
  /* Soft golden border accent — brand */
  border: 1px solid rgba(212, 175, 55, 0.05);
}

/* — MODAL POPUP UTILITY — BS-paralel
   Kullanım: <div class="mr-popup-anim">...</div>
   Trigger: open() → element.classList.add('is-opening') ile aktif */
.mr-popup-anim {
  animation: mr-popup-slide-in 220ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.mr-backdrop-anim {
  animation: mr-modal-backdrop 200ms ease-out both;
}

/* — FAVORITE ICON FEEDBACK — kullanıcı favorite tıkladığında wiggle */
.mr-favorite-active {
  animation: mr-favorite-wiggle 400ms ease-in-out both;
  transform-origin: center center;
}

/* — COUNT POP (sayaç/badge animasyon) */
.mr-count-pop {
  animation: mr-count-pop 240ms linear both;
  transform-origin: center center;
}

/* — LOADER RULET (5× rotation gauge loader) */
.mr-loader-rulet {
  animation: mr-loader-rulet 1500ms ease-out infinite;
  display: inline-block;
}

/* — AUTH MODAL OVERRIDE — BS-paralel popup geçişi
   Önceki mrPopupSlideIn 0.3s ease-out transform-based vardı.
   Bu rule BS'in modern scale+translate keyframe'iyle override eder.
   Easing: cubic-bezier(0.34, 1.56, 0.64, 1) — hafif overshoot (back-out) BS hissi.
   Duration 220ms — BS-exact agresif. */
body.mobile-site #login2.modal.show .modal-content,
body.mobile-site #registerModal.modal.show .register-modal-content {
  animation: mr-popup-slide-in 220ms cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}

body.mobile-site .modal-backdrop.show {
  animation: mr-modal-backdrop 200ms ease-out both !important;
}

/* — GAME MODAL / DRAWER PORT BS-paralel
   modal-bs-port.css ve drawer-root için */
.iter164-game-modal.show .modal-content,
.bs-drawer.is-open,
.game-modal[aria-hidden='false'] {
  animation: mr-popup-slide-in 220ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* — FAVORITE STAR ICON CLICK FEEDBACK BS-paralel
   slot card favorite tıklayınca wiggle */
.bs-favorite-on.is-just-toggled,
.favorite-icon.mr-flash,
[class*='favorite']:active {
  animation: mr-favorite-wiggle 400ms ease-in-out both;
  transform-origin: center center;
}

/* — REDUCED MOTION KORUMA */
@media (prefers-reduced-motion: reduce) {
  body.mobile-site #login2.modal.show .modal-content,
  body.mobile-site #registerModal.modal.show .register-modal-content,
  body.mobile-site .modal-backdrop.show,
  .iter164-game-modal.show .modal-content,
  .bs-drawer.is-open,
  .game-modal[aria-hidden='false'],
  .bs-favorite-on.is-just-toggled,
  .favorite-icon.mr-flash {
    animation: none !important;
  }
}

.skel-card--banner {
  aspect-ratio: 16 / 6;
  margin-bottom: 8px;
}

.skel-card--row {
  aspect-ratio: 6 / 1;
  width: 100%;
}

/* Skeleton fade-out when real content arrives */
.route-skeleton.is-replaced {
  opacity: 0;
  transition: opacity 240ms ease-out;
  pointer-events: none;
}

/* ITER 588b: .is-instant skeleton overlay KALDIRILDI.
   Sebep: pointerdown anında anasayfa içeriğini kapatıyordu (kullanıcı geri bildirimi).
   Skeleton artık sadece astro:before-preparation event'inde (gerçek navigation
   başlarken) inject olur, anasayfanın mevcut içeriğine dokunmaz. */

/* ════════════════════════════════════════════════════════════════
   ITER 589 — ANASAYFA SKELETON SUPPRESS
   ════════════════════════════════════════════════════════════════
   Kullanıcı geri bildirimi: "anasayfada saçma sapan alakasız yerlerde
   skeleton kartlar çıkıyor". Çözüm: ANASAYFADA (is-home-page) tüm
   full-card skeleton'ları gizle. SLOT/CASINO sayfalarında AYNEN korunur.

   Korunanlar (DOKUNULMAZ):
   - game-item img:not([data-loaded]) → image shimmer (slot sayfası için)
   - route-skeleton (transition için, JS-injected)
   - bs-skel-wrap (slot sayfası SSR skeleton)
   - .casinoGameItemContent.skeleton-loader-ga (slot game grid skeleton)

   Gizlenenler (sadece is-home-page'de):
   - Tüm tam-kart skeleton SSR placeholder'ları
   ════════════════════════════════════════════════════════════════ */

body.is-home-page .bs-skel-wrap,
body.is-home-page .bs-skel-wrap--card,
body.is-home-page .bs-skel-wrap--slot,
body.is-home-page .bs-skel-wrap--provider,
body.is-home-page .bs-skel-chip-row,
body.is-home-page .casinoGameItemContent.skeleton-loader-ga,
body.is-home-page .game-item--skeleton,
body.is-home-page .game-skeleton__shimmer,
body.is-home-page .slot-skeleton-item,
body.is-home-page .skeleton-game-card,
body.is-home-page [class*='skeleton-game-card'],
body.is-home-page .bs-skel,
html.mobile-root body.mobile-site.is-home-page .bs-skel-wrap,
html.mobile-root body.mobile-site.is-home-page .casinoGameItemContent.skeleton-loader-ga {
  display: none !important;
}

/* Slot/casino game image shimmer (data-loaded olmayan) ANASAYFADA DA çalışmasın
   — slot sayfasında olduğunda OK, anasayfada gereksiz */
body.is-home-page .game-item img:not([data-loaded]) {
  animation: none !important;
  background-image: none !important;
  background-color: transparent !important;
}

/* ═══════════════════════════════════════════
   ITER 588 — TOP PROGRESS BAR
   YouTube-style nav progress indicator,
   click anında belirir → kullanıcı "yükleniyor"
   sinyalini ANINDA görür.
   ═══════════════════════════════════════════ */

#mr-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 100ms ease-out;
  overflow: hidden;
}

#mr-progress-bar.is-active {
  opacity: 1;
}

#mr-progress-bar.is-active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212, 175, 55, 0.4) 30%,
    rgba(212, 175, 55, 1) 50%,
    rgba(212, 175, 55, 0.4) 70%,
    transparent 100%
  );
  animation: mr-progress-slide 1.2s linear infinite;
}

@keyframes mr-progress-slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  #mr-progress-bar.is-active::after {
    animation: none;
    background: rgba(212, 175, 55, 0.7);
  }
  .route-skeleton.is-instant {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skel-card {
    animation: none !important;
    background: rgba(30, 30, 35, 1);
  }
}