@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,900&display=swap');
/* Gece/Gündüz modu ortak iyileştirmeleri — tüm sayfalarda <head> sonunda yüklenir (sayfa içi stillerden sonra).
   Gece modu: html.dark (tema düğmesi / localStorage 'theme' / ilk ziyarette sistem tercihi). */

/* Tema geçişi yumuşak olsun; tarayıcının kendi kontrolleri (kaydırma çubuğu, select, tarih) temaya uysun */
html, body { transition: background-color .25s ease, color .25s ease; }
html.dark { color-scheme: dark; }
html:not(.dark) { color-scheme: light; }

/* ---- Gece: ürün görseli alanı ----
   Ürün fotoğraflarının çoğu beyaz zeminli; koyu kart içinde "yüzen beyaz kare" yerine alanın tamamı açık zemin. */
html.dark .product-thumb-bg { background-color: #f1f5f9 !important; }
/* görsel yoksa (yer tutucu ikon) koyu kalsın, büyük açık kutu parlamasın */
html.dark .product-thumb-bg:not(:has(img)) { background-color: #1e293b !important; }
html.dark .product-thumb-bg img { mix-blend-mode: multiply; }
html.dark .product-thumb-bg .fa-image,
html.dark .product-thumb-bg .fa-regular,
html.dark .product-thumb-bg .fa-solid { color: #94a3b8 !important; }

/* ---- Gece: renkli rozet / ikon zeminleri (stokta, uyum garantisi, uyarı kutuları) ----
   Açık tonlu zeminler koyu temada ya bembeyaz parlıyor ya da kayboluyordu: yarı saydam ton + açık yazı. */
html.dark .bg-green-50, html.dark .bg-green-100, html.dark .bg-emerald-50, html.dark .bg-emerald-100 { background-color: rgba(16, 185, 129, .2) !important; }
html.dark .text-green-500, html.dark .text-green-600, html.dark .text-green-700, html.dark .text-green-800,
html.dark .text-emerald-500, html.dark .text-emerald-600, html.dark .text-emerald-700, html.dark .text-emerald-800 { color: #4ade80 !important; }
html.dark .border-green-100, html.dark .border-green-200, html.dark .border-emerald-100, html.dark .border-emerald-200 { border-color: rgba(74, 222, 128, .45) !important; }

html.dark .bg-blue-50, html.dark .bg-blue-100, html.dark .bg-indigo-50, html.dark .bg-indigo-100 { background-color: rgba(59, 130, 246, .15) !important; }
html.dark .text-blue-600, html.dark .text-blue-700, html.dark .text-blue-800, html.dark .text-indigo-600, html.dark .text-indigo-700 { color: #60a5fa !important; }
html.dark .border-blue-100, html.dark .border-blue-200 { border-color: rgba(96, 165, 250, .35) !important; }
/* mavi zeminli düğmelerin yazısı beyaz kalsın */
html.dark .bg-blue-600.text-white, html.dark .bg-blue-700.text-white, html.dark .bg-blue-600 .text-white { color: #fff !important; }

html.dark .bg-amber-50, html.dark .bg-amber-100, html.dark .bg-yellow-50, html.dark .bg-yellow-100, html.dark .bg-orange-50, html.dark .bg-orange-100 { background-color: rgba(245, 158, 11, .14) !important; }
html.dark .text-amber-600, html.dark .text-amber-700, html.dark .text-amber-800, html.dark .text-yellow-700, html.dark .text-yellow-800,
html.dark .text-orange-600, html.dark .text-orange-700 { color: #fbbf24 !important; }
html.dark .border-amber-100, html.dark .border-amber-200, html.dark .border-yellow-200, html.dark .border-orange-200 { border-color: rgba(251, 191, 36, .35) !important; }

html.dark .bg-red-50, html.dark .bg-red-100, html.dark .bg-rose-50 { background-color: rgba(239, 68, 68, .14) !important; }
html.dark .text-red-700, html.dark .text-red-800 { color: #fca5a5 !important; }
html.dark .border-red-100, html.dark .border-red-200 { border-color: rgba(248, 113, 113, .35) !important; }

/* ---- Gece: fiyatlar ---- kırmızı-pembe yerine okunaklı, sıcak bir ton */
html.dark .text-red-500, html.dark .text-red-600 { color: #fb7185 !important; }

/* ---- Gece: form alanları ---- */
html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b !important; }
html.dark select option { background-color: #1e293b; color: #e2e8f0; }
html.dark input:focus, html.dark select:focus, html.dark textarea:focus { border-color: #3b82f6 !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, .25) !important; }

/* ---- Gece: kart kenarları ve gölgeler biraz daha belirgin ---- */
html.dark .shadow-sm, html.dark .shadow, html.dark .shadow-md { box-shadow: 0 1px 3px rgba(0, 0, 0, .45) !important; }
html.dark .hover\:shadow-lg:hover, html.dark .hover\:shadow-xl:hover { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, .6) !important; }

/* ---- Gece: ince kaydırma çubuğu ---- */
html.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark ::-webkit-scrollbar-track { background: #0f172a; }
html.dark ::-webkit-scrollbar-thumb { background: #334155; border-radius: 8px; border: 2px solid #0f172a; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }

/* ---- Yazı tipi: ürün alanları sade alışveriş sitesi tipografisi (Inter; Montserrat sadece logo/kahraman başlıkta) ---- */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.urun-adi { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important; letter-spacing: -0.005em; }
.urun-adi a { color: inherit; }
.urun-fiyat { font-family: 'Inter', system-ui, sans-serif !important; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
/* fiyatın gece modu rengi sayfadaki dark:text-white ile beyaz kalsın (yukarıdaki kırmızı tonu ezmesin) */
html.dark .urun-fiyat.dark\:text-white, html.dark .text-red-600.dark\:text-white { color: #f8fafc !important; }

/* ---- Logo (2026-10-04): MATRIX + kırmızı TR (geçişli) + hız çizgisi + aralıklı OTOMOTİV ----
   Kullanım: <span class="mx-logo" style="--mx:2.3rem"><span class="mx-w">MA<span class="mx-tr">TR</span>IX</span><span class="mx-s">otomotiv</span></span>
   Koyu zeminde (alt bilgi, giriş paneli) .mx-inv ekleyin. */
.mx-logo { display: inline-flex; align-items: center; gap: .55em; line-height: 1; font-size: var(--mx, 2.3rem); text-decoration: none; white-space: nowrap; }
.mx-logo .mx-w { font-family: 'Montserrat', sans-serif; font-weight: 900; font-style: italic; letter-spacing: -.045em; color: #0f172a; position: relative; padding-right: .04em; }
.mx-logo .mx-tr { background: linear-gradient(180deg, #f43f5e 0%, #e11d48 35%, #b91c1c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mx-logo .mx-w::after { content: ""; position: absolute; left: .08em; right: .02em; bottom: -.14em; height: .075em; border-radius: 2px;
    background: linear-gradient(90deg, #dc2626 0%, #dc2626 40%, rgba(220, 38, 38, 0) 100%); transform: skewX(-24deg); transform-origin: left; transition: transform .35s ease; }
.mx-logo:hover .mx-w::after, a:hover > .mx-logo .mx-w::after { transform: skewX(-24deg) scaleX(1.08); }
.mx-logo .mx-s { font-family: 'Inter', system-ui, sans-serif; font-style: normal; font-weight: 700; font-size: .33em; letter-spacing: .22em; text-transform: uppercase; color: #475569; }
html.dark .mx-logo .mx-w, .mx-logo.mx-inv .mx-w { color: #fff; }
html.dark .mx-logo .mx-s, .mx-logo.mx-inv .mx-s { color: #cbd5e1; }
@media (max-width: 480px) { .mx-logo { font-size: min(var(--mx, 2.3rem), 1.7rem); } }