/* 
   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:grid; grid-template-columns: auto auto 1fr auto; align-items:center; gap:40px;}
.logo{font-family:var(--font-display); font-size:24px; font-weight:600; display:flex; align-items:center; gap:8px; white-space:nowrap;}
.logo-mark{width:10px; height:10px; background:var(--accent); transform:rotate(45deg);}
.nav-links{display:flex; gap:24px;}
.nav-links a{font-size:11px; font-weight:700; color:var(--text-dim); transition:all .3s; text-transform:uppercase; letter-spacing:0.05em; white-space:nowrap;}
.nav-links a:hover{color:var(--accent);}
.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{font-family:var(--font-display); font-size:clamp(50px, 8vw, 100px); line-height:0.9; margin-bottom:24px;}
.hero h1 em{font-style:italic; font-weight:400; color:var(--accent-light);}
.hero p{font-size:18px; color:rgba(255,255,255,0.8); margin-bottom:40px;}
.hero-product-card{position:absolute; z-index:8; right:40px; bottom:40px; width:260px; background:rgba(255,255,255,0.94); backdrop-filter:blur(20px); border-radius:16px; padding:16px; display:flex; gap:14px; align-items:center; box-shadow:0 20px 50px rgba(0,0,0,0.35); pointer-events:auto; transition:transform .4s var(--ease); text-decoration:none; color:var(--text);}
.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) {
  .nav-links { display: none; } 
  .hero h1 { font-size: 42px; }
  .flash-bar { flex-direction: column; gap: 12px; text-align: center; margin-top: -25px; padding: 15px; }
  .story-nav-container { justify-content: flex-start; }
  .trust-bar { grid-template-columns: repeat(2, 1fr); }
  .review-grid { grid-template-columns: 1fr; }
  .home-grid { display: flex !important; overflow-x: auto !important; flex-wrap: nowrap !important; gap: 16px; padding: 10px 0 20px; }
  .home-grid .p-card { flex: 0 0 280px; flex-shrink: 0; }
}

/* ============ 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; }