/* =============================================================
   mobile.css — Kuponcum.com.tr
   style.css'den SONRA yüklenir. Tüm mobil düzeltmeleri burada.
   ============================================================= */

/* ── GLOBAL: yatay taşmayı kapat ───────────────────────────── */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}
/* Flex/grid öğelerin içerik kadar küçülmesini sağla */
* { min-width: 0; }

/* ── GLOBAL DEFAULTS (drawer & header elements) ─────────── */
.drawer-user-info { display: none; }
.logout-text { display: none; }

/* ── UX: tap-highlight + scroll-behavior ───────────────────── */
html {
    -webkit-tap-highlight-color: rgba(99, 102, 241, 0.15);
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}
button, a, input, textarea, select {
    -webkit-tap-highlight-color: rgba(99, 102, 241, 0.15);
}
/* Focus erişilebilirliği */
button:focus-visible, a:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
    outline: 2px solid #6366f1 !important;
    outline-offset: 2px;
}

/* ── NAV OVERLAY ────────────────────────────────────────────── */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .50);
    z-index: 999;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    cursor: pointer;
}
.nav-overlay.active { display: block; }

/* ── BOTTOM NAV (masaüstünde gizli) ────────────────────────── */
.mob-bottom-nav { display: none; }

/* ═══════════════════════════════════════════════════════════
   TABLET + MOBİL  ≤ 992px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
    /* Mobil hamburger göster */
    .mobile-toggle { display: inline-flex !important; }
    .drawer-only { display: flex !important; }
    .nav-right { display: none !important; }
    .nav-right-guest { display: none !important; }

    /* NAV — sol taraftan kayan drawer */
    .nav-menu {
        position: fixed !important;
        top: 64px !important;
        left: 0 !important;
        right: auto !important;
        width: min(300px, 85vw) !important;
        height: calc(100vh - 64px) !important;
        background: #fff !important;
        box-shadow: 4px 0 28px rgba(0,0,0,.20) !important;
        transform: translateX(-110%) !important;
        transition: transform .32s cubic-bezier(.4,0,.2,1) !important;
        display: block !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 24px 20px !important;
        color: #1e293b !important;
        z-index: 1000 !important;
    }
    .nav-menu.active,
    .nav-menu.open { transform: translateX(0) !important; }

    /* Nav içi liste */
    .nav-menu ul {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }
    .nav-menu > ul > li > a,
    .nav-menu > ul > li > form > button {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        color: #475569 !important;
        padding: 13px 16px !important;
        border-radius: 12px !important;
        background: #f8fafc !important;
        border: 1px solid #f1f5f9 !important;
        width: 100% !important;
        font-size: 14.5px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }
    .nav-menu > ul > li.active > a {
        background: #6366f1 !important;
        color: #fff !important;
        border-color: #6366f1 !important;
    }

    /* Alt menü (dropdown) mobil */
    .nav-menu .drop-down > ul {
        display: none !important;
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        background: #f1f5f9 !important;
        box-shadow: none !important;
        padding: 4px 0 4px 16px !important;
        margin-top: 6px !important;
        border-left: 3px solid #6366f1 !important;
        border-radius: 0 0 8px 8px !important;
    }
    .nav-menu .drop-down.open > ul { display: block !important; }

    /* Bildirim menüsü — floating kart */
    .notif-menu {
        position: fixed !important;
        top: 70px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-height: 55vh !important;
        border-radius: 16px !important;
        box-shadow: 0 20px 60px rgba(15,23,42,.25), 0 4px 16px rgba(15,23,42,.10) !important;
        z-index: 1001 !important;
        overflow: hidden !important;
    }
    .notif-body {
        overflow-y: auto !important;
        padding: 0 !important;
        gap: 0 !important;
        max-height: calc(55vh - 65px) !important;
    }
    /* Her satırı basit divider ile ayır, icon box gizle */
    .notif-row {
        box-shadow: none !important;
        border: none !important;
        border-bottom: 1px solid #f1f5f9 !important;
        border-radius: 0 !important;
        padding: 12px 16px !important;
        transform: none !important;
    }
    .notif-row:hover { transform: none !important; box-shadow: none !important; background: #f8fafc !important; }
    .notif-row:last-child { border-bottom: none !important; }
    .notif-icon { display: none !important; }
    /* Saat ikonu zaman metninin önünde */
    .notif-time {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        font-size: 11px !important;
        color: #94a3b8 !important;
        margin-top: 3px !important;
    }
    .notif-time::before {
        font-family: "Font Awesome 6 Free" !important;
        font-weight: 900 !important;
        content: "\f017" !important;
        font-size: 10px !important;
    }

    /* Touch targets 44×44px — header butonları */
    .mobile-toggle {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
    }
    .notif-btn {
        width: 44px !important;
        height: 44px !important;
        font-size: 16px !important;
        background: rgba(255,255,255,.15) !important;
        color: #fff !important;
    }

    /* ── DRAWER KULLANICI BİLGİ BLOĞU ─────────────────────── */
    .drawer-user-info {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 20px 20px 18px !important;
        margin: -24px -20px 16px !important;
        background: linear-gradient(135deg, #4f46e5 0%, #6d28d9 100%) !important;
        flex-shrink: 0 !important;
    }
    .drawer-avatar {
        width: 46px !important;
        height: 46px !important;
        border-radius: 50% !important;
        background: rgba(255,255,255,.25) !important;
        color: #fff !important;
        font-size: 20px !important;
        font-weight: 800 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        border: 2px solid rgba(255,255,255,.35) !important;
        letter-spacing: -1px !important;
    }
    .drawer-user-details { flex: 1 !important; min-width: 0 !important; }
    .drawer-username {
        display: block !important;
        color: #fff !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .drawer-stats {
        display: flex !important;
        gap: 10px !important;
        margin-top: 5px !important;
        flex-wrap: wrap !important;
    }
    .drawer-stat {
        color: rgba(255,255,255,.85) !important;
        font-size: 11.5px !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }
    .drawer-stat i { font-size: 10px !important; }

    /* ── NAV İTEM KONTRAST İYİLEŞTİRME ───────────────────── */
    .nav-menu > ul > li > a,
    .nav-menu > ul > li > form > button {
        color: #1e293b !important;
    }
    .nav-menu > ul > li > a i { margin-right: 2px !important; }

    /* ── WALLET İTEMLAR DRAWER'DA ─────────────────────────── */
    .nav-menu .wallet-item .wallet-balance {
        color: #1e293b !important;
        background: #f0fdf4 !important;
        border-color: #bbf7d0 !important;
    }
    .nav-menu .wallet-item .wallet-balance.kp-nav-pts {
        background: #fefce8 !important;
        border-color: #fde68a !important;
    }

    /* ── LOGOUT BUTONU DRAWER'DA ──────────────────────────── */
    .nav-menu .logout-item { margin-top: 8px !important; }
    .nav-menu .logout-item form { display: block !important; width: 100% !important; }
    .nav-menu .logout-item .logout-btn {
        color: #dc2626 !important;
        background: #fef2f2 !important;
        border: 1px solid #fecaca !important;
        border-radius: 12px !important;
        width: 100% !important;
        padding: 13px 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        font-size: 14.5px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
    }
    .logout-text { display: inline !important; }
}

/* ═══════════════════════════════════════════════════════════
   MOBİL  ≤ 768px  (Telefon)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ─── CONTAINER ─────────────────────────────────── */
    .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
        max-width: 100% !important;
    }
    #main {
        padding-top: 72px !important;
        padding-bottom: 80px !important; /* bottom nav */
        overflow-x: hidden;
    }

    /* ─── GİRİŞ ALANLARI (iOS zoom engeli) ──────────── */
    input, textarea, select,
    .auth-input, .form-control {
        font-size: 16px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="tel"], input[type="search"],
    textarea {
        appearance: none;
        -webkit-appearance: none;
    }

    /* ─── BUTONLAR ───────────────────────────────────── */
    .btn-block, .btn-buy, .auth-btn, .btn-primary, .btn-claim {
        width: 100% !important;
        min-height: 44px !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        font-weight: 700 !important;
    }
    /* Sekonder butonlar da min 40px */
    .btn-secondary, .btn { min-height: 40px !important; }
    /* İkon butonları */
    button[type="button"]:not(.btn):not(.auth-btn):not(.btn-buy) {
        min-height: 36px !important;
    }

    /* ─── BOTTOM NAV ─────────────────────────────────── */
    .mob-bottom-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important; left: 0 !important; right: 0 !important;
        height: 58px !important;
        background: #fff !important;
        border-top: 1px solid #e2e8f0 !important;
        box-shadow: 0 -6px 24px rgba(15,23,42,.10) !important;
        z-index: 1200 !important;
        align-items: stretch !important;
        padding-bottom: env(safe-area-inset-bottom, 0) !important;
    }
    .mob-nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 !important;
        gap: 2px !important;
        color: #94a3b8 !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        transition: color .2s !important;
        padding: 4px 0 !important;
    }
    .mob-nav-item i { font-size: 18px !important; line-height: 1 !important; }
    .mob-nav-item.active,
    .mob-nav-item:hover { color: #6366f1 !important; }
    .mob-nav-center {
        position: relative !important;
        margin-top: -18px !important;
        flex: 1.1 !important;
    }
    .mob-nav-center-btn {
        width: 52px !important; height: 52px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
        color: #fff !important; font-size: 22px !important;
        box-shadow: 0 8px 24px rgba(99,102,241,.5) !important;
        margin: 0 auto 4px !important;
        aspect-ratio: 1 !important;
        border: 3px solid #fff !important;
    }
    .mob-nav-center.active .mob-nav-center-btn { filter: brightness(1.1) !important; }

    /* ─── HERO ───────────────────────────────────────── */
    .hero { padding: 28px 14px 60px !important; min-height: auto !important; }
    .hero-inner { max-width: 100% !important; }
    .hero-title { font-size: 20px !important; line-height: 1.35 !important; margin-bottom: 16px !important; }
    .hero-wallet-btn { width: 100% !important; max-width: 100% !important; }
    .promo-card { font-size: 12.5px !important; margin-top: 12px !important; }
    .promo-slide { gap: 8px !important; }

    /* ─── QUICK NAV ──────────────────────────────────── */
    .quick-nav {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        flex-wrap: unset !important;
    }
    .quick-nav-item {
        flex-direction: column !important;
        gap: 4px !important;
        min-width: 0 !important;
        width: 100% !important;
        padding: 10px 6px !important;
        font-size: 10px !important;
        justify-content: center !important;
        text-align: center !important;
    }
    .quick-nav-item i { font-size: 18px !important; color: #fbbf24 !important; }
    .quick-nav-item span { display: block !important; }

    /* ─── SEKSİYON BAŞLIĞI ───────────────────────────── */
    .section-title { margin-bottom: 12px !important; flex-wrap: wrap !important; }
    .section-title h2 { font-size: 15px !important; }
    .section-title p { font-size: 11px !important; }
    .home-section { margin: 20px 0 !important; }

    /* ─── KATEGORİ KARTLARI (dikey — tek sütun, modern) ─── */
    .cat-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .cat-card {
        border-radius: 16px !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: auto !important;
        align-items: stretch !important;
        box-shadow: 0 2px 12px rgba(15,23,42,.08) !important;
    }
    .cat-image {
        width: 100% !important;
        height: 180px !important;
        min-height: 180px !important;
        flex-shrink: 0 !important;
        border-radius: 16px 16px 0 0 !important;
    }
    /* Cat-badge: sadece İLK rozeti göster, ikincisi gizli */
    .cat-badge {
        top: 6px !important;
        left: 6px !important;
        right: 6px !important;
        gap: 4px !important;
        max-width: calc(100% - 12px) !important;
    }
    .cat-badge span {
        font-size: 12px !important;
        padding: 5px 11px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        display: block !important;
        line-height: 1.3 !important;
    }
    .cat-badge span:nth-of-type(2) { display: block !important; }
    /* Yatay kart badge konumu cat-image üzerinde */
    .cat-image .cat-badge {
        top: 6px !important;
        left: 6px !important;
        right: auto !important;
        max-width: calc(100% - 12px) !important;
    }
    .cat-content {
        padding: 14px 16px !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 8px !important;
        min-width: 0 !important;
    }
    .cat-title {
        font-size: 15px !important;
        line-height: 1.35 !important;
        margin: 0 !important;
        min-height: auto !important;
        font-weight: 700 !important;
        color: #111827 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    /* cat-info: stok solda pill, fiyatlar sağda — space-between */
    .cat-info {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        margin-top: 6px !important;
    }
    /* stock-info: yeşil pill (eski hal) */
    .stock-info {
        display: inline-flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        padding: 3px 10px !important;
        border-radius: 999px !important;
        background: #ecfdf5 !important;
        color: #059669 !important;
        border: 1px solid #a7f3d0 !important;
        line-height: 1.4 !important;
    }
    /* cat-price: fiyatlar sağda, eski + yeni yan yana */
    .cat-price {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        font-size: 16px !important;
        font-weight: 800 !important;
        color: #111827 !important;
        line-height: 1.2 !important;
        text-align: right !important;
        margin-left: auto !important;
    }
    .cat-old-price {
        font-size: 12px !important;
        font-weight: 500 !important;
        color: #9ca3af !important;
        line-height: 1.2 !important;
        text-decoration: line-through !important;
    }

    /* ─── LİDERLİK TABLOSU — 4 sütun (Sıra + Kullanıcı + Harcama + Ödül) ── */
    .leaderboard-card > summary { padding: 14px 16px !important; }
    .lb-body { padding: 4px 8px 12px !important; overflow-x: hidden !important; }
    .lb-header-row,
    .lb-row {
        grid-template-columns: 28px 1fr 72px 62px !important;
        gap: 6px !important;
        padding: 8px 10px !important;
    }
    /* Badge sütununu gizle, harcama ve ödül göster */
    .lb-header-badge { display: none !important; }
    .lb-header-spent { display: block !important; font-size: 9px !important; text-align: center !important; }
    .lb-header-prize { display: block !important; font-size: 9px !important; text-align: center !important; }
    /* 3.col=badge → gizle, 4.col=harcama, 5.col=ödül */
    .lb-row > *:nth-child(3) { display: none !important; }
    .lb-row > *:nth-child(4) { display: block !important; text-align: center !important; }
    .lb-row > *:nth-child(5) { display: flex !important; justify-content: center !important; }
    /* lb-prize: kompakt pill (full-width buton değil) */
    .lb-prize {
        width: auto !important;
        padding: 4px 8px !important;
        font-size: 10px !important;
        box-shadow: none !important;
    }
    .lb-points { padding: 3px 8px !important; font-size: 10px !important; width: auto !important; }
    .lb-name { font-size: 12px !important; max-width: 110px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
    .lb-avatar { width: 24px !important; height: 24px !important; font-size: 9px !important; flex-shrink: 0 !important; }
    .lb-rank { font-size: 12px !important; }

    /* ─── ÇEKİLİŞ (index.php raffle kartları) ───────── */
    .raffle-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    .raffle-card { padding: 16px !important; overflow: hidden !important; }
    .raffle-title { font-size: 15px !important; padding-right: 55px !important; }
    .raffle-btn {
        width: 100% !important;
        justify-content: center !important;
        margin-top: 8px !important;
    }

    /* ─── TABLOLAR (yatay kaydırma) ──────────────────── */
    table.table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        font-size: 12px !important;
    }
    table.table th,
    table.table td {
        padding: 8px 10px !important;
        white-space: nowrap !important;
    }
    table.table tbody tr:last-child td { border-bottom: none; }

    /* ─── CARD PANEL ─────────────────────────────────── */
    .card-panel {
        padding: 16px !important;
        border-radius: 16px !important;
        overflow-x: hidden !important;
    }

    /* ─── FORM GRUP ──────────────────────────────────── */
    .form-group { margin-bottom: 14px !important; }
    .form-control {
        width: 100% !important;
        border-radius: 10px !important;
    }

    /* ─── AUTH SAYFALAR ──────────────────────────────── */
    .auth-page-wrap { padding: 14px !important; align-items: flex-start !important; }
    .auth-card { padding: 28px 18px !important; border-radius: 20px !important; }
    .auth-head h1 { font-size: 22px !important; }
    .auth-perks { gap: 4px !important; }
    .auth-perk { font-size: 10.5px !important; }

    /* ─── PROFİL ─────────────────────────────────────── */
    .profile-page { overflow-x: hidden !important; }
    .profile-header {
        flex-direction: column !important;
        gap: 12px !important;
        padding: 18px 16px !important;
        text-align: center !important;
    }
    .profile-avatar-block {
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }
    .profile-tabs {
        display: flex !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none !important;
        gap: 6px !important;
        padding-bottom: 4px !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .profile-tabs::-webkit-scrollbar { display: none !important; }
    .profile-tabs a {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        padding: 8px 12px !important;
        font-size: 12.5px !important;
    }
    .profile-body { overflow-x: hidden !important; }
    .stat-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .stat-card { padding: 14px 12px !important; min-width: 0 !important; }
    .stat-value { font-size: 18px !important; }

    /* ─── KATEGORİ SAYFASI ───────────────────────────── */
    .cat-page-body { padding: 14px !important; }
    .cat-page-title h2 { font-size: 17px !important; }

    /* ─── DAVET ET ───────────────────────────────────── */
    .earn-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .earn-stat {
        padding: 12px 10px !important;
        min-width: 0 !important;
        overflow: hidden !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    .es-icon { flex-shrink: 0 !important; }
    .es-value { font-size: 20px !important; }
    .es-label { font-size: 11px !important; }
    .es-meta { font-size: 10px !important; }
    .op-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
    .op-item { gap: 10px !important; }
    .card-panel.earn-panel { padding: 16px !important; }
    .progress-block { overflow: hidden !important; }
    .pb-row { flex-wrap: wrap !important; gap: 8px !important; }
    .pb-stats { flex-direction: row !important; gap: 12px !important; }

    /* ─── ÇEKİLİŞLER SAYFASI ────────────────────────── */
    .cl-wrap { overflow-x: hidden !important; }
    .cl-tickets { grid-template-columns: 1fr !important; gap: 10px !important; }
    .cl-ticket { padding: 14px 16px !important; gap: 12px !important; }
    .cl-ticket .thint { display: none !important; }
    .cl-ticket .tcount { font-size: 22px !important; }
    .cl-ticket .tbuy {
        background: #eff6ff !important;
        color: #1d4ed8 !important;
        padding: 5px 12px !important;
        border-radius: 20px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }
    .cl-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    .cl-card { overflow: hidden !important; }
    .cl-past-card { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
    .cl-past-card table { min-width: 360px !important; font-size: 12px !important; }

    /* ─── HESAPLARIM ─────────────────────────────────── */
    .hs-wrap { overflow-x: hidden !important; }
    .hs-card { overflow: hidden !important; }
    .hs-filters {
        display: flex !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none !important;
        gap: 6px !important;
        padding-bottom: 6px !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .hs-filters::-webkit-scrollbar { display: none !important; }
    .cat-filter-btn { flex-shrink: 0 !important; font-size: 12px !important; }
    .hs-row-head { display: none !important; }
    .hs-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        padding: 14px 16px !important;
    }
    .hs-cat { font-weight: 700 !important; font-size: 14px !important; }
    .hs-items-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
    .hs-payload {
        word-break: break-all !important;
        font-size: 11.5px !important;
        line-height: 1.5 !important;
    }
    .hs-item-actions {
        width: 100% !important;
        flex-direction: column !important;
        gap: 6px !important;
    }
    .btn-group {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        width: 100% !important;
    }
    .btn-group button,
    .btn-group a {
        flex: 1 1 auto !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
        font-size: 12px !important;
    }
    .copy-btn, .mark-used-btn { font-size: 12px !important; }

    /* ─── MODAL (bottom sheet) ───────────────────────── */
    .kp-modal {
        padding: 0 !important;
        align-items: flex-end !important;
    }
    .kp-modal-card {
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 24px 24px 0 0 !important;
        margin: 0 !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    .kp-modal-body { padding: 16px !important; }
    .kp-modal-head {
        padding: 16px !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    .kp-modal-head .kp-head-icon { width: 36px !important; height: 36px !important; font-size: 14px !important; flex-shrink: 0 !important; }
    .kp-modal-head .kp-head-text { flex: 1 !important; min-width: 0 !important; }
    .kp-modal-head .kp-head-text h3 { font-size: 16px !important; margin: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
    .kp-modal-head .kp-head-text small { font-size: 11px !important; }
    .kp-modal-head .kp-points-badge { order: 4 !important; width: 100% !important; justify-content: center !important; font-size: 13px !important; padding: 8px 12px !important; border-radius: 10px !important; }
    .kp-modal-head .kp-close { position: absolute !important; top: 14px !important; right: 14px !important; }

    /* Shop modal ürün satırları mobil düzeni */
    .kp-sell-row, .kp-market-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 14px !important;
    }
    .kp-product {
        width: 100% !important;
        flex: none !important;
    }
    .kp-product strong { font-size: 14px !important; }
    .kp-product small { font-size: 12px !important; }
    .kp-sell-row .kp-qty, .kp-qty-ticket, .kp-qty-cat {
        width: 100% !important;
        text-align: center !important;
        height: 42px !important;
        border-radius: 10px !important;
    }
    .kp-sell-btn, .kp-buy-ticket-btn, .kp-buy-cat-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 10px 16px !important;
    }
    .kp-section-title {
        font-size: 13px !important;
        padding: 8px 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
    }
    .kp-section-title small { display: block !important; width: 100% !important; padding-left: 22px !important; font-size: 11px !important; }

    /* ─── FOOTER ─────────────────────────────────────── */
    .site-footer {
        padding: 14px 14px 80px !important;
        text-align: center !important;
    }

    /* ─── ALERT ──────────────────────────────────────── */
    .alert { font-size: 13px !important; padding: 10px 12px !important; }

    /* ─── İŞLEM GEÇMİŞİ ─────────────────────────────── */
    .tx-wrap, .hist-wrap { overflow-x: hidden !important; }

    /* ─── DESTEK / İADE ──────────────────────────────── */
    .ticket-filters {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .ticket-row, .iade-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    /* ─── YORUM BÖLÜMÜ ───────────────────────────────── */
    .cc-card-container { overflow: hidden !important; }
    .cf-actions { flex-wrap: wrap !important; gap: 6px !important; }
    .cf-actions button { flex: 1 !important; }

    /* ─── RANK KARTLARI ──────────────────────────────── */
    .rank-info-card { overflow-x: hidden !important; }
    .rank-list { flex-wrap: wrap !important; gap: 8px !important; }

    /* ─── PURCHASES GRİD ─────────────────────────────── */
    .purchases-grid { grid-template-columns: 1fr !important; }

    /* ─── PROFİL — ek sınıflar ───────────────────────── */
    .profile-username { font-size: 17px !important; }
    .form-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    .form-narrow { max-width: 100% !important; }
    .security-list { gap: 8px !important; }
    .security-row {
        flex-direction: row !important;
        padding: 12px !important;
        gap: 10px !important;
    }
    .security-row .notif-icon { width: 36px !important; height: 36px !important; flex-shrink: 0 !important; }
    .rank-card { padding: 14px !important; gap: 10px !important; }
    .avatar-edit { padding: 16px !important; text-align: center !important; }
    .avatar-preview { width: 80px !important; height: 80px !important; font-size: 28px !important; margin: 0 auto 12px !important; }
    .info-banner-blue {
        padding: 12px 14px !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
    }
    .section-h { font-size: 15px !important; margin-bottom: 6px !important; }
    .section-desc { font-size: 12.5px !important; line-height: 1.5 !important; }

    /* ─── PROFİL — şifre 2FA popout (inline style override) ─ */
    .auth-popout {
        padding: 0 !important;
        align-items: flex-end !important;
    }
    .auth-popout-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 24px 24px 0 0 !important;
        padding: 20px 18px !important;
        max-height: 90vh !important;
    }
    .auth-code-input {
        text-align: center !important;
        font-size: 22px !important;
        letter-spacing: 6px !important;
        height: 56px !important;
    }

    /* ─── HESAPLARIM — ek sınıflar ───────────────────── */
    .hs-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .hs-header h2 { font-size: 17px !important; line-height: 1.35 !important; }
    .hs-count { font-size: 12px !important; }
    .hs-empty { padding: 32px 16px !important; text-align: center !important; }
    .hs-empty .icon { font-size: 36px !important; }
    .hs-count-cell { font-size: 13px !important; }
    .hs-count-cell small { display: block !important; margin-top: 2px !important; font-size: 11px !important; }
    .hs-date { font-size: 12px !important; color: #6b7280 !important; }
    .hs-action { width: 100% !important; }
    .btn-goster {
        width: 100% !important;
        justify-content: center !important;
        padding: 9px 14px !important;
    }
    .hs-token-label { font-size: 11px !important; font-weight: 700 !important; }
    .hs-token-note { font-size: 11px !important; line-height: 1.4 !important; margin-top: 4px !important; }
    .hs-item { padding: 12px !important; }
    .refund-link { font-size: 12px !important; }

    /* ─── DAVET ET — ek sınıflar ─────────────────────── */
    .earn-stat {
        flex-direction: row !important;  /* icon left, text right - kompakt */
        gap: 10px !important;
        align-items: center !important;
        text-align: left !important;
    }
    .earn-stat > div:last-child { flex: 1 !important; min-width: 0 !important; }
    .es-icon {
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px !important;
        font-size: 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    .es-value { font-size: 18px !important; line-height: 1.1 !important; }
    .es-label { font-size: 11.5px !important; }
    .es-meta { font-size: 10.5px !important; color: #94a3b8 !important; }
    .ep-head {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    .ep-head h3 { font-size: 15.5px !important; }
    .ep-head.between { justify-content: space-between !important; }
    .opportunity { padding: 0 !important; }
    .op-title { font-size: 14px !important; margin-bottom: 10px !important; }
    .op-item {
        flex-direction: row !important;
        gap: 10px !important;
        align-items: flex-start !important;
        padding: 10px !important;
    }
    .op-item > div { flex: 1 !important; min-width: 0 !important; }
    .op-item strong { font-size: 13.5px !important; }
    .op-item p { font-size: 12px !important; line-height: 1.45 !important; margin-top: 4px !important; }
    .op-i { font-size: 22px !important; flex-shrink: 0 !important; }
    .progress-block { padding: 14px !important; }
    .pb-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    .pb-stats {
        display: flex !important;
        flex-direction: row !important;
        gap: 16px !important;
        width: 100% !important;
        justify-content: space-between !important;
    }
    .pb-stats > div { display: flex !important; flex-direction: column !important; gap: 2px !important; }
    .pb-stats span { font-size: 10.5px !important; color: #94a3b8 !important; }
    .pb-stats strong { font-size: 14px !important; }
    .pb-title { font-size: 13.5px !important; font-weight: 700 !important; }
    .pb-sub { font-size: 12px !important; color: #6b7280 !important; }
    .pb-note { font-size: 12.5px !important; line-height: 1.5 !important; margin-top: 10px !important; }

    /* DAVET ET tablo içindeki kod ve butonlar */
    table.table code {
        font-size: 11px !important;
        word-break: break-all !important;
        white-space: normal !important;
        display: inline-block !important;
        max-width: 200px !important;
    }

    /* ─── DAILY REWARD ───────────────────────────────── */
    .reward-card { padding: 22px 18px !important; border-radius: 18px !important; }
    .reward-top h2 { font-size: 18px !important; }
    .reward-emoji { font-size: 22px !important; }
    .reward-username { font-size: 13px !important; }
    .reward-balance { font-size: 30px !important; margin: 8px 0 16px !important; }
    .reward-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .rs-item { padding: 10px !important; }
    .rs-label { font-size: 10.5px !important; }
    .rs-value { font-size: 14px !important; }
    .btn-claim {
        width: 100% !important;
        padding: 14px 18px !important;
        font-size: 15px !important;
    }
    .reward-countdown { padding: 12px !important; margin-top: 12px !important; }
    .cd-label { font-size: 11px !important; }
    .cd-time { font-size: 14px !important; }
    .lucky-bet { padding: 14px !important; margin-top: 16px !important; }
    .lucky-bet p { font-size: 13px !important; line-height: 1.5 !important; }
    .lucky-note { font-size: 11.5px !important; }
    .back-home { font-size: 13px !important; }

    /* ─── BADGE'LER ──────────────────────────────────── */
    .badge { font-size: 10.5px !important; padding: 3px 8px !important; white-space: nowrap !important; }

    /* ─── CODE / PRE ─────────────────────────────────── */
    code, pre {
        word-break: break-all !important;
        white-space: pre-wrap !important;
    }

    /* ─── DESTEK — Chat görünümü ─────────────────────── */
    .ticket-header { padding: 14px 16px !important; border-radius: 12px !important; }
    .ticket-header h3 { font-size: 16px !important; }
    .ticket-subject { font-size: 12.5px !important; padding-right: 0 !important; }
    .status-badge-header {
        display: inline-block !important;
        margin-top: 6px !important;
        margin-left: 0 !important;
    }
    .back-button {
        position: static !important;
        display: inline-flex !important;
        margin-bottom: 10px !important;
        padding: 8px 12px !important;
        font-size: 12.5px !important;
    }
    .chat-container {
        padding: 14px !important;
        min-height: 280px !important;
        max-height: 60vh !important;
        border-radius: 0 !important;
    }
    .chat-message { margin-bottom: 12px !important; }
    .message-bubble { max-width: 82% !important; padding: 10px 12px !important; font-size: 13px !important; }
    .message-icon { width: 28px !important; height: 28px !important; font-size: 12px !important; }
    .message-content { font-size: 13px !important; line-height: 1.45 !important; }
    .message-header { font-size: 11px !important; }
    .reply-section { padding: 14px !important; border-radius: 0 0 12px 12px !important; }
    .reply-section h4 { font-size: 14px !important; }
    .reply-section textarea { padding: 10px 12px !important; font-size: 14px !important; }

    /* ─── İŞLEM GEÇMİŞİ ─────────────────────────────── */
    .tx-panel { padding: 14px !important; }
    .tx-head h3 { font-size: 16px !important; }
    .tx-filters {
        display: flex !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        padding-bottom: 4px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .tx-filters::-webkit-scrollbar { display: none !important; }
    .tx-filters a {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        padding: 7px 12px !important;
        font-size: 12px !important;
    }
    .tx-list { gap: 8px !important; }
    .tx-row {
        flex-direction: row !important;
        align-items: center !important;
        padding: 12px !important;
        gap: 10px !important;
    }
    .tx-icon { width: 36px !important; height: 36px !important; font-size: 14px !important; flex-shrink: 0 !important; }
    .tx-info { flex: 1 !important; min-width: 0 !important; }
    .tx-label { font-size: 13px !important; font-weight: 700 !important; }
    .tx-desc { font-size: 11.5px !important; color: #6b7280 !important; overflow: hidden !important; text-overflow: ellipsis !important; }
    .tx-side { text-align: right !important; flex-shrink: 0 !important; }
    .tx-amount { font-size: 14px !important; font-weight: 800 !important; white-space: nowrap !important; }
    .tx-date { font-size: 10.5px !important; color: #94a3b8 !important; white-space: nowrap !important; }

    /* ─── İADE — listede small inline ─────────────── */
    .iade-row, .iade-list-item { flex-direction: column !important; align-items: flex-start !important; }

    /* ─── BİLDİRİMLER (notifications.php) ────────────── */
    .notif-page { padding: 14px !important; }
    .notif-page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        margin-bottom: 14px !important;
    }
    .notif-page-header h3 { font-size: 16px !important; }
    .notif-count { font-size: 11.5px !important; }
    .notif-page-list { gap: 8px !important; }
    .notif-row {
        gap: 10px !important;
        padding: 12px !important;
        align-items: flex-start !important;
    }
    .notif-icon { width: 36px !important; height: 36px !important; flex-shrink: 0 !important; font-size: 14px !important; }
    .notif-content { flex: 1 !important; min-width: 0 !important; }
    .notif-title { font-size: 13px !important; line-height: 1.4 !important; }
    .notif-time { font-size: 10.5px !important; display: block !important; margin-top: 4px !important; }
    .notif-empty { padding: 40px 16px !important; }
    .notif-empty i { font-size: 32px !important; }

    /* ─── KATEGORİ SAYFASI (kategori.php) ───────────── */
    .cat-page { overflow: hidden !important; }
    .cat-page-title h2 { font-size: 18px !important; }
    .cat-page-body { padding: 14px !important; }
    .price-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        padding: 12px 0 !important;
    }
    .price-row .price { font-size: 22px !important; }
    .price-row .old-price { font-size: 13px !important; }
    .buy-actions {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }
    .buy-actions .btn-buy,
    .buy-actions .btn-gift {
        width: 100% !important;
        justify-content: center !important;
    }
    .btn-gift {
        padding: 12px 18px !important;
        font-size: 14px !important;
    }
    .stock-row { padding: 10px 0 !important; }
    .stock-row p { font-size: 13px !important; margin: 4px 0 !important; }
    .stock-note { font-size: 11.5px !important; }
    .recent-buyers { padding: 12px !important; }
    .recent-buyers h6 { font-size: 11px !important; }
    .avatar-strip {
        display: flex !important;
        overflow-x: auto !important;
        gap: 8px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .avatar-strip::-webkit-scrollbar { display: none !important; }
    .avatar-item { flex-shrink: 0 !important; min-width: 54px !important; }
    .avatar-circle { width: 38px !important; height: 38px !important; font-size: 12px !important; }
    .avatar-item small { font-size: 10px !important; max-width: 54px !important; display: block !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
    .info-card { padding: 14px !important; margin: 14px 0 !important; }
    .info-card h3 { font-size: 15px !important; }
    .banner { padding: 10px 12px !important; font-size: 12.5px !important; line-height: 1.45 !important; }
    .detail-list, .warn-list { padding-left: 0 !important; }
    .detail-list li, .warn-list li {
        padding: 8px 0 !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
    .detail-list strong { font-size: 13px !important; }
    .detail-list p { font-size: 12.5px !important; line-height: 1.5 !important; margin: 2px 0 0 !important; }

    /* ─── SATIN ALMA BAŞARI MODAL ──────────────────── */
    .purchase-success-modal { padding: 14px !important; align-items: center !important; }
    .purchase-success-card {
        padding: 24px 18px !important;
        max-width: 100% !important;
        border-radius: 20px !important;
    }
    .purchase-success-icon { font-size: 48px !important; margin-bottom: 12px !important; }
    .purchase-success-card h3 { font-size: 18px !important; }
    .purchase-success-card p { font-size: 13px !important; }
    .purchase-success-price { font-size: 20px !important; }
    .purchase-success-actions {
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .purchase-success-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 12px !important;
        font-size: 13.5px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   ORTA TELEFON  ≤ 480px   (iPhone XR 414 / Pixel 4 480 arası)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    /* Tipografi */
    .hero-title { font-size: 20px !important; }
    .section-title { font-size: 17px !important; }

    /* Header/Nav */
    #header { height: 64px !important; }
    #main { padding-top: 72px !important; }
    .logo img { height: 48px !important; max-width: 180px !important; }

    /* Quick Nav */
    .quick-nav { gap: 6px !important; padding: 12px 10px !important; }
    .quick-nav-item { padding: 10px 6px !important; font-size: 9.5px !important; }
    .quick-nav-item i { font-size: 18px !important; }

    /* Çekilişler */
    .raffle-grid { gap: 14px !important; }
    .raffle-card { padding: 16px 14px 18px !important; }
    .raffle-title { font-size: 16px !important; }

    /* Davet / Referans */
    .invite-code-display { grid-template-columns: 1fr !important; }
    .ref-row { flex-direction: column !important; align-items: flex-start !important; }
    .ic-code { font-size: 20px !important; }

    /* İşlem geçmişi */
    .tx-row { padding: 10px !important; gap: 8px !important; }
    .tx-label { font-size: 12.5px !important; }
    .tx-amount { font-size: 13px !important; }

    /* Shop Modal satırları */
    .kp-sell-row, .kp-market-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .kp-product { min-width: 0 !important; flex: 1 1 60% !important; }
    .kp-sell-btn, .kp-buy-ticket-btn, .kp-buy-cat-btn { font-size: 12px !important; padding: 7px 12px !important; }

    /* Auth */
    .auth-shell-enhanced { padding: 18px 14px 14px !important; }
    .auth-shell { padding: 22px 16px !important; }

    /* Kart paneller */
    .card-panel { padding: 16px 14px !important; }

    /* Modal (bottom sheet) */
    .kp-modal-card { border-radius: 20px 20px 0 0 !important; }
    .kp-modal-body { max-height: 72dvh !important; }

    /* Günlük ödül */
    .reward-card { padding: 20px 16px !important; margin: 14px 0 !important; max-width: 100% !important; }
    .reward-balance { font-size: 26px !important; }
    .reward-stats { grid-template-columns: 1fr 1fr !important; }

    /* Liderlik tablosu — 4 sütun (768px ile aynı) */
    .lb-header-badge { display: none !important; }
    .lb-header-spent { display: block !important; font-size: 8px !important; text-align: center !important; }
    .lb-header-prize { display: block !important; font-size: 8px !important; text-align: center !important; }
    .lb-rank-pill    { display: none !important; }
    .lb-row > *:nth-child(3) { display: none !important; }
    .lb-row > *:nth-child(4) { display: block !important; text-align: center !important; }
    .lb-row > *:nth-child(5) { display: flex !important; justify-content: center !important; }
    .lb-header-row, .lb-row { grid-template-columns: 24px 1fr 68px 56px !important; gap: 4px !important; }
    .lb-prize  { width: auto !important; padding: 3px 6px !important; font-size: 9px !important; box-shadow: none !important; }
    .lb-points { width: auto !important; padding: 3px 6px !important; font-size: 9px !important; }

    /* Hesap satın alma başarı modalı */
    .purchase-success-card { padding: 22px 14px !important; }
    .purchase-success-card h3 { font-size: 16px !important; }

    /* Çekiliş katılım modalı */
    .raffle-join-card { padding: 24px 16px 20px !important; }

    /* Ana içerik alt padding — bottom nav + safe area */
    #main { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ═══════════════════════════════════════════════════════════
   KÜÇÜK TELEFON  ≤ 400px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
    .cat-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
    .cat-image { width: 80px !important; min-height: 80px !important; }
    .cat-title { font-size: 13px !important; }
    .cat-price { font-size: 14px !important; }
    .stat-grid { grid-template-columns: 1fr 1fr !important; }
    .earn-stats { grid-template-columns: 1fr 1fr !important; }
    .hero-title { font-size: 18px !important; }
    .quick-nav-item { font-size: 9px !important; padding: 8px 4px !important; }
    .quick-nav-item i { font-size: 16px !important; }
    .lb-header-row  { grid-template-columns: 36px 1fr 90px !important; }
    .lb-row         { grid-template-columns: 36px 1fr 90px !important; }
}

/* ═══════════════════════════════════════════════════════════
   SAFE-AREA-INSET (Çentikli Telefonlar — iPhone X/11/12/13/14/15)
   ═══════════════════════════════════════════════════════════ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .mob-bottom-nav {
        padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        height: calc(58px + env(safe-area-inset-bottom)) !important;
    }
    #main {
        padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    }
    .auth-popout {
        padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
    }
    .kp-modal {
        padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
    }
    .raffle-join-modal {
        padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
    }
}