/* ===== 1win clone — interaction helpers (self-contained, no CDN) ===== */
html.colorScheme-dark, body { background: #141415; }

/* Modal state visibility (controlled by app.js) */
#winModalLayer .win-state { display: none; }
#winModalLayer .win-state.is-open { display: block; }

/* Lock background scroll while a modal is open */
html.win-modal-open, html.win-modal-open body { overflow: hidden; }

/* Keep the modal layer above the hero carousel controls, app banners, tabbar, etc. */
#winModalLayer { position: relative; z-index: 99999; }
html.win-modal-open .winhero-nav, html.win-modal-open .winhero-dots { display: none; }

/* Make any clickable inside modals show a pointer */
#winModalLayer button, #winModalLayer a, #winModalLayer [role="button"] { cursor: pointer; }

/* ---- freemoney: page content alanını ortala ----
   Orijinalde .layout-main_wrapper / .layout-main_main display:flex ile mevcut genişliği
   doldurur ve 884px içerik ortalanır. Bu layout kuralları stil birleşiminde yakalanmadığı
   için klonda block kalıp içeriğe göre daralmıştı. Burada (yalnız freemoney'de) geri ekliyoruz. */
@media (min-width: 1024px) {
  body[data-active="freemoney"] .layout-main_wrapper-cZu5Q,
  body[data-active="freemoney"] .layout-main_main-cZu5Q {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* ================= HERO BANNER CAROUSEL (banner/*.avif) ================= */
.winhero { grid-area: a; position: relative; width: 100%; aspect-ratio: 1820 / 728; border-radius: 16px; overflow: hidden; background: #0c0c0d; }
.winhero-track { display: flex; height: 100%; transition: transform .55s cubic-bezier(.4, 0, .2, 1); }
.winhero-slide { flex: 0 0 100%; height: 100%; background-size: cover; background-position: center; position: relative; }
.winhero-cap { position: absolute; left: 6%; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; max-width: 56%; }
.winhero-cap b { font-family: Coolvetica, Inter, ui-sans-serif, sans-serif; font-weight: 400; font-size: clamp(26px, 4.4vw, 58px); line-height: .95; color: #fff; text-transform: uppercase; letter-spacing: .5px; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.winhero-cap i { font-style: normal; font-size: clamp(12px, 1.5vw, 20px); color: #ededf0; max-width: 86%; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.winhero-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(0,0,0,.42); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3; transition: background .2s; }
.winhero-nav:hover { background: rgba(0,0,0,.7); }
.winhero-prev { left: 14px; } .winhero-next { right: 14px; }
.winhero-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 3; }
.winhero-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(255,255,255,.45); cursor: pointer; padding: 0; transition: all .3s; }
.winhero-dot.active { background: #fff; width: 22px; border-radius: 4px; }
/* Mobile: hero fills width with the original mobile proportions (343x165 ≈ 2.078:1),
   dots bottom-left, no arrows (swipe/auto-rotate + dots like the original). */
@media (max-width: 1023px) {
  .winhero { aspect-ratio: 343 / 165; border-radius: 12px; }
  .winhero-nav { display: none; }
  .winhero-dots { left: 16px; transform: none; bottom: 12px; }
}

/* ================= MOBILE: modal becomes near-full-width sheet ================= */
@media (max-width: 600px) {
  #winModalLayer [class*="desktop-modal_card"] { width: 94vw !important; max-width: 94vw !important; }
}

/* ================= MOBILE: left "Menü" drawer (slide-in sidebar) ================= */
#winDrawer { position: fixed; inset: 0; z-index: 100000; visibility: hidden; }
#winDrawer.is-open { visibility: visible; }
#winDrawer .win-drawer-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .3s ease; }
#winDrawer.is-open .win-drawer-backdrop { opacity: 1; }
#winDrawer .win-drawer-panel { position: absolute; top: 0; left: 0; height: 100%; width: 280px; max-width: 86vw; background: #141415; transform: translateX(-100%); transition: transform .3s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#winDrawer.is-open .win-drawer-panel { transform: translateX(0); }
/* neutralise the sidebar's mobile-collapse so it shows full inside the drawer */
#winDrawer .win-drawer-panel .sidebar_root-dDwAD { width: 280px !important; max-width: 100% !important; min-width: 0 !important; position: static !important; height: auto !important; transform: none !important; }
#winDrawer.is-open .win-drawer-panel .sidebar_root-dDwAD { visibility: visible !important; opacity: 1 !important; }
#winDrawer .win-drawer-x { position: absolute; top: 14px; right: 14px; z-index: 2; width: 36px; height: 36px; border: none; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* ================= Country (phone code) picker ================= */
#winCountryPicker { position: fixed; inset: 0; z-index: 100001; display: none; }
#winCountryPicker.is-open { display: block; }
#winCountryPicker .wcp-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
#winCountryPicker .wcp-sheet { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 380px; max-width: 94vw; max-height: 82vh; background: #fff; border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 44px rgba(0,0,0,.45); }
#winCountryPicker .wcp-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 10px; flex: 0 0 auto; }
#winCountryPicker .wcp-title { font-size: 20px; font-weight: 700; color: #14110f; }
#winCountryPicker .wcp-x { border: none; background: transparent; font-size: 18px; color: #8a8a8a; cursor: pointer; width: 32px; height: 32px; }
#winCountryPicker .wcp-searchbox { padding: 2px 16px 12px; flex: 0 0 auto; }
#winCountryPicker .wcp-searchbox input { width: 100%; box-sizing: border-box; height: 44px; border: none; border-radius: 12px; background: #f1f2f4; padding: 0 16px; font-size: 15px; color: #111; outline: none; }
#winCountryPicker .wcp-list { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 8px 12px; flex: 1 1 auto; }
#winCountryPicker .wcp-item { display: flex; align-items: center; gap: 12px; width: 100%; border: none; background: transparent; padding: 11px 12px; cursor: pointer; text-align: left; border-radius: 10px; }
#winCountryPicker .wcp-item:hover { background: #f1f2f4; }
#winCountryPicker .wcp-flag { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: 0 0 22px; }
#winCountryPicker .wcp-dial { color: #7a7a7a; font-size: 14px; min-width: 48px; }
#winCountryPicker .wcp-name { color: #14110f; font-size: 15px; }
@media (max-width: 600px) {
  #winCountryPicker .wcp-sheet { width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; border-radius: 0; top: 0; left: 0; transform: none; }
}

/* ================= Toast / notice ================= */
#winToast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(16px); z-index: 100002; background: rgba(20,20,21,.96); color: #fff; padding: 12px 20px; border-radius: 12px; font-size: 14px; max-width: 88vw; text-align: center; box-shadow: 0 6px 24px rgba(0,0,0,.45); opacity: 0; visibility: hidden; transition: opacity .25s ease, transform .25s ease; }
#winToast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* Social login buttons disabled (out of service) */
#winModalLayer [data-testid*="socialButton"] { opacity: .45; cursor: not-allowed; }

/* ================= Login verify flow (Doğrulandı / Yanlış veri) ================= */
#winModalLayer [class*="desktop-modal_card"] { position: relative; }
.win-loadbar { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(0,0,0,.06); z-index: 6; overflow: hidden; }
.win-loadbar i { display: block; height: 100%; width: 0; background: #1bb55c; transition: width 1.1s ease; }
.win-loadbar-done i { width: 100%; transition: none; }
/* GeeTest-style verification box (kullanıcının verdiği yapı). Modal başlığı üstte görünür kalır. */
.win-verify { position: absolute; top: 54px; left: 0; right: 0; bottom: 0; z-index: 7; background: #fff; overflow: hidden; }
.win-verify .geetest_bind_box { position: absolute; inset: 0; background: #fff; }
.win-verify .geetest_bind_status_bar { position: absolute; top: 0; left: 0; width: 100%; height: 6px; background: #39c522; }
.win-verify .geetest_bind_container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.win-verify .geetest_success_correct { width: 52px; height: 52px; margin: 0 auto 16px; border: 3px solid #39c522; border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: winGtPop .35s ease; }
.win-verify .geetest_success_icon { width: 13px; height: 24px; border: solid #39c522; border-width: 0 3px 3px 0; transform: rotate(45deg) translateY(-2px); }
.win-verify .geetest_bind_tips { color: #39c522; font-size: 17px; font-weight: 500; }
@keyframes winGtPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.win-errbar { position: absolute; top: 8px; left: 10px; right: 10px; z-index: 8; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: 0 8px 28px rgba(0,0,0,.20); animation: winErrIn .25s ease; }
@keyframes winErrIn { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.win-errbar > span { flex: 1; color: #14110f; font-size: 14px; }
.win-errbar-x { border: none; background: transparent; color: #9aa0a6; font-size: 14px; cursor: pointer; padding: 2px 4px; }
.win-errbar-ic { flex: 0 0 auto; }

/* ================= Logged-in header profile (balance + Para yatır + bell) ================= */
.win-profile { display: none; position: relative; align-items: center; gap: 12px; }
.win-profile.is-on { display: flex; }
@media (min-width: 1024px) { .win-profile.is-on { gap: 16px; } }
.win-profile-menu { position: absolute; top: calc(100% + 8px); right: 0; background: #1f1f21; border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.45); padding: 6px; z-index: 100; min-width: 150px; }
.win-profile-menu[hidden] { display: none; }
.win-logout { display: block; width: 100%; text-align: left; background: transparent; border: none; color: #f0f2f5; font-size: 14px; padding: 10px 12px; border-radius: 8px; cursor: pointer; font-family: inherit; }
.win-logout:hover { background: rgba(255,255,255,.08); }

/* ================= Mobile-only: phone-width frame on wide screens ================= */
@media (min-width: 560px) {
  html, body { background: #08080a; }
  .template-1_root-RiCeW { max-width: 480px; margin-left: auto; margin-right: auto; min-height: 100vh; box-shadow: 0 0 60px rgba(0,0,0,.6); }
  [class*="tabbar_root"] { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; width: 480px !important; max-width: 480px !important; }
  #winDrawer .win-drawer-panel { left: 50%; margin-left: -240px; }
}

/* ================= Casino oyun karti hover (tiklanabilir oldugu belli olsun) ================= */
a[data-game-id] { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
a[data-game-id]:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.45); }

/* ================= Oyun acilis sayfasi (play.php) ================= */
.winplay { box-sizing: border-box; padding: 20px 16px 32px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: calc(100vh - 160px); gap: 14px; }
.winplay-panel { width: 100%; max-width: 460px; margin: 24px auto; background: #1f1f21; border: 1px solid rgba(255,255,255,.06); border-radius: 16px; padding: 30px 22px; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.42); }
.winplay-badge { display: inline-block; background: #f59e0b; color: #14110f; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; padding: 6px 12px; border-radius: 999px; margin-bottom: 14px; }
.winplay-title { font-size: 22px; font-weight: 800; color: #fff; margin: 0 0 6px; line-height: 1.2; }
.winplay-prov { font-size: 12.5px; color: #8a8a8a; margin-bottom: 16px; }
.winplay-text { font-size: 14px; line-height: 1.6; color: #b8bcc2; margin: 0 0 20px; }
.winplay-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.winplay-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border-radius: 10px; font-size: 14px; font-weight: 600; border: none; cursor: pointer; text-decoration: none; transition: opacity .15s, transform .15s; font-family: inherit; }
.winplay-btn:hover { opacity: .92; transform: translateY(-1px); }
.winplay-btn-primary { background: #12B857; color: #fff; }
.winplay-btn-ghost { background: rgba(255,255,255,.08); color: #f0f2f5; }
.winplay-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px; }
.winplay-head-info { min-width: 0; }
.winplay-head-title { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.2; }
.winplay-head-prov { font-size: 11.5px; color: #8a8a8a; margin-top: 2px; }
.winplay-head-back { font-size: 13px; font-weight: 600; color: #b8bcc2; text-decoration: none; padding: 8px 12px; border-radius: 8px; background: rgba(255,255,255,.06); white-space: nowrap; }
.winplay-head-back:hover { background: rgba(255,255,255,.12); color: #fff; }
.winplay-frame { width: 100%; height: calc(100vh - 240px); min-height: 460px; border: 0; background: #000; border-radius: 12px; display: block; box-shadow: 0 8px 32px rgba(0,0,0,.4); }
@media (max-width: 600px) {
  .winplay { padding: 14px 10px 24px; gap: 10px; }
  .winplay-panel { margin: 14px auto; padding: 24px 18px; }
  .winplay-frame { height: calc(100vh - 200px); min-height: 420px; border-radius: 8px; }
}