/* --- TORK FREN - YAZI OKUNABİLİRLİĞİ VE MARQUEE ANIMASYONU --- */

:root {
    --bg-color-main: #ffffff;
    --bg-color-darker: #f3f4f6;
    --bg-color-card: #f9fafb;
    --bg-color-card-dark: #e5e7eb;

    --text-gray-300: #1f2937;
    --text-gray-400: #4b5563;
    --text-gray-500: #6b7280;

    --border-color-default: rgba(0, 0, 0, 0.08);
    --border-color-10: rgba(0, 0, 0, 0.1);
    --border-color-15: rgba(0, 0, 0, 0.15);
    --border-color-20: rgba(0, 0, 0, 0.2);
    --border-color-5: rgba(0, 0, 0, 0.05);
    --border-color-08: rgba(0, 0, 0, 0.08);
    --border-color-06: rgba(0, 0, 0, 0.06);
    --border-color-12: rgba(0, 0, 0, 0.12);

    --bg-glow-top: radial-gradient(ellipse at top, rgba(201, 37, 43, 0.04) 0%, rgba(255, 255, 255, 0) 75%);
    --bg-glow-mid: radial-gradient(circle at center, rgba(0, 0, 0, 0.005) 0%, rgba(255, 255, 255, 0) 80%);
    --bg-glow-bottom: radial-gradient(circle at bottom right, rgba(201, 37, 43, 0.01) 0%, rgba(255, 255, 255, 0) 70%);

    --logo-filter: invert(1) hue-rotate(180deg) brightness(0.4) contrast(2);
    --pdf-canvas-bg: #f3f4f6;
}

.dark {
    --bg-color-main: #0a0a0c;
    --bg-color-darker: #060608;
    --bg-color-card: #0c0c10;
    --bg-color-card-dark: #09090c;

    --text-gray-300: #f4f4f5;
    --text-gray-400: #e4e4e7;
    --text-gray-500: #a1a1aa;

    --border-color-default: rgba(255, 255, 255, 0.08);
    --border-color-10: rgba(255, 255, 255, 0.1);
    --border-color-15: rgba(255, 255, 255, 0.15);
    --border-color-20: rgba(255, 255, 255, 0.2);
    --border-color-5: rgba(255, 255, 255, 0.05);
    --border-color-08: rgba(255, 255, 255, 0.08);
    --border-color-06: rgba(255, 255, 255, 0.06);
    --border-color-12: rgba(255, 255, 255, 0.12);

    --bg-glow-top: radial-gradient(ellipse at top, rgba(201, 37, 43, 0.06) 0%, rgba(10, 10, 12, 0) 75%);
    --bg-glow-mid: radial-gradient(circle at center, rgba(255, 255, 255, 0.01) 0%, rgba(10, 10, 12, 0) 80%);
    --bg-glow-bottom: radial-gradient(circle at bottom right, rgba(201, 37, 43, 0.02) 0%, rgba(10, 10, 12, 0) 70%);

    --logo-filter: none;
    --pdf-canvas-bg: #ffffff;
}

/* Yumuşak tema geçiş animasyonları */
html,
body,
div,
header,
nav,
footer,
section,
a,
button,
input,
textarea,
span,
p,
h1,
h2,
h3,
h4,
h5,
h6,
i,
svg {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* Koyu arka planda gri metinlerin kontrastını artırarak okunabilirliği sağlıyoruz */
.text-gray-500 {
    color: var(--text-gray-500) !important;
}

.text-gray-400 {
    color: var(--text-gray-400) !important;
}

.text-gray-300 {
    color: var(--text-gray-300) !important;
}

/* Diğer gri tonları ve sönük metinlerin açık modda okunabilir hale getirilmesi */
html:not(.dark) .text-gray-200 {
    color: #27272a !important;
}

html:not(.dark) .text-gray-100 {
    color: #18181b !important;
}

html:not(.dark) .text-dark-textMuted {
    color: #4b5563 !important;
}

/* Koyu modda beyaz metin olan yerleri açık modda koyultma (kırmızı butonlar hariç) */
html:not(.dark) .text-white:not(.bg-brand-red):not(.bg-brand-red *):not(.bg-brand-redDark):not(.bg-brand-redDark *):not(.keep-white):not(.keep-white *) {
    color: #1f2937 !important;
}

/* Tailwind'in beyaz yarı-saydam metin sınıflarının açık modda koyu yarı-saydama dönüştürülmesi */
html:not(.dark) .text-white\/95,
html:not(.dark) .text-white\/90,
html:not(.dark) .text-white\/85,
html:not(.dark) .text-white\/80,
html:not(.dark) .text-white\/75,
html:not(.dark) .text-white\/70,
html:not(.dark) .text-white\/60,
html:not(.dark) .text-white\/50 {
    color: rgba(31, 41, 55, 0.85) !important;
}

html:not(.dark) .text-white\/40 {
    color: rgba(31, 41, 55, 0.4) !important;
}

html:not(.dark) .text-white\/30 {
    color: rgba(31, 41, 55, 0.3) !important;
}

html:not(.dark) .text-white\/20 {
    color: rgba(31, 41, 55, 0.2) !important;
}

html:not(.dark) .text-white\/15 {
    color: rgba(31, 41, 55, 0.15) !important;
}

html:not(.dark) .text-white\/10 {
    color: rgba(31, 41, 55, 0.1) !important;
}

html:not(.dark) .text-white\/5 {
    color: rgba(31, 41, 55, 0.05) !important;
}

html:not(.dark) .text-white\/\[0\.01\] {
    color: rgba(31, 41, 55, 0.012) !important;
}

html:not(.dark) .text-white\/\[0\.015\] {
    color: rgba(31, 41, 55, 0.015) !important;
}

html:not(.dark) .footer-watermark {
    color: rgba(31, 41, 55, 0.015) !important;
}

/* Sert kodlanmış arka plan ve kart renklerinin açık mod uyumluluğu */
html:not(.dark) body {
    background-color: var(--bg-color-main) !important;
    color: #1f2937 !important;
}

html:not(.dark) .bg-dark-bg,
html:not(.dark) .bg-\[\#0a0a0c\],
html:not(.dark) .bg-\[\#08080b\],
html:not(.dark) .bg-\[\#0a0a0e\],
html:not(.dark) .bg-\[\#0a0a0c\]\/95,
html:not(.dark) .bg-\[\#08080b\]\/95,
html:not(.dark) .bg-\[\#07070c\] {
    background-color: var(--bg-color-main) !important;
}

/* Scroll durumunda (Javascript tarafından eklenen) navbar renginin açık tema uyumu */
nav.scrolled-nav {
    background-color: rgba(10, 10, 12, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html:not(.dark) nav.scrolled-nav {
    background-color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

html:not(.dark) .bg-\[\#0a0a0c\]\/85 {
    background-color: rgba(255, 255, 255, 0.85) !important;
}

/* Açık modda form inputları, selectbox ve labellar için yüksek kontrastlı okunabilirlik */
html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea {
    color: #1f2937 !important;
    background-color: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

html:not(.dark) input:focus,
html:not(.dark) select:focus,
html:not(.dark) textarea:focus {
    border-color: #c9252b !important;
    background-color: #ffffff !important;
}

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
    color: #6b7280 !important;
}

html:not(.dark) label {
    color: #374151 !important;
}

html:not(.dark) .bg-\[\#050507\],
html:not(.dark) .bg-\[\#060608\] {
    background-color: var(--bg-color-darker) !important;
}

html:not(.dark) .bg-\[\#0b0b10\],
html:not(.dark) .bg-\[\#0c0c10\],
html:not(.dark) .bg-\[\#0c0c0f\],
html:not(.dark) .bg-\[\#0c0c12\],
html:not(.dark) .bg-\[\#0e0e12\],
html:not(.dark) .bg-\[\#09090c\],
html:not(.dark) .bg-\[\#09090e\],
html:not(.dark) .bg-\[\#09090e\]\/85,
html:not(.dark) .bg-\[\#09090c\]\/95,
html:not(.dark) .bg-\[\#0c0c14\],
html:not(.dark) .bg-\[\#090910\]\/95,
html:not(.dark) .bg-\[\#121218\],
html:not(.dark) .bg-\[\#0a0a0e\]\/95,
html:not(.dark) .bg-\[\#0c0c0f\]\/95 {
    background-color: var(--bg-color-card) !important;
}

/* Açık modda e-katalog arka planı */
html:not(.dark) #e-katalog {
    background: linear-gradient(to bottom, #ffffff, #f3f4f6, #ffffff) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Footer sosyal ikonları açık mod görünümü */
html:not(.dark) footer .flex a i,
html:not(.dark) footer .flex a svg {
    color: #4b5563 !important;
}

html:not(.dark) footer .flex a:hover i,
html:not(.dark) footer .flex a:hover svg {
    color: #c9252b !important;
}

/* Yasal bilgilendirme linkleri contrast düzeltmesi */
html:not(.dark) .text-gray-600 {
    color: #6b7280 !important;
}

/* Açık modda şeffaf beyaz-cam arka planların koyu-cam arka planlara dönüştürülmesi */
html:not(.dark) .bg-white\/5 {
    background-color: rgba(15, 23, 42, 0.05) !important;
}

html:not(.dark) .bg-white\/10 {
    background-color: rgba(15, 23, 42, 0.1) !important;
}

html:not(.dark) .bg-white\/15 {
    background-color: rgba(15, 23, 42, 0.15) !important;
}

html:not(.dark) .bg-white\/20 {
    background-color: rgba(15, 23, 42, 0.2) !important;
}

html:not(.dark) .bg-white\/\[0\.02\] {
    background-color: rgba(15, 23, 42, 0.025) !important;
}

html:not(.dark) .bg-white\/\[0\.03\] {
    background-color: rgba(15, 23, 42, 0.04) !important;
}

html:not(.dark) .bg-white\/\[0\.04\] {
    background-color: rgba(15, 23, 42, 0.05) !important;
}

html:not(.dark) .bg-white\/\[0\.06\] {
    background-color: rgba(15, 23, 42, 0.07) !important;
}

html:not(.dark) .bg-white\/\[0\.08\] {
    background-color: rgba(15, 23, 42, 0.09) !important;
}

html:not(.dark) .bg-white\/\[0\.12\] {
    background-color: rgba(15, 23, 42, 0.13) !important;
}

html:not(.dark) .bg-white\/\[0\.015\] {
    background-color: rgba(15, 23, 42, 0.02) !important;
}

html:not(.dark) .bg-white\/\[0\.01\] {
    background-color: rgba(15, 23, 42, 0.015) !important;
}

/* Koyu mod gradyan geçişlerini açık modda beyaz gradyana dönüştürür */
html:not(.dark) .from-\[\#0a0a0c\] {
    --tw-gradient-from: #ffffff !important;
}

html:not(.dark) .via-\[\#0a0a0c\]\/60 {
    --tw-gradient-stops: var(--tw-gradient-from), rgba(255, 255, 255, 0.6) 60%, var(--tw-gradient-to, rgba(255, 255, 255, 0)) !important;
}

/* Açık temada gradyan yazılarının (white -> gray-200 -> brand-red) okunabilirliği için koyu gradyana dönüştürülmesi */
html:not(.dark) .bg-clip-text.from-white {
    --tw-gradient-from: #111827 !important;
    /* gray-900 */
    --tw-gradient-to: rgba(17, 24, 39, 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

html:not(.dark) .bg-clip-text.via-gray-200 {
    --tw-gradient-stops: var(--tw-gradient-from), #374151 var(--tw-gradient-via-position, 50%), var(--tw-gradient-to) !important;
    /* gray-700 */
}

/* Logo filtre uygulaması */
header nav img {
    filter: var(--logo-filter);
}

/* Aşırı ince font ağırlığı optimize edildi */
.font-light {
    font-weight: 400 !important;
}

/* Küçük yazıların minimum okunabilirlik sınırına çekilmesi */
.text-\[8px\],
.text-\[8\.5px\] {
    font-size: 11px !important;
}

.text-\[9px\] {
    font-size: 12px !important;
}

.text-\[10px\] {
    font-size: 13px !important;
}

.text-\[11px\] {
    font-size: 14px !important;
}

/* Paragraf satır yüksekliği okunabilirliği kolaylaştırır */
p {
    line-height: 1.625 !important;
    letter-spacing: 0.015em;
}

/* Özel Marquee / Kayan Logolar Animasyon Ayarları */
.animate-marquee-track {
    display: flex;
    width: max-content;
    animation: marqueeSlide 75s linear infinite;
}

.animate-marquee-track:hover {
    animation-play-state: paused;
}

@keyframes marqueeSlide {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Kayan Marka Kartları Geçiş Efektleri */
.showcase-3d-card {
    transition: all 300ms ease;
}

.showcase-3d-card:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* --- BOOTSTRAP 5 BELİRGİN ÇERÇEVE (BORDER) EZMELERİ --- */
.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
    border-color: var(--border-color-default) !important;
}

/* Belirli Sınır Renk Köprüleri (Bootstrap Üzerine Yazmak İçin) */
.border-white\/10 {
    border-color: var(--border-color-10) !important;
}

.border-white\/15,
.border-white\/\[0\.15\] {
    border-color: var(--border-color-15) !important;
}

.border-white\/20 {
    border-color: var(--border-color-20) !important;
}

.border-white\/5 {
    border-color: var(--border-color-5) !important;
}

.border-white\/\[0\.08\] {
    border-color: var(--border-color-08) !important;
}

.border-white\/\[0\.06\] {
    border-color: var(--border-color-06) !important;
}

.border-white\/\[0\.12\] {
    border-color: var(--border-color-12) !important;
}

.border-brand-red {
    border-color: var(--brand-red) !important;
}

.border-brand-red\/70 {
    border-color: rgba(201, 37, 43, 0.7) !important;
}

.border-brand-red\/30 {
    border-color: rgba(201, 37, 43, 0.3) !important;
}

/* Kaliper Resmi Sürekli Nefes Alma (Floating) Animasyonu */
.animate-caliper-float {
    animation: caliperFloat 6s ease-in-out infinite;
}

@keyframes caliperFloat {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-12px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* --- ARAMA INPUTLARI AÇIK MOD UYUMLULUĞU --- */

/* Input şeffaflığının korunması (varsayılan gri arka plan ve border ezilir) */
html:not(.dark) input.bg-transparent,
html:not(.dark) #home-search-input,
html:not(.dark) #inline-search-input,
html:not(.dark) #hero-spotlight-input {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #1f2937 !important;
}

/* Arama kutularının genel dış kaplarının açık mod renkleri (kart rengi yerine temiz beyaz) */
html:not(.dark) #search-container,
html:not(.dark) #home-search-form>div,
html:not(.dark) #hero-spotlight-box {
    background-color: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
}

/* Canlı arama sonuçları paneli açık mod tasarımı */
html:not(.dark) #inline-search-results,
html:not(.dark) #home-search-results {
    background-color: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
}

/* Sonuçların içindeki linklerin metin rengi ve hover durumundaki kontrast */
html:not(.dark) #inline-search-results a,
html:not(.dark) #home-search-results a {
    border-color: transparent !important;
}

html:not(.dark) #inline-search-results a:hover,
html:not(.dark) #home-search-results a:hover {
    background-color: rgba(0, 0, 0, 0.03) !important;
}

/* Sonuçlardaki metinlerin hover'da görünmez olmasını engelleme (tüm yazıları kırmızı veya koyu yap) */
html:not(.dark) #inline-search-results a .text-white,
html:not(.dark) #home-search-results a .text-white {
    color: #1f2937 !important;
}

html:not(.dark) #inline-search-results a:hover *,
html:not(.dark) #home-search-results a:hover * {
    color: #c9252b !important;
    /* Hover edildiğinde tüm metinler kırmızıya döner */
}

/* Temizleme (X) butonlarının açık modda arka planları */
html:not(.dark) #home-search-clear,
html:not(.dark) #hero-spotlight-clear {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: #4b5563 !important;
}

html:not(.dark) #home-search-clear:hover,
html:not(.dark) #hero-spotlight-clear:hover {
    background-color: #c9252b !important;
    color: #ffffff !important;
}

/* Products & Anasayfadaki ana spotlight arama kutusu çerçeve vurgulaması */
#hero-spotlight-box,
#home-search-box {
    border-width: 3px !important;
    border-color: rgba(201, 37, 43, 0.5) !important; /* Başlangıçta yumuşak kırmızı */
    box-shadow: 0 0 15px rgba(201, 37, 43, 0.15) !important; /* Yumuşak parlama */
    transition: all 0.3s ease !important;
}
#hero-spotlight-box:focus-within,
#home-search-box:focus-within {
    border-color: #c9252b !important; /* Focus olunca tam parlak kırmızı */
    box-shadow: 0 0 35px rgba(201, 37, 43, 0.45) !important; /* Güçlü parlama */
}

html:not(.dark) #hero-spotlight-box,
html:not(.dark) #home-search-box {
    border-color: rgba(201, 37, 43, 0.4) !important; /* Açık mod yumuşak kırmızı */
    box-shadow: 0 0 12px rgba(201, 37, 43, 0.1) !important;
}
html:not(.dark) #hero-spotlight-box:focus-within,
html:not(.dark) #home-search-box:focus-within {
    border-color: #c9252b !important;
    box-shadow: 0 0 25px rgba(201, 37, 43, 0.3) !important;
}


/* --- ÜRÜN DETAY SAYFASI TABLOLARININ AÇIK MOD STİLLERİ --- */

/* Kart ve Başlık Alanı */
html:not(.dark) .detail-table-card {
    background-color: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06) !important;
}

html:not(.dark) .detail-table-card>div:first-child {
    background-color: #f9fafb !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

html:not(.dark) .detail-table-card h3 {
    color: #1f2937 !important;
}

/* Tablo Başlık Satırı */
html:not(.dark) .detail-table-card thead tr {
    background-color: #f3f4f6 !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

html:not(.dark) .detail-table-card thead th {
    color: #4b5563 !important;
    font-weight: 700 !important;
}

/* Tablo Satırları */
html:not(.dark) .detail-table-card tbody tr {
    border-color: rgba(0, 0, 0, 0.05) !important;
}

html:not(.dark) .detail-table-card tbody tr:hover {
    background-color: rgba(201, 37, 43, 0.02) !important;
}

html:not(.dark) .detail-table-card tbody td {
    color: #374151 !important;
}

html:not(.dark) .detail-table-card tbody td.font-bold {
    color: #1f2937 !important;
}

/* Adet Rozeti */
.qty-badge {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

html:not(.dark) .qty-badge {
    background-color: rgba(201, 37, 43, 0.06) !important;
    border-color: rgba(201, 37, 43, 0.15) !important;
    color: #c9252b !important;
}

/* Yuvarlak Bayrak Stili (fi-circle) */
.fi-circle {
    width: 16px !important;
    height: 16px !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 50% !important;
    display: inline-block !important;
    vertical-align: middle !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}
html:not(.dark) .fi-circle {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
}

/* Ana Başlık ve Kısım Başlığı Eşitleme Sınıfı */
.section-title {
    font-size: 30px !important;
}
@media (min-width: 480px) {
    .section-title {
        font-size: 33px !important;
    }
}
@media (min-width: 640px) {
    .section-title {
        font-size: 42px !important;
    }
}
@media (min-width: 1024px) {
    .section-title {
        font-size: 52px !important;
    }
}

/* --- ÇOKLU DİL BUTON METİN ÖLÇEKLENDİRME (Multi-language Auto-scale) --- */
.btn-premium,
.btn-premium *,
button[type="submit"],
button[type="submit"] * {
    white-space: nowrap !important;
}

/* Almanca (DE) Buton Optimizasyonları */
html[lang="de"] .btn-premium,
html[lang="de"] button[type="submit"] {
    font-size: 9.5px !important;
    letter-spacing: 0.08em !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
}

/* Rusça (RU) Buton Optimizasyonları */
html[lang="ru"] .btn-premium,
html[lang="ru"] button[type="submit"] {
    font-size: 8px !important;
    letter-spacing: 0.04em !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}