/*
 * ==========================================================================
 * SADECE HEADER - HIZLI CANLI ÇALIŞMA DOSYASI
 * ==========================================================================
 *
 * ETKİ ALANI:
 * - Bütün müşteri sayfalarının en üst yardımcı alanı
 * - Logo bölümü
 * - Telefon ve WhatsApp düğmeleri
 * - Arama alanı
 * - Hesap, favori ve sepet düğmeleri
 *
 * ÜST YARDIMCI SERIT ACIK / KAPALI AYARLARI:
 * - Para birimi, dil ve yazili telefon numarasi ayarlari header.twig
 *   dosyasinin en basindadir.
 * - true = goster, false = gizle.
 *
 * ETKİLEMEZ:
 * - Ürün kartlarının iç görünümü
 * - Ürün detay sayfasının içerik yerleşimi
 * - Kategori ürün listesinin iç yapısı
 * - Sepet ve ödeme sayfasının içerik bölümü
 * - Footer
 *
 * Yalnız ":" işaretinden sonraki değeri değiştir.
 * Değişken adını ve satır sonundaki ";" işaretini silme.
 * VS Code bu proje içinde değişiklikleri yaklaşık 0,3 saniyede otomatik kaydeder.
 * ==========================================================================
 */

/* 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.
 */
/* KENDIN DENEYEBILECEGIN AYAR KATALOGU
 * - RENKLER VE ARKA PLANLAR
 * - OLCULER VE BOSLUKLAR
 * - BORDER, BORDER KALINLIGI VE BORDER RENGI
 * - RADIUS VE KOSE YUVARLAMA
 * - GOLGE, HOVER VE ANIMASYON
 * - HIZALAMA VE YERLESIM
 * - IKON/DOSYA SECIMI: header.twig dosyasinin en ustundeki ayar alaninda
 *
 * MASAUSTU TURUNDA yalniz bu ortak/masaustu degerleri duzenlenir.
 * Mobil degerler, butun masaustu sayfalari bittikten sonra asagidaki
 * DEKOHOP-RESPONSIVE-RULES alaninda tanimlanir.
 */
:root {
  /* 01 - HEADER ARKA PLANLARI VE HEADER–ANA MENÜ AYIRICI ÇİZGİSİ
   * utility-background: Açık olduğunda en üst yardımcı şeridin arka plan rengi.
   * background: Logo, arama ve işlem düğmelerinin bulunduğu ana header arka planı.
   * border-color: Header içinde kullanılan genel ayırıcı çizgi rengi.
   * main-menu-divider-width: Header ile ana menü arasındaki yatay çizginin kalınlığı;
   *   0px çizgiyi tamamen kapatır, örneğin 1px yeniden gösterir.
   * main-menu-divider-style: Ayırıcı çizginin biçimi; solid düz çizgidir.
   * main-menu-divider-color: Header ile ana menü arasındaki ayırıcı çizginin rengi.
   */
  --dekohop-header-utility-background: var(--dekohop-color-surface-soft);
  --dekohop-header-background: #ffffff;
  --dekohop-header-border-color: var(--dekohop-color-border);
  --dekohop-header-main-menu-divider-width: 0px;
  --dekohop-header-main-menu-divider-style: solid;
  --dekohop-header-main-menu-divider-color: var(--dekohop-header-border-color);

  /* 02 - HEADER BOŞLUKLARI VE TEMEL ÖLÇÜLER
   * vertical-space: Eski ortak header kuralıyla uyumluluk için varsayılan dikey boşluk.
   * top-space: Ekranın üstü ile header içeriği arasındaki masaüstü üst boşluğu.
   * bottom-space: Header içeriği ile ana menü arasındaki masaüstü alt boşluğu.
   * logo-height: Masaüstünde logonun izin verilen en yüksek yüksekliği.
   * logo-height-mobile: İlerideki mobil turda kullanılacak logo yüksekliği; şimdilik değiştirme.
   * contact-size: Telefon ve WhatsApp düğmelerinin dış daire ölçüsü.
   * phone-icon-size: Telefon SVG simgesinin dış daire içindeki ölçüsü.
   * whatsapp-icon-size: WhatsApp SVG simgesinin dış daire içindeki ölçüsü.
   * contact-hover-background: Telefon ve WhatsApp üzerine gelindiğindeki arka plan.
   * contact-hover-scale: Telefon ve WhatsApp hover büyüme oranı; 1 büyüme yoktur.
   * action-size: Hesap, favoriler ve sepet masaüstü düğme ölçüsü.
   * action-size-mobile: İlerideki mobil turda kullanılacak düğme ölçüsü; şimdilik değiştirme.
   */
  --dekohop-header-vertical-space: 20px;
  --dekohop-header-top-space: 25px;
  --dekohop-header-bottom-space: 10px;
  --dekohop-header-logo-height: 64px;
  --dekohop-header-logo-height-mobile: 48px;
  --dekohop-header-contact-size: 44px;
  --dekohop-header-phone-icon-size: 24.31px; /* Onceki 18.7px degerinden tam %30 buyuk */
  --dekohop-header-whatsapp-icon-size: 24.31px; /* Onceki 18.7px degerinden tam %30 buyuk */
  --dekohop-header-contact-hover-background: var(--dekohop-color-surface);
  --dekohop-header-contact-hover-scale: 1.06;
  --dekohop-header-action-size: 46px;
  --dekohop-header-action-size-mobile: 40px;

  /* 02A - MASAUSTU HEADER DORT ELEMENT YERLESIMI
   * center-search-width: Sayfanin tam merkezindeki arama cubugunun genisligi.
   * center-search-min-width: Arama cubugunun masaustunde izin verilen en dusuk genisligi.
   * center-column-gap: Merkez arama ile sag/sol alanlar arasindaki bosluk.
   * brand-max-width: Soldaki logonun iletisim dugmeleriyle cakismamasi icin azami genislik.
   * desktop-layout-min-width: Bu dort elementli masaustu duzeninin container genisligi esigi.
   *   Bu bir cihaz/telefon algilamasi degil, yalniz bilesenin sigabilecegi gercek alan olcusudur.
   */
  --dekohop-header-center-search-width: 500px;
  --dekohop-header-center-search-min-width: 420px;
  --dekohop-header-center-column-gap: 24px;
  --dekohop-header-brand-max-width: 200px;
  --dekohop-header-desktop-layout-min-width: 1080px;
  /* contact-center-shift: Telefon + WhatsApp grubunun logo ile arama arasindaki
   *   gorunur boslukta tam ortalanmasi icin yatay ince ayar.
   *   Negatif deger sola, pozitif deger saga kaydirir.
   *   Mevcut 128 px logo ve 500 px arama olcusunde olculen dogru deger: -19px.
   */
  --dekohop-header-contact-center-shift: -19px;

  /*
   * HESAP - FAVORILER - SEPET: ORTAK DUGME AYARLARI
   * Yalniz ":" isaretinden sonraki degeri degistir.
   */
  --dekohop-header-action-background: var(--dekohop-color-surface);
  --dekohop-header-action-icon-color: var(--dekohop-color-ink);
  --dekohop-header-action-border-width: 1px;
  --dekohop-header-action-border-color: var(--dekohop-color-border);
  --dekohop-header-action-radius: 50%;
  --dekohop-header-action-shadow: var(--dekohop-shadow-small);
  --dekohop-header-action-hover-shadow: var(--dekohop-shadow-card);
  --dekohop-header-action-hover-lift: -1px;
  --dekohop-header-action-hover-scale: 1.05;

  /* HESAP DUGMESI HOVER RENKLERI */
  --dekohop-header-account-hover-background: #eef4ff;
  --dekohop-header-account-hover-border-color: #b9cdf7;
  --dekohop-header-account-hover-icon-color: #335f9f;

  /* FAVORILER DUGMESI HOVER RENKLERI */
  --dekohop-header-wishlist-hover-background: #fff0f3;
  --dekohop-header-wishlist-hover-border-color: #f2b8c4;
  --dekohop-header-wishlist-hover-icon-color: #c8445e;

  /* SEPET DUGMESI HOVER VE ACIK DURUM RENKLERI */
  --dekohop-header-cart-hover-background: #fff3e8;
  --dekohop-header-cart-hover-border-color: #efc095;
  --dekohop-header-cart-hover-icon-color: #b65d16;

  /* 03 - HESAP VE SEPET AÇILIR MENÜLERİ
   * dropdown-background: Hesap ve sepet açılır kutularının ortak soft arka planı.
   * dropdown-border-color: İki açılır kutunun ortak çerçeve rengi.
   * dropdown-text-color: Kutuların normal metin rengi.
   * dropdown-font-size: Hesap ve sepet içindeki ortak masaüstü yazı boyutu.
   * dropdown-line-height: Açılır menü metinlerinin satır yüksekliği.
   * dropdown-radius: Açılır kutuların köşe yuvarlaklığı.
   * dropdown-shadow: Açılır kutuların dış gölgesi; none gölgeyi kapatır.
   * dropdown-padding: Kutuların üst ve alt iç boşluğu.
   * dropdown-row-background: Normal hesap menüsü satır arka planı.
   * dropdown-row-hover-background: Hesap ve sepet bağlantılarının hover arka planı.
   * dropdown-row-hover-text-color: Hover sırasında bağlantı yazı rengi.
   * dropdown-row-radius: Hover ile boyanan satırların köşe yuvarlaklığı.
   * dropdown-row-padding: Hesap menüsü bağlantılarının dikey ve yatay iç boşluğu.
   * dropdown-row-margin: Hesap menüsü bağlantılarının kutu kenarından uzaklığı.
   * cart-empty-font-size: Sepet boş mesajının yazı boyutu.
   * hover-dropdown-enabled: true masaüstünde hesap ve sepet menüsünü simgenin
   *   üzerine gelince açar; false yalnız tıklamayla çalışan standart davranışı korur.
   * hover-dropdown-open-delay: Açılma bekleme süresi; 0ms menüyü hemen açar.
   * hover-dropdown-close-delay: İmleç alanı terk edince kapanma bekleme süresi.
   */
  --dekohop-header-dropdown-background: #f1f8f4;
  --dekohop-header-dropdown-border-color: #c8e1d5;
  --dekohop-header-dropdown-text-color: #244137;
  --dekohop-header-dropdown-font-size: var(--dekohop-text-menu, 14px);
  --dekohop-header-dropdown-line-height: 1.45;
  --dekohop-header-dropdown-radius: 12px;
  --dekohop-header-dropdown-shadow: 0 14px 30px rgba(33, 72, 58, 0.12);
  --dekohop-header-dropdown-padding: 6px 0;
  --dekohop-header-dropdown-row-background: transparent;
  --dekohop-header-dropdown-row-hover-background: #d7ece1;
  --dekohop-header-dropdown-row-hover-text-color: #1f4d38;
  --dekohop-header-dropdown-row-radius: 8px;
  --dekohop-header-dropdown-row-padding: 9px 14px;
  --dekohop-header-dropdown-row-margin: 2px 6px;
  --dekohop-header-cart-empty-font-size: var(--dekohop-text-menu, 14px);
  --dekohop-header-hover-dropdown-enabled: true;
  --dekohop-header-hover-dropdown-open-delay: 0ms;
  --dekohop-header-hover-dropdown-close-delay: 120ms;

  /* 04 - HEADER KATMAN SIRASI
   * root-layer: Header alanını ana menü ve sayfa içeriğinin üstünde tutar.
   * account-dropdown-layer: Kullanıcı açılır menüsünün katman sırası; en üsttedir.
   * cart-dropdown-layer: Sepet açılır menüsünün katman sırası; kullanıcıdan sonra gelir.
   * Bu değerler ana menü ve sayfa filtrelerinin katman değerlerinden büyük kalmalıdır.
   */
  --dekohop-header-root-layer: 4000;
  --dekohop-header-account-dropdown-layer: 4300;
  --dekohop-header-cart-dropdown-layer: 4200;
  --dekohop-header-search-dropdown-layer: 4100; /* Akıllı arama; sepetten sonra, ana menü ve filtrelerden önce. */

  /* ARAMA ALANI: ORTAK BOYUT VE KOŞE AYARLARI */
  --dekohop-search-height: 46px;
  --dekohop-search-radius: 999px;
  --dekohop-search-input-left-top-radius: var(--dekohop-search-radius);
  --dekohop-search-input-left-bottom-radius: var(--dekohop-search-radius);
  --dekohop-search-button-right-top-radius: var(--dekohop-search-radius);
  --dekohop-search-button-right-bottom-radius: var(--dekohop-search-radius);

  /* ARAMA YAZI ALANI: NORMAL DURUM */
  --dekohop-search-input-background: var(--dekohop-color-surface);
  --dekohop-search-input-text-color: var(--dekohop-color-ink);
  --dekohop-search-input-placeholder-color: #7a7d86;
  --dekohop-search-input-border-width: 1px;
  --dekohop-search-input-border-color: var(--dekohop-color-border);
  --dekohop-search-input-shadow: var(--dekohop-shadow-small);

  /* ARAMA YAZI ALANI: TIKLANMIS / FOCUS DURUMU */
  --dekohop-search-input-focus-background: #f5fbf8;
  --dekohop-search-input-focus-border-color: #9fcbb8;
  --dekohop-search-input-focus-shadow: 0 0 0 3px rgba(159, 203, 184, 0.25);

  /* SAGDAKI ARAMA SIMGESI DUGMESI: NORMAL DURUM */
  --dekohop-search-button-background: var(--dekohop-color-surface);
  --dekohop-search-button-icon-color: var(--dekohop-color-ink);
  --dekohop-search-button-border-color: var(--dekohop-color-border);
  --dekohop-search-button-shadow: var(--dekohop-shadow-small);

  /* SAGDAKI ARAMA SIMGESI DUGMESI: HOVER / FOCUS DURUMU */
  --dekohop-search-button-hover-background: #e7f4ed;
  --dekohop-search-button-hover-icon-color: #2b684f;
  --dekohop-search-button-hover-border-color: #9fcbb8;
  --dekohop-search-button-hover-shadow: 0 5px 16px rgba(43, 104, 79, 0.14);

  /* 05 - AKILLI ARAMA AÇILIR PANELİ: BOYUT VE YERLEŞİM
   * panel-horizontal-expansion: Panelin arama çubuğundan iki yana taşma miktarı.
   *   0px paneli arama çubuğuyla tam aynı genişlikte tutar. Örneğin 40px,
   *   paneli hem sola hem sağa 40px genişletir.
   * panel-top-gap: Arama çubuğu ile açılır panel arasındaki dikey boşluk.
   * panel-max-height: Panel gövdesinin izin verilen en büyük yüksekliği.
   * category-column-width: Soldaki kategori sütununun genişliği.
   * product-column-count: Sağdaki ürün sütun sayısı; masaüstünde 2 olarak kalır.
   * product-scroll-height: Sağ ürün alanının kaydırılabilir yüksekliği.
   */
  --dekohop-search-button-width: 50px;
  --dekohop-search-panel-horizontal-expansion: 200px;
  --dekohop-search-panel-top-gap: 9px;
  --dekohop-search-panel-max-height: 480px;
  --dekohop-search-category-column-width: 26.35%;
  --dekohop-search-product-column-count: 2;
  --dekohop-search-product-scroll-height: 368px;
  --dekohop-search-panel-column-gap: 14px;
  --dekohop-search-product-grid-gap: 10px;
  --dekohop-search-product-image-size: 74px;

  /* 06 - AKILLI ARAMA PANELİ: RENK, BORDER, RADIUS VE GÖLGE */
  --dekohop-search-panel-background: #ffffff;
  --dekohop-search-panel-border-width: 1px;
  --dekohop-search-panel-border-color: #cfe0d8;
  --dekohop-search-panel-radius: 16px;
  --dekohop-search-panel-shadow: 0 18px 38px rgba(31, 65, 53, 0.16);
  --dekohop-search-panel-padding: 14px;
  --dekohop-search-category-divider-color: #e0ebe6;
  --dekohop-search-category-column-background: #f4f8f6;
  --dekohop-search-category-column-radius: 12px;
  --dekohop-search-category-column-padding: 10px 14px 10px 10px;
  --dekohop-search-heading-color: #203e34;
  --dekohop-search-text-color: #253b34;
  --dekohop-search-muted-color: #6f7e78;
  --dekohop-search-price-color: #172d26;
  --dekohop-search-special-color: #b4323d;
  --dekohop-search-result-background: #ffffff;
  --dekohop-search-result-border-color: #e2ebe7;
  --dekohop-search-result-hover-background: #edf8f3;
  --dekohop-search-result-hover-border-color: #abd1bf;
  --dekohop-search-result-radius: 11px;
  /*
   * KATEGORI ONIZLEME SECIMI
   * Kategori uzerine gelince sagdaki urunler o kategoriye gecis yapar.
   * active-category-background: Secili kategori satirinin soft arka plani.
   * active-category-border-color: Secili satirin ince cercevesi.
   * active-category-marker-color: Satirin solundan iceri dogru gelen vurgu rengi.
   * active-category-marker-thickness: Sol vurgu seridinin kalinligi.
   * active-category-radius: Secili satirin kose yuvarlakligi.
   * active-category-shadow: Secili satirin hafif dis golgesi.
   */
  --dekohop-search-active-category-background: #fff8f0;
  /* Sag tarafta mouse/klavye ile secilen urun karti, secili kategoriyle ayni soft rengi kullanir. */
  --dekohop-search-selected-product-background: var(--dekohop-search-active-category-background);
  --dekohop-search-active-category-border-color: transparent;
  --dekohop-search-active-category-marker-color: #b51f2e;
  --dekohop-search-active-category-marker-thickness: 4px;
  --dekohop-search-active-category-radius: 12px;
  --dekohop-search-active-category-shadow: 0 7px 18px rgba(69, 43, 36, 0.09);
  --dekohop-search-image-radius: 9px;
  --dekohop-search-all-results-background: #e7f4ed;
  --dekohop-search-all-results-hover-background: #d5ebdf;

  /* 07 - AKILLI ARAMA PANELİ: YAZI VE İÇ BOŞLUKLAR */
  --dekohop-search-heading-font-size: 15px;
  --dekohop-search-category-font-size: 13px;
  --dekohop-search-product-name-font-size: 13px;
  --dekohop-search-product-meta-font-size: 11px;
  --dekohop-search-product-price-font-size: 13px;
  --dekohop-search-state-font-size: 12px;
  --dekohop-search-category-row-padding: 9px 10px;
  --dekohop-search-product-card-padding: 8px;
  --dekohop-search-all-results-height: 40px;
  --dekohop-search-all-results-top-gap: 8px;
  --dekohop-search-all-results-bottom-gap: 5px;
  --dekohop-search-all-results-padding: 0 14px;

}
/* DEKOHOP-EDITABLE-SETTINGS-END */

/* DEKOHOP-COMMON-DESKTOP-RULES-START */

/*
 * MASAÜSTÜ HEADER DIŞ BOŞLUKLARI VE HEADER–ANA MENÜ AYIRICI ÇİZGİSİ
 * Değerler yukarıdaki 01 ve 02 numaralı Türkçe ayar kategorilerinden değiştirilir.
 */
header.dekohop-site-header {
  position: relative;
  z-index: var(--dekohop-header-root-layer);
  padding:
    var(--dekohop-header-top-space)
    0
    var(--dekohop-header-bottom-space);
  border-bottom-width: var(--dekohop-header-main-menu-divider-width);
  border-bottom-style: var(--dekohop-header-main-menu-divider-style);
  border-bottom-color: var(--dekohop-header-main-menu-divider-color);
}

/*
 * MASAUSTU HEADER DORT ELEMENT DENGESI
 * Logo solda, hesap/favori/sepet sagda; arama sayfanin tam merkezindedir.
 * Telefon + WhatsApp, logo ile arama arasindaki sol alanda dengeli durur.
 * Container daralirsa mevcut guvenli OpenCart yerlesimi korunur; mobil turu
 * bu dosyada tanimlanmaz.
 */
.dekohop-site-header > .container {
  container-name: dekohop-header-container;
  container-type: inline-size;
}

@container dekohop-header-container (min-width: 1080px) {
  .dekohop-site-header .dekohop-header-main {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(var(--dekohop-header-center-search-min-width), var(--dekohop-header-center-search-width))
      minmax(0, 1fr);
    column-gap: var(--dekohop-header-center-column-gap);
  }

  .dekohop-site-header .dekohop-header-brand {
    grid-column: 1;
    grid-row: 1;
    width: min(100%, var(--dekohop-header-brand-max-width));
    justify-self: start;
  }

  .dekohop-site-header .dekohop-header-brand #logo img {
    max-width: 100%;
  }

  .dekohop-site-header .dekohop-header-contact {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    transform: translateX(var(--dekohop-header-contact-center-shift));
  }

  .dekohop-site-header .dekohop-header-search {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    justify-self: center;
  }

  .dekohop-site-header .dekohop-header-actions {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
}

/* Tarayici yakinlastirma korumasi acikken eski dort kolonlu kural geri gelmesin. */
html.dekohop-desktop-browser-zoom-lock .dekohop-header-main {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(var(--dekohop-header-center-search-min-width), var(--dekohop-header-center-search-width))
    minmax(0, 1fr) !important;
  column-gap: var(--dekohop-header-center-column-gap) !important;
}

html.dekohop-desktop-browser-zoom-lock .dekohop-header-brand {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: min(100%, var(--dekohop-header-brand-max-width));
  justify-self: start !important;
}

html.dekohop-desktop-browser-zoom-lock .dekohop-header-contact {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  transform: translateX(var(--dekohop-header-contact-center-shift));
}

html.dekohop-desktop-browser-zoom-lock .dekohop-header-search {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100%;
  justify-self: center;
}

html.dekohop-desktop-browser-zoom-lock .dekohop-header-actions {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end;
}

/*
 * TELEFON VE WHATSAPP VEKTOR SIMGELERI
 * Dosya secimi header.twig basindadir. Burada yalniz boyut ve davranis vardir.
 * SVG dosyasinin kendi renkleri ve oranlari aynen korunur.
 */
.dekohop-vector-icon {
  display: inline-block;
  flex: 0 0 auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}

.dekohop-vector-icon--phone {
  width: var(--dekohop-header-phone-icon-size);
  height: var(--dekohop-header-phone-icon-size);
}

.dekohop-vector-icon--whatsapp {
  width: var(--dekohop-header-whatsapp-icon-size);
  height: var(--dekohop-header-whatsapp-icon-size);
}

.dekohop-utility-links .dekohop-vector-icon {
  width: 16px;
  height: 16px;
}

/*
 * Yalniz telefon ve WhatsApp dugmelerinin hover davranisi.
 * Siyah arka plan kullanmaz; hafif yukari cikar ve buyur.
 */
.dekohop-site-header .dekohop-header-contact > .dekohop-contact-button:hover,
.dekohop-site-header .dekohop-header-contact > .dekohop-contact-button:focus {
  background: var(--dekohop-header-contact-hover-background);
  background-image: none;
  box-shadow: var(--dekohop-shadow-card);
  transform: translateY(-1px) scale(var(--dekohop-header-contact-hover-scale));
}

.dekohop-site-header .dekohop-header-contact > .dekohop-contact-phone:hover,
.dekohop-site-header .dekohop-header-contact > .dekohop-contact-phone:focus {
  border-color: var(--dekohop-color-phone);
  color: var(--dekohop-color-phone);
}

.dekohop-site-header .dekohop-header-contact > .dekohop-contact-whatsapp:hover,
.dekohop-site-header .dekohop-header-contact > .dekohop-contact-whatsapp:focus {
  border-color: var(--dekohop-color-whatsapp);
  color: var(--dekohop-color-whatsapp);
}

/*
 * HESAP - FAVORILER - SEPET DUGMELERI
 * Ortak radius, border, golge ve animasyon ayarlari yukaridaki degiskenlerdedir.
 */
.dekohop-site-header .dekohop-header-actions .dekohop-action-button,
.dekohop-site-header .dekohop-header-actions #cart > .btn {
  box-sizing: border-box;
  border-width: var(--dekohop-header-action-border-width);
  border-style: solid;
  border-color: var(--dekohop-header-action-border-color);
  border-radius: var(--dekohop-header-action-radius);
  background: var(--dekohop-header-action-background);
  background-image: none;
  color: var(--dekohop-header-action-icon-color);
  box-shadow: var(--dekohop-header-action-shadow);
  transition:
    color var(--dekohop-transition),
    border-color var(--dekohop-transition),
    background-color var(--dekohop-transition),
    box-shadow var(--dekohop-transition),
    transform var(--dekohop-transition);
}

.dekohop-site-header .dekohop-header-actions .dekohop-action-button:hover,
.dekohop-site-header .dekohop-header-actions .dekohop-action-button:focus,
.dekohop-site-header .dekohop-header-actions #cart > .btn:hover,
.dekohop-site-header .dekohop-header-actions #cart > .btn:focus,
.dekohop-site-header .dekohop-header-actions #cart.open > .btn {
  background-image: none;
  box-shadow: var(--dekohop-header-action-hover-shadow);
  transform: translateY(var(--dekohop-header-action-hover-lift)) scale(var(--dekohop-header-action-hover-scale));
}

/* Hesap dugmesi */
.dekohop-site-header .dekohop-header-actions .dekohop-action-account:hover,
.dekohop-site-header .dekohop-header-actions .dekohop-action-account:focus,
.dekohop-site-header .dekohop-header-actions .dropdown.open > .dekohop-action-account {
  border-color: var(--dekohop-header-account-hover-border-color);
  background: var(--dekohop-header-account-hover-background);
  color: var(--dekohop-header-account-hover-icon-color);
}

/* Favoriler dugmesi */
.dekohop-site-header .dekohop-header-actions .dekohop-action-wishlist:hover,
.dekohop-site-header .dekohop-header-actions .dekohop-action-wishlist:focus {
  border-color: var(--dekohop-header-wishlist-hover-border-color);
  background: var(--dekohop-header-wishlist-hover-background);
  color: var(--dekohop-header-wishlist-hover-icon-color);
}

/* Sepet dugmesi ve ikonun geometrik merkezlemesi */
.dekohop-site-header .dekohop-header-actions #cart > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  text-align: center;
}

.dekohop-site-header .dekohop-header-actions #cart > .btn:hover,
.dekohop-site-header .dekohop-header-actions #cart > .btn:focus,
.dekohop-site-header .dekohop-header-actions #cart.open > .btn {
  border-color: var(--dekohop-header-cart-hover-border-color);
  background: var(--dekohop-header-cart-hover-background);
  color: var(--dekohop-header-cart-hover-icon-color);
}

.dekohop-site-header .dekohop-header-actions #cart > .btn .fa {
  display: block;
  margin: 0;
  line-height: 1;
}

/*
 * HESAP VE SEPET AÇILIR MENÜLERİ
 * İki kutu aynı arka plan, yazı, çerçeve, radius ve gölge profilini kullanır.
 * Bütün görsel değerler yukarıdaki 03 numaralı Türkçe ayar kategorisindedir.
 */
.dekohop-site-header .dekohop-header-actions .dropdown-menu,
.dekohop-site-header .dekohop-header-actions #cart .dropdown-menu {
  padding: var(--dekohop-header-dropdown-padding);
  border: 1px solid var(--dekohop-header-dropdown-border-color);
  border-radius: var(--dekohop-header-dropdown-radius);
  background: var(--dekohop-header-dropdown-background);
  background-image: none;
  color: var(--dekohop-header-dropdown-text-color);
  font-size: var(--dekohop-header-dropdown-font-size);
  line-height: var(--dekohop-header-dropdown-line-height);
  box-shadow: var(--dekohop-header-dropdown-shadow);
}

.dekohop-site-header .dekohop-header-actions > .dekohop-action-list > li.dropdown > .dropdown-menu {
  z-index: var(--dekohop-header-account-dropdown-layer);
}

.dekohop-site-header .dekohop-header-actions > .dekohop-action-list > li.dropdown.open {
  position: relative;
  z-index: var(--dekohop-header-account-dropdown-layer);
}

.dekohop-site-header .dekohop-header-actions #cart .dropdown-menu {
  z-index: var(--dekohop-header-cart-dropdown-layer);
}

.dekohop-site-header .dekohop-header-actions #cart.open {
  position: relative;
  z-index: var(--dekohop-header-cart-dropdown-layer);
}

.dekohop-site-header .dekohop-header-actions .dropdown-menu > li > a {
  margin: var(--dekohop-header-dropdown-row-margin);
  padding: var(--dekohop-header-dropdown-row-padding);
  border-radius: var(--dekohop-header-dropdown-row-radius);
  background: var(--dekohop-header-dropdown-row-background);
  background-image: none;
  color: var(--dekohop-header-dropdown-text-color);
  font-size: var(--dekohop-header-dropdown-font-size);
  line-height: var(--dekohop-header-dropdown-line-height);
}

.dekohop-site-header .dekohop-header-actions .dropdown-menu > li > a:hover,
.dekohop-site-header .dekohop-header-actions .dropdown-menu > li > a:focus,
.dekohop-site-header .dekohop-header-actions #cart .dropdown-menu a:hover,
.dekohop-site-header .dekohop-header-actions #cart .dropdown-menu a:focus {
  background: var(--dekohop-header-dropdown-row-hover-background);
  background-image: none;
  color: var(--dekohop-header-dropdown-row-hover-text-color);
  text-decoration: none;
}

.dekohop-site-header .dekohop-header-actions #cart .dropdown-menu,
.dekohop-site-header .dekohop-header-actions #cart .dropdown-menu p,
.dekohop-site-header .dekohop-header-actions #cart .dropdown-menu td,
.dekohop-site-header .dekohop-header-actions #cart .dropdown-menu a {
  color: var(--dekohop-header-dropdown-text-color);
  font-size: var(--dekohop-header-dropdown-font-size);
  line-height: var(--dekohop-header-dropdown-line-height);
}

.dekohop-site-header .dekohop-header-actions #cart .dropdown-menu li > p {
  font-size: var(--dekohop-header-cart-empty-font-size);
}

.dekohop-site-header .dekohop-header-actions #cart-total {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * ARAMA YAZI ALANI VE SAG SIMGE DUGMESI
 * Tum renk, border, radius ve golge degerleri yukaridaki ARAMA ALANI
 * degiskenlerinden tek tek duzenlenebilir.
 */
.dekohop-site-header #search .input-lg {
  box-sizing: border-box;
  border-width: var(--dekohop-search-input-border-width);
  border-style: solid;
  border-color: var(--dekohop-search-input-border-color);
  border-right-width: 0;
  border-radius:
    var(--dekohop-search-input-left-top-radius)
    0
    0
    var(--dekohop-search-input-left-bottom-radius);
  background: var(--dekohop-search-input-background);
  color: var(--dekohop-search-input-text-color);
  box-shadow: var(--dekohop-search-input-shadow);
  transition:
    color var(--dekohop-transition),
    border-color var(--dekohop-transition),
    background-color var(--dekohop-transition),
    box-shadow var(--dekohop-transition);
}

.dekohop-site-header #search .input-lg::placeholder {
  color: var(--dekohop-search-input-placeholder-color);
  opacity: 1;
}

.dekohop-site-header #search .input-lg:focus {
  border-color: var(--dekohop-search-input-focus-border-color);
  border-right-width: 0;
  background: var(--dekohop-search-input-focus-background);
  color: var(--dekohop-search-input-text-color);
  box-shadow: var(--dekohop-search-input-focus-shadow);
  outline: 0;
}

.dekohop-site-header #search .btn-lg {
  width: var(--dekohop-search-button-width);
  min-width: var(--dekohop-search-button-width);
  height: var(--dekohop-search-height);
  padding: 0;
  border-color: var(--dekohop-search-button-border-color);
  border-left-width: 0;
  border-radius:
    0
    var(--dekohop-search-button-right-top-radius)
    var(--dekohop-search-button-right-bottom-radius)
    0;
  background: var(--dekohop-search-button-background);
  background-image: none;
  color: var(--dekohop-search-button-icon-color);
  box-shadow: var(--dekohop-search-button-shadow);
  text-shadow: none;
  transition:
    color var(--dekohop-transition),
    border-color var(--dekohop-transition),
    background-color var(--dekohop-transition),
    box-shadow var(--dekohop-transition);
}

.dekohop-site-header #search .btn-lg:hover,
.dekohop-site-header #search .btn-lg:focus {
  border-color: var(--dekohop-search-button-hover-border-color);
  border-left-width: 0;
  background: var(--dekohop-search-button-hover-background);
  background-image: none;
  color: var(--dekohop-search-button-hover-icon-color);
  box-shadow: var(--dekohop-search-button-hover-shadow);
  transform: none;
  outline: 0;
}

/*
 * AKILLI ARAMA AÇILIR SONUÇ PANELİ
 * Katman sırası: kullanıcı > sepet > arama > ana menü > sayfa filtreleri.
 * Panel başlangıçta arama çubuğuyla aynı genişliktedir. İki yana eşit
 * büyütmek için yalnız --dekohop-search-panel-horizontal-expansion değişir.
 */
.dekohop-site-header .dekohop-header-search,
.dekohop-site-header .dekohop-smart-search {
  position: relative;
  overflow: visible;
}

.dekohop-site-header .dekohop-smart-search {
  z-index: var(--dekohop-header-search-dropdown-layer);
}

.dekohop-site-header .dekohop-smart-search__panel[hidden] {
  display: none !important;
}

.dekohop-site-header .dekohop-smart-search__panel {
  position: absolute;
  top: calc(var(--dekohop-search-height) + var(--dekohop-search-panel-top-gap));
  left: calc(-1 * var(--dekohop-search-panel-horizontal-expansion));
  z-index: var(--dekohop-header-search-dropdown-layer);
  display: block;
  width: calc(100% + (2 * var(--dekohop-search-panel-horizontal-expansion)));
  max-height: var(--dekohop-search-panel-max-height);
  padding: var(--dekohop-search-panel-padding);
  overflow: hidden;
  border-width: var(--dekohop-search-panel-border-width);
  border-style: solid;
  border-color: var(--dekohop-search-panel-border-color);
  border-radius: var(--dekohop-search-panel-radius);
  background: var(--dekohop-search-panel-background);
  color: var(--dekohop-search-text-color);
  box-shadow: var(--dekohop-search-panel-shadow);
}

.dekohop-site-header .dekohop-smart-search__columns {
  display: grid;
  grid-template-columns: minmax(0, var(--dekohop-search-category-column-width)) minmax(0, 1fr);
  gap: var(--dekohop-search-panel-column-gap);
  min-width: 0;
}

.dekohop-site-header .dekohop-smart-search__categories {
  box-sizing: border-box;
  min-width: 0;
  padding: var(--dekohop-search-category-column-padding);
  border-right: 1px solid var(--dekohop-search-category-divider-color);
  border-radius: var(--dekohop-search-category-column-radius);
  background: var(--dekohop-search-category-column-background);
}

.dekohop-site-header .dekohop-smart-search__heading {
  margin: 0 0 9px;
  color: var(--dekohop-search-heading-color);
  font-size: var(--dekohop-search-heading-font-size);
  font-weight: 600;
  line-height: 1.35;
}

.dekohop-site-header .dekohop-smart-search__category-list {
  max-height: var(--dekohop-search-product-scroll-height);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.dekohop-site-header .dekohop-smart-search__category {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin: 0 0 4px;
  padding: var(--dekohop-search-category-row-padding);
  border: 1px solid transparent;
  border-radius: var(--dekohop-search-result-radius);
  background: var(--dekohop-search-result-background);
  color: var(--dekohop-search-text-color);
  font-size: var(--dekohop-search-category-font-size);
  line-height: 1.35;
  text-decoration: none;
}

.dekohop-site-header .dekohop-smart-search__category:hover,
.dekohop-site-header .dekohop-smart-search__category:focus,
.dekohop-site-header .dekohop-smart-search__category.is-keyboard-selected {
  border-color: var(--dekohop-search-result-hover-border-color);
  background: var(--dekohop-search-result-hover-background);
  color: var(--dekohop-search-text-color);
  text-decoration: none;
  outline: 0;
}

.dekohop-site-header .dekohop-smart-search__category.is-preview-active {
  border-color: var(--dekohop-search-active-category-border-color);
  border-radius: var(--dekohop-search-active-category-radius);
  background: var(--dekohop-search-active-category-background);
  box-shadow:
    inset var(--dekohop-search-active-category-marker-thickness) 0 0 var(--dekohop-search-active-category-marker-color),
    var(--dekohop-search-active-category-shadow);
  transform: translateX(2px);
}

.dekohop-site-header .dekohop-smart-search__category-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dekohop-site-header .dekohop-smart-search__products {
  min-width: 0;
}

.dekohop-site-header .dekohop-smart-search__product-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.dekohop-site-header .dekohop-smart-search__progress {
  color: var(--dekohop-search-muted-color);
  font-size: var(--dekohop-search-state-font-size);
  line-height: 1.35;
}

.dekohop-site-header .dekohop-smart-search__product-scroll {
  height: var(--dekohop-search-product-scroll-height);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.dekohop-site-header .dekohop-smart-search__product-grid {
  display: grid;
  grid-template-columns: repeat(var(--dekohop-search-product-column-count), minmax(0, 1fr));
  gap: var(--dekohop-search-product-grid-gap);
  min-width: 0;
}

.dekohop-site-header .dekohop-smart-search__product-card {
  display: grid;
  grid-template-columns: var(--dekohop-search-product-image-size) minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
  padding: var(--dekohop-search-product-card-padding);
  border: 1px solid var(--dekohop-search-result-border-color);
  border-radius: var(--dekohop-search-result-radius);
  background: var(--dekohop-search-result-background);
  color: var(--dekohop-search-text-color);
  text-decoration: none;
}

.dekohop-site-header .dekohop-smart-search__product-card:hover,
.dekohop-site-header .dekohop-smart-search__product-card:focus,
.dekohop-site-header .dekohop-smart-search__product-card.is-keyboard-selected {
  border-color: var(--dekohop-search-result-hover-border-color);
  background: var(--dekohop-search-selected-product-background);
  color: var(--dekohop-search-text-color);
  text-decoration: none;
  outline: 0;
}

.dekohop-site-header .dekohop-smart-search__product-image {
  display: block;
  width: var(--dekohop-search-product-image-size);
  height: var(--dekohop-search-product-image-size);
  object-fit: contain;
  border-radius: var(--dekohop-search-image-radius);
  background: #ffffff;
}

.dekohop-site-header .dekohop-smart-search__product-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.dekohop-site-header .dekohop-smart-search__product-name {
  display: -webkit-box;
  overflow: hidden;
  color: var(--dekohop-search-text-color);
  font-size: var(--dekohop-search-product-name-font-size);
  font-weight: 600;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.dekohop-site-header .dekohop-smart-search__product-meta {
  overflow: hidden;
  color: var(--dekohop-search-muted-color);
  font-size: var(--dekohop-search-product-meta-font-size);
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dekohop-site-header .dekohop-smart-search__product-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  font-size: var(--dekohop-search-product-price-font-size);
  line-height: 1.25;
}

.dekohop-site-header .dekohop-smart-search__product-price,
.dekohop-site-header .dekohop-smart-search__product-special {
  color: var(--dekohop-search-price-color);
  font-weight: 700;
}

.dekohop-site-header .dekohop-smart-search__product-old-price {
  color: var(--dekohop-search-special-color);
  text-decoration: line-through;
}

.dekohop-site-header .dekohop-smart-search__product-special {
  color: var(--dekohop-search-price-color);
}

.dekohop-site-header .dekohop-smart-search__state,
.dekohop-site-header .dekohop-smart-search__empty {
  margin: 8px 0 0;
  color: var(--dekohop-search-muted-color);
  font-size: var(--dekohop-search-state-font-size);
  line-height: 1.4;
  text-align: center;
}

.dekohop-site-header .dekohop-smart-search__all-results {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--dekohop-search-all-results-height);
  margin:
    var(--dekohop-search-all-results-top-gap)
    0
    var(--dekohop-search-all-results-bottom-gap);
  padding: var(--dekohop-search-all-results-padding);
  border-top: 1px solid var(--dekohop-search-panel-border-color);
  border-radius: 0 0 var(--dekohop-search-panel-radius) var(--dekohop-search-panel-radius);
  background: var(--dekohop-search-all-results-background);
  color: var(--dekohop-search-text-color);
  font-size: var(--dekohop-search-category-font-size);
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
}

.dekohop-site-header .dekohop-smart-search__all-results:hover,
.dekohop-site-header .dekohop-smart-search__all-results:focus,
.dekohop-site-header .dekohop-smart-search__all-results.is-keyboard-selected {
  background: var(--dekohop-search-all-results-hover-background);
  color: var(--dekohop-search-text-color);
  text-decoration: none;
  outline: 0;
}

/*
 * Daha ayrıntılı header denemeleri gerektiğinde yalnız header seçicileri
 * bu satırın altına eklenecek. Böylece diğer sayfa bileşenleri etkilenmeyecek.
 */
/* DEKOHOP-COMMON-DESKTOP-RULES-END */

/* DEKOHOP-RESPONSIVE-RULES-START */
/* BU ALAN 2. TUR ICIN REZERVEDIR.
 * Butun masaustu sayfalari tamamlanmadan buraya yeni tasarim yazilmaz.
 * Akiskan olculer + container query + pointer/hover capability query kullanilir.
 * px tabanli cihaz esigi veya isletim sistemi algilama kullanilmaz.
 * Masaustu kurallari bu alanin disindan degistirilemez.
 */
/* DEKOHOP-RESPONSIVE-RULES-END */