<?php
header('Content-Type: text/html; charset=UTF-8');
mb_internal_encoding('UTF-8');
require_once 'config.php';
require_once 'tracker.php';

// Kategorileri getir (sıralı) - "En Yeniler" kategorisini hariç tut (büyük/küçük harf duyarsız)
$kategoriler_query = $pdo->query("SELECT DISTINCT kategori, 
                            COALESCE(MAX(kategori_sira), 0) as sira 
                            FROM urunler 
                            WHERE kategori IS NOT NULL AND kategori != '' 
                            AND UPPER(kategori) != 'EN YENİLER'
                            AND UPPER(kategori) != 'EN YENILER'
                            GROUP BY kategori 
                            ORDER BY sira ASC, kategori ASC");
$kategoriler = $kategoriler_query->fetchAll();

// Alt kategorileri getir
$alt_kategoriler = [];
foreach ($kategoriler as $kat) {
    $kat_adi = $kat['kategori'];
    $alt_kat = $pdo->prepare("SELECT DISTINCT alt_kategori, 
                              COALESCE(MAX(alt_kategori_sira), 0) as sira 
                              FROM urunler 
                              WHERE kategori = ? AND alt_kategori IS NOT NULL AND alt_kategori != '' 
                              GROUP BY alt_kategori 
                              ORDER BY sira ASC, alt_kategori ASC");
    $alt_kat->execute([$kat_adi]);
    $alt_kategoriler[$kat_adi] = $alt_kat->fetchAll();
}

// Ürünleri getir
$kategori_filtre = isset($_GET['kategori']) ? $_GET['kategori'] : '';
$alt_kategori_filtre = isset($_GET['alt_kategori']) ? $_GET['alt_kategori'] : '';
$en_yeniler = isset($_GET['en_yeniler']) ? true : false;

// Sayfalama ayarları
$sayfa_basina = 12;
$sayfa = isset($_GET['sayfa']) ? max(1, intval($_GET['sayfa'])) : 1;
$offset = ($sayfa - 1) * $sayfa_basina;

// Toplam ürün sayısını hesapla
if ($en_yeniler) {
    $toplam_sorgu = $pdo->prepare("SELECT COUNT(*) FROM urunler 
                                   WHERE ad NOT LIKE 'Kategori: %' 
                                   AND ad NOT LIKE 'Alt Kategori: %'");
    $toplam_sorgu->execute();
} elseif ($kategori_filtre && $alt_kategori_filtre) {
    $toplam_sorgu = $pdo->prepare("SELECT COUNT(*) FROM urunler 
                                   WHERE kategori = ? AND alt_kategori = ? AND stok_durumu = 'var' 
                                   AND ad NOT LIKE 'Kategori: %' 
                                   AND ad NOT LIKE 'Alt Kategori: %'");
    $toplam_sorgu->execute([$kategori_filtre, $alt_kategori_filtre]);
} elseif ($kategori_filtre) {
    $toplam_sorgu = $pdo->prepare("SELECT COUNT(*) FROM urunler 
                                   WHERE kategori = ? AND stok_durumu = 'var' 
                                   AND ad NOT LIKE 'Kategori: %' 
                                   AND ad NOT LIKE 'Alt Kategori: %'");
    $toplam_sorgu->execute([$kategori_filtre]);
} else {
    $toplam_sorgu = $pdo->query("SELECT COUNT(*) FROM urunler 
                                 WHERE stok_durumu = 'var' 
                                 AND ad NOT LIKE 'Kategori: %' 
                                 AND ad NOT LIKE 'Alt Kategori: %'");
}
$toplam_urun = $toplam_sorgu->fetchColumn();
$toplam_sayfa = ceil($toplam_urun / $sayfa_basina);

// Ürünleri getir (sayfalama ile)
if ($en_yeniler) {
    // En yeni eklenen ürünler (tüm yeni eklenenler, stok durumuna bakmadan)
    $stmt = $pdo->prepare("SELECT * FROM urunler 
                          WHERE ad NOT LIKE 'Kategori: %' 
                          AND ad NOT LIKE 'Alt Kategori: %'
                          ORDER BY olusturma_tarihi DESC, id DESC 
                          LIMIT ? OFFSET ?");
    $stmt->execute([$sayfa_basina, $offset]);
} elseif ($kategori_filtre && $alt_kategori_filtre) {
    $stmt = $pdo->prepare("SELECT * FROM urunler 
                          WHERE kategori = ? AND alt_kategori = ? AND stok_durumu = 'var' 
                          AND ad NOT LIKE 'Kategori: %' 
                          AND ad NOT LIKE 'Alt Kategori: %'
                          ORDER BY alt_kategori_sira ASC, id DESC
                          LIMIT ? OFFSET ?");
    $stmt->execute([$kategori_filtre, $alt_kategori_filtre, $sayfa_basina, $offset]);
} elseif ($kategori_filtre) {
    $stmt = $pdo->prepare("SELECT * FROM urunler 
                          WHERE kategori = ? AND stok_durumu = 'var' 
                          AND ad NOT LIKE 'Kategori: %' 
                          AND ad NOT LIKE 'Alt Kategori: %'
                          ORDER BY kategori_sira ASC, alt_kategori_sira ASC, id DESC
                          LIMIT ? OFFSET ?");
    $stmt->execute([$kategori_filtre, $sayfa_basina, $offset]);
} else {
    $stmt = $pdo->prepare("SELECT * FROM urunler 
                          WHERE stok_durumu = 'var' 
                          AND ad NOT LIKE 'Kategori: %' 
                          AND ad NOT LIKE 'Alt Kategori: %'
                          ORDER BY kategori_sira ASC, alt_kategori_sira ASC, id DESC
                          LIMIT ? OFFSET ?");
    $stmt->execute([$sayfa_basina, $offset]);
}
$urunler = $stmt->fetchAll();

// Sayfalama URL oluşturma fonksiyonu
function buildPageUrl($sayfa_no, $url_params) {
    $params = $url_params;
    if ($sayfa_no > 1) {
        $params['sayfa'] = $sayfa_no;
    }
    return !empty($params) ? '?' . http_build_query($params) : 'index.php';
}
?>
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Müberra Arda - Moda & Aksesuar | muberraarda.com</title>
    <meta name="description" content="Müberra Arda — Eşarp, çanta, takı ve giyimde zarafet. Her detayda şıklık, her anında kalite. muberraarda.com">
    <meta name="keywords" content="müberra arda, eşarp, çanta, takı, giyim, moda, aksesuar, muberraarda">
    <meta name="author" content="Müberra Arda">
    <meta property="og:title" content="Müberra Arda - Moda & Aksesuar">
    <meta property="og:description" content="Eşarp, çanta, takı ve giyimde zarafet. Her detayda şıklık, her anında kalite.">
    <meta property="og:image" content="https://muberraarda.com/logo.png">
    <meta property="og:url" content="https://muberraarda.com">
    <meta property="og:type" content="website">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Müberra Arda - Moda & Aksesuar">
    <meta name="twitter:description" content="Eşarp, çanta, takı ve giyimde zarafet.">
    <meta name="twitter:image" content="https://muberraarda.com/logo.png">
    <link rel="canonical" href="https://muberraarda.com">
    <link rel="icon" type="image/png" href="logo.png">
    <link rel="apple-touch-icon" href="logo.png">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&family=Cormorant+Garamond:wght@300;400;500;600;700&family=Montserrat:wght@200;300;400;500;600;700;800&family=Dancing+Script:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --white-pure: #FFFFFF;
            --white-soft: #FFFFFF;
            --white-cream: #FFFFFF;
            --black-pure: #000000;
            --black-soft: #1A1A1A;
            --gray-light: #E5E5E5;
            --gray-medium: #999999;
            --gray-dark: #666666;
            
            --shadow-soft: 0 2px 20px rgba(0, 0, 0, 0.05);
            --shadow-medium: 0 4px 30px rgba(0, 0, 0, 0.08);
            --shadow-strong: 0 8px 40px rgba(0, 0, 0, 0.12);
        }

        /* ── Loading Screen ── */
        #page-loader {
            position: fixed;
            inset: 0;
            background: #0D0D0D;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0;
            z-index: 9999;
            transition: opacity 0.9s ease, visibility 0.9s ease;
            overflow: hidden;
        }
        #page-loader::before {
            content: '';
            position: absolute;
            width: 700px;
            height: 700px;
            background: radial-gradient(circle, rgba(200,170,110,0.22) 0%, rgba(180,150,80,0.10) 40%, transparent 70%);
            border-radius: 50%;
            animation: glowPulse 3s ease-in-out infinite;
        }
        #page-loader.hide {
            opacity: 0;
            visibility: hidden;
        }
        #page-loader .loader-logo {
            width: 220px;
            height: 220px;
            object-fit: contain;
            animation: loaderLogoIn 1.2s cubic-bezier(0.34,1.56,0.64,1) 0.2s both;
            filter: drop-shadow(0 0 40px rgba(200,170,110,0.9))
                    drop-shadow(0 0 80px rgba(200,170,110,0.5))
                    brightness(1.3) contrast(1.05);
            margin-bottom: 2.2rem;
            position: relative;
            z-index: 1;
        }
        #page-loader .loader-line-top {
            width: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, #C8AA6E, transparent);
            margin-bottom: 1.6rem;
            animation: lineExpand 0.8s ease 0.8s both;
            position: relative;
            z-index: 1;
        }
        #page-loader .loader-name {
            font-family: 'Playfair Display', serif;
            font-size: 2.8rem;
            font-weight: 700;
            color: #F5F0E8;
            letter-spacing: 6px;
            text-transform: uppercase;
            animation: loaderTextIn 0.9s ease 1s both;
            position: relative;
            z-index: 1;
            text-align: center;
        }
        #page-loader .loader-tagline {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.15rem;
            font-style: italic;
            color: #C8AA6E;
            letter-spacing: 3px;
            animation: loaderTextIn 0.9s ease 1.3s both;
            margin-top: 0.8rem;
            position: relative;
            z-index: 1;
            text-align: center;
        }
        #page-loader .loader-line-bottom {
            width: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, #C8AA6E, transparent);
            margin-top: 1.6rem;
            animation: lineExpand 0.8s ease 1.5s both;
            position: relative;
            z-index: 1;
        }
        @keyframes glowPulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.2); opacity: 0.6; }
        }
        @keyframes loaderLogoIn {
            from { opacity: 0; transform: scale(0.5); filter: drop-shadow(0 0 60px rgba(200,170,110,0.8)) brightness(1.5); }
            to   { opacity: 1; transform: scale(1);   filter: drop-shadow(0 0 30px rgba(200,170,110,0.5)) brightness(1.1); }
        }
        @keyframes lineExpand {
            from { width: 0; }
            to   { width: 220px; }
        }
        @keyframes loaderTextIn {
            from { opacity: 0; transform: translateY(20px); letter-spacing: 12px; }
            to   { opacity: 1; transform: translateY(0);    }
        }

        /* ── Hero Banner ── */
        .hero-banner {
            position: relative;
            width: 100%;
            min-height: 0;
            background: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border-bottom: 3px solid #D4A017;
        }
        .hero-banner::before { display: none; }
        .hero-banner::after  { display: none; }
        /* Yan dekor çizgileri */
        .hero-deco-left, .hero-deco-right {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 120px;
            height: 2px;
            background: linear-gradient(90deg, transparent, #D4A017);
            opacity: 0.7;
        }
        .hero-deco-left { left: 5%; }
        .hero-deco-right { right: 5%; transform: translateY(-50%) scaleX(-1); }

        .hero-content {
            position: relative;
            z-index: 2;
            text-align: center;
            padding: 0.6rem 2rem 1rem;
            animation: heroReveal 1s ease 0.3s both;
        }
        .hero-logo {
            width: 320px;
            object-fit: contain;
            margin-bottom: 0.3rem;
            filter: drop-shadow(0 4px 18px rgba(100,70,30,0.12));
            transition: transform 0.4s ease;
        }
        .hero-logo:hover { transform: scale(1.03); }
        .hero-eyebrow {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.75rem;
            letter-spacing: 5px;
            color: #B8860B;
            font-weight: 800;
            text-transform: uppercase;
            margin-bottom: 0.4rem;
        }
        .hero-title {
            font-family: 'Playfair Display', serif;
            font-size: clamp(1.9rem, 4vw, 3rem);
            font-weight: 800;
            color: #000000;
            letter-spacing: 2px;
            line-height: 1.1;
            margin-bottom: 0.3rem;
        }
        .hero-divider {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            margin: 0.8rem auto;
        }
        .hero-divider-line {
            width: 60px;
            height: 2px;
            background: linear-gradient(90deg, transparent, #D4A017);
        }
        .hero-divider-line:last-child { transform: scaleX(-1); }
        .hero-divider-diamond {
            width: 7px;
            height: 7px;
            background: #D4A017;
            transform: rotate(45deg);
        }
        .hero-tagline {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.15rem;
            font-style: italic;
            font-weight: 700;
            color: #000000;
            letter-spacing: 1.5px;
            margin-bottom: 1.2rem;
        }
        .hero-cta {
            display: inline-block;
            padding: 0.85rem 2.6rem;
            border: 2px solid #0D0D0D;
            color: #0D0D0D;
            background: transparent;
            font-family: 'Montserrat', sans-serif;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 3.5px;
            text-transform: uppercase;
            text-decoration: none;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        .hero-cta::before {
            content: '';
            position: absolute;
            inset: 0;
            background: #D4A017;
            transform: translateY(101%);
            transition: transform 0.3s ease;
            z-index: -1;
        }
        .hero-cta:hover { color: #0D0D0D; border-color: #D4A017; }
        .hero-cta:hover::before { transform: translateY(0); }

        @keyframes heroReveal {
            from { opacity: 0; transform: translateY(24px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(-20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        @keyframes shimmer {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        @keyframes logoEntrance {
            0% {
                opacity: 0;
                transform: scale(3) rotate(0deg);
                filter: blur(20px);
            }
            20% {
                opacity: 1;
                transform: scale(2.5) rotate(0deg);
                filter: blur(10px);
            }
            40% {
                transform: scale(2) rotate(0deg);
                filter: blur(5px);
            }
            60% {
                transform: scale(1.5) rotate(0deg);
                filter: blur(2px);
            }
            80% {
                transform: scale(1.1) rotate(0deg);
                filter: blur(0px);
            }
            100% {
                opacity: 1;
                transform: scale(1) rotate(0deg);
                filter: blur(0px);
            }
        }

        @keyframes logoTextEntrance {
            0% {
                opacity: 0;
                transform: translateX(-30px);
            }
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        body {
            font-family: 'Montserrat', sans-serif;
            color: #1A1A1A;
            background: #F5F5F5;
            overflow-x: hidden;
            line-height: 1.7;
            -webkit-font-smoothing: antialiased;
        }

        /* Header */
        .header {
            background: #0D0D0D;
            border-bottom: 2px solid #D4A017;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 20px rgba(0,0,0,0.4);
            animation: slideDown 0.6s ease;
        }

        .nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.8rem 4%;
            max-width: 1600px;
            margin: 0 auto;
            gap: 1rem;
        }

        /* Sol: Logo + Marka adı & tagline */
        .logo-compact {
            display: flex;
            align-items: center;
            gap: 1rem;
            text-decoration: none;
            flex-shrink: 0;
        }

        .logo-compact img {
            height: 68px;
            width: auto;
            object-fit: contain;
            transition: transform 0.35s ease;
            filter: invert(1) drop-shadow(0 2px 8px rgba(212,160,23,0.4));
            animation: logoEntrance 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s backwards;
        }

        .logo-compact:hover img {
            transform: scale(1.06);
        }

        .logo-text-group {
            display: flex;
            flex-direction: column;
            gap: 0.18rem;
        }

        .logo-name {
            font-family: 'Playfair Display', serif;
            font-size: 1.25rem;
            font-weight: 700;
            color: #FFFFFF;
            letter-spacing: 0.6px;
            line-height: 1.2;
            animation: logoTextEntrance 0.7s ease 0.4s backwards;
        }

        .logo-tagline {
            font-family: 'Cormorant Garamond', serif;
            font-size: 0.88rem;
            font-style: italic;
            color: #D4A017;
            letter-spacing: 1.2px;
            font-weight: 500;
            line-height: 1.3;
            animation: logoTextEntrance 0.7s ease 0.55s backwards;
        }

        /* Sağ: Sepet */
        .nav-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex-shrink: 0;
        }

        .cart-btn {
            background: #D4A017;
            color: #0D0D0D;
            border: none;
            padding: 0.6rem 1.4rem;
            border-radius: 50px;
            cursor: pointer;
            font-weight: 700;
            font-size: 0.85rem;
            transition: all 0.25s ease;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            position: relative;
            animation: slideDown 0.6s ease 0.3s backwards;
            white-space: nowrap;
        }

        .cart-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 18px rgba(212,160,23,0.5);
            background: #E8B420;
        }

        .cart-count {
            position: absolute;
            top: -6px;
            right: -6px;
            background: #0D0D0D;
            color: #D4A017;
            border: 2px solid #FFFFFF;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.62rem;
            font-weight: 700;
        }

        /* Hero alanı kaldırıldı, header'a entegre edildi */
        .hero { display: none; }

        .mobile-break { display: none; }

        /* Container */
        .container {
            max-width: 1600px;
            margin: 0 auto;
            padding: 1.5rem 5% 2rem;
            animation: fadeInUp 0.8s ease 0.5s backwards;
        }

        .section-title {
            text-align: center;
            margin-bottom: 1.5rem;
        }

        .section-title h2 {
            font-family: 'Playfair Display', serif;
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--black-pure);
            margin-bottom: 0.5rem;
            position: relative;
            display: inline-block;
        }
        
        .category-btn[href*="en_yeniler"] {
            background: linear-gradient(135deg, #FF6B6B, #FF8E53) !important;
            color: white !important;
            border: none !important;
            font-weight: 700;
        }
        
        .category-btn[href*="en_yeniler"]:hover,
        .category-btn[href*="en_yeniler"].active {
            background: linear-gradient(135deg, #FF5252, #FF7043) !important;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
        }

        .section-title h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 2px;
            background: var(--black-pure);
        }

        .section-title .subtitle {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.2rem;
            color: var(--gray-dark);
            font-style: italic;
            margin-top: 1.5rem;
        }

        /* Categories */
        .categories {
            display: flex;
            gap: 1rem;
            margin-bottom: 3rem;
            flex-wrap: wrap;
            justify-content: center;
        }

        .category-btn {
            background: #FFFFFF;
            border: 1.5px solid #0D0D0D;
            padding: 0.6rem 1.6rem;
            border-radius: 50px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.25s ease;
            color: #0D0D0D;
            text-decoration: none;
            font-size: 0.85rem;
            letter-spacing: 0.4px;
        }

        .category-btn:hover,
        .category-btn.active {
            background: #D4A017;
            color: #0D0D0D;
            border-color: #D4A017;
            transform: translateY(-1px);
            box-shadow: 0 4px 14px rgba(212,160,23,0.35);
        }

        /* Mobile Category */
        .mobile-cat-btn {
            display: none;
            width: 100%;
            padding: 1rem 1.5rem;
            background: var(--black-pure);
            color: var(--white-pure);
            border: none;
            border-radius: 10px;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            margin-bottom: 2rem;
            gap: 0.5rem;
            align-items: center;
            justify-content: center;
        }

        .category-drawer {
            position: fixed;
            top: 0;
            left: 0;
            width: 85%;
            max-width: 350px;
            height: 100vh;
            background: #FFFFFF;
            z-index: 10001;
            transform: translateX(-100%);
            transition: transform 0.3s ease;
            box-shadow: var(--shadow-strong);
            display: flex;
            flex-direction: column;
        }

        .category-drawer.open {
            transform: translateX(0);
        }

        .drawer-header {
            background: var(--black-pure);
            color: var(--white-pure);
            padding: 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .drawer-header h2 {
            font-size: 1.3rem;
            font-weight: 700;
        }

        .drawer-close {
            background: transparent;
            border: none;
            color: var(--white-pure);
            font-size: 2rem;
            cursor: pointer;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .drawer-content {
            flex: 1;
            overflow-y: auto;
            padding: 1rem;
        }

        .drawer-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem;
            margin-bottom: 0.5rem;
            border-radius: 10px;
            text-decoration: none;
            color: var(--black-pure);
            font-weight: 600;
            transition: all 0.3s;
            background: #FFFFFF;
        }

        .drawer-item.active,
        .drawer-item:hover {
            background: var(--black-pure);
            color: var(--white-pure);
        }
        
        .drawer-category-group {
            margin-bottom: 0.5rem;
        }
        
        .drawer-sub-items {
            padding-left: 1.5rem;
            margin-top: 0.3rem;
        }
        
        .drawer-sub-item {
            font-size: 0.85rem;
            padding: 0.8rem 1rem;
            background: var(--white-soft);
        }
        
        .drawer-sub-item.active {
            background: var(--black-pure);
            color: var(--white-pure);
        }

        .drawer-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 10000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .drawer-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        body.drawer-open {
            overflow: hidden;
        }

        /* Products Grid */
        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 2rem;
            margin-bottom: 3rem;
        }

        /* Pagination */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.5rem;
            margin: 3rem 0;
            flex-wrap: wrap;
        }

        .pagination-btn {
            padding: 0.8rem 1.5rem;
            background: var(--white-pure);
            border: 2px solid var(--black-pure);
            border-radius: 50px;
            color: var(--black-pure);
            text-decoration: none;
            font-weight: 600;
            font-size: 0.9rem;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .pagination-btn:hover {
            background: var(--black-pure);
            color: var(--white-pure);
            transform: translateY(-2px);
            box-shadow: var(--shadow-medium);
        }

        .pagination-numbers {
            display: flex;
            gap: 0.5rem;
            align-items: center;
        }

        .pagination-number {
            min-width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--white-pure);
            border: 2px solid var(--gray-light);
            border-radius: 50%;
            color: var(--black-pure);
            text-decoration: none;
            font-weight: 600;
            font-size: 0.9rem;
            transition: all 0.3s ease;
        }

        .pagination-number:hover {
            border-color: var(--black-pure);
            background: var(--black-pure);
            color: var(--white-pure);
            transform: translateY(-2px);
        }

        .pagination-number.active {
            background: var(--black-pure);
            color: var(--white-pure);
            border-color: var(--black-pure);
        }

        .pagination-dots {
            padding: 0 0.5rem;
            color: var(--gray-medium);
            font-weight: 600;
        }

        .product-card {
            background: #FFFFFF;
            border: 1px solid #EAE7E3;
            border-radius: 18px;
            overflow: hidden;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
            transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
            cursor: pointer;
            animation: fadeInUp 0.6s ease backwards;
            display: flex;
            flex-direction: column;
            padding: 10px 10px 0 10px;
        }

        .product-card:nth-child(1) { animation-delay: 0.1s; }
        .product-card:nth-child(2) { animation-delay: 0.2s; }
        .product-card:nth-child(3) { animation-delay: 0.3s; }
        .product-card:nth-child(4) { animation-delay: 0.4s; }
        .product-card:nth-child(5) { animation-delay: 0.5s; }
        .product-card:nth-child(6) { animation-delay: 0.6s; }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
            border-color: #BFB8B0;
        }

        .product-image-wrapper {
            position: relative;
            overflow: hidden;
            height: 265px;
            background: #F2EFE9;
            border-radius: 12px;
        }

        .product-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center center;
            transition: transform 0.5s ease;
            display: block;
        }

        .product-card:hover .product-image {
            transform: scale(1.07);
        }

        .product-badge {
            position: absolute;
            top: 15px;
            right: 15px;
            background: var(--black-pure);
            color: var(--white-pure);
            padding: 0.5rem 1rem;
            border-radius: 50px;
            font-weight: 700;
            font-size: 0.7rem;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .product-info {
            padding: 1.3rem;
        }

        .product-category {
            color: var(--gray-medium);
            font-size: 0.8rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 0.5rem;
        }

        .product-name {
            font-family: 'Playfair Display', serif;
            font-size: 1.4rem;
            margin-bottom: 0.7rem;
            font-weight: 600;
            color: var(--black-pure);
            line-height: 1.3;
        }

        .product-description {
            color: var(--gray-dark);
            font-size: 0.85rem;
            margin-bottom: 1.2rem;
            line-height: 1.6;
            min-height: 40px;
        }

        .product-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 1.2rem;
            border-top: 1px solid var(--gray-light);
        }

        .product-price {
            font-size: 1.7rem;
            font-weight: 700;
            color: var(--black-pure);
        }

        .add-to-cart {
            background: #0D0D0D;
            color: #FFFFFF;
            border: none;
            padding: 0.65rem 1.4rem;
            border-radius: 50px;
            cursor: pointer;
            font-weight: 700;
            transition: all 0.25s ease;
            font-size: 0.82rem;
            letter-spacing: 0.3px;
        }

        .add-to-cart:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(212,160,23,0.45);
            background: #D4A017;
            color: #0D0D0D;
        }

        /* Modal */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 2000;
            animation: fadeIn 0.3s ease;
        }

        .modal-content {
            background: #FFFFFF;
            max-width: 600px;
            margin: 3% auto;
            padding: 2.5rem;
            border-radius: 20px;
            position: relative;
            animation: fadeInUp 0.4s ease;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: var(--shadow-strong);
        }

        .close-modal {
            position: absolute;
            right: 1.5rem;
            top: 1.5rem;
            font-size: 2rem;
            cursor: pointer;
            color: var(--black-pure);
            transition: all 0.3s ease;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: var(--gray-light);
        }

        .close-modal:hover {
            transform: rotate(90deg);
            background: var(--black-pure);
            color: var(--white-pure);
        }

        .modal h2 {
            font-family: 'Playfair Display', serif;
            font-size: 2.2rem;
            margin-bottom: 2rem;
            color: var(--black-pure);
            text-align: center;
        }

        .cart-item {
            display: flex;
            gap: 1.5rem;
            padding: 1.5rem;
            border-bottom: 1px solid var(--gray-light);
            align-items: center;
            transition: all 0.3s;
            border-radius: 10px;
            margin-bottom: 1rem;
        }

        .cart-item:hover {
            background: #FFFFFF;
        }

        .cart-item-image {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 10px;
            border: 1px solid var(--gray-light);
        }

        .cart-item-info {
            flex: 1;
        }

        .cart-item-name {
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--black-pure);
            font-size: 1rem;
        }

        .cart-item-price {
            color: var(--gray-dark);
            font-weight: 600;
            font-size: 1rem;
        }

        .cart-item-remove {
            background: var(--black-pure);
            color: var(--white-pure);
            border: none;
            padding: 0.6rem 1.2rem;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 600;
            font-size: 0.85rem;
        }

        .cart-item-remove:hover {
            transform: scale(1.05);
            background: var(--black-soft);
        }

        .cart-total {
            padding: 2rem 1rem;
            font-size: 1.8rem;
            font-weight: 700;
            text-align: right;
            color: var(--black-pure);
            border-top: 2px solid var(--black-pure);
            margin-top: 1.5rem;
        }

        .checkout-btn {
            width: 100%;
            background: var(--black-pure);
            color: var(--white-pure);
            border: none;
            padding: 1.3rem;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 1.5rem;
        }

        .checkout-btn:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-medium);
            background: var(--black-soft);
        }

        .empty-cart {
            text-align: center;
            padding: 4rem 1rem;
            color: var(--gray-medium);
        }

        .empty-cart::before {
            content: '🛍️';
            display: block;
            font-size: 5rem;
            margin-bottom: 1rem;
            opacity: 0.5;
        }

        /* Footer */
        .footer {
            background: #0D0D0D;
            border-top: 3px solid #D4A017;
            color: #FFFFFF;
            text-align: center;
            padding: 2.5rem 2rem;
            margin-top: 4rem;
        }

        .footer-logo {
            margin-bottom: 1.2rem;
        }

        .footer-logo img {
            height: 55px;
            opacity: 0.9;
            object-fit: contain;
            filter: invert(1);
        }

        .footer-domain {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.1rem;
            letter-spacing: 2px;
            margin: 1.5rem 0;
            font-weight: 600;
            color: #D4A017;
        }

        .footer a {
            color: #D4A017;
            text-decoration: none;
            transition: all 0.3s;
        }

        .footer a:hover {
            color: #FFFFFF;
        }

        .footer p {
            margin-top: 1rem;
            opacity: 0.65;
            color: #CCCCCC;
        }

        /* ── Hamburger Butonu ── */
        .hamburger-btn {
            display: none;
            flex-direction: column;
            justify-content: center;
            gap: 5px;
            background: none;
            border: none;
            cursor: pointer;
            padding: 6px;
            flex-shrink: 0;
        }
        .hamburger-btn span {
            display: block;
            width: 24px;
            height: 2px;
            background: #D4A017;
            border-radius: 2px;
            transition: all 0.3s ease;
        }

        /* ── Mobil Landing Banner ── */
        .mobile-landing-banner {
            display: none; /* masaüstünde gizli */
            position: relative;
            width: 100%;
            height: calc(100dvh - 58px); /* header yüksekliği düşüldü */
            overflow: hidden;
        }
        .mlb-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center top;
            display: block;
        }
        .mlb-placeholder {
            width: 100%;
            height: 100%;
            background: linear-gradient(160deg, #0D0D0D 0%, #1a1208 60%, #2a1c0a 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1.5rem;
        }
        .mlb-logo {
            width: 180px;
            filter: invert(1) drop-shadow(0 0 30px rgba(212,160,23,0.6));
        }
        .mlb-placeholder-text { text-align: center; }
        .mlb-eyebrow {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.7rem;
            letter-spacing: 5px;
            color: #D4A017;
            font-weight: 700;
            text-transform: uppercase;
            margin-bottom: 0.6rem;
        }
        .mlb-title {
            font-family: 'Playfair Display', serif;
            font-size: 2.4rem;
            font-weight: 800;
            color: #FFFFFF;
            letter-spacing: 2px;
        }
        .mlb-sub {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.1rem;
            font-style: italic;
            color: #D4A017;
            margin-top: 0.4rem;
            letter-spacing: 1.5px;
        }
        @keyframes slideFromLeft {
            from { opacity: 0; transform: translateX(-40px); }
            to   { opacity: 1; transform: translateX(0); }
        }

        /* Sol taraf yazı alanı */
        .mlb-text-left {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 62%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 6rem 1.2rem 2rem 1.5rem;
            background: linear-gradient(90deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.28) 75%, transparent 100%);
        }
        .mlb-brand {
            font-family: 'Playfair Display', serif;
            font-size: 2rem;
            font-weight: 800;
            color: #FFFFFF;
            letter-spacing: 1px;
            line-height: 1.1;
            white-space: nowrap;
            text-shadow: 0 2px 14px rgba(0,0,0,0.6);
            margin-bottom: 0.6rem;
            animation: slideFromLeft 0.7s ease 0.1s both;
        }
        .mlb-gold-line {
            width: 48px;
            height: 2px;
            background: #D4A017;
            margin-bottom: 0.7rem;
            animation: slideFromLeft 0.7s ease 0.3s both;
        }
        .mlb-slogan1 {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.25rem;
            font-style: italic;
            font-weight: 700;
            color: #FFFFFF;
            white-space: nowrap;
            text-shadow: 0 1px 10px rgba(0,0,0,0.6);
            line-height: 1.3;
            margin-bottom: 0.4rem;
            animation: slideFromLeft 0.7s ease 0.5s both;
        }
        .mlb-slogan2 {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.2rem;
            font-style: italic;
            font-weight: 800;
            color: #D4A017;
            text-shadow: 0 1px 12px rgba(0,0,0,0.55);
            line-height: 1.3;
            animation: slideFromLeft 0.7s ease 0.7s both;
        }
        /* Alt CTA butonu */
        .mlb-overlay {
            position: absolute;
            bottom: 2rem;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
        }
        .mlb-cta {
            background: #D4A017;
            color: #0D0D0D;
            font-family: 'Montserrat', sans-serif;
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 3px;
            text-transform: uppercase;
            text-decoration: none;
            padding: 0.9rem 2.2rem;
            border-radius: 50px;
            box-shadow: 0 6px 24px rgba(0,0,0,0.4);
            transition: all 0.25s ease;
        }
        .mlb-cta:hover { background: #E8B420; transform: translateY(-2px); }

        /* Responsive */
        @media (max-width: 768px) {
            /* Loading */
            #page-loader .loader-logo { width: 160px; height: 160px; }
            #page-loader .loader-name { font-size: 2rem; letter-spacing: 4px; }
            #page-loader .loader-tagline { font-size: 1rem; letter-spacing: 2px; }

            /* Hero masaüstü banner — mobilde gizle */
            .hero-banner { display: none; }

            /* Mobil landing banner — göster */
            .mobile-landing-banner { display: block; }

            /* Hamburger — göster */
            .hamburger-btn { display: flex; }

            /* Filtre yokken ürün alanını gizle */
            .mobile-hide-products { display: none !important; }

            /* Header — logo sol, sepet sağ, taşma yok */
            .nav {
                padding: 0.5rem 3%;
                gap: 0.4rem;
                min-width: 0;
            }
            .logo-compact {
                gap: 0.5rem;
                min-width: 0;
                flex: 1;
                overflow: hidden;
            }
            .logo-compact img { height: 38px; flex-shrink: 0; }
            .logo-text-group { min-width: 0; overflow: hidden; }
            .logo-name { font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
            .logo-tagline { display: none; }  /* tagline header'da gizle, hero'da var zaten */

            /* Sepet butonu — sadece ikon + sayı, metin yok */
            .cart-btn {
                padding: 0.5rem 0.75rem;
                font-size: 0;          /* metni gizle */
                flex-shrink: 0;
                min-width: 42px;
                justify-content: center;
            }
            .cart-btn::before { content: '🛍️'; font-size: 1.1rem; }
            .cart-count {
                width: 18px;
                height: 18px;
                font-size: 0.6rem;
                top: -4px;
                right: -4px;
            }

            /* Ürün grid */
            .products-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 0.75rem;
            }

            /* Ürün kartı */
            .product-card {
                border-radius: 14px;
                display: flex;
                flex-direction: column;
                padding: 7px 7px 0 7px;
            }
            .product-image-wrapper {
                height: 175px;
                border-radius: 10px;
                overflow: hidden;
                background: #F2EFE9;
            }
            .product-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center center;
                display: block;
            }
            .product-info {
                padding: 0.7rem 0.65rem 0.75rem;
                display: flex;
                flex-direction: column;
                flex: 1;
            }
            .product-category { font-size: 0.62rem; margin-bottom: 0.25rem; }
            .product-name { font-size: 0.85rem; margin-bottom: auto; line-height: 1.25; padding-bottom: 0.4rem; }
            .product-description { display: none; }
            .product-footer {
                flex-direction: column;
                align-items: stretch;
                gap: 0.4rem;
                padding-top: 0.6rem;
                margin-top: 0.3rem;
            }
            .product-price { font-size: 1.05rem; font-weight: 700; text-align: left; }
            .add-to-cart {
                width: 100%;
                padding: 0.55rem 0.4rem;
                font-size: 0.73rem;
                font-weight: 700;
                border-radius: 7px;
                letter-spacing: 0.2px;
                display: block;
            }

            /* Pagination */
            .pagination { gap: 0.3rem; margin: 2rem 0; }
            .pagination-btn { padding: 0.6rem 1rem; font-size: 0.82rem; }
            .pagination-number { min-width: 34px; height: 34px; font-size: 0.82rem; }
            .pagination-numbers { gap: 0.3rem; }

            .mobile-break { display: none; }
            .categories { display: none !important; }
            .mobile-cat-btn { display: flex; }
            .section-title { margin-bottom: 1rem; }
            .section-title h2 { font-size: 1.8rem; }

            .container {
                padding: 2rem 4%;
            }
        }

        @media (min-width: 769px) {
            .mobile-cat-btn,
            .hamburger-btn,
            .mobile-landing-banner,
            .category-drawer,
            .drawer-overlay {
                display: none !important;
            }
            .mobile-hide-products {
                display: block !important;
            }
        }

        @keyframes popIn {
            0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
            50% { transform: translate(-50%, -50%) scale(1.1); }
            100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
        }

        @keyframes popOut {
            0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
        }

        /* ── Beden Seçici Modal ── */
        #beden-modal {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.7);
            z-index: 8000;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.2s ease;
        }
        #beden-modal.open { display: flex; }
        .beden-modal-box {
            background: #fff;
            border-radius: 18px;
            padding: 2rem 1.8rem 1.6rem;
            max-width: 340px;
            width: 90%;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            animation: fadeInUp 0.3s ease;
        }
        .beden-modal-title {
            font-family: 'Playfair Display', serif;
            font-size: 1.2rem;
            font-weight: 700;
            color: #0D0D0D;
            margin-bottom: 0.3rem;
        }
        .beden-modal-sub {
            font-size: 0.8rem;
            color: #888;
            margin-bottom: 1.2rem;
        }
        .beden-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.5rem;
            margin-bottom: 1.3rem;
        }
        .beden-btn {
            border: 2px solid #E0E0E0;
            background: #fff;
            border-radius: 8px;
            padding: 0.65rem 0.3rem;
            font-family: 'Montserrat', sans-serif;
            font-size: 0.78rem;
            font-weight: 700;
            color: #333;
            cursor: pointer;
            transition: all 0.18s ease;
            text-align: center;
        }
        .beden-btn.standart { grid-column: span 4; font-size: 0.82rem; background: #F9F5EF; border-color: #C8A96E; color: #7A5C20; }
        .beden-btn:not(:disabled):hover, .beden-btn.selected { background: #0D0D0D; color: #fff; border-color: #0D0D0D; }
        .beden-btn.standart:not(:disabled):hover, .beden-btn.standart.selected { background: #D4A017; color: #0D0D0D; border-color: #D4A017; }
        .beden-btn:disabled { text-decoration: line-through; opacity: 0.3; cursor: not-allowed; background: #f5f5f5; border-color: #ddd; color: #999; }
        .beden-confirm-btn {
            width: 100%;
            background: #0D0D0D;
            color: #fff;
            border: none;
            border-radius: 50px;
            padding: 0.85rem;
            font-family: 'Montserrat', sans-serif;
            font-size: 0.88rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s;
            margin-bottom: 0.5rem;
        }
        .beden-confirm-btn:hover { background: #D4A017; color: #0D0D0D; }
        .beden-cancel-btn {
            width: 100%;
            background: none;
            border: none;
            color: #999;
            font-size: 0.82rem;
            cursor: pointer;
            padding: 0.4rem;
        }

        /* ── Lightbox ── */
        .product-image-wrapper { cursor: zoom-in; }
        .img-zoom-hint {
            position: absolute;
            bottom: 10px;
            right: 10px;
            background: rgba(0,0,0,0.45);
            color: #fff;
            border-radius: 50%;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
            opacity: 0;
            transition: opacity 0.2s;
            pointer-events: none;
        }
        .product-image-wrapper:hover .img-zoom-hint { opacity: 1; }

        #lightbox {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.92);
            z-index: 9000;
            align-items: center;
            justify-content: center;
            cursor: zoom-out;
            animation: fadeIn 0.25s ease;
        }
        #lightbox.open { display: flex; }
        #lightbox img {
            max-width: 92vw;
            max-height: 88vh;
            object-fit: contain;
            border-radius: 10px;
            box-shadow: 0 20px 80px rgba(0,0,0,0.6);
            animation: lbZoomIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
            pointer-events: none;
        }
        #lightbox-caption {
            position: absolute;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            color: rgba(255,255,255,0.75);
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.05rem;
            font-style: italic;
            letter-spacing: 1px;
            white-space: nowrap;
        }
        #lightbox-close {
            position: absolute;
            top: 1.2rem;
            right: 1.4rem;
            color: rgba(255,255,255,0.7);
            font-size: 2rem;
            cursor: pointer;
            line-height: 1;
            transition: color 0.2s, transform 0.2s;
        }
        #lightbox-close:hover { color: #fff; transform: rotate(90deg); }
        @keyframes lbZoomIn {
            from { opacity: 0; transform: scale(0.82); }
            to   { opacity: 1; transform: scale(1); }
        }
    </style>
</head>
<body>
    <!-- Beden Seçici Modal -->
    <div id="beden-modal">
        <div class="beden-modal-box">
            <div class="beden-modal-title" id="beden-modal-urun-adi"></div>
            <div class="beden-modal-sub">Beden seçiniz</div>
            <div class="beden-grid">
                <button class="beden-btn standart" data-beden="Standart Beden (36-42)" onclick="bedenSec(this)">Standart (36–42)</button>
                <button class="beden-btn standart" data-beden="Standart Beden (38-46)" onclick="bedenSec(this)">Standart (38–46)</button>
                <button class="beden-btn" data-beden="S" onclick="bedenSec(this)">S</button>
                <button class="beden-btn" data-beden="M" onclick="bedenSec(this)">M</button>
                <button class="beden-btn" data-beden="L" onclick="bedenSec(this)">L</button>
                <button class="beden-btn" data-beden="XL" onclick="bedenSec(this)">XL</button>
                <button class="beden-btn" data-beden="XXL" onclick="bedenSec(this)">XXL</button>
                <button class="beden-btn" data-beden="XXXL" onclick="bedenSec(this)">XXXL</button>
            </div>
            <button class="beden-confirm-btn" onclick="bedenOnayla()">Sepete Ekle</button>
            <button class="beden-cancel-btn" onclick="bedenIptal()">İptal</button>
        </div>
    </div>

    <!-- Lightbox -->
    <div id="lightbox" onclick="closeLightbox()">
        <span id="lightbox-close" onclick="closeLightbox()">×</span>
        <img id="lightbox-img" src="" alt="">
        <div id="lightbox-caption"></div>
    </div>

    <!-- Loading Screen -->
    <div id="page-loader">
        <img src="logo.png" alt="Müberra Arda" class="loader-logo">
        <div class="loader-line-top"></div>
        <span class="loader-name">Müberra Arda</span>
        <span class="loader-tagline">Her Detayda Zarafet &nbsp;·&nbsp; Her Anında Şıklık</span>
        <div class="loader-line-bottom"></div>
    </div>

    <!-- Header: Logo + Marka + Tagline + Sepet -->
    <header class="header">
        <nav class="nav">
            <!-- Hamburger (sadece mobilde) -->
            <button class="hamburger-btn" onclick="toggleDrawer()" aria-label="Menü">
                <span></span><span></span><span></span>
            </button>

            <a href="index.php" class="logo-compact">
                <img src="logo.png" alt="Müberra Arda">
                <div class="logo-text-group">
                    <span class="logo-name">Müberra Arda</span>
                    <span class="logo-tagline">Her Detayda Zarafet &nbsp;·&nbsp; Her Anında Şıklık</span>
                </div>
            </a>
            <div class="nav-actions">
                <button class="cart-btn" onclick="toggleCart()">
                    🛍️ Sepet
                    <span class="cart-count" id="cartCount">0</span>
                </button>
            </div>
        </nav>
    </header>

    <!-- Hero Banner -->
    <section class="hero-banner">
        <div class="hero-deco-left"></div>
        <div class="hero-deco-right"></div>
        <div class="hero-content">
            <img src="logo.png" alt="Müberra Arda" class="hero-logo">
            <div class="hero-eyebrow">Moda &nbsp;·&nbsp; Zarafet &nbsp;·&nbsp; Şıklık</div>
            <h1 class="hero-title">Müberra Arda</h1>
            <div class="hero-divider">
                <div class="hero-divider-line"></div>
                <div class="hero-divider-diamond"></div>
                <div class="hero-divider-line"></div>
            </div>
            <div class="hero-tagline">Her Detayda Zarafet &nbsp;·&nbsp; Her Anında Şıklık</div>
            <a href="#koleksiyon" class="hero-cta">Koleksiyonu Keşfet</a>
        </div>
    </section>

    <?php if (!$kategori_filtre && !$alt_kategori_filtre && !$en_yeniler): ?>
    <!-- Mobil Landing Banner — filtre yokken göster -->
    <div class="mobile-landing-banner" id="mobileLanding">
        <?php if (file_exists('banner-mobile.jpg')): ?>
            <img src="banner-mobile.jpg" alt="Müberra Arda Koleksiyon" class="mlb-img">
        <?php elseif (file_exists('banner-mobile.png')): ?>
            <img src="banner-mobile.png" alt="Müberra Arda Koleksiyon" class="mlb-img">
        <?php else: ?>
            <!-- Placeholder: banner resmi yüklenene kadar -->
            <div class="mlb-placeholder">
                <img src="logo.png" alt="Müberra Arda" class="mlb-logo">
                <div class="mlb-placeholder-text">
                    <div class="mlb-eyebrow">Yeni Koleksiyon</div>
                    <div class="mlb-title">Müberra Arda</div>
                    <div class="mlb-sub">Her Detayda Zarafet</div>
                </div>
            </div>
        <?php endif; ?>
        <!-- Sol yazılar -->
        <div class="mlb-text-left">
            <div class="mlb-brand">Müberra Arda</div>
            <div class="mlb-gold-line"></div>
            <div class="mlb-slogan1">Her Detayda Zarafet</div>
            <div class="mlb-slogan2">Her Anında Şıklık</div>
        </div>

        <!-- Alt buton -->
        <div class="mlb-overlay">
            <a href="javascript:void(0)" class="mlb-cta" onclick="toggleDrawer()">
                &#9776;&nbsp; Koleksiyonu Keşfet
            </a>
        </div>
    </div>
    <?php endif; ?>

    <!-- Category Drawer — body seviyesinde, her zaman erişilebilir -->
    <div class="category-drawer" id="categoryDrawer">
        <div class="drawer-header">
            <h2>Kategoriler</h2>
            <button class="drawer-close" onclick="toggleDrawer()">×</button>
        </div>
        <div class="drawer-content">
            <a href="index.php" class="drawer-item <?php echo !$kategori_filtre && !$en_yeniler ? 'active' : ''; ?>" data-drawer-close>
                <span>✨</span>
                <span>Tüm Ürünler</span>
            </a>
            <a href="?en_yeniler=1" class="drawer-item <?php echo $en_yeniler ? 'active' : ''; ?>" data-drawer-close style="background: linear-gradient(135deg, #FF6B6B, #FF8E53); color: white;">
                <span>⭐</span>
                <span>En Yeniler</span>
            </a>
            <?php foreach ($kategoriler as $kat):
                $alt_kats = $alt_kategoriler[$kat['kategori']] ?? [];
            ?>
                <div class="drawer-category-group">
                    <a href="?kategori=<?php echo urlencode($kat['kategori']); ?>"
                       class="drawer-item <?php echo $kategori_filtre === $kat['kategori'] && !$alt_kategori_filtre ? 'active' : ''; ?>"
                       data-drawer-close>
                        <span>◆</span>
                        <span><?php echo guvenliCikti($kat['kategori']); ?></span>
                    </a>
                    <?php if (!empty($alt_kats)): ?>
                        <div class="drawer-sub-items">
                            <?php foreach ($alt_kats as $alt_kat): ?>
                                <a href="?kategori=<?php echo urlencode($kat['kategori']); ?>&alt_kategori=<?php echo urlencode($alt_kat['alt_kategori']); ?>"
                                   class="drawer-item drawer-sub-item <?php echo $kategori_filtre === $kat['kategori'] && $alt_kategori_filtre === $alt_kat['alt_kategori'] ? 'active' : ''; ?>"
                                   data-drawer-close>
                                    <span>▸</span>
                                    <span><?php echo guvenliCikti($alt_kat['alt_kategori']); ?></span>
                                </a>
                            <?php endforeach; ?>
                        </div>
                    <?php endif; ?>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
    <div class="drawer-overlay" id="drawerOverlay" onclick="toggleDrawer()"></div>

    <!-- Mobile Category Button -->
    <div class="container<?php echo (!$kategori_filtre && !$alt_kategori_filtre && !$en_yeniler) ? ' mobile-hide-products' : ''; ?>" id="koleksiyon">
        <button class="mobile-cat-btn" onclick="toggleDrawer()">
            <span>✨</span>
            <span>Kategoriler</span>
        </button>

        <div class="section-title">
            <h2>
                <?php 
                if ($en_yeniler) {
                    echo '⭐ En Yeniler';
                } elseif ($kategori_filtre && $alt_kategori_filtre) {
                    echo guvenliCikti($kategori_filtre) . ' - ' . guvenliCikti($alt_kategori_filtre);
                } elseif ($kategori_filtre) {
                    echo guvenliCikti($kategori_filtre);
                } else {
                    echo 'Koleksiyonlarımız';
                }
                ?>
            </h2>
            <p class="subtitle">
                <?php 
                if ($en_yeniler) {
                    echo count($urunler) . ' yeni ürün';
                } elseif ($kategori_filtre || $alt_kategori_filtre) {
                    echo count($urunler) . ' ürün bulundu';
                } else {
                    echo 'Zarafeti keşfedin';
                }
                ?>
            </p>
        </div>

        <div class="categories">
            <a href="index.php" class="category-btn <?php echo !$kategori_filtre && !$en_yeniler ? 'active' : ''; ?>">
                Tüm Ürünler
            </a>
            <a href="?en_yeniler=1" class="category-btn <?php echo $en_yeniler ? 'active' : ''; ?>" style="background: linear-gradient(135deg, #FF6B6B, #FF8E53); color: white; border: none;">
                ⭐ En Yeniler
            </a>
            <?php foreach ($kategoriler as $kat): 
                $alt_kats = $alt_kategoriler[$kat['kategori']] ?? [];
            ?>
                <div style="display: inline-block; position: relative;">
                    <a href="?kategori=<?php echo urlencode($kat['kategori']); ?>" 
                       class="category-btn <?php echo $kategori_filtre === $kat['kategori'] && !$alt_kategori_filtre ? 'active' : ''; ?>">
                        <?php echo guvenliCikti($kat['kategori']); ?>
                    </a>
                    <?php if (!empty($alt_kats)): ?>
                        <div class="sub-categories" style="display: none; position: absolute; top: 100%; left: 0; margin-top: 0.5rem; background: white; border: 1px solid var(--gray-light); border-radius: 10px; padding: 0.5rem; box-shadow: var(--shadow-medium); z-index: 10; min-width: 200px;">
                            <?php foreach ($alt_kats as $alt_kat): ?>
                                <a href="?kategori=<?php echo urlencode($kat['kategori']); ?>&alt_kategori=<?php echo urlencode($alt_kat['alt_kategori']); ?>" 
                                   class="sub-category-btn <?php echo $kategori_filtre === $kat['kategori'] && $alt_kategori_filtre === $alt_kat['alt_kategori'] ? 'active' : ''; ?>"
                                   style="display: block; padding: 0.6rem 1rem; margin: 0.2rem 0; border-radius: 8px; text-decoration: none; color: var(--black-pure); font-size: 0.85rem; transition: all 0.3s; background: var(--white-soft);">
                                    <?php echo guvenliCikti($alt_kat['alt_kategori']); ?>
                                </a>
                            <?php endforeach; ?>
                        </div>
                    <?php endif; ?>
                </div>
            <?php endforeach; ?>
        </div>
        
        <style>
        .category-btn:hover + .sub-categories,
        .sub-categories:hover {
            display: block !important;
        }
        .sub-category-btn:hover {
            background: var(--black-pure) !important;
            color: var(--white-pure) !important;
        }
        .sub-category-btn.active {
            background: var(--black-pure) !important;
            color: var(--white-pure) !important;
        }
        </style>

        <div class="products-grid">
            <?php foreach ($urunler as $urun): ?>
                <div class="product-card">
                    <div class="product-image-wrapper" onclick="openLightbox('<?php echo guvenliCikti($urun['gorsel']); ?>', '<?php echo guvenliCikti($urun['ad']); ?>')">
                        <img src="<?php echo guvenliCikti($urun['gorsel']); ?>"
                             alt="<?php echo guvenliCikti($urun['ad']); ?>"
                             class="product-image">
                        <div class="product-badge">Yeni</div>
                        <div class="img-zoom-hint">🔍</div>
                    </div>
                    <div class="product-info">
                        <div class="product-category"><?php echo guvenliCikti($urun['kategori']); ?></div>
                        <h3 class="product-name"><?php echo guvenliCikti($urun['ad']); ?></h3>
                        <p class="product-description"><?php echo guvenliCikti($urun['aciklama']); ?></p>
                        <div class="product-footer">
                            <div class="product-price"><?php echo formatFiyat($urun['fiyat']); ?></div>
                            <button class="add-to-cart" 
                                    onclick='addToCart(<?php echo json_encode($urun, JSON_UNESCAPED_UNICODE); ?>)'>
                                Sepete Ekle
                            </button>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>

        <!-- Sayfalama -->
        <?php if ($toplam_sayfa > 1): ?>
            <div class="pagination">
                <?php
                // URL parametrelerini hazırla
                $url_params = [];
                if ($kategori_filtre) $url_params['kategori'] = $kategori_filtre;
                if ($alt_kategori_filtre) $url_params['alt_kategori'] = $alt_kategori_filtre;
                if ($en_yeniler) $url_params['en_yeniler'] = 1;
                
                // Önceki sayfa
                if ($sayfa > 1):
                    $onceki_sayfa = $sayfa - 1;
                ?>
                    <a href="<?php echo buildPageUrl($onceki_sayfa, $url_params); ?>" class="pagination-btn pagination-prev">← Önceki</a>
                <?php endif; ?>

                <div class="pagination-numbers">
                    <?php
                    // Sayfa numaralarını göster (maksimum 7 sayfa göster)
                    $baslangic = max(1, $sayfa - 3);
                    $bitis = min($toplam_sayfa, $sayfa + 3);
                    
                    if ($baslangic > 1): ?>
                        <a href="<?php echo buildPageUrl(1, $url_params); ?>" class="pagination-number">1</a>
                        <?php if ($baslangic > 2): ?>
                            <span class="pagination-dots">...</span>
                        <?php endif; ?>
                    <?php endif;
                    
                    for ($i = $baslangic; $i <= $bitis; $i++): ?>
                        <a href="<?php echo buildPageUrl($i, $url_params); ?>" class="pagination-number <?php echo $i == $sayfa ? 'active' : ''; ?>">
                            <?php echo $i; ?>
                        </a>
                    <?php endfor;
                    
                    if ($bitis < $toplam_sayfa): ?>
                        <?php if ($bitis < $toplam_sayfa - 1): ?>
                            <span class="pagination-dots">...</span>
                        <?php endif; ?>
                        <a href="<?php echo buildPageUrl($toplam_sayfa, $url_params); ?>" class="pagination-number"><?php echo $toplam_sayfa; ?></a>
                    <?php endif; ?>
                </div>

                <?php
                // Sonraki sayfa
                if ($sayfa < $toplam_sayfa):
                    $sonraki_sayfa = $sayfa + 1;
                ?>
                    <a href="<?php echo buildPageUrl($sonraki_sayfa, $url_params); ?>" class="pagination-btn pagination-next">Sonraki →</a>
                <?php endif; ?>
            </div>
        <?php endif; ?>
    </div>

    <!-- Cart Modal -->
    <div id="cartModal" class="modal">
        <div class="modal-content">
            <span class="close-modal" onclick="toggleCart()">&times;</span>
            <h2>Sepetim</h2>
            <div id="cartItems"></div>
            <div class="cart-total">
                Toplam: <span id="cartTotal">0,00 ₺</span>
            </div>
            <button class="checkout-btn" onclick="location.href='siparis.php'">Sipariş Ver</button>
        </div>
    </div>

    <footer class="footer">
        <div class="footer-logo">
            <img src="logo.png" alt="Müberra Arda">
        </div>
        <div class="footer-domain">
            <a href="https://muberraarda.com">muberraarda.com</a>
        </div>
        <p>&copy; 2013 <strong>Müberra Arda</strong>. Tüm hakları saklıdır.</p>
        <p style="margin-top:0.5rem; font-size:0.78rem; opacity:0.5; letter-spacing:0.5px;">Site Tasarımı &amp; Yazılım: <strong>ArifARDA Yazılım Hizmetleri</strong></p>
        <p>Moda & Aksesuar</p>
    </footer>

    <script>
        let cart = JSON.parse(localStorage.getItem('cart')) || [];

        // Cart Functions
        // Beden seçici
        var _bedenPendingProduct = null;
        var _selectedBeden = null;

        function addToCart(product) {
            const kat = (product.kategori || '').toUpperCase()
                .replace(/İ/g,'I').replace(/Ğ/g,'G').replace(/Ü/g,'U')
                .replace(/Ş/g,'S').replace(/Ö/g,'O').replace(/Ç/g,'C');
            const isGiyim = kat.includes('GIYIM');

            if (isGiyim && product.beden) {
                _bedenPendingProduct = product;
                _selectedBeden = null;

                // Mevcut bedenler virgülle ayrılmış string
                const mevcutBedenler = product.beden.split(',').map(b => b.trim());

                document.getElementById('beden-modal-urun-adi').textContent = product.ad;

                // Her butonu aktif/pasif yap
                document.querySelectorAll('.beden-btn').forEach(function(btn) {
                    const b = btn.dataset.beden;
                    btn.classList.remove('selected', 'disabled');
                    if (mevcutBedenler.includes(b)) {
                        btn.disabled = false;
                        btn.style.textDecoration = 'none';
                        btn.style.opacity = '1';
                        btn.style.cursor = 'pointer';
                    } else {
                        btn.disabled = true;
                        btn.style.textDecoration = 'line-through';
                        btn.style.opacity = '0.35';
                        btn.style.cursor = 'not-allowed';
                    }
                });

                // Tek beden varsa otomatik seç
                if (mevcutBedenler.length === 1) {
                    const autoBtn = document.querySelector('.beden-btn[data-beden="' + mevcutBedenler[0] + '"]');
                    if (autoBtn) { autoBtn.classList.add('selected'); _selectedBeden = mevcutBedenler[0]; }
                }

                document.getElementById('beden-modal').classList.add('open');
                document.body.style.overflow = 'hidden';
            } else if (isGiyim && !product.beden) {
                // GİYİM ama beden tanımlanmamış — direkt ekle
                _addToCartDirect(product, null);
            } else {
                _addToCartDirect(product, null);
            }
        }

        function bedenSec(btn) {
            document.querySelectorAll('.beden-btn').forEach(b => b.classList.remove('selected'));
            btn.classList.add('selected');
            _selectedBeden = btn.dataset.beden;
        }

        function bedenOnayla() {
            if (!_selectedBeden) {
                alert('Lütfen beden seçiniz.');
                return;
            }
            document.getElementById('beden-modal').classList.remove('open');
            document.body.style.overflow = '';
            _addToCartDirect(_bedenPendingProduct, _selectedBeden);
            _bedenPendingProduct = null;
        }

        function bedenIptal() {
            document.getElementById('beden-modal').classList.remove('open');
            document.body.style.overflow = '';
            _bedenPendingProduct = null;
        }

        function _addToCartDirect(product, beden) {
            const cartKey = beden ? product.id + '_' + beden : product.id;
            const existingItem = cart.find(item => item._cartKey === cartKey);
            if (existingItem) {
                existingItem.quantity = (existingItem.quantity || 1) + 1;
            } else {
                cart.push({...product, quantity: 1, secilen_beden: beden, _cartKey: cartKey});
            }
            localStorage.setItem('cart', JSON.stringify(cart));
            updateCartUI();
            showNotification('✓ Ürün sepete eklendi!' + (beden ? ' (' + beden + ')' : ''));
        }

        function removeFromCart(productId) {
            cart = cart.filter(item => item.id !== productId);
            localStorage.setItem('cart', JSON.stringify(cart));
            updateCartUI();
        }

        function updateCartUI() {
            const cartCount = document.getElementById('cartCount');
            const cartItems = document.getElementById('cartItems');
            const cartTotal = document.getElementById('cartTotal');
            
            const totalItems = cart.reduce((sum, item) => sum + (item.quantity || 1), 0);
            cartCount.textContent = totalItems;
            
            const checkoutBtn = document.querySelector('.checkout-btn');
            if (cart.length === 0) {
                cartItems.innerHTML = '<div class="empty-cart"><p>Sepetiniz boş</p></div>';
                cartTotal.textContent = '0,00 ₺';
                if (checkoutBtn) { checkoutBtn.disabled = true; checkoutBtn.style.opacity = '0.4'; checkoutBtn.style.cursor = 'not-allowed'; }
                return;
            }
            if (checkoutBtn) { checkoutBtn.disabled = false; checkoutBtn.style.opacity = ''; checkoutBtn.style.cursor = ''; }
            
            let html = '';
            let total = 0;
            
            cart.forEach(item => {
                const itemTotal = parseFloat(item.fiyat) * (item.quantity || 1);
                total += itemTotal;
                
                html += `
                    <div class="cart-item">
                        <img src="${item.gorsel}" class="cart-item-image" alt="${item.ad}">
                        <div class="cart-item-info">
                            <div class="cart-item-name">${item.ad}</div>
                            ${item.secilen_beden ? `<div style="font-size:0.75rem;color:#D4A017;font-weight:700;margin-bottom:0.2rem;">Beden: ${item.secilen_beden}</div>` : ''}
                            <div class="cart-item-price">${item.quantity || 1} x ${formatPrice(item.fiyat)}</div>
                        </div>
                        <button class="cart-item-remove" onclick="removeFromCart(${item.id})">Sil</button>
                    </div>
                `;
            });
            
            cartItems.innerHTML = html;
            cartTotal.textContent = formatPrice(total);
        }

        function formatPrice(price) {
            return new Intl.NumberFormat('tr-TR', {
                style: 'currency',
                currency: 'TRY'
            }).format(price);
        }

        function toggleCart() {
            const modal = document.getElementById('cartModal');
            modal.style.display = modal.style.display === 'block' ? 'none' : 'block';
            updateCartUI();
        }

        function toggleDrawer() {
            const drawer = document.getElementById('categoryDrawer');
            const overlay = document.getElementById('drawerOverlay');
            const isOpen = drawer.classList.contains('open');
            
            if (isOpen) {
                drawer.classList.remove('open');
                overlay.classList.remove('show');
                document.body.classList.remove('drawer-open');
            } else {
                drawer.classList.add('open');
                overlay.classList.add('show');
                document.body.classList.add('drawer-open');
            }
        }

        function showNotification(message) {
            const notification = document.createElement('div');
            notification.textContent = message;
            notification.style.cssText = `
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) scale(0);
                background: var(--black-pure);
                color: var(--white-pure);
                padding: 1.2rem 2.5rem;
                border-radius: 50px;
                font-weight: 600;
                z-index: 10000;
                box-shadow: var(--shadow-strong);
                font-size: 1rem;
                animation: popIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
            `;
            document.body.appendChild(notification);
            
            setTimeout(() => {
                notification.style.animation = 'popOut 0.3s ease forwards';
                setTimeout(() => notification.remove(), 300);
            }, 2000);
        }

        // Event Listeners
        window.onclick = function(event) {
            const modal = document.getElementById('cartModal');
            if (event.target === modal) {
                modal.style.display = 'none';
            }
        }

        document.addEventListener('keydown', function(e) {
            const modal = document.getElementById('cartModal');
            const drawer = document.getElementById('categoryDrawer');
            
            if (e.key === 'Escape') {
                if (modal.style.display === 'block') {
                    toggleCart();
                }
                if (drawer && drawer.classList.contains('open')) {
                    toggleDrawer();
                }
            }
        });

        document.addEventListener('DOMContentLoaded', function() {
            const drawerItems = document.querySelectorAll('[data-drawer-close]');
            drawerItems.forEach(item => {
                item.addEventListener('click', function() {
                    toggleDrawer();
                });
            });
        });

        // Sayfa her açılışta en üstten başlasın
        if ('scrollRestoration' in history) history.scrollRestoration = 'manual';
        window.scrollTo(0, 0);

        // Lightbox
        function openLightbox(src, caption) {
            var lb = document.getElementById('lightbox');
            document.getElementById('lightbox-img').src = src;
            document.getElementById('lightbox-caption').textContent = caption;
            lb.classList.add('open');
            document.body.style.overflow = 'hidden';
        }
        function closeLightbox() {
            document.getElementById('lightbox').classList.remove('open');
            document.body.style.overflow = '';
        }
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') closeLightbox();
        });

        // Initialize
        updateCartUI();

        // Loading screen — sadece ilk ziyarette göster (sessionStorage ile)
        (function() {
            var loader = document.getElementById('page-loader');
            if (sessionStorage.getItem('ma_loaded')) {
                // Daha önce gösterildi — anında gizle
                loader.style.display = 'none';
            } else {
                // İlk ziyaret — 5s göster sonra kapat
                sessionStorage.setItem('ma_loaded', '1');
                window.addEventListener('load', function() {
                    setTimeout(function() {
                        loader.classList.add('hide');
                        setTimeout(function() { loader.style.display = 'none'; }, 900);
                    }, 5000);
                });
            }
        })();
    </script>
</body>
</html>