/* =========================================
   GENEL & NAVBAR (AYNI)
   ========================================= */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; }
body { background-color: #f9f9f9; padding-bottom: 80px; overflow-x: hidden; color: #333; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
button { cursor: pointer; border: none; outline: none; }

.navbar { background: #000; color: #fff; height: 70px; display: flex; align-items: center; justify-content: center; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.2); }
.nav-container { width: 90%; max-width: 1400px; display: flex; justify-content: space-between; align-items: center; }
.nav-link { margin-left: 20px; font-weight: 500; font-size: 13px; letter-spacing: 0.5px; text-transform: uppercase; padding: 5px 0; opacity: 0.9; }
.nav-link:hover, .nav-link.active { color: #ff9f43; opacity: 1; }
.mobile-toggle { display: none; background: none; color: white; font-size: 24px; }
.mobile-dropdown { display: none; background: #111; position: fixed; top: 70px; left: 0; width: 100%; flex-direction: column; padding: 20px; z-index: 999; border-top: 1px solid #333; }
.mobile-dropdown.open { display: flex; }
.mobile-dropdown a { color: white; padding: 15px; border-bottom: 1px solid #222; font-size: 15px; }

/* =========================================
   SAYFA VE ORANLAR (GÜNCELLENEN KISIM)
   ========================================= */
.main-content { width: 100%; min-height: 80vh; } 
.page-section { display: none; opacity: 0; transition: opacity 0.4s ease; }
.page-section.active-page { display: block !important; opacity: 1; }

#sapkalar, #kapusonlar, #yakalar, #ponpon, #sizeozel, #katalog, #kurumsal, #iletisim {
    max-width: 1200px; margin: 30px auto; padding: 0 20px;
}
.section-header { font-size: 28px; margin-bottom: 20px; border-left: 5px solid #ff9f43; padding-left: 15px; }

/* 1. SLIDER: 16:9 Oranı (1920x1080) */
.hero-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* Kilit Nokta: Oranı sabitler */
    max-height: 100vh; /* Ekranı taşmasını önler */
    overflow: hidden;
    background: #000;
}
.hero-slider { display: flex; width: 100%; height: 100%; transition: transform 0.5s ease-in-out; }
.hero-slide { min-width: 100%; height: 100%; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; } /* Cover: Oran zaten 16:9 olduğu için kırpmaz */

.slider-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.3); color: #fff; font-size: 24px; padding: 15px; border-radius: 50%; z-index: 10; }
.prev-btn { left: 20px; } .next-btn { right: 20px; }
.slider-dots { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 10; }
.dot { width: 10px; height: 10px; background: rgba(255,255,255,0.4); border-radius: 50%; }
.dot.active { background: #fff; transform: scale(1.3); }

/* 2. ORTA BANNER: 21:9 Oranı (1920x600) */
.single-banner-wrap { 
    position: relative; 
    width: 100%; 
    aspect-ratio: 21 / 9; /* Sinematik Oran */
    overflow: hidden; 
    margin-bottom: 5px; 
    cursor: pointer; 
}
.single-banner-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
.single-banner-wrap:hover img { transform: scale(1.03); }

.overlay-text-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white; z-index: 2; background: rgba(0,0,0,0.2); padding: 40px; border: 1px solid rgba(255,255,255,0.4); }
.btn-overlay { background: transparent; border: 2px solid #fff; color: #fff; padding: 10px 30px; font-weight: bold; }

/* 3. KATEGORİ İÇİ BANNER: 21:9 Oranı (1920x600) */
.category-banner-box { 
    width: 100%; 
    aspect-ratio: 21 / 9; /* İsteğin üzerine eklendi */
    margin-bottom: 30px; 
    border-radius: 8px; 
    overflow: hidden; 
    display: none; 
}
.category-banner-img { width: 100%; height: 100%; object-fit: cover; }
.category-desc { background: #fff; padding: 25px; border-radius: 8px; border: 1px solid #eee; margin-bottom: 30px; color: #555; }

/* 4. İKİLİ KUTULAR: 3:4 Oranı (Dikey) */
.split-showcase-wrap { display: flex; width: 100%; aspect-ratio: 16 / 10; /* PC'de yan yana güzel duruş için */ }
.split-box { 
    flex: 1; 
    position: relative; 
    overflow: hidden; 
    cursor: pointer; 
    border-right: 1px solid #fff; 
    /* Resim Oranı Kontrolü */
}
.split-box img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
.split-box:hover img { transform: scale(1.05); }
.overlay-text-bottom { position: absolute; bottom: 40px; left: 0; width: 100%; text-align: center; color: white; text-shadow: 0 2px 10px rgba(0,0,0,0.6); }

/* MOBİL VE DİĞER (AYNI) */
@media screen and (max-width: 768px) {
    .hero-container { aspect-ratio: 9 / 16; /* Mobilde dikey slider istersen burayı açabilirsin, şimdilik yatay kalsın dersen aspect-ratio: 16/9 kalmalı */ height: auto; }
    .single-banner-wrap { aspect-ratio: 16 / 9; /* Mobilde çok ince kalmasın diye */ }
    .split-showcase-wrap { flex-direction: column; aspect-ratio: auto; }
    .split-box { aspect-ratio: 3 / 4; border-right: none; border-bottom: 5px solid #fff; }
    /* ...Diğer mobil ayarlar... */
    .desktop-menu { display: none; }
    .mobile-toggle { display: block; }
    .product-grid-layout { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .quote-panel { width: 280px !important; right: -20px !important; }
}

/* Sepet ve Grid Stilleri (Değişmedi) */
.product-grid-layout { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.product-card { background: white; border: 1px solid #eee; border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
.product-img-box { width: 100%; aspect-ratio: 4 / 5; background: #f4f4f4; overflow: hidden; }
.product-img-box img { width: 100%; height: 100%; object-fit: cover; }
.product-info { padding: 15px; display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between; }
.quote-add-btn:hover { background-color: #ff9f43 !important; color: white !important; }

/* Floating Buttons */
.floating-container { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 1100; align-items: flex-end; }
.float-btn { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: transform 0.2s; }
.float-btn:hover { transform: scale(1.1); }
.whatsapp-btn { background-color: #25D366; } .map-btn { background-color: #4285F4; }
.quote-wrapper { position: relative; }
.cart-badge { position: absolute; top: -5px; right: -5px; background: red; color: white; border-radius: 50%; width: 20px; height: 20px; font-size: 12px; font-weight: bold; display: flex; align-items: center; justify-content: center; }
.quote-btn { background-color: #ff9f43; color: white; font-size: 20px; }
.quote-panel { display: none; position: absolute; bottom: 60px; right: 0; width: 320px; background: white; border-radius: 10px; box-shadow: 0 5px 25px rgba(0,0,0,0.25); z-index: 2000; overflow: hidden; border: 1px solid #ddd; }
.panel-header { background: #333; color: white; padding: 12px 15px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: bold; }
.clear-cart { cursor: pointer; font-size: 11px; text-decoration: underline; color: #ccc; }
.panel-body { max-height: 300px; overflow-y: auto; padding: 0; }
.panel-body ul { list-style: none; margin: 0; padding: 0; }
.panel-body li { padding: 12px 15px; border-bottom: 1px solid #f1f1f1; font-size: 14px; color: #333; display: flex; justify-content: space-between; align-items: center; }
.empty-msg { text-align: center; color: #999; padding: 20px !important; }
.panel-footer { padding: 15px; background: #f9f9f9; border-top: 1px solid #eee; }
.send-whatsapp-btn { width: 100%; background: #25D366; color: white; padding: 12px; border-radius: 6px; font-weight: bold; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 8px; transition: 0.3s; }
.send-whatsapp-btn:hover { background: #1ebc57; }