h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
    font-family: 'Manrope', sans-serif;
}

.mobile-menu {
    padding: 2rem;
}

.dropdown-enter-active,
.dropdown-leave-active {
    transition: opacity 0.1s ease-out, transform 0.1s ease-out;
}
.dropdown-enter-from,
.dropdown-leave-to {
    opacity: 0;
    transform: scale(0.9);
}

.mobile-menu ul {
    width: 100%;
    text-align: center;
}

.mobile-menu li {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 1rem;
    padding-top: 1rem;
}

.mobile-dropdown-menu li{
    border-bottom: none;
    border-top: 1px solid #e0e0e0;
}

.mobile-dropdown-menu li:last-child {
    padding-bottom: 0;
}

.mobile-dropdown-menu{
   margin-top: 12px;
}

/* .group:hover h3,
.group:hover p {
    color: #ffffff;
} */

@keyframes scaleUp {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.2);
    }
}

.group-hover\:scale-120:hover {
    animation: scaleUp 0.3s forwards;
}

@keyframes slideDown {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.search-slide-down {
    animation: slideDown 0.3s forwards;
}

/* home page */
.main-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.main-slider .swiper-slide {
    position: relative;
    text-align: center;
}

.main-slider .swiper-slide img {
    width: 100%;
    height: auto;
    max-height: 800px;
    object-fit: cover;
}

@media(min-width:1400px){
    .main-slider .swiper-slide img {
        max-height: inherit;
    }
}

.main-slider .swiper-slide-content {
    position: absolute;
    bottom: 20%;
}

@media (max-width:640px) {
    .main-slider .swiper-slide-content{
        bottom: inherit;
        padding: 10px;
    }
}

.main-slider  .swiper-slide {
    padding: 0;
}

@media(min-width: 1400px) {
    .main-slider .swiper-slide-content {
        position: absolute;
        bottom: 20%;
        left: 10%;
        text-align: left;
    }
}

#product-slider .swiper-button-prev, #product-slider .swiper-button-next{
    color: #fff;
}

.brands-swiper-slider .swiper-button-prev, .brands-swiper-slider .swiper-button-next{
    color: #ff0042;
}

.brands-swiper-slider .swiper-button-next{
    right: 0;
}

.brands-swiper-slider .swiper-button-prev{
    left: 0;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 16px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 1024px) {
    .swiper-slide {
        padding: 25px;
    }
}

@media (max-width: 1023px) {

    .swiper-button-prev,
    .swiper-button-next {
        display: none;
    }
}

img.cursor-pointer:hover {
    opacity: 0.8;
}

/* single product tabs */
.tab {
    padding: 0.5rem 1rem;
    color: #010717; 
    border-bottom-width: 2px;
    border-color: transparent;
    font-size: 1rem;
    font-weight: 500; 
    cursor: pointer;
    transition: all 0.3s ease;
}
.tab:hover {
    color: #323232; 
    border-color: #ff0042; 
}
.tab.active {
    color: #ff0042; 
    border-color: #ff0042;
}
.tab-content {
    display: none;
}
.tab-content:not(.hidden) {
    display: block;
}


.custom-checkbox {
    appearance: none;
    background-color: #fff;
    border: 1px solid #d1d5db;
    padding: 0.5rem;
    display: inline-block;
    position: relative;
    cursor: pointer;
    outline: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.25rem;
}

.custom-checkbox:checked {
    background-color: #ff0042;
    border-color: #ff0042;
}

/* [docs/TODO-Frontend-2.md] tailstore'un styles.css'i (tmp/theme/tailstore-html
   kaynağından) purge edilmiş, sabit bir bundle — sadece orijinal HTML
   şablonunda kullanılan sınıfları içeriyor. Sonradan panel/checkout/sepet
   gibi sayfalara eklenen genel Tailwind renk sınıfları (indigo/red/green/
   gray-500-900 vb.) bu bundle'da HİÇ yok, bu yüzden o sayfalar tamamen
   stilsiz/görünmez render oluyordu (bkz. checkout/index, checkout/thank-you
   tailstore override'ları). Eksik olan birkaç semantik renk burada elle
   tanımlanıyor — tema paletiyle (primary/gray-dark/gray-line) tutarlı,
   minimal bir küme. */
.text-error { color: #dc2626; }
.text-success { color: #16a34a; }
.bg-error-light { background-color: #fee2e2; }
.bg-success-light { background-color: #dcfce7; }
.border-error { border-color: #dc2626; }
.border-success { border-color: #16a34a; }

/* [docs/TODO-Frontend-2.md] Header'daki sepet ikonunun üstünde kaç ürün
   olduğunu gösteren sayaç rozeti — önceden hiç yoktu, sepete ekleme sonrası
   kullanıcı sepetine kaç ürün girdiğini göremiyordu. */
.cart-count-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.25rem;
    border-radius: 9999px;
    background-color: #ff0042;
    color: #fff;
    font-size: 0.65rem;
    line-height: 1.1rem;
    text-align: center;
    font-weight: 600;
}


/* [docs/TODO-Frontend-2.md — sistematik purge-CSS taraması] tailstore'un
   styles.css'i SADECE tmp/theme/tailstore-html referans şablonunda
   kullanılan sınıfları içeren, purge edilmiş sabit bir bundle. Zamanla
   panel-bağlı sayfalara (giriş/kayıt/iletişim/sipariş sorgula/blog/tekil
   içerik/kategori/arama sonucu vb.) eklenen standart Tailwind sınıfları
   (gray/red/green/blue renk skalası, max-w-*, space-y-*, space-x-*, list-*,
   prose vb.) bu bundle'da HİÇ yoktu — o sayfalar (özellikle giriş/kayıt:
   max-w-md eksikliği yüzünden tam genişlikte ve kartsız görünüyorlardı,
   docs/TODO-Frontend-2.md madde "Giriş sayfası tam genişlikte görünüyor"/
   "Kayıt sayfası... tam genişlikte" ile BİREBİR aynı kök neden) tamamen
   ya da kısmen stilsiz render oluyordu. Burada Tailwind v3'ün STANDART
   (varsayılan paket) değerleriyle birebir aynı, eksik olan sınıflar
   eklendi — orijinal tasarım niyeti değiştirilmedi, sadece gerçekten
   render edilir hale getirildi. Yeni bir sayfa/bileşen bu dosyalara
   Tailwind sınıfı eklerken önce `grep -c '\.SINIF ' public/themes/
   tailstore/css/styles.css custom.css` ile var olup olmadığı kontrol
   edilmeli; yoksa ya buradaki gibi eklenmeli ya da tailstore'un kendi
   sınıflarına (primary/gray-dark/gray-txt/gray-line) çevrilmeli. */

/* -- Gri skala (arka plan/metin/kenarlık) -- */
.bg-gray-50 { background-color: #f9fafb; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-gray-200 { background-color: #e5e7eb; }
.bg-gray-900 { background-color: #111827; }
.text-gray-300 { color: #d1d5db; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-900 { color: #111827; }
.border-gray-200 { border-color: #e5e7eb; }
.border-gray-300 { border-color: #d1d5db; }
.placeholder-gray-500::placeholder { color: #6b7280; }
.hover\:bg-gray-50:hover { background-color: #f9fafb; }
.hover\:bg-gray-200:hover { background-color: #e5e7eb; }

/* -- Kırmızı (hata) skalası -- */
.bg-red-50 { background-color: #fef2f2; }
.bg-red-100 { background-color: #fee2e2; }
.text-red-500 { color: #ef4444; }
.text-red-600 { color: #dc2626; }
.text-red-700 { color: #b91c1c; }
.border-red-200 { border-color: #fecaca; }
.border-red-400 { border-color: #f87171; }
.hover\:text-red-400:hover { color: #f87171; }

/* -- Yeşil (başarı) skalası -- */
.bg-green-50 { background-color: #f0fdf4; }
.bg-green-100 { background-color: #dcfce7; }
.text-green-600 { color: #16a34a; }
.text-green-700 { color: #15803d; }
.border-green-200 { border-color: #bbf7d0; }
.border-green-400 { border-color: #4ade80; }
.border-green-600 { border-color: #16a34a; }
.hover\:bg-green-50:hover { background-color: #f0fdf4; }

/* -- Mavi (admin bar / bilgi) skalası -- */
.bg-blue-50 { background-color: #eff6ff; }
.bg-blue-100 { background-color: #dbeafe; }
.bg-blue-600 { background-color: #2563eb; }
.text-blue-400 { color: #60a5fa; }
.border-blue-200 { border-color: #bfdbfe; }
.hover\:bg-blue-700:hover { background-color: #1d4ed8; }
.hover\:text-blue-300:hover { color: #93c5fd; }
.focus\:ring-blue-500:focus { box-shadow: 0 0 0 2px #3b82f6; }

/* -- Turuncu/kehribar (blog kategori rozeti, ürün puanı) -- */
.text-orange-500 { color: #f97316; }
.hover\:text-orange-600:hover { color: #ea580c; }
.text-amber-400 { color: #fbbf24; }
.text-yellow-600 { color: #ca8a04; }

/* -- Genişlik sınırları (bkz. üstteki not — giriş/kayıt sayfası bunlar
   eksik olduğu için tam genişlikte görünüyordu) -- */
.max-w-md { max-width: 28rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-none { max-width: none; }

/* -- Boşluk / aralık -- */
.p-8 { padding: 2rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mr-6 { margin-right: 1.5rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.gap-1 { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-3 { gap: 0.75rem; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }
.space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 2rem; }
.space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.5rem; }
.space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 1rem; }

/* [BULUNAN KÖK NEDEN — "3 buton hâlâ bitişik" şikayeti] Bir önceki
   düzeltmede header ikon kümesine `space-x-5` class'ı eklenmişti ama bu
   class (tıpkı yukarıdaki dosya başlığındaki purge-CSS notunda anlatılan
   sorunla BİREBİR AYNI sebepten) tailstore'un derlenmiş styles.css
   bundle'ında HİÇ YOKTU — sadece space-x-2/space-x-3/space-x-4 vardı.
   Yani "boşluk eklendi" sanılan değişiklik aslında SIFIR etki yapmış,
   ikonlar arasında hâlâ 0px boşluk kalmıştı (canlı doğrulandı:
   getBoundingClientRect ile üç ikonun x koordinatları arasında TAM
   40px'lik fark — yani boşluk sıfır). Bu sefer eksik olan class'lar
   (space-x-1 de header-icon-btn kümesi için gerekiyor) buraya eklendi. */
.space-x-1 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.25rem; }
.space-x-5 > :not([hidden]) ~ :not([hidden]) { margin-left: 1.25rem; }

/* -- Liste / zengin metin (CMS/GrapesJS içerik alanları) -- */
.list-disc { list-style-type: disc; }
.list-reset { list-style: none; padding: 0; }
.prose, .prose-gray, .grapesjs-content.prose {
    color: #374151;
    line-height: 1.75;
}
.prose :where(h1, h2, h3, h4) { font-weight: 700; margin-top: 1.5em; margin-bottom: 0.5em; }
.prose :where(p, ul, ol) { margin-top: 1em; margin-bottom: 1em; }
.prose :where(ul) { list-style-type: disc; padding-left: 1.5em; }
.prose :where(ol) { list-style-type: decimal; padding-left: 1.5em; }
.prose :where(a) { color: #ff0042; text-decoration: underline; }

/* -- Izgara / responsive -- */
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:col-span-1 { grid-column: span 1 / span 1; }
    .lg\:col-span-3 { grid-column: span 3 / span 3; }
}

/* -- Diğer küçük yardımcılar -- */
.border-2 { border-width: 2px; }
.aspect-square { aspect-ratio: 1 / 1; }
.duration-500 { transition-duration: 500ms; }
.col-span-full { grid-column: 1 / -1; }
.last\:border-b-0:last-child { border-bottom-width: 0; }
.disabled\:opacity-50:disabled { opacity: 0.5; }
.disabled\:opacity-60:disabled { opacity: 0.6; }
.disabled\:opacity-70:disabled { opacity: 0.7; }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }
.hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); }
.group:hover .group-hover\:text-primary { color: #ff0042; }
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }

/* [docs/TODO-Frontend-2.md — sistematik tarama, 2. tur] Yukarıdaki notla
   aynı sebep; kalan sayfalarda (blog, tekil içerik, sipariş sorgula,
   iletişim, header/menü, layout skip-link) bulunan eksik sınıflar. */

/* -- İkincil marka rengi (header/menü hover'larında kullanılıyordu, hiç
   tanımlı değildi — hover'da hiçbir görsel değişim olmuyordu) -- */
.text-secondary { color: #ff0042; }
.hover\:text-secondary:hover { color: #ff0042; }

/* -- Boyut / konum -- */
.h-3 { height: 0.75rem; }
.h-5 { height: 1.25rem; }
.h-32 { height: 8rem; }
.h-36 { height: 9rem; }
.h-48 { height: 12rem; }
.w-3 { width: 0.75rem; }
.w-5 { width: 1.25rem; }
.w-14 { width: 3.5rem; }
.w-32 { width: 8rem; }
/* [BULUNAN KÖK NEDEN — bkz. daha aşağıdaki space-x-1/5 notu] .w-44 ve
   .mr-6 de aynı sebepten (purge edilmiş bundle'da hiç yoktu) eksikti. */
.w-44 { width: 11rem; }
.max-h-30 { max-height: 7.5rem; }
.top-2 { top: 0.5rem; }
.top-24 { top: 6rem; }
.left-2 { left: 0.5rem; }
.shrink-0 { flex-shrink: 0; }
.flex-shrink-0 { flex-shrink: 0; }
@media (min-width: 768px) {
    .md\:h-96 { height: 24rem; }
    .md\:p-8 { padding: 2rem; }
    .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
}
@media (min-width: 1024px) {
    .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
}
@media (min-width: 640px) {
    .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* -- Boşluk -- */
.mt-3 { margin-top: 0.75rem; }
.p-5 { padding: 1.25rem; }
.pt-3 { padding-top: 0.75rem; }
.border-gray-100 { border-color: #f3f4f6; }
.space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.25rem; }

/* -- CMS/GrapesJS zengin içerik kapsayıcısı (contact/page) -- */
.page-body { display: block; }
.grapesjs-content :where(h1,h2,h3,h4) { font-weight: 700; margin: 1em 0 0.5em; }
.grapesjs-content :where(p) { margin: 1em 0; }
.grapesjs-content img { max-width: 100%; height: auto; }

/* -- Sipariş sorgula sayfası (order-lookup.blade.php) — degrade/animasyon -- */
.rounded-2xl { border-radius: 1rem; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.animate-spin { animation: spin 1s linear infinite; }
.opacity-25 { opacity: 0.25; }
.opacity-75 { opacity: 0.75; }
.text-blue-600 { color: #2563eb; }
.text-blue-700 { color: #1d4ed8; }
.text-blue-800 { color: #1e40af; }
.text-green-900 { color: #14532d; }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to)); }
.bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-from), var(--tw-gradient-to)); }
.from-blue-600 { --tw-gradient-from: #2563eb; --tw-gradient-to: rgb(37 99 235 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-gray-50 { --tw-gradient-from: #f9fafb; --tw-gradient-to: rgb(249 250 251 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-white { --tw-gradient-to: #fff; }
.to-blue-700 { --tw-gradient-to: #1d4ed8; }
.hover\:from-blue-700:hover { --tw-gradient-from: #1d4ed8; }
.hover\:to-blue-800:hover { --tw-gradient-to: #1e40af; }

/* -- Diğer -- */
.whitespace-no-wrap { white-space: nowrap; }
.hover\:bg-primary-dark:hover { background-color: #cc0035; }

/* -- Skip-link (erişilebilirlik, layouts/app.blade.php) -- */
.focus\:absolute:focus { position: absolute; }
.focus\:top-4:focus { top: 1rem; }
.focus\:left-4:focus { left: 1rem; }
.focus\:z-\[100\]:focus { z-index: 100; }
.focus\:px-4:focus { padding-left: 1rem; padding-right: 1rem; }
.focus\:py-2:focus { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.focus\:bg-blue-600:focus { background-color: #2563eb; }
.focus\:text-white:focus { color: #fff; }
.focus\:rounded-lg:focus { border-radius: 0.5rem; }
.focus\:not-sr-only:focus { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; }
@keyframes spin { to { transform: rotate(360deg); } }

/* -- Tek seferlik "arbitrary value" sınıfları (Tailwind [değer] sözdizimi,
   purge edilmiş bundle'da doğal olarak yok) -- */
.focus\:z-\[100\]:focus { z-index: 100; }
.z-\[9999\] { z-index: 9999; }
.h-\[60px\] { height: 60px; }
.min-w-\[110px\] { min-width: 110px; }
@media (min-width: 768px) {
    .md\:h-\[480px\] { height: 480px; }
}

/* [docs/TODO-Frontend-2.md — sistematik tarama, 3. tur] Hesabım (account/*),
   destek talepleri (tickets/*), ürün listeleme/kategori/anasayfa vitrini
   gibi tailstore'un HİÇBİR override'ı olmayan (ne tema ne modül seviyesinde)
   Modules/Frontend view'larında bulunan eksik sınıflar. Bu sayfalar
   tailstore aktifken DOĞRUDAN Modules/Frontend/resources/views/*'ten
   render ediliyor. */

/* -- Indigo (bu sayfalarda ana eylem butonu rengi olarak kullanılmış) -- */
.bg-indigo-100 { background-color: #e0e7ff; }
.bg-indigo-500 { background-color: #6366f1; }
.bg-indigo-600 { background-color: #4f46e5; }
.text-indigo-500 { color: #6366f1; }
.text-indigo-600 { color: #4f46e5; }
.border-indigo-400 { border-color: #818cf8; }
.hover\:bg-indigo-600:hover { background-color: #4f46e5; }
.hover\:bg-indigo-700:hover { background-color: #4338ca; }
.hover\:bg-indigo-50:hover { background-color: #eef2ff; }
.hover\:border-indigo-300:hover { border-color: #a5b4fc; }
.hover\:border-indigo-400:hover { border-color: #818cf8; }
.hover\:text-indigo-600:hover { color: #4f46e5; }
.hover\:text-indigo-800:hover { color: #3730a3; }
.hover\:text-indigo-900:hover { color: #312e81; }
.focus\:border-indigo-500:focus { border-color: #6366f1; }
.focus\:ring-indigo-500:focus { box-shadow: 0 0 0 2px #6366f1; }

/* -- Sarı/turuncu/kehribar (sipariş durumu rozetleri) -- */
.bg-yellow-100 { background-color: #fef9c3; }
.text-yellow-700 { color: #a16207; }
.text-yellow-800 { color: #854d0e; }
.bg-amber-500 { background-color: #f59e0b; }
.bg-amber-600 { background-color: #d97706; }
.hover\:bg-amber-600:hover { background-color: #d97706; }
.hover\:bg-amber-700:hover { background-color: #b45309; }
.text-amber-500 { color: #f59e0b; }
.text-amber-600 { color: #d97706; }
.bg-orange-100 { background-color: #ffedd5; }
.text-orange-800 { color: #9a3412; }
.bg-red-600 { background-color: #dc2626; }
.hover\:bg-red-700:hover { background-color: #b91c1c; }
.hover\:bg-red-50:hover { background-color: #fef2f2; }
.hover\:text-red-700:hover { color: #b91c1c; }
.hover\:text-red-600:hover { color: #dc2626; }
.hover\:text-green-600:hover { color: #16a34a; }
.text-red-800 { color: #991b1b; }
.text-green-800 { color: #166534; }
.text-gray-800 { color: #1f2937; }
.border-red-300 { border-color: #fca5a5; }
.focus\:border-red-500:focus { border-color: #ef4444; }
.focus\:ring-red-500:focus { box-shadow: 0 0 0 2px #ef4444; }
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-top-width: 1px; border-color: #e5e7eb; }
.transition-colors { transition-property: color, background-color, border-color; transition-duration: 150ms; }

/* -- Sipariş durum zaman çizelgesi (status-timeline.blade.php) -- */
.bg-blue-500 { background-color: #3b82f6; }
.bg-gray-500 { background-color: #6b7280; }
.bg-green-500 { background-color: #22c55e; }
.bg-orange-500 { background-color: #f97316; }
.bg-red-500 { background-color: #ef4444; }
.ring-8 { box-shadow: 0 0 0 8px var(--tw-ring-color, #fff); }
.ring-white { --tw-ring-color: #fff; }
.-mb-8 { margin-bottom: -2rem; }
.-ml-px { margin-left: -1px; }
.left-4 { left: 1rem; }
.top-4 { top: 1rem; }
.min-w-0 { min-width: 0px; }
.w-0\.5 { width: 0.125rem; }
.h-2\.5 { height: 0.625rem; }
.w-2\.5 { width: 0.625rem; }
.pt-1\.5 { padding-top: 0.375rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.mt-1\.5 { margin-top: 0.375rem; }
.space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.75rem; }

/* -- Genel boşluk/ızgara -- */
.mt-12 { margin-top: 3rem; }
.my-5 { margin-top: 1.25rem; margin-bottom: 1.25rem; }
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.mx-4 { margin-left: 1rem; margin-right: 1rem; }
.m-0 { margin: 0; }
.p-0 { padding: 0; }
.p-10 { padding: 2.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.right-2 { right: 0.5rem; }
.gap-5 { gap: 1.25rem; }
.list-none { list-style: none; }
.ml-auto { margin-left: auto; }
.max-w-sm { max-width: 24rem; }
.max-w-3xl { max-width: 48rem; }
.max-h-\[90vh\] { max-height: 90vh; }
.border-b-2 { border-bottom-width: 2px; }
.border-l-4 { border-left-width: 4px; }
.hover\:shadow:hover { box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1); }
.hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }
.hover\:text-gray-600:hover { color: #4b5563; }
.hover\:text-gray-900:hover { color: #111827; }
.bg-black\/30 { background-color: rgb(0 0 0 / 0.3); }
@media (min-width: 768px) {
    .md\:col-span-1 { grid-column: span 1 / span 1; }
    .md\:col-span-3 { grid-column: span 3 / span 3; }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 640px) {
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm\:w-auto { width: auto; }
}
@media (min-width: 1024px) {
    .lg\:flex-nowrap { flex-wrap: nowrap; }
    .lg\:w-56 { width: 14rem; }
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* -- widget-shop-home-showcase (anasayfa vitrini) için genel marker -- */
.widget { display: block; }
.widget-shop-home-showcase { display: block; }
.bg-yellow-500 { background-color: #eab308; }
.text-indigo-800 { color: #3730a3; }
.max-h-\[90vh\] { max-height: 90vh; }

/* -- header'daki ikincil (outline) buton için -- */
.border-white { border-color: #fff; }
.hover\:bg-white:hover { background-color: #fff; }
.h-40 { height: 10rem; }

/* [docs/TODO-Frontend-2.md] x-cloak (Alpine.js) — Alpine yüklenene kadar
   ilgili elemanı gizler (aksi halde x-show="false" olan bir öğe Alpine
   init olana kadar kısaca görünüp kaybolabilir, "flash of unstyled
   content" gibi). Bu kural tailstore'da hiç tanımlı değildi (thank-you
   override'ında ve varyant etiketinde kullanılıyor). */
[x-cloak] { display: none !important; }

/* [docs/TODO-Frontend-2.md] "Anasayfanın orta genişliği header ve footer ile
   aynı değil" — anasayfa hero slider'ı (#product-slider) referans şablonda
   (tailstore-html) KASITLI OLARAK container'sız/tam genişlikte (edge-to-edge).
   Bu proje anasayfa widget'ını bir dış `.container` içine sarıyor (bkz.
   ecommerce-home.blade.php); .full-bleed bu dış container'ı kırıp elemanı
   görünüm genişliğine (viewport) yayar — herhangi bir sabit genişlik/max-width
   kısıtlayan bir ata elemanın İÇİNDE bile çalışır. */
.full-bleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* [docs/TODO-Frontend-2.md] "Hesabım" alanı (Siparişlerim/Adreslerim/Profil/
   Favorilerim vb.) tailstore'a özgü hiç override edilmemişti, paylaşılan
   (indigo renkli, default temanın markasına ait) view'ları kullanıyordu.
   tailstore override'ları primary (kırmızı) rengine geçerken, "hafif/açık
   arka plan" (aktif menü öğesi, hover kartı vb.) için kullanılan
   bg-indigo-50/hover:bg-indigo-50 sınıflarının tailstore karşılığı hiç
   yoktu — bu yeni tonlar primary'nin açık bir tonuyla eklendi. */
.bg-primary-light { background-color: #ffe3e9; }
.hover\:bg-primary-light:hover { background-color: #ffe3e9; }
.text-primary-dark { color: #cc0035; }

/* [docs/TODO-Frontend-2.md] #232 — ürün kartları arasında yükseklik
   tutarsızlığı vardı (bazı kartların görseli sabit yükseklikte, bazıları
   görselin doğal en-boy oranına göre değişkendi; başlık 1 satır mı 2 satır
   mı olduğuna göre de kart yüksekliği kayıyordu). .line-clamp-2 ve .mt-auto
   tailstore'un purge edilmiş styles.css'inde hiç yoktu (referans statik
   HTML'de hiç kullanılmamıştı) — ürün kartlarını (h-48 sabit görsel +
   2 satırla sınırlı başlık + flex-col/mt-auto ile en alta hizalanan fiyat)
   birörnek yüksekliğe kavuşturmak için eklendi. */
.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.mt-auto { margin-top: auto; }

/* [docs/TODO-Frontend-2.md] #234 — admin panelden (Tema Ayarları > Tema
   Ayarları sekmesi) kaydedilen ana renk/yazı tipi/köşe yuvarlaklığı
   değerlerinin CANLI siteye gerçekten yansıması için: bu dosya styles.css'
   ten SONRA yüklendiği için (bkz. layouts/app.blade.php), AYNI seçicileri
   burada tekrar tanımlamak styles.css'teki sabit (hardcoded) değerleri
   ezer — styles.css'in kendisine DOKUNULMADI (bu projede kural: purge
   edilmiş referans paket asla elle değiştirilmez, sadece bu dosyaya eklenir).
   CSS custom property'lerin varsayılanları (`var(--x, DEĞER)`) tailstore'un
   ORİJİNAL sabit değerleriyle birebir aynı — panelden hiç ayarlanmamışsa
   (veya layout bir şekilde <style> bloğunu render etmemişse) görsel hiçbir
   şey değişmez. */
.text-primary { color: var(--tailstore-primary, #ff0042); }
.bg-primary { background-color: var(--tailstore-primary, #ff0042); }
.border-primary { border-color: var(--tailstore-primary, #ff0042); }
.rounded-lg { border-radius: var(--tailstore-radius, 0.5rem); }
h1, h2, h3, h4, h5, h6, p, a { font-family: var(--tailstore-font, 'Manrope', sans-serif); }

/* ==========================================================================
   [kullanıcı talebi] "Arayüzde aydınlık modda header siyah görünüyor, bu
   değişmeli." Header ORİJİNAL tema tasarımında (.bg-gray-dark, rgb(1 7 23))
   HER modda sabit koyu bir çubuktu — bu benim eklediğim bir şey değildi,
   ama 3 modlu geçiş eklenince "aydınlık" modda hâlâ simsiyah bir header
   görünmesi tutarsız/yanlış oldu. Bu blok SADECE aydınlık modda (yani
   html'de .theme-dark YOKKEN) header'ı beyaza çeviriyor; koyu/akşam modda
   header zaten aşağıdaki .theme-dark bloğuyla koyu kalmaya devam ediyor
   (scoped seçicilerin specificity'si kaynak sırasından bağımsız kazanıyor).

   `:not(.bg-primary)` — header içindeki text-white/border-white class'ları
   İKİ farklı amaçla kullanılıyordu: (1) düz nav linkleri/ikonlar (header'ın
   KENDİ koyu zeminine karşı beyaz — bunlar değişmeli), (2) zaten kendi
   bg-primary (marka rengi) dolgusu olan "Kayıt Ol"/"Hesabım" gibi butonlar
   (bunlarda beyaz metin marka rengine karşı zaten doğru, DOKUNULMAMALI).
   :not(.bg-primary) bu ikisini ayırt ediyor.

   Sepet/arama ikonları (.header-icon-invertible, bkz. header.blade.php) ise
   class değil <img src="...svg"> — SVG dosyasının içinde stroke="#ffffff"
   SABİT KODLANMIŞ (header her zaman koyu olduğu için orijinal tasarımda
   sorun değildi). CSS class'la boyanamadığından `filter: invert(1)` ile
   beyazı siyaha çeviriyoruz — koyu/akşam modda bu filtre kaldırılıyor,
   ikonlar orijinal beyaz haliyle kalıyor. */
html:not(.theme-dark) header.bg-gray-dark {
    background-color: #ffffff;
    border-bottom: 1px solid rgb(229, 229, 229);
}

html:not(.theme-dark) header .text-white:not(.bg-primary),
html:not(.theme-dark) header .border-white:not(.bg-primary) {
    color: rgb(1, 7, 23);
    border-color: rgb(1, 7, 23);
}

html:not(.theme-dark) header .hover\:bg-white:hover:not(.bg-primary) {
    background-color: rgb(1, 7, 23) !important;
    color: #ffffff !important;
}

.header-icon-invertible {
    filter: invert(1);
}

html.theme-dark .header-icon-invertible {
    filter: none;
}

/* [kullanıcı talebi] "3 butonu çözmemişsin, çok bitişik ve çirkin
   görünüyorlar. 2 tanesinde büyüme efekti var, ortadakinde yok." — sepet/
   tema/arama artık üçü de AYNI kalıbı (sabit 40x40px yuvarlak tıklama alanı
   + hover'da arka plan vurgusu) kullanıyor; scale/büyüme efekti üçünden de
   kaldırıldı (tutarlılık için). Hover rengi header'ın o anki zeminine göre
   otomatik değişiyor: aydınlık header'da (beyaz zemin) koyu bir vurgu,
   koyu/akşam header'da (koyu zemin) açık bir vurgu — ikisi de zaten var
   olan `html:not(.theme-dark) header.bg-gray-dark` / `html.theme-dark
   header.bg-gray-dark` ayrımını kullanıyor. */
.header-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    transition: background-color .15s ease;
}

html.theme-dark .header-icon-btn:hover {
    background-color: rgba(255, 255, 255, .12);
}

html:not(.theme-dark) .header-icon-btn:hover {
    background-color: rgba(1, 7, 23, .08);
}

/* ==========================================================================
   [kullanıcı talebi] "Yine çirkin oldu... gece ile akşam modlarını
   tamamen baştan tasarla." İki önceki deneme de (soğuk mavi-gri / mor-
   antrasit + amber leke) beğenilmedi. Bu sürüm ikisini de SIFIRDAN, birbirinden
   TAMAMEN BAĞIMSIZ iki ayrı palet olarak tanımlıyor — biri diğerinin
   üzerine bindirilmiş bir "ton" değil:

   • KOYU (.theme-dark, akşam modu HARİÇ): nötr, düşük doygunluklu bir
     "zinc" grisi — Tailwind'in kendi zinc-900/950 ailesine yakın, GitHub/
     Linear/Vercel gibi ürünlerin koyu temalarında kullanılan, test edilmiş
     ve "temiz" algılanan bir aile. Hiçbir renk sapması yok, sade.

   • AKŞAM (.theme-evening): koyu moddan TAMAMEN AYRI bir "mumışığı" paleti
     — sıcak kahve-kakao tonlu zemin + yumuşak bronz/bakır vurgu. Önceki
     hatadan ders: vurgu rengi (bronz) SADECE ince kenarlıklarda/aktif
     durumlarda kullanılıyor, büyük yüzeylere sürülmüyor — geniş yüzeyler
     nötr sıcak kahve kalıyor ki "leke" hissi hiç oluşmasın.

   Her iki blok da AYNI seçici listesini (bg-white, bg-gray-50, text-x,
   border-x vb. — bkz. yukarıdaki grep ile çıkarılan kullanım sayıları)
   kendi html.theme-dark / html.theme-evening kapsamında tekrar tanımlıyor;
   .theme-evening bloğu dosyada SONRA geldiği için (kaynak sırası, eşit
   specificity) akşam modunda kendi renkleri geçerli oluyor — .theme-dark
   bloğuna hiç "miras" bağımlılığı yok. ========================================================================== */

/* ---- KOYU MOD (nötr zinc grisi) -------------------------------------- */
html.theme-dark body {
    background-color: #121212;
    color: #e8e8ea;
}

html.theme-dark .bg-white { background-color: #1c1c1f !important; }
html.theme-dark .bg-gray-50 { background-color: #18181b !important; }
html.theme-dark .bg-gray-100 { background-color: #26262a !important; }
html.theme-dark .bg-gray-200 { background-color: #303035 !important; }
html.theme-dark .hover\:bg-gray-50:hover { background-color: #26262a !important; }
html.theme-dark .hover\:bg-gray-100:hover { background-color: #303035 !important; }
html.theme-dark .hover\:bg-white:hover { background-color: #1c1c1f !important; }

html.theme-dark .text-gray-900,
html.theme-dark .text-gray-dark,
html.theme-dark .text-gray-txt,
html.theme-dark .text-black { color: #e8e8ea !important; }
html.theme-dark .text-gray-700 { color: #c7c7cc !important; }
html.theme-dark .text-gray-600,
html.theme-dark .text-gray-500 { color: #94949c !important; }
html.theme-dark .text-gray-400,
html.theme-dark .text-gray-300 { color: #626268 !important; }
html.theme-dark .hover\:text-gray-600:hover,
html.theme-dark .hover\:text-gray-dark:hover { color: #e8e8ea !important; }

html.theme-dark .border-gray-line,
html.theme-dark .border-gray-200,
html.theme-dark .border-gray-300,
html.theme-dark .border-gray-100 { border-color: #303035 !important; }

html.theme-dark header.bg-gray-dark { background-color: #0d0d0f; }

html.theme-dark .shadow,
html.theme-dark .shadow-md,
html.theme-dark .shadow-lg { box-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 1px 2px rgba(0, 0, 0, .5) !important; }

html.theme-dark input,
html.theme-dark textarea,
html.theme-dark select {
    background-color: #1c1c1f;
    color: #e8e8ea;
    border-color: #303035;
}

/* ---- AKŞAM MODU (bağımsız "mumışığı" paleti) --------------------------- */
html.theme-evening body {
    background-color: #1a1512;
    color: #f0e6da;
}

html.theme-evening .bg-white { background-color: #241d18 !important; }
html.theme-evening .bg-gray-50 { background-color: #1e1814 !important; }
html.theme-evening .bg-gray-100 { background-color: #2c231d !important; }
html.theme-evening .bg-gray-200 { background-color: #362b23 !important; }
html.theme-evening .hover\:bg-gray-50:hover { background-color: #2c231d !important; }
html.theme-evening .hover\:bg-gray-100:hover { background-color: #362b23 !important; }
html.theme-evening .hover\:bg-white:hover { background-color: #241d18 !important; }

html.theme-evening .text-gray-900,
html.theme-evening .text-gray-dark,
html.theme-evening .text-gray-txt,
html.theme-evening .text-black { color: #f0e6da !important; }
html.theme-evening .text-gray-700 { color: #d3c2b0 !important; }
html.theme-evening .text-gray-600,
html.theme-evening .text-gray-500 { color: #a3907c !important; }
html.theme-evening .text-gray-400,
html.theme-evening .text-gray-300 { color: #70614f !important; }
html.theme-evening .hover\:text-gray-600:hover,
html.theme-evening .hover\:text-gray-dark:hover { color: #f0e6da !important; }

html.theme-evening .border-gray-line,
html.theme-evening .border-gray-200,
html.theme-evening .border-gray-300,
html.theme-evening .border-gray-100 { border-color: #3a2f26 !important; }

html.theme-evening input,
html.theme-evening textarea,
html.theme-evening select {
    background-color: #241d18;
    color: #f0e6da;
    border-color: #3a2f26;
}

/* Header/footer — nötr kahve zemin + SADECE ince bir bronz ayraç çizgisi
   (vurgu rengi burada da geniş bir yüzeye değil, tek bir 1px çizgiye
   sınırlı kalıyor). */
html.theme-evening header.bg-gray-dark {
    background-color: #150f0c;
    background-image: none;
    border-bottom: 1px solid #6b4a30;
}

html.theme-evening footer {
    background-color: #150f0c;
    background-image: none;
    border-top: 1px solid #6b4a30;
}

/* Logo geçişi — header/footer'daki 3 <img> (theme-logo-light/dark/evening)
   arasından TAM OLARAK biri aktif moda göre görünür kalır. */
.theme-logo-dark,
.theme-logo-evening {
    display: none;
}

html.theme-dark .theme-logo-light { display: none !important; }
html.theme-dark .theme-logo-dark { display: inline-block !important; }
html.theme-evening .theme-logo-dark { display: none !important; }
html.theme-evening .theme-logo-evening { display: inline-block !important; }

/* [kullanıcı talebi] "Hangi renk modu aktifse açılan menüde o seçili
   görünsün, seçili olarak göremiyorum." — sadece metin rengi/kalınlığı
   (önceki sürüm) yeterince belirgin değildi. Artık aktif seçenek hem arka
   plan rengiyle vurgulanıyor HEM de sağındaki onay işareti (.theme-mode-check,
   bkz. header.blade.php) görünür oluyor — iki ayrı görsel ipucu. */
.theme-mode-option--active {
    background-color: rgba(255, 0, 66, .08);
    color: var(--tailstore-primary, #ff0042) !important;
    font-weight: 600;
}

.theme-mode-option--active .theme-mode-check {
    display: inline-block;
}

html.theme-dark .theme-mode-option--active,
html.theme-evening .theme-mode-option--active {
    background-color: rgba(255, 0, 66, .16);
}

/* [kullanıcı talebi] "Butonlar birbirine girmiş... sepetin sınırları
   görünmüyor, kaymış hissi veriyor." — cart/currency/theme-mode/arama
   dropdown'larının artık hepsinin bir border'ı var (bkz. header.blade.php'
   deki border-gray-200 eklemeleri); koyu/akşam modda bu border-gray-200
   zaten yukarıdaki .theme-dark/.theme-evening border override'ları ile
   koyulaştırılıyor, ayrı bir kural gerekmiyor. */

/* [kullanıcı talebi] "Bir kısmı koyu bir kısmı aydınlık olduğunda aşırı
   çirkin oluyor." Kök nedenlerden biri: gerçek görseli/videosu olmayan
   ürünler için TÜM sitede kullanılan tek bir varsayılan placeholder
   (public/images/defaults/video-product-cover.svg — Product modelinin
   effectiveImageUrl() fallback'i) açık gri (#f3f4f6) bir SVG DOSYASI.
   Bu bir CSS background-color DEĞİL, gerçek bir <img src="...svg"> —
   yukarıdaki .bg-* override'ları hiçbirini etkilemiyor. Ürün listeleme
   sayfasında (/urunler) aynı anda 10 tane bu açık gri kutu koyu zeminin
   üzerinde göz batıyordu (canlı doğrulanmış, ekran görüntüsüyle). Dosyanın
   kendisini değiştirmek yerine (tema paketinin dışında, uygulama seviyesi
   bir asset — başka yerlerde de kullanılabilir) sadece GÖRÜNÜMÜNÜ koyu/
   akşam modda `filter: brightness()` ile karartıyoruz; içindeki play
   ikonunun kontrastı (SVG'nin kendi iç renk oranları) filter altında da
   korunuyor çünkü brightness tüm kanalları aynı oranda ölçekliyor. */
html.theme-dark img[src*="/images/defaults/"],
html.theme-evening img[src*="/images/defaults/"] {
    filter: brightness(0.35);
}

/* [BULUNAN KÖK NEDEN — bkz. dosya başındaki "3 header ikonu" notuyla
   BİREBİR AYNI sebep] "Bu 2 sütun kendi margin/padding değerleri
   sebebiyle sitenin genel dış genişliğinden daha küçük görünüyor... Sağ
   ve soldan boşluk olmasın, kendi aralarında gap olsun." + "üstteki arama/
   sıralama alanı sağa dayalı olsun" isteklerini çözmek için
   categories/show.blade.php ve products/index.blade.php'ye eklenen
   `md:gap-8` (filtre/ızgara sütunları arası boşluk) ve `md:w-auto`
   (arama+sıralama grubunun justify-between ile sağa yaslanabilmesi için
   `w-full`'u masaüstünde geçersiz kılması) class'ları GÖRÜNÜŞTE eklenmiş
   ama SIFIR etki yapmıştı — çünkü tailstore'un bu derlenmiş/purge edilmiş
   styles.css bundle'ında (referans şablonda hiç kullanılmadıkları için)
   hiç tanımlı değillerdi. getBoundingClientRect ile canlı doğrulandı:
   arama+sıralama grubu "width: 1128px" (w-full'un 100%'ü) render ediyordu,
   md:w-auto hiç uygulanmamıştı; iki sütun arasında da gerçek boşluk 0px'ti. */
@media (min-width: 768px) {
    .md\:gap-8 { gap: 2rem; }
    .md\:w-auto { width: auto; }
}

/* [kullanıcı talebi] "sepete ekle ve fiyat sor butonları 3/4 oranında
   olsun. 1/4 oranında da detay butonu olsun." — ürün kartındaki eylem
   butonu + yeni "detay" göz ikonu satırı için `w-3/4`/`w-1/4` (breakpoint'
   siz, base sınıflar) — aynı "derlenmiş bundle'da hiç yok" sebebinden
   (bkz. yukarıdaki notlar) elle eklendi; sidebar'daki `md:w-1/4`/`md:w-3/4`
   ile KARIŞTIRILMAMALI, o ayrı (breakpoint'li) class'lar zaten vardı. */
.w-3\/4 { width: 75%; }
.w-1\/4 { width: 25%; }