/* ==========================================
   KATMAN - DAR İÇERİK DÜZENİ (layout-narrow.css)
   Açıklama: Oran 5/8'den küçük olduğunda yüklenir.
   İşlev: 2'li ürün gridleri, alt alta formlar.
   Açıklama: Oran 5/8'den küçük olduğunda yüklenir.
========================================== */

/* 1. Scrollbar ve Vitrin (2 Kolon) */
.scrollable-area { padding: 0 calc(var(--y) * 0.5); } 
.grid-container { grid-template-columns: repeat(2, calc(var(--y) * 16)); } 
.katman-page-grid { grid-template-columns: repeat(2, 1fr); }

/* 2. Sepet ve Kasa (Aşağıya Yapışkan Alt Bar) */
.product-info-box { aspect-ratio: auto !important; min-height: auto; }
.cart-summary-box { 
    aspect-ratio: auto !important; min-height: auto; position: sticky; 
    top: auto; bottom: calc(var(--y) * 0.5); 
    box-shadow: 0 -calc(var(--y) * 0.75) calc(var(--y) * 1.5) rgba(0,0,0,0.9); 
    border-color: #ff99cc; z-index: 100; 
}

/* 3. Hesabım Paneli (Sol Menü Gizleme) */
.dashboard-container { flex-direction: column; gap: 0; padding: calc(var(--y) * 0.75) !important; width: 100%; max-width: 100%; box-sizing: border-box; }
.dashboard-container .dashboard-sidebar { display: none !important; }
.dashboard-menu { width: 100%; background: #111; border: 1px solid #333; border-radius: calc(var(--y) * 0.5); overflow: hidden; }
.dash-menu-btn { width: 100%; padding: calc(var(--y) * 1) calc(var(--y) * 1); border-bottom: 1px solid #222; border-left: none !important; text-align: left; }
.dash-menu-btn:last-child { border-bottom: none; }
.dashboard-content { width: 100%; padding: calc(var(--y) * 0.75) 0; border: none; background: transparent; margin: 0; box-sizing: border-box; display: block !important; }
.mobile-dash-header { display: block; background: #1a1a1a; border: 1px solid #333; padding: calc(var(--y) * 0.75); border-radius: calc(var(--y) * 0.5); margin-bottom: calc(var(--y) * 1); text-align: center; }
.mobile-dash-header h3 { color: #ff99cc; font-size: calc(var(--y) * 1.1); margin-bottom: calc(var(--y) * 0.25); text-transform: uppercase; letter-spacing: 1px; }
.mobile-dash-header p { color: #aaa; font-size: calc(var(--y) * 0.9); margin-bottom: calc(var(--y) * 0.5); }
.mobile-dash-active-page { padding-top: calc(var(--y) * 0.5); border-top: 1px dashed #444; color: #fff; font-weight: bold; text-transform: uppercase; }

/* 4. Ürün Detay Sayfası (Alt Alta) */
.product-bottom-area { 
    display: flex; flex-direction: column; background: #111; border: 1px solid #333; 
    border-radius: calc(var(--y) * 0.75); padding: calc(var(--y) * 1.5) calc(var(--y) * 1); margin-top: calc(var(--y) * 0.5); 
    aspect-ratio: 1 / 1; height: auto; max-width: 100%; min-width: 0;
}
.tab-header { display: flex; gap: calc(var(--y) * 1); border-bottom: 1px solid #333; margin-bottom: calc(var(--y) * 1); padding-bottom: calc(var(--y) * 0.5); flex-shrink: 0; }
.content-box { border: none; padding: 0; background: transparent; border-radius: 0; height: auto; flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-start; }
.content-box h3 { display: none; }
.prod-tab-content { display: none; flex-grow: 1; flex-direction: column; justify-content: flex-start; }
.prod-tab-content.active { display: flex; animation: fadeIn 0.3s ease; }

/* 5. Bağımsız Form Kutuları (Ortak Profil ve Giriş) */
.split-auth-wrapper { flex-direction: column; }
.split-auth-box { padding: calc(var(--y) * 1.5) calc(var(--y) * 1); }
.common-profile-wrapper { padding: calc(var(--y) * 1) 0; min-height: auto; align-items: flex-start; }
.common-profile-box { max-width: 100%; border-radius: calc(var(--y) * 0.5); border: 1px solid #333; box-shadow: 0 calc(var(--y) * 0.25) calc(var(--y) * 0.75) rgba(0,0,0,0.5); }