/* ═══════════════════════════════════════════════════════════
   LUXEHOME — KAPSAMLI MOBİL CSS  v4.0
   Tüm sayfalar için tek dosya
═══════════════════════════════════════════════════════════ */

/* ── Temel ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
body { overflow-x: hidden; overflow-x: clip; max-width: 100%; }

/* ─────────────────────────────────────────
   NAVBAR — GENEL
───────────────────────────────────────── */
.navbar {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Sayfa gövdesi navbar yüksekliği kadar aşağı it */
/* (her sayfa kendi hero/body padding'ini ayarlıyor, bu global) */

/* ─────────────────────────────────────────
   HAMBURGERİ — GENEL STIL
───────────────────────────────────────── */
.hamburger {
    display: none;          /* masaüstünde gizli */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px; height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    z-index: 2000;
    flex-shrink: 0;
    position: relative;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.hamburger span {
    display: block;
    width: 22px; height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center;
    position: absolute;
}
.hamburger span:nth-child(1) { transform: translateY(-7px); }
.hamburger span:nth-child(2) { transform: translateY(0); }
.hamburger span:nth-child(3) { transform: translateY(7px); }

.hamburger.open span:nth-child(1) { transform: rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg); }

/* ─────────────────────────────────────────
   NAV MENU HEADER (drawer içi başlık)
───────────────────────────────────────── */
.nav-menu-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 56px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    flex-shrink: 0;
    list-style: none;
    width: 100%;
}
.nav-menu-brand { font-size: 18px; font-weight: 800; }
.nav-menu-brand span { color: #b35900; }
.nav-menu-close {
    width: 32px; height: 32px;
    background: #f5f5f5; border: none; border-radius: 50%;
    cursor: pointer; font-size: 14px; color: #555;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.nav-menu-close:hover { background: #e0e0e0; }

/* ─────────────────────────────────────────
   GLOBAL OVERLAY (hamburger backdrop)
───────────────────────────────────────── */
#mobile-global-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 900;
    display: none;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    transition: opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

/* ─────────────────────────────────────────
   MOBİL ANA BREAKPOINT — 900px
───────────────────────────────────────── */
@media (max-width: 900px) {
    html, body {
        max-width: 100%;
        overflow-x: hidden !important;
        overflow-x: clip !important;
    }

    /* ── Hamburger görünür ── */
    .hamburger { display: flex; }
    .nav-menu-header { display: flex; }

    /* ── nav-links → sağdan gelen drawer ── */
    .nav-links {
        position: fixed !important;
        top: 0; right: 0; left: auto !important;
        width: 280px !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: -webkit-fill-available !important;
        background: #fff !important;
        flex-direction: column !important;
        /* style.css'teki justify-content: center sütunda dikey ortalar; drawer üstten başlasın */
        justify-content: flex-start !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        box-shadow: -4px 0 30px rgba(0,0,0,0.15) !important;
        transform: translateX(100%) !important;
        transition: transform 0.38s cubic-bezier(0.16,1,0.3,1) !important;
        z-index: 10000 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        display: flex !important;   /* flex her zaman açık, JS transform ile gizler */
        pointer-events: none !important;
    }
    .nav-links.open {
        transform: translateX(0) !important;
        pointer-events: auto !important;
    }

    .nav-links li { width: 100% !important; }
    .nav-links a {
        display: block !important;
        padding: 15px 24px !important;
        font-size: 14px !important;
        color: #333 !important;
        border-bottom: 1px solid #f5f5f5 !important;
        text-decoration: none !important;
        font-weight: 500 !important;
        transition: padding 0.2s, color 0.2s, background 0.2s !important;
    }
    .nav-links a:hover,
    .nav-links a.active {
        color: #b35900 !important;
        background: #fdf8f5 !important;
        padding-left: 30px !important;
    }

    /* ── Navbar padding küçült ── */
    .navbar { padding: 0 16px 0 20px !important; }
}

/* ─────────────────────────────────────────
   INDEX SAYFASI — ÖZEL MOBİL
───────────────────────────────────────── */
@media (max-width: 900px) {
    body { padding-top: 72px; }

    /* Hero — sola yaslı kalsın (style.css center ezmesin) */
    .hero {
        height: 85vh !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        text-align: left !important;
    }
    .hero-inner { padding: 0 20px 0 20px !important; max-width: 100% !important; }
    .hero h1 { font-size: clamp(2.2rem, 9vw, 3.5rem) !important; margin-bottom: 20px !important; }
    .hero p { font-size: 15px !important; margin-bottom: 32px !important; }
    .hero-scroll { display: none !important; }

    /* Ürün grid */
    .product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
    .product-img { height: 240px !important; }
    .product-info { padding: 16px !important; }
    .product-info h3 { font-size: 15px !important; }
    .new-price { font-size: 18px !important; }
    .section-container { padding: 40px 5% !important; }
    .section-title h2 { font-size: 28px !important; }

    /* Features bar */
    .features-bar { padding: 32px 5% !important; gap: 20px !important; }

    /* Newsletter */
    .newsletter { padding: 50px 5% !important; }
    .newsletter-form { flex-direction: column !important; gap: 10px !important; }
    .newsletter-form input,
    .newsletter-form button { width: 100% !important; padding: 14px !important; }
}

/* ─────────────────────────────────────────
   ÜRÜN SAYFASI (oturma/mutfak/yatak) — FİLTRE DRAWER
───────────────────────────────────────── */
@media (max-width: 900px) {

    .collection-layout {
        flex-direction: column !important;
        padding: 16px 5% !important;
        gap: 0 !important;
    }

    /* Filtre toggle butonu — görünür */
    .mobile-filter-toggle {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 13px 18px !important;
        background: #0a0a0a !important;
        border: 1px solid #222 !important;
        border-radius: 12px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #fff !important;
        cursor: pointer !important;
        margin-bottom: 18px !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
        transition: border-color 0.2s !important;
    }
    .mobile-filter-toggle:hover { border-color: #b35900 !important; }
    .mobile-filter-toggle i { color: #b35900 !important; font-size: 14px !important; }

    /* Filtre overlay */
    .filter-overlay {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0,0,0,0.65) !important;
        z-index: 1800 !important;
        backdrop-filter: blur(2px) !important;
        display: none !important;
        animation: fadeOverlay 0.25s ease !important;
    }
    .filter-overlay.open { display: block !important; }
    @keyframes fadeOverlay { from { opacity: 0; } to { opacity: 1; } }

    /* Sidebar drawer */
    .filter-sidebar {
        position: fixed !important;
        top: 0 !important; left: 0 !important;
        width: 290px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        overflow-y: auto !important;
        z-index: 1900 !important;
        transform: translateX(-110%) !important;
        transition: transform 0.35s cubic-bezier(0.16,1,0.3,1) !important;
        border-radius: 0 20px 20px 0 !important;
    }
    .filter-sidebar.drawer-open {
        transform: translateX(0) !important;
    }

    /* Drawer kapat butonu */
    .drawer-close-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        top: 16px !important; right: 16px !important;
        width: 32px !important; height: 32px !important;
        background: rgba(255,255,255,0.12) !important;
        border: 1px solid rgba(255,255,255,0.2) !important;
        border-radius: 50% !important;
        color: #fff !important;
        font-size: 14px !important;
        cursor: pointer !important;
        z-index: 10 !important;
        transition: background 0.2s !important;
    }
    .drawer-close-btn:hover { background: rgba(255,255,255,0.22) !important; }

    /* Ürün grid — ürün sayfası */
    .collection-main .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }
    .collection-main .product-img { height: 220px !important; }
}

/* ─────────────────────────────────────────
   GALERİ SAYFASI — MOBİL
───────────────────────────────────────── */
@media (max-width: 900px) {

    /* Hero */
    .g-hero { padding-top: 64px; }
    .g-hero-inner { padding: 0 5% 56px !important; }
    .g-hero h1 { font-size: clamp(2.8rem, 11vw, 4rem) !important; }
    .g-hero-bottom { flex-direction: column !important; gap: 16px !important; margin-top: 24px !important; }
    .g-hero-strip { padding: 14px 5% !important; gap: 20px !important; flex-wrap: wrap !important; }
    .g-strip-divider { display: none !important; }
    .g-filter-wrap { top: 64px !important; padding: 0 4% !important; }
    .g-filter-label { display: none !important; }
    .gf-count { display: none !important; }

    /* Grid — 2 kolon */
    .g-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        padding: 0 4% 60px !important;
    }
    .g-item { height: 210px !important; }

    /* Mobilde overlay daima görünür (hover yok) */
    .g-overlay {
        opacity: 1 !important;
        background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, transparent 60%) !important;
    }
    .g-ov-cat, .g-ov-name, .g-ov-row {
        transform: translateY(0) !important;
    }
    .g-ov-name { font-size: 12px !important; }
    .g-ov-price { font-size: 14px !important; }
    .g-ov-btn { width: 30px !important; height: 30px !important; font-size: 11px !important; }

    /* Lightbox — alttan açılan sheet */
    #lh-lightbox { padding: 0 !important; align-items: flex-end !important; }
    .lb-wrap {
        grid-template-columns: 1fr !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 92vh !important;
        overflow-y: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        animation: lbSlideUp 0.42s cubic-bezier(0.16,1,0.3,1) !important;
    }
    @keyframes lbSlideUp {
        from { transform: translateY(100%); opacity: 0; }
        to   { transform: translateY(0);    opacity: 1; }
    }
    .lb-media { min-height: 240px !important; }
    .lb-panel { padding: 22px 18px 36px !important; }
    .lb-title { font-size: 1.35rem !important; }
    .lb-specs-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
}

/* ─────────────────────────────────────────
   HAKKIMIZDA SAYFASI — MOBİL
   (style.css'te var ama burada güçlendiriyoruz)
───────────────────────────────────────── */
@media (max-width: 900px) {
    /* Custom cursor kaldır */
    #cdot, #cring { display: none !important; }
    body.hakkimizda-page { cursor: auto !important; }

    .hero-3d { min-height: 90vh !important; }
    .hero-title-3d { font-size: clamp(2.8rem, 11vw, 5rem) !important; letter-spacing: -2px !important; }

    .stats-3d { grid-template-columns: repeat(2,1fr) !important; padding: 50px 5% !important; gap: 12px !important; }
    .stat-3d-i { padding: 28px 16px !important; }

    .story-3d { grid-template-columns: 1fr !important; padding: 50px 5% !important; gap: 32px !important; }
    .s-img { transform: none !important; }
    .img-card { height: 280px !important; border-radius: 16px !important; }
    .img-sticker { display: none !important; }

    .flip-grid { grid-template-columns: 1fr 1fr !important; }
    .flip-card { height: 210px !important; }

    .gal-grid { grid-template-columns: 1fr 1fr !important; grid-template-rows: auto !important; }
    .g3-box { height: 160px !important; }
    .g3-box:nth-child(1), .g3-box:nth-child(4) { grid-column: auto !important; grid-row: auto !important; }

    .rings-grid { grid-template-columns: 1fr !important; max-width: 240px !important; margin: 0 auto !important; }
    .team-grid { grid-template-columns: repeat(2,1fr) !important; gap: 12px !important; }
    .tc-img { height: 180px !important; }

    .tl-track { flex-direction: column !important; gap: 0 !important; }
    .tl-item { padding: 0 0 28px 24px !important; border-left: 2px solid rgba(255,255,255,.08) !important; }
    .tl-item::before { bottom: auto !important; left: -6px !important; top: 2px !important; }
    .tl-track::before { display: none !important; }

    .flip-sec, .rings-sec, .team-sec, .tl-sec { padding: 60px 5% !important; }
    .stats-3d, .gal-3d { padding: 50px 5% !important; }
}

/* ─────────────────────────────────────────
   KÜÇÜK MOBİL — 480px
───────────────────────────────────────── */
@media (max-width: 480px) {

    /* Index ürünler */
    .product-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    .product-img { height: 300px !important; }

    /* Galeri grid tek kolon */
    .g-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
    .g-item { height: 260px !important; }

    /* Hero */
    .hero h1 { font-size: clamp(1.9rem, 10vw, 2.8rem) !important; }
    .hero-inner { padding: 0 20px !important; }
    .hero { height: 90vh !important; }
    .btn-main { width: 100% !important; justify-content: center !important; }

    /* Hakkımızda */
    .flip-grid { grid-template-columns: 1fr !important; }
    .gal-grid { grid-template-columns: 1fr !important; }
    .hero-title-3d { font-size: clamp(2.2rem, 12vw, 3.5rem) !important; }
    .stats-3d { grid-template-columns: 1fr 1fr !important; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr !important; }
    .footer-bottom { flex-direction: column !important; text-align: center !important; gap: 8px !important; }

    /* Navbar */
    .nav-icons { gap: 12px !important; }
}

/* ─────────────────────────────────────────
   TOUCH CİHAZ — hover efektleri kapat
───────────────────────────────────────── */
@media (hover: none) {
    .g-item:hover { transform: none !important; }
    .g-item:hover img { transform: scale(1) !important; }
    .product-card:hover { transform: none !important; box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important; }
    .tc:hover .tc-img img { transform: scale(1.1) !important; filter: grayscale(40%) brightness(.85) !important; }
    .g3-box:hover img { transform: scale(1.08) !important; }
    .btn-main:hover { transform: none !important; }
    .social-icons a:hover { transform: none !important; }
}

/* ─────────────────────────────────────────
   MASAÜSTÜNDE gizli olacaklar
───────────────────────────────────────── */
.mobile-filter-toggle { display: none; }
.filter-overlay { display: none; }
.drawer-close-btn { display: none; }