/* Chisfis static — helper styles for vanilla-JS interactivity */

/* panels that JS opens/closes get a smooth fade/slide like the original */
[data-state="open"].transition,
.absolute.transition {
  transition: opacity .15s ease, transform .15s ease;
}

/* mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
}
.mobile-menu[data-state="open"] {
  display: block;
}
.mobile-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  transition: opacity .2s ease;
}
.mobile-menu[data-state="open"] .mobile-menu__backdrop {
  opacity: 1;
}
.mobile-menu__panel {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  height: 100%;
  width: min(26rem, 92vw);
  background: #fff;
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .18);
  transform: translateX(100%);
  transition: transform .25s ease;
}
/* flex çocuklar içeriği kısalmasın — panel kaydırılır */
.mobile-menu__panel > * {
  flex-shrink: 0;
}
/* --- Kademeli (stagger) fade: panel açılırken öğeler sırayla belirir.
   transform panel'i kaydırdığından öğelerde yalnızca opacity animasyonu
   kullanılır; slide-in bitişinde (.25s) tetiklenir. --- */
.mobile-menu__panel > * {
  opacity: 0;
}
.mobile-menu[data-state="open"] .mobile-menu__panel > * {
  animation: mm-stagger-in .32s ease-out forwards;
}
.mobile-menu[data-state="open"] .mobile-menu__panel > *:nth-child(1) { animation-delay: .18s; }
.mobile-menu[data-state="open"] .mobile-menu__panel > *:nth-child(2) { animation-delay: .23s; }
.mobile-menu[data-state="open"] .mobile-menu__panel > *:nth-child(3) { animation-delay: .28s; }
.mobile-menu[data-state="open"] .mobile-menu__panel > *:nth-child(4) { animation-delay: .33s; }
.mobile-menu[data-state="open"] .mobile-menu__panel > *:nth-child(5) { animation-delay: .38s; }
.mobile-menu[data-state="open"] .mobile-menu__panel > *:nth-child(6) { animation-delay: .43s; }
.mobile-menu[data-state="open"] .mobile-menu__panel > *:nth-child(7) { animation-delay: .48s; }
.mobile-menu[data-state="open"] .mobile-menu__panel > *:nth-child(8) { animation-delay: .53s; }
.mobile-menu[data-state="open"] .mobile-menu__panel > *:nth-child(9) { animation-delay: .58s; }
.mobile-menu[data-state="open"] .mobile-menu__panel > *:nth-child(10) { animation-delay: .63s; }
@keyframes mm-stagger-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Kullanıcı hareket azaltmayı tercih ettiyse animasyonları kapat */
@media (prefers-reduced-motion: reduce) {
  .mobile-menu__panel > * {
    opacity: 1;
    animation: none !important;
  }
  .mobile-menu__panel {
    transition: none;
  }
}
html[dir="rtl"] .mobile-menu__panel {
  transform: none;
}
.mobile-menu[data-state="open"] .mobile-menu__panel {
  transform: translateX(0);
}
/* --- Kapanış: slide-out + fade -----------------------------------------
   Şablon çekmeceyi kapanışta anında `display: none` yapıyordu; açılıştaki
   slide-in'in tersi hiç görünmüyordu. Artık JS `mm-closing` sınıfını ekler
   ve `data-state`i hemen `closed` yapar (bnav göstergesi beklemez); panel
   MM_CLOSE_MS (280 ms) boyunca görünür kalıp sağa kayarak ve sönerek kapanır.

   Çocuk kuralı neden gerekli: çocuklar `opacity: 0` temellidir ve
   görünürlüklerini `[data-state="open"]` altındaki `forwards` dolgulu
   stagger animasyonundan alırlar. `data-state` anında `closed` olduğu için
   o animasyon kalkar; kapanış boyunca opacity 1'de tutulmaları gerekir,
   aksi halde panel boş görünerek kayardı (panel sönmesi onları zaten
   karartıyor). */
.mobile-menu.mm-closing {
  display: block;
  pointer-events: none; /* kayarken tıklama yakalanmasın */
}
.mobile-menu.mm-closing .mobile-menu__backdrop {
  opacity: 0;
  transition: opacity .22s ease-in;
}
.mobile-menu.mm-closing .mobile-menu__panel {
  opacity: 0;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4, 0, 1, 1), opacity .22s ease-in;
}
html[dir="rtl"] .mobile-menu.mm-closing .mobile-menu__panel {
  transform: translateX(-100%);
}
.mobile-menu.mm-closing .mobile-menu__panel > * {
  opacity: 1;
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu.mm-closing .mobile-menu__backdrop,
  .mobile-menu.mm-closing .mobile-menu__panel {
    transition: none;
  }
}
.dark .mobile-menu__panel {
  background: var(--color-neutral-900, #171717);
}
/* --- üst satır: logo + kapat --- */
.mm-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.mm-logo svg,
.mm-logo img {
  height: 44px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}
/* klonlanan logoda açık/koyu varyant çakışmasını engelle */
.mm-logo .dark\:hidden { display: block !important; }
.dark .mm-logo .dark\:hidden { display: none !important; }
.mm-logo .dark\:block { display: none !important; }
.dark .mm-logo .dark\:block { display: block !important; }
.mm-logo .light\:hidden,
.mm-logo .light\:block { display: none !important; }
.mobile-menu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  border: 1px solid var(--color-neutral-200, #e5e5e5);
  background: #fff;
  cursor: pointer;
  color: var(--color-neutral-700, #404040);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  flex-shrink: 0;
}
.mobile-menu__close svg {
  width: 1.25rem;
  height: 1.25rem;
}
.dark .mobile-menu__close {
  background: var(--color-neutral-800, #262626);
  border-color: var(--color-neutral-700, #404040);
  color: var(--color-neutral-100, #f5f5f5);
}
.mobile-menu__brand {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary-600, #e61e4d);
  margin: 0;
}
.mobile-menu__theme {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 .25rem .5rem;
  padding: .5rem .75rem;
  border-radius: .5rem;
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--color-neutral-200, #e5e5e5);
  background: transparent;
  color: var(--color-neutral-800, #262626);
}
.dark .mobile-menu__theme {
  border-color: var(--color-neutral-700, #404040);
  color: var(--color-neutral-100, #f5f5f5);
}
.mobile-menu__theme:hover {
  background: var(--color-neutral-100, #f5f5f5);
}
.dark .mobile-menu__theme:hover {
  background: var(--color-neutral-800, #262626);
}

/* --- Karanlık tema vurgu eşiği (parite) ---------------------------------
   Ölçüm (gerçek tarayıcı, computed style + WCAG): karanlık yüzeylerde
   `--color-primary-500` (#6366f1) metin/ikon için **3.3:1**, `--color-primary-600`
   (#4f46e5) **1.6:1** veriyor — ikisi de AA eşiğinin (4.5:1) altında.
   Aydınlık temada aynı vurgular primary-600 ile 6.0–6.3:1 ve sorun yok; yani
   bu bir karanlık-tema sapmasıydı.

   Parite için karanlık vurgu tek yerden tanımlanır: `--color-primary-300`
   (#a5b4fc) → neutral-800 üzerinde 7.6:1, neutral-700 üzerinde 5.5:1.
   Yalnız METİN/İKON renkleri bu token'a bağlanır; zemin katmanları
   (`color-mix` %14–16 primary-500) ve beyaz ikonlu dolu rozetler değişmez. */
.dark .mobile-menu {
  --mm-accent: var(--color-primary-300, #a5b4fc);
}

/* --- ikinci satır: telefon, whatsapp, globe/kod, bildirim, hesap --- */
.mm-actions {
  display: flex;
  align-items: center;
  gap: .625rem;
  /* Dil/para popover'ı (`.mm-pop`) bu satırın İÇİNDE ve `top: calc(100% + .5rem)`
     ile konumlanır; yani bu satır onun containing block'u olur.

     Neden z-index şart: `mm-stagger-in` animasyonu (`transform` + `forwards`
     dolgusu) her panel çocuğunu hem containing block hem STACKING CONTEXT
     yapıyor. Bu yüzden `.mm-pop`'un kendi `z-index: 20`'si bu satırın içinde
     hapsolur ve sonraki kardeşler (arama kutusu, `.mm-cats-label`, accordion'lar)
     popover'ın üstüne boyanır — seçenekler tıklanamaz. Satıra pozitif z-index
     verilince alt ağaç statik kardeşlerin tamamının üstünde boyanır. */
  position: relative;
  z-index: 15;
}
.mm-flex {
  flex: 1;
}
.mm-ico {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  border: 1px solid var(--color-neutral-200, #e5e5e5);
  background: #fff;
  color: var(--color-neutral-700, #404040);
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
}
.mm-ico svg {
  width: 1.25rem;
  height: 1.25rem;
}
@media (hover: hover) {
  .mm-ico {
    transition: border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .mm-ico:hover {
    border-color: var(--color-primary-600, #e61e4d);
    color: var(--color-primary-600, #e61e4d);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
  }
}
.mm-ico--wa {
  background: #22c55e;
  border-color: #22c55e;
  color: #fff;
}
.mm-dot {
  position: absolute;
  top: .5rem;
  right: .625rem;
  width: .5rem;
  height: .5rem;
  border-radius: 9999px;
  background: #e61e4d;
}
.dark .mm-ico {
  background: var(--color-neutral-800, #262626);
  border-color: var(--color-neutral-700, #404040);
  color: var(--color-neutral-100, #f5f5f5);
}
.dark .mm-ico--wa {
  background: #22c55e;
  border-color: #22c55e;
  color: #fff;
}
.mm-pill {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  height: 2.75rem;
  padding: 0 .75rem;
  border-radius: 9999px;
  border: 1px solid var(--color-neutral-200, #e5e5e5);
  background: #fff;
  color: var(--color-neutral-700, #404040);
  cursor: pointer;
  flex-shrink: 0;
}
.mm-pill svg,
.mm-pill i.hgi-stroke {
  width: 1.125rem;
  height: 1.125rem;
  font-size: 1.125rem;
  line-height: 1;
}
.mm-pill i.hgi-money-01 { font-size: 1.25rem; }
.mm-pill i.hgi-arrow-down-01 { font-size: .875rem; }
.mm-pill .mm-sep {
  width: 1px;
  height: 1.25rem;
  background: var(--color-neutral-200, #e5e5e5);
}
.dark .mm-pill {
  background: var(--color-neutral-800, #262626);
  border-color: var(--color-neutral-700, #404040);
  color: var(--color-neutral-100, #f5f5f5);
}
/* `.mm-pill` "Site settings" — dil/para popover'ının açıcısı. Aynı satırdaki
   `.mm-ico`'ların hepsi hover'da renk+zemin geri bildirimi ve .2s geçiş
   taşırken bu kontrol TAMAMEN tepkisizdi (ne hover kuralı ne `transition`,
   üstelik `aria-expanded` taşımasına rağmen açık-durum stili yoktu). */
@media (hover: hover) {
  .mm-pill {
    transition: border-color .2s ease, color .2s ease;
  }
  .mm-pill:hover {
    border-color: var(--color-primary-600, #e61e4d);
    color: var(--color-primary-600, #e61e4d);
  }
}
.mm-pill[aria-expanded="true"] {
  border-color: var(--color-primary-600, #e61e4d);
  color: var(--color-primary-600, #e61e4d);
}
.dark .mm-pill:hover,
.dark .mm-pill[aria-expanded="true"] {
  border-color: var(--mm-accent, #a5b4fc);
  color: var(--mm-accent, #a5b4fc);
}

/* --- arama kutusu --- */
.mm-search {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .75rem 1rem;
  border-radius: .75rem;
  border: 1px solid var(--color-neutral-200, #e5e5e5);
  background: var(--color-neutral-50, #fafafa);
  color: var(--color-neutral-400, #a3a3a3);
}
.mm-search svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}
.mm-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: .875rem;
  color: var(--color-neutral-800, #262626);
  outline: none;
}
.dark .mm-search {
  background: var(--color-neutral-800, #262626);
  border-color: var(--color-neutral-700, #404040);
}
.dark .mm-search input {
  color: var(--color-neutral-100, #f5f5f5);
}

/* --- kategori etiketi --- */
.mm-cats-label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-neutral-500, #737373);
  margin: .25rem 0 0;
}

/* --- accordion kategoriler --- */
.mm-acc {
  border: 1px solid var(--color-neutral-200, #e5e5e5);
  border-radius: 1rem;
  background: #fff;
  overflow: hidden;
}
.dark .mm-acc {
  background: var(--color-neutral-800, #262626);
  border-color: var(--color-neutral-700, #404040);
}
.mm-acc-head {
  display: flex;
  align-items: center;
  gap: .875rem;
  width: 100%;
  padding: 1rem 1.125rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: start;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--color-neutral-900, #171717);
  transition: color .2s ease;
}
.mm-acc-head .mm-acc-ico {
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.mm-acc-head .mm-acc-chev {
  transition: transform .2s ease, color .2s ease;
}
@media (hover: hover) {
  .mm-acc-head:hover {
    color: var(--color-primary-600, #e61e4d);
  }
  .mm-acc-head:hover .mm-acc-ico {
    background: var(--color-primary-600, #e61e4d);
    color: #fff;
    transform: scale(1.06);
  }
  .mm-acc-head:hover .mm-acc-chev {
    color: var(--color-primary-600, #e61e4d);
    transform: translateX(3px);
  }
  /* açık accordion'da chev hem dönmüş hem primary: translateX yerine yalnız renk */
  .mm-acc[data-open="1"] .mm-acc-head:hover .mm-acc-chev {
    transform: rotate(180deg);
  }
}
.dark .mm-acc-head {
  color: var(--color-neutral-100, #f5f5f5);
}
.mm-acc-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .75rem;
  background: #eef2ff;
  color: #4f46e5;
  flex-shrink: 0;
}
.mm-acc-ico i.hgi-stroke {
  width: 1.25rem;
  height: 1.25rem;
  font-size: 1.25rem;
}
/* Karanlıkta ikon rozeti: aydınlık temanın açık lavanta zemini (#eef2ff) koyu
   kart üzerinde yabancı kalıyordu — panelin kendi `color-mix` zemin diliyle
   eşitlenir, ikon rengi karanlık vurguya geçer. */
.dark .mm-acc-ico {
  background: color-mix(in srgb, var(--color-primary-500, #6366f1) 18%, transparent);
  color: var(--mm-accent, #a5b4fc);
}
.mm-acc-chev {
  display: inline-flex;
  margin-inline-start: auto;
  color: var(--color-neutral-400, #a3a3a3);
  transition: transform .2s ease;
}
.mm-acc-chev svg {
  width: 1rem;
  height: 1rem;
}
.mm-acc[data-open="1"] .mm-acc-chev {
  transform: rotate(180deg);
}
.mm-acc-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height .3s ease;
}
.mm-acc[data-open="1"] .mm-acc-body {
  max-height: 320px;
}
.mm-acc-inner {
  min-height: 0;
}
.mm-acc-inner > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 1.125rem;
  margin-inline-start: 2.25rem;
  border-top: 1px solid var(--color-neutral-100, #f5f5f5);
  font-size: .875rem;
  font-weight: 500;
  color: var(--color-neutral-700, #404040);
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease;
}
.mm-acc-inner > a svg {
  width: 1rem;
  height: 1rem;
  color: var(--color-neutral-400, #a3a3a3);
  flex-shrink: 0;
  transition: color .2s ease, transform .2s ease;
}
@media (hover: hover) {
  .mm-acc-inner > a:hover svg {
    color: var(--color-primary-600, #e61e4d);
    transform: translateX(3px);
  }
}
.dark .mm-acc-inner > a {
  border-top-color: var(--color-neutral-700, #404040);
  color: var(--color-neutral-300, #d4d4d4);
}
/* Dokunmatikte YAPIŞKAN hover olmaması için zemin + renk geri bildirimi
   yalnız hover yeteneği olan cihazlarda verilir — ailenin geri kalanı
   (`.mm-acc-head`, `.mm-ico`, `.mm-direct`, `.mm-pop__opt`) zaten bu kapının
   arkasında; bu iki kural kapının dışında kalmıştı ve parmakla dokunulan
   link "hover'lı" görünüp öyle kalıyordu. */
@media (hover: hover) {
  .mm-acc-inner > a:hover {
    background: var(--color-neutral-50, #fafafa);
    color: var(--color-primary-600, #e61e4d);
  }
  .dark .mm-acc-inner > a:hover {
    background: var(--color-neutral-700, #404040);
    /* Eksikti: karanlıkta hover metni aydınlık temanın primary-600'ünü
       miras alıyordu (neutral-700 zeminde 1.6:1). */
    color: var(--mm-accent, #a5b4fc);
  }
  .dark .mm-acc-inner > a:hover svg {
    color: var(--mm-accent, #a5b4fc);
  }
}

/* --- aktif kategori vurgusu (aria-current="page") --- */
.mm-acc-inner > a.mm-acc-link-active,
.mm-acc-inner > a[aria-current="page"] {
  background: color-mix(in srgb, var(--color-primary-600, #e61e4d) 8%, transparent);
  color: var(--color-primary-600, #e61e4d);
  font-weight: 600;
}
.mm-acc-inner > a.mm-acc-link-active svg,
.mm-acc-inner > a[aria-current="page"] svg {
  color: var(--color-primary-600, #e61e4d);
  transform: translateX(2px);
}
.dark .mm-acc-inner > a.mm-acc-link-active,
.dark .mm-acc-inner > a[aria-current="page"] {
  background: color-mix(in srgb, var(--color-primary-500, #fb637e) 14%, transparent);
  color: var(--mm-accent, #a5b4fc);
}
.dark .mm-acc-inner > a.mm-acc-link-active svg,
.dark .mm-acc-inner > a[aria-current="page"] svg {
  color: var(--mm-accent, #a5b4fc);
}
@media (prefers-reduced-motion: no-preference) {
  .mm-acc-inner > a.mm-acc-link-active svg,
  .mm-acc-inner > a[aria-current="page"] svg {
    transition: transform .15s ease;
  }
}

/* Aktif doğrudan link (liste filtresi slug'ı eşleştiğinde): akordeon
   linkindeki vurgu diliyle aynı — primary metin/ikon + yumuşak zemin. */
.mm-direct.mm-acc-link-active,
.mm-direct[aria-current="page"] {
  border-color: var(--color-primary-600, #e61e4d);
  color: var(--color-primary-600, #e61e4d);
  font-weight: 600;
}
.mm-direct.mm-acc-link-active .mm-acc-ico,
.mm-direct[aria-current="page"] .mm-acc-ico {
  background: color-mix(in srgb, var(--color-primary-600, #e61e4d) 8%, transparent);
  color: var(--color-primary-600, #e61e4d);
}
.mm-direct.mm-acc-link-active .mm-dir-arrow,
.mm-direct[aria-current="page"] .mm-dir-arrow {
  color: var(--color-primary-600, #e61e4d);
  transform: translateX(2px);
}
.dark .mm-direct.mm-acc-link-active,
.dark .mm-direct[aria-current="page"] {
  border-color: var(--mm-accent, #a5b4fc);
  color: var(--mm-accent, #a5b4fc);
}
.dark .mm-direct.mm-acc-link-active .mm-acc-ico,
.dark .mm-direct[aria-current="page"] .mm-acc-ico {
  background: color-mix(in srgb, var(--color-primary-500, #fb637e) 14%, transparent);
  color: var(--mm-accent, #a5b4fc);
}
.dark .mm-direct.mm-acc-link-active .mm-dir-arrow,
.dark .mm-direct[aria-current="page"] .mm-dir-arrow {
  color: var(--mm-accent, #a5b4fc);
}

/* --- doğrudan link (araba, uçuşlar) --- */
.mm-direct {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .875rem 1.125rem;
  border: 1px solid var(--color-neutral-200, #e5e5e5);
  border-radius: 1rem;
  background: #fff;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--color-neutral-900, #171717);
  text-decoration: none;
}
.dark .mm-direct {
  background: var(--color-neutral-800, #262626);
  border-color: var(--color-neutral-700, #404040);
  color: var(--color-neutral-100, #f5f5f5);
}
.mm-direct .mm-dir-arrow {
  width: 1rem;
  height: 1rem;
  margin-inline-start: auto;
  color: var(--color-neutral-400, #a3a3a3);
  transition: color .2s ease, transform .2s ease;
}
.mm-direct .mm-acc-ico {
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
@media (hover: hover) {
  /* `.mm-direct` hover'ında kendi renk/çerçevesi ANINDA değişiyordu: geçiş
     yalnız çocuklarında (`.mm-dir-arrow`, `.mm-acc-ico`) tanımlıydı, yani ok
     2–4 px kayarken kart renk atlıyordu. Ailenin tamamı .2s ile geçiyor. */
  .mm-direct {
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
  }
  .mm-direct:hover {
    border-color: var(--color-primary-600, #e61e4d);
    color: var(--color-primary-600, #e61e4d);
    background: var(--color-neutral-50, #fafafa);
  }
  .mm-direct:hover .mm-dir-arrow {
    color: var(--color-primary-600, #e61e4d);
    transform: translateX(4px);
  }
  .mm-direct:hover .mm-acc-ico {
    background: var(--color-primary-600, #e61e4d);
    color: #fff;
    transform: scale(1.06);
  }
}

/* --- mm-pill alt popover: dil / para birimi --- */
.mm-pop {
  position: absolute;
  top: 0;
  inset-inline-start: -1.5rem;
  z-index: 30;
  width: min(18.25rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
  padding: .5rem;
  border: 1px solid var(--color-neutral-200, #e5e5e5);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
  animation: mm-pop-in .18s ease-out;
}
.mm-pop[hidden] { display: none; }
.mm-acc[data-open="1"] { border-color: #c7d2fe; box-shadow: 0 6px 18px rgba(79, 70, 229, .08); }
.mm-acc[data-open="1"] .mm-acc-head { color: #4338ca; }
.mm-acc-inner { padding: 0 .75rem .75rem; }
.mm-acc-inner > a { min-height: 44px; margin-inline-start: 0; padding: .625rem .875rem; border-top: 0; border-radius: .65rem; }
.mm-acc-inner > a + a { margin-top: .2rem; }
.mm-acc-inner > a:focus-visible, .mm-pop__opt:focus-visible, .mm-acc-head:focus-visible { outline: 2px solid #4f46e5; outline-offset: -2px; }
.dark .mm-pop { border-color: var(--color-neutral-700, #404040); }
.dark .mm-acc[data-open="1"] { border-color: #6366f1; }
.dark .mm-acc[data-open="1"] .mm-acc-head { color: var(--mm-accent, #a5b4fc); }
@keyframes mm-pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.dark .mm-pop,
html.dark .mm-pop {
  background: var(--color-neutral-800, #262626);
}
.mm-pop__tabs {
  display: flex;
  gap: .25rem;
  padding: .25rem;
  border-radius: .75rem;
  background: var(--color-neutral-100, #f5f5f5);
  margin-bottom: .5rem;
}
.dark .mm-pop__tabs,
html.dark .mm-pop__tabs {
  background: var(--color-neutral-700, #404040);
}
/* Sekme kontrastı: pasif sekme neutral-500 ile AÇIK temada neutral-100
   zemin üzerinde 4.39, KOYU temada neutral-700 zemin üzerinde 2.13 — ikisi de
   AA metin eşiğinin (4.5) altındaydı. Pasif sekme bir durum etiketi, devre
   dışı değil, bu yüzden eşik uygulanmalı: neutral-600 (açık) ve neutral-300
   (koyu) 7.1 / 5.7 verir. */
.mm-pop__tab {
  flex: 1;
  padding: .5rem .75rem;
  border-radius: .5rem;
  border: 0;
  background: transparent;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-neutral-600, #525252);
  cursor: pointer;
  transition: background-color .15s, color .15s, box-shadow .15s;
}

/* Pasif sekmenin hover durumu hiç tanımlı değildi (aktif sekmeyle aynı
   yüzeyde duran iki sekmeden biri tepki veriyordu). */
.mm-pop__tab:not([data-selected]):hover {
  background: var(--color-neutral-200, #e5e5e5);
  color: var(--color-neutral-700, #404040);
}
.mm-pop__tab[data-selected] {
  background: #fff;
  color: var(--color-neutral-900, #171717);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}
.dark .mm-pop__tab[data-selected],
html.dark .mm-pop__tab[data-selected] {
  background: var(--color-neutral-900, #171717);
  color: var(--color-neutral-100, #f5f5f5);
}
html.dark .mm-pop__tab {
  color: var(--color-neutral-300, #d4d4d4);
}
html.dark .mm-pop__tab:not([data-selected]):hover {
  background: var(--color-neutral-600, #525252);
  color: var(--color-neutral-100, #f5f5f5);
}
.mm-pop__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .125rem;
}
.mm-pop__grid[hidden] { display: none; }
.mm-pop__opt {
  display: flex;
  align-items: center;
  gap: .65rem;
  position: relative;
  width: 100%;
  min-height: 52px;
  padding: .5rem .625rem;
  border-radius: .625rem;
  border: 0;
  background: transparent;
  text-align: start;
  cursor: pointer;
  transition: background-color .15s, transform .15s ease;
}
.mm-pop__opt-copy { display: flex; flex-direction: column; align-items: flex-start; gap: .125rem; }
.mm-pop__symbol { display: grid; flex: 0 0 27px; place-items: center; width: 27px; height: 27px; border: 1px solid #e2e8f0; border-radius: 50%; color: #334155; background: #fff; font-size: 11px; line-height: 1; }
.dark .mm-pop__symbol { border-color: #475569; background: #1f2937; color: #f8fafc; }
@media (hover: hover) {
  .mm-pop__opt:hover {
    background: var(--color-neutral-100, #f5f5f5);
    transform: translateX(2px);
  }
}
.dark .mm-pop__opt:hover,
html.dark .mm-pop__opt:hover {
  background: var(--color-neutral-700, #404040);
}
.mm-pop__opt-main {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-neutral-900, #171717);
}
.dark .mm-pop__opt-main,
html.dark .mm-pop__opt-main {
  color: var(--color-neutral-100, #f5f5f5);
}
/* Seçenek alt yazısı (ülke/kod) bir etiket; neutral-500 açık temada 4.39,
   koyu temada neutral-400 4.06 ile eşiğin hemen altında kalıyordu. Bir
   basamak koyu/açık renk 7.4 / 11.4 verir ve hover zemininde de (koyu tema
   neutral-700) 6.8 ile güvenli kalır. */
.mm-pop__opt-sub {
  font-size: .6875rem;
  color: var(--color-neutral-600, #525252);
}
.dark .mm-pop__opt-sub,
html.dark .mm-pop__opt-sub {
  color: var(--color-neutral-300, #d4d4d4);
}
.mm-pop__tick {
  position: absolute;
  top: .5rem;
  inset-inline-end: .5rem;
  font-size: .875rem;
  color: var(--color-primary-600, #4f46e5);
  opacity: 0;
  transition: opacity .15s;
}
/* Karanlıkta tik de karanlık vurguya geçer (primary-600 → neutral-700 zeminde 1.6:1) */
.dark .mm-pop__tick,
html.dark .mm-pop__tick {
  color: var(--mm-accent, #a5b4fc);
}
.mm-pop__opt[aria-checked="true"] .mm-pop__tick {
  opacity: 1;
}
.mm-pop__opt[aria-checked="true"] {
  background: var(--color-neutral-100, #f5f5f5);
}
.dark .mm-pop__opt[aria-checked="true"],
html.dark .mm-pop__opt[aria-checked="true"] {
  background: var(--color-neutral-700, #404040);
}

/* --- alt: tema + dil --- */
.mm-foot {
  display: flex;
  gap: .625rem;
  margin-top: auto;
  padding-top: .75rem;
}
.mm-foot-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .625rem .75rem;
  border-radius: .75rem;
  border: 1px solid var(--color-neutral-200, #e5e5e5);
  background: transparent;
  font-size: .8125rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--color-neutral-700, #404040);
}
.dark .mm-foot-btn {
  border-color: var(--color-neutral-700, #404040);
  color: var(--color-neutral-100, #f5f5f5);
}
.mm-foot-btn {
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
@media (hover: hover) {
  .mm-foot-btn:hover {
    background: var(--color-neutral-100, #f5f5f5);
    transform: translateY(-1px);
  }
}
.dark .mm-foot-btn:hover {
  background: var(--color-neutral-800, #262626);
}

/* --- Koyu tema hover eşitliği ---
   Koyu idle kuralları (.dark .mm-acc-head vb.) hover bloklarından sonra
   geldiği ve aynı özgünlükte olduğu için hover renklerini ezmişti; burada
   daha yüksek özgünlüklü (.dark + :hover) eşitlik kuralları tanımlanır. --- */
.dark .mm-acc-head:hover {
  color: var(--mm-accent, #a5b4fc);
}
.dark .mm-acc-head:hover .mm-acc-ico {
  background: var(--color-primary-500, #fb637e);
  border-color: var(--color-primary-500, #fb637e);
  color: #fff;
}
.dark .mm-acc-head:hover .mm-acc-chev {
  color: var(--mm-accent, #a5b4fc);
}
.dark .mm-direct:hover {
  border-color: var(--mm-accent, #a5b4fc);
  color: var(--mm-accent, #a5b4fc);
}
.dark .mm-direct:hover {
  background: var(--color-neutral-700, #404040);
}
.dark .mm-direct:hover .mm-dir-arrow {
  color: var(--mm-accent, #a5b4fc);
}
.dark .mm-direct:hover .mm-acc-ico {
  background: var(--color-primary-500, #fb637e);
  border-color: var(--color-primary-500, #fb637e);
  color: #fff;
}
.dark .mm-ico:hover {
  border-color: var(--mm-accent, #a5b4fc);
  color: var(--mm-accent, #a5b4fc);
}
.dark .mm-ico--wa:hover {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}

/* Klavye odak eşdeğeri: hover ile aynı geri bildirim, touch olmayan cihazlarda tab ile gezinirken */
.mm-acc-head:focus-visible {
  color: var(--color-primary-600, #e61e4d);
}
.mm-acc-head:focus-visible .mm-acc-chev {
  color: var(--color-primary-600, #e61e4d);
}
.mm-direct:focus-visible {
  border-color: var(--color-primary-600, #e61e4d);
  color: var(--color-primary-600, #e61e4d);
}
.dark .mm-acc-head:focus-visible {
  color: var(--mm-accent, #a5b4fc);
}
.dark .mm-direct:focus-visible {
  border-color: var(--mm-accent, #a5b4fc);
  color: var(--mm-accent, #a5b4fc);
}

/* --- Basma (:active) geri bildirimi ------------------------------------
   Dokunmatik kullanıcı için hover geri bildirimi YOKTUR: bu dosyadaki hover
   kurallarının tamamı bilinçli olarak `@media (hover: hover)` arkasında
   (parmakla dokunulan öğe "hover'ılı" kalmasın diye). Sonuç: telefonda basan
   kullanıcı ne basılı tuttuğu sırada ne de kaldırdığında hiçbir tepki
   görüyordu. Bu blok o boşluğu kapatır: `scale: .98` + bir basamak koyu zemin.

   NEDEN AYRI `scale` ÖZELLİĞİ (shorthand `transform` DEĞİL):
   hover kuralları kendi `transform`'larını taşır (`.mm-ico` → translateY(-2px),
   `.mm-pop__opt` → translateX(2px), `.mm-foot-btn` → translateY(-1px)).
   Shorthand `transform` yazsaydık basma anında hover kayması SIFIRLANIR ve
   öğe yerinden oynardı; `scale` ayrı bir özellik olduğu için mevcut
   `transform` ile BİLEŞİR — basılı hâl "hem kaymış hem sıkışmış" olur.
   Ayrıca panel çocuklarını `forwards` dolgusuyla tutan `mm-stagger-in`
   animasyonu yalnız `transform`'u ezer, `scale`'i etkilemez.

   SÜRE: basılı hâl .1s (anında hissettirsin); parmak kalkınca taban
   `transition` geri gelir ve bırakış temanın .15–.2s ritmiyle yumuşar. */
.mm-acc-head:active,
.mm-acc-inner > a:active,
.mm-direct:active,
.mm-ico:active,
.mm-pill:active,
.mm-pop__opt:active,
.mm-pop__tab:active,
.mm-foot-btn:active,
.mobile-menu__close:active {
  scale: .98;
  transition:
    scale .1s ease,
    background-color .1s ease,
    border-color .1s ease,
    box-shadow .1s ease,
    color .2s ease;
}

/* Zemin kararması — kural: basılı zemin, hover zemininin BİR BASAMAK
   koyusudur (hover zemini yoksa idle'dan bir basamak).
     • hover zemini neutral-50 ya da hiç yok → basılı neutral-100
       (`.mm-acc-head`, alt link, `.mm-direct`, `.mm-ico`, `.mm-pill`,
        `.mm-pop__tab`, `.mobile-menu__close`)
     • hover zemini ZATEN neutral-100 → basılı neutral-200
       (`.mm-foot-btn` hover'ı neutral-100; `.mm-pop__opt` hover'ı da öyle)
   İkinci grubu ölçüm yakaladı: ilk sürümde footer düğmesi de neutral-100
   alıyordu, yani fareyle üstünde basılı tutan kullanıcı HİÇBİR değişiklik
   görmüyordu (hover zemini = basılı zemin). */
.mm-acc-head:active,
.mm-acc-inner > a:active,
.mm-direct:active,
.mm-ico:not(.mm-ico--wa):active,
.mm-pill:active,
.mm-pop__tab:active,
.mobile-menu__close:active {
  background: var(--color-neutral-100, #f5f5f5);
}
.mm-pop__opt:active,
.mm-foot-btn:active {
  background: var(--color-neutral-200, #e5e5e5);
}
/* WhatsApp düğmesi marka yeşilini korur: kararma yeşilin kendi koyu tonu. */
.mm-ico--wa:active {
  background: #16a34a;
}
/* Karanlıkta "kararma" yön değiştirir: koyu temada basılı yüzey bir basamak
   AÇILIR (neutral-800/şeffaf → neutral-700), tıpkı hover'ın yaptığı gibi.
   Tek istisna `.mm-pop__opt`: onun hover zemini zaten neutral-700. */
.dark .mm-acc-head:active,
.dark .mm-acc-inner > a:active,
.dark .mm-direct:active,
.dark .mm-ico:not(.mm-ico--wa):active,
.dark .mm-pill:active,
.dark .mm-pop__tab:active,
.dark .mm-foot-btn:active,
.dark .mobile-menu__close:active {
  background: var(--color-neutral-700, #404040);
}
.dark .mm-pop__opt:active {
  background: var(--color-neutral-600, #525252);
}

/* Basma geri bildirimi hover kapısının DIŞINDA tanımlanır — dokunmatikte
   hover yoktur, geri bildirimin asıl kaynağı budur. */
@media (prefers-reduced-motion: reduce) {
  .mm-acc-head:active,
  .mm-acc-inner > a:active,
  .mm-direct:active,
  .mm-ico:active,
  .mm-pill:active,
  .mm-pop__opt:active,
  .mm-pop__tab:active,
  .mm-foot-btn:active,
  .mobile-menu__close:active {
    scale: none !important;
    transition-duration: 0s !important;
  }
}

/* --- Hareket azaltma: tüm panel içi mikro etkileşim geçişlerini kapat --- */
@media (prefers-reduced-motion: reduce) {
  .mm-acc-head,
  .mm-acc-head .mm-acc-ico,
  .mm-acc-head .mm-acc-chev,
  .mm-acc-inner > a,
  .mm-acc-inner > a svg,
  .mm-direct,
  .mm-direct .mm-dir-arrow,
  .mm-direct .mm-acc-ico,
  .mm-ico,
  .mm-pill,
  .mm-pop__opt,
  .mm-foot-btn {
    transition: none !important;
  }
  .mm-acc-inner > a[aria-current="page"] svg {
    transform: translateX(2px) !important;
  }
}
/* Panelin düz link stili (uppercase blok). Bileşen linkleri (`.mm-direct`)
   bu kuralın kapsamı DIŞINDADIR: aksi hâlde bu generic seçici (özgünlük
   0,2,1 / 0,3,1) `.mm-direct` bileşeninin kendi flex düzenini, padding'ini,
   radius'unu ve rengini ezer — aktif vurgu da bu yüzden boyanmaz. */
.mobile-menu__panel > a:not(.mobile-menu__brand):not(.mm-direct) {
  display: block;
  padding: .625rem .75rem;
  border-radius: .5rem;
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: .025em;
  text-transform: uppercase;
  color: var(--color-neutral-900, #171717);
}
.dark .mobile-menu__panel > a:not(.mobile-menu__brand):not(.mm-direct) {
  color: var(--color-neutral-100, #f5f5f5);
}
.mobile-menu__panel > a:not(.mobile-menu__brand):not(.mm-direct):hover {
  background: var(--color-neutral-100, #f5f5f5);
}
.dark .mobile-menu__panel > a:not(.mobile-menu__brand):not(.mm-direct):hover {
  background: var(--color-neutral-800, #262626);
}

/* ================================================================
   HOVER EFFECTS & ANIMATIONS
   ================================================================ */

/* --- 1. Listing kartları: hover scale + gölge --- */
.group/cardGallerySlider,
.group/cardGallerySlider > div {
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease;
}
.group/cardGallerySlider:hover {
  transform: translateY(-4px);
  z-index: 10;
}
.group/cardGallerySlider:hover > div {
  box-shadow: 0 20px 40px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.08);
}
.dark .group/cardGallerySlider:hover > div {
  box-shadow: 0 20px 40px rgba(0,0,0,.35), 0 8px 16px rgba(0,0,0,.25);
}

/* --- 2. Kart görselleri: hover zoom --- */
.group/cardGallerySlider img {
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.group/cardGallerySlider:hover img {
  transform: scale(1.06);
}

/* --- 3. Favori kalp butonu: pulse --- */
.group/cardGallerySlider .flex.cursor-pointer.rounded-full {
  transition: transform .2s ease, background .2s ease;
}
.group/cardGallerySlider:hover .flex.cursor-pointer.rounded-full {
  transform: scale(1.1);
}
.group/cardGallerySlider .flex.cursor-pointer.rounded-full:active {
  transform: scale(0.9);
}

/* --- 4. Yazar kartları: hover lift --- */
.card-author-box {
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.card-author-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,.1);
}
.dark .card-author-box:hover {
  box-shadow: 0 12px 28px rgba(0,0,0,.3);
}

/* --- 5. Tab butonları: sliding indicator --- */
[role="tab"] {
  position: relative;
  transition: color .2s ease;
}
[role="tab"][data-selected]::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  animation: tabSlide .25s ease;
}
@keyframes tabSlide {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
/* Proje eki (şablonda yok): hareket azaltma tercihinde gösterge animasyonsuz
   ve renk geçişi anında olur. Şablon `tabSlide`'ı koşulsuz oynatıyordu. */
@media (prefers-reduced-motion: reduce) {
  [role="tab"] { transition: none; }
  [role="tab"][data-selected]::after { animation: none; }
}

/* --- 6. Şehir kartları (explore nearby): hover --- */
.grid > a[href].group {
  transition: transform .3s ease, box-shadow .3s ease;
}
.grid > a[href].group:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
}

/* --- 7. Sayfa girişi: scroll-reveal kuralları chisfis-bridge.css'te ---
   Gizli başlangıç durumu (opacity 0 + kayma) render-blocking bir dosyada
   olmalı, yoksa gecikmeli yüklenen custom.css devreye girene kadar sayfa
   görünür kalır ve hero bir an açılıp kapanır (FOUC). Bu yüzden kurallar
   chisfis-bridge.css'te durur; hedefleri main.js §11b işaretler. */

/* --- 8. Buton hover pulse --- */
a.inline-flex.shrink-0:hover,
button.inline-flex.shrink-0:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  transition: transform .2s ease, box-shadow .2s ease;
}
a.inline-flex.shrink-0:active,
button.inline-flex.shrink-0:active {
  transform: translateY(0);
  box-shadow: none;
}

/* --- 9. Galeri ok butonları: fade in on hover --- */
.group\/cardGallerySlider > div > div[class*="opacity-0"] {
  transition: opacity .3s ease;
}
.group\/cardGallerySlider:hover > div > div[class*="opacity-0"] {
  opacity: 1 !important;
}

/* --- 10. Dropdown panel: slide + fade --- */
.hidden-scrollbar.max-h-96 {
  transition: opacity .15s ease, transform .15s ease;
}

/* --- 11. Badge (-20% OFF): bounce --- */
.absolute.start-3.top-3 {
  animation: badgeBounce .4s ease .3s both;
}
@keyframes badgeBounce {
  0% { transform: scale(0); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* --- 12. Yıldız puanı: glow on hover --- */
.text-orange-400,
.text-amber-500 {
  transition: filter .2s ease;
}
.group\/cardGallerySlider:hover .text-orange-400,
.card-author-box:hover .text-amber-500 {
  filter: drop-shadow(0 0 4px rgba(251,191,36,.5));
}

/* --- 13. Mobil alt bar: her zaman görünür --- */
.fixed.inset-x-0.bottom-0 {
  transform: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* --- 14. Real Estate kartları: hover lift + gölge --- */
a.group.block.overflow-hidden {
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease;
}
a.group.block.overflow-hidden:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0,0,0,.12);
}
.dark a.group.block.overflow-hidden:hover {
  box-shadow: 0 16px 32px rgba(0,0,0,.3);
}
a.group.block.overflow-hidden img {
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
a.group.block.overflow-hidden:hover img {
  transform: scale(1.05);
}

/* --- 14. Account kartları: hover lift + border --- */
a.flex.items-center.gap-4.rounded-2xl {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
a.flex.items-center.gap-4.rounded-2xl:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.dark a.flex.items-center.gap-4.rounded-2xl:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

/* --- 15. Tüm link kartları: ortak scale efekti --- */
a[class*="rounded-2xl"]:hover {
  transform: translateY(-4px);
}
a[class*="rounded-2xl"] img {
  transition: transform .4s ease;
}
a[class*="rounded-2xl"]:hover img {
  transform: scale(1.04);
}

/* --- 16. Mobil alt bar: yükseltilmiş orta buton (sepet) --- */
.bnav-fab {
  position: relative;
  top: -2rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background: #7c3aed;
  color: #fff;
  box-shadow: 0 10px 24px rgba(124, 58, 237, .45);
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.bnav-fab:hover {
  background: #6d28d9;
  box-shadow: 0 12px 28px rgba(124, 58, 237, .55);
}
.bnav-fab:active {
  transform: scale(.94);
}

/* --- 17. Mobilde sağdaki yüzen butonlar gizlenir (artık alt barda) --- */
@media (max-width: 1023px) {
  #search-fab-wrap,
  #cart-fab-wrap {
    display: none !important;
  }
}

/* --- 18. Mobil üst bar (logo + arama + hamburger) --- */
.mh-logo {
  flex: none;
  display: inline-block;
  width: 4.5rem;
  margin-right: .625rem;
  line-height: 0;
}
.mh-logo svg {
  width: 100%;
  height: auto;
}
.mh-search {
  flex: 1 1 0;
  min-width: 0;
}
.mh-menu-btn {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: .625rem;
  border-radius: 9999px;
  color: #404040;
  background: #f5f5f5;
  cursor: pointer;
  transition: background-color .2s ease, transform .15s ease;
}
.mh-menu-btn:hover {
  background: #e5e5e5;
}
.mh-menu-btn:active {
  transform: scale(.94);
}
.dark .mh-menu-btn {
  color: #e5e5e5;
  background: #262626;
}
.dark .mh-menu-btn:hover {
  background: #404040;
}
.mh-menu-btn svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* --- 19. Alt bar yerleşimi --- */
.bnav-bar {
  align-items: flex-end;
  overflow: visible;
}
.bnav-inner {
  display: flex;
  width: 100%;
  max-width: 32rem;
  margin-inline: auto;
  align-items: flex-end;
  justify-content: space-between;
  text-align: center;
}
.bnav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .125rem;
  width: 3.75rem;
  /* Aktif gösterge noktası için konum bağlamı */
  position: relative;
  padding-top: .35rem;
  color: var(--color-neutral-500, #737373);
}
.dark .bnav-item {
  color: var(--color-neutral-300, #d4d4d4);
}
.bnav-item i.hgi-stroke {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1.5rem;
  transition: color .2s ease, transform .2s ease;
}
.bnav-item p {
  font-size: .75rem;
  line-height: 1.5;
}

/* --- aktif sayfa göstergesi ---
   Primary renk + ikon üstünde nokta işareti; çekmecedeki kategori
   vurgusuyla aynı renk dilini kullanır (--color-primary-*). */
.bnav-item.is-active {
  color: var(--color-primary-600, #e61e4d);
  font-weight: 600;
}
.bnav-item.is-active i.hgi-stroke {
  color: var(--color-primary-600, #e61e4d);
  transform: translateY(-1px);
}
.bnav-item.is-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: .3rem;
  height: .3rem;
  border-radius: 9999px;
  background: var(--color-primary-600, #e61e4d);
}
.dark .bnav-item.is-active,
.dark .bnav-item.is-active i.hgi-stroke {
  color: var(--color-primary-500, #fb637e);
}
.dark .bnav-item.is-active::before {
  background: var(--color-primary-500, #fb637e);
}
@media (prefers-reduced-motion: reduce) {
  .bnav-item i.hgi-stroke {
    transition: none;
  }
  .bnav-item.is-active i.hgi-stroke {
    transform: none;
  }
}
.bnav-fab i.hgi-stroke {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 1.75rem;
}

/* ============================================================
   Dil değişimi bildirimi (geri al) — main.js showLangToast
   Kalıcı dil seçimi geri bildirim ister: kullanıcı yanlışlıkla dil
   değiştirdiyse tek dokunuşla eski dile döner. Bildirim sağ altta
   belirir; mobilde alt sekme çubuğunun (bnav, z-40) üstünde kalır.
   ============================================================ */
.store-toast-host {
  position: fixed;
  /* Mobil menü çekmecesi z-index 90'dır; bildirim onun ÜSTÜNDE olmalı, yoksa
     çekmece açıkken dil seçilince "Geri" düğmesi dokunulamaz (çekmece
     paneli işaretçiyi yutar). Aydınlatma/lightbox katmanlarının (9999+)
     altında kalır. */
  z-index: 95;
  right: 1rem;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
  left: auto;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none; /* host tıklamayı yakalamaz; toast kendisi yakalar */
}
/* Küçük ekran: alt sekme çubuğunun üzerine çık (bnav ~4.5rem + boşluk) */
@media (max-width: 1023px) {
  .store-toast-host {
    right: .75rem;
    left: .75rem;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 5.25rem);
    align-items: stretch;
  }
}

.store-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem .875rem;
  border-radius: .875rem;
  border: 1px solid var(--color-neutral-200, #e5e7eb);
  background: #ffffff;
  color: var(--color-neutral-800, #1f2937);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
  font-size: .875rem;
  line-height: 1.25rem;
  /* Giriş: hafif yukarı kayma + sönme */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}
.store-toast--in {
  opacity: 1;
  transform: translateY(0);
}
.store-toast__msg {
  flex: 1 1 auto;
  min-width: 0;
}
.store-toast__action {
  flex: 0 0 auto;
  cursor: pointer;
  border: 0;
  border-radius: .625rem;
  padding: .375rem .75rem;
  font-weight: 600;
  font-size: .8125rem;
  color: var(--color-primary-700, #4338ca);
  background: var(--color-primary-50, #eef2ff);
  transition: background .15s ease, color .15s ease;
}
.store-toast__action:hover {
  background: var(--color-primary-100, #e0e7ff);
}
.store-toast__action:focus-visible {
  outline: 2px solid var(--color-primary-500, #6366f1);
  outline-offset: 2px;
}

/* Karanlık tema: yüzey ve kenar eşleniği; AA kontrastlı metin */
html.dark .store-toast,
.dark .store-toast {
  border-color: var(--color-neutral-700, #374151);
  background: var(--color-neutral-800, #1f2937);
  color: var(--color-neutral-100, #f3f4f6);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
html.dark .store-toast__action,
.dark .store-toast__action {
  /* koyu temada primary-300 (mobil menüyle aynı koyu vurgu token'ı) */
  color: #a5b4fc;
  background: rgba(165, 180, 252, .14);
}
html.dark .store-toast__action:hover,
.dark .store-toast__action:hover {
  background: rgba(165, 180, 252, .24);
}

@media (prefers-reduced-motion: reduce) {
  .store-toast {
    transition: none;
    transform: none;
  }
}