/* Açık / Koyu renk modu — tüm temalar (--theme-color admin ayarından gelir) */

body.ui-color-light {
    --ui-bg: #faf8f5;
    --ui-bg-soft: #ffffff;
    --ui-surface: #ffffff;
    --ui-surface-muted: #f5f3f0;
    --ui-text: #1c1917;
    --ui-text-muted: #78716c;
    --ui-border: rgba(28, 25, 23, 0.08);
    --ui-border-accent: color-mix(in srgb, var(--theme-color) 42%, rgba(184, 134, 11, 0.28));
    --ui-accent: color-mix(in srgb, var(--theme-color) 78%, #b8860b);
    --ui-shadow: 0 12px 36px rgba(28, 25, 23, 0.08);
    --ui-header-bg: rgba(255, 255, 255, 0.94);
    --ui-nav-bg: rgba(255, 255, 255, 0.96);
    --lux-card-bg: #ffffff;
    --lux-card-bg-hover: #fffdf9;
    --lux-card-border: rgba(28, 25, 23, 0.09);
    --lux-card-border-accent: color-mix(in srgb, var(--theme-color) 45%, rgba(184, 134, 11, 0.32));
    --lux-card-text: #1c1917;
    --lux-card-text-muted: #78716c;
    --lux-card-accent: color-mix(in srgb, var(--theme-color) 78%, #b8860b);
    --lux-card-shadow: 0 14px 36px rgba(28, 25, 23, 0.09);
    --lux-card-media-bg: #ece8e3;
    --lux-fav-bg: rgba(255, 255, 255, 0.92);
    --lux-fav-color: #6b7280;
    --lux-zoom-bg: rgba(255, 255, 255, 0.92);
    --lux-zoom-color: #374151;
    --lux-zoom-border: rgba(0, 0, 0, 0.08);
    --res-elite-bg: radial-gradient(ellipse 85% 60% at 50% -12%, color-mix(in srgb, var(--theme-color) 14%, transparent), transparent 62%),
        linear-gradient(165deg, #faf8f5 0%, #f3ede4 48%, #ebe3d6 100%);
    --res-elite-grid: rgba(28, 25, 23, 0.045);
    --res-elite-orb-1: color-mix(in srgb, var(--theme-color) 18%, transparent);
    --res-elite-orb-2: rgba(184, 134, 11, 0.1);
    --res-elite-orb-3: rgba(28, 25, 23, 0.04);
    --res-elite-head-text: var(--ui-text);
    --res-elite-head-muted: var(--ui-text-muted);
    --res-elite-eyebrow: var(--ui-accent);
    --res-elite-eyebrow-line: color-mix(in srgb, var(--theme-color) 55%, #b8860b);
    --res-elite-divider: color-mix(in srgb, var(--theme-color) 42%, #b8860b);
    --res-elite-head-shadow: none;
    --res-elite-card-bg: #ffffff;
    --res-elite-card-border: rgba(28, 25, 23, 0.08);
    --res-elite-card-shadow: 0 22px 48px -18px rgba(28, 25, 23, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    --res-elite-label: #374151;
    --res-elite-input-bg: #ffffff;
    --res-elite-input-border: #d1d5db;
    --res-elite-input-text: #111827;
    --res-elite-input-placeholder: #9ca3af;
    --res-elite-input-icon: #9ca3af;
    --res-elite-input-focus: var(--theme-color);
    background-color: var(--ui-bg);
    color: var(--ui-text);
}

body.ui-color-dark {
    --ui-bg: #0a0908;
    --ui-bg-soft: #12100e;
    --ui-surface: rgba(255, 255, 255, 0.04);
    --ui-surface-muted: rgba(255, 255, 255, 0.06);
    --ui-text: #f5f0e8;
    --ui-text-muted: rgba(245, 240, 232, 0.62);
    --ui-border: rgba(255, 255, 255, 0.08);
    --ui-border-accent: color-mix(in srgb, var(--theme-color) 55%, rgba(255, 255, 255, 0.22));
    --ui-accent: color-mix(in srgb, var(--theme-color) 72%, #d4af37);
    --ui-shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
    --ui-header-bg: rgba(10, 9, 8, 0.92);
    --ui-nav-bg: rgba(10, 9, 8, 0.94);
    --lux-card-bg: #141210;
    --lux-card-bg-hover: #1a1816;
    --lux-card-border: rgba(255, 255, 255, 0.08);
    --lux-card-border-accent: color-mix(in srgb, var(--theme-color) 55%, rgba(255, 255, 255, 0.25));
    --lux-card-text: #f5f0e8;
    --lux-card-text-muted: rgba(245, 240, 232, 0.62);
    --lux-card-accent: color-mix(in srgb, var(--theme-color) 72%, #d4af37);
    --lux-card-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
    --lux-card-media-bg: #1a1816;
    --lux-fav-bg: rgba(10, 9, 8, 0.72);
    --lux-fav-color: rgba(255, 255, 255, 0.78);
    --lux-zoom-bg: rgba(10, 9, 8, 0.65);
    --lux-zoom-color: #fff;
    --lux-zoom-border: rgba(255, 255, 255, 0.25);
    --res-elite-bg: radial-gradient(ellipse 80% 55% at 50% -10%, color-mix(in srgb, var(--theme-color) 22%, transparent), transparent 60%),
        linear-gradient(160deg, #0a0a0c 0%, #12151c 42%, #18120e 78%, #0c0c0f 100%);
    --res-elite-grid: rgba(255, 255, 255, 0.028);
    --res-elite-orb-1: color-mix(in srgb, var(--theme-color) 28%, transparent);
    --res-elite-orb-2: rgba(201, 169, 98, 0.14);
    --res-elite-orb-3: rgba(255, 255, 255, 0.04);
    --res-elite-head-text: #f5f2eb;
    --res-elite-head-muted: rgba(245, 242, 235, 0.78);
    --res-elite-eyebrow: color-mix(in srgb, var(--theme-color) 75%, #fff);
    --res-elite-eyebrow-line: color-mix(in srgb, var(--theme-color) 70%, #fff);
    --res-elite-divider: color-mix(in srgb, var(--theme-color) 55%, #fff);
    --res-elite-head-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
    --res-elite-card-bg: rgba(22, 20, 18, 0.96);
    --res-elite-card-border: rgba(255, 255, 255, 0.1);
    --res-elite-card-shadow: 0 28px 60px -20px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --res-elite-label: rgba(245, 240, 232, 0.88);
    --res-elite-input-bg: rgba(255, 255, 255, 0.06);
    --res-elite-input-border: rgba(255, 255, 255, 0.12);
    --res-elite-input-text: #f5f0e8;
    --res-elite-input-placeholder: rgba(245, 240, 232, 0.42);
    --res-elite-input-icon: rgba(245, 240, 232, 0.45);
    --res-elite-input-focus: color-mix(in srgb, var(--theme-color) 72%, #d4af37);
    background-color: var(--ui-bg);
    color: var(--ui-text);
}

/* Genel zemin */
body.ui-color-light.bg-gray-50,
body.ui-color-dark.bg-gray-50 {
    background: linear-gradient(180deg, var(--ui-bg) 0%, var(--ui-bg-soft) 100%);
}

body.ui-color-light .preloader,
body.ui-color-dark .preloader {
    background: var(--ui-bg-soft);
}
body.ui-color-light .preloader-text,
body.ui-color-dark .preloader-text {
    color: var(--ui-text-muted);
}

/* Modern shell */
body.ui-color-light header.modern-header,
body.ui-color-dark header.modern-header {
    background: var(--ui-header-bg);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--ui-border);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}
body.ui-color-dark header.modern-header {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

body.ui-color-light #searchBar.modern-search,
body.ui-color-dark #searchBar.modern-search {
    background: transparent;
    border: 0;
}
body.ui-color-light #searchBar #searchInput,
body.ui-color-light #searchBar.modern-search #searchInput {
    color: #111827;
    background: #ffffff;
    -webkit-text-fill-color: #111827;
    caret-color: #111827;
}
body.ui-color-light #searchBar #searchInput::placeholder,
body.ui-color-light #searchBar.modern-search #searchInput::placeholder {
    color: #9ca3af;
}
/* Koyu temada arama kutusu her zaman açık zemin + siyah yazı (okunabilirlik) */
body.ui-color-dark #searchBar #searchInput,
body.ui-color-dark #searchBar.modern-search #searchInput {
    color: #111827 !important;
    background: #ffffff !important;
    border-color: #e5e7eb !important;
    -webkit-text-fill-color: #111827 !important;
    caret-color: #111827;
}
body.ui-color-dark #searchBar #searchInput::placeholder,
body.ui-color-dark #searchBar.modern-search #searchInput::placeholder {
    color: #9ca3af !important;
}
body.ui-color-dark #searchBar #searchInput:-webkit-autofill,
body.ui-color-dark #searchBar.modern-search #searchInput:-webkit-autofill {
    -webkit-text-fill-color: #111827 !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
}

body.ui-color-light .modern-bottom-nav,
body.ui-color-dark .modern-bottom-nav {
    background: var(--ui-nav-bg);
    border-top: 1px solid var(--ui-border);
    backdrop-filter: blur(16px);
}
body.ui-color-light .modern-bottom-nav a,
body.ui-color-light .modern-bottom-nav button,
body.ui-color-dark .modern-bottom-nav a,
body.ui-color-dark .modern-bottom-nav button {
    color: var(--ui-text-muted);
}
body.ui-color-light .modern-bottom-nav a.active,
body.ui-color-light .modern-bottom-nav button.active,
body.ui-color-dark .modern-bottom-nav a.active,
body.ui-color-dark .modern-bottom-nav button.active {
    color: var(--ui-accent);
}

/* Tema 2 — koyu mod */
body.ui-color-dark.ui-theme-modern .modern-product-card,
body.ui-color-dark.ui-theme-modern .modern-cat-card:not(.modern-cat-card--hero) {
    background: #161412;
    border-color: var(--ui-border);
    color: var(--ui-text);
}
body.ui-color-dark.ui-theme-modern .modern-product-card .card-title {
    color: var(--ui-text);
}
body.ui-color-dark.ui-theme-modern .modern-product-card .card-desc,
body.ui-color-dark.ui-theme-modern .modern-cat-card .cat-count {
    color: var(--ui-text-muted);
}
body.ui-color-dark.ui-theme-modern .modern-product-card .card-price {
    color: var(--ui-accent);
}
body.ui-color-dark.ui-theme-modern .modern-product-card .img-wrap {
    background: #1f1c19;
}
body.ui-color-dark.ui-theme-modern .modern-empty-box {
    background: var(--ui-surface);
    border-color: var(--ui-border);
    color: var(--ui-text-muted);
}
body.ui-color-dark.ui-theme-modern .modern-empty-box strong {
    color: var(--ui-text);
}
body.ui-color-dark.ui-theme-modern .modern-section-head h2 {
    color: var(--ui-text);
}
body.ui-color-dark.ui-theme-modern .modern-section-head a {
    color: var(--ui-accent);
}
body.ui-color-dark.ui-theme-modern .modern-quick-actions a,
body.ui-color-dark.ui-theme-modern .modern-quick-actions button {
    background: var(--ui-surface);
    border-color: var(--ui-border);
    color: var(--ui-text);
}

/* Tema 1 klasik sayfalar — koyu mod */
body.ui-color-dark .products-page-section h1,
body.ui-color-dark section.py-8 h1,
body.ui-color-dark section.py-8 h2 {
    color: var(--ui-text);
}
body.ui-color-dark .products-page-section p,
body.ui-color-dark section.py-8 p.text-gray-600 {
    color: var(--ui-text-muted) !important;
}
body.ui-color-dark section.py-8.bg-gray-50 {
    background: transparent !important;
}
body.ui-color-dark.ui-theme-classic .bg-white.rounded-2xl.shadow-sm {
    background: #161412 !important;
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow);
}
body.ui-color-dark.ui-theme-classic .bg-white.rounded-2xl .text-white {
    color: var(--ui-text) !important;
}
body.ui-color-dark.ui-theme-classic a.block.bg-white.rounded-2xl {
    background: #161412 !important;
    border: 1px solid var(--ui-border);
}

/* Tema 3 luxury — shell & bölüm başlıkları */
body.ui-theme-luxury.ui-color-light,
body.ui-theme-luxury.ui-color-dark {
    background: radial-gradient(900px 420px at 50% -8%, color-mix(in srgb, var(--ui-bg-soft) 95%, transparent), transparent 65%),
                linear-gradient(180deg, var(--ui-bg) 0%, var(--ui-bg-soft) 100%);
    color: var(--ui-text);
}

body.ui-theme-luxury .luxury-section-head {
    border-bottom-color: var(--ui-border);
}
body.ui-theme-luxury .luxury-section-head h2 {
    color: var(--ui-text);
}
body.ui-theme-luxury .luxury-section-link {
    color: var(--ui-accent);
}
body.ui-theme-luxury .luxury-section-ornament {
    background: linear-gradient(180deg, var(--ui-accent), transparent);
}

body.ui-theme-luxury .luxury-empty-box {
    background: var(--ui-surface);
    border-color: var(--ui-border);
    color: var(--ui-text-muted);
}
body.ui-theme-luxury .luxury-empty-box strong {
    color: var(--ui-text);
}
body.ui-theme-luxury .luxury-empty-box i {
    color: var(--ui-accent);
}

body.ui-theme-luxury .luxury-campaign-banner {
    border-color: var(--ui-border-accent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--theme-color) 8%, var(--ui-surface)), var(--ui-bg-soft));
}
body.ui-theme-luxury .luxury-campaign-title {
    color: var(--ui-text);
}
body.ui-theme-luxury .luxury-campaign-message {
    color: var(--ui-text-muted);
}

body.ui-theme-luxury .products-page-section h1,
body.ui-theme-luxury section.py-8 h1,
body.ui-theme-luxury section.py-8 h2 {
    color: var(--ui-text);
}
body.ui-theme-luxury .products-page-section p,
body.ui-theme-luxury section.py-8 p.text-gray-600 {
    color: var(--ui-text-muted) !important;
}
body.ui-theme-luxury hr.bg-gray-200,
body.ui-theme-luxury .products-page-section hr {
    background: var(--ui-border) !important;
}
body.ui-theme-luxury a.block.w-full.bg-black {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border-accent) !important;
    color: var(--ui-text) !important;
    box-shadow: var(--ui-shadow);
}

body.ui-theme-luxury .modern-quick-actions a,
body.ui-theme-luxury .modern-quick-actions button {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    color: var(--ui-text);
    box-shadow: var(--ui-shadow);
}

/* Tema 2 / 3 — koyu modda hero kategori kartları */
body.ui-color-dark.ui-theme-modern .modern-cat-card-strip,
body.ui-color-dark.ui-theme-luxury .modern-cat-card-strip {
    background: rgba(0, 0, 0, 0.72);
}
body.ui-color-dark.ui-theme-modern .modern-cat-card-name,
body.ui-color-dark.ui-theme-luxury .modern-cat-card-name {
    color: #ffffff;
}
body.ui-color-dark.ui-theme-modern .modern-cat-card-count-below,
body.ui-color-dark.ui-theme-luxury .modern-cat-card-count-below {
    color: var(--ui-text-muted);
}

/* Rezervasyon sayfası — açık / koyu uyumlu */
.reservation-elite {
    position: relative;
    overflow: hidden;
    padding: 2.5rem 0 3rem;
    background: var(--res-elite-bg);
}
.reservation-elite::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--res-elite-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--res-elite-grid) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(ellipse 85% 75% at 50% 35%, #000 15%, transparent 88%);
    pointer-events: none;
}
.reservation-elite-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}
.reservation-elite-orb--1 {
    width: min(28rem, 70vw);
    height: min(28rem, 70vw);
    top: -7rem;
    right: -5rem;
    background: radial-gradient(circle, var(--res-elite-orb-1) 0%, transparent 68%);
    opacity: 0.75;
}
.reservation-elite-orb--2 {
    width: min(22rem, 55vw);
    height: min(22rem, 55vw);
    bottom: -6rem;
    left: -4rem;
    background: radial-gradient(circle, var(--res-elite-orb-2) 0%, transparent 70%);
}
.reservation-elite-orb--3 {
    width: 12rem;
    height: 12rem;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, var(--res-elite-orb-3) 0%, transparent 72%);
}
.reservation-elite-inner {
    position: relative;
    z-index: 1;
}
.reservation-elite-head {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--res-elite-head-text);
}
.reservation-elite-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--res-elite-eyebrow);
    margin-bottom: 0.85rem;
}
.reservation-elite-eyebrow::before,
.reservation-elite-eyebrow::after {
    content: "";
    width: 1.75rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--res-elite-eyebrow-line));
}
.reservation-elite-eyebrow::after {
    background: linear-gradient(90deg, var(--res-elite-eyebrow-line), transparent);
}
.reservation-elite-head h1 {
    font-size: clamp(1.85rem, 4vw, 2.45rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 0.75rem;
    color: var(--res-elite-head-text);
    text-shadow: var(--res-elite-head-shadow);
}
.reservation-elite-head p {
    max-width: 36rem;
    margin: 0 auto 1.1rem;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--res-elite-head-muted);
}
.reservation-elite-divider {
    width: min(12rem, 55%);
    height: 1px;
    margin: 0 auto;
    background: linear-gradient(90deg, transparent, var(--res-elite-divider), transparent);
}
.reservation-elite-card {
    max-width: 56rem;
    margin: 0 auto;
    padding: 1.35rem 1.25rem;
    border-radius: 1.15rem;
    background: var(--res-elite-card-bg);
    border: 1px solid var(--res-elite-card-border);
    box-shadow: var(--res-elite-card-shadow);
    backdrop-filter: blur(14px);
}
.reservation-elite-card label {
    color: var(--res-elite-label) !important;
}
.reservation-elite-card input,
.reservation-elite-card textarea {
    color: var(--res-elite-input-text) !important;
    background: var(--res-elite-input-bg) !important;
    border-color: var(--res-elite-input-border) !important;
    -webkit-text-fill-color: var(--res-elite-input-text);
}
.reservation-elite-card input::placeholder,
.reservation-elite-card textarea::placeholder {
    color: var(--res-elite-input-placeholder) !important;
}
.reservation-elite-card input:focus,
.reservation-elite-card textarea:focus {
    border-color: transparent !important;
    box-shadow: 0 0 0 2px var(--res-elite-input-focus) !important;
}
.reservation-elite-card .fas,
.reservation-elite-card .far {
    color: var(--res-elite-input-icon) !important;
}
@media (min-width: 640px) {
    .reservation-elite {
        padding: 3rem 0 3.5rem;
    }
    .reservation-elite-card {
        padding: 1.75rem 1.85rem;
    }
}