/* ===== prototype behavior styles (custom — orijinal Vue JS offline çalışmıyor) ===== */

/* Hero slider: DİKEY kayan (orijinal MeritKing davranışı) — slide'lar üst üste dizili,
   translateY ile geçiş. useHomeBehaviors cur index'e göre translateY(-cur*100%) uygular;
   yukarı/aşağı sürükleme (drag) ve fare tekerleği (wheel) ile de değişir. Her slide tam
   slider yüksekliğinde olsun ki translateY hizası şaşmasın. */
.app-slider__slideshow{cursor:grab;user-select:none}
.app-slider__slideshow:active{cursor:grabbing}
.app-slider__slideshow .app-slide{height:100%;width:100%}
.app-slider__slideshow .app-slide img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}

/* Pagination aktif nokta */
.app-slider__pagination > *{cursor:pointer;transition:opacity .2s, transform .2s}
.app-slider__pagination > *.proto-active{opacity:1;transform:scale(1.25)}

/* Slider ok butonları gösterilmez */
.proto-nav{display:none!important}

/* COVERFLOW kart hover (canlı sitedeki gibi): coverflow base'i app.css'te li:not(.fill)'de (rotateY -30deg).
   Hover'da li DÜZLEŞİR (rotateY 0) + büyür (scale) + öne gelir (z-index) → "aradan sıyrılıp öne çıkma".
   Ayrıca numara (data-pos) rozeti (::before ribbon) hover'da gizlenir. */
.winners-carousel__content li:not(.fill), .top10-carousel__content li:not(.fill){transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.winners-carousel__content li:not(.fill):hover, .top10-carousel__content li:not(.fill):hover{transform:perspective(100rem) rotateY(0deg) scale(1.28)!important; z-index:10}
.winners-carousel__content li:not(.fill):before, .top10-carousel__content li:not(.fill):before{transition:opacity .2s ease}
.winners-carousel__content li:not(.fill):hover:before, .top10-carousel__content li:not(.fill):hover:before{opacity:0!important}

/* slot-promo-game altın çerçeve hover'ı app.css'te (data-v korunduğu için zaten çalışır) — sadece geçiş yumuşatma */
.slot-promo-game__root{transition:border-color .2s ease}

/* Header şeritlerinin (slogan / dropdown / warning) scroll'da gizlenmesi useHomeBehaviors
   ile *-visible sınıfları toggle edilerek yapılır; app.css translate(-150%) ile yukarı kaydırır.
   ANCAK app.css'te bu şeritler z-index:-1 ile header BG'sinin ÜSTÜNE boyanıyor → yukarı
   kayınca header'ın nav boşluklarından ilk öğenin ucu SIZIYOR (tam kaybolmuyor). Düzeltme:
   görünür değilken opacity/visibility ile tamamen kaldır; kayma animasyonu korunur. */
.app-header__slogan[data-v-5efcb5dd]:not(.slogan-visible),
.app-header__dropdown[data-v-5efcb5dd]:not(.dropdown--visible),
.app-header__warning[data-v-5efcb5dd]:not(.warning--visible) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .2s ease, opacity .2s ease, visibility 0s linear .2s;
}

/* ===== HEADER RESPONSIVE FIX =====
   Meritking yatay nav (.app-header__links) ≥~1220px için tasarlanmış; app.css onu 1024px'te
   açıp 383px sabit grid kolonuna sıkıştırıyor → 601px içerik TAŞIYOR.
   Çözüm: grid/logo'ya DOKUNMA. Yalnızca taşan nav <li> öğelerini gizle; SADECE hamburger'ın
   olduğu li kalsın → ☰'den sol drawer'a tüm nav. Logo yerinde, header temiz, taşma yok. */
/* Yatay nav yalnızca gerçekten sığdığı genişlikte (≥1340px) açılır; altında ☰ hamburger →
   sol drawer. app.css nav'ı 1024px'te açıp 1420px wrapper'ın 1fr (~474–576px) kolonlarına
   sıkıştırıyordu; sol (601px) + sağ (634px) nav TAŞIYORDU. Font küçültmeyle bile kolonlar
   ancak ~1340px'ten sonra yetiyor. Breakpoint'i oraya çekiyoruz (grid/logo/markup'a dokunma). */
@media (max-width: 1339px) {
  .app-header__links ul > li:not(:has(.hamburger)) { display: none !important; }
  /* Nav hamburger'a düşünce header-altı şeritleri de (slogan / oyun kısayolları / uyarı)
     gizle: bu dar aralıkta şeritler grid kolonlarına sığmayıp kırpılıyordu. Kompakt header. */
  #main-header .app-header__slogan,
  #main-header .app-header__dropdown,
  #main-header .app-header__warning { display: none !important; }
}

/* ≥1340px: nav açık — font/gap/ikon'u hafifçe küçültüp taşmayı önle (görünüm neredeyse aynı). */
@media (min-width: 1340px) {
  #main-header .app-header__links ul a,
  #main-header .app-header__links ul .hamburger { font-size: .72rem; padding: 0 .1rem; }
  #main-header .app-header__links.left ul { gap: .15rem; }
  #main-header .app-header__links.right ul { gap: .2rem; }
  #main-header .app-header__links.right ul a i { font-size: 1rem; }
}

/* Header altı oyun kısayolu şeridi (dropdown--left): ul (~628px) şeridin renkli kabından
   (~560px) genişti → ilk öğe "MK RED BARON" pilin SOLUNA taşıp kırpılıyordu (overflow:visible).
   Item padding'ini kısıp ul'yi kaba sığdır (grid/pozisyon/markup'a dokunma). */
#main-header .app-header__dropdown.dropdown--left ul a { padding: 0 .3rem; }

/* Promosyon kartı yükleme göstergesi: görsel yüklenene kadar logo-loader placeholder'ı
   görselin ÜZERİNDE pulse animasyonuyla döner (default görsel flaşı yerine loading). */
@keyframes promoLoaderPulse {
  0%, 100% { opacity: .45; transform: scale(.94); }
  50%      { opacity: 1;   transform: scale(1); }
}
.promotion-container__content .placeholder img.promo-loading {
  animation: promoLoaderPulse 1.1s ease-in-out infinite;
}



/* Sağ kenar iletişim sekmeleri (contact-widget): orijinalde dışarı kayma JS'in eklediği
   contact-widget--expanded sınıfıyla olur; hover'da aynı kaymayı CSS'ten veririz
   (app.css'te hover yalnızca opacity değiştiriyordu — sekme kapalı kalıyordu). */
.contact-widget__item[data-v-21243fe6]:hover {
  opacity: 1;
  transform: translateX(0);
}