@import url("https://fonts.googleapis.com/css2?family=Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap");

/* =========================================
   GENEL & RESET AYARLARI (Lüks ve Akıcı)
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Spartan", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #F5F5F7; 
    background-image: radial-gradient(circle at top left, #FFFFFF 0%, #F5F5F7 50%, #EAECEF 100%);
    background-attachment: fixed;
    color: #1D1D1F;
    transition: background-color 0.5s cubic-bezier(0.25, 1, 0.5, 1), color 0.5s ease;
    overflow-x: hidden;
}

/* =========================================
   TİPOGRAFİ (Modern & Okunabilir)
   ========================================= */
h1 { font-size: 50px; line-height: 1.2; color: #1D1D1F; font-weight: 800; letter-spacing: -1px; }
h2 { font-size: 42px; line-height: 1.3; color: #1D1D1F; font-weight: 700; letter-spacing: -0.5px; }
h4 { font-size: 20px; color: #1D1D1F; font-weight: 600; }
h6 { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #86868B; }
p { font-size: 16px; color: #515154; margin: 15px 0 20px 0; line-height: 1.6; }

/* =========================================
   GENEL BİLEŞENLER
   ========================================= */
.section-p1 { padding: 50px 80px; }
.section-m1 { margin: 50px 0; }
.banners { background-color: transparent; transition: 0.7s; }

/* Butonlar - Premium Hissiyat */
button.normal {
    font-size: 15px;
    font-weight: 600;
    padding: 16px 32px;
    color: #fff;
    background-color: #007AFF;
    border-radius: 100px; /* Hap Tasarım */
    cursor: pointer;
    border: none;
    outline: none;
    box-shadow: 0 8px 20px rgba(0, 122, 255, 0.25);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
#normal-button:hover, button.normal:hover { 
    background-color: #005bb5; 
    box-shadow: 0 12px 25px rgba(0, 122, 255, 0.4); 
    transform: translateY(-2px); 
}

button.white {
    font-size: 14px;
    font-weight: 600;
    padding: 12px 24px;
    color: #1D1D1F;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 100px;
    transition: all 0.3s ease;
}
button.white:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

/* Switch (iOS Tarzı Toggle) */
.switch { position: relative; display: inline-block; width: 54px; height: 30px; margin-left: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #E9E9EB; border-radius: 34px; transition: 0.4s; box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); }
.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 2px; bottom: 2px; background-color: white; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
input:checked + .slider { background-color: #34C759; }
input:checked + .slider:before { transform: translateX(24px); }

/* Custom Popup (SweetAlert/Modallar İçin - Orijinal Classlar Korundu) */
.custom-popup { 
    background: rgba(255, 255, 255, 0.85) !important; 
    backdrop-filter: blur(25px) !important; 
    -webkit-backdrop-filter: blur(25px) !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    box-shadow: 0 25px 50px rgba(0,0,0,0.1) !important;
    color: #1D1D1F !important; 
}
.custom-title { color: #1D1D1F !important; font-weight: 700 !important; }
.custom-content { color: #515154 !important; }
.custom-footer a { color: #007AFF !important; font-weight: 600 !important; }
.custom-confirm-button {
    background-color: #007AFF !important;
    color: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 8px 15px rgba(0, 122, 255, 0.2) !important;
    transition: all 0.3s ease !important;
}
.custom-confirm-button:hover { transform: scale(1.05) !important; }

/* Karusel / Slider Sistemi */
.carousel-grid {
    margin-left: 10%; margin-right: 10%;
    display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: center; padding-top: 2%;
}
.main-slide, .mini-slides { border-radius: 24px; overflow: hidden; box-shadow: 0 15px 35px rgba(0,0,0,0.06); }
.main-slide:hover img, .carousel-item:nth-child(1):hover img, .carousel-item:nth-child(2):hover img {
    transform: scale(1.03); transition: 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.mini-slides { display: flex; flex-direction: column; gap: 24px; box-shadow: none; border-radius: 0; }
.main-slide .carousel-item { display: none; animation: fadeIn 0.8s ease-in-out forwards; }

@keyframes fadeIn { 0% { opacity: 0; transform: scale(0.98); } 100% { opacity: 1; transform: scale(1); } }

.carousel-item { position: relative; width: 100%; overflow: hidden; border-radius: 24px; box-shadow: 0 15px 35px rgba(0,0,0,0.06); }
.carousel-item img { width: 100%; height: auto; display: block; border-radius: 24px; transition: transform 0.8s ease; }
.carousel-caption {
    position: absolute; bottom: 15px; left: 15px; 
    background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    color: white; padding: 12px 20px; border-radius: 16px; width: calc(100% - 30px); font-weight: 500;
}

/* =========================================
   SAYFA BÖLÜMLERİ (Layout)
   ========================================= */

/* Header & Navbar (Glassmorphism) */
#header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 80px; 
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    z-index: 999; position: sticky; top: 0; left: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
}
.logo { height: 75px; object-fit: contain; }

#navbar { display: flex; align-items: center; justify-content: center; }
#navbar li { list-style: none; padding: 0 20px; position: relative; align-items: center; }
#navbar li a { text-decoration: none; font-size: 15px; font-weight: 600; color: #1D1D1F; transition: 0.3s ease; }
#navbar li a:hover, #navbar li a.active { color: #007AFF; }
#navbar li a.active::after, #navbar li a:hover::after {
    content: ""; width: 24px; height: 3px; background: #007AFF; 
    position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); border-radius: 50px;
}
.fa-circle-user { color: #1D1D1F; font-size: 22px; transition: 0.3s ease; }
.fa-circle-user:hover { color: #007AFF; transform: scale(1.1); }

#mobile, #close { display: none; }

/* =========================================
   ARAMA KUTUSU VE AÇILAN LİSTE (LIGHT MODE)
   ========================================= */
.search-container {
    position: relative !important;
    margin-left: 20px !important;
    display: flex !important;
    align-items: center !important;
}

#search-input {
    width: 260px !important;
    padding: 12px 20px !important;
    border-radius: 100px !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    background: #F5F5F7 !important;
    color: #1D1D1F !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    outline: none !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
}

#search-input::placeholder {
    color: #86868B !important;
}

#search-input:focus {
    background: #fff !important;
    border-color: #007AFF !important;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.15) !important;
    width: 280px !important; /* Odaklanınca hafifçe uzar */
}

#suggestions, .suggestions-list {
    position: absolute !important;
    top: calc(100% + 15px) !important; /* Kutunun biraz altından başlar */
    left: 0 !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
    z-index: 9999 !important;
    overflow: hidden !important;
}

/* Liste elemanlarının stili (PHP içindeki div veya a etiketleri için) */
#suggestions div, #suggestions a, .suggestions-list div, .suggestions-list a {
    display: block !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
    color: #515154 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border-bottom: 1px solid rgba(0,0,0,0.03) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

#suggestions div:last-child, #suggestions a:last-child, 
.suggestions-list div:last-child, .suggestions-list a:last-child {
    border-bottom: none !important;
}

#suggestions div:hover, #suggestions a:hover, 
.suggestions-list div:hover, .suggestions-list a:hover {
    background: rgba(0, 122, 255, 0.05) !important;
    color: #007AFF !important;
    padding-left: 28px !important; /* Hover olunca metin hafif sağa kayar */
}

/* Hero Section */
#hero {
    background: transparent;
    height: 85vh; width: 100%; padding: 0 80px;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center; position: relative; overflow: hidden;
}
#hero h4 { padding-bottom: 15px; color: #86868B; }
#hero h1 { color: #007AFF; margin-bottom: 20px; }
#hero button {
    background-color: #007AFF; background-image: none; color: #fff;
    border: 0; padding: 18px 40px; border-radius: 100px; cursor: pointer; font-weight: 700; font-size: 16px;
    box-shadow: 0 10px 20px rgba(0, 122, 255, 0.3); transition: all 0.4s ease;
}
#hero button:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(0, 122, 255, 0.4); }

.img-box { width: 45%; height: 80%; position: absolute; bottom: 0; right: 100px; }
.img-box img { height: 100%; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); transition: bottom 1s cubic-bezier(0.25, 1, 0.5, 1), left 1s cubic-bezier(0.25, 1, 0.5, 1); filter: drop-shadow(0 20px 30px rgba(0,0,0,0.15)); }
.img-box:hover .back-img { bottom: 40px; }
.img-box:hover .main-img { left: 54%; }

/* Feature Section */
#feature {
    display: flex; align-items: center; justify-content: center; gap: 30px; flex-wrap: wrap;
    width: 100%; padding: 60px 10%; background-color: transparent;
}
#feature .fe-box, #feature .fe-box2 {
    position: relative; text-align: center; 
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
    border-radius: 28px; background-color: #fff; overflow: hidden;
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); border: 1px solid rgba(0,0,0,0.02);
}
#feature .fe-box { width: 220px; height: 220px; }
#feature .fe-box2 { width: 500px; height: 500px; }
#feature .fe-box:hover, #feature .fe-box2:hover { transform: translateY(-10px); box-shadow: 0 30px 60px rgba(0, 122, 255, 0.1); }
#feature .fe-box img, #feature .fe-box2 img { width: 100%; border-radius: 28px; transition: filter 0.5s ease; }

.overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center; opacity: 0;
    background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(5px); transition: all 0.6s ease;
}
#feature .fe-box:hover .overlay, #feature .fe-box2:hover .overlay { opacity: 1; }

.inspect-button, .inspect-button2 {
    padding: 12px 24px; background: rgba(255,255,255,0.2); backdrop-filter: blur(10px);
    color: white; border-radius: 100px; cursor: pointer; transition: 0.4s ease; font-weight: 600;
}
.inspect-button { border: 1px solid rgba(255,255,255,0.5); }
.inspect-button:hover { background: #fff; color: #1D1D1F; border: 1px solid #fff; transform: scale(1.05); }
.inspect-button2 { border: 0px; background: #007AFF; }
.inspect-button2:hover { background: #005bb5; transform: scale(1.05); }

/* Products Section (Kart Tasarımları) */
#product1 { text-align: center; padding-top: 40px; }
#product1 .pro-container { display: flex; justify-content: center; gap: 25px; padding: 20px 5%; flex-wrap: wrap; }
#product1 .pro {
    background: #FFFFFF; width: 22%; min-width: 260px; padding: 15px;
    border-radius: 24px; cursor: pointer; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); border: 1px solid rgba(0,0,0,0.03);
    margin: 15px 0; transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; overflow: hidden;
}
#product1 .pro:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); border-color: rgba(0,122,255,0.1); }
#product1 .pro img { width: 100%; border-radius: 16px; transition: transform 0.6s ease; object-fit: cover; background-color: #F5F5F7; }
#product1 .pro:hover img { transform: scale(1.04); }

#product1 .pro .des { text-align: start; padding: 15px 5px 5px 5px; }
#product1 .pro .des span { color: #86868B; font-size: 13px; font-weight: 500; }
#product1 .pro .des h5 { padding-top: 5px; color: #1D1D1F; font-size: 16px; font-weight: 700; }
#product1 .pro .des i { font-size: 12px; color: #FF9F0A; margin-top: 5px; }
#product1 .pro .des h4 { padding-top: 10px; font-size: 18px; font-weight: 800; color: #007AFF; }

#product1 .pro .cart {
    width: 44px; height: 44px; line-height: 44px; border-radius: 50%; 
    background-color: #F5F5F7; font-weight: 600; color: #1D1D1F; 
    border: none; position: absolute; bottom: 15px; right: 15px; 
    transition: all 0.3s ease; display: flex; align-items: center; justify-content: center;
}
#product1 .pro .cart:hover { background-color: #007AFF; color: #fff; transform: rotate(10deg) scale(1.1); box-shadow: 0 5px 15px rgba(0,122,255,0.3); }

/* Banners */
#banner {
    display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
    background-image: url(img/banner/b2.jpg); width: 100%; height: 40vh; background-size: cover; background-position: center;
    position: relative;
}
#banner::before { content: ''; position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.4); }
#banner h4, #banner h2, #banner button { position: relative; z-index: 2; }
#banner h4 { color: #F5F5F7; font-size: 18px; font-weight: 500; }
#banner h2 { color: #fff; font-size: 36px; padding: 10px 0; font-weight: 800; }
#banner h2 span { color: #FF3B30; }

#sm-banner { display: flex; justify-content: space-between; flex-wrap: wrap; padding: 40px 5%; gap: 20px; }
#sm-banner .banner-box {
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    background-color: #fff; border-radius: 28px; width: 48%; min-width: 580px; height: 40vh; 
    background-size: cover; background-position: center; padding: 40px; box-shadow: 0 15px 35px rgba(0,0,0,0.05); position: relative; overflow: hidden;
    transition: 0.5s ease;
}
#sm-banner .banner-box:hover { transform: translateY(-5px); box-shadow: 0 25px 50px rgba(0,0,0,0.1); }
#sm-banner h4 { color: #fff; font-size: 22px; font-weight: 500; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
#sm-banner h2 { color: #fff; font-size: 32px; font-weight: 800; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
#sm-banner span { color: #F5F5F7; font-size: 15px; font-weight: 600; padding-bottom: 20px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
#sm-banner .banner-box:hover button { background-color: #007AFF; border: 1px solid #007AFF; color: #fff; }

#banner3 { display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0 5%; gap: 20px; margin-bottom: 40px; }
#banner3 .banner-box {
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    background-image: url(img/banner/b7.jpg); width: 31%; height: 30vh; background-size: cover; background-position: center; 
    padding: 30px; border-radius: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); position: relative; transition: 0.4s ease;
}
#banner3 .banner-box:hover { transform: scale(1.02); }
#banner3 .banner-box2 { background-image: url(img/banner/b4.jpg); }
#banner3 .banner-box3 { background-image: url(img/banner/b18.jpg); }
#banner3 h2 { color: #fff; font-weight: 900; font-size: 24px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
#banner3 h3 { color: #FF3B30; font-weight: 800; font-size: 16px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }

/* Newsletter (Haber Bülteni) */
#newsletter {
    display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;
    background: #1D1D1F; padding: 60px 80px; border-radius: 30px; margin: 40px 5%;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    background-image: url(img/banner/b14.png); background-repeat: no-repeat; background-position: 20% 30%;
}
#newsletter h4 { font-size: 26px; font-weight: 700; color: #fff; margin-bottom: 10px; }
#newsletter p { font-size: 15px; font-weight: 500; color: #86868B; }
#newsletter p span { color: #007AFF; }
#newsletter .form { display: flex; width: 45%; background: #2C2C2E; border-radius: 100px; padding: 5px; border: 1px solid rgba(255,255,255,0.1); }
#newsletter input { height: 50px; padding: 0 25px; font-size: 15px; width: 100%; border: none; outline: none; background: transparent; color: #fff; border-radius: 100px; }
#newsletter button { background-color: #007AFF; color: #fff; border-radius: 100px; padding: 0 35px; font-weight: 600; transition: 0.3s; }
#newsletter button:hover { background-color: #005bb5; }

/* Footer */
footer { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 60px 5%; background: #fff; border-top: 1px solid rgba(0,0,0,0.05); }
footer .col { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 30px; }
footer .logo { margin-bottom: 25px; height: 60px; }
footer h4 { font-size: 16px; padding-bottom: 20px; font-weight: 700; color: #1D1D1F; }
footer p { font-size: 14px; margin: 0 0 10px 0; color: #515154; }
footer a { font-size: 14px; text-decoration: none; color: #515154; margin-bottom: 12px; transition: 0.3s; font-weight: 500; }
footer a:hover { color: #007AFF; transform: translateX(5px); }
footer .follow { margin-top: 20px; }
footer .follow i { color: #1D1D1F; padding-right: 15px; cursor: pointer; font-size: 18px; transition: 0.3s; }
footer .follow i:hover { color: #007AFF; transform: translateY(-3px); }
footer .install .row img { border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; transition: 0.3s; cursor: pointer; }
footer .install .row img:hover { border-color: #007AFF; }
footer .install img { margin: 10px 0 15px 0; }
footer .copyright { width: 100%; text-align: center; padding-top: 20px; border-top: 1px solid rgba(0,0,0,0.05); color: #86868B; font-size: 13px; margin-top: 20px; }

/* Alt Sayfalar İçin Ekstra Stiller (Blog, Ürün Detay, Sepet vs.) */
#page-header { background-image: url(img/banner/b1.jpg); width: 100%; height: 40vh; background-size: cover; display: flex; justify-content: center; text-align: center; flex-direction: column; padding: 20px; position: relative; }
#page-header::before { content: ''; position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.5); }
#page-header h2, #page-header p { color: #fff; position: relative; z-index: 1; text-shadow: 0 2px 10px rgba(0,0,0,0.3); }

#pagination { text-align: center; margin: 40px 0; }
#pagination a { text-decoration: none; background-color: #007AFF; padding: 16px 24px; border-radius: 12px; color: #fff; font-weight: 600; box-shadow: 0 5px 15px rgba(0,122,255,0.2); transition: 0.3s; margin: 0 5px; }
#pagination a:hover { background-color: #005bb5; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,122,255,0.3); }

/* Ürün Detay (Prodetails) */
#prodetails { display: flex; margin-top: 40px; padding: 0 5%; gap: 60px; }
#prodetails .single-pro-image { width: 45%; }
#prodetails .single-pro-image img { border-radius: 24px; box-shadow: 0 15px 35px rgba(0,0,0,0.05); margin-bottom: 20px; }
.small-img-group { display: flex; justify-content: space-between; gap: 15px; }
.small-img-col { flex-basis: 24%; cursor: pointer; border-radius: 12px; overflow: hidden; transition: 0.3s; border: 2px solid transparent; }
.small-img-col:hover { border-color: #007AFF; transform: translateY(-2px); }
#prodetails .single-pro-details { width: 50%; padding-top: 20px; }
#prodetails .single-pro-details h4 { padding: 20px 0 15px 0; font-size: 22px; }
#prodetails .single-pro-details h2 { font-size: 36px; font-weight: 800; margin-bottom: 20px; }
#prodetails .single-pro-details select { display: block; padding: 14px 20px; border-radius: 14px; border: 1px solid rgba(0,0,0,0.1); outline: none; font-size: 15px; margin-bottom: 20px; width: 100%; max-width: 300px; background: #fff; cursor: pointer; }
#prodetails .single-pro-details input { width: 70px; height: 50px; padding-left: 15px; font-size: 16px; margin-right: 15px; border-radius: 14px; border: 1px solid rgba(0,0,0,0.1); outline: none; }
#prodetails .single-pro-details button { background: #007AFF; color: #fff; border-radius: 100px; padding: 16px 35px; font-weight: 600; border: none; cursor: pointer; transition: 0.3s; box-shadow: 0 10px 20px rgba(0,122,255,0.25); }
#prodetails .single-pro-details button:hover { background: #005bb5; transform: translateY(-2px); box-shadow: 0 15px 30px rgba(0,122,255,0.35); }
#prodetails .single-pro-details span { line-height: 1.8; color: #515154; display: block; margin-top: 20px; font-size: 15px; }

/* Blog */
#blog { padding: 80px 10% 0 10%; }
#blog .blog-box { display: flex; align-items: center; width: 100%; position: relative; padding-bottom: 80px; }
#blog .blog-img { width: 45%; margin-right: 50px; border-radius: 24px; overflow: hidden; box-shadow: 0 15px 35px rgba(0,0,0,0.06); }
#blog img { width: 100%; height: 350px; object-fit: cover; transition: 0.5s; display: block; }
#blog .blog-img:hover img { transform: scale(1.05); }
#blog .blog-details { width: 55%; }
#blog .blog-details h4 { font-size: 28px; font-weight: 700; margin-bottom: 15px; }
#blog .blog-details a { text-decoration: none; font-size: 13px; color: #1D1D1F; font-weight: 700; position: relative; transition: 0.3s; text-transform: uppercase; letter-spacing: 1px; }
#blog .blog-details a::after { content: ""; width: 50px; height: 2px; background-color: #1D1D1F; position: absolute; top: 50%; right: -65px; transform: translateY(-50%); transition: 0.3s; }
#blog .blog-details a:hover { color: #007AFF; }
#blog .blog-details a:hover::after { background-color: #007AFF; width: 70px; }
#blog .blog-box h1 { position: absolute; top: -50px; left: 0; font-size: 100px; font-weight: 900; color: rgba(0,0,0,0.03); z-index: -9; }

/* Hakkımızda & İletişim */
#about-head { display: flex; align-items: center; gap: 50px; padding: 60px 5%; }
#about-head img { width: 45%; height: auto; border-radius: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.08); }
#about-head div { padding-left: 20px; }
#about-app { text-align: center; padding: 40px 5%; }
#about-app .video { width: 70%; height: 100%; margin: 30px auto 0 auto; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.15); }
#about-app .video video { width: 100%; height: 100%; display: block; }
#about-app a { color: #007AFF; font-weight: 600; }

#contact-details { display: flex; align-items: flex-start; justify-content: space-between; padding: 60px 5%; gap: 50px; }
#contact-details .details { width: 40%; background: #fff; padding: 40px; border-radius: 28px; box-shadow: 0 15px 35px rgba(0,0,0,0.04); }
#contact-details .details span, #form-details form span { font-size: 13px; color: #86868B; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
#contact-details .details h2, #form-details form h2 { font-size: 32px; line-height: 1.2; padding: 15px 0; font-weight: 800; }
#contact-details .details h3 { font-size: 18px; padding-bottom: 20px; font-weight: 600; }
#contact-details .details li { list-style: none; display: flex; padding: 15px 0; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.03); }
#contact-details .details li:last-child { border: none; }
#contact-details .details li i { font-size: 18px; padding-right: 20px; color: #007AFF; }
#contact-details .details li p { margin: 0; font-size: 15px; color: #515154; }
#contact-details .map { width: 55%; height: 450px; border-radius: 28px; overflow: hidden; box-shadow: 0 15px 35px rgba(0,0,0,0.08); }
#contact-details .map iframe { width: 100%; height: 100%; border: none; filter: grayscale(20%); }

/* Formlar ve Cart Sistemi (Orijinal ID/Class'lar korundu) */
#form-details { display: flex; justify-content: space-between; margin: 40px 5%; padding: 60px; background: #fff; border-radius: 30px; box-shadow: 0 20px 50px rgba(0,0,0,0.05); }
#form-details form { width: 60%; display: flex; flex-direction: column; align-items: flex-start; }
#form-details form input, #form-details form textarea { width: 100%; padding: 16px 20px; outline: none; margin-bottom: 20px; border: 1px solid rgba(0,0,0,0.1); border-radius: 16px; font-size: 15px; background: #F5F5F7; transition: 0.3s; }
#form-details form input:focus, #form-details form textarea:focus { border-color: #007AFF; box-shadow: 0 0 0 4px rgba(0,122,255,0.1); background: #fff; }
#form-details form button { background-color: #007AFF; color: #fff; border-radius: 100px; padding: 16px 40px; }
.people { width: 35%; display: flex; flex-direction: column; gap: 20px; }
.people div { display: flex; align-items: flex-start; gap: 15px; }
.people div img { width: 65px; height: 65px; object-fit: cover; border-radius: 50%; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.people div p { margin: 0; font-size: 14px; line-height: 1.4; }
.people div p span { display: block; font-size: 16px; font-weight: 700; color: #1D1D1F; margin-bottom: 5px; }

/* Sepet Tablosu (Varsayılan ID'ler) */
#cart { overflow-x: auto; padding: 40px 5%; }
#cart table { width: 100%; border-collapse: collapse; table-layout: fixed; white-space: nowrap; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.03); }
#cart table img { width: 70px; border-radius: 12px; }
#cart table td:nth-child(1) { width: 100px; text-align: center; }
#cart table td:nth-child(2) { width: 150px; text-align: center; }
#cart table td:nth-child(3) { width: 250px; text-align: center; font-weight: 600; }
#cart table td:nth-child(4), #cart table td:nth-child(5), #cart table td:nth-child(6) { width: 150px; text-align: center; }
#cart table td:nth-child(5) input { width: 70px; padding: 10px 5px; text-align: center; border-radius: 10px; border: 1px solid #ddd; outline: none; }
#cart table thead { border: 1px solid rgba(0,0,0,0.05); border-left: none; border-right: none; background: #F5F5F7; }
#cart table thead td { font-weight: 700; text-transform: uppercase; font-size: 13px; padding: 18px 0; color: #86868B; letter-spacing: 1px; }
#cart table tbody tr { border-bottom: 1px solid rgba(0,0,0,0.03); transition: 0.3s; }
#cart table tbody tr:hover { background: #fcfcfc; }
#cart table tbody td { padding: 20px 0; font-size: 15px; }
#cart table tbody td i { font-size: 18px; color: #FF3B30; cursor: pointer; transition: 0.3s; }
#cart table tbody td i:hover { transform: scale(1.2); }

#cart-add { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 40px 5%; gap: 30px; }
#coupon { width: 50%; margin-bottom: 30px; }
#coupon h3, #subtotal h3 { padding-bottom: 20px; font-size: 22px; font-weight: 700; }
#coupon div { display: flex; gap: 10px; }
#coupon input { padding: 15px 20px; outline: none; width: 60%; margin-right: 10px; border: 1px solid rgba(0,0,0,0.1); border-radius: 14px; font-size: 15px; }
#coupon button { background-color: #007AFF; color: #fff; padding: 15px 30px; border-radius: 100px; }
#subtotal { width: 40%; margin-bottom: 30px; border: 1px solid rgba(0,0,0,0.05); padding: 40px; background: #fff; border-radius: 28px; box-shadow: 0 15px 35px rgba(0,0,0,0.04); }
#subtotal table { border-collapse: collapse; width: 100%; margin-bottom: 20px; }
#subtotal table td { width: 50%; border: 1px solid rgba(0,0,0,0.05); padding: 15px; font-size: 15px; }
#subtotal table td:nth-child(1) { font-weight: 600; color: #515154; background: #F5F5F7; }
#subtotal table td:nth-child(2) { text-align: right; font-weight: 700; }
#subtotal button { background-color: #34C759; color: #fff; width: 100%; padding: 16px; border-radius: 100px; font-size: 16px; box-shadow: 0 8px 20px rgba(52, 199, 89, 0.3); }

/* Register Popup (Kayıt Ol Modalı - Animasyon ve Sınıflar Korundu) */
.register { display: none; opacity: 0; animation: slideTop 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
.register-show {
    display: block; opacity: 1; animation: slideTop 0.8s cubic-bezier(0.25, 1, 0.5, 1); position: fixed;
    top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; padding: 50px;
    background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255,255,255,0.4); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15); border-radius: 30px;
}
.register label input { width: 300px; margin-top: 20px; display: block; padding: 16px 20px; border: 1px solid rgba(0,0,0,0.1); border-radius: 16px; font-size: 15px; background: #F5F5F7; transition: 0.3s; }
.register label:first-child input { margin-top: 0px; }
.register label input:focus { padding: 16px 20px; outline: none; border-color: #007AFF; box-shadow: 0 0 0 4px rgba(0,122,255,0.1); background: #fff; }
.registerb {
    background-color: #007AFF; padding: 16px 24px; border: none; font-weight: 600; font-size: 15px;
    border-radius: 100px; margin: 0 auto; margin-top: 25px; color: #fff; transition: .3s; cursor: pointer; display: inline-block;
    box-shadow: 0 8px 20px rgba(0,122,255,0.3);
}
.registerb:last-child { margin-left: 15px; background-color: #1D1D1F; box-shadow: 0 8px 20px rgba(0,0,0,0.2); }
.registerb:hover { transform: translateY(-2px); box-shadow: 0 12px 25px rgba(0,122,255,0.4); }
.registerb:last-child:hover { background-color: #000; box-shadow: 0 12px 25px rgba(0,0,0,0.3); }
.register-logo { width: 240px; max-width: 80%; display: block; margin: 0 auto 30px auto; }

@keyframes slideTop {
    0% { transform: translateY(-100px) translate(-50%, -50%); opacity: 0; }
    100% { transform: translateY(0px) translate(-50%, -50%); opacity: 1; }
}

/* =========================================
   KARANLIK MOD (OLED & LUXURY DARK)
   Tüm classlar JS uyumlu korundu!
   ========================================= */
body.dark-mode { 
    background-color: #0B0D14; 
    background-image: radial-gradient(circle at top right, rgba(30, 35, 50, 0.8) 0%, #0B0D14 70%);
    background-attachment: fixed;
    color: #F5F5F7; 
    transition: background-color 0.5s ease; 
}
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: #fff; }
body.dark-mode p { color: #A1A1A6; }

/* Dark Header */
body.dark-mode #header { background: rgba(28, 28, 30, 0.75); border-bottom: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 0 1px 30px rgba(0,0,0,0.8); }
body.dark-mode #navbar li a { color: #F5F5F7; }
body.dark-mode #navbar li a:hover, body.dark-mode #navbar li a.active { color: #0A84FF; }
body.dark-mode #navbar li a.active::after, body.dark-mode #navbar li a:hover::after { background: #0A84FF; }
body.dark-mode .fa-circle-user { color: #fff; transition: 0.3s ease; }
body.dark-mode .fa-circle-user:hover { color: #0A84FF; }

/* Dark Hero & Feature */
body.dark-mode #hero { 
    background: transparent; 
}
body.dark-mode #hero button { color: #fff; background-color: #0A84FF; box-shadow: 0 10px 20px rgba(10, 132, 255, 0.3); }
body.dark-mode #feature { background-color: transparent; }
body.dark-mode #feature .fe-box, body.dark-mode #feature .fe-box2 { background: #1C1C1E; border: 1px solid rgba(255,255,255,0.05); box-shadow: 0 20px 40px rgba(0,0,0,0.5); }
body.dark-mode #feature .fe-box h6 { color: #fff; }

/* Dark Products */
body.dark-mode #product1 .pro { background: #1C1C1E; border: 1px solid rgba(255,255,255,0.05); box-shadow: 0 10px 30px rgba(0,0,0,0.6); }
body.dark-mode #product1 .pro:hover { box-shadow: 0 20px 40px rgba(0,0,0,0.8); border: 1px solid rgba(255,255,255,0.1); }
body.dark-mode #product1 .pro img { background-color: #2C2C2E; }
body.dark-mode #product1 .pro .des span { color: #A1A1A6; }
body.dark-mode #product1 .pro .des h5 { color: #F5F5F7; }
body.dark-mode #product1 .pro .des h4 { color: #0A84FF; }
body.dark-mode #product1 .pro .cart { background-color: #2C2C2E; color: #F5F5F7; }
body.dark-mode #product1 .pro .cart:hover { background-color: #0A84FF; color: #fff; }

/* Dark Buttons & Miscellaneous */
body.dark-mode button.normal { background-color: #0A84FF; color: #fff; }
body.dark-mode button.white { background: rgba(44, 44, 46, 0.8); color: #fff; border-color: rgba(255,255,255,0.1); }
body.dark-mode .inspect-button { border-color: rgba(255,255,255,0.3); }
body.dark-mode .inspect-button:hover { color: #1D1D1F; background: #fff; }
body.dark-mode #prodetails .single-pro-details button { background: #0A84FF; }
body.dark-mode #prodetails .single-pro-details select, body.dark-mode #prodetails .single-pro-details input { background: #1C1C1E; color: #fff; border-color: rgba(255,255,255,0.1); }

/* Dark Footer & Blog */
body.dark-mode footer { background: #000; border-top: 1px solid rgba(255,255,255,0.05); }
body.dark-mode footer h4, body.dark-mode footer p { color: #fff; }
body.dark-mode footer a, body.dark-mode footer i { color: #A1A1A6; }
body.dark-mode footer .follow i:hover, body.dark-mode footer a:hover { color: #0A84FF; }
body.dark-mode footer .install .row img { border-color: rgba(255,255,255,0.1); }
body.dark-mode #blog .blog-details a { color: #fff; }
body.dark-mode #blog .blog-details a::after { background-color: #fff; }
body.dark-mode #blog .blog-details a:hover { color: #0A84FF; }
body.dark-mode #blog .blog-details a:hover::after { background-color: #0A84FF; }

/* Dark Forms & Cart */
body.dark-mode marquee { color: #fff; }
body.dark-mode #form-details { background: #1C1C1E; border: 1px solid rgba(255,255,255,0.05); box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
body.dark-mode #form-details form input, body.dark-mode #form-details form textarea { background: #2C2C2E; color: #fff; border-color: rgba(255,255,255,0.1); }
body.dark-mode #form-details .people div p span { color: #fff; }
body.dark-mode #contact-details .details { background: #1C1C1E; box-shadow: 0 15px 35px rgba(0,0,0,0.5); }
body.dark-mode #contact-details .details p, body.dark-mode #contact-details .details h3 { color: #A1A1A6; }
body.dark-mode #cart table { background: #1C1C1E; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
body.dark-mode #cart table thead { background: #2C2C2E; border-color: rgba(255,255,255,0.05); }
body.dark-mode #cart table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.05); }
body.dark-mode #cart table tbody tr:hover { background: #2C2C2E; }
body.dark-mode #cart table td:nth-child(5) input { background: #2C2C2E; color: #fff; border-color: rgba(255,255,255,0.1); }
body.dark-mode #subtotal { background: #1C1C1E; border-color: rgba(255,255,255,0.05); box-shadow: 0 15px 35px rgba(0,0,0,0.5); }
body.dark-mode #subtotal table td { border-color: rgba(255,255,255,0.05); color: #fff; }
body.dark-mode #subtotal table td:nth-child(1) { background: #2C2C2E; color: #A1A1A6; }
body.dark-mode #coupon input { background: #1C1C1E; color: #fff; border-color: rgba(255,255,255,0.1); }

/* Dark Register & Popups */
body.dark-mode .register-show { background: rgba(28, 28, 30, 0.9); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); }
body.dark-mode .register label input { background-color: #000; border: 1px solid #333; color: #fff; }
body.dark-mode .register label input:focus { border-color: #0A84FF; box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.2); }
body.dark-mode .registerb:hover { box-shadow: 0 12px 25px rgba(10, 132, 255, 0.3); }
body.dark-mode .custom-popup { background: rgba(28, 28, 30, 0.85) !important; border: 1px solid rgba(255,255,255,0.1) !important; }
body.dark-mode .custom-title { color: #fff !important; }
body.dark-mode .custom-content { color: #A1A1A6 !important; }
body.dark-mode .custom-footer a { color: #0A84FF !important; }
body.dark-mode .slider { background-color: #39393D; }
/* =========================================
   ARAMA KUTUSU VE AÇILAN LİSTE (DARK MODE)
   ========================================= */
body.dark-mode #search-input {
    background: rgba(28, 28, 30, 0.6) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #F5F5F7 !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2) !important;
}

body.dark-mode #search-input::placeholder {
    color: #A1A1A6 !important;
}

body.dark-mode #search-input:focus {
    background: #1C1C1E !important;
    border-color: #0A84FF !important;
    box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.2) !important;
}

body.dark-mode #suggestions, body.dark-mode .suggestions-list {
    background: rgba(28, 28, 30, 0.85) !important;
    border-color: rgba(255,255,255,0.1) !important;
    box-shadow: 0 25px 50px rgba(0,0,0,0.6) !important;
}

body.dark-mode #suggestions div, body.dark-mode #suggestions a,
body.dark-mode .suggestions-list div, body.dark-mode .suggestions-list a {
    color: #A1A1A6 !important;
    border-bottom-color: rgba(255,255,255,0.05) !important;
}

body.dark-mode #suggestions div:hover, body.dark-mode #suggestions a:hover,
body.dark-mode .suggestions-list div:hover, body.dark-mode .suggestions-list a:hover {
    background: rgba(10, 132, 255, 0.15) !important;
    color: #0A84FF !important;
}

/* =====================================================================
   KUSURSUZ "SUPER RESPONSIVE" MEDİA SORGULARI (SON VE HATASIZ SÜRÜM)
   Her ekran boyutunda esneyen akıcı tasarım mimarisi.
   ===================================================================== */

/* --- 1. BÜYÜK TABLETLER & KÜÇÜK LAPTOPLAR (Max: 1200px) --- */
@media (max-width: 1200px) {
    .section-p1 { padding: 40px 5%; }
    .carousel-grid { margin-left: 5%; margin-right: 5%; gap: 15px; }
    
    #sm-banner .banner-box { min-width: 45%; } 
    #product1 .pro { width: 30%; }
}

/* --- 2. TABLETLER & YATAY MOBİL (Max: 1024px) --- */
@media (max-width: 1024px) {
    h1 { font-size: 40px; }
    h2 { font-size: 32px; }
    
    #hero { height: auto; padding: 100px 5%; text-align: center; align-items: center; }
    .img-box { display: none; } 
    
    #header { padding: 15px 5%; position: sticky; top: 0; z-index: 999; }
    
    #mobile { display: flex; align-items: center; }
    #mobile i { color: #1D1D1F; font-size: 26px; margin-left: 20px; cursor: pointer; transition: 0.3s; }
    body.dark-mode #mobile i { color: #fff; }
    
    #navbar {
        display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
        position: fixed; top: 0; right: -100%; width: 300px; height: 100vh;
        background: rgba(245, 245, 247, 0.95); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
        box-shadow: -10px 0 30px rgba(0,0,0,0.1); padding: 80px 30px; transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); z-index: 9999;
    }
    body.dark-mode #navbar { background: rgba(28, 28, 30, 0.95); box-shadow: -10px 0 30px rgba(0,0,0,0.6); }
    #navbar.active { right: 0; }
    
    #navbar li { margin-bottom: 25px; width: 100%; padding: 0; display: block; text-align: left; }
    
    /* AKTİF LİNK ÇİZGİSİ KAYMA SORUNU ÇÖZÜMÜ */
    #navbar li a { display: inline-block; position: relative; }
    #navbar li a.active::after, #navbar li a:hover::after {
        left: 0 !important; /* Çizgiyi yazının en solundan başlatır */
        transform: none !important; /* Sağa kaymasını (ortalanmayı) iptal eder */
        width: 30px !important; /* Çizgi genişliği */
    }

    /* MENÜ KAPATMA (X) BUTONU RENK DÜZELTMESİ */
    #close { 
        display: block; 
        position: absolute; 
        top: 25px; 
        left: 25px; 
        font-size: 28px; /* Tıklaması kolay olsun diye biraz büyütüldü */
        cursor: pointer; 
        color: #1D1D1F !important; /* Gündüz modu sabit renk */
        transition: color 0.3s ease;
    }
    body.dark-mode #close { color: #fff !important; } /* Gece modu sabit renk */
    
    /* İKONLARIN VE DİĞER ÖĞELERİN MOBİLDE HİZALANMASI */
    .switch { margin: 10px 0 !important; display: inline-block; }
    .search-container { display: none !important; }
    
    /* ŞİKAYET ETTİĞİN KATEGORİLERİ (Oyun kartları) MOBİLDE TAMAMEN GİZLEDİK */
    #feature { display: none !important; }

    #product1 .pro-container { justify-content: space-around; gap: 15px; padding: 0; }
    #product1 .pro { width: 45%; min-width: unset; margin: 10px 0; }
    
    .carousel-grid { grid-template-columns: 1fr; }
    .mini-slides { flex-direction: row; }
    
    /* Tablet Pop-up Düzeltmesi */
    .register-show { 
        width: 90%; 
        max-width: 420px; /* Pop-up'ın tablette ekrana yayılmasını engeller */
        padding: 40px 30px; 
    }
    .register label {
        display: block;
        width: 100%;
    }
    .register label input { 
        width: 100%; /* Inputları sağa kadar uzatır */
    }
    .registerb { 
        width: 100%; /* Butonu tam genişlik yapar ve ortalar */
        margin-left: 0 !important;
        margin-top: 20px;
    }
}

/* --- 3. DİKEY TABLET & BÜYÜK MOBİL (Max: 768px) --- */
@media (max-width: 768px) {
    h1 { font-size: 34px; line-height: 1.3; }
    h2 { font-size: 28px; }
    p { font-size: 15px; }
    
    #product1 .pro { width: 48%; }
    
    #banner { height: auto; min-height: 30vh; padding: 60px 5%; }
    #sm-banner { flex-direction: column; padding: 20px 5%; gap: 20px; }
    #sm-banner .banner-box { width: 100%; min-width: 100%; height: 35vh; padding: 30px; }
    #banner3 { flex-direction: column; padding: 0 5%; gap: 15px; margin-bottom: 20px; }
    #banner3 .banner-box { width: 100%; height: 25vh; }
    
    #newsletter { flex-direction: column; align-items: flex-start; padding: 40px 5%; text-align: center; }
    #newsletter h4, #newsletter p { width: 100%; }
    #newsletter .form { width: 100%; margin-top: 20px; flex-direction: column; background: transparent; border: none; padding: 0; gap: 10px; }
    #newsletter input { background: #2C2C2E; border-radius: 100px; text-align: center; width: 100%; }
    #newsletter button { width: 100%; padding: 15px; }
    
    #prodetails { flex-direction: column; gap: 30px; padding: 20px 5%; }
    #prodetails .single-pro-image { width: 100%; }
    #prodetails .single-pro-details { width: 100%; padding-top: 0; }
    #prodetails .single-pro-details select { max-width: 100%; }
    
    #blog { padding: 40px 5% 0 5%; }
    #blog .blog-box { flex-direction: column; align-items: flex-start; padding-bottom: 40px; }
    #blog .blog-img { width: 100%; margin-right: 0; margin-bottom: 20px; }
    #blog .blog-details { width: 100%; }
    #blog .blog-box h1 { font-size: 60px; top: -30px; }
    
    #about-head { flex-direction: column; gap: 30px; padding: 40px 5%; }
    #about-head img { width: 100%; }
    #about-app .video { width: 100%; }
    
    #contact-details { flex-direction: column; gap: 30px; padding: 40px 5%; }
    #contact-details .details { width: 100%; padding: 30px; }
    #contact-details .map { width: 100%; height: 350px; }
    
    #form-details { flex-direction: column; padding: 30px 5%; margin: 20px 5%; gap: 40px; }
    #form-details form { width: 100%; }
    .people { width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 20px; }
    .people div { width: 45%; }
    
    #cart { padding: 20px 5%; }
    #cart table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
    
    #cart-add { flex-direction: column; padding: 20px 5%; gap: 30px; }
    #coupon, #subtotal { width: 100%; }
    #subtotal { padding: 30px 20px; }
}

/* --- 4. STANDART MOBİL TELEFONLAR (Max: 480px) --- */
@media (max-width: 480px) {
    h1 { font-size: 28px; letter-spacing: -0.5px; }
    h2 { font-size: 24px; }
    .section-p1 { padding: 20px 5%; }
    
    #header { padding: 12px 5%; }
    .logo { height: 40px; }
    
    #hero { padding: 60px 5%; }
    #hero button { padding: 16px 20px; font-size: 15px; width: 100%; }

    #product1 .pro-container { justify-content: space-between; gap: 10px; }
    #product1 .pro { width: 48%; padding: 10px; margin: 5px 0; }
    
    .mini-slides { flex-direction: column; gap: 15px; }
    
    footer { padding: 40px 5%; flex-direction: column; }
    footer .col { width: 100%; margin-bottom: 25px; }
    
    .register-show { width: 95%; padding: 25px 20px; border-radius: 20px; }
    .register label input { width: 100%; }
    .registerb { width: 100%; margin-bottom: 10px; margin-left: 0 !important; }
    .people div { width: 100%; }
}

/* --- 5. MİNİ EKRANLAR (iPhone SE vb. - Max: 360px) --- */
@media (max-width: 360px) {
    h1 { font-size: 24px; }
    #sm-banner h2 { font-size: 22px; }
    #banner3 h2 { font-size: 18px; }
    
    #coupon input { width: 100%; margin-bottom: 15px; margin-right: 0; }
    #coupon button { width: 100%; }
    #coupon div { flex-direction: column; gap: 0; }
    
    .small-img-group { flex-wrap: wrap; }
    .small-img-col { flex-basis: 48%; margin-bottom: 10px; }
}

/* =======================================================
   MENÜ KAPANINCA POP-UP'I ZORLA GİZLEME (KUSURSUZ ÇÖZÜM)
   ======================================================= */
@media (max-width: 1024px) {
    /* Sihirli dokunuş: Eğer sayfadaki navbar 'active' değilse (yani kapalıysa), pop-up'ı nerede olursa olsun GİZLE */
    body:has(#navbar:not(.active)) .register-show,
    body:has(#navbar:not(.active)) .register {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* Pop-up açıkken ekranın tam ortasında kaymadan durması için */
    .register-show {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-height: 85vh !important; /* Ekrana sığmazsa diye */
        overflow-y: auto !important;
        z-index: 99999 !important; /* Her şeyin en üstünde durmasını sağlar */
    }
}