@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

/* CSS Theme Variables (Dark Mode Default) */
:root {
    --bg-color: #0b0f19;
    --text-color: #f1f5f9;
    --text-white: #ffffff;
    --text-muted: #94a3b8;
    --border-color: rgba(255, 255, 255, 0.08);
    --card-border-color: rgba(255, 255, 255, 0.05);
    --panel-bg: rgba(30, 41, 59, 0.7);
    --card-bg: rgba(15, 23, 42, 0.4);
    
    --slate-900: #0f172a;
    --slate-950: #020617;
    --dark-950: #0b0f19;
    --shadow-premium: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

/* CSS Theme Variables (Light Mode) */
.light-mode {
    --bg-color: #f1f5f9;
    --text-color: #1e293b;
    --text-white: #0f172a;
    --text-muted: #475569;
    --border-color: #e2e8f0;
    --card-border-color: #e2e8f0;
    --panel-bg: #ffffff;
    --card-bg: #ffffff;
    
    --slate-900: #f8fafc;
    --slate-950: #ffffff;
    --dark-950: #f1f5f9;
    --shadow-premium: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
}

/* Temel Sıfırlamalar ve Font */
body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Glassmorphism Efektleri */
.glass-panel {
    background: var(--panel-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.glass-card {
    background: var(--card-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--card-border-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-premium);
}

.glass-card:hover {
    transform: translateY(-2px);
    border-color: rgba(245, 158, 11, 0.3);
    box-shadow: 0 10px 20px -10px rgba(245, 158, 11, 0.15), var(--shadow-premium);
}

/* Kategori Snap Scroll Ayarı */
.snap-inline {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -ms-overflow-style: none;  /* IE ve Edge */
    scrollbar-width: none;  /* Firefox */
}

.snap-inline::-webkit-scrollbar {
    display: none; /* Chrome, Safari ve Opera */
}

.snap-item {
    scroll-snap-align: start;
}

/* Mikro Etkileşimler & Animasyonlar */
@keyframes pulse-gold {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 15px 5px rgba(245, 158, 11, 0.2);
    }
}

.animate-pulse-gold {
    animation: pulse-gold 2s infinite;
}

@keyframes slide-up {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-slide-up {
    animation: slide-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Özel Form Elemanları */
.custom-checkbox:checked {
    background-color: #f59e0b;
    border-color: #f59e0b;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #0f172a;
}

::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #f59e0b;
}

/* Gradient Yazı Efekti */
.text-gradient-gold {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-rose {
    background: linear-gradient(135deg, #fda4af 0%, #f43f5e 50%, #be123c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Safe area padding for bottom bar on modern devices */
.pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Live Order Tracker Step Styling */
.progress-bar-line {
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.step-circle {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.step-circle.active {
    background-color: #f59e0b !important;
    color: #0b0f19 !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
}

.step-circle.completed {
    background-color: #10b981 !important;
    color: #0b0f19 !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

/* ==========================================
   Aydınlık Mod (Light Mode) Özel Sınıf Ezmeleri
   ========================================== */
.light-mode body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Sayfa Arka Planları ve Temel Renkler */
.light-mode .bg-dark-950 {
    background-color: var(--dark-950) !important;
}
.light-mode .bg-dark-950\/95 {
    background-color: rgba(248, 250, 252, 0.95) !important;
}
.light-mode .bg-dark-950\/80 {
    background-color: rgba(248, 250, 252, 0.8) !important;
}

/* Metin Renkleri */
.light-mode .text-slate-100 {
    color: var(--text-color) !important;
}
.light-mode .text-white {
    color: var(--text-white) !important;
}
.light-mode .text-slate-400 {
    color: var(--text-muted) !important;
}
.light-mode .text-slate-350 {
    color: #475569 !important; /* slate-600 */
}
.light-mode .text-slate-500 {
    color: #64748b !important; /* slate-500 */
}
.light-mode .text-amber-400 {
    color: #b45309 !important; /* amber-700 - Aydınlık modda yüksek kontrast için */
}
.light-mode .text-amber-500 {
    color: #d97706 !important; /* amber-600 */
}

/* Arka Plan Renkleri & Kart İçi Alanlar */
.light-mode .bg-slate-900 {
    background-color: var(--slate-900) !important;
}
.light-mode .bg-slate-950 {
    background-color: var(--slate-950) !important;
}
.light-mode .bg-slate-800 {
    background-color: var(--slate-900) !important;
    color: var(--text-color) !important;
}
.light-mode .bg-slate-950\/80 {
    background-color: rgba(255, 255, 255, 0.8) !important;
}
.light-mode .bg-slate-950\/65 {
    background-color: rgba(0, 0, 0, 0.08) !important;
}
.light-mode .bg-slate-950\/60 {
    background-color: rgba(0, 0, 0, 0.03) !important;
}
.light-mode .bg-slate-900\/40 {
    background-color: rgba(255, 255, 255, 0.4) !important;
}
.light-mode .bg-slate-900\/30 {
    background-color: rgba(0, 0, 0, 0.03) !important;
}
.light-mode .bg-slate-900\/10 {
    background-color: rgba(0, 0, 0, 0.02) !important;
}
.light-mode .bg-slate-900\/80 {
    background-color: rgba(255, 255, 255, 0.8) !important;
}
.light-mode .bg-slate-900\/60 {
    background-color: rgba(255, 255, 255, 0.6) !important;
}
.light-mode .text-slate-655,
.light-mode .text-slate-650 {
    color: #94a3b8 !important;
}

/* Gradiyent Ezmeleri */
.light-mode .from-slate-900 {
    --tw-gradient-from: #f1f5f9 !important;
}
.light-mode .to-slate-950 {
    --tw-gradient-to: #e2e8f0 !important;
}
.light-mode .from-slate-900\/40 {
    --tw-gradient-from: rgba(255, 255, 255, 0.6) !important;
}
.light-mode .to-slate-950\/40 {
    --tw-gradient-to: rgba(255, 255, 255, 0.8) !important;
}

/* Sınırlar / Kenarlıklar (Borders) */
.light-mode .border-slate-800,
.light-mode .border-slate-800\/80,
.light-mode .border-slate-800\/85,
.light-mode .border-slate-800\/65,
.light-mode .border-slate-800\/60,
.light-mode .border-slate-800\/50,
.light-mode .border-slate-800\/40,
.light-mode .border-slate-800\/30,
.light-mode .border-slate-800\/20,
.light-mode .border-slate-850,
.light-mode .border-slate-850\/60,
.light-mode .border-slate-700,
.light-mode .border-slate-700\/60,
.light-mode .border-slate-900,
.light-mode .border-slate-900\/80,
.light-mode .border-slate-900\/60,
.light-mode .border-slate-900\/40,
.light-mode .border-slate-900\/20,
.light-mode .border-slate-950,
.light-mode .divide-slate-800,
.light-mode .divide-slate-850 {
    border-color: var(--border-color) !important;
}
.light-mode .border-slate-700 {
    border-color: var(--border-color) !important;
}
.light-mode .border-slate-900\/60,
.light-mode .border-slate-900\/40 {
    border-color: var(--card-border-color) !important;
}

/* İlerleme Çemberleri (Step Circles) */
.light-mode .step-circle {
    background-color: var(--slate-900) !important;
    color: var(--text-muted) !important;
    border-color: var(--border-color) !important;
}
.light-mode .step-circle.active {
    background-color: #f59e0b !important;
    color: #ffffff !important;
}
.light-mode .step-circle.completed {
    background-color: #10b981 !important;
    color: #ffffff !important;
}

/* Scrollbar & Diğer Parçalar */
.light-mode ::-webkit-scrollbar-track {
    background: var(--slate-900);
}
.light-mode ::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* slate-300 */
}
.light-mode ::-webkit-scrollbar-thumb:hover {
    background: #f59e0b;
}

/* İletişim & Google Değerlendirme Kartı için Özel Gölge */
.light-mode .glass-card {
    box-shadow: var(--shadow-premium);
}

/* ==========================================
   Menü Görünüm Seçenekleri (Liste / Izgara)
   ========================================== */
.products-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    transition: all 0.3s ease;
}

.product-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 1rem;
    gap: 1rem;
}

.product-card .product-img-wrapper {
    width: 6rem; /* w-24 (96px) */
    height: 6rem; /* h-24 */
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.product-card .product-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    min-width: 0; /* text overflow bug protection */
}

/* --- Izgara Görünümü (Grid Layout - 2'li) --- */
.layout-grid .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.layout-grid .product-card {
    flex-direction: column;
    align-items: stretch;
    padding: 0.75rem;
    gap: 0.75rem;
}

.layout-grid .product-card .product-img-wrapper {
    width: 100%;
    height: 7.5rem; /* Banner görünümü */
}

.layout-grid .product-card .product-info {
    width: 100%;
    margin-top: 0.25rem;
}

/* Izgara görünümünde kalabalık etmemesi için açıklama ve detayları gizle */
.layout-grid .product-card .product-desc,
.layout-grid .product-card .product-specs {
    display: none !important;
}

.layout-grid .product-card h3 {
    font-size: 0.875rem !important; /* text-sm */
    line-height: 1.25rem !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 2.5rem !important; /* Başlık hizalamasını korumak için sabit yükseklik */
}

/* --- 3'lü Izgara Görünümü (Grid Layout - 3'lü) --- */
.layout-grid-3 .products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.layout-grid-3 .product-card {
    flex-direction: column;
    align-items: stretch;
    padding: 0.5rem;
    gap: 0.5rem;
}

.layout-grid-3 .product-card .product-img-wrapper {
    width: 100%;
    height: 5rem; /* 3'lü görünümde görsel daha ufak */
}

.layout-grid-3 .product-card .product-info {
    width: 100%;
    margin-top: 0.2rem;
}

/* 3'lü Izgara görünümünde kalabalık etmemesi için açıklama ve detayları gizle */
.layout-grid-3 .product-card .product-desc,
.layout-grid-3 .product-card .product-specs {
    display: none !important;
}

.layout-grid-3 .product-card h3 {
    font-size: 0.75rem !important; /* text-xs */
    line-height: 1.1rem !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 2.2rem !important; /* 3'lü görünümde başlık hizalaması için sabit yükseklik */
}

/* 3'lü Izgara görünümünde fiyat ve ekleme butonu boyutlarını küçültelim */
.layout-grid-3 .product-card .text-amber-400 {
    font-size: 0.8125rem !important; /* text-[13px] */
}

.layout-grid-3 .product-card button {
    width: 1.75rem !important; /* w-7 */
    height: 1.75rem !important; /* h-7 */
    border-radius: 0.5rem !important; /* rounded-lg */
}

.layout-grid-3 .product-card button i {
    font-size: 0.75rem !important; /* text-xs */
}

/* Kampanya Slider & Video Arayüz Stilleri */
.campaign-slider-wrapper {
    margin-bottom: 1.5rem;
    box-shadow: 0 15px 35px -15px rgba(0, 0, 0, 0.4);
    border-radius: 1.5rem;
    position: relative;
    width: 100%;
}

.campaign-slides {
    display: flex;
    width: 100%;
    will-change: transform;
}

.campaign-slide {
    flex: 0 0 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.campaign-slide iframe {
    pointer-events: none; /* Slider içi youtube iframe focus kaymalarını önlemek için */
}

.campaign-dot {
    opacity: 0.6;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.campaign-dot.bg-amber-400 {
    opacity: 1;
}

/* --- YÖNETİCİ PANELİ (ADMIN) AYDINLIK MOD STİLLERİ --- */
.light-mode body.min-h-screen {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}

/* Sidebar: Keep it dark slate even in light mode for structural contrast and premium look */
.light-mode aside.w-full {
    background-color: #0f172a !important;
    border-color: #1e293b !important;
}

.light-mode aside nav a:not(.bg-amber-500) {
    color: #94a3b8 !important;
}

.light-mode aside nav a:not(.bg-amber-500):hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
}

.light-mode aside h2,
.light-mode aside p.text-white {
    color: #ffffff !important;
}

.light-mode aside p.text-slate-400,
.light-mode aside p.text-slate-500 {
    color: #64748b !important;
}

.light-mode aside button,
.light-mode aside a.w-8 {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #94a3b8 !important;
}

.light-mode aside button:hover,
.light-mode aside a.w-8:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* Main Area Elements */
.light-mode main h1,
.light-mode main h2,
.light-mode main h3,
.light-mode main h4,
.light-mode main th {
    color: #0f172a !important;
}

.light-mode main p,
.light-mode main td {
    color: #334155 !important;
}

.light-mode .glass-panel {
    background-color: #ffffff !important; /* Solid white to pop from the slate-100 background */
    border-color: #e2e8f0 !important;
    color: #334155 !important;
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.03), 0 2px 4px -1px rgba(15, 23, 42, 0.02) !important;
}

.light-mode .bg-dark-900,
.light-mode .bg-dark-950 {
    background-color: #f1f5f9 !important; /* Soft slate-100 page background */
    color: #1e293b !important;
}

.light-mode .bg-slate-900,
.light-mode .bg-slate-950 {
    background-color: #ffffff !important; /* Solid white for cards & panels to stand out */
    color: #1e293b !important;
}

/* Divider line overrides for solid elements functioning as lines */
.light-mode .bg-slate-800\/60,
.light-mode .bg-slate-850\/60,
.light-mode .bg-slate-900\/60 {
    background-color: #cbd5e1 !important; /* slate-300 light divider */
}

/* Modals should be solid white for absolute clarity in light mode */
.light-mode #category-modal .glass-panel,
.light-mode #camp-modal .glass-panel,
.light-mode #product-modal .glass-panel,
.light-mode #ai-modal .glass-panel {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
}

.light-mode input,
.light-mode select,
.light-mode textarea {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

.light-mode input::placeholder,
.light-mode textarea::placeholder {
    color: #94a3b8 !important;
}

.light-mode table {
    color: #334155 !important;
}

.light-mode tr:hover {
    background-color: #f8fafc !important; /* Soft gray hover */
}

.light-mode div.bg-slate-900\/40,
.light-mode div.bg-slate-900\/60,
.light-mode div.bg-slate-900\/10 {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

.light-mode .text-slate-100 {
    color: #0f172a !important;
}
.light-mode .text-slate-300 {
    color: #334155 !important;
}
.light-mode .text-slate-400 {
    color: #64748b !important;
}
.light-mode .text-slate-500 {
    color: #64748b !important;
}
.light-mode .text-slate-600 {
    color: #64748b !important;
}
.light-mode .text-slate-700 {
    color: #64748b !important;
}

.light-mode .bg-slate-800,
.light-mode .bg-slate-850 {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
}

.light-mode .hover\:bg-slate-800\/50:hover {
    background-color: #e2e8f0 !important;
}

/* Modal Overlay: keep it readable */
.light-mode .fixed.bg-slate-950\/80 {
    background-color: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(4px);
}

/* Kenarlık ve Çizgilerin Aydınlık Modda Netleştirilmesi */
.light-mode .border-slate-800,
.light-mode .border-slate-850,
.light-mode .border-slate-900,
.light-mode .divide-slate-800,
.light-mode .divide-slate-850 {
    border-color: #e2e8f0 !important;
}

.light-mode .divide-slate-850 > :not([hidden]) ~ :not([hidden]),
.light-mode .divide-slate-800 > :not([hidden]) ~ :not([hidden]),
.light-mode .divide-y > :not([hidden]) ~ :not([hidden]) {
    border-color: #e2e8f0 !important;
}

/* İnput Alanlarının Aydınlık Modda Premium Odaklanma Efekti */
.light-mode input:focus,
.light-mode select:focus,
.light-mode textarea:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15) !important;
}

/* Rozetler (Badges) için Aydınlık Mod Renk Paleti (Pastel / Yüksek Kontrast) */
.light-mode .bg-emerald-500\/10 {
    background-color: #f0fdf4 !important;
}
.light-mode .text-emerald-400 {
    color: #15803d !important; /* emerald-700 */
}
.light-mode .border-emerald-500\/20 {
    border-color: #bbf7d0 !important; /* emerald-200 */
}

.light-mode .bg-amber-500\/10 {
    background-color: #fffbeb !important;
}
.light-mode .text-amber-400 {
    color: #c2410c !important; /* orange-700 */
}
.light-mode .border-amber-500\/20 {
    border-color: #fde68a !important; /* amber-200 */
}

.light-mode .bg-blue-500\/10 {
    background-color: #eff6ff !important;
}
.light-mode .text-blue-400 {
    color: #1d4ed8 !important; /* blue-700 */
}
.light-mode .border-blue-500\/20 {
    border-color: #bfdbfe !important; /* blue-200 */
}

.light-mode .bg-rose-500\/10 {
    background-color: #fff1f2 !important;
}
.light-mode .text-rose-400,
.light-mode .text-rose-450 {
    color: #be123c !important; /* rose-700 */
}
.light-mode .border-rose-500\/20,
.light-mode .border-rose-900 {
    border-color: #fecdd3 !important; /* rose-200 */
}

.light-mode .bg-purple-500\/10 {
    background-color: #faf5ff !important;
}
.light-mode .text-purple-400 {
    color: #6d28d9 !important; /* purple-700 */
}
.light-mode .border-purple-500\/20 {
    border-color: #e9d5ff !important; /* purple-200 */
}

/* İkincil Butonlar için Aydınlık Mod Hover/Active Durumu */
.light-mode button.bg-slate-800:hover,
.light-mode button.bg-slate-750:hover,
.light-mode a.bg-slate-800:hover {
    background-color: #cbd5e1 !important;
    color: #0f172a !important;
}

/* Tablo Başlıklarının ve Kart Başlıklarının Daha Net Görünmesi */
.light-mode th {
    background-color: #f8fafc !important;
    color: #475569 !important;
}

.light-mode .glass-panel.border-l-4 {
    border-left-width: 4px !important;
}

/* =======================================================
   Admin Üst Header ve Profil Kartı (Opaque ve Konum Sabit)
   ======================================================= */
.admin-profile-card {
    background-color: #0f172a !important; /* Dark mode: solid dark slate */
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.light-mode .admin-profile-card {
    background-color: #ffffff !important; /* Light mode: solid white to prevent bleed-through */
    border-color: #e2e8f0 !important;
    box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04) !important;
}

.light-mode .admin-profile-card p.text-white {
    color: #0f172a !important;
}

.light-mode .admin-profile-card .bg-slate-800\/50 {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
}

.light-mode .admin-profile-card .bg-slate-800\/50:hover {
    background-color: #cbd5e1 !important;
    color: #0f172a !important;
}

/* =======================================================
   Yatay Menü (Horizontal Navbar) & Yardımcı Sınıflar
   ======================================================= */
.scrollbar-none {
    -ms-overflow-style: none !important;  /* IE/Edge */
    scrollbar-width: none !important;  /* Firefox */
}

.scrollbar-none::-webkit-scrollbar {
    display: none !important;  /* Chrome/Safari/Opera */
}

/* Yatay menü elemanları için aydınlık mod renk eşitlemeleri */
.light-mode .nav-link-inactive {
    color: #475569 !important;
}

.light-mode .nav-link-inactive:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}