/*
 * ==========================================================================
 * 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 */
/* BU ALAN 2. TUR İÇİN REZERVEDİR.
 * Bütün masaüstü sayfaları tamamlanmadan buraya yeni tasarım yazılmaz.
 * Akışkan ölçüler + container query + pointer/hover capability query kullanılır.
 * px tabanlı cihaz eşiği veya işletim sistemi algılama kullanılmaz.
 */
/* DEKOHOP-RESPONSIVE-RULES-END */