/* 
   CSG PREMIUM MASTER STYLE — V3.0 (ULTIMATE RECOVERY)
   Orijinal header.php stilleri %100 korunarak yeni özellikler mühürlenmiştir.
*/

/* ============ 1. TOKENS & BASE (ORIJINAL) ============ */
:root{
  --bg:#FFFFFF; --bg-alt:#F8FAFC; --surface:#FFFFFF; --surface-hi:#F1F5F9;
  --line:#E2E8F0; --line-strong:#CBD5E1; --accent:#0066FF; --accent-light:#3B82F6;
  --accent-dim:rgba(0,102,255,0.08); --chrome:#0F172A; --sale:#FF5C00;
  --text:#0F172A; --text-dim:#475569; --text-faint:#94A3B8;
  --font-display:'Fraunces', serif; --font-body:'Inter', sans-serif; --font-mono:'JetBrains Mono', monospace;
  --container:1400px; --ease:cubic-bezier(.22, 1, .36, 1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
html, body{background:var(--bg); color:var(--text); font-family:var(--font-body); -webkit-font-smoothing:antialiased; overflow-x:hidden; width:100%; position:relative;}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
a{text-decoration:none; color:inherit;}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer;}
ul{list-style:none;}
.wrap{max-width:var(--container); margin:0 auto; padding:0 40px;}

/* ============ 2. MASTER NAV & HEADER ============ */
.header{position:sticky; top:0; z-index:1000; background:rgba(255,255,255,0.9); backdrop-filter:blur(25px); -webkit-backdrop-filter:blur(25px); border-bottom:1px solid var(--line);}
.nav-main {
  padding: 12px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
@media (min-width: 1024px) {
  .nav-main { display: grid; grid-template-columns: auto 1fr auto; gap: 40px; }
}
.logo{font-family:var(--font-display); font-size:24px; font-weight:600; display:flex; align-items:center; gap:8px; white-space:nowrap; flex-shrink: 0;}
.logo-mark{width:10px; height:10px; background:var(--accent); transform:rotate(45deg);}
.search-bar-header{width:100%; max-width:380px; justify-self: center;}
.search-bar-header input{width:100%; padding:10px 16px; background:var(--bg-alt); border:1px solid var(--line); border-radius:8px; font-size:13px; transition:all .3s;}
.search-bar-header input:focus{background:#FFF; border-color:var(--accent); outline:none; box-shadow:0 0 0 4px var(--accent-dim);}
.nav-actions{display:flex; align-items:center; gap:16px; justify-self: end;}
.action-btn{display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--text); position:relative; transition:all .3s;}
.cart-bubble, .fav-bubble{background:var(--accent); color:#FFF; font-size:9px; padding:2px 6px; border-radius:10px; font-family:var(--font-mono); line-height:1;}
.fav-bubble{background:var(--accent-dim); color:var(--accent);}
.nav-btn{padding:10px 18px; border-radius:8px; font-size:11px; font-weight:700; transition:all .3s var(--ease); text-transform:uppercase; letter-spacing:0.03em; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap;}
.btn-b2b{background:var(--bg-alt); color:var(--text-dim); border:1px solid var(--line);}
.btn-b2b:hover{background:var(--line); color:var(--text);}
.btn-online{background:var(--accent); color:#FFF; border:1px solid var(--accent); box-shadow: 0 4px 12px var(--accent-dim);}
.btn-online:hover{background:var(--accent-light); border-color:var(--accent-light); transform:translateY(-2px);}

/* ============ 3. HERO — BEFORE / AFTER ============ */
.hero{position:relative; height:100%; background:#000; overflow:hidden; cursor:ew-resize; user-select:none;}

/* Split Layout Mobil Uyumluluk */
@media (max-width: 1100px) {
    section[style*="grid-template-columns: 75% 25%"] {
        grid-template-columns: 100% !important;
        height: auto !important;
    }
    .hero { height: 600px !important; }
}
.ba-img{position:absolute; inset:0; background-size:cover; background-position:center;}
.ba-after{z-index:1;}
.ba-before{z-index:2; clip-path:inset(0 50% 0 0); filter:grayscale(65%) brightness(0.72) contrast(0.92) saturate(0.8);}
.ba-divider{position:absolute; top:0; bottom:0; left:50%; width:2px; background:rgba(255,255,255,0.85); z-index:30; transform:translateX(-50%); box-shadow:0 0 24px rgba(0,0,0,0.35); pointer-events:none;}
.ba-handle{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:56px; height:56px; border-radius:50%; background:#FFF; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,0.35); pointer-events:auto; touch-action:none; z-index:40; transition:transform .2s var(--ease);}
.ba-handle:active{transform:translate(-50%,-50%) scale(0.92);}
.ba-handle svg{width:20px; height:20px; color:var(--chrome);}
.ba-label{position:absolute; top:32px; z-index:35; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:0.1em; color:#FFF; background:rgba(15,23,42,0.45); backdrop-filter:blur(10px); padding:8px 14px; border-radius:20px; pointer-events:none; border:1px solid rgba(255,255,255,0.15);}
.ba-label-before{left:32px;} .ba-label-after{right:32px;}
.hero-content{position:relative; z-index:10; color:#FFF; max-width:700px; pointer-events:none;}
.hero-content a{pointer-events:auto;}
.hero h1 em{font-style:italic; font-weight:400; color:var(--accent-light);}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 7vw, 72px);
  line-height: 1.1;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}
.hero p {
  font-size: clamp(14px, 2vw, 18px);
  color: rgba(255,255,255,0.8);
  margin-bottom: 32px;
  line-height: 1.6;
}
.hero-product-card {
  position: absolute;
  z-index: 50;
  right: 20px;
  bottom: 20px;
  width: 240px;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(20px);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  box-shadow: 0 15px 35px rgba(0,0,0,0.2);
  pointer-events: auto;
  transition: all .4s var(--ease);
  text-decoration: none;
  color: var(--text);
}
@media (max-width: 768px) {
  .hero-product-card {
    right: 15px;
    bottom: 15px;
    width: 200px;
    padding: 10px;
    transform: scale(0.9);
    transform-origin: bottom right;
  }
}
.hero-product-card:hover{transform:translateY(-6px);}
.hero-product-thumb{width:56px; height:56px; border-radius:10px; background:var(--bg-alt); flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.hero-product-info{flex-grow:1; min-width:0;}
.hero-product-info .hp-label{font-size:9px; font-weight:800; letter-spacing:0.08em; color:var(--accent); text-transform:uppercase; margin-bottom:2px;}
.hero-product-info .hp-name{font-size:13px; font-weight:700; color:var(--text); margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hero-product-info .hp-price{font-family:var(--font-mono); font-size:14px; font-weight:800; color:var(--accent);}

/* ============ 4. EXPERIENCE CARDS (KRİTİK) ============ */
.experience-section{padding:80px 0; background:var(--bg);}
.exp-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;}
.exp-card{
  position:relative; height:480px; border-radius:20px; overflow:hidden; 
  display:flex; flex-direction:column; justify-content:flex-end; padding:32px;
  color:#FFF; transition:all .5s var(--ease); cursor:pointer;
}
.exp-card::before{
  content:''; position:absolute; inset:0; 
  background:linear-gradient(to bottom, transparent 30%, rgba(15,23,42,0.9) 100%);
  z-index:1; transition:opacity .4s;
}
.exp-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; 
  z-index:0; transition:transform .8s var(--ease); filter:brightness(0.85);
}
.exp-card:hover img{transform:scale(1.1); filter:brightness(1);}
.exp-card:hover{transform:translateY(-10px); box-shadow:0 30px 60px rgba(0,102,255,0.15);}
.exp-content{position:relative; z-index:2;}
.exp-label{font-family:var(--font-mono); font-size:10px; font-weight:800; letter-spacing:0.15em; text-transform:uppercase; color:var(--accent-light); margin-bottom:12px; display:block;}
.exp-card h3{font-family:var(--font-display); font-size:28px; margin-bottom:12px; line-height:1.1;}
.exp-card p{font-size:14px; opacity:0.8; margin-bottom:24px; transform:translateY(10px); transition:all .4s; opacity:0;}
.exp-card:hover p{transform:translateY(0); opacity:1;}
.exp-btn{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:#FFF; border-bottom:1.5px solid var(--accent); padding-bottom:4px; transition:gap .3s;}
.exp-card:hover .exp-btn{gap:12px;}

/* ============ 5. PRODUCT GRIDS & FLASH ============ */
.product-row{padding:80px 0; background:var(--bg-alt);}
.grid-title{display:flex; align-items:center; justify-content:space-between; margin-bottom:40px;}
.grid-title h3{font-family:var(--font-display); font-size:32px;}
.home-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; transition:opacity .4s var(--ease);}
.p-card{background:#FFF; border-radius:16px; padding:20px; border:1px solid var(--line); transition:all .4s var(--ease); cursor:pointer; position:relative;}
.p-card:hover{transform:translateY(-10px); border-color:var(--accent); box-shadow:0 20px 40px rgba(0,0,0,0.05);}
.p-img{height:200px; background:var(--bg-alt); border-radius:12px; margin-bottom:20px; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.p-img img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply;}
.p-name{font-weight:700; font-size:16px; margin-bottom:12px; height:44px; overflow:hidden;}
.p-price{font-family:var(--font-mono); font-size:18px; font-weight:800; color:var(--accent);}
.btn-add-home{width:100%; margin-top:20px; padding:12px; border:1.5px solid var(--line); border-radius:8px; font-weight:700; font-size:12px; transition:all .3s;}
.btn-add-home:hover{background:var(--accent); border-color:var(--accent); color:#FFF;}

.flash-bar{background:var(--sale); color:#FFF; padding:20px; border-radius:12px; margin-top:-40px; position:relative; z-index:20; display:flex; align-items:center; justify-content:space-between; box-shadow:0 20px 40px rgba(255,92,0,0.2);}
.flash-info{display:flex; align-items:center; gap:20px;}
.flash-title{font-weight:800; font-size:20px; letter-spacing:0.05em;}
.flash-timer{font-family:var(--font-mono); font-size:18px; display:flex; gap:8px;}
.timer-unit{background:rgba(255,255,255,0.2); padding:4px 10px; border-radius:4px;}

/* ============ 6. TRUST & BRANDS ============ */
.trust-bar{display:grid; grid-template-columns:repeat(4,1fr); gap:30px; padding:60px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:60px 0;}
.trust-card{text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px;}
.trust-card svg{width:32px; height:32px; color:var(--accent);}
.trust-card h5{font-size:14px; font-weight:700;}
.trust-card p{font-size:12px; color:var(--text-dim); line-height:1.4;}

.brand-section{padding:60px 0; text-align:center;}
.brand-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:60px; align-items:center; opacity:0.6; filter:grayscale(1); transition:all .5s;}
.brand-grid:hover{opacity:1; filter:grayscale(0);}
.brand-item img{height:40px; width:auto; object-fit:contain;}

/* ============ 7. REVIEWS ============ */
.review-section{padding:100px 0; background:var(--bg-alt); margin-top:80px;}
.review-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.review-card{background:#FFF; padding:32px; border-radius:16px; border:1px solid var(--line); transition:all .4s var(--ease);}
.review-card:hover{transform:translateY(-10px); box-shadow:0 20px 40px rgba(0,0,0,0.05);}
.review-stars{color:#FFB800; margin-bottom:16px; font-size:14px;}
.review-text{font-style:italic; font-size:15px; color:var(--text-dim); line-height:1.6; margin-bottom:24px;}
.review-user{display:flex; align-items:center; gap:12px; border-top:1px solid var(--bg-alt); padding-top:20px;}
.user-avatar{width:40px; height:40px; border-radius:50%; background:var(--accent-dim); color:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;}

/* ============ 8. MODALS & UI ELEMENTS ============ */
.side-cart{position:fixed; inset:0 0 0 auto; width:min(90vw, 420px); background:#FFF; z-index:2000; box-shadow:-20px 0 60px rgba(0,0,0,0.15); transform:translateX(100%); transition:transform .5s var(--ease); display:flex; flex-direction:column;}
.side-cart.open{transform:translateX(0);}
.cart-overlay, .detail-overlay{position:fixed; inset:0; background:rgba(15,23,42,0.5); backdrop-filter:blur(4px); z-index:1999; opacity:0; visibility:hidden; transition:all .4s;}
.cart-overlay.open, .detail-overlay.open{opacity:1; visibility:visible;}
.detail-modal{position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.95); width:min(90vw, 560px); max-height:80vh; background:#FFF; border-radius:20px; z-index:3001; opacity:0; visibility:hidden; transition:all .4s var(--ease); overflow-y:auto; box-shadow:0 40px 80px rgba(0,0,0,0.2);}
.detail-modal.open{opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1);}

/* ============ 9. USER DROPDOWN (Addition) ============ */
.user-dropdown { position: relative; display: inline-block; }
.dropdown-content { display: none; position: absolute; right: 0; top: 100%; background: #FFF; min-width: 180px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-radius: 12px; padding: 12px 0; z-index: 1000; border: 1px solid var(--line); margin-top: 10px; }
.dropdown-content::before { content: ''; position: absolute; top: -15px; left: 0; width: 100%; height: 15px; background: transparent; }
.dropdown-content a { color: var(--text); padding: 10px 20px; text-decoration: none; display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.05em; transition: background 0.2s; }
.dropdown-content a:hover { background: var(--bg-alt); color: var(--accent); }
.user-dropdown:hover .dropdown-content { display: block; }

/* ============ 10. STORY NAVIGATION (Trendyol Style) ============ */
.story-nav-container { display: flex; gap: 24px; overflow-x: auto; padding: 30px 10px; scrollbar-width: none; }
.story-nav-container::-webkit-scrollbar { display: none; }
.story-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; min-width: 90px; transition: transform 0.3s; }
.story-ring { width: 76px; height: 76px; border-radius: 50%; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; background: #FFF; box-shadow: 0 6px 16px rgba(0,0,0,0.04); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; }
.story-ring::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid transparent; transition: all 0.3s; }
.story-item:hover .story-ring, .story-item.active-cat .story-ring { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 12px 24px rgba(0,102,255,0.15); background: var(--bg-alt); }
.story-item:hover .story-ring::before { border-color: var(--accent); }
.story-title { font-size: 11px; font-weight: 800; color: var(--text); text-transform: uppercase; margin-top: 12px; text-align: center; letter-spacing: 0.05em; transition: color 0.3s; line-height: 1.3; }
.story-item:hover .story-title, .story-item.active-cat .story-title { color: var(--accent); }

/* ============ 11. RESPONSIVE OPTIMIZATION ============ */
@media (max-width: 1024px) {
  .exp-grid { grid-template-columns: repeat(2, 1fr); }
  .home-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .wrap { padding: 0 16px; }
  
  /* Masaüstü Butonları Gizle */
  .desktop-only-nav, .search-bar-header { display: none !important; }

  .nav-main { 
    height: 84px !important; /* Kurumsal safe-zone için yükseltildi */
    display: flex !important; 
    justify-content: space-between !important; 
    align-items: center !important; 
    gap: 0 !important;
  }

  .nav-actions { 
    display: flex !important; 
    align-items: center !important; 
    gap: 8px !important; 
  }

  /* MOBİL İKON BUTONLARI (DAİRE) */
  .action-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important; /* var(--bg-alt) belirginleşti */
    border: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important; /* Metni tamamen yok et */
    position: relative;
    padding: 0 !important;
  }

  /* SVG İKONLARI ZORLA GÖRÜNÜR YAP */
  .action-btn svg {
    width: 18px !important;
    height: 18px !important;
    stroke: #0F172A !important; /* Net Siyah/Koyu Gri */
    display: block !important;
  }

  .fav-bubble, .cart-bubble {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    background: var(--accent) !important;
    color: #FFF !important;
    font-size: 9px !important;
    min-width: 18px !important;
    height: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    border: 2px solid #FFF !important;
    font-weight: 800 !important;
  }

  /* MOBİL HAMBURGER (SİYAH KUTU) */
  .mobile-hamburger-btn {
    display: flex !important;
    background: #0F172A !important; /* Net Chrome Rengi */
    width: 40px !important;
    height: 38px !important;
    border-radius: 8px !important;
    margin-left: 4px !important;
    border: none !important;
  }
  .mobile-hamburger-btn span { 
    background: #FFF !important; 
    height: 2px !important; 
    width: 18px !important; 
  }

  .logo { font-size: 18px !important; }
  .hero-title { font-size: 34px !important; margin-bottom: 12px !important; }
  .hero-text-wrap { padding-left: 20px !important; padding-right: 20px !important; }
  
  /* Koleksiyonu Keşfet Butonunu Mobilde Gizle (UX Temizliği) */
  .hero-content .btn-add-home { display: none !important; }

  /* 75/25 Split Mobil Geçişi - Kurumsal Ayrıştırma */
  section[style*="display: grid; grid-template-columns: 75% 25%"] {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    background: #000 !important;
  }
  .hero { 
    height: 520px !important; 
    border-bottom: 6px solid var(--bg) !important; /* Blokları ayıran temiz beyaz bant */
  }
  
  /* Laboratuvar Bloğu - Görsel Ayrıştırma (Resim Onarıldı) */
  div[style*="padding: 40px; display: flex; flex-direction: column"] {
    margin-top: 24px !important;
    padding: 48px 24px !important;
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 32px 32px 0 0 !important;
  }

  /* Deneyim Kartları - Yatay Kaydırma (Modern UX Mühürlendi) */
  .experience-section { padding: 40px 0 !important; }
  .experience-section h2 { font-size: 28px !important; }
  .exp-grid {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    padding: 10px 4px 30px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .exp-grid::-webkit-scrollbar { display: none; }
  .exp-card {
    flex: 0 0 260px !important;
    height: 340px !important;
    padding: 24px !important;
    border-radius: 16px !important;
  }
  .exp-card h3 { font-size: 20px !important; }
  .exp-card p { opacity: 1 !important; transform: translateY(0) !important; font-size: 12px !important; display: block !important; }

  .flash-bar { flex-direction: column; gap: 12px; text-align: center; margin-top: -25px; padding: 15px; }
  .story-nav-container { justify-content: flex-start; padding: 20px 10px !important; }
  .story-ring { width: 64px !important; height: 64px !important; }
  .story-title { font-size: 9px !important; }

  /* GÜVEN ŞERİDİ (Optimized Mobile) */
  .trust-bar { 
    grid-template-columns: repeat(2, 1fr) !important; 
    gap: 32px 16px !important; 
    padding: 40px 0 !important;
    margin: 40px 0 !important;
  }
  .trust-card svg { width: 24px !important; height: 24px !important; margin-bottom: 8px !important; }
  .trust-card h5 { font-size: 13px !important; margin-bottom: 4px !important; }
  .trust-card p { font-size: 11px !important; line-height: 1.4 !important; opacity: 0.8; }

  /* MARKA DUVARI - YATAY KAYDIRMA (Modern UX) */
  .brand-section { padding: 40px 0 !important; overflow: hidden; }
  .brand-grid { 
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 48px !important; 
    padding: 10px 4px !important;
    opacity: 1 !important; 
    filter: grayscale(0) !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .brand-grid::-webkit-scrollbar { display: none; }
  .brand-item { flex: 0 0 auto !important; }
  .brand-item img { height: 28px !important; width: auto !important; }

  /* YORUMLAR (Optimized Mobile) */
  .review-section { padding: 60px 0 !important; margin-top: 40px !important; }
  .review-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .review-card { padding: 24px !important; }
  
  .home-grid { 
    display: flex !important; 
    overflow-x: auto !important; 
    flex-wrap: nowrap !important; 
    gap: 12px !important; 
    padding: 10px 4px 24px !important; 
    -webkit-overflow-scrolling: touch;
  }
  .home-grid .p-card { flex: 0 0 240px !important; }
  
  .mobile-hamburger-btn{display:flex;}
  .mobile-search-toggle-btn{display:flex;}
  .search-bar-header{display:none;}
  .nav-actions .user-dropdown{display:none;}
  .nav-actions > a.btn-b2b{display:none;}
  
  .hero-product-card {
    position: absolute !important;
    right: 10px !important;
    bottom: 10px !important;
    width: 180px !important;
    transform: scale(0.85);
    z-index: 60 !important;
  }

  /* FOOTER - AKORDEON MOBİL YAPI */
  .footer { 
    padding-top: 40px !important; 
    padding-bottom: 60px !important; 
  }

  .footer-grid { 
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important; /* Blokları birbirine yaklaştır */
    text-align: left !important;
  }

  .footer .logo { margin-bottom: 20px !important; }
  .footer p { margin-bottom: 40px !important; font-size: 13px !important; opacity: 0.8; }

  /* Tıklanabilir Başlıklar */
  .footer h4 { 
    position: relative !important;
    margin-bottom: 0 !important; 
    padding: 20px 0 !important;
    font-size: 12px !important; 
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    border-top: 1px solid var(--line);
    cursor: pointer;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  /* Akordeon İkonu (+) */
  .footer h4::after {
    content: '+';
    font-family: var(--font-mono);
    font-size: 18px;
    color: var(--text-faint);
    transition: transform 0.3s var(--ease);
  }

  /* Başlık Aktifse (-) Yap */
  .footer h4.acc-active::after {
    content: '−';
    color: var(--accent);
    transform: rotate(180deg);
  }

  /* Kapalı Listeler */
  .footer ul { 
    max-height: 0 !important;
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0, 1, 0, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    opacity: 0;
    padding: 0 !important;
  }

  /* Açık Listeler */
  .footer ul.acc-open { 
    max-height: 500px !important;
    opacity: 1;
    padding: 10px 0 30px !important;
    transition: all 0.4s cubic-bezier(1, 0, 1, 0) !important;
  }

  /* BÜLTEN (Her zaman açık kalsın) */
  .footer .footer-grid > div:last-child h4 { border-bottom: none !important; cursor: default !important; }
  .footer .footer-grid > div:last-child h4::after { display: none !important; }
  .footer .footer-grid > div:last-child ul { max-height: none !important; opacity: 1 !important; padding: 10px 0 !important; }

  .footer input[type="email"] {
    width: 100% !important;
    height: 54px !important;
    padding: 0 16px !important;
    background: var(--bg-alt) !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    font-size: 14px !important;
  }
  .signature-banner {
    flex-direction: column !important; 
    padding: 32px 20px !important; 
    text-align: center !important;
    border-radius: 20px !important;
    gap: 24px !important;
  }
  .signature-banner h2 { font-size: 28px !important; margin-bottom: 16px !important; }
  .signature-banner p { font-size: 13px !important; line-height: 1.5 !important; margin-bottom: 24px !important; }
  .signature-banner .btn-add-home { padding: 16px 32px !important; font-size: 13px !important; width: 100% !important; }
  .signature-banner > div:last-child { flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; gap: 10px !important; width: 100% !important; }
  .signature-banner > div:last-child > div { width: calc(50% - 10px) !important; padding: 12px !important; transform: none !important; min-width: 140px !important; }
  .signature-banner > div:last-child > div div:last-child { font-size: 12px !important; }
}
@media (max-width: 480px) {
  .footer-grid{grid-template-columns: 1fr; gap:24px;}
  .exp-grid{grid-template-columns: 1fr;}
  .exp-card{height:380px;}
  .wrap{padding:0 20px;}
  .hero-title{font-size:28px !important;}
  .hero{height:500px !important;}
}

/* ============ 12. MOBILE HAMBURGER MENU & TOGGLES ============ */
.mobile-hamburger-btn{display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:40px; height:40px; background:none; border:none; cursor:pointer; z-index:1002;}
.mobile-hamburger-btn span{display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:all .3s var(--ease);}
.mobile-hamburger-btn.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.mobile-hamburger-btn.active span:nth-child(2){opacity:0;}
.mobile-hamburger-btn.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-nav-overlay{position:fixed; inset:0; background:rgba(15,23,42,0.5); backdrop-filter:blur(4px); z-index:1998; opacity:0; visibility:hidden; transition:all .4s;}
.mobile-nav-overlay.open{opacity:1; visibility:visible;}

.mobile-nav-panel{position:fixed; inset:0 0 0 auto; width:min(85vw, 320px); background:#FFF; z-index:1999; box-shadow:-20px 0 60px rgba(0,0,0,0.15); transform:translateX(100%); transition:transform .5s var(--ease); display:flex; flex-direction:column; padding:24px;}
.mobile-nav-panel.open{transform:translateX(0);}
.mobile-nav-panel-close{align-self:flex-end; font-size:24px; font-weight:300; background:none; border:none; cursor:pointer; margin-bottom:20px;}
.mobile-nav-panel a{display:block; padding:14px 0; font-size:14px; font-weight:700; color:var(--text); text-transform:uppercase; letter-spacing:0.05em; border-bottom:1px solid var(--line);}
.mobile-nav-panel a:hover{color:var(--accent);}

.mobile-search-toggle-btn{display:none; align-items:center; justify-content:center;}
.mobile-search-overlay{position:fixed; top:0; left:0; right:0; background:#FFF; padding:16px 20px; z-index:1997; box-shadow:0 15px 40px rgba(0,0,0,0.1); transform:translateY(-100%); transition:transform .3s var(--ease);}
.mobile-search-overlay.open{transform:translateY(0);}
.search-bar-header.mobile-search-overlay{display:block !important; max-width:none;}

/* ============ 13. FOOTER GRID & SIGNATURE BANNER (RESPONSIVE HOOKS) ============ */
.footer-grid{display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:60px;}
.signature-banner{background:var(--chrome); border-radius:32px; padding:80px; display:flex; align-items:center; justify-content:space-between; gap:40px;}

/* ============ SHOP PAGE SPECIFIC (MAĞAZA ÖZEL) ============ */
.flash-section{background:linear-gradient(90deg, #FF5C00, #FF8A00); padding:20px; border-radius:12px; margin-bottom:40px; color:#FFF;}
.horizontal-scroll{display:flex; flex-wrap:nowrap; gap:16px; overflow-x:auto; padding-bottom:10px; -ms-overflow-style:none; scrollbar-width:none;}
.horizontal-scroll::-webkit-scrollbar{display:none;}
.flash-card{flex: 0 0 220px; background:#FFF; border-radius:8px; padding:12px; border:1px solid var(--line); color:var(--text); transition:all .3s;}
.flash-card:hover{transform:translateY(-5px); box-shadow:0 10px 20px rgba(0,0,0,0.1);}
.flash-price{font-weight:700; color:var(--sale);}
.discount-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:40px 0 60px;}
.discount-box{height:120px; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#FFF; cursor:pointer; transition:all .3s;}
.discount-box:hover{transform:translateY(-5px); opacity:0.9;}
.db-1{background:linear-gradient(135deg, #FF5C00, #FF8A00);} 
.db-2{background:linear-gradient(135deg, #0066FF, #3B82F6);}
.product-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:24px;}

/* Story Nav Aktif Kategorisi İçin */
.story-item.active-cat .story-ring { border-color: var(--accent); box-shadow: 0 8px 20px rgba(0,102,255,0.15); background: var(--bg-alt); }
.story-item.active-cat .story-title { color: var(--accent); font-weight: 900; }

/* ============ PRODUCT DETAIL PAGE (ÜRÜN DETAY) ============ */
.product-page { padding-top: 140px; min-height: 100vh; background: var(--bg); }
.product-breadcrumb { margin-bottom: 32px; font-size: 13px; color: var(--text-dim); }
.product-breadcrumb a { color: var(--text-faint); transition: color 0.3s; }
.product-breadcrumb a:hover { color: var(--accent); }

.product-grid-main { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: start; }
.product-gallery { 
    background: var(--bg-alt); border-radius: 24px; padding: 60px; 
    display: flex; align-items: center; justify-content: center; 
    position: sticky; top: 120px; 
}
.product-badge { 
    position: absolute; top: 32px; left: 32px; background: var(--accent); 
    color: #FFF; padding: 8px 16px; border-radius: 8px; font-weight: 800; 
    font-size: 12px; letter-spacing: 0.05em; 
}

.product-info-card { 
    background: var(--surface); border: 1px solid var(--line); 
    border-radius: 16px; padding: 32px; margin-bottom: 40px; 
}
.elite-tag { 
    background: var(--accent-dim); color: var(--accent); padding: 4px 8px; 
    border-radius: 6px; font-size: 11px; font-weight: 800; 
}

.stok-bar-container { margin-bottom: 40px; }
.stok-bar-bg { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.stok-bar-fill { height: 100%; transition: width 1s var(--ease); }

.review-form-container { background: #FFF; border: 1px solid var(--line); border-radius: 16px; padding: 32px; }

@media (max-width: 1024px) {
    .product-grid-main { grid-template-columns: 1fr; gap: 40px; }
    .product-gallery { position: relative; top: 0; padding: 30px; }
}

/* ============ AUTH PAGES (GİRİŞ & KAYIT) ============ */
.auth-container { width: 100%; max-width: 450px; background: #FFF; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--line); }
.auth-tabs { display: flex; border-bottom: 1px solid var(--line); background: var(--bg-alt); }
.auth-tab { flex: 1; padding: 20px; text-align: center; font-size: 14px; font-weight: 700; color: var(--text-faint); cursor: pointer; transition: var(--transition); position: relative; }
.auth-tab.active { color: var(--accent); background: #FFF; }
.auth-tab.active::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background: var(--accent); }
.auth-form-wrapper { padding: 40px; }
.auth-form { display: none; }
.auth-form.active { display: block; animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.auth-input { width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 12px; font-size: 14px; outline: none; transition: border-color 0.3s; margin-bottom: 20px; }
.auth-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-dim); }
.auth-label { display: block; font-size: 11px; font-weight: 800; color: var(--text-faint); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.05em; }