/*
 * ==========================================================================
 * SADECE ANA MENÜ - HIZLI CANLI ÇALIŞMA DOSYASI
 * ==========================================================================
 *
 * ETKİ ALANI:
 * - Bütün müşteri sayfalarındaki ana kategori menüsü
 * - Ana menü adları, hover ve açık/seçili görünümü
 * - Menü adı altındaki çizgi animasyonu
 * - Açılır alt menüler
 *
 * ETKİLEMEZ:
 * - Logo, telefon, WhatsApp, arama, hesap, favori ve sepet düğmeleri
 * - Ana sayfa, ürün, kategori, sepet ve ödeme içerik alanları
 * - Footer
 *
 * Yalnız ":" işaretinden sonraki değeri değiştir.
 * Değişken adını ve satır sonundaki ";" işaretini silme.
 * ==========================================================================
 */

/* DEKOHOP-EDITABLE-SETTINGS-START */
/* DEKOHOP-KALICI-ELLE-DUZENLEME-KURALI
 * Bu bileşene daha sonra eklenecek her görsel değişiklik:
 * 1. Aşağıdaki :root alanında anlamlı bir değişken olarak tanımlanır.
 * 2. İlgili Türkçe kategori altında yer alır.
 * 3. Neyi değiştirdiği ve beklenen değer türü Türkçe açıklanır.
 * 4. Masaüstü kuralı önce tamamlanır; gelecekteki mobil kurallar masaüstünü ezmez.
 * 5. Sabit renk, ölçü, radius, gölge veya animasyon değeri kuralların içine gizlenmez.
 */
/* KENDİN DENEYEBİLECEĞİN ANA MENÜ AYARLARI
 * - FONT VE PUNTO
 * - RENKLER VE ARKA PLANLAR
 * - ÖLÇÜLER VE BOŞLUKLAR
 * - BORDER KALINLIĞI VE BORDER RENGİ
 * - RADIUS VE KÖŞE YUVARLAMA
 * - GÖLGE
 * - HOVER VE ANİMASYON
 */
:root {
  /* 01 - FONT VE PUNTO
   * font-family: Ana ve açılır menülerin yazı tipi ailesi.
   * font-size: Ana menü yazı büyüklüğü; clamp değeri ekrana göre akışkan değişir.
   * font-weight: Ana menü yazısının kalınlığı; 400 normal yazıdır.
   * letter-spacing: Harfler arasındaki yatay boşluk.
   */
  --dekohop-main-menu-font-family: var(--dekohop-font-family, "DEKOHOP Inter", "Inter", "Segoe UI", Arial, sans-serif);
  --dekohop-main-menu-font-size: clamp(1.4rem, 1.35rem + 0.12vw, 1.5rem);
  --dekohop-main-menu-font-weight: 400;
  --dekohop-main-menu-letter-spacing: 0.01em;

  /* 02 - MASAÜSTÜ TEK SATIR VE DAĞILIM
   * items-justify: Menü grubunun yatay dağılım biçimi.
   * item-flex: Her ana menü öğesinin büyüme ve daralma davranışı.
   * item-text-align: Ana menü adlarının kendi alanındaki hizası.
   */
  --dekohop-main-menu-items-justify: space-between;
  --dekohop-main-menu-item-flex: 0 1 auto;
  --dekohop-main-menu-item-text-align: center;

  /* 03 - MENÜ ÇUBUĞU
   * height: Ana menü satırının asgari yüksekliği.
   * header-clearance: Hover ile büyüyüp yukarı çıkan ana menü düğmesinin
   *   header altında kesilmemesi için bırakılan güvenli üst boşluk.
   * background: Menü satırının arka plan rengi; transparent sayfa rengini kullanır.
   * border-width: Menü satırının alt çizgi kalınlığı; 0 çizgiyi kapatır.
   * border-color: Menü satırı alt çizgisinin rengi.
   * shadow: Menü satırının gölgesi; none gölgeyi kapatır.
   * bottom-space: Menü ile sonraki sayfa içeriği arasındaki boşluk.
   */
  --dekohop-main-menu-height: 3.25rem;
  --dekohop-main-menu-header-clearance: 4px;
  --dekohop-main-menu-background: transparent;
  --dekohop-main-menu-border-width: 0;
  --dekohop-main-menu-border-color: #e5e7eb;
  --dekohop-main-menu-shadow: none;
  --dekohop-main-menu-bottom-space: 1.5rem;

  /* 04 - ANA MENÜ ADLARI
   * link-color: Normal ana menü yazı rengi.
   * link-hover-color: Fare üzerine geldiğindeki yazı rengi.
   * link-open-color: Açılır menü açıkken ana menü yazı rengi.
   * link-hover-background: Fare üzerine geldiğindeki arka plan rengi.
   * link-open-background: Açılır menü açıkken ana menü arka plan rengi.
   * link-horizontal-padding: Menü adının sağ ve sol iç boşluğu.
   * link-radius: Seçili/hover ana menü arka planının köşe yuvarlaklığı.
   * link-hover-scale: Fare üzerine geldiğinde büyüme oranı; 1 büyüme yoktur.
   * link-hover-lift: Fare üzerine geldiğinde dikey hareket; eksi değer yukarı taşır.
   * link-hover-shadow: Hover ve açık durumundaki gölge.
   */
  --dekohop-main-menu-link-color: #17191f;
  --dekohop-main-menu-link-hover-color: #17191f;
  --dekohop-main-menu-link-open-color: #17191f;
  --dekohop-main-menu-link-hover-background: #e8edf7;
  --dekohop-main-menu-link-open-background: #dde5f3;
  --dekohop-main-menu-link-horizontal-padding: clamp(0.85rem, 0.65rem + 0.45vw, 1.2rem);
  --dekohop-main-menu-link-radius: 10px;
  --dekohop-main-menu-link-hover-scale: 1.04;
  --dekohop-main-menu-link-hover-lift: -2px;
  --dekohop-main-menu-link-hover-shadow: 0 6px 16px rgba(17, 19, 24, 0.1);

  /* 05 - MENÜ ADI ALT ANİMASYON ÇİZGİSİ
   * underline-display: block çizgiyi gösterir, none tamamen kapatır.
   * underline-color: Hareketli alt çizginin rengi.
   * underline-height: Alt çizginin kalınlığı.
   * underline-side-space: Çizginin yazı alanının iki yanından içeri çekilmesi.
   * underline-bottom: Çizginin menü öğesinin altından uzaklığı.
   * underline-start-scale: Animasyon başlamadan önceki yatay uzunluk oranı.
   * underline-end-scale: Animasyon sonundaki yatay uzunluk oranı.
   * underline-duration: Çizgi animasyon süresi.
   */
  --dekohop-main-menu-underline-display: none;
  --dekohop-main-menu-underline-color: #20a8d8;
  --dekohop-main-menu-underline-height: 2px;
  --dekohop-main-menu-underline-side-space: 1rem;
  --dekohop-main-menu-underline-bottom: 0.42rem;
  --dekohop-main-menu-underline-start-scale: 0.25;
  --dekohop-main-menu-underline-end-scale: 1;
  --dekohop-main-menu-underline-duration: 180ms;

  /* 06 - AÇILIR ALT MENÜ KUTUSU
   * dropdown-background: Açılır kutunun arka plan rengi.
   * dropdown-offset: Açılır kutunun ana menüden aşağı uzaklığı.
   * dropdown-anchor: Kutunun ana menüye bağlandığı yatay nokta; 50% merkezdir.
   * dropdown-shift: Kutuyu kendi genişliğine göre yatay kaydırır; -50% merkezler.
   * dropdown-text-align: Açılır menü metin hizası.
   * dropdown-width: Kutunun genişlik yöntemi; max-content en uzun içeriğe uyar.
   * dropdown-min-width: Kısa içeriklerde izin verilen en düşük kutu genişliği.
   * dropdown-viewport-gap: Kutunun ekranın sağ ve sol kenarına asgari uzaklığı.
   * dropdown-column-gap: Çok sütunlu menülerde sütunlar arasındaki boşluk.
   * dropdown-border-width: Açılır kutu çerçevesinin kalınlığı.
   * dropdown-border-color: Açılır kutu çerçevesinin rengi.
   * dropdown-top-left-radius: Kutunun sol üst köşe yuvarlaklığı.
   * dropdown-top-right-radius: Kutunun sağ üst köşe yuvarlaklığı.
   * dropdown-bottom-right-radius: Kutunun sağ alt köşe yuvarlaklığı.
   * dropdown-bottom-left-radius: Kutunun sol alt köşe yuvarlaklığı.
   * dropdown-padding: Kutu kenarı ile alt menü satırları arasındaki iç boşluk.
   * dropdown-shadow: Açılır kutunun gölgesi.
   */
  --dekohop-main-menu-dropdown-background: #f8f9fc;
  --dekohop-main-menu-dropdown-offset: 5px;
  --dekohop-main-menu-dropdown-anchor: 50%;
  --dekohop-main-menu-dropdown-shift: -50%;
  --dekohop-main-menu-dropdown-text-align: center;
  --dekohop-main-menu-dropdown-width: max-content;
  --dekohop-main-menu-dropdown-min-width: 180px;
  --dekohop-main-menu-dropdown-viewport-gap: 25px;
  --dekohop-main-menu-dropdown-column-gap: 0.75rem;
  --dekohop-main-menu-dropdown-border-width: 1px;
  --dekohop-main-menu-dropdown-border-color: #d8dfeb;
  --dekohop-main-menu-dropdown-top-left-radius: 16px;
  --dekohop-main-menu-dropdown-top-right-radius: 16px;
  --dekohop-main-menu-dropdown-bottom-right-radius: 16px;
  --dekohop-main-menu-dropdown-bottom-left-radius: 16px;
  --dekohop-main-menu-dropdown-padding: 0.75rem;
  --dekohop-main-menu-dropdown-shadow: 0 12px 32px rgba(17, 19, 24, 0.12);

  /* 07 - ALT MENÜ SATIRLARI
   * child-font-size: Alt menü yazı büyüklüğü; kullanıcı açılır menüsüyle aynı tutulur.
   * child-text-color: Normal alt menü yazı rengi.
   * child-hover-text-color: Fare üzerine geldiğindeki alt menü yazı rengi.
   * child-hover-background: Hover sırasında satırın tamamını boyayan arka plan.
   * child-radius: Boyalı alt menü satırının köşe yuvarlaklığı.
   * child-justify: Alt menü yazısının satır içindeki yatay hizası.
   * child-white-space: nowrap alt menü adını tek satırda tutar.
   * child-product-count-visible: false parantezli ürün adetlerini gizler, true gösterir.
   * child-vertical-padding: Alt menü satırının üst ve alt iç boşluğu.
   * child-horizontal-padding: Alt menü satırının sağ ve sol iç boşluğu.
   */
  --dekohop-main-menu-child-font-size: var(--dekohop-text-menu, 14px);
  --dekohop-main-menu-child-text-color: #26282e;
  --dekohop-main-menu-child-hover-text-color: #17191f;
  --dekohop-main-menu-child-hover-background: #e8edf7;
  --dekohop-main-menu-child-radius: 8px;
  --dekohop-main-menu-child-justify: center;
  --dekohop-main-menu-child-white-space: nowrap;
  /* false = adetleri gizle, true = parantezli ürün adetlerini göster */
  --dekohop-main-menu-child-product-count-visible: false;
  --dekohop-main-menu-child-vertical-padding: 0.58rem;
  --dekohop-main-menu-child-horizontal-padding: 0.75rem;

  /* 08 - ORTAK HOVER VE ANİMASYON
   * transition: Ana ve alt menü renk/hareket geçişlerinin ortak süresi ve eğrisi.
   */
  --dekohop-main-menu-transition: 180ms ease;

  /* 09 - MASAÜSTÜ TIKLAMA DAVRANIŞI
   * desktop-click-navigates: true iken alt kategorisi bulunan ana menü adına
   * masaüstünde tıklamak kategori sayfasına gider. false yalnız açılır menüyü kullanır.
   * Fareyle üzerine gelme davranışı her iki değerde de alt menüyü göstermeye devam eder.
   */
  --dekohop-main-menu-desktop-click-navigates: true;

  /* 10 - ANA MENÜ KATMAN SIRASI
   * root-layer: Ana menü alanını sayfa filtrelerinin üstünde tutar.
   * active-item-layer: Üzerine gelinen veya açık olan ana menü adını öne taşır.
   * dropdown-layer: Açılır alt kategori kutusunu ana menü satırının üstünde tutar.
   * Header hesap ve sepet katmanları bu değerlerden daha büyük kalmalıdır.
   */
  --dekohop-main-menu-root-layer: 3000;
  --dekohop-main-menu-active-item-layer: 3010;
  --dekohop-main-menu-dropdown-layer: 3100;
}
/* DEKOHOP-EDITABLE-SETTINGS-END */

/* DEKOHOP-COMMON-DESKTOP-RULES-START */
#menu.navbar {
  position: relative;
  z-index: var(--dekohop-main-menu-root-layer);
  container: dekohop-main-menu / inline-size;
  min-height: var(--dekohop-main-menu-height);
  margin:
    var(--dekohop-main-menu-header-clearance)
    0
    var(--dekohop-main-menu-bottom-space);
  border: 0;
  border-bottom: var(--dekohop-main-menu-border-width) solid var(--dekohop-main-menu-border-color);
  border-radius: 0;
  background: var(--dekohop-main-menu-background);
  box-shadow: var(--dekohop-main-menu-shadow);
  font-family: var(--dekohop-main-menu-font-family);
}

#menu.navbar .navbar-collapse {
  padding-right: 0;
  padding-left: 0;
}

#menu.navbar .nav {
  display: flex;
  width: 100%;
  align-items: stretch;
  flex-wrap: nowrap;
  justify-content: var(--dekohop-main-menu-items-justify);
}

#menu.navbar .nav > li {
  position: relative;
  min-width: 0;
  flex: var(--dekohop-main-menu-item-flex);
  text-align: var(--dekohop-main-menu-item-text-align);
}

#menu.navbar .nav > li > a {
  position: relative;
  display: flex;
  width: max-content;
  max-width: none;
  min-height: var(--dekohop-main-menu-height);
  margin-right: auto;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  padding:
    1.05rem
    var(--dekohop-main-menu-link-horizontal-padding)
    0.92rem;
  border-radius: var(--dekohop-main-menu-link-radius);
  background: transparent;
  background-image: none;
  color: var(--dekohop-main-menu-link-color);
  font-family: var(--dekohop-main-menu-font-family);
  font-size: var(--dekohop-main-menu-font-size);
  font-weight: var(--dekohop-main-menu-font-weight);
  letter-spacing: var(--dekohop-main-menu-letter-spacing);
  line-height: 1.25rem;
  white-space: nowrap;
  text-shadow: none;
  transition:
    color var(--dekohop-main-menu-transition),
    background-color var(--dekohop-main-menu-transition),
    box-shadow var(--dekohop-main-menu-transition),
    transform var(--dekohop-main-menu-transition);
}

#menu.navbar .nav > li:hover,
#menu.navbar .nav > li.open {
  z-index: var(--dekohop-main-menu-active-item-layer);
}

#menu.navbar .nav > li > a::after {
  position: absolute;
  display: var(--dekohop-main-menu-underline-display);
  right: var(--dekohop-main-menu-underline-side-space);
  bottom: var(--dekohop-main-menu-underline-bottom);
  left: var(--dekohop-main-menu-underline-side-space);
  height: var(--dekohop-main-menu-underline-height);
  border-radius: 999px;
  background: var(--dekohop-main-menu-underline-color);
  content: "";
  opacity: 0;
  transform: scaleX(var(--dekohop-main-menu-underline-start-scale));
  transform-origin: center;
  transition:
    opacity var(--dekohop-main-menu-underline-duration) ease,
    transform var(--dekohop-main-menu-underline-duration) ease;
}

#menu.navbar .nav > li:hover > a,
#menu.navbar .nav > li:focus-within > a,
#menu.navbar .nav > li > a:focus {
  background: var(--dekohop-main-menu-link-hover-background);
  background-image: none;
  box-shadow: var(--dekohop-main-menu-link-hover-shadow);
  color: var(--dekohop-main-menu-link-hover-color);
  transform:
    translateY(var(--dekohop-main-menu-link-hover-lift))
    scale(var(--dekohop-main-menu-link-hover-scale));
}

#menu.navbar .nav > li.open > a,
#menu.navbar .nav > li.open > a:hover,
#menu.navbar .nav > li.open > a:focus {
  background: var(--dekohop-main-menu-link-open-background);
  background-image: none;
  box-shadow: var(--dekohop-main-menu-link-hover-shadow);
  color: var(--dekohop-main-menu-link-open-color);
  transform:
    translateY(var(--dekohop-main-menu-link-hover-lift))
    scale(var(--dekohop-main-menu-link-hover-scale));
}

#menu.navbar .nav > li > a:hover::after,
#menu.navbar .nav > li > a:focus::after,
#menu.navbar .nav > li.open > a::after {
  opacity: 1;
  transform: scaleX(var(--dekohop-main-menu-underline-end-scale));
}

#menu.navbar .dropdown-menu {
  --dekohop-main-menu-dropdown-collision-shift: 0px;

  z-index: var(--dekohop-main-menu-dropdown-layer);
  top: 100%;
  right: auto;
  left: var(--dekohop-main-menu-dropdown-anchor);
  width: var(--dekohop-main-menu-dropdown-width);
  max-width: calc(100vw - (var(--dekohop-main-menu-dropdown-viewport-gap) * 2));
  min-width: var(--dekohop-main-menu-dropdown-min-width);
  margin-top: var(--dekohop-main-menu-dropdown-offset);
  margin-left: 0 !important;
  padding: var(--dekohop-main-menu-dropdown-padding);
  border-width: var(--dekohop-main-menu-dropdown-border-width);
  border-style: solid;
  border-color: var(--dekohop-main-menu-dropdown-border-color);
  border-radius:
    var(--dekohop-main-menu-dropdown-top-left-radius)
    var(--dekohop-main-menu-dropdown-top-right-radius)
    var(--dekohop-main-menu-dropdown-bottom-right-radius)
    var(--dekohop-main-menu-dropdown-bottom-left-radius);
  background: var(--dekohop-main-menu-dropdown-background);
  background-image: none;
  box-shadow: var(--dekohop-main-menu-dropdown-shadow);
  box-sizing: border-box;
  float: none;
  font-family: var(--dekohop-main-menu-font-family);
  text-align: var(--dekohop-main-menu-dropdown-text-align);
  transform: translateX(calc(
    var(--dekohop-main-menu-dropdown-shift) +
    var(--dekohop-main-menu-dropdown-collision-shift)
  ));
}

#menu.navbar .dropdown-menu::before {
  position: absolute;
  top: calc(var(--dekohop-main-menu-dropdown-offset) * -1);
  right: 0;
  left: 0;
  height: var(--dekohop-main-menu-dropdown-offset);
  content: "";
}

#menu.navbar .dropdown-inner {
  display: flex;
  width: 100%;
  min-width: max-content;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  align-items: flex-start;
  gap: var(--dekohop-main-menu-dropdown-column-gap);
}

#menu.navbar .dropdown-inner > ul {
  display: flex;
  width: auto;
  min-width: max-content;
  flex: 1 0 max-content;
  flex-direction: column;
  align-items: stretch;
}

#menu.navbar .dropdown-inner li {
  display: block;
  width: 100%;
}

#menu.navbar .dropdown-inner li a {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: var(--dekohop-main-menu-child-justify);
  padding:
    var(--dekohop-main-menu-child-vertical-padding)
    var(--dekohop-main-menu-child-horizontal-padding);
  border-radius: var(--dekohop-main-menu-child-radius);
  background: transparent;
  color: var(--dekohop-main-menu-child-text-color);
  font-family: var(--dekohop-main-menu-font-family);
  font-size: var(--dekohop-main-menu-child-font-size);
  box-sizing: border-box;
  text-align: var(--dekohop-main-menu-dropdown-text-align);
  white-space: var(--dekohop-main-menu-child-white-space);
  transition:
    color var(--dekohop-main-menu-transition),
    background-color var(--dekohop-main-menu-transition);
}

#menu.navbar .dropdown-inner li a:hover,
#menu.navbar .dropdown-inner li a:focus {
  background: var(--dekohop-main-menu-child-hover-background);
  background-image: none;
  color: var(--dekohop-main-menu-child-hover-text-color);
  text-decoration: none;
}

/* DEKOHOP-COMMON-DESKTOP-RULES-END */

/* DEKOHOP-RESPONSIVE-RULES-START */
/* MOBİL MENÜ AYARLARI — masaüstü menüsü üst bölümde korunur. */
@media (max-width: 63.99em) and (hover: none) and (pointer: coarse) {
  :root {
    /* 01 — PANEL: genişlik, dışarıda kalan alan, başlık ve iç boşluk (px). */
    --dekohop-mobile-menu-width: 360px;
    --dekohop-mobile-menu-outside-space: 24px;
    --dekohop-mobile-menu-heading-height: 62px;
    --dekohop-mobile-menu-padding: 12px;
    --dekohop-mobile-menu-row-gap: 7px;
    --dekohop-mobile-menu-row-height: 48px;
    --dekohop-mobile-menu-radius: 12px;
    --dekohop-mobile-menu-toggle-width: 48px;
    --dekohop-mobile-menu-font-size: 14px;
    --dekohop-mobile-menu-heading-font-size: 18px;
    /* 02 — RENKLER: tek satırlar mavi, çift satırlar yeşil; alt menü açık zemin. */
    --dekohop-mobile-menu-background: #ffffff;
    --dekohop-mobile-menu-blue: rgba(88, 142, 210, 0.08);
    --dekohop-mobile-menu-green: rgba(75, 158, 112, 0.075);
    --dekohop-mobile-menu-child-background: #f7faf9;
    --dekohop-mobile-menu-text: #243c43;
    --dekohop-mobile-menu-border: rgba(80, 116, 129, 0.12);
    --dekohop-mobile-menu-backdrop: rgba(17, 32, 43, 0.42);
    --dekohop-mobile-menu-shadow: 8px 0 28px rgba(17, 32, 43, 0.18);
    /* 03 — HAREKET/KATMAN: açılma süresi (ms), alt menüden yüksek katmanlar. */
    --dekohop-mobile-menu-duration: 240ms;
    --dekohop-mobile-menu-backdrop-layer: 3000;
    --dekohop-mobile-menu-drawer-layer: 3010;
  }
  html.dekohop-mobile-menu-open, .dekohop-mobile-menu-open body { overflow: hidden; }
  .dekohop-mobile-menu-open .dekohop-floating-tools { visibility: hidden; }
  .dekohop-mobile-menu-backdrop {
    position: fixed; inset: 0; z-index: var(--dekohop-mobile-menu-backdrop-layer);
    background: var(--dekohop-mobile-menu-backdrop); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--dekohop-mobile-menu-duration), visibility 0s linear var(--dekohop-mobile-menu-duration);
  }
  .dekohop-mobile-drawer {
    position: fixed; inset: 0 auto 0 0; z-index: var(--dekohop-mobile-menu-drawer-layer);
    display: flex; flex-direction: column; width: min(var(--dekohop-mobile-menu-width), calc(100vw - var(--dekohop-mobile-menu-outside-space)));
    height: 100%; height: 100dvh; min-width: 0; max-width: 100%; padding-top: env(safe-area-inset-top, 0px);
    background: var(--dekohop-mobile-menu-background); color: var(--dekohop-mobile-menu-text); box-shadow: var(--dekohop-mobile-menu-shadow);
    transform: translateX(-105%); visibility: hidden; pointer-events: none;
    transition: transform var(--dekohop-mobile-menu-duration) ease, visibility 0s linear var(--dekohop-mobile-menu-duration);
  }
  .dekohop-mobile-menu-open .dekohop-mobile-menu-backdrop { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
  .dekohop-mobile-menu-open .dekohop-mobile-drawer { transform: translateX(0); visibility: visible; pointer-events: auto; transition-delay: 0s; }
  .dekohop-mobile-drawer-heading {
    display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; min-height: var(--dekohop-mobile-menu-heading-height);
    padding: 0 var(--dekohop-mobile-menu-padding); border-bottom: 1px solid var(--dekohop-mobile-menu-border); font-size: var(--dekohop-mobile-menu-heading-font-size);
  }
  .dekohop-mobile-drawer-close {
    display: inline-flex; width: var(--dekohop-mobile-menu-toggle-width); height: var(--dekohop-mobile-menu-toggle-width); align-items: center; justify-content: center;
    border: 0; border-radius: var(--dekohop-mobile-menu-radius); background: var(--dekohop-mobile-menu-blue); color: var(--dekohop-mobile-menu-text); font-size: var(--dekohop-mobile-menu-heading-font-size);
  }
  .dekohop-mobile-drawer-content {
    flex: 1 1 auto; min-height: 0; padding: var(--dekohop-mobile-menu-padding);
    padding-bottom: calc(var(--dekohop-mobile-menu-padding) + env(safe-area-inset-bottom, 0px)); overflow: auto; overscroll-behavior: contain;
  }
  /* İlk çizimde menü henüz çekmeceye taşınmamıştır; sayfa içinde bir an görünmesin. */
  #menu.navbar { display: none; width: 100%; min-width: 0; min-height: 0; max-width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--dekohop-mobile-menu-background); }
  .dekohop-mobile-drawer #menu.navbar { display: block; }
  #menu.navbar .navbar-header { display: none; }
  #menu.navbar .navbar-collapse { display: block; width: 100%; min-width: 0; max-width: 100%; height: auto; margin: 0; padding: 0; border: 0; overflow: visible; }
  #menu.navbar .nav { display: flex; float: none; width: 100%; min-width: 0; margin: 0; padding: 0; flex-direction: column; gap: var(--dekohop-mobile-menu-row-gap); }
  #menu.navbar .nav > li {
    display: grid; grid-template-columns: minmax(0, 1fr) var(--dekohop-mobile-menu-toggle-width); float: none; width: 100%; min-width: 0;
    border: 1px solid var(--dekohop-mobile-menu-border); border-radius: var(--dekohop-mobile-menu-radius); overflow: hidden; transform: none; background: var(--dekohop-mobile-menu-blue);
  }
  #menu.navbar .nav > li:nth-child(even) { background: var(--dekohop-mobile-menu-green); }
  #menu.navbar .nav > li > a {
    display: flex; grid-column: 1; align-items: center; justify-content: flex-start; min-height: var(--dekohop-mobile-menu-row-height); min-width: 0; width: 100%;
    padding: var(--dekohop-mobile-menu-padding); margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
    color: var(--dekohop-mobile-menu-text); font-size: var(--dekohop-mobile-menu-font-size); line-height: 1.4; white-space: normal; overflow-wrap: anywhere; transform: none;
  }
  #menu.navbar .nav > li:not(.dropdown) > a { grid-column: 1 / -1; }
  #menu.navbar .nav > li > a::before, #menu.navbar .nav > li > a::after { display: none; }
  #menu.navbar .dekohop-mobile-submenu-toggle {
    display: flex; grid-column: 2; grid-row: 1; align-items: center; justify-content: center; width: 100%; min-height: var(--dekohop-mobile-menu-row-height);
    padding: 0; border: 0; border-left: 1px solid var(--dekohop-mobile-menu-border); background: transparent; color: var(--dekohop-mobile-menu-text); font-size: var(--dekohop-mobile-menu-heading-font-size);
  }
  #menu.navbar .dekohop-mobile-submenu-toggle .fa { transition: transform var(--dekohop-mobile-menu-duration); }
  #menu.navbar .dekohop-mobile-submenu-toggle[aria-expanded="true"] .fa { transform: rotate(180deg); }
  #menu.navbar .nav > li > .dropdown-menu {
    position: static; grid-column: 1 / -1; display: none; float: none; width: 100%; min-width: 0; max-width: 100%;
    margin: 0; padding: 0; border: 0; border-top: 1px solid var(--dekohop-mobile-menu-border); border-radius: 0; background: var(--dekohop-mobile-menu-child-background); box-shadow: none; transform: none;
  }
  #menu.navbar .nav > li.dekohop-mobile-submenu-open > .dropdown-menu { display: block; }
  #menu.navbar .dropdown-menu::before, #menu.navbar .dropdown-menu::after { display: none; }
  #menu.navbar .dropdown-inner { display: flex; width: 100%; min-width: 0; flex-direction: column; gap: 0; }
  #menu.navbar .dropdown-inner > ul { display: block; width: 100%; min-width: 0; margin: 0; flex: none; }
  #menu.navbar .dropdown-inner li a {
    justify-content: flex-start; min-height: var(--dekohop-mobile-menu-row-height); padding: var(--dekohop-mobile-menu-padding);
    border-radius: 0; font-size: var(--dekohop-mobile-menu-font-size); color: var(--dekohop-mobile-menu-text); white-space: normal; overflow-wrap: anywhere;
  }
  @media (prefers-reduced-motion: reduce) { .dekohop-mobile-drawer, .dekohop-mobile-menu-backdrop, #menu.navbar .dekohop-mobile-submenu-toggle .fa { transition: none; } }
}
/* DEKOHOP-RESPONSIVE-RULES-END */