/* --- TECHMASTER - FINAL PREMIUM STYLE.CSS --- */


.mobile-bottom-nav { display: none; }
/* PC'de Mobil Aramayı Gizle */
.mobile-search-overlay { display: none; }
:root {
    --primary: #15803d;       /* Ana Renk: Tok bir Orman Yeşili (Güven ve Doğa) */
    --accent: #f59e0b;        /* Vurgu: Canlı Turuncu (Kanarya/Enerji) */
    --accent-hover: #d97706;  /* Hover Rengi: Koyu Turuncu */
    --bg-body: #f3f4f6;       /* Arka Plan: Çok açık gri (Temiz PVC hissi) */
    --bg-white: #ffffff;      /* Saf Beyaz */
    --text-main: #1f2937;     /* Koyu Antrasit Metin */
    --text-muted: #64748b;    /* Gri Metin */
    --border: #e5e7eb;        /* Çizgiler */
    --success: #10b981;       /* İşlem Başarılı Yeşili */
    --danger: #ef4444;        /* Hata Kırmızısı */
    --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* Standart Gölge */
}

* { box-sizing: border-box; margin: 0; padding: 0; outline: none; }

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden; 
}

a { text-decoration: none; color: inherit; transition: all 0.2s ease; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* --- 1. TOP BAR --- */
.top-bar {
    background-color: var(--primary);
    color: #cbd5e1;
    font-size: 13px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.top-bar .container { display: flex; justify-content: space-between; align-items: center; }
.top-links a { margin-left: 20px; font-weight: 500; }
.top-links a:hover { color: white; }

/* --- 2. HEADER --- */
.main-header {
    background: var(--bg-white);
    padding: 15px 0;
    position: sticky; top: 0; z-index: 1000;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
.header-wrapper {
    display: flex; justify-content: space-between; align-items: center;
    max-width: 1200px; margin: 0 auto; padding: 0 20px;
}

.logo {
    font-size: 24px; font-weight: 800; color: var(--primary);
    letter-spacing: -0.5px; text-transform: uppercase;
}
.logo span { color: var(--accent); }

.search-box {
    flex: 1; max-width: 500px; margin: 0 40px;
    display: flex; align-items: center;
    background: #f1f5f9; border-radius: 50px;
    padding: 5px 5px 5px 20px; border: 2px solid transparent;
    transition: 0.3s;
}
.search-box:focus-within { border-color: var(--accent); background: white; }
.search-box input { flex: 1; border: none; background: transparent; font-size: 14px; color: var(--text-main); }
.search-box button {
    background: var(--accent); color: white; border: none;
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.search-box button:hover { background: var(--accent-hover); }

.header-icons { display: flex; gap: 25px; align-items: center; }
.icon-item {
    text-align: center; position: relative;
    color: var(--text-muted); display: flex; flex-direction: column; align-items: center;
}
.icon-item:hover { color: var(--accent); }
.icon-item i { font-size: 20px; margin-bottom: 4px; }
.icon-item span { font-size: 11px; font-weight: 600; }

.badge {
    position: absolute; top: -5px; right: -5px;
    background: var(--danger); color: white;
    font-size: 10px; font-weight: bold;
    padding: 2px 6px; border-radius: 10px; border: 2px solid white;
}

/* --- 3. NAVBAR --- */
.navbar { background: var(--bg-white); border-bottom: 1px solid var(--border); }
.nav-container {
    max-width: 1200px; margin: 0 auto; padding: 0 20px;
    display: flex; align-items: center; height: 60px;
}

.dropdown { position: relative; height: 100%; display: flex; align-items: center; margin-right: 30px; }
.categories-btn {
    background: transparent; color: var(--text-main);
    font-weight: 600; display: flex; align-items: center; gap: 8px;
    padding: 10px 15px; border-radius: 8px; transition: 0.2s;
}
.categories-btn:hover { background: #f1f5f9; color: var(--accent); }

.dropdown-content {
    display: none; position: absolute; top: 100%; left: 0;
    background: white; min-width: 240px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    border: 1px solid var(--border); border-radius: 12px;
    padding: 10px; z-index: 1001; animation: slideUp 0.2s ease;
}
.dropdown:hover .dropdown-content { display: block; }
.dropdown-content a {
    padding: 10px 15px; display: flex; align-items: center; gap: 10px;
    color: var(--text-main); font-size: 14px; border-radius: 8px;
}
.dropdown-content a:hover { background: #f8fafc; color: var(--accent); }

.nav-links { display: flex; gap: 25px; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--text-muted); }
.nav-links a:hover { color: var(--accent); }

/* --- 4. HERO SECTION --- */
.hero {
    text-align: center; padding: 80px 20px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: white; margin-bottom: 40px;
}
.hero h1 { font-size: 3rem; font-weight: 800; margin-bottom: 15px; line-height: 1.2; }
.hero p { font-size: 1.1rem; color: #94a3b8; margin-bottom: 30px; }
.hero .highlight { color: #38bdf8; }

.cta-btn {
    background: var(--accent); color: white;
    padding: 15px 40px; border-radius: 50px; font-weight: 600; font-size: 1rem;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3);
}
.cta-btn:hover { transform: translateY(-2px); box-shadow: 0 15px 25px rgba(37, 99, 235, 0.4); }

/* --- 5. ÜRÜN KARTLARI (YENİ KOMPAKT TASARIM) --- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.section-title { 
    font-size: 22px; font-weight: 700; margin: 30px 0 20px; 
    color: var(--text-main); display: flex; align-items: center; gap: 10px; 
}
.section-title::before { content:''; width: 5px; height: 24px; background: var(--accent); border-radius: 3px; }

.product-grid {
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* Kartlar biraz daraldı */
    gap: 20px; 
    margin-bottom: 60px;
}

.urun-karti-link { display: block; height: 100%; }

.urun-karti {
    background: white; 
    border: 1px solid var(--border); 
    border-radius: 12px; /* Köşeleri biraz daha keskinleştirdik */
    padding: 15px; /* İç boşluğu azalttık (Eskisi 20px-50px idi) */
    text-align: center; 
    position: relative;
    transition: all 0.2s ease; 
    height: 100%; 
    display: flex; 
    flex-direction: column;
    justify-content: space-between;
}

.urun-karti:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    border-color: var(--primary); /* Hoverda yeşil çerçeve */
}

/* Resim Alanı */
.urun-karti img {
    width: 100%; 
    height: 150px; /* Resim boyunu kısalttık (Eskisi 180px) */
    object-fit: contain; 
    margin-bottom: 10px;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.05));
    transition: transform 0.3s;
}

.urun-karti:hover img { transform: scale(1.05); }

/* Başlık */
.urun-karti h3 {
    font-size: 14px; /* Fontu biraz küçülttük */
    font-weight: 600; 
    color: var(--text-main);
    margin-bottom: 5px; 
    line-height: 1.3;
    height: 36px; /* Maksimum 2 satır için sabit yükseklik */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Fiyat */
.fiyat { 
    font-size: 16px; 
    font-weight: 800; 
    color: var(--primary); /* Fiyatı ana renk (Yeşil) yaptık */
    margin-bottom: 10px; 
    display: block; 
}

/* Buton */
.urun-karti button {
    width: 100%; 
    padding: 10px; 
    border-radius: 6px;
    border: none; 
    background: var(--bg-body); /* Gri buton */
    color: var(--text-main); 
    font-weight: 600; 
    font-size: 13px;
    cursor: pointer;
    transition: 0.2s;
    display: flex; align-items: center; justify-content: center; gap: 5px;
}

.urun-karti button:hover { 
    background: var(--accent); /* Hoverda turuncu */
    color: white; 
}

.urun-karti button i { font-size: 14px; } /* Buton içi ikon varsa */

/* Favori Butonu (Kalp) */
.fav-btn {
    position: absolute; 
    top: 10px; 
    right: 10px;
    background: rgba(255,255,255,0.8); 
    width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid #eee;
    color: #cbd5e1; 
    font-size: 14px; 
    cursor: pointer; 
    transition: 0.2s; 
    z-index: 20;
    display: flex; align-items: center; justify-content: center;
}
.fav-btn:hover { color: var(--danger); border-color: var(--danger); background: white; }
.fav-btn.active { color: var(--danger); border-color: var(--danger); background: #fef2f2; }

/* --- MOBİL DÜZENLEME (YAN YANA 2'Lİ) --- */
@media (max-width: 768px) {
    .product-grid {
        grid-template-columns: 1fr 1fr; /* Mobilde yan yana 2 tane */
        gap: 10px;
    }
    .urun-karti {
        padding: 10px;
    }
    .urun-karti img {
        height: 110px; /* Mobilde resim daha küçük */
    }
    .urun-karti h3 {
        font-size: 12px;
        height: 32px;
    }
    .fiyat {
        font-size: 14px;
        margin-bottom: 8px;
    }
    .urun-karti button {
        padding: 8px;
        font-size: 11px;
    }
}

/* --- 6. SEPET ÇEKMECESİ --- */
.cart-drawer {
    position: fixed; top: 0; right: 0; width: 400px; height: 100%;
    background: white; z-index: 9999;
    box-shadow: -10px 0 40px rgba(0,0,0,0.2);
    transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column;
}
.cart-drawer.open { transform: translateX(0); }

.drawer-header { padding: 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: #fff; }
.drawer-header h3 { font-size: 18px; font-weight: 700; color: var(--primary); }
.close-btn { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-muted); }

.cart-items { flex: 1; overflow-y: auto; padding: 20px; background: #f8fafc; }

/* Yeni Sepet Kartı */
.cart-item-card {
    background: white; border: 1px solid var(--border); border-radius: 12px;
    padding: 15px; margin-bottom: 15px; display: flex; align-items: center; gap: 15px;
    transition: 0.2s; position: relative;
}
.cart-item-img { width: 70px; height: 70px; border-radius: 8px; object-fit: cover; border: 1px solid #eee; }
.cart-item-info { flex: 1; }
.cart-item-title { font-size: 14px; font-weight: 600; color: var(--text-main); margin-bottom: 5px; line-height: 1.3; }
.cart-item-price { font-size: 15px; font-weight: 700; color: var(--accent); }
.qty-control {
    display: flex; align-items: center; gap: 10px; background: #f1f5f9;
    padding: 5px 10px; border-radius: 8px; width: fit-content; margin-top: 8px;
}
.qty-btn {
    width: 24px; height: 24px; border-radius: 50%; border: none;
    background: white; cursor: pointer; font-weight: bold; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); color: var(--text-main);
}
.qty-btn:hover { background: var(--accent); color: white; }
.delete-item-btn {
    background: none; border: none; color: #ffadad; cursor: pointer;
    font-size: 16px; padding: 5px; position: absolute; top: 10px; right: 10px;
}
.delete-item-btn:hover { color: var(--danger); }

.drawer-footer { padding: 20px; border-top: 1px solid var(--border); background: white; box-shadow: 0 -5px 20px rgba(0,0,0,0.05); }
.summary-row.total { font-size: 18px; font-weight: 800; color: var(--text-main); margin-top: 15px; padding-top: 15px; border-top: 1px dashed var(--border); display: flex; justify-content: space-between; }
.coupon-box { display: flex; gap: 10px; margin-bottom: 20px; }
.coupon-box input { flex: 1; padding: 10px; border: 1px solid var(--border); border-radius: 8px; outline: none; }
.coupon-box button { background: var(--primary); color: white; border: none; padding: 0 15px; border-radius: 8px; cursor: pointer; }
.checkout-btn {
    background: var(--success); color: white; width: 100%; padding: 16px;
    border: none; border-radius: 12px; font-weight: 700; font-size: 16px; cursor: pointer;
    display: flex; justify-content: center; align-items: center; gap: 10px;
}

/* --- 8. FOOTER --- */
footer { background: #0f172a; color: #94a3b8; padding: 60px 0 20px; margin-top: 80px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-col h4 { color: white; margin-bottom: 20px; font-size: 16px; }
.footer-links a { display: block; color: #94a3b8; margin-bottom: 10px; font-size: 14px; transition: 0.2s; }
.footer-links a:hover { color: white; padding-left: 5px; }

/* --- DİĞER --- */
@media (max-width: 768px) {
    .header-wrapper { padding: 0 15px; height: 70px; justify-content: space-between; }
    .search-box, .navbar, .desktop-menu { display: none !important; } 
    .product-grid { grid-template-columns: 1fr 1fr; gap: 15px; }
    .urun-karti { padding: 15px; padding-top: 40px !important; }
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .mobile-menu-btn { 
        display: flex !important; align-items: center; justify-content: center;
        background: none; border: none; font-size: 28px; color: var(--primary);
        cursor: pointer; padding: 10px; margin-right: 10px;
    }
    .cart-drawer { width: 100%; }
    .detail-wrapper { grid-template-columns: 1fr; gap: 30px; }
    .detail-image-box { height: 350px; position: static; }
    .detail-actions { flex-direction: column; width: 100%; }
    .add-cart-large { width: 100%; }
}

.loading-spinner { text-align: center; padding: 50px; color: var(--accent); font-weight: 600; }
#toast-container { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 9999; }
.toast { background: #333; color: white; padding: 12px 24px; border-radius: 50px; font-size: 14px; box-shadow: 0 10px 20px rgba(0,0,0,0.2); opacity: 0; transition: 0.3s; margin-top: 10px; }
.toast.show { opacity: 1; transform: translateY(-10px); }
.category-filters { display: none; }
.detail-wrapper { display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; align-items: start; margin-top: 20px; }
.detail-image-box { background: white; border: 1px solid var(--border); border-radius: 24px; height: 500px; display: flex; justify-content: center; align-items: center; padding: 30px; position: sticky; top: 100px; box-shadow: var(--shadow); }
.detail-info-box { display: flex; flex-direction: column; gap: 20px; }
.add-cart-large { width: 100%; padding: 18px; background: var(--accent); color: white; border: none; border-radius: 12px; font-weight: 700; cursor: pointer; transition: 0.3s; }

/* Detay Favori Butonu */
#detailFavBtn {
    width: 50px; height: 50px; border-radius: 12px;
    background: rgba(255,255,255,0.08); border: 1px solid #e2e8f0;
    color: #cbd5e1; font-size: 1.3rem; cursor: pointer;
    transition: all 0.3s ease; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
#detailFavBtn:hover { background: #fff5f5; color: #ef4444; border-color: #ef4444; transform: translateY(-2px); }
#detailFavBtn.active { background: #ef4444; color: white; border-color: #ef4444; box-shadow: 0 5px 15px rgba(239, 68, 68, 0.3); }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); z-index: 3000; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: 0.3s; }
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-box { background: white; width: 95%; max-width: 500px; border-radius: 16px; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); transform: scale(0.95); transition: 0.3s; }
.modal-overlay.active .modal-box { transform: scale(1); }
.modal-header { background: #f8fafc; padding: 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.modal-header h3 { margin: 0; font-size: 18px; color: var(--text-main); }
#paymentForm { padding: 25px; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--text-muted); }
.form-group input, .form-group textarea { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; transition: 0.2s; }
.form-group input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }

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

/* --- MOBİL MENÜ FİX (GARANTİLİ) --- */
.mobile-menu-drawer {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 280px !important; height: 100vh !important;
    background: #ffffff !important;
    z-index: 12000 !important;
    transform: translateX(-100%) !important;
    visibility: hidden !important; opacity: 0 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 5px 0 25px rgba(0,0,0,0.15);
    display: flex; flex-direction: column;
}
.mobile-menu-drawer.active { transform: translateX(0) !important; visibility: visible !important; opacity: 1 !important; }
.mobile-menu-overlay {
    position: fixed !important; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(2px);
    z-index: 11999 !important;
    opacity: 0 !important; visibility: hidden !important; transition: 0.3s;
    display: none; 
}
.mobile-menu-overlay.active { opacity: 1 !important; visibility: visible !important; display: block !important; }
.mobile-header { padding: 25px 20px; background: var(--primary); color: white; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.1); }
.user-info { display: flex; align-items: center; gap: 12px; cursor: pointer; transition:0.2s; }
.avatar-circle { width: 48px; height: 48px; background: rgba(255,255,255,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: white; border: 2px solid rgba(255,255,255,0.2); }
.user-text { display: flex; flex-direction: column; }
.welcome-msg { font-size: 11px; opacity: 0.7; letter-spacing: 1px; text-transform: uppercase; font-weight:500; }
.user-name { font-size: 16px; font-weight: 700; margin-top:2px; }
.close-sidebar-premium { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); width: 40px; height: 40px; border-radius: 12px; color: white; font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.3s; }
.sidebar-content { flex: 1; overflow-y: auto; padding: 10px 0; }
.sidebar-menu a { display: flex; align-items: center; gap: 15px; padding: 14px 25px; color: var(--text-main); font-size: 15px; font-weight: 500; border-left: 3px solid transparent; transition: 0.2s; }
.sidebar-menu a:hover { background: #f8fafc; color: var(--accent); border-left-color: var(--accent); }
.sidebar-menu i { width: 20px; text-align: center; color: var(--text-muted); font-size: 1.1rem; }
.divider { height: 1px; background: #f1f5f9; margin: 8px 0; }
.menu-footer { padding: 20px; border-top: 1px solid #f1f5f9; }
.logout-link { display: flex; align-items: center; gap: 10px; color: var(--danger) !important; font-weight: 600 !important; padding: 10px 5px !important; }
/* --- MOBİL BUTON FİX --- */
.mobile-menu-btn { cursor: pointer !important; z-index: 10001 !important; }
/* --- PROFESYONEL CHECKOUT STİLİ --- */
.checkout-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 25px;
}
@media (max-width: 768px) { .checkout-grid { grid-template-columns: 1fr; } }

.checkout-box {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
}
.checkout-title {
    font-size: 16px; font-weight: 700; color: var(--primary);
    margin-bottom: 15px; border-bottom: 1px solid #e2e8f0; padding-bottom: 10px;
}

/* Ödeme Yöntemi Seçimi (Kartlar) */
.payment-methods { display: flex; gap: 10px; margin-bottom: 15px; }
.p-method {
    flex: 1;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
    background: white;
}
.p-method:hover { border-color: var(--accent); background: #f0f9ff; }
.p-method.active { border-color: var(--accent); background: #f0f9ff; color: var(--accent); font-weight: bold; }
.p-method i { font-size: 24px; margin-bottom: 5px; display: block; }

/* Sipariş Özeti Satırları */
.summary-line { display: flex; justify-content: space-between; margin-bottom: 10px; color: #64748b; font-size: 14px; }
.summary-line.total { font-weight: 800; color: var(--text-main); font-size: 18px; border-top: 1px dashed #cbd5e1; padding-top: 10px; margin-top: 10px; }
/* --- PREMIUM MOBİL MENÜ STİLİ (YENİ) --- */
.mobile-menu-drawer {
    background-color: #ffffff !important;
    width: 80% !important; /* Ekranın %80'ini kaplasın */
    max-width: 320px;
    display: flex;
    flex-direction: column;
    height: 100vh; /* Tam boy */
}

/* Üst Kısım (Kullanıcı Alanı) */
.mobile-header-premium {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    padding: 30px 20px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.user-info-premium {
    display: flex;
    align-items: center;
    gap: 15px;
}

.avatar-premium {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: bold;
}

.user-details-premium h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.user-details-premium span {
    font-size: 0.8rem;
    opacity: 0.7;
    font-weight: 400;
}

.close-btn-premium {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.5rem;
    opacity: 0.7;
    cursor: pointer;
    transition: 0.3s;
}
.close-btn-premium:hover { opacity: 1; transform: rotate(90deg); }

/* Menü Linkleri */
.sidebar-content-premium {
    flex: 1;
    overflow-y: auto;
    padding: 20px 0;
}

.menu-link-premium {
    display: flex;
    align-items: center;
    padding: 16px 25px;
    color: #334155;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: 0.2s;
    border-left: 4px solid transparent;
}

.menu-link-premium i {
    width: 30px; /* İkon genişliği sabit olsun ki yazılar hizalı dursun */
    font-size: 1.2rem;
    color: #94a3b8;
    transition: 0.2s;
}

.menu-link-premium:hover {
    background-color: #f8fafc;
    color: var(--accent);
    border-left-color: var(--accent);
}

.menu-link-premium:hover i {
    color: var(--accent);
}

.menu-divider {
    height: 1px;
    background-color: #f1f5f9;
    margin: 10px 20px;
}

/* Alt Footer (Çıkış) */
.sidebar-footer-premium {
    padding: 20px;
    border-top: 1px solid #f1f5f9;
    background: #fff;
}

.logout-btn-premium {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    background: #fef2f2;
    color: #ef4444;
    border: 1px solid #fee2e2;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.2s;
}

.logout-btn-premium:hover {
    background: #ef4444;
    color: white;
}
/* --- PREMIUM MOBİL MENÜ BUTONU DÜZELTMESİ --- */
.mobile-menu-btn {
    background: transparent !important;   /* O gri arka planı sil */
    border: none !important;              /* O kalın çerçeveyi sil */
    box-shadow: none !important;          /* Varsa gölgeyi sil */
    
    color: var(--primary) !important;     /* İkon rengi ana renk olsun */
    font-size: 24px !important;           /* İkon boyutu ideal olsun */
    
    cursor: pointer;
    padding: 10px;                        /* Tıklama alanı genişlesin */
    border-radius: 50%;                   /* Yuvarlak hover efekti */
    transition: all 0.3s ease;            /* Yumuşak geçiş */
    
    display: flex;                        /* Ortalamak için */
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

/* Üstüne gelince veya tıklayınca */
.mobile-menu-btn:hover, .mobile-menu-btn:active {
    background-color: #f1f5f9 !important; /* Çok hafif gri bir yuvarlak çıksın */
    color: var(--accent) !important;      /* İkon mavi olsun */
    transform: scale(1.1);                /* Hafifçe büyüsün */
}
/* --- SÖZLEŞME MODAL CSS --- */
.contract-tab-btn {
    flex: 1;
    padding: 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-weight: 600;
    color: #64748b;
    border-radius: 6px;
    transition: 0.2s;
}
.contract-tab-btn:hover { background: #e2e8f0; color: #334155; }
.contract-tab-btn.active { background: white; color: var(--accent); shadow: 0 2px 5px rgba(0,0,0,0.05); font-weight: 700; }

.contract-content { animation: fadeIn 0.3s ease; }
/* ========================================= */
/* --- TECHMASTER MOBİL KURTARMA PAKETİ --- */
/* ========================================= */

@media (max-width: 768px) {
    
    /* 1. GENEL AYARLAR */
    .container { padding: 0 15px; }
    body { font-size: 14px; }
    
    /* 2. HEADER (ÜST KISIM) TOPARLAMA */
    .header-wrapper { padding: 10px 15px; height: auto; }
    .logo { font-size: 20px; }
    .search-box { display: none !important; } /* Mobilde arama kutusunu gizle */
    .header-icons { gap: 12px; }
    .icon-item span { display: none; } /* "Sepetim" yazısını gizle, sadece ikon kalsın */
    .icon-item i { font-size: 22px; }
    
    
    /* 4. ÜRÜN KARTLARI (TRENDYOL GİBİ 2'Lİ DİZİLİM) */
    .product-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Yan yana 2 tane */
        gap: 10px;
        margin-bottom: 30px;
    }
    
    .urun-karti {
        padding: 10px !important;
        min-height: 260px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .urun-karti img {
        height: 120px; /* Resim boyunu küçült */
        margin-bottom: 10px;
    }
    
    .urun-karti h3 {
        font-size: 13px;
        height: 36px; /* 2 satırla sınırla */
        overflow: hidden;
        margin-bottom: 5px;
    }
    
    .fiyat { font-size: 16px; margin-bottom: 8px; }
    
    .urun-karti button {
        padding: 8px;
        font-size: 12px;
        width: 100%;
    }
    
    .fav-btn { font-size: 1.2rem; top: 5px; right: 5px; }

    /* 5. DETAY SAYFASI */
    .detail-wrapper {
        grid-template-columns: 1fr; /* Alt alta diz */
        gap: 20px;
        margin-top: 10px;
    }
    .detail-image-box {
        height: 300px;
        padding: 15px;
    }
    .detail-info-box h1 { font-size: 1.5rem !important; }
    .detail-price { font-size: 1.8rem !important; margin: 10px 0 !important; }
    
    /* Sepete Ekle Butonu Mobilde Sabitlensin (Opsiyonel - Çok Profesyonel Durur) */
    .detail-actions {
        position: fixed;
        bottom: 0; left: 0; width: 100%;
        background: white;
        padding: 15px;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
        z-index: 999;
        gap: 10px;
    }
    .add-cart-large { margin: 0; border-radius: 8px; }
    /* Footer mobilde butonun altında kalmasın diye boşluk */
    body { padding-bottom: 80px; }

    /* 6. SEPET ÇEKMECESİ */
    .cart-drawer { width: 100%; max-width: 100%; }
    
    /* 7. İLETİŞİM & HAKKIMIZDA */
    .contact-wrapper, .story-section, .stats-grid, .values-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .map-container { height: 250px; }
    
    /* 8. MODAL (Sözleşme & Ödeme) */
    .modal-box {
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
        max-height: 100vh !important;
    }
    .checkout-grid { grid-template-columns: 1fr; }
}
/* --- ANA SAYFA KATEGORİ KUTUCUKLARI (GÜNCELLENDİ) --- */
.home-cat-grid {
    display: flex;             /* Yan yana diz */
    justify-content: center;   /* Ortala */
    gap: 30px;                 /* Aralarını aç */
    margin-bottom: 40px;
    flex-wrap: wrap;           /* Mobilde alt alta geçsin */
}

.home-cat-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;       /* Daha yuvarlak köşeler */
    padding: 30px 40px;        /* Kutuları büyüttük */
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    min-width: 200px;          /* Minimum genişlik */
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
}

.home-cat-card:hover {
    border-color: var(--primary);
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
}

/* Büyük İkon Ayarı */
.main-icon {
    width: 70px; height: 70px; font-size: 2rem; /* İkonu büyüttük */
    background: #f0fdf4; color: var(--primary);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    margin-bottom: 15px; transition: 0.3s;
}

.home-cat-card:hover .main-icon {
    background: var(--primary); color: white;
}

.main-title {
    font-size: 18px; /* Yazıyı büyüttük */
    font-weight: 700; color: var(--text-main);
}

/* Mobilde tam ekran genişlesin */
@media (max-width: 768px) {
    .home-cat-grid { 
        flex-direction: row; /* Yine yan yana */
        gap: 15px; 
    } 
    .home-cat-card { 
        flex: 1; /* Eşit dağılsın */
        padding: 20px; 
        min-width: auto; 
    }
    .main-icon { width: 50px; height: 50px; font-size: 1.5rem; }
    .main-title { font-size: 14px; }
}
/* --- YENİ PREMİUM KATEGORİ VİTRİNİ --- */
.kategori-vitrini {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Ekranı ikiye böl */
    gap: 30px;
}

.vitrin-kart {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px; /* Daha yuvarlak köşeler */
    padding: 30px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Yumuşak geçiş */
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
}

/* Hover Efekti: Yukarı kalkar ve gölge artar */
.vitrin-kart:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    border-color: var(--primary);
}

/* --- İKON ALANI --- */
.kart-sol {
    margin-right: 25px;
}

.kart-ikon {
    width: 80px;
    height: 80px;
    background: #ecfdf5; /* Açık yeşil zemin */
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem; /* İkon çok büyük */
    transition: 0.3s;
}

.kart-ikon.mavi {
    background: #eff6ff; /* Mavi zemin */
    color: #3b82f6;
}

.vitrin-kart:hover .kart-ikon {
    transform: scale(1.1) rotate(-5deg); /* Hoverda ikon hareket etsin */
}

/* --- YAZI ALANI --- */
.kart-sag {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left; /* Yazıları sola yasla */
}

.kart-sag h3 {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.kart-sag p {
    margin: 0 0 15px 0;
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
}

/* --- BUTON GÖRÜNÜMÜ --- */
.incele-btn {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}

.incele-btn.mavi-text { color: #3b82f6; }

.vitrin-kart:hover .incele-btn {
    gap: 12px; /* Ok işareti sağa kaysın */
}

/* --- MOBİL UYUM --- */
@media (max-width: 768px) {
    .kategori-vitrini {
        grid-template-columns: 1fr; /* Mobilde alt alta */
        gap: 20px;
    }
    .vitrin-kart {
        padding: 20px;
    }
    .kart-ikon {
        width: 60px; height: 60px; font-size: 1.8rem;
    }
    .kart-sag h3 { font-size: 18px; }
}
/* --- PREMIUM KATEGORİ FİLTRE BUTONLARI --- */

/* Kapsayıcı Alanı */
.category-filters {
    display: flex !important; /* Yan yana diz */
    flex-wrap: wrap;          /* Sığmazsa alt satıra geç */
    justify-content: center;  /* Ortala */
    gap: 12px;                /* Butonlar arası boşluk */
    margin: 0 0 30px 0;       /* Altına boşluk bırak */
}

/* Butonun Kendisi */
.filter-btn {
    background: white;
    border: 1px solid #e2e8f0; /* Çok hafif gri çerçeve */
    color: #64748b;            /* Gri yazı (Pasif hali) */
    padding: 12px 25px;        /* İç boşluk (Doyurucu olsun) */
    font-size: 14px;
    font-weight: 600;
    border-radius: 50px;       /* Tam yuvarlak köşeler (Hap gibi) */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Yumuşak animasyon */
    font-family: 'Inter', sans-serif;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02); /* Hafif gölge */
}

/* Üzerine Gelince (Hover) */
.filter-btn:hover {
    background: #f0fdf4;       /* Çok açık yeşil zemin */
    color: var(--primary);     /* Koyu yeşil yazı */
    border-color: var(--primary);
    transform: translateY(-2px); /* Hafif yukarı zıplasın */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Tıklanınca (Aktif) */
.filter-btn.active {
    background: var(--primary);  /* Ana renk (Yeşil) zemin */
    color: white;                /* Beyaz yazı */
    border-color: var(--primary);
    box-shadow: 0 8px 20px rgba(21, 128, 61, 0.25); /* Yeşil parlak gölge */
    transform: scale(1.05);      /* Hafifçe büyüsün */
}

/* Mobil Uyum */
@media (max-width: 768px) {
    .category-filters {
        justify-content: flex-start; /* Mobilde sola dayalı başlasın */
        overflow-x: auto;            /* Yanlamasına kaydırılabilsin */
        padding-bottom: 10px;        /* Kaydırma çubuğu için yer */
        white-space: nowrap;         /* Alt satıra geçmesin */
        flex-wrap: nowrap;           /* Tek satırda kalsın */
    }
    .filter-btn {
        flex-shrink: 0; /* Butonlar küçülmesin */
    }
}
/* --- MENÜ İMLEÇ DÜZELTMESİ --- */
.dropdown-content a {
    cursor: pointer !important; /* Zorla el işareti yap */
    user-select: none; /* Yazının seçilmesini de engelle, daha app gibi hissettirir */
}
/* --- MENÜ İMLEÇ (CURSOR) DÜZELTMESİ - FİNAL --- */

/* Hem üstteki buton (Kafesler) hem de içindeki linkler (Kanarya vs.) için */
.categories-btn, 
.dropdown-content a,
.dropdown-content {
    cursor: pointer !important; /* Zorla El İşareti Yap */
    caret-color: transparent;   /* Yanıp sönen imleci gizle */
}

/* Yazının mouse ile taranmasını/seçilmesini engelle */
.categories-btn,
.dropdown-content a {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* --- ÜRÜN DETAY SEKMELERİ (TABS) --- */
.product-tabs {
    display: flex; border-bottom: 2px solid #e2e8f0; margin-top: 40px; margin-bottom: 20px;
}
.tab-btn {
    padding: 15px 30px; background: transparent; border: none; font-size: 16px; font-weight: 600; color: #64748b; cursor: pointer; border-bottom: 3px solid transparent; transition: 0.3s;
}
.tab-btn:hover { color: var(--primary); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }

.tab-content { display: none; animation: fadeIn 0.3s ease; }
.tab-content.active { display: block; }

/* Özellik Tablosu Tasarımı */
.specs-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.specs-group-title {
    background: #f1f5f9; font-weight: 800; color: #1e293b; padding: 12px 15px; text-transform: uppercase; font-size: 14px; border-left: 4px solid var(--primary);
}
.specs-row td { padding: 12px 15px; border-bottom: 1px solid #e2e8f0; font-size: 14px; color: #334155; }
.specs-row:last-child td { border-bottom: none; }
.spec-key-col { width: 40%; font-weight: 600; color: #475569; background: #fcfcfc; }
/* --- YENİ KUPON SİSTEMİ CSS --- */
.coupon-area-wrapper { margin-bottom: 20px; }

/* Kupon YOKKEN Görünen Kısım */
.coupon-input-group { display: flex; gap: 8px; }
.coupon-input-group input { 
    flex: 1; 
    padding: 12px; 
    border: 1px solid #e2e8f0; 
    border-radius: 8px; 
    background: #f8fafc;
    font-size: 14px;
    outline: none;
    transition: 0.3s;
}
.coupon-input-group input:focus { border-color: var(--primary); background: white; }
.btn-apply-coupon {
    background: var(--primary); color: white; border: none;
    padding: 0 20px; border-radius: 8px; font-weight: 600; cursor: pointer;
    transition: 0.2s;
}
.btn-apply-coupon:hover { background: var(--accent); }

/* Kupon VARKEN Görünen Kısım */
.active-coupon-card {
    background: #ecfdf5; /* Açık Yeşil */
    border: 1px dashed #10b981;
    padding: 12px 15px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: fadeIn 0.3s ease;
}
.coupon-info { display: flex; align-items: center; gap: 10px; color: #047857; font-weight: 700; font-size: 14px; }
.btn-remove-coupon {
    background: #fee2e2; /* Açık Kırmızı */
    color: #ef4444;
    border: none;
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: 0.2s;
}
.btn-remove-coupon:hover { background: #ef4444; color: white; transform: rotate(90deg); }

/* Fiyat Satırları */
.summary-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; color: #64748b; }
.summary-row.total { font-size: 20px; color: var(--text-main); border-top: 1px solid #e2e8f0; padding-top: 15px; margin-top: 10px; margin-bottom: 20px; }
/* --- SAYFALAMA (PAGINATION) STİLİ --- */
.pagination-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 40px;
    margin-bottom: 60px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.page-btn {
    background: white;
    border: 1px solid #cbd5e1;
    color: var(--text-main);
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: translateY(-2px);
}

.page-btn:disabled {
    background: #f1f5f9;
    color: #94a3b8;
    border-color: #e2e8f0;
    cursor: not-allowed;
    transform: none;
}

#pageInfo {
    font-weight: 700;
    color: var(--text-main);
    font-size: 14px;
}
/* --- ÜRÜN DETAY GALERİSİ --- */
.product-wrapper {
    align-items: start; /* Resmi ve yazıyı yukarı hizala */
}

.gallery-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.main-image-box {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    height: 450px; /* Sabit yükseklik */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 20px;
}

.main-image-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s;
}

/* Küçük Resimler */
.thumbnails-container {
    display: flex;
    gap: 10px;
    overflow-x: auto; /* Çok resim olursa yana kayar */
    padding-bottom: 5px;
}

.thumb-img {
    width: 70px;
    height: 70px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    object-fit: cover;
    opacity: 0.6;
    transition: 0.2s;
}

.thumb-img:hover { opacity: 1; }

.thumb-img.active {
    border-color: var(--primary); /* Seçili olan yeşil çerçeve */
    opacity: 1;
    transform: scale(1.05);
}
/* ============================================================
   🔥 TECHMASTER MOBİL KURTARMA PAKETİ (RESPONSIVE FIX) 🔥
   ============================================================ */

@media (max-width: 992px) {
    /* --- GENEL AYARLAR --- */
    .container { padding: 0 15px; width: 100%; }
    
    /* --- HEADER & NAV --- */
    .header-wrapper { padding: 10px 15px; flex-wrap: wrap; gap: 10px; }
    .logo { font-size: 20px; }
    .search-box { 
        order: 3; width: 100%; margin: 10px 0 0 0; 
        display: flex !important; /* Mobilde aramayı göster */
    }
    .header-icons { gap: 15px; }
    .icon-item span { display: none; } /* "Hesabım" yazısını gizle, sadece ikon kalsın */
    .icon-item i { font-size: 22px; }
    .navbar { display: none; } /* Mobilde üst menüyü gizle (Yan menü var zaten) */

    /* --- ANA SAYFA (SLIDER) --- */
    .hero-slider { height: auto !important; padding: 20px 0; }
    .slide-content-wrapper { flex-direction: column-reverse; text-align: center; padding: 20px !important; }
    .slide-text-content { padding: 0 !important; margin-top: 20px; transform: none !important; opacity: 1 !important; }
    .slide-title { font-size: 1.8rem !important; }
    .slide-desc { font-size: 1rem !important; margin-bottom: 20px !important; }
    .slide-image-content { justify-content: center !important; transform: none !important; opacity: 1 !important; }
    .slide-image-content img { height: 200px !important; width: auto !important; }
    .slider-btn { display: none !important; } /* Okları gizle */

    /* --- KATEGORİ VİTRİNİ (KUTULAR) --- */
    .kategori-vitrini { grid-template-columns: 1fr !important; gap: 15px; }
    .vitrin-kart { padding: 20px; }
    .kart-ikon { width: 60px; height: 60px; font-size: 2rem; margin-right: 15px; }
    .kart-sag h3 { font-size: 18px; }

    /* --- ÜRÜN LİSTESİ (YAN YANA 2'Lİ DİZİLİM - TRENDYOL TARZI) --- */
    .product-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important; /* Mobilde 2 sütun */
        gap: 10px !important;
    }
    .urun-karti { 
        padding: 10px !important; 
        min-height: 280px;
        display: flex; flex-direction: column; justify-content: space-between;
    }
    .urun-karti img { height: 120px !important; margin-bottom: 10px; }
    .urun-karti h3 { font-size: 13px; height: 34px; overflow: hidden; margin-bottom: 5px; }
    .fiyat { font-size: 15px; margin-bottom: 5px; }
    .urun-karti button { padding: 8px; font-size: 12px; width: 100%; }

    /* --- ÜRÜN DETAY SAYFASI --- */
    .product-wrapper { display: flex; flex-direction: column; padding: 15px !important; gap: 20px; }
    .gallery-wrapper { width: 100%; }
    .main-image-box { height: 300px !important; padding: 10px; }
    .thumbnails-container { justify-content: center; }
    .product-info h1 { font-size: 1.5rem !important; }
    .price-tag { font-size: 24px !important; margin: 10px 0 !important; }
    .action-area { flex-direction: column; gap: 10px; }
    .add-cart-btn { width: 100%; padding: 15px; }
    .fav-btn-big { width: 100%; }

    /* --- HAKKIMIZDA & İLETİŞİM --- */
    .story-section, .stats-row, .contact-wrapper, .pvc-grid { 
        grid-template-columns: 1fr !important; gap: 30px; 
    }
    .about-hero h1 { font-size: 2rem !important; }
    .stats-row { padding: 30px !important; }
    
    /* --- SEPET & CHECKOUT --- */
    .cart-drawer { width: 100% !important; max-width: 100%; }
    .modal-box { width: 100% !important; height: 100% !important; max-height: 100vh !important; border-radius: 0 !important; }
    .checkout-grid { grid-template-columns: 1fr !important; }
    
    /* --- PROFİL --- */
    .profile-layout { grid-template-columns: 1fr !important; gap: 20px; }
    .profile-sidebar { margin-bottom: 20px; }
}
/* ========================================= */
/* 🚀 67 PVC KAFES - MOBİL APP MODU (V2) 🚀 */
/* ========================================= */

@media (max-width: 768px) {

    /* --- 1. GENEL İYİLEŞTİRMELER --- */
    body {
        padding-bottom: 80px; /* Alt menü için boşluk */
        background-color: #f8f9fa; /* Daha temiz beyaz/gri tonu */
    }
    .container {
        padding: 0 15px;
    }

    /* --- 2. HEADER (ÜST KISIM) --- */
    .top-bar { display: none; } /* Mobilde en üstteki ince şeridi gizle, kalabalık yapmasın */
    
    .main-header {
        padding: 10px 0;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        position: sticky; top: 0; z-index: 999;
    }

    .header-wrapper {
        padding: 0 15px;
        justify-content: space-between;
    }

    .logo { font-size: 18px; } /* Logo mobilde biraz küçülsün */
    
    /* Mobilde gereksiz ikonları gizle (Alta alacağız) */
    .header-icons .icon-item { display: none; } 
    /* Sadece Sepet İkonu kalsın (Opsiyonel) ama biz alta koyacağız */

    .search-box { display: none !important; } /* Arama kutusunu gizle (Buton yapacağız) */

    /* --- 3. ALT NAVİGASYON BAR (BOTTOM BAR) - KRİTİK --- */
    .mobile-bottom-nav {
        display: flex !important; /* Sadece mobilde görünür yap */
        position: fixed;
        bottom: 0; left: 0; width: 100%;
        background: white;
        border-top: 1px solid #e2e8f0;
        padding: 10px 0;
        z-index: 9999;
        justify-content: space-around;
        align-items: center;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.05);
    }

    .nav-item {
        display: flex; flex-direction: column; align-items: center;
        color: #94a3b8; text-decoration: none; font-size: 10px; font-weight: 600;
        position: relative;
    }
    .nav-item i { font-size: 20px; margin-bottom: 4px; transition: 0.2s; }
    .nav-item.active { color: var(--primary); }
    .nav-item.active i { transform: translateY(-2px); }

    /* Sepet Rozeti (Kırmızı top) */
    .nav-badge {
        position: absolute; top: -5px; right: -5px;
        background: var(--danger); color: white;
        font-size: 9px; padding: 2px 5px; border-radius: 10px;
    }

    /* --- 4. ÜRÜN KARTLARI (TRENDYOL STİLİ) --- */
    .product-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Yan yana 2 ürün */
        gap: 12px; /* Araları aç */
        padding: 0 5px;
    }

    .urun-karti {
        padding: 10px !important;
        border-radius: 12px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.03);
        border: none; /* Çizgiyi kaldır, gölge yeter */
        display: flex; flex-direction: column; justify-content: space-between;
    }

    .urun-karti img {
        height: 140px; /* Resim boyutu */
        width: 100%; object-fit: contain;
        margin-bottom: 10px;
    }

    .urun-karti h3 {
        font-size: 13px;
        height: 36px; /* 2 satır */
        overflow: hidden;
        margin-bottom: 5px;
        line-height: 1.4;
    }

    .fiyat { font-size: 15px; margin-bottom: 8px; }

    /* Mobilde "Sepete Ekle" butonu yerine sadece ikon koyabiliriz veya küçültebiliriz */
    .urun-karti button {
        padding: 8px;
        font-size: 11px;
    }
    
    .fav-btn {
        width: 28px; height: 28px; font-size: 12px;
        top: 8px; right: 8px;
    }

    /* --- 5. SLIDER (MANŞET) --- */
   /* --- 5. SLIDER (TUANA STYLE MOBİL - YATAY) --- */
    .hero-slider {
        height: 200px !important; /* Mobilde ince uzun */
        margin-top: 10px;
        border-radius: 12px;
        background: #f8fafc; 
        border: 1px solid #e2e8f0;
        padding: 0 !important;
    }
    
    .slide-content-wrapper { 
        flex-direction: row !important; /* Yan yana diz */
        justify-content: space-between !important;
        padding: 0 15px !important;
        text-align: left !important;
        align-items: center !important;
        height: 100% !important;
    }

    /* YAZI ALANI (SOLDA) */
    .slide-text-content { 
        width: 55% !important;
        height: auto !important;
        padding: 0 !important; margin: 0 !important;
        transform: none !important; opacity: 1 !important;
        align-items: flex-start !important; 
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    .slide-title { font-size: 1.1rem !important; margin-bottom: 5px !important; line-height: 1.2; }
    .slide-desc { 
        font-size: 0.75rem !important; 
        display: block !important; 
        margin-bottom: 10px !important; 
        line-height: 1.3;
        color: #64748b;
        max-width: 100%;
        /* 3 satırdan fazlasını kes */
        display: -webkit-box !important;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .slide-btn { 
        padding: 6px 12px !important; 
        font-size: 10px !important; 
        width: auto !important; 
        border-radius: 4px !important;
    }
    
    /* RESİM ALANI (SAĞDA) */
    .slide-image-content { 
        width: 45% !important;
        height: 100% !important; 
        display: flex !important; 
        justify-content: center !important;
        align-items: center !important;
        transform: none !important; opacity: 1 !important;
        margin: 0 !important;
    }
    .slide-image-content img { 
        height: 160px !important; 
        width: auto !important; 
        max-width: 100%;
        object-fit: contain; 
    }
    
    .slider-dots { bottom: 10px !important; }
    /* --- 6. KATEGORİ VİTRİNİ --- */
    .kategori-vitrini { grid-template-columns: 1fr; gap: 15px; } /* Alt alta */
    .vitrin-kart { padding: 15px; }
    .kart-ikon { width: 50px; height: 50px; font-size: 1.5rem; margin-right: 15px; }
    .kart-sag h3 { font-size: 16px; }
    
    /* --- 7. SEPET ÇEKMECESİ (FULL EKRAN) --- */
    .cart-drawer { width: 100%; max-width: 100%; }
    /* --- 8. FOOTER (AÇILIR KAPANIR - AKORDEON) --- */
    .footer-grid { 
        grid-template-columns: 1fr !important; 
        gap: 0 !important;
        text-align: left !important;
        padding-bottom: 20px !important;
    }
    
    .footer-col {
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding: 15px 0;
    }
    
    .footer-col h4 {
        margin: 0 !important;
        font-size: 15px !important;
        color: white;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: 10px;
    }
    
    .footer-col h4::after {
        content: '+';
        font-size: 18px;
        font-weight: bold;
        color: var(--accent);
        transition: 0.3s;
    }
    
    .footer-col h4.active::after {
        content: '-';
        transform: rotate(180deg);
    }
    
    /* İçerikleri gizle */
    .footer-links, .footer-col p, .footer-col .social-icons {
        display: none;
        margin-top: 15px;
        padding-left: 5px;
    }
    
    /* Açılınca göster */
    .footer-links.open, .footer-col p.open, .footer-col .social-icons.open {
        display: block;
    }
    /* --- MAĞAZA (ÜRÜN KARTLARI) - PREMIUM MOBİL --- */
    .product-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* Yan yana 2 ürün */
        gap: 15px !important; /* Kartlar arası boşluk */
        padding: 10px 5px !important;
    }

    .urun-karti-link {
        text-decoration: none; color: inherit; display: block;
    }

    .urun-karti {
        background: white;
        border: 1px solid #f1f5f9; /* Çok hafif sınır */
        border-radius: 12px; /* Yuvarlak köşeler */
        padding: 10px !important;
        position: relative;
        box-shadow: 0 4px 10px rgba(0,0,0,0.03); /* Hafif gölge */
        display: flex; 
        flex-direction: column;
        height: 100%;
        min-height: 240px; /* Minimum yükseklik */
        transition: transform 0.2s;
    }

    /* Resim Alanı */
    .urun-karti img {
        width: 100%;
        height: 130px !important; /* Resim yüksekliği sabit */
        object-fit: contain; /* Resmi kesme, sığdır */
        margin-bottom: 10px;
        filter: drop-shadow(0 5px 5px rgba(0,0,0,0.05));
    }

    /* Başlık (İsmi 2 satıra sığdır, taşarsa üç nokta koy) */
    .urun-karti h3 {
        font-size: 13px !important;
        color: #334155;
        font-weight: 600;
        line-height: 1.4;
        margin-bottom: 5px;
        height: 36px; /* 2 satır yüksekliği */
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-align: left;
    }

    /* Fiyat */
    .fiyat {
        font-size: 15px !important;
        color: var(--primary);
        font-weight: 800;
        text-align: left;
        margin-bottom: 0;
        margin-top: auto; /* En alta it */
    }

    /* Mobilde Sepet Butonu (Yuvarlak İkon) */
  /* --- 7. SEPET ÇEKMECESİ (APP MODU - %85 GENİŞLİK) --- */
    .cart-drawer { 
        width: 85% !important; /* Tam ekran yapma, kenar açık kalsın */
        max-width: 85% !important; 
        z-index: 20000 !important; /* Menünün (9999) üstüne çıksın diye artırdık */
    }
    
    /* Mobil Arama Kutusu (Yeni Ekliyoruz) */
    .mobile-search-overlay {
        display: flex !important; /* Mobilde görünür yap */
        position: fixed; top: 0; left: 0; width: 100%; height: auto;
        background: white; z-index: 19000;
        padding: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        transform: translateY(-150%); transition: 0.3s ease;
        display: flex; flex-direction: column; gap: 10px;
    }
    .mobile-search-overlay.active { transform: translateY(0); }
    .mobile-add-btn:active { transform: scale(0.9); }
    .mobile-add-btn i { font-size: 14px; }

    /* Kalp Butonu */
    .fav-btn {
        top: 8px !important; right: 8px !important;
        width: 28px !important; height: 28px !important;
        font-size: 12px !important;
        background: rgba(255,255,255,0.9) !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
}

/* Masaüstünde Bottom Bar Gizli Olsun */
.mobile-bottom-nav { display: none; }
/* --- PREMIUM KATEGORİ FİLTRELERİ (MOBİL İÇİN) --- */
@media (max-width: 768px) {
    /* Filtre Kapsayıcısı: Kaydırılabilir Yap */
    .category-filters {
        display: flex !important;
        flex-wrap: nowrap !important; /* Alt satıra düşmesin */
        overflow-x: auto !important;  /* Yana kaydır */
        gap: 10px !important;
        padding-bottom: 10px !important; /* Kaydırma çubuğu payı */
        justify-content: flex-start !important; /* Sola yasla */
        -webkit-overflow-scrolling: touch; /* Mobilde yağ gibi kaysın */
        margin-bottom: 20px !important;
        
        /* Kaydırma çubuğunu gizle (Estetik) */
        scrollbar-width: none; 
        -ms-overflow-style: none;
    }
    .category-filters::-webkit-scrollbar { display: none; }

    /* Butonlar: Hap Şeklinde */
    .filter-btn {
        flex: 0 0 auto; /* Butonlar sıkışmasın */
        padding: 8px 20px !important;
        border-radius: 50px !important; /* Tam yuvarlak */
        font-size: 13px !important;
        background: white !important;
        border: 1px solid #e2e8f0 !important;
        color: #64748b !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
    }

    /* Aktif Buton */
    .filter-btn.active {
        background: var(--primary) !important;
        color: white !important;
        border-color: var(--primary) !important;
        box-shadow: 0 4px 10px rgba(21, 128, 61, 0.3) !important;
    }
}
/* ========================================= */
/* 🚨 ACİL MOBİL TAŞMA DÜZELTMESİ (FİX) 🚨 */
/* ========================================= */

/* 1. Tüm Sayfayı Kitle (Sağa Sola Kayamaz) */
html, body {
    overflow-x: hidden !important; /* Yatay kaydırmayı kapat */
    width: 100% !important;
    max-width: 100% !important;
    position: relative;
}

/* 2. Kategori Filtreleri (Sadece BU Kısım Kaysın) */
@media (max-width: 768px) {
    .category-filters {
        width: 100vw !important; /* Ekran genişliği kadar olsun */
        margin-left: -15px !important; /* Container boşluğunu iptal et (Sola yapışsın) */
        padding-left: 15px !important; /* İçeriği hizala */
        padding-right: 15px !important;
        
        /* Kaydırma Ayarları */
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        
        /* Çubuğu Gizle */
        scrollbar-width: none; 
    }
    .category-filters::-webkit-scrollbar { display: none; }
    
    /* Container Taşmasını Önle */
    .container {
        overflow-x: visible !important; /* İçindeki filtre taşabilsin diye */
    }
}
/* ========================================= */
/* 🚨 TOAST BİLDİRİMİ MOBİL DÜZELTMESİ 🚨 */
/* ========================================= */

@media (max-width: 768px) {
    #toast-container {
        bottom: 90px !important; /* Menünün üstüne çıkacak kadar kaldır */
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 90% !important; /* Mobilde çok kenara yapışmasın */
        z-index: 20000 !important; /* Menünün (z-index) üstünde kalsın */
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    /* Bildirim kutusunu biraz daha güzelleştirelim */
    .toast {
        width: auto !important;
        max-width: 100% !important;
        text-align: center;
        white-space: nowrap;
        background: rgba(30, 41, 59, 0.95) !important; /* Hafif şeffaf siyah */
        backdrop-filter: blur(5px);
    }
}
/* ================================================== */
/* 🚨 MOBİL ÖDEME EKRANI DÜZELTMESİ (SCROLL FIX) 🚨 */
/* ================================================== */

@media (max-width: 768px) {
    /* Kutuyu Tam Ekran Yap */
    .modal-box {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important; /* Ekran boyunu aşmasın */
        border-radius: 0 !important; /* Köşeleri düzle */
        display: flex !important;
        flex-direction: column !important; /* Başlık üstte, içerik altta */
        top: 0 !important;
        transform: none !important; /* Ortalamayı iptal et, tam kaplasın */
    }

    /* Başlık Sabit Kalsın */
    .modal-header {
        flex-shrink: 0; /* Başlık asla büzüşmesin */
        z-index: 10;
        background: white;
    }

    /* İçeriği Kaydırılabilir Yap */
    #paymentForm {
        flex: 1; /* Kalan tüm boşluğu kapla */
        overflow-y: auto !important; /* DİKEY KAYDIRMAYI AÇ */
        padding: 15px !important;
        padding-bottom: 100px !important; /* En alta ekstra boşluk bırak (Butonlar rahat görünsün) */
        -webkit-overflow-scrolling: touch; /* iPhone'da yağ gibi kaysın */
    }
}
/* --- MİNİMAL FAVORİ BUTONU --- */
.fav-btn {
    position: absolute !important;
    top: 8px !important;        /* Yukarıdan boşluk */
    right: 8px !important;      /* Sağdan boşluk */
    width: 32px !important;     /* Küçültüldü */
    height: 32px !important;    /* Küçültüldü */
    border-radius: 50% !important; /* Tam yuvarlak */
    background: rgba(255, 255, 255, 0.95) !important; /* Beyaz zemin */
    border: 1px solid #e2e8f0 !important; /* İnce gri çerçeve */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important; /* Kalp ikonu boyutu */
    color: #cbd5e1 !important;  /* Pasif rengi (Gri) */
    cursor: pointer !important;
    z-index: 10 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
}

/* Üzerine gelince */
.fav-btn:hover {
    transform: scale(1.1);
    color: #ef4444 !important; /* Kırmızı */
    border-color: #ef4444 !important;
}

/* Tıklanınca (Aktif) */
.fav-btn.active {
    color: #ef4444 !important;
    background: #fff0f0 !important; /* Çok açık kırmızı zemin */
    border-color: #ef4444 !important;
}
/* ========================================= */
/* 📸 PREMIUM INSTAGRAM BUTONU 📸 */
/* ========================================= */
.insta-btn-premium {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /* Instagram'ın Orijinal Renkleri */
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white !important; /* Yazı kesin beyaz olsun */
    padding: 12px 24px;
    border-radius: 50px; /* Tam yuvarlak hap şeklinde */
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(220, 39, 67, 0.3); /* Hafif pembe gölge */
    border: 2px solid white; /* Etrafına ince beyaz çizgi (şıklık katar) */
}

.insta-btn-premium:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(220, 39, 67, 0.5);
}

.insta-btn-premium i {
    font-size: 20px; /* İkon boyutu */
}
.whatsapp-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25d366; /* WhatsApp Yeşili */
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    font-size: 30px;
    line-height: 60px; /* İkonu ortalar */
    box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
    z-index: 9999; /* Her şeyin üstünde dursun */
    transition: all 0.3s ease;
}

.whatsapp-btn:hover {
    background-color: #128c7e; /* Üzerine gelince koyulaşır */
    transform: scale(1.1); /* Hafif büyür */
    color: white;
}

/* Dikkat Çeken Nabız Efekti */
.whatsapp-btn::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #25d366;
    border-radius: 50%;
    z-index: -1;
    top: 0;
    left: 0;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.5); opacity: 0; }
}
/* Sadece Telefondan Girenler İçin Özel Ayar */
@media screen and (max-width: 768px) {
    .whatsapp-btn {
        bottom: 75px !important; /* Burayı menünün boyuna göre artırıp azaltabilirsin */
        right: 15px !important;  /* Mobilde sağdan da biraz boşluk bırakalım */
    }
}
/* ========================================= */
/* 📱 MOBİL LOGO KÜÇÜLTME AYARLARI 📱 */
/* ========================================= */

@media (max-width: 768px) {
    
    /* 1. FOOTER KISMI (Sayfa Altı) */
    .payment-logos {
        justify-content: center; /* Ortala */
        gap: 8px !important; /* Aralarındaki boşluğu azalt */
    }

    .payment-logos img {
        height: 20px !important; /* Iyzico resmini küçült (PC'de 30-35ti) */
        width: auto !important;
    }

    .payment-logos i {
        font-size: 24px !important; /* Visa/Mastercard ikonlarını küçült */
    }

    /* 2. ÖDEME EKRANI (Checkout Kutusu) */
    #cc-info-box img {
        height: 25px !important; /* Oradaki logoyu da biraz toparla */
        max-width: 80%; /* Asla kutudan taşmasın */
    }
    
    #cc-info-box .fab {
        font-size: 20px !important; /* Varsa ikonları da küçült */
    }
}