/* ==========================================================================
   LONGING — Çoklu Tema Sistemi (7 Tema)
   Mevcut "Mürdüm Zarafeti" varsayılan olarak korunur;
   Diğer 6 tema [data-theme="..."] seçicileriyle custom properties override eder.
   Tüm temalarda WCAG AA kontrast kurallarına ve özgün dizayn imzalarına uyulmuştur.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. GENEL TEMA GEÇİŞ EFEKTLERİ (Yumuşak Crossfade)
   -------------------------------------------------------------------------- */
body,
.site-header,
.site-header.scrolled,
.site-footer,
.hero-section,
.hero-overlay,
.section,
.feature-block-card,
.menu-card,
.menu-card-img-wrap,
.nargile-highlight-section,
.nargile-card,
.contact-card-info,
.reservation-form-card,
.value-card,
.value-icon,
.category-tab-btn,
.menu-sticky-nav-wrapper,
.btn,
.mobile-drawer,
.lang-switcher,
.lang-toggle-btn,
.logo-main,
.logo-sub,
.nav-link,
.section-title,
.category-title,
.menu-item-name,
.menu-item-price,
.form-control {
  transition: 
    background-color 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

/* YEMEK VE İÇECEK FOTOĞRAFLARI KURALI:
   Yemek ve nargile fotoğrafları HER TEMADA doğal ve iştah açıcı renkleriyle kalır!
   Asla renk filtresi uygulanmaz. */
.menu-card-img,
.nargile-img {
  filter: none !important;
}

/* --------------------------------------------------------------------------
   TEMA 1: "Mürdüm Zarafeti" (data-theme="murdum")
   (Varsayılan stil, style.css içindeki :root değerleriyle birebir uyumlu)
   -------------------------------------------------------------------------- */
[data-theme="murdum"] {
  --color-offwhite: #F7F3ED;
  --color-offwhite-alt: #EFE9DF;
  --color-offwhite-card: #FFFFFF;
  --color-plum: #4A1E33;
  --color-plum-deep: #341223;
  --color-plum-light: #612743;
  --color-plum-soft: rgba(74, 30, 51, 0.08);
  --color-gold: #C7A467;
  --color-gold-light: #dfc596;
  --color-gold-subtle: rgba(199, 164, 103, 0.22);
  --color-text-main: #4A1E33;
  --color-text-muted: rgba(74, 30, 51, 0.76);
  --color-text-heading: #4A1E33;
  --color-text-eyebrow: #C7A467;
  --color-text-price: #4A1E33;
  --color-text-inverse: #F7F3ED;
  --color-text-inverse-muted: rgba(247, 243, 237, 0.78);
  --header-bg: rgba(74, 30, 51, 0.95);
  --header-bg-scrolled: rgba(52, 18, 35, 0.98);
  --header-border: 1px solid rgba(199, 164, 103, 0.2);
  --header-logo-main: #F7F3ED;
  --header-logo-sub: #C7A467;
  --header-nav-link: #F7F3ED;
  --header-nav-link-hover: #C7A467;
  --header-toggle: #F7F3ED;
  --mobile-drawer-bg: #341223;
  --mobile-drawer-text: #F7F3ED;
  --mobile-drawer-link-hover: #C7A467;
  --hero-page-bg: #4A1E33;
  --hero-page-text: #F7F3ED;
  --hero-page-border: 1px solid rgba(199, 164, 103, 0.2);
  --section-bg-plum: #4A1E33;
  --section-bg-plum-deep: #341223;
  --hero-overlay-bg: linear-gradient(180deg, rgba(50, 19, 34, 0.7) 0%, rgba(74, 30, 51, 0.85) 60%, rgba(52, 18, 35, 0.95) 100%);
  --hero-emblem-bg: rgba(199, 164, 103, 0.12);
  --icon-bg: rgba(74, 30, 51, 0.08);
  --icon-color: #4A1E33;
  --icon-border: 1px solid transparent;
  --icon-hover-bg: #4A1E33;
  --icon-hover-color: #C7A467;
  --card-bg: #FFFFFF;
  --card-border: 1px solid rgba(74, 30, 51, 0.12);
  --card-border-hover: #C7A467;
  --card-radius: 14px;
  --card-shadow: 0 4px 12px rgba(74, 30, 51, 0.05);
  --card-shadow-hover: 0 8px 24px rgba(74, 30, 51, 0.1);
  --sticky-nav-bg: rgba(247, 243, 237, 0.96);
  --sticky-nav-border: 1px solid rgba(74, 30, 51, 0.12);
  --filter-tab-bg: transparent;
  --filter-tab-color: #4A1E33;
  --filter-tab-border: 1px solid rgba(74, 30, 51, 0.16);
  --filter-tab-active-bg: #4A1E33;
  --filter-tab-active-color: #F7F3ED;
  --form-bg: #FFFFFF;
  --form-border: 1px solid rgba(74, 30, 51, 0.2);
  --form-color: #4A1E33;
  --form-focus-border: #4A1E33;
  --form-focus-ring: rgba(74, 30, 51, 0.12);
  --badge-chef-bg: rgba(199, 164, 103, 0.18);
  --badge-chef-color: #8c6a28;
  --badge-chef-border: 1px solid #C7A467;
  --badge-popular-bg: rgba(74, 30, 51, 0.1);
  --badge-popular-color: #4A1E33;
  --divider-line-color: rgba(199, 164, 103, 0.6);
  --divider-icon-color: #C7A467;
  --footer-bg: #341223;
  --footer-text: #F7F3ED;
  --footer-text-muted: rgba(247, 243, 237, 0.75);
  --footer-border: 1px solid rgba(199, 164, 103, 0.2);
  --footer-logo-title: #F7F3ED;
  --footer-logo-sub: #C7A467;
  --footer-social-border: rgba(199, 164, 103, 0.3);
  --footer-social-color: #F7F3ED;
  --btn-primary-bg: #4A1E33;
  --btn-primary-color: #F7F3ED;
  --btn-primary-hover-bg: #341223;
  --btn-outline-plum-color: #4A1E33;
  --btn-outline-plum-border: #4A1E33;
  --btn-outline-gold-hover-color: #341223;
  --lang-btn-bg: rgba(247, 243, 237, 0.08);
  --lang-btn-border: 1px solid rgba(199, 164, 103, 0.4);
  --lang-btn-color: #F7F3ED;
  --lang-btn-active-bg: #C7A467;
  --lang-btn-active-color: #341223;
}

/* --------------------------------------------------------------------------
   TEMA 2: "Gün Batımı" (data-theme="gunbatimi")
   Renkler: Sıcak Krem (#FFF6E9) + Koyu Kahve (#3B2417) + Amber (#F2A93B) +
            Mercan (#E86A33) + Alacakaranlık Mor-Kahve (#5B2A3A)
   Dizayn İmzası: Gökyüzü gradyan hero, ufuk çizgisi ve yarım güneş motifi,
   daha yuvarlak köşeli kartlar, sıcak buton gradyanı.
   -------------------------------------------------------------------------- */
[data-theme="gunbatimi"] {
  --color-offwhite: #FFF6E9;
  --color-offwhite-alt: #FCECDA;
  --color-offwhite-card: #FFFFFF;
  --color-plum: #5B2A3A;
  --color-plum-deep: #3D1A25;
  --color-plum-light: #7E3A50;
  --color-plum-soft: rgba(232, 106, 51, 0.12);
  --color-gold: #E86A33;
  --color-gold-light: #F2A93B;
  --color-gold-subtle: rgba(242, 169, 59, 0.25);
  --color-text-main: #3B2417;
  --color-text-muted: rgba(59, 36, 23, 0.78);
  --color-text-heading: #5B2A3A;
  --color-text-eyebrow: #E86A33;
  --color-text-price: #E86A33;
  --color-text-inverse: #FFF6E9;
  --color-text-inverse-muted: rgba(255, 246, 233, 0.8);
  --header-bg: rgba(91, 42, 58, 0.96);
  --header-bg-scrolled: rgba(61, 26, 37, 0.98);
  --header-border: 1px solid rgba(232, 106, 51, 0.35);
  --header-logo-main: #FFF6E9;
  --header-logo-sub: #F2A93B;
  --header-nav-link: #FFF6E9;
  --header-nav-link-hover: #F2A93B;
  --header-toggle: #FFF6E9;
  --mobile-drawer-bg: #3D1A25;
  --mobile-drawer-text: #FFF6E9;
  --mobile-drawer-link-hover: #F2A93B;
  --hero-page-bg: #5B2A3A;
  --hero-page-text: #FFF6E9;
  --hero-page-border: 1px solid rgba(232, 106, 51, 0.35);
  --section-bg-plum: #5B2A3A;
  --section-bg-plum-deep: #3D1A25;
  --hero-overlay-bg: linear-gradient(135deg, rgba(242, 169, 59, 0.82) 0%, rgba(232, 106, 51, 0.86) 50%, rgba(91, 42, 58, 0.95) 100%);
  --hero-emblem-bg: rgba(242, 169, 59, 0.16);
  --icon-bg: rgba(232, 106, 51, 0.12);
  --icon-color: #E86A33;
  --icon-border: 1px solid rgba(232, 106, 51, 0.2);
  --icon-hover-bg: linear-gradient(135deg, #F2A93B, #E86A33);
  --icon-hover-color: #FFFFFF;
  --card-bg: #FFFFFF;
  --card-border: 1px solid rgba(91, 42, 58, 0.14);
  --card-border-hover: #E86A33;
  --card-radius: 20px;
  --card-shadow: 0 6px 18px rgba(91, 42, 58, 0.08);
  --card-shadow-hover: 0 12px 28px rgba(232, 106, 51, 0.16);
  --sticky-nav-bg: rgba(255, 246, 233, 0.96);
  --sticky-nav-border: 1px solid rgba(91, 42, 58, 0.14);
  --filter-tab-bg: transparent;
  --filter-tab-color: #5B2A3A;
  --filter-tab-border: 1px solid rgba(91, 42, 58, 0.18);
  --filter-tab-active-bg: linear-gradient(135deg, #F2A93B 0%, #E86A33 100%);
  --filter-tab-active-color: #FFFFFF;
  --form-bg: #FFFFFF;
  --form-border: 1px solid rgba(91, 42, 58, 0.2);
  --form-color: #3B2417;
  --form-focus-border: #E86A33;
  --form-focus-ring: rgba(232, 106, 51, 0.2);
  --badge-chef-bg: rgba(242, 169, 59, 0.22);
  --badge-chef-color: #A04818;
  --badge-chef-border: 1px solid #F2A93B;
  --badge-popular-bg: rgba(232, 106, 51, 0.14);
  --badge-popular-color: #E86A33;
  --divider-line-color: rgba(232, 106, 51, 0.5);
  --divider-icon-color: #E86A33;
  --footer-bg: #3D1A25;
  --footer-text: #FFF6E9;
  --footer-text-muted: rgba(255, 246, 233, 0.78);
  --footer-border: 1px solid rgba(232, 106, 51, 0.3);
  --footer-logo-title: #FFF6E9;
  --footer-logo-sub: #F2A93B;
  --footer-social-border: rgba(242, 169, 59, 0.35);
  --footer-social-color: #FFF6E9;
  --btn-primary-bg: linear-gradient(135deg, #F2A93B 0%, #E86A33 100%);
  --btn-primary-color: #FFFFFF;
  --btn-primary-hover-bg: linear-gradient(135deg, #E86A33 0%, #C85420 100%);
  --btn-outline-plum-color: #E86A33;
  --btn-outline-plum-border: #E86A33;
  --btn-outline-gold-hover-color: #FFFFFF;
  --lang-btn-bg: rgba(255, 246, 233, 0.12);
  --lang-btn-border: 1px solid rgba(242, 169, 59, 0.45);
  --lang-btn-color: #FFF6E9;
  --lang-btn-active-bg: linear-gradient(135deg, #F2A93B, #E86A33);
  --lang-btn-active-color: #FFFFFF;
}

[data-theme="gunbatimi"] .hero-bg-media {
  filter: brightness(0.7) contrast(1.15) sepia(0.2);
}

/* Gün Batımı İmzası: Ufuk Çizgisi + Yarım Güneş Ayraç */
[data-theme="gunbatimi"] .luxury-divider i {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 8px;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  background: linear-gradient(180deg, #F2A93B, #E86A33);
  font-size: 0;
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   TEMA 3: "Deniz" (data-theme="deniz")
   Renkler: Deniz Köpüğü (#F2FAFB) + Derin Lacivert (#0B3559) +
            Deniz Mavisi (#2E86AB) + Kum Beji (#D9C9A3)
   Dizayn İmzası: Dalgalı clip-path bölüm kenarları, ferah azure gölgeler,
   hero lacivert-deniz mavisi duoton overlay.
   -------------------------------------------------------------------------- */
[data-theme="deniz"] {
  --color-offwhite: #F2FAFB;
  --color-offwhite-alt: #E3F2F5;
  --color-offwhite-card: #FFFFFF;
  --color-plum: #0B3559;
  --color-plum-deep: #06223A;
  --color-plum-light: #185282;
  --color-plum-soft: rgba(46, 134, 171, 0.1);
  --color-gold: #2E86AB;
  --color-gold-light: #52A6CB;
  --color-gold-subtle: rgba(46, 134, 171, 0.22);
  --color-text-main: #0B3559;
  --color-text-muted: rgba(11, 53, 89, 0.76);
  --color-text-heading: #0B3559;
  --color-text-eyebrow: #2E86AB;
  --color-text-price: #0B3559;
  --color-text-inverse: #F2FAFB;
  --color-text-inverse-muted: rgba(242, 250, 251, 0.8);
  --header-bg: rgba(11, 53, 89, 0.96);
  --header-bg-scrolled: rgba(6, 34, 58, 0.98);
  --header-border: 1px solid rgba(46, 134, 171, 0.35);
  --header-logo-main: #F2FAFB;
  --header-logo-sub: #2E86AB;
  --header-nav-link: #F2FAFB;
  --header-nav-link-hover: #52A6CB;
  --header-toggle: #F2FAFB;
  --mobile-drawer-bg: #06223A;
  --mobile-drawer-text: #F2FAFB;
  --mobile-drawer-link-hover: #2E86AB;
  --hero-page-bg: #0B3559;
  --hero-page-text: #F2FAFB;
  --hero-page-border: 1px solid rgba(46, 134, 171, 0.35);
  --section-bg-plum: #0B3559;
  --section-bg-plum-deep: #06223A;
  --hero-overlay-bg: linear-gradient(180deg, rgba(11, 53, 89, 0.78) 0%, rgba(46, 134, 171, 0.85) 65%, rgba(6, 34, 58, 0.96) 100%);
  --hero-emblem-bg: rgba(46, 134, 171, 0.16);
  --icon-bg: rgba(46, 134, 171, 0.12);
  --icon-color: #0B3559;
  --icon-border: 1px solid rgba(46, 134, 171, 0.2);
  --icon-hover-bg: #0B3559;
  --icon-hover-color: #F2FAFB;
  --card-bg: #FFFFFF;
  --card-border: 1px solid rgba(11, 53, 89, 0.12);
  --card-border-hover: #2E86AB;
  --card-radius: 16px;
  --card-shadow: 0 6px 18px rgba(11, 53, 89, 0.06);
  --card-shadow-hover: 0 12px 28px rgba(46, 134, 171, 0.18);
  --sticky-nav-bg: rgba(242, 250, 251, 0.96);
  --sticky-nav-border: 1px solid rgba(11, 53, 89, 0.12);
  --filter-tab-bg: transparent;
  --filter-tab-color: #0B3559;
  --filter-tab-border: 1px solid rgba(11, 53, 89, 0.18);
  --filter-tab-active-bg: #0B3559;
  --filter-tab-active-color: #F2FAFB;
  --form-bg: #FFFFFF;
  --form-border: 1px solid rgba(11, 53, 89, 0.2);
  --form-color: #0B3559;
  --form-focus-border: #2E86AB;
  --form-focus-ring: rgba(46, 134, 171, 0.2);
  --badge-chef-bg: rgba(46, 134, 171, 0.16);
  --badge-chef-color: #0B3559;
  --badge-chef-border: 1px solid #2E86AB;
  --badge-popular-bg: rgba(11, 53, 89, 0.1);
  --badge-popular-color: #0B3559;
  --divider-line-color: rgba(46, 134, 171, 0.5);
  --divider-icon-color: #2E86AB;
  --footer-bg: #06223A;
  --footer-text: #F2FAFB;
  --footer-text-muted: rgba(242, 250, 251, 0.78);
  --footer-border: 1px solid rgba(46, 134, 171, 0.3);
  --footer-logo-title: #F2FAFB;
  --footer-logo-sub: #2E86AB;
  --footer-social-border: rgba(46, 134, 171, 0.35);
  --footer-social-color: #F2FAFB;
  --btn-primary-bg: #0B3559;
  --btn-primary-color: #F2FAFB;
  --btn-primary-hover-bg: #06223A;
  --btn-outline-plum-color: #0B3559;
  --btn-outline-plum-border: #0B3559;
  --btn-outline-gold-hover-color: #06223A;
  --lang-btn-bg: rgba(242, 250, 251, 0.1);
  --lang-btn-border: 1px solid rgba(46, 134, 171, 0.45);
  --lang-btn-color: #F2FAFB;
  --lang-btn-active-bg: #2E86AB;
  --lang-btn-active-color: #FFFFFF;
}

[data-theme="deniz"] .hero-bg-media {
  filter: brightness(0.68) hue-rotate(185deg) contrast(1.1);
}

[data-theme="deniz"] .luxury-divider i {
  font-size: 13px;
  color: #2E86AB;
}

/* Deniz İmzası: Dalga Kenarlı Koyu Bölümler */
[data-theme="deniz"] .section.bg-plum {
  clip-path: polygon(
    0% 0%, 
    10% 28px, 
    25% 42px, 
    40% 20px, 
    55% 40px, 
    75% 18px, 
    90% 34px, 
    100% 12px, 
    100% 100%, 
    0% 100%
  );
  padding-top: 110px;
}

[data-theme="deniz"] .site-footer {
  clip-path: polygon(
    0% 0%, 
    15% 24px, 
    35% 36px, 
    55% 16px, 
    75% 32px, 
    90% 18px, 
    100% 28px, 
    100% 100%, 
    0% 100%
  );
  padding-top: 100px;
}

/* --------------------------------------------------------------------------
   TEMA 4: "Doğa" (data-theme="doga")
   Renkler: Krem/Bej (#F5F1E6) + Koyu Orman Yeşili (#2F4B34) +
            Taze Yeşil (#6B8E4E) + Toprak Kahvesi (#8C6239)
   Dizayn İmzası: Asimetrik/organik yaprak formlu kart köşeleri,
   botanik çizgi detayları, nefes alan bol organik boşluk.
   -------------------------------------------------------------------------- */
[data-theme="doga"] {
  --color-offwhite: #F5F1E6;
  --color-offwhite-alt: #E8E2D3;
  --color-offwhite-card: #FCFAF6;
  --color-plum: #2F4B34;
  --color-plum-deep: #1E3322;
  --color-plum-light: #44684A;
  --color-plum-soft: rgba(107, 142, 78, 0.12);
  --color-gold: #6B8E4E;
  --color-gold-light: #8FB070;
  --color-gold-subtle: rgba(107, 142, 78, 0.25);
  --color-text-main: #33422E;
  --color-text-muted: rgba(51, 66, 46, 0.78);
  --color-text-heading: #2F4B34;
  --color-text-eyebrow: #6B8E4E;
  --color-text-price: #2F4B34;
  --color-text-inverse: #F5F1E6;
  --color-text-inverse-muted: rgba(245, 241, 230, 0.8);
  --header-bg: rgba(47, 75, 52, 0.96);
  --header-bg-scrolled: rgba(30, 51, 34, 0.98);
  --header-border: 1px solid rgba(107, 142, 78, 0.35);
  --header-logo-main: #F5F1E6;
  --header-logo-sub: #8FB070;
  --header-nav-link: #F5F1E6;
  --header-nav-link-hover: #8FB070;
  --header-toggle: #F5F1E6;
  --mobile-drawer-bg: #1E3322;
  --mobile-drawer-text: #F5F1E6;
  --mobile-drawer-link-hover: #8FB070;
  --hero-page-bg: #2F4B34;
  --hero-page-text: #F5F1E6;
  --hero-page-border: 1px solid rgba(107, 142, 78, 0.35);
  --section-bg-plum: #2F4B34;
  --section-bg-plum-deep: #1E3322;
  --hero-overlay-bg: linear-gradient(180deg, rgba(30, 51, 34, 0.8) 0%, rgba(47, 75, 52, 0.88) 60%, rgba(20, 36, 24, 0.96) 100%);
  --hero-emblem-bg: rgba(107, 142, 78, 0.18);
  --icon-bg: rgba(107, 142, 78, 0.14);
  --icon-color: #2F4B34;
  --icon-border: 1px solid rgba(107, 142, 78, 0.22);
  --icon-hover-bg: #2F4B34;
  --icon-hover-color: #F5F1E6;
  --card-bg: #FCFAF6;
  --card-border: 1px solid rgba(47, 75, 52, 0.14);
  --card-border-hover: #6B8E4E;
  --card-radius: 26px 12px 26px 12px;
  --card-shadow: 0 6px 18px rgba(47, 75, 52, 0.06);
  --card-shadow-hover: 0 12px 28px rgba(107, 142, 78, 0.18);
  --sticky-nav-bg: rgba(245, 241, 230, 0.96);
  --sticky-nav-border: 1px solid rgba(47, 75, 52, 0.14);
  --filter-tab-bg: transparent;
  --filter-tab-color: #2F4B34;
  --filter-tab-border: 1px solid rgba(47, 75, 52, 0.2);
  --filter-tab-active-bg: #2F4B34;
  --filter-tab-active-color: #F5F1E6;
  --form-bg: #FFFFFF;
  --form-border: 1px solid rgba(47, 75, 52, 0.22);
  --form-color: #33422E;
  --form-focus-border: #6B8E4E;
  --form-focus-ring: rgba(107, 142, 78, 0.2);
  --badge-chef-bg: rgba(107, 142, 78, 0.18);
  --badge-chef-color: #2F4B34;
  --badge-chef-border: 1px solid #6B8E4E;
  --badge-popular-bg: rgba(47, 75, 52, 0.12);
  --badge-popular-color: #2F4B34;
  --divider-line-color: rgba(107, 142, 78, 0.5);
  --divider-icon-color: #6B8E4E;
  --footer-bg: #1E3322;
  --footer-text: #F5F1E6;
  --footer-text-muted: rgba(245, 241, 230, 0.78);
  --footer-border: 1px solid rgba(107, 142, 78, 0.3);
  --footer-logo-title: #F5F1E6;
  --footer-logo-sub: #8FB070;
  --footer-social-border: rgba(107, 142, 78, 0.35);
  --footer-social-color: #F5F1E6;
  --btn-primary-bg: #2F4B34;
  --btn-primary-color: #F5F1E6;
  --btn-primary-hover-bg: #1E3322;
  --btn-outline-plum-color: #2F4B34;
  --btn-outline-plum-border: #2F4B34;
  --btn-outline-gold-hover-color: #1E3322;
  --lang-btn-bg: rgba(245, 241, 230, 0.1);
  --lang-btn-border: 1px solid rgba(107, 142, 78, 0.45);
  --lang-btn-color: #F5F1E6;
  --lang-btn-active-bg: #6B8E4E;
  --lang-btn-active-color: #FFFFFF;
}

[data-theme="doga"] .hero-bg-media {
  filter: brightness(0.65) hue-rotate(65deg) contrast(1.1);
}

[data-theme="doga"] .luxury-divider i::before {
  content: '🌿';
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   TEMA 5: "Dağ" (data-theme="dag")
   Renkler: Taş Grisi-Bej (#EFE7DC) + Koyu Kahve (#4A2E1F) +
            Orta Toprak (#8A5A3B) + Kiremit/Kaya Turuncusu (#B5602E)
   Dizayn İmzası: Zikzak dağ silueti clip-path ayraçları, sağlam/tok
   tipografi ağırlığı, topraksı sıcak dokunuş.
   -------------------------------------------------------------------------- */
[data-theme="dag"] {
  --color-offwhite: #EFE7DC;
  --color-offwhite-alt: #E3D8C9;
  --color-offwhite-card: #FAF6F0;
  --color-plum: #4A2E1F;
  --color-plum-deep: #2F1A0F;
  --color-plum-light: #6A442E;
  --color-plum-soft: rgba(181, 96, 46, 0.12);
  --color-gold: #B5602E;
  --color-gold-light: #D47942;
  --color-gold-subtle: rgba(181, 96, 46, 0.25);
  --color-text-main: #3A2418;
  --color-text-muted: rgba(74, 46, 31, 0.78);
  --color-text-heading: #4A2E1F;
  --color-text-eyebrow: #B5602E;
  --color-text-price: #4A2E1F;
  --color-text-inverse: #EFE7DC;
  --color-text-inverse-muted: rgba(239, 231, 220, 0.8);
  --header-bg: rgba(74, 46, 31, 0.96);
  --header-bg-scrolled: rgba(47, 26, 15, 0.98);
  --header-border: 1px solid rgba(181, 96, 46, 0.35);
  --header-logo-main: #EFE7DC;
  --header-logo-sub: #D47942;
  --header-nav-link: #EFE7DC;
  --header-nav-link-hover: #D47942;
  --header-toggle: #EFE7DC;
  --mobile-drawer-bg: #2F1A0F;
  --mobile-drawer-text: #EFE7DC;
  --mobile-drawer-link-hover: #D47942;
  --hero-page-bg: #4A2E1F;
  --hero-page-text: #EFE7DC;
  --hero-page-border: 1px solid rgba(181, 96, 46, 0.35);
  --section-bg-plum: #4A2E1F;
  --section-bg-plum-deep: #2F1A0F;
  --hero-overlay-bg: linear-gradient(180deg, rgba(47, 26, 15, 0.82) 0%, rgba(74, 46, 31, 0.88) 60%, rgba(35, 18, 9, 0.96) 100%);
  --hero-emblem-bg: rgba(181, 96, 46, 0.18);
  --icon-bg: rgba(181, 96, 46, 0.14);
  --icon-color: #4A2E1F;
  --icon-border: 1px solid rgba(181, 96, 46, 0.22);
  --icon-hover-bg: #4A2E1F;
  --icon-hover-color: #EFE7DC;
  --card-bg: #FAF6F0;
  --card-border: 1px solid rgba(74, 46, 31, 0.16);
  --card-border-hover: #B5602E;
  --card-radius: 10px;
  --card-shadow: 0 6px 18px rgba(74, 46, 31, 0.08);
  --card-shadow-hover: 0 12px 28px rgba(181, 96, 46, 0.18);
  --sticky-nav-bg: rgba(239, 231, 220, 0.96);
  --sticky-nav-border: 1px solid rgba(74, 46, 31, 0.16);
  --filter-tab-bg: transparent;
  --filter-tab-color: #4A2E1F;
  --filter-tab-border: 1px solid rgba(74, 46, 31, 0.2);
  --filter-tab-active-bg: #4A2E1F;
  --filter-tab-active-color: #EFE7DC;
  --form-bg: #FFFFFF;
  --form-border: 1px solid rgba(74, 46, 31, 0.22);
  --form-color: #3A2418;
  --form-focus-border: #B5602E;
  --form-focus-ring: rgba(181, 96, 46, 0.2);
  --badge-chef-bg: rgba(181, 96, 46, 0.18);
  --badge-chef-color: #7A3614;
  --badge-chef-border: 1px solid #B5602E;
  --badge-popular-bg: rgba(74, 46, 31, 0.12);
  --badge-popular-color: #4A2E1F;
  --divider-line-color: rgba(181, 96, 46, 0.5);
  --divider-icon-color: #B5602E;
  --footer-bg: #2F1A0F;
  --footer-text: #EFE7DC;
  --footer-text-muted: rgba(239, 231, 220, 0.78);
  --footer-border: 1px solid rgba(181, 96, 46, 0.3);
  --footer-logo-title: #EFE7DC;
  --footer-logo-sub: #D47942;
  --footer-social-border: rgba(181, 96, 46, 0.35);
  --footer-social-color: #EFE7DC;
  --btn-primary-bg: #4A2E1F;
  --btn-primary-color: #EFE7DC;
  --btn-primary-hover-bg: #2F1A0F;
  --btn-outline-plum-color: #4A2E1F;
  --btn-outline-plum-border: #4A2E1F;
  --btn-outline-gold-hover-color: #2F1A0F;
  --lang-btn-bg: rgba(239, 231, 220, 0.1);
  --lang-btn-border: 1px solid rgba(181, 96, 46, 0.45);
  --lang-btn-color: #EFE7DC;
  --lang-btn-active-bg: #B5602E;
  --lang-btn-active-color: #FFFFFF;
}

[data-theme="dag"] .hero-bg-media {
  filter: brightness(0.65) sepia(0.35) contrast(1.15);
}

/* Dağ İmzası: Zikzak Dağ Silueti Bölüm Kenarları (Masaüstü: 5 Zirve) */
[data-theme="dag"] .section.bg-plum {
  clip-path: polygon(
    0% 0%, 
    10% 28px, 
    20% 0%, 
    30% 32px, 
    40% 4px, 
    50% 36px, 
    60% 0%, 
    70% 30px, 
    80% 2px, 
    90% 28px, 
    100% 0%, 
    100% 100%, 
    0% 100%
  );
  padding-top: 110px;
}

[data-theme="dag"] .luxury-divider i::before {
  content: '▲';
  font-size: 10px;
  color: #B5602E;
}

/* --------------------------------------------------------------------------
   TEMA 6: "Asalet Beyaz" (data-theme="asalet-beyaz")
   Renkler: Saf Bembeyaz (#FFFFFF) + Grafit Siyah (#1A1A1A) +
            Soluk Gri Çizgi (#E5E5E5) + İnce İmza Altın (#C9A65C)
   Dizayn İmzası: Ultra minimalist editoryal haute couture hissi,
   gölgesiz düz (flat) kartlar, ince ve geniş tipografi, sessiz lüks (quiet luxury).
   -------------------------------------------------------------------------- */
[data-theme="asalet-beyaz"] {
  --color-offwhite: #FFFFFF;
  --color-offwhite-alt: #F8F8F8;
  --color-offwhite-card: #FFFFFF;
  --color-plum: #1A1A1A;
  --color-plum-deep: #111111;
  --color-plum-light: #333333;
  --color-plum-soft: rgba(0, 0, 0, 0.05);
  --color-gold: #C9A65C;
  --color-gold-light: #DFC488;
  --color-gold-subtle: rgba(201, 166, 92, 0.2);
  --color-text-main: #2A2A2A;
  --color-text-muted: rgba(26, 26, 26, 0.68);
  --color-text-heading: #1A1A1A;
  --color-text-eyebrow: #C9A65C;
  --color-text-price: #1A1A1A;
  --color-text-inverse: #FFFFFF;
  --color-text-inverse-muted: rgba(255, 255, 255, 0.78);
  --header-bg: rgba(255, 255, 255, 0.96);
  --header-bg-scrolled: #FFFFFF;
  --header-border: 1px solid rgba(0, 0, 0, 0.08);
  --header-logo-main: #1A1A1A;
  --header-logo-sub: #C9A65C;
  --header-nav-link: #1A1A1A;
  --header-nav-link-hover: #C9A65C;
  --header-toggle: #1A1A1A;
  --mobile-drawer-bg: #FFFFFF;
  --mobile-drawer-text: #1A1A1A;
  --mobile-drawer-link-hover: #C9A65C;
  --hero-page-bg: #FAFAFA;
  --hero-page-text: #1A1A1A;
  --hero-page-border: 1px solid #EAEAEA;
  --section-bg-plum: #1A1A1A;
  --section-bg-plum-deep: #111111;
  --hero-overlay-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.92) 65%, rgba(255, 255, 255, 0.98) 100%);
  --hero-emblem-bg: rgba(201, 166, 92, 0.12);
  --icon-bg: rgba(0, 0, 0, 0.04);
  --icon-color: #1A1A1A;
  --icon-border: 1px solid rgba(0, 0, 0, 0.08);
  --icon-hover-bg: #1A1A1A;
  --icon-hover-color: #FFFFFF;
  --card-bg: #FFFFFF;
  --card-border: 1px solid #E5E5E5;
  --card-border-hover: #1A1A1A;
  --card-radius: 6px;
  --card-shadow: none;
  --card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.06);
  --sticky-nav-bg: rgba(255, 255, 255, 0.96);
  --sticky-nav-border: 1px solid #EAEAEA;
  --filter-tab-bg: transparent;
  --filter-tab-color: #1A1A1A;
  --filter-tab-border: 1px solid #D5D5D5;
  --filter-tab-active-bg: #1A1A1A;
  --filter-tab-active-color: #FFFFFF;
  --form-bg: #FAFAFA;
  --form-border: 1px solid #DCDCDC;
  --form-color: #1A1A1A;
  --form-focus-border: #1A1A1A;
  --form-focus-ring: rgba(0, 0, 0, 0.08);
  --badge-chef-bg: rgba(201, 166, 92, 0.14);
  --badge-chef-color: #8C6A28;
  --badge-chef-border: 1px solid #C9A65C;
  --badge-popular-bg: rgba(0, 0, 0, 0.06);
  --badge-popular-color: #1A1A1A;
  --divider-line-color: rgba(0, 0, 0, 0.18);
  --divider-icon-color: #C9A65C;
  --footer-bg: #111111;
  --footer-text: #FFFFFF;
  --footer-text-muted: rgba(255, 255, 255, 0.72);
  --footer-border: 1px solid rgba(255, 255, 255, 0.12);
  --footer-logo-title: #FFFFFF;
  --footer-logo-sub: #C9A65C;
  --footer-social-border: rgba(255, 255, 255, 0.25);
  --footer-social-color: #FFFFFF;
  --btn-primary-bg: #1A1A1A;
  --btn-primary-color: #FFFFFF;
  --btn-primary-hover-bg: #333333;
  --btn-outline-plum-color: #1A1A1A;
  --btn-outline-plum-border: #1A1A1A;
  --btn-outline-gold-hover-color: #FFFFFF;
  --lang-btn-bg: rgba(0, 0, 0, 0.04);
  --lang-btn-border: 1px solid rgba(0, 0, 0, 0.15);
  --lang-btn-color: #1A1A1A;
  --lang-btn-active-bg: #1A1A1A;
  --lang-btn-active-color: #FFFFFF;
}

[data-theme="asalet-beyaz"] .hero-title {
  color: #1A1A1A;
  text-shadow: none;
}

[data-theme="asalet-beyaz"] .hero-tagline {
  color: rgba(26, 26, 26, 0.85);
}

[data-theme="asalet-beyaz"] .hero-bg-media {
  filter: brightness(0.9) contrast(1.05) grayscale(0.2);
}

[data-theme="asalet-beyaz"] .luxury-divider {
  width: 60px;
}

[data-theme="asalet-beyaz"] .luxury-divider span {
  background: #1A1A1A;
  opacity: 0.3;
}

/* --------------------------------------------------------------------------
   TEMA 7: "Asalet Siyah" (data-theme="asalet-siyah")
   Renkler: Sipsiyah Zemin (#0A0A0A) + Kırık Beyaz/Krem Metin (#F5F0E8) +
            Soluk Altın Vurgu (#C9A65C)
   Dizayn İmzası: Yüksek kontrastlı beş yıldızlı gece lounge atmosferi,
   spot ışığı vignette efekti, ince altın çerçeveler, altın ışıltılı butonlar.
   -------------------------------------------------------------------------- */
[data-theme="asalet-siyah"] {
  --color-offwhite: #0A0A0A;
  --color-offwhite-alt: #121212;
  --color-offwhite-card: #161616;
  --color-plum: #F5F0E8;
  --color-plum-deep: #050505;
  --color-plum-light: #202020;
  --color-plum-soft: rgba(201, 166, 92, 0.12);
  --color-gold: #C9A65C;
  --color-gold-light: #E0C88E;
  --color-gold-subtle: rgba(201, 166, 92, 0.3);
  --color-text-main: #E5E0D8;
  --color-text-muted: rgba(245, 240, 232, 0.72);
  --color-text-heading: #F5F0E8;
  --color-text-eyebrow: #C9A65C;
  --color-text-price: #C9A65C;
  --color-text-inverse: #F5F0E8;
  --color-text-inverse-muted: rgba(245, 240, 232, 0.75);
  --header-bg: rgba(10, 10, 10, 0.96);
  --header-bg-scrolled: #050505;
  --header-border: 1px solid rgba(201, 166, 92, 0.25);
  --header-logo-main: #F5F0E8;
  --header-logo-sub: #C9A65C;
  --header-nav-link: #F5F0E8;
  --header-nav-link-hover: #C9A65C;
  --header-toggle: #F5F0E8;
  --mobile-drawer-bg: #0A0A0A;
  --mobile-drawer-text: #F5F0E8;
  --mobile-drawer-link-hover: #C9A65C;
  --hero-page-bg: #0D0D0D;
  --hero-page-text: #F5F0E8;
  --hero-page-border: 1px solid rgba(201, 166, 92, 0.25);
  --section-bg-plum: #141414;
  --section-bg-plum-deep: #080808;
  --hero-overlay-bg: radial-gradient(circle at center, rgba(10, 10, 10, 0.4) 0%, rgba(10, 10, 10, 0.85) 70%, #0A0A0A 100%);
  --hero-emblem-bg: rgba(201, 166, 92, 0.16);
  --icon-bg: rgba(201, 166, 92, 0.12);
  --icon-color: #C9A65C;
  --icon-border: 1px solid rgba(201, 166, 92, 0.25);
  --icon-hover-bg: #C9A65C;
  --icon-hover-color: #0A0A0A;
  --card-bg: #161616;
  --card-border: 1px solid rgba(201, 166, 92, 0.22);
  --card-border-hover: #C9A65C;
  --card-radius: 12px;
  --card-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
  --card-shadow-hover: 0 12px 30px rgba(201, 166, 92, 0.2);
  --sticky-nav-bg: rgba(16, 16, 16, 0.96);
  --sticky-nav-border: 1px solid rgba(201, 166, 92, 0.22);
  --filter-tab-bg: transparent;
  --filter-tab-color: #F5F0E8;
  --filter-tab-border: 1px solid rgba(201, 166, 92, 0.28);
  --filter-tab-active-bg: #C9A65C;
  --filter-tab-active-color: #0A0A0A;
  --form-bg: #121212;
  --form-border: 1px solid rgba(201, 166, 92, 0.3);
  --form-color: #F5F0E8;
  --form-focus-border: #C9A65C;
  --form-focus-ring: rgba(201, 166, 92, 0.25);
  --badge-chef-bg: rgba(201, 166, 92, 0.2);
  --badge-chef-color: #E0C88E;
  --badge-chef-border: 1px solid #C9A65C;
  --badge-popular-bg: rgba(245, 240, 232, 0.1);
  --badge-popular-color: #F5F0E8;
  --divider-line-color: rgba(201, 166, 92, 0.5);
  --divider-icon-color: #C9A65C;
  --footer-bg: #050505;
  --footer-text: #F5F0E8;
  --footer-text-muted: rgba(245, 240, 232, 0.72);
  --footer-border: 1px solid rgba(201, 166, 92, 0.25);
  --footer-logo-title: #F5F0E8;
  --footer-logo-sub: #C9A65C;
  --footer-social-border: rgba(201, 166, 92, 0.35);
  --footer-social-color: #F5F0E8;
  --btn-primary-bg: #C9A65C;
  --btn-primary-color: #0A0A0A;
  --btn-primary-hover-bg: #DFC488;
  --btn-outline-plum-color: #F5F0E8;
  --btn-outline-plum-border: rgba(245, 240, 232, 0.4);
  --btn-outline-gold-hover-color: #0A0A0A;
  --lang-btn-bg: rgba(255, 255, 255, 0.06);
  --lang-btn-border: 1px solid rgba(201, 166, 92, 0.35);
  --lang-btn-color: #F5F0E8;
  --lang-btn-active-bg: #C9A65C;
  --lang-btn-active-color: #0A0A0A;
}

[data-theme="asalet-siyah"] .hero-bg-media {
  filter: brightness(0.6) contrast(1.25);
}

/* Spot Işığı Vignette Efekti (Masaüstü) */
[data-theme="asalet-siyah"] .gallery-item::after,
[data-theme="asalet-siyah"] .editorial-image-frame::after {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(201, 166, 92, 0.35);
  border-radius: inherit;
}

/* ==========================================================================
   TEMA ÖZELİNDE MOBİL DUYARLI KIRILIMLAR (ÇOK ÖNEMLİ BÖLÜM 3.5)
   Breakpoint'ler: <=480px, 481px-768px, 769px-1024px
   ========================================================================== */

/* --- TEMA 2: GÜN BATIMI MOBİL AYARLARI --- */
@media (max-width: 768px) {
  /* Masaüstünde yatay/köşegen olan gradyan mobilde dikeye (yukarıdan aşağıya) çevrilir */
  [data-theme="gunbatimi"] .hero-overlay {
    background: linear-gradient(180deg, rgba(242, 169, 59, 0.88) 0%, rgba(232, 106, 51, 0.88) 50%, rgba(91, 42, 58, 0.96) 100%);
  }

  /* Hero bölümü yüksekliği mobilde kullanıcının içeriğe hızlı ulaşması için düşürülür */
  [data-theme="gunbatimi"] .hero-section {
    min-height: 70vh;
    padding-top: 100px;
    padding-bottom: 50px;
  }

  /* Ufuk çizgisi + yarım güneş motifi mobilde ~40px'e küçültülür, metinle çakışmaz */
  [data-theme="gunbatimi"] .luxury-divider {
    margin: 12px auto 20px;
  }
  [data-theme="gunbatimi"] .luxury-divider i {
    width: 11px;
    height: 6px;
  }
}

/* --- TEMA 3: DENİZ MOBİL AYARLARI --- */
@media (max-width: 768px) {
  /* Dalga genliği mobilde 60-80px'ten 22px'e düşürülür, nokta sayısı sadeleştirilir;
     böylece dar ekranda sivri/dişli görünmez ve layout kayması önlenir */
  [data-theme="deniz"] .section.bg-plum {
    clip-path: polygon(
      0% 0%, 
      25% 18px, 
      50% 6px, 
      75% 22px, 
      100% 10px, 
      100% 100%, 
      0% 100%
    );
    padding-top: 80px;
  }

  [data-theme="deniz"] .site-footer {
    clip-path: polygon(
      0% 0%, 
      30% 16px, 
      70% 8px, 
      100% 18px, 
      100% 100%, 
      0% 100%
    );
    padding-top: 75px;
  }
}

/* --- TEMA 4: DOĞA MOBİL AYARLARI --- */
@media (max-width: 768px) {
  /* Mobilde tek sütuna düşen dar kartlarda yemek fotoğraflarının bozulmaması için
     asimetrik blob oranları ölçülü varyantla değiştirilir */
  [data-theme="doga"] {
    --card-radius: 20px 10px 20px 10px;
  }

  [data-theme="doga"] .menu-card-img-wrap {
    border-radius: 14px 6px 14px 6px;
  }

  [data-theme="doga"] .menu-card-img {
    object-position: center;
  }
}

/* --- TEMA 5: DAĞ MOBİL AYARLARI --- */
@media (max-width: 768px) {
  /* Zikzak dağ silueti mobilde 2-3 geniş zirveye indirgenir; dikenli tel görünümü önlenir */
  [data-theme="dag"] .section.bg-plum {
    clip-path: polygon(
      0% 0%, 
      25% 20px, 
      50% 4px, 
      75% 22px, 
      100% 0%, 
      100% 100%, 
      0% 100%
    );
    padding-top: 80px;
  }
}

/* --- TEMA 6: ASALET BEYAZ MOBİL AYARLARI --- */
@media (max-width: 768px) {
  [data-theme="asalet-beyaz"] .section-title {
    font-size: clamp(1.8rem, 6vw, 2.5rem);
  }
  
  [data-theme="asalet-beyaz"] .section {
    padding: 55px 0;
  }
}

/* --- TEMA 7: ASALET SİYAH MOBİL AYARLARI --- */
@media (max-width: 768px) {
  /* Küçük ekranda vignette yoğunluğu %35 azaltılır; fotoğraflar karanlıkta kalmaz */
  [data-theme="asalet-siyah"] .gallery-item::after,
  [data-theme="asalet-siyah"] .editorial-image-frame::after {
    box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.55);
    border-width: 0.5px;
  }
}

/* ==========================================================================
   TEMA SEÇİCİ ARAYÜZÜ (UI/UX)
   - Sol altta dairesel buton (Sağ alttaki WhatsApp ile çakışmaz!)
   - Masaüstünde: Açılır popover
   - Mobilde: Bottom-sheet (ekranın en fazla %70'ini kaplar, tek sütun liste)
   ========================================================================== */

/* 1. Sol Alttaki Dairesel Tetikleyici Buton */
.theme-switcher-btn {
  position: fixed;
  bottom: 28px;
  left: 28px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-plum);
  color: var(--color-gold);
  border: 1.5px solid var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 998;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.theme-switcher-btn:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.theme-switcher-btn svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

/* 2. Masaüstü Popover Panel (>768px) */
.theme-picker-panel {
  position: fixed;
  bottom: 96px;
  left: 28px;
  width: 290px;
  background: var(--color-offwhite-card);
  border: 1px solid var(--border-gold);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  padding: 16px;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.96);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.theme-picker-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.theme-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.theme-panel-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-plum);
}

.theme-panel-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--color-plum);
  opacity: 0.6;
  padding: 4px;
}

.theme-panel-close:hover {
  opacity: 1;
}

/* 7 Tema Listesi */
.theme-options-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
}

.theme-option-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-plum);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  min-height: 44px;
}

.theme-option-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

.theme-option-item.active {
  background: rgba(0, 0, 0, 0.07);
  border-color: var(--color-gold);
  font-weight: 600;
}

.theme-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.theme-color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.theme-check-icon {
  opacity: 0;
  color: var(--color-gold);
  font-size: 15px;
  transition: opacity 0.2s ease;
}

.theme-option-item.active .theme-check-icon {
  opacity: 1;
}

/* 3. Mobil Bottom-Sheet (<=768px) */
.theme-bottomsheet-backdrop {
  display: none;
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1050;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.theme-bottomsheet-backdrop.is-open {
  display: block;
  opacity: 1;
}

@media (max-width: 768px) {
  .theme-switcher-btn {
    bottom: 20px;
    left: 20px;
    width: 50px;
    height: 50px;
  }
  .theme-switcher-btn svg {
    width: 22px;
    height: 22px;
  }

  /* Mobilde Popover yerine Bottom-Sheet olarak davranır */
  .theme-picker-panel {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 70vh;
    border-radius: 24px 24px 0 0;
    padding: 20px 20px env(safe-area-inset-bottom, 20px);
    overflow-y: auto;
    z-index: 1060;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3);
  }

  .theme-picker-panel.is-open {
    transform: translateY(0);
  }

  .theme-option-item {
    min-height: 56px;
    padding: 12px 14px;
    font-size: 15px;
  }

  .theme-color-swatch {
    width: 26px;
    height: 26px;
  }
}