/* ─── MotoXP Site CSS ──────────────────────────────────── */
/* Yazı tipleri layout.php içinde +
ile yükleniyor. Render-blocking @import kaldırıldı (daha hızlı FCP). */
:root {
--red: #e11d48;
--red-dark: #be123c;
--black: #0a0a0a;
--white: #ffffff;
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-400: #9ca3af;
--gray-600: #4b5563;
--gray-800: #1f2937;
--nav-h: 72px;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: 'Barlow', sans-serif; background: var(--white); color: var(--black); overflow-x: hidden; width: 100%; max-width: 100%; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--red); border-radius: 99px; }
/* ─── NAV ────────────────────────────────────────────── */
nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); background: rgba(255,255,255,0.96); backdrop-filter: blur(14px); border-bottom: 1px solid var(--gray-100); display: flex; align-items: center; justify-content: space-between; padding: 0 48px; z-index: 1000; transition: box-shadow .3s; }
nav.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,0.08); }
.nav-logo { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 26px; letter-spacing: -0.5px; color: var(--black); cursor: pointer; display: flex; align-items: center; gap: 8px; text-decoration: none; }
.nav-logo span { color: var(--red); }
.nav-logo-bar { width: 4px; height: 28px; background: var(--red); border-radius: 2px; flex-shrink: 0; }
.nav-links { display: flex; list-style: none; gap: 36px; }
.nav-links li a { text-decoration: none; font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gray-600); transition: color .2s; }
.nav-links li a:hover { color: var(--red); }
.nav-links li a.active { color: var(--black); }
/* Dropdown */
.nav-dropdown-wrap { position: relative; }
.nav-dropdown-wrap::after { content: ''; position: absolute; top: 100%; left: -20px; right: -20px; height: 10px; }
.nav-dropdown { display: none; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.12); min-width: 200px; padding: .5rem 0; list-style: none; z-index: 9999; gap: 0; }
.nav-dropdown-wrap:hover .nav-dropdown { display: block; }
.nav-dropdown li a { display: block; padding: .55rem 1.1rem; font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #374151; transition: background .15s, color .15s; border-radius: 0; white-space: nowrap; }
.nav-dropdown li a:hover { background: #fef2f2; color: var(--red); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav-auth { display: flex; align-items: center; gap: 8px; }
.nav-icon-btn { width: 42px; height: 42px; border-radius: 10px; border: 1.5px solid var(--gray-200); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; transition: all .2s; color: var(--black); }
.nav-icon-btn:hover { background: var(--gray-50); border-color: var(--gray-400); }
.nav-icon-btn svg { width: 18px; height: 18px; }
.badge { position: absolute; top: -5px; right: -5px; background: var(--red); color: white; font-size: 10px; font-weight: 800; min-width: 18px; height: 18px; border-radius: 99px; padding: 0 4px; display: flex; align-items: center; justify-content: center; }
.btn-login { height: 42px; padding: 0 18px; background: transparent; color: var(--black); border: 1.5px solid var(--gray-200); border-radius: 10px; font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; cursor: pointer; transition: all .2s; display: flex; align-items: center; gap: 8px; text-decoration: none; }
.btn-login:hover { border-color: var(--black); background: var(--gray-50); transform: translateY(-1px); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--black); border-radius: 2px; transition: all .3s; }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
/* Soldan açılan off-canvas çekmece. Kapalıyken translateX(-100%) ile tamamen
ekran dışında (eski translateY(-110%) bazı cihazlarda beyaz sızıntı bırakıyordu). */
.mobile-nav { position: fixed; top: 0; bottom: 0; left: 0; width: 82%; max-width: 320px; height: 100%; background: white; border-right: 1px solid var(--gray-100); z-index: 1101; padding: calc(var(--nav-h) + 12px) 22px 22px; transform: translateX(-100%); transition: transform .3s cubic-bezier(0.4,0,0.2,1); box-shadow: 6px 0 30px rgba(0,0,0,0.12); overflow-y: auto; }
.mobile-nav.open { transform: translateX(0); }
.mobile-nav ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.mobile-nav ul li a { display: flex; align-items: center; padding: 12px 16px; text-decoration: none; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--black); border-radius: 10px; transition: background .2s; min-height: 48px; }
.mobile-nav ul li a:hover { background: var(--gray-50); }
.mobile-nav-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--gray-100); }
.mobile-nav-actions .btn-login { flex: 1 1 calc(50% - 4px); justify-content: center; text-align: center; min-width: 0; }
/* ─── HERO ───────────────────────────────────────────── */
.hero { margin-top: var(--nav-h); height: calc(100vh - var(--nav-h)); min-height: 560px; position: relative; display: flex; align-items: center; overflow: hidden; background: #060608; }
.hero-bg { position: absolute; inset: 0; background-image: url('https://images.unsplash.com/photo-1558981403-c5f9899a28bc?q=80&w=2070&auto=format&fit=crop'); background-size: cover; background-position: center; opacity: 0.35; transform: scale(1.05); animation: heroZoom 12s ease-out forwards; }
@keyframes heroZoom { from { transform: scale(1.05); } to { transform: scale(1); } }
.hero-content { position: relative; z-index: 2; padding: 0 60px; max-width: 800px; }
.hero-tag { display: inline-flex; align-items: center; gap: 8px; background: rgba(225,29,72,0.15); border: 1px solid rgba(225,29,72,0.4); color: #fb7185; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 6px 16px; border-radius: 99px; margin-bottom: 28px; animation: fadeUp .6s ease both; }
.hero-tag::before { content: ''; width: 6px; height: 6px; background: var(--red); border-radius: 50%; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.5); } }
.hero h1 { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(52px, 5.5vw, 78px); font-weight: 900; line-height: 0.92; text-transform: uppercase; color: white; letter-spacing: -2px; animation: fadeUp .7s .1s ease both; }
.hero h1 em { font-style: normal; color: var(--red); }
.hero p { color: rgba(255,255,255,0.7); font-size: 18px; font-weight: 300; line-height: 1.6; margin: 24px 0 36px; max-width: 480px; animation: fadeUp .7s .2s ease both; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; animation: fadeUp .7s .3s ease both; }
.btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; background: var(--red); color: white; border: none; border-radius: 12px; font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; text-decoration: none; transition: all .25s; white-space: nowrap; }
.btn-primary:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(225,29,72,0.35); }
.btn-outline { display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; background: transparent; color: white; border: 1.5px solid rgba(255,255,255,0.35); border-radius: 12px; font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; text-decoration: none; transition: all .25s; white-space: nowrap; }
.btn-outline:hover { background: rgba(255,255,255,0.1); border-color: white; transform: translateY(-2px); }
.hero-scroll { position: absolute; bottom: 40px; left: 60px; display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,0.5); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; animation: fadeUp .7s .5s ease both; }
.hero-scroll-line { width: 40px; height: 1px; background: rgba(255,255,255,0.3); animation: scrollLine 2s ease-in-out infinite; }
@keyframes scrollLine { 0%, 100% { width: 40px; } 50% { width: 20px; } }
.hero-stats { position: absolute; right: 60px; bottom: 50px; display: flex; gap: 40px; animation: fadeUp .7s .4s ease both; }
.hero-stat { text-align: right; }
.hero-stat strong { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 36px; font-weight: 900; color: white; line-height: 1; }
.hero-stat span { font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.5); letter-spacing: 0.5px; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
/* ─── MARQUEE ────────────────────────────────────────── */
/* Eski .marquee-strip/.marquee-track kuralları kaldırıldı: wrapper'a da
animasyon verip aktif .marquee-content ile çakışıyordu (çift kayma).
Keyframes korundu — aktif .marquee-content kullanıyor. */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ─── SECTIONS SHARED ────────────────────────────────── */
.section { padding: 100px 60px; }
.section-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 52px; gap: 24px; flex-wrap: wrap; }
.section-label { font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--red); margin-bottom: 10px; }
.section-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(32px, 5vw, 52px); font-weight: 900; text-transform: uppercase; line-height: 1; letter-spacing: -1px; }
.section-title em { font-style: normal; color: var(--red); }
.view-all { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--black); text-decoration: none; border-bottom: 2px solid var(--black); padding-bottom: 2px; transition: all .2s; cursor: pointer; white-space: nowrap; flex-shrink: 0; background: none; border-top: none; border-left: none; border-right: none; }
.view-all:hover { color: var(--red); border-color: var(--red); }
/* ─── CATEGORIES ─────────────────────────────────────── */
#categories { background: var(--gray-50); }
/* Eski .cats-grid/.cat-card* (ilk tasarım) kaldırıldı — hiçbir view kullanmıyor.
Aktif kategori stilleri aşağıda: .category-grid / .category-card. */
/* ─── PRODUCTS GRID ──────────────────────────────────── */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 24px; }
.product-card { border-radius: 16px; border: 1px solid var(--gray-200); overflow: hidden; background: white; cursor: pointer; transition: all .35s ease; position: relative; }
.product-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,0.1); border-color: transparent; }
.product-card-img { position: relative; height: 240px; overflow: hidden; background: var(--gray-50); }
.product-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.product-card:hover .product-card-img img { transform: scale(1.06); }
.product-card-fav { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; background: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.1); transition: all .2s; opacity: 0; transform: scale(0.8); }
.product-card:hover .product-card-fav { opacity: 1; transform: scale(1); }
.product-card-fav.active svg { fill: var(--red); stroke: var(--red); }
.product-card-fav svg { width: 16px; height: 16px; stroke: var(--black); fill: none; transition: all .2s; }
.product-card-fav:hover { background: var(--red); }
.product-card-fav:hover svg { stroke: white; }
.product-card-body { padding: 20px; }
.product-card-cat { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--red); margin-bottom: 6px; }
.product-card-name { font-size: 15px; font-weight: 700; color: var(--black); margin-bottom: 12px; line-height: 1.3; }
.product-card-footer { display: flex; align-items: center; justify-content: space-between; }
.product-card-price { font-family: 'Barlow Condensed', sans-serif; font-size: 26px; font-weight: 800; color: var(--black); line-height: 1; }
.product-card-price small { font-size: 13px; font-weight: 500; color: var(--gray-400); font-family: 'Barlow', sans-serif; }
.add-to-cart-btn { width: 40px; height: 40px; border-radius: 10px; background: var(--black); color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; flex-shrink: 0; }
.add-to-cart-btn:hover { background: var(--red); transform: scale(1.08); }
.add-to-cart-btn svg { width: 18px; height: 18px; }
#productsSection { display: none; }
/* ─── FEATURES ───────────────────────────────────────── */
.features-section { background: var(--black); padding: 80px 60px; }
.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.feature-item { padding: 40px 32px; border-right: 1px solid rgba(255,255,255,0.07); transition: background .2s; }
.feature-item:last-child { border-right: none; }
.feature-item:hover { background: rgba(255,255,255,0.03); }
.feature-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(225,29,72,0.15); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.feature-icon svg { width: 22px; height: 22px; stroke: var(--red); fill: none; }
.feature-item h4 { font-size: 16px; font-weight: 700; color: white; margin-bottom: 8px; }
.feature-item p { font-size: 14px; color: rgba(255,255,255,0.45); line-height: 1.6; }
/* ─── ABOUT ──────────────────────────────────────────── */
.about-section { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.about-visual { position: relative; }
.about-img-main { width: 100%; border-radius: 24px; overflow: hidden; aspect-ratio: 4/3; }
.about-img-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-img-accent { position: absolute; bottom: -30px; right: -30px; width: 45%; border-radius: 16px; overflow: hidden; aspect-ratio: 1; border: 6px solid white; box-shadow: 0 20px 50px rgba(0,0,0,0.15); }
.about-img-accent img { width: 100%; height: 100%; object-fit: cover; }
.about-stat-badge { position: absolute; top: -20px; left: -20px; background: var(--red); color: white; border-radius: 16px; padding: 20px 24px; box-shadow: 0 12px 30px rgba(225,29,72,0.35); }
.about-stat-badge strong { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 40px; font-weight: 900; line-height: 1; }
.about-stat-badge span { font-size: 12px; font-weight: 600; opacity: 0.85; white-space: nowrap; }
.about-text { padding-bottom: 30px; }
.about-text p { color: var(--gray-600); line-height: 1.8; margin-bottom: 16px; font-size: 16px; }
.about-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
.pillar { display: flex; align-items: flex-start; gap: 12px; }
.pillar-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); margin-top: 6px; flex-shrink: 0; }
.pillar p { font-size: 14px; font-weight: 600; color: var(--black); margin: 0; }
.about-page-section { display: none; }
.about-page-section.visible { display: block; }
/* ─── PRODUCT DETAIL OVERLAY ─────────────────────────── */
.detail-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(6px); z-index: 1050; display: none; align-items: flex-end; justify-content: center; padding: 0; }
.detail-overlay.active { display: flex; }
.detail-sheet { background: white; border-radius: 28px 28px 0 0; width: 100%; max-width: 960px; max-height: 90vh; overflow-y: auto; padding: 40px; animation: slideUp .4s cubic-bezier(0.4,0,0.2,1) both; position: relative; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.detail-close { position: absolute; top: 20px; right: 24px; width: 40px; height: 40px; border-radius: 50%; background: var(--gray-100); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--gray-600); transition: all .2s; }
.detail-close:hover { background: var(--gray-200); }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.detail-img { border-radius: 20px; overflow: hidden; background: var(--gray-50); display: flex; align-items: center; justify-content: center; min-height: 280px; }
.detail-img img { width: 100%; height: auto; max-height: 460px; object-fit: contain; display: block; }
.detail-cat { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--red); margin-bottom: 10px; }
.detail-name { font-family: 'Barlow Condensed', sans-serif; font-size: 36px; font-weight: 900; text-transform: uppercase; letter-spacing: -0.5px; line-height: 1.05; margin-bottom: 16px; }
.detail-price { font-family: 'Barlow Condensed', sans-serif; font-size: 42px; font-weight: 900; color: var(--red); margin-bottom: 20px; line-height: 1; }
.detail-desc { font-size: 15px; color: var(--gray-600); line-height: 1.7; margin-bottom: 32px; }
.detail-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-cart { flex: 1; min-width: 180px; height: 52px; background: var(--black); color: white; border: none; border-radius: 14px; font-size: 14px; font-weight: 700; letter-spacing: 0.5px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: all .2s; }
.btn-cart:hover { background: var(--red); transform: translateY(-2px); box-shadow: 0 10px 25px rgba(225,29,72,0.3); }
.btn-cart svg { width: 18px; height: 18px; }
.btn-fav-detail { width: 52px; height: 52px; border-radius: 14px; border: 1.5px solid var(--gray-200); background: white; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; }
.btn-fav-detail:hover { border-color: var(--red); background: rgba(225,29,72,0.05); }
.btn-fav-detail svg { width: 20px; height: 20px; stroke: var(--black); fill: none; }
.btn-fav-detail.active svg { fill: var(--red); stroke: var(--red); }
/* ─── CART SIDEBAR ───────────────────────────────────── */
.cart-sidebar { position: fixed; right: -480px; top: 0; width: 420px; height: 100%; background: white; box-shadow: -10px 0 50px rgba(0,0,0,0.12); z-index: 1100; display: flex; flex-direction: column; transition: right .45s cubic-bezier(0.4,0,0.2,1); }
.cart-sidebar.open { right: 0; }
.cart-sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 28px 28px 20px; border-bottom: 1px solid var(--gray-100); }
.cart-sidebar-header h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 24px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.5px; }
.cart-close { width: 38px; height: 38px; border-radius: 10px; background: var(--gray-100); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--gray-600); transition: background .2s; }
.cart-close:hover { background: var(--gray-200); }
.cart-items { flex: 1; overflow-y: auto; padding: 20px 28px; display: flex; flex-direction: column; gap: 12px; }
.cart-empty { text-align: center; padding: 60px 20px; color: var(--gray-400); }
.cart-empty svg { width: 48px; height: 48px; margin-bottom: 16px; opacity: 0.4; display: block; margin-left: auto; margin-right: auto; }
.cart-empty p { font-size: 15px; font-weight: 500; }
.cart-item { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 14px; background: var(--gray-50); }
.cart-item-img { width: 60px; height: 60px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: var(--gray-200); }
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { font-size: 14px; font-weight: 700; color: var(--black); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-item-price { font-size: 15px; font-weight: 800; color: var(--red); font-family: 'Barlow Condensed', sans-serif; }
.cart-item-remove { background: none; border: none; cursor: pointer; color: var(--gray-400); font-size: 20px; line-height: 1; transition: color .2s; flex-shrink: 0; }
.cart-item-remove:hover { color: var(--red); }
.cart-footer { padding: 20px 28px 28px; border-top: 1px solid var(--gray-100); }
.cart-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.cart-total span { font-size: 14px; color: var(--gray-600); font-weight: 600; }
.cart-total strong { font-family: 'Barlow Condensed', sans-serif; font-size: 28px; font-weight: 900; }
.checkout-btn { width: 100%; height: 54px; background: var(--red); color: white; border: none; border-radius: 14px; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: all .2s; }
.checkout-btn:hover { background: var(--red-dark); transform: translateY(-1px); }
/* ─── AUTH MODAL ─────────────────────────────────────── */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); z-index: 1200; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-backdrop.active { display: flex; }
.modal-box { background: white; border-radius: 24px; padding: 48px; width: 100%; max-width: 420px; text-align: center; animation: modalIn .3s ease both; position: relative; }
@keyframes modalIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
.modal-box h2 { font-family: 'Barlow Condensed', sans-serif; font-size: 32px; font-weight: 900; letter-spacing: -0.5px; text-transform: uppercase; margin-bottom: 6px; }
.modal-box p { font-size: 14px; color: var(--gray-600); margin-bottom: 28px; }
.modal-input { width: 100%; height: 50px; border: 1.5px solid var(--gray-200); border-radius: 12px; padding: 0 16px; font-size: 14px; font-family: 'Barlow', sans-serif; outline: none; background: var(--gray-50); color: var(--black); transition: border-color .2s; margin-bottom: 10px; display: block; }
.modal-input:focus { border-color: var(--black); background: white; }
.modal-submit { width: 100%; height: 52px; background: var(--red); color: white; border: none; border-radius: 12px; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; margin-top: 8px; transition: all .2s; }
.modal-submit:hover { background: var(--red-dark); }
.modal-footer { font-size: 13px; color: var(--gray-400); margin-top: 20px; }
.modal-footer a { color: var(--black); font-weight: 700; cursor: pointer; text-decoration: none; }
.modal-close { position: absolute; top: 16px; right: 16px; background: var(--gray-100); border: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 18px; color: var(--gray-600); display: flex; align-items: center; justify-content: center; }
.modal-close:hover { background: var(--gray-200); }
/* ─── MAP ────────────────────────────────────────────── */
#location { background: var(--gray-50); padding: 80px 60px; }
.map-wrapper { border-radius: 24px; overflow: hidden; height: 440px; box-shadow: 0 20px 60px rgba(0,0,0,0.08); }
.map-wrapper iframe { width: 100%; height: 100%; border: 0; display: block; }
/* ─── FOOTER ─────────────────────────────────────────── */
footer { background: var(--black); color: white; }
.footer-main { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr; gap: 40px; padding: 80px 60px 60px; }
.footer-brand-name { font-family: 'Barlow Condensed', sans-serif; font-size: 28px; font-weight: 900; text-transform: uppercase; letter-spacing: -0.5px; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
.footer-brand-name::before { content: ''; display: block; width: 4px; height: 32px; background: var(--red); border-radius: 2px; flex-shrink: 0; }
.footer-brand-name span { color: var(--red); }
.footer-brand p { color: rgba(255,255,255,0.45); font-size: 14px; line-height: 1.8; max-width: 300px; margin-bottom: 24px; }
.footer-social { display: flex; gap: 10px; }
.social-btn { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.07); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; text-decoration: none; }
.social-btn:hover { background: var(--red); }
.social-btn svg { width: 16px; height: 16px; fill: white; }
.footer-col h4 { font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 20px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a, .footer-col ul li button { text-decoration: none; background: none; border: none; font-family: 'Barlow', sans-serif; font-size: 14px; color: rgba(255,255,255,0.55); cursor: pointer; padding: 0; transition: color .2s; text-align: left; }
.footer-col ul li a:hover, .footer-col ul li button:hover { color: white; }
.footer-contact-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.footer-contact-item svg { width: 16px; height: 16px; stroke: var(--red); fill: none; flex-shrink: 0; margin-top: 2px; }
.footer-contact-item p { font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.5; }
.footer-bottom { padding: 20px 60px 30px; border-top: 1px solid rgba(255,255,255,0.07); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-bottom p { font-size: 13px; color: rgba(255,255,255,0.3); }
.footer-bottom a { font-size: 13px; color: rgba(255,255,255,0.3); text-decoration: none; transition: color .2s; }
.footer-bottom a:hover { color: rgba(255,255,255,0.6); }
/* ─── OVERLAY / TOAST ────────────────────────────────── */
#overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1090; display: none; }
#overlay.active { display: block; }
#toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--black); color: white; padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; z-index: 9999; transition: transform .3s ease; white-space: nowrap; pointer-events: none; display: flex; align-items: center; gap: 10px; }
#toast.show { transform: translateX(-50%) translateY(0); }
#toast::before { content: '✓'; color: var(--red); font-size: 16px; }
/* ─── FAVORITES SIDEBAR ──────────────────────────────── */
.fav-sidebar { position: fixed; right: -480px; top: 0; width: 420px; height: 100%; background: white; box-shadow: -10px 0 50px rgba(0,0,0,0.12); z-index: 1100; display: flex; flex-direction: column; transition: right .45s cubic-bezier(0.4,0,0.2,1); }
.fav-sidebar.open { right: 0; }
.fav-sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 28px 28px 20px; border-bottom: 1px solid var(--gray-100); }
.fav-sidebar-header h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 24px; font-weight: 900; text-transform: uppercase; }
.fav-sidebar-close { width: 38px; height: 38px; border-radius: 10px; background: var(--gray-100); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--gray-600); transition: background .2s; }
.fav-sidebar-close:hover { background: var(--gray-200); }
.fav-items { flex: 1; overflow-y: auto; padding: 20px 28px; display: flex; flex-direction: column; gap: 12px; }
.fav-empty { text-align: center; padding: 60px 20px; color: var(--gray-400); }
.fav-empty svg { width: 48px; height: 48px; margin-bottom: 16px; opacity: 0.4; display: block; margin-left: auto; margin-right: auto; }
.fav-empty p { font-size: 15px; font-weight: 500; }
.fav-item { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 14px; background: var(--gray-50); cursor: pointer; transition: background .2s; }
.fav-item:hover { background: var(--gray-100); }
.fav-item-img { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: var(--gray-200); }
.fav-item-img img { width: 100%; height: 100%; object-fit: cover; }
.fav-item-info { flex: 1; min-width: 0; }
.fav-item-cat { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--red); margin-bottom: 3px; }
.fav-item-name { font-size: 14px; font-weight: 700; color: var(--black); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav-item-price { font-size: 16px; font-weight: 900; color: var(--red); font-family: 'Barlow Condensed', sans-serif; }
.fav-item-remove { background: none; border: none; cursor: pointer; color: var(--gray-400); font-size: 20px; line-height: 1; transition: color .2s; flex-shrink: 0; padding: 4px 8px; min-width: 36px; min-height: 36px; display: flex; align-items: center; justify-content: center; }
.fav-item-remove:hover { color: var(--red); }
.fav-footer { padding: 20px 28px 28px; border-top: 1px solid var(--gray-100); }
.fav-footer-btn { width: 100%; height: 54px; background: var(--black); color: white; border: none; border-radius: 14px; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: all .2s; }
.fav-footer-btn:hover { background: var(--red); transform: translateY(-1px); }
/* ─── BADGES ─────────────────────────────────────────── */
.stock-badge { position: absolute; top: 14px; left: 14px; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; pointer-events: none; z-index: 2; }
.stock-badge.in-stock { background: rgba(16,185,129,0.15); color: #059669; border: 1px solid rgba(16,185,129,0.35); }
.stock-badge.low-stock { background: rgba(245,158,11,0.15); color: #d97706; border: 1px solid rgba(245,158,11,0.35); }
.stock-badge.out-stock { background: rgba(239,68,68,0.12); color: #dc2626; border: 1px solid rgba(239,68,68,0.3); }
.detail-stock-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; padding: 5px 12px; border-radius: 99px; margin-bottom: 16px; }
.detail-stock-badge.in-stock { background: rgba(16,185,129,0.12); color: #059669; border: 1px solid rgba(16,185,129,0.3); }
.detail-stock-badge.low-stock { background: rgba(245,158,11,0.12); color: #d97706; border: 1px solid rgba(245,158,11,0.3); }
.detail-stock-badge.out-stock { background: rgba(239,68,68,0.1); color: #dc2626; border: 1px solid rgba(239,68,68,0.25); }
.detail-stock-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* ─── RATING / TAGS / FILTER ─────────────────────────── */
.product-rating { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.product-rating .stars { color: #f59e0b; font-size: 13px; letter-spacing: 1px; }
.product-rating .count { font-size: 11px; color: var(--gray-400); font-weight: 500; }
.detail-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.detail-rating .stars { color: #f59e0b; font-size: 16px; }
.detail-rating .score { font-size: 14px; font-weight: 700; color: var(--black); }
.detail-rating .count { font-size: 13px; color: var(--gray-400); }
.product-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.product-tag { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: var(--gray-100); color: var(--gray-600); letter-spacing: 0.3px; }
.product-tag.red { background: rgba(225,29,72,0.08); color: var(--red); }
.products-filter-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; flex-wrap: wrap; }
.filter-tag { padding: 8px 18px; border-radius: 99px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; border: 1.5px solid var(--gray-200); background: white; color: var(--gray-600); cursor: pointer; transition: all .2s; }
.filter-tag.active, .filter-tag:hover { background: var(--black); color: white; border-color: var(--black); }
.filter-count { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--gray-400); }
/* ─── BREADCRUMB / WHATSAPP ──────────────────────────── */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--gray-400); letter-spacing: 0.5px; margin-bottom: 32px; }
.breadcrumb span { cursor: pointer; transition: color .2s; }
.breadcrumb span:hover { color: var(--red); }
.breadcrumb .sep { color: var(--gray-200); }
.breadcrumb .current { color: var(--black); cursor: default; }
.whatsapp-float { position: fixed; bottom: 28px; right: 28px; width: 58px; height: 58px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(37,211,102,0.4); cursor: pointer; z-index: 900; transition: transform .2s, box-shadow .2s; text-decoration: none; }
.whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 12px 32px rgba(37,211,102,0.5); }
.whatsapp-float svg { width: 28px; height: 28px; fill: white; }
/* ─── CHECKOUT / ACCOUNT ─────────────────────────────── */
.page-wrapper { padding-top: calc(var(--nav-h) + 40px); min-height: 100vh; }
.form-card { background: white; border-radius: 20px; border: 1px solid var(--gray-200); padding: 40px; }
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: 13px; font-weight: 600; color: var(--gray-800); margin-bottom: 8px; letter-spacing: 0.3px; }
.form-control { width: 100%; height: 50px; border: 1.5px solid var(--gray-200); border-radius: 12px; padding: 0 16px; font-size: 14px; font-family: 'Barlow', sans-serif; outline: none; background: var(--gray-50); color: var(--black); transition: border-color .2s; }
.form-control:focus { border-color: var(--black); background: white; }
.form-control.textarea { height: 100px; padding: 14px 16px; resize: vertical; }
.alert { padding: 14px 20px; border-radius: 12px; font-size: 14px; font-weight: 500; margin-bottom: 20px; }
.alert-danger { background: rgba(239,68,68,0.1); color: #dc2626; border: 1px solid rgba(239,68,68,0.25); }
.alert-success { background: rgba(16,185,129,0.1); color: #059669; border: 1px solid rgba(16,185,129,0.25); }
.payment-option { border: 1.5px solid var(--gray-200); border-radius: 14px; padding: 16px 20px; cursor: pointer; transition: all .2s; display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.payment-option:hover { border-color: var(--black); }
.payment-option.selected { border-color: var(--red); background: rgba(225,29,72,0.04); }
.payment-option input[type="radio"] { accent-color: var(--red); width: 18px; height: 18px; }
.payment-option-label { font-size: 14px; font-weight: 700; color: var(--black); }
.payment-option-desc { font-size: 12px; color: var(--gray-400); margin-top: 2px; }
/* ─── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 1024px) {
.features-grid { grid-template-columns: repeat(2, 1fr); }
.footer-main { grid-template-columns: 1fr 1fr; gap: 36px; }
.about-section { gap: 48px; }
.hero-stats { gap: 24px; }
}
@media (max-width: 900px) {
.cats-grid { grid-template-columns: 1fr; gap: 16px; }
.cat-card { height: 260px; }
.cat-card-body p, .cat-card-arrow { opacity: 1; transform: none; }
.about-section { grid-template-columns: 1fr; }
.about-img-accent { display: none; }
.about-stat-badge { top: 14px; left: 14px; }
.detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
nav { padding: 0 16px; gap: 8px; }
.nav-links { display: none; }
.hamburger { display: flex; }
.nav-search-wrap { display: none; }
.nav-auth { display: none; }
.nav-logo { font-size: 20px; flex-shrink: 0; }
.nav-actions { gap: 6px; }
.nav-icon-btn { width: 40px; height: 40px; }
/* Mobil hero: tüm ekranı kaplamasın, içerik yüksekliğinde dursun.
!important — sonradan gelen base ".hero { min-height: calc(...) }" kuralını
kaynak sırasına rağmen geçmek için zorunlu. */
.hero { min-height: 0 !important; height: auto !important; padding: 2.5rem 0 2.75rem; }
.hero-content { padding: 0 24px; max-width: 100%; }
.hero-badge { margin-bottom: 1rem; }
.hero-title { font-size: clamp(26px, 6.4vw, 40px); line-height: 1.05; letter-spacing: -0.5px; margin-bottom: .9rem; }
.hero-subtitle { font-size: .95rem; line-height: 1.55; margin-bottom: 1.4rem; max-width: 100%; }
.hero-actions { margin-bottom: 0; gap: .6rem; }
.hero-stats { display: none; }
.hero-scroll { left: 24px; }
.section { padding: 64px 20px; }
#location { padding: 60px 20px; }
.features-section { padding: 60px 20px; }
.features-grid { grid-template-columns: 1fr 1fr; gap: 0; }
.footer-main { grid-template-columns: 1fr; padding: 60px 20px 40px; gap: 32px; }
.footer-bottom { padding: 20px 20px 30px; flex-direction: column; align-items: flex-start; }
/* width:100vw scrollbar genişliğini de katıp ~16px yatay taşma yaratıyordu →
% kullan (fixed eleman için % = scrollbar'sız viewport). */
.cart-sidebar { width: 100%; right: -100%; }
.fav-sidebar { width: 100%; right: -100%; }
.section-header { gap: 12px; }
.map-wrapper { height: 300px; }
.hero h1 { font-size: clamp(24px, 6vw, 36px); }
.detail-sheet { padding: 28px 20px; border-radius: 20px 20px 0 0; }
.modal-box { padding: 36px 28px; }
.nav-icon-btn { width: 48px; height: 48px; }
.add-to-cart-btn { width: 48px; height: 48px; }
.product-card-fav { opacity: 1 !important; transform: scale(1) !important; }
.cat-card { min-height: 220px; }
.mobile-nav { z-index: 1001; }
/* Form & page cards */
.form-card { padding: 1.25rem; }
.order-card { padding: 1rem; }
.order-card-header { flex-wrap: wrap; gap: .5rem; }
/* Profile */
.profile-grid { grid-template-columns: 1fr !important; }
.profile-sidebar { margin-bottom: 1rem; }
/* Detail overlay: tek kolon */
.detail-grid { grid-template-columns: 1fr !important; }
.detail-img { height: 220px !important; }
/* Location */
.location-grid { grid-template-columns: 1fr !important; }
/* Auth */
.auth-page { padding: 1rem; }
/* Smart filters */
#smart-filters { gap: .4rem; }
#smart-filters select, #smart-filters input { height: 32px; font-size: .8rem; }
/* Dealer CTA */
.dealer-cta-banner { font-size: .8rem; padding: .6rem 1rem; }
}
@media (max-width: 480px) {
.features-grid { grid-template-columns: 1fr; }
.hero-cta { flex-direction: column; }
.btn-primary, .btn-outline, .hero-actions .btn-secondary { width: 100%; justify-content: center; }
.about-pillars { grid-template-columns: 1fr; }
.products-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.product-card-img { height: 180px; }
.product-card-body { padding: 14px; }
.product-card-name { font-size: 13px; }
.product-card-price { font-size: 20px; }
.detail-grid { gap: 20px; }
.detail-name { font-size: 26px; }
.detail-price { font-size: 32px; }
/* Filter tabs: küçük cihaz */
.filter-tab { padding: 6px 10px; font-size: .72rem; }
/* Cart item */
.cart-item { padding: .6rem 0; }
/* Nav logo smaller */
.nav-logo { font-size: 1.2rem; }
}
@media (hover: none) {
.cat-card-body p { opacity: 1; transform: none; }
.cat-card-arrow { opacity: 1; transform: none; }
.product-card-fav { opacity: 1 !important; transform: scale(1) !important; }
}
/* ─── LAYOUT HELPERS ─────────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.page-title { font-family: 'Barlow Condensed', sans-serif; font-size: 2.2rem; font-weight: 900; text-transform: uppercase; margin-bottom: 1.5rem; }
.text-center { text-align: center; }
/* ─── BTN VARIANTS ───────────────────────────────────── */
.btn-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: var(--gray-100); color: var(--black); border: 1.5px solid var(--gray-200); border-radius: 12px; font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; text-decoration: none; transition: all .2s; }
.btn-secondary:hover { background: var(--gray-200); }
.btn-danger { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: #dc2626; color: white; border: none; border-radius: 12px; font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; cursor: pointer; text-decoration: none; transition: all .2s; }
.btn-danger:hover { background: #b91c1c; transform: translateY(-1px); }
.btn-large { padding: 16px 36px; font-size: 16px; }
.btn-full { width: 100%; justify-content: center; }
.btn-sm { padding: 8px 16px; font-size: 12px; border-radius: 8px; }
/* ─── INDEX HERO ─────────────────────────────────────── */
.hero { position: relative; min-height: calc(100vh - var(--nav-h)); display: flex; align-items: center; margin-top: var(--nav-h); overflow: hidden; background: #060608; }
.hero-bg { position: absolute; inset: 0; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 100%); z-index: 1; }
.hero-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; }
.hero-content { position: relative; z-index: 2; padding: 4rem 4rem; max-width: 860px; color: white; }
.hero-badge { display: inline-block; background: rgba(225,29,72,0.2); border: 1px solid rgba(225,29,72,0.5); color: #fb7185; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 16px; border-radius: 99px; margin-bottom: 1.5rem; }
.hero-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(52px, 5.5vw, 78px); font-weight: 900; text-transform: uppercase; line-height: 0.92; letter-spacing: -2px; margin-bottom: 1.5rem; }
.hero-title span { color: var(--red); }
.hero-subtitle { font-size: 1.1rem; color: rgba(255,255,255,0.75); line-height: 1.7; margin-bottom: 2rem; max-width: 520px; font-weight: 300; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.hero-actions .btn-primary,
.hero-actions .btn-secondary { padding: 17px 38px; font-size: 16px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; }
.hero-actions .btn-primary { background: transparent; color: white; border: 1.5px solid rgba(255,255,255,0.45); }
.hero-actions .btn-primary:hover { background: rgba(255,255,255,0.12); border-color: white; box-shadow: none; transform: translateY(-2px); }
.hero-actions .btn-secondary { background: transparent; color: white; border: 1.5px solid rgba(255,255,255,0.45); }
.hero-actions .btn-secondary:hover { background: rgba(255,255,255,0.12); border-color: white; }
.hero-stats { display: flex; gap: 2.5rem; }
.hero-stats .stat strong { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 2.2rem; font-weight: 900; line-height: 1; }
.hero-stats .stat span { font-size: 11px; color: rgba(255,255,255,0.5); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; }
/* ─── MARQUEE ─────────────────────────────────────────── */
.marquee-section { background: var(--red); padding: 14px 0; overflow: hidden; white-space: nowrap; }
.marquee-track { overflow: hidden; }
.marquee-content { display: inline-flex; gap: 0; animation: marquee 30s linear infinite; white-space: nowrap; }
.marquee-content span { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: white; padding: 0 20px; }
.marquee-content span.sep { opacity: 0.4; padding: 0 4px; }
/* ─── CATEGORIES SECTION ─────────────────────────────── */
.categories { padding: 5rem 0; background: #fff; }
.section-header { text-align: center; margin-bottom: 3rem; }
.section-header h2 { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 900; text-transform: uppercase; letter-spacing: -1px; margin-bottom: 0.5rem; }
.section-header p { color: var(--gray-600); font-size: 1rem; }
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.category-card { border-radius: 20px; overflow: hidden; cursor: pointer; position: relative; transition: transform .3s; }
.category-card:hover { transform: translateY(-6px); }
.category-img-wrap { position: relative; height: 280px; }
.category-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.category-card:hover .category-img-wrap img { transform: scale(1.07); }
.category-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.1) 60%); }
.category-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem; color: white; display: flex; flex-direction: column; gap: 0.35rem; }
.category-info h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.6rem; font-weight: 800; text-transform: uppercase; line-height: 1.1; }
.category-info p { font-size: 13px; color: rgba(255,255,255,0.7); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.category-count { display: inline-block; align-self: flex-start; font-size: 11px; font-weight: 700; color: var(--red); background: rgba(255,255,255,0.15); padding: 3px 10px; border-radius: 99px; margin-top: 0.1rem; }
/* ─── DEALER CTA BANNER ──────────────────────────────── */
.dealer-cta-banner { display:flex; align-items:center; justify-content:space-between; gap:1rem;
background:linear-gradient(135deg,#1a1a1a 0%,#2d2d2d 100%); color:#fff;
padding:.75rem 1.25rem; border-radius:10px; margin-bottom:1rem; font-size:.875rem; flex-wrap:wrap; }
.btn-dealer-cta { background:#e8001d; color:#fff; border:none; padding:.45rem 1.1rem;
border-radius:6px; font-size:.8rem; font-weight:700; text-decoration:none; white-space:nowrap;
transition:background .2s; }
.btn-dealer-cta:hover { background:#c00018; color:#fff; }
/* ─── PRODUCTS SECTION ───────────────────────────────── */
.products-section { padding: 5rem 0; }
.filter-tabs { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 2rem; }
.filter-tab { padding: 8px 20px; border-radius: 99px; border: 1.5px solid var(--gray-200); background: white; color: var(--gray-600); font-size: 13px; font-weight: 700; cursor: pointer; transition: all .2s; }
.filter-tab.active, .filter-tab:hover { background: var(--black); color: white; border-color: var(--black); }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; min-height: 200px; }
.loading-spinner { grid-column: 1/-1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem; gap: 1rem; color: var(--gray-400); }
.spinner { width: 40px; height: 40px; border: 3px solid var(--gray-200); border-top-color: var(--red); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* ─── REVIEWS ────────────────────────────────────────── */
.review-card { padding:.65rem 0; border-bottom:1px solid #f4f4f4; }
.review-card:last-of-type { border-bottom:none; }
/* ─── FEATURES ───────────────────────────────────────── */
.features { padding: 5rem 0; background: var(--black); }
.features .section-header h2, .features .section-header p { color: white; }
.features .section-header p { color: rgba(255,255,255,0.5); }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.feature-card { background: rgba(255,255,255,0.05); border-radius: 16px; padding: 2rem; text-align: center; transition: background .2s; }
.feature-card:hover { background: rgba(255,255,255,0.08); }
.feature-card .feature-icon { width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem; }
.feature-card .feature-icon svg { width:26px;height:26px; }
.feature-card h3 { font-size: 1.1rem; font-weight: 700; color: white; margin-bottom: 0.5rem; }
.feature-card p { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.7; }
/* ─── ABOUT ──────────────────────────────────────────── */
.about { padding: 5rem 0; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.about-img-wrap { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 4/3; }
.about-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.about-badge { position: absolute; bottom: 2rem; left: 2rem; background: var(--red); color: white; padding: 1.2rem 1.5rem; border-radius: 16px; box-shadow: 0 12px 30px rgba(225,29,72,0.4); }
.about-badge strong { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 2.5rem; font-weight: 900; line-height: 1; }
.about-badge span { font-size: 12px; font-weight: 600; opacity: 0.9; }
.section-label { font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--red); display: block; margin-bottom: 0.5rem; }
.about-content h2 { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(1.8rem, 3.5vw, 2.5rem); font-weight: 900; text-transform: uppercase; letter-spacing: -1px; margin-bottom: 1rem; line-height: 1; }
.about-content p { color: var(--gray-600); line-height: 1.8; margin-bottom: 1rem; }
.about-stats { display: flex; gap: 2rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--gray-200); }
.about-stat strong { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 2rem; font-weight: 900; color: var(--red); line-height: 1; }
.about-stat span { font-size: 12px; color: var(--gray-600); font-weight: 500; }
/* ─── LOCATION ───────────────────────────────────────── */
.location { padding: 5rem 0; background: var(--gray-50); }
.location-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 3rem; align-items: start; }
.location-info { display: flex; flex-direction: column; gap: 1.5rem; }
.location-item { display: flex; gap: 1rem; align-items: flex-start; }
.location-icon { font-size: 1.5rem; flex-shrink: 0; margin-top: 2px; }
.location-item strong { display: block; font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.location-item p { font-size: 14px; color: var(--gray-600); line-height: 1.6; }
.location-item a { color: var(--red); text-decoration: none; font-weight: 600; }
.map-wrap { border-radius: 20px; overflow: hidden; height: 400px; box-shadow: 0 20px 60px rgba(0,0,0,0.1); }
.map-wrap iframe { width: 100%; height: 100%; border: 0; }
/* ─── AUTH PAGES ─────────────────────────────────────── */
.auth-page { min-height: 100vh; background: var(--gray-50); display: flex; align-items: center; justify-content: center; padding: 2rem; padding-top: calc(var(--nav-h) + 2rem); }
.auth-container { width: 100%; max-width: 440px; }
.auth-card { background: white; border-radius: 24px; border: 1px solid var(--gray-200); padding: 2.5rem; }
.auth-header { text-align: center; margin-bottom: 2rem; }
.auth-logo { font-family: 'Barlow Condensed', sans-serif; font-size: 2rem; font-weight: 900; text-decoration: none; color: var(--black); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 1.5rem; }
.auth-logo::before { content: ''; display: block; width: 4px; height: 28px; background: var(--red); border-radius: 2px; flex-shrink: 0; }
.auth-logo span { color: var(--red); }
.auth-header h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.3rem; }
.auth-header p { color: var(--gray-600); font-size: 14px; }
.auth-footer { text-align: center; margin-top: 1.5rem; font-size: 14px; color: var(--gray-600); }
.auth-footer a { color: var(--red); font-weight: 700; text-decoration: none; }
.form-row { display: flex; gap: 1rem; }
.form-row .form-group { flex: 1; }
.form-check-group { display: flex; align-items: center; }
.form-check { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 14px; font-weight: 500; }
/* ─── PROFILE PAGE ───────────────────────────────────── */
.profile-grid { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; padding: 2rem 0; }
.profile-sidebar { position: sticky; top: calc(var(--nav-h) + 1rem); height: fit-content; }
.profile-avatar { background: white; border-radius: 20px; border: 1px solid var(--gray-200); padding: 2rem; text-align: center; margin-bottom: 1rem; }
.avatar-circle { width: 72px; height: 72px; background: var(--red); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-size: 2rem; font-weight: 900; margin: 0 auto 1rem; }
.profile-name { font-weight: 700; font-size: 1rem; margin-bottom: 0.2rem; }
.profile-email { font-size: 13px; color: var(--gray-600); }
.profile-nav { background: white; border-radius: 20px; border: 1px solid var(--gray-200); overflow: hidden; }
.profile-nav-item { display: block; padding: 1rem 1.25rem; font-size: 14px; font-weight: 600; color: var(--gray-600); text-decoration: none; border-bottom: 1px solid var(--gray-100); transition: all .2s; }
.profile-nav-item:last-child { border-bottom: none; }
.profile-nav-item:hover, .profile-nav-item.active { color: var(--red); background: var(--gray-50); }
.profile-main .form-card { margin-bottom: 1.5rem; }
.profile-main .form-card h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 1.5rem; }
/* ─── CHECKOUT ────────────────────────────────────────── */
.checkout-grid { display: grid; grid-template-columns: 1fr 360px; gap: 2rem; align-items: start; }
.checkout-main .form-card { margin-bottom: 1.5rem; }
.checkout-main .form-card h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 1.5rem; }
.payment-options { display: flex; flex-direction: column; gap: 0; }
.payment-option-content { display: flex; align-items: center; gap: 1rem; pointer-events: none; }
.payment-icon { font-size: 1.5rem; }
.payment-option-content div strong { display: block; font-size: 14px; }
.payment-option-content div small { font-size: 12px; color: var(--gray-400); }
.order-summary { position: sticky; top: calc(var(--nav-h) + 1rem); }
.order-items { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; }
.order-item { display: flex; align-items: center; gap: 0.75rem; }
.order-item img { width: 50px; height: 50px; object-fit: cover; border-radius: 8px; border: 1px solid var(--gray-200); }
.order-item-info { flex: 1; }
.order-item-name { font-size: 13px; font-weight: 600; }
.order-item-qty { font-size: 12px; color: var(--gray-400); }
.order-item-price { font-size: 14px; font-weight: 700; white-space: nowrap; }
.order-totals { border-top: 1px solid var(--gray-200); padding-top: 1rem; margin-bottom: 1.5rem; }
.order-total-row { display: flex; justify-content: space-between; font-size: 14px; padding: 0.4rem 0; }
.order-total-row.total { border-top: 1px solid var(--gray-200); margin-top: 0.5rem; padding-top: 0.75rem; font-size: 1rem; }
.order-note { text-align: center; font-size: 12px; color: var(--gray-400); margin-top: 0.75rem; }
/* ─── BANK TRANSFER ──────────────────────────────────── */
.bank-info .bank-detail { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--gray-100); font-size: 14px; }
.bank-info .bank-detail span { min-width: 120px; color: var(--gray-600); font-weight: 500; }
.bank-info .bank-detail strong { flex: 1; }
.iban { font-family: monospace; font-size: 16px; letter-spacing: 2px; }
.btn-copy { padding: 4px 12px; border: 1px solid var(--gray-200); border-radius: 6px; background: var(--gray-50); font-size: 12px; cursor: pointer; transition: all .2s; }
.btn-copy:hover { background: var(--gray-200); }
/* ─── ORDER CONFIRMATION ─────────────────────────────── */
.order-summary-box { background: var(--gray-50); border-radius: 16px; padding: 1.5rem; margin: 1.5rem 0; }
.summary-row { display: flex; justify-content: space-between; padding: 0.5rem 0; font-size: 14px; }
/* ─── ORDER HISTORY ──────────────────────────────────── */
.orders-list { display: flex; flex-direction: column; gap: 1rem; }
.order-card { background: white; border-radius: 16px; border: 1px solid var(--gray-200); padding: 1.5rem; }
.order-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.order-date { font-size: 12px; color: var(--gray-400); margin-left: 0.75rem; }
.order-status-badge { padding: 4px 12px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.status-pending { background: #fef3c7; color: #92400e; }
.status-confirmed { background: #dbeafe; color: #1d4ed8; }
.status-preparing { background: #ede9fe; color: #6d28d9; }
.status-shipped { background: #e0f2fe; color: #0369a1; }
.status-delivered { background: #dcfce7; color: #166534; }
.status-cancelled { background: #fee2e2; color: #991b1b; }
.order-card-items { font-size: 13px; color: var(--gray-600); margin-bottom: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.order-card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 0.75rem; border-top: 1px solid var(--gray-100); }
.order-total { font-family: 'Barlow Condensed', sans-serif; font-size: 1.3rem; font-weight: 800; color: var(--red); }
/* ─── RESPONSIVE ADDITIONS ───────────────────────────── */
@media (max-width: 900px) {
.category-grid { grid-template-columns: 1fr; }
.about-grid { grid-template-columns: 1fr; }
.location-grid { grid-template-columns: 1fr; }
.checkout-grid { grid-template-columns: 1fr; }
.profile-grid { grid-template-columns: 1fr; }
.features-grid { grid-template-columns: 1fr 1fr; }
.hero-content { padding: 3rem 2rem; }
.hero h1 { font-size: clamp(36px, 5vw, 54px); }
.hero-title { font-size: clamp(36px, 5vw, 54px); }
.hero-subtitle { font-size: 1rem; }
}
@media (max-width: 600px) {
.features-grid { grid-template-columns: 1fr; }
.hero-stats { display: none; }
.auth-card { padding: 1.5rem; }
.form-row { flex-direction: column; }
.hero { padding: 1.9rem 0 2.1rem; }
.hero h1 { font-size: clamp(24px, 7.2vw, 32px); letter-spacing: -.5px; }
.hero-title { font-size: clamp(24px, 7.2vw, 32px); letter-spacing: -.5px; margin-bottom: .75rem; }
.hero-subtitle { font-size: .9rem; line-height: 1.5; margin-bottom: 1.2rem; }
.hero-actions { flex-direction: column; gap: .55rem; }
.hero-actions .btn-primary, .hero-actions .btn-secondary, .hero-actions a { width: 100%; text-align: center; justify-content: center; padding: 13px 20px; font-size: 14px; letter-spacing: 1px; }
.hero-content { padding: 0 1.25rem; }
}
/* ═══════════════════════════════════════════════════════════
UX / RESPONSIVE FIXES (2026-06-23)
Sonradan eklendi → kaskadı garanti kazanır, mevcut kuralları bozmaz.
═══════════════════════════════════════════════════════════ */
/* iOS Safari, 16px altı yazı tipli input'a odaklanınca sayfayı zoom'lar.
Mobilde tüm form alanlarını 16px'e sabitle (inline width'leri bozmadan). */
@media (max-width: 768px) {
.form-control, .modal-input, textarea,
#sort-select, #brand-select, #stock-select, #min-price, #max-price {
font-size: 16px !important;
}
}
/* Ürün grid'i: anasayfa ve kategori sayfası .product-grid kullanıyor, ama
eski 2-sütun mobil kuralı yanlışlıkla .products-grid'i hedefliyordu →
telefonda ürünler tek sütun çıkıyordu. Telefonda 2 sütun yap. */
@media (max-width: 600px) {
.product-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.product-grid .product-card-img { height: 168px; }
.product-grid .product-card-body { padding: 12px; }
.product-grid .product-card-name { font-size: 13px; line-height: 1.25; }
.product-grid .product-card-price { font-size: 19px; }
.product-grid .product-card-cat { font-size: 10px; }
}
@media (max-width: 360px) {
.product-grid { grid-template-columns: 1fr; }
.product-grid .product-card-img { height: 210px; }
}
/* Dar ekranda gövde kenar boşluğunu azalt → içeriğe daha fazla genişlik. */
@media (max-width: 480px) {
.container { padding: 0 1rem; }
}
/* Filtre çubuğundaki sabit-px select'ler küçük ekranda esnesin (2'li satır). */
@media (max-width: 600px) {
#sort-select, #brand-select, #stock-select {
width: auto !important;
flex: 1 1 calc(50% - .5rem);
min-width: 0;
}
}
/* Erişilebilirlik: klavye kullanıcıları için görünür odak halkası. */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: 2px solid var(--red);
outline-offset: 2px;
}
/* Görsellerin kırık ikon yerine düzgün doldurması için emniyet. */
img { max-width: 100%; }
/* ─── UX FIXES (devam — audit-2, 2026-06-23) ───────────── */
/* Banka havalesi IBAN satırı dar ekranda taşıyordu → sar. */
@media (max-width: 480px) {
.bank-info .bank-detail { flex-wrap: wrap; gap: .35rem 1rem; }
.bank-info .bank-detail span { min-width: 90px; }
.iban { font-size: 14px; letter-spacing: 1px; word-break: break-all; flex: 1 1 100%; }
}
/* Profil kayıtlı-adres kartı: mobilde dikey yığ + 44px dokunma alanı. */
@media (max-width: 600px) {
.profile-main #addresses > div > div[style*="justify-content:space-between"] { flex-direction: column; align-items: stretch; }
.profile-main #addresses button[onclick^="editAddress"],
.profile-main #addresses form[action="/account/delete-address"] button { min-height: 44px; padding: .5rem 1rem; width: 100%; }
}
/* Sipariş özeti tek sütuna düşünce sticky kalmasın (boşluk/zıplama olmasın). */
@media (max-width: 900px) {
.order-summary { position: static; top: auto; }
}
/* Filtre çubuğu: fiyat aralığı inputları + "Temizle" butonu mobilde düzgün satır. */
@media (max-width: 600px) {
#min-price, #max-price { flex: 1 1 0; width: auto !important; min-width: 0; }
.btn-outline { flex: 1 1 100%; }
}
/* Onay / iade aksiyon butonları en dar ekranda tam genişlik. */
@media (max-width: 400px) {
.confirm-actions { flex-direction: column; }
.confirm-actions .btn { width: 100%; text-align: center; justify-content: center; }
}
@media (max-width: 380px) {
.refund-actions { flex-direction: column; }
.refund-actions > a { text-align: center; justify-content: center; }
}
/* Şifre sıfırlama kodu mobilde de belirgin kalsın (genel 16px clamp'ten muaf). */
@media (max-width: 768px) {
input[name="Code"].form-control { font-size: 1.4rem !important; letter-spacing: 6px; }
}
/* ═══════════════════════════════════════════════════════════
MOBİL SIKILAŞTIRMA (2026-06-23)
Anasayfa bölümleri (.categories/.products-section/.features/.about/.location)
.section sınıfını KULLANMADIĞI için mobilde de 5rem (80px) dikey boşluk
taşıyordu → aşırı boşluk. Mobil dikey ritmi sıkılaştır, görselleri dengele.
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.categories, .products-section, .features, .about, .location { padding: 2.75rem 0; }
.section-header { margin-bottom: 1.5rem; }
.section-header p { font-size: .9rem; }
/* Ürün filtre çubuğu mobilde daha kompakt. */
#smart-filters { padding: .6rem; gap: .45rem; }
.dealer-cta-banner { padding: .6rem .85rem; gap: .5rem; }
}
/* Tablet (600–900px): kategori kartları tek dev sütun yerine 2'li ızgara. */
@media (min-width: 600px) and (max-width: 900px) {
.category-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.categories, .products-section, .features, .about, .location { padding: 2.25rem 0; }
.section-header { margin-bottom: 1.1rem; }
/* Kategori kartı telefonda daha kısa + dengeli oran → daha az kaydırma. */
.category-img-wrap { height: 190px; }
.category-info { padding: 1rem; }
.category-info h3 { font-size: 1.25rem; }
/* Footer dikey boşluğunu azalt. */
.footer-main { padding: 2.5rem 1.25rem 1.5rem; gap: 1.75rem; }
/* About istatistikleri dar ekranda sarsın, taşmasın. */
.about-stats { gap: 1.25rem; flex-wrap: wrap; }
/* Sayfa başlıkları mobilde biraz küçülsün. */
.page-title { font-size: 1.7rem; }
}
/* ═══════════════════════════════════════════════════════════
MOBİL NAV YÜKSEKLİĞİ + TAŞMA KÖK-NEDEN DÜZELTMESİ (2026-06-23)
Logonun üstündeki beyaz boşluk = 72px nav mobilde fazla yüksekti.
--nav-h'i düşürünce nav + hero offset + page-wrapper padding birlikte küçülür.
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
:root { --nav-h: 56px; }
}
/* ═══════════════════════════════════════════════════════════
MOBİL DOKUNMA ALANI & KART DÜZELTMELERİ (audit-2, 2026-06-23)
═══════════════════════════════════════════════════════════ */
/* Ürün adı her zaman 2 satıra kırpılsın → kart yükseklikleri eşitlenir, grid hizalı. */
.product-card-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 768px) {
/* Hamburger 44x44 dokunma alanı (yan ikon butonlarıyla hizalı). */
.hamburger { width: 44px; height: 44px; justify-content: center; align-items: center; padding: 0; box-sizing: border-box; }
/* Drawer açıkken overlay'in (z-index 1090) üstünde kalsın. */
.mobile-nav.open { z-index: 1101; }
/* Favori (kalp) butonu mobilde 44x44 + dar kartta köşeye dengeli. */
.product-card-fav { opacity: 1 !important; transform: scale(1) !important; width: 44px; height: 44px; top: 10px; right: 10px; }
}
@media (max-width: 600px) {
/* Ürün kart adına 2 satır yükseklik rezerve et (footer hizası). */
.product-grid .product-card-name { min-height: calc(13px * 1.25 * 2); }
/* Marka/kategori etiketi tek satır + ellipsis. */
.product-grid .product-card-cat { letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Kart footer: fiyat küçülsün, buton dışarı itilmesin. */
.product-grid .product-card-footer { gap: 8px; }
.product-grid .product-card-price { min-width: 0; word-break: break-word; }
.product-grid .add-to-cart-btn { flex-shrink: 0; }
/* IBAN "Kopyala" dokunma alanı 44px. */
.btn-copy { min-height: 44px; padding: 10px 18px; font-size: 14px; }
/* Filtre sekmeleri 4-5 satıra yığılmasın → tek satır yatay kaydırma şeridi. */
.filter-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tab { flex: 0 0 auto; }
/* Kategori filtre fiyat aralığı kendi tam satırı. */
.cat-price-range { flex: 1 1 100%; }
/* iyzico gömülü ödeme formu telefonda taşmasın. */
.iyzico-form-card { padding: 1rem; }
#iyzipay-checkout-form, #iyzipay-checkout-form * { max-width: 100%; }
#iyzipay-checkout-form iframe { width: 100%; max-width: 100%; }
/* Footer güven/ödeme şeridi: ortala, kenar boşluğunu azalt. */
.footer-trust-bar { padding: 1rem 1.25rem !important; }
.footer-trust-inner { justify-content: center !important; gap: .75rem !important; }
}
@media (max-width: 480px) {
/* Ödeme seçeneği satırı 320px'te sığsın. */
.payment-option { padding: 14px; gap: 10px; }
.payment-option-content { gap: .6rem; }
.payment-option-content > div:last-child { min-width: 0; }
/* iyzico fallback aksiyon butonları tam genişlik + 44px. */
.iyzico-fallback-actions { flex-direction: column; }
.iyzico-fallback-actions > button,
.iyzico-fallback-actions > a,
.iyzico-fallback-actions > form,
.iyzico-fallback-actions > form > button { width: 100%; min-height: 44px; box-sizing: border-box; text-align: center; }
}
/* ─── FAVORİ KALBİ SERTLEŞTİRME (2026-06-23) ─────────────────
Çoklu favorilemede kalp ikonu bozuluyordu: SVG'ye sabit boyut + flex-shrink:0,
ve geçişi yalnızca renk/zemine indir (transition:all ölçek/repaint glitch'i yapıyordu). */
.product-card-fav { aspect-ratio: 1; flex-shrink: 0; padding: 0; overflow: hidden; transition: background .2s, transform .2s; }
.product-card-fav svg { width: 16px !important; height: 16px !important; flex: 0 0 16px; display: block; transition: fill .15s, stroke .15s; }
/* Ürün kartı görselleri: her ekran boyutunda STANDART KARE oran → kart yükseklikleri
tutarlı, görsel ölçekleme bozulması yok (önceden 240/168/210px değişiyordu). */
.product-card-img { aspect-ratio: 1 / 1 !important; height: auto !important; }
.product-card-img img { width: 100%; height: 100%; object-fit: cover; }
/* Footer alt satırı (telif + "Developed by") mobilde uzun olunca sağdan kesiliyordu.
flex yerine display:block → normal blok gibi doğal sarar (kesin çözüm). */
@media (max-width: 768px) {
.footer-bottom { display: block; }
.footer-bottom p { overflow-wrap: anywhere; margin-bottom: 6px; }
.footer-bottom > a { display: inline-block; }
}