/* ================================================================
   MOBİL DÜZELTMELER — header + profil sayfası
   Tema CSS'lerinden (theme.css / theme.purple.css / theme.red.css) SONRA yüklenir
   (includes/header.php). Tema dosyaları yeniden üretilse de bu dosya etkilenmez.
   ================================================================ */

/* ── HEADER ───────────────────────────────────────────────────── */

/* Logo hiçbir zaman sağdaki alanın altına taşmasın: kalan genişliğe sığacak şekilde küçülür */
.top-bar-left { min-width: 0; overflow: hidden; }
.top-bar-mobile-logo { min-width: 0; flex: 0 1 auto; overflow: hidden; }
.top-bar-mobile-logo .sb-logo-img {
    max-width: 100%;
    width: auto;
    object-fit: contain;
    object-position: left center;
}
.top-bar-mobile-logo .sb-brand-text {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Dropdown'daki Affiliate / Beni Ara satırları: yalnızca header'daki butonlar sığmayıp
   gizlendiğinde (.hdr-compact — js: includes/header.php) görünür.
   (tema .dropdown-item'ı display:flex !important yaptığı için !important şart) */
.user-dropdown-menu .dd-mobile-only { display: none !important; }
.user-dropdown-menu button.dd-mobile-only {
    width: 100%; background: none; border: 0; border-left: 3px solid transparent;
    font-family: inherit; text-align: left; cursor: pointer; margin: 0;
}
.top-header-bar.hdr-compact .top-bar-right .header-img-btns { display: none !important; }
.top-header-bar.hdr-compact .user-dropdown-menu .dd-mobile-only { display: flex !important; }

/* ── PROFİL SAYFASI (mobil) ───────────────────────────────────── */
@media (max-width: 768px) {

    /* Hero: avatar + (Hesabım / kullanıcı adı) üstte, chip'ler ve bakiye tam genişlikte altta */
    html body[data-page="profile.php"] .prf-hero {
        padding: calc(var(--top-bar-h, 54px) + 22px) 16px 0;
    }
    html body[data-page="profile.php"] .prf-hero-inner {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto auto auto auto;
        column-gap: 14px;
        row-gap: 0;
        align-items: center;
        padding-bottom: 20px;
    }
    html body[data-page="profile.php"] .prf-avatar-wrap {
        grid-column: 1; grid-row: 1 / span 2; align-self: center;
    }
    html body[data-page="profile.php"] .prf-avatar {
        width: 64px; height: 64px; font-size: 21px; border-radius: 16px;
    }
    html body[data-page="profile.php"] .prf-avatar-status {
        width: 16px; height: 16px; bottom: -3px; right: -3px; border-width: 3px;
    }
    /* Bilgi kolonunu grid'e aç → eyebrow/isim/chip'ler ayrı yerleşebilsin */
    html body[data-page="profile.php"] .prf-hero-info { display: contents; }
    html body[data-page="profile.php"] .prf-hero-eyebrow {
        grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 6px;
    }
    html body[data-page="profile.php"] .prf-hero-name {
        grid-column: 2; grid-row: 2; align-self: start; margin: 0;
        font-size: 22px; line-height: 1.15;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    html body[data-page="profile.php"] .prf-hero-meta {
        grid-column: 1 / -1; grid-row: 3;
        margin-top: 16px; gap: 8px;
    }
    html body[data-page="profile.php"] .prf-hero-chip,
    html body[data-page="profile.php"] .prf-kyc-chip {
        padding: 5px 11px; font-size: 11.5px; line-height: 1.2;
        max-width: 100%; min-width: 0;
    }
    html body[data-page="profile.php"] .prf-hero-chip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    html body[data-page="profile.php"] .prf-kyc-chip { white-space: nowrap; }
    html body[data-page="profile.php"] .prf-hero-chip i,
    html body[data-page="profile.php"] .prf-kyc-chip i { font-size: 10px; flex: none; }
    /* Sıra: doğrulama durumu · tarih · e-posta (uzun e-posta en sona, gerekirse alt satıra) */
    html body[data-page="profile.php"] .prf-kyc-chip { order: -2; }
    html body[data-page="profile.php"] .prf-hero-chip:first-of-type { order: -1; }

    /* Bakiye kartı: tek satır — solda etiket, sağda tutar */
    html body[data-page="profile.php"] .prf-balance-card {
        grid-column: 1 / -1; grid-row: 4;
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        width: 100%; min-width: 0;
        margin-top: 16px; padding: 14px 18px;
        border-radius: 14px;
    }
    html body[data-page="profile.php"] .prf-balance-lbl { margin: 0; }
    html body[data-page="profile.php"] .prf-balance-val { font-size: 24px; white-space: nowrap; }

    /* Sekmeler: eşit genişlik, ikon üstte / etiket altta (etiket gizlenmez) */
    html body[data-page="profile.php"] .prf-tabs {
        padding: 0; justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
    }
    html body[data-page="profile.php"] .prf-tab {
        flex: 1 0 auto; min-width: 0;
        flex-direction: column; justify-content: center; gap: 5px;
        padding: 11px 10px 10px;
        font-size: 10.5px; line-height: 1.2; letter-spacing: 0;
    }
    html body[data-page="profile.php"] .prf-tab i { font-size: 15px; }
    html body[data-page="profile.php"] .prf-tab span { display: block; }
    html body[data-page="profile.php"] .prf-tab-badge {
        position: absolute; top: 9px; left: calc(50% + 9px);
    }

    /* İçerik + kartlar */
    html body[data-page="profile.php"] .prf-content { padding: 16px 14px 56px; }
    html body[data-page="profile.php"] .prf-grid-2,
    html body[data-page="profile.php"] .prf-grid-3 { gap: 12px; }
    html body[data-page="profile.php"] .prf-card { border-radius: 14px; }
    html body[data-page="profile.php"] .prf-card-head { padding: 16px 16px 0; margin-bottom: 14px; }
    html body[data-page="profile.php"] .prf-card-head h3 { font-size: 14px; }
    html body[data-page="profile.php"] .prf-card-body { padding: 0 16px 16px; }
    html body[data-page="profile.php"] .prf-info-row { flex-wrap: wrap; row-gap: 4px; }
    html body[data-page="profile.php"] .prf-info-val { overflow-wrap: anywhere; text-align: right; }
}

@media (max-width: 420px) {
    html body[data-page="profile.php"] .prf-hero-name { font-size: 20px; }
    html body[data-page="profile.php"] .prf-tab span { display: block; }
    html body[data-page="profile.php"] .prf-tab { padding: 11px 8px 10px; }
}

/* ── GLOBAL MOBİL & TABLET UX GÜVENCESİ (Tema yenilense bile korunur) ── */
.mobile-bottom-nav .mobile-nav-item.live-support-btn,
body[data-page="iletisim.php"] .mobile-bottom-nav .mobile-nav-item.live-support-btn {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    color: rgba(255, 255, 255, 0.5) !important;
}
.prp-command,
.sp-command,
.lcp-command,
.prf-tabs-bar {
    top: var(--sticky-offset-top, var(--top-bar-h, 62px)) !important;
    z-index: 200 !important;
}
html body .nft-footer,
html body .footer {
    position: relative;
    z-index: 1;
}
.wd-confirm-value {
    word-break: break-all;
    max-width: 65%;
    text-align: right;
}
.dp-copy-btn {
    min-width: 38px !important;
    min-height: 38px !important;
}
.lb-grid > * {
    min-width: 0;
}
.lb-date-filter {
    flex-wrap: wrap;
}
@media (max-width: 1024px) {
    html body .mobile-bottom-nav {
        display: flex !important;
        height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }
    html body .main-content,
    html body .footer,
    html body .nft-footer {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }
    html body .wd-toast-wrap {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }
}
@media (max-width: 900px) {
    html body .pm-minmax-row,
    html body .wd-item-minmax {
        display: flex !important;
        font-size: 10.5px !important;
    }
}
@media (max-width: 768px) {
    html body .balance-badge {
        display: inline-flex !important;
        padding: 3px 4px 3px 8px !important;
        font-size: 11.5px !important;
        height: 32px !important;
        gap: 4px !important;
    }
    html body .balance-badge span {
        max-width: 78px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
.game-frame-wrapper.is-ios-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    width: 100vw !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    background: #000 !important;
}

/* =========================================================
   ROUND 2: ALL-PAGE MOBILE AUDIT FIXES
   - Horizontal overflow protection (preserving position:sticky)
   - iOS Safari input auto-zoom prevention (font-size >= 16px)
   - Bottom-nav clearance across all standalone pages
   - Champagne-Gold palette enforcement (no stray #3b82f6)
   ========================================================= */
html, body {
    max-width: 100vw;
    overflow-x: clip;
}

.wheel-layout > *,
.trn-hero-inner > *,
.vip-grid > *,
.msg-layout > *,
.prf-grid > *,
.tx-page > *,
.ab-page > * {
    min-width: 0;
}

/* Cark.php guest button & notes -> Champagne Gold */
html body .wheel-hub-btn.is-guest {
    background: radial-gradient(circle at 30% 25%, #f6e2b6 0%, #c9a97d 52%, #8f6c40 100%) !important;
    color: #14100a !important;
    border-color: rgba(255, 243, 214, 0.55) !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5), 0 0 24px rgba(201, 169, 125, 0.45), inset 0 2px 4px rgba(255, 255, 255, 0.35) !important;
}
html body .rights-countdown b {
    color: #d9bc8e !important;
}
html body .responsible-note {
    border-color: rgba(201, 169, 125, 0.28) !important;
    background: rgba(201, 169, 125, 0.08) !important;
    color: #e2cfa9 !important;
}
html body .responsible-note b {
    color: #f3e3c3 !important;
}

/* Bet-history & Transactions table mobile scroll */
.table-wrapper,
.tx-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 1024px) {
    html body .ab-page,
    html body .tx-page,
    html body .msg-page,
    html body .prf-page,
    html body .vip-page,
    html body .trn-page,
    html body .wheel-page,
    html body .mapp-page,
    html body .sp-page,
    html body .lcp-page {
        padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (max-width: 768px) {
    /* Prevent iOS Safari auto-zoom on input focus */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="search"],
    input[type="url"],
    select,
    textarea,
    .sp-search-input,
    .lcp-search-input,
    .msg-search-input,
    .dp-input,
    .wd-input,
    .prf-input,
    .promo-row input {
        font-size: 16px !important;
    }

    /* Mobil-uygulama & Turnuva & VIP responsive safeguards */
    .mapp-hero-actions,
    .trn-hero-stats,
    .ab-head,
    .ab-card-foot {
        flex-wrap: wrap !important;
    }

    /* Footer Lisans Metni ve Anjouan Mührü mobil görünürlük güvencesi */
    html body .nft-license-section {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    html body .nft-license-text {
        display: block !important;
        visibility: visible !important;
        color: rgba(255, 255, 255, 0.38) !important;
    }
    html body .nft-bottom-badges {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 16px !important;
        visibility: visible !important;
    }
    html body .nft-anj-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    html body .nft-badge-anj {
        display: block !important;
        height: 48px !important;
        width: auto !important;
        min-width: 38px !important;
        visibility: visible !important;
        opacity: 1 !important;
        filter: none !important;
        -webkit-filter: none !important;
    }

    /* Slotlar & Canlı Casino: mobilde sabit arama/sağlayıcı barı (.sp-command / .lcp-command) ile
       slider (.mobile-slider-section) arasındaki boş .sp-hero--compact / .lcp-hero--compact ve
       spacer (min-height:108px > gerçek 99px yükseklik) kaynaklı üst boşluğu kaldır */
    html body .sp-page,
    html body .lcp-page,
    html body[data-page="slots.php"] .sp-page,
    html body[data-page="live-casino.php"] .lcp-page {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    html body .sp-command-spacer,
    html body .lcp-command-spacer,
    html body[data-page="slots.php"] .sp-command-spacer,
    html body[data-page="live-casino.php"] .lcp-command-spacer {
        min-height: 0 !important;
    }
    html body .sp-hero--compact,
    html body .sp-hero--compact + .sp-hero-rule,
    html body .lcp-hero--compact,
    html body .lcp-hero--compact + .lcp-hero-rule,
    html body[data-page="slots.php"] .sp-hero--compact,
    html body[data-page="slots.php"] .sp-hero--compact + .sp-hero-rule,
    html body[data-page="live-casino.php"] .lcp-hero--compact,
    html body[data-page="live-casino.php"] .lcp-hero--compact + .lcp-hero-rule {
        display: none !important;
    }
    html body .sp-page .mobile-slider-section,
    html body .sp-page .modern-slider-wrapper,
    html body .sp-page .modern-slider,
    html body .lcp-page .mobile-slider-section,
    html body .lcp-page .modern-slider-wrapper,
    html body .lcp-page .modern-slider {
        margin-top: 0 !important;
    }

    /* Mobil sayfa geçişi ve kaydırma akıcılığı: sabit barları ayrık GPU katmanına al,
       ekranın çok altındaki ağır bölümleri (canlı bahis tablosu + footer) ilk karede
       ana iş parçacığını kilitlemeden content-visibility ile tembel yerleştir */
    .top-header-bar,
    .mobile-bottom-nav,
    .header-nav-bar,
    .promo-ticker-bar {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transform: translateZ(0);
    }
    footer.site-footer,
    .nft-footer,
    .hp-bets-section {
        content-visibility: auto;
        contain-intrinsic-size: auto 400px;
    }
    .sp-card,
    .lcp-card,
    .hp-bets-card {
        contain: layout style;
    }
}