/* Tema-bağımsız ortak iskelet. Yalnızca --color-* ve --nav-accent kullanır. */

.hamburger-btn {
  display: none; width: 40px; height: 40px; border: none; background: transparent;
  cursor: pointer; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; padding: 0;
}
.hamburger-btn span { display: block; width: 24px; height: 2px; background: var(--color-text); transition: transform .2s ease, opacity .2s ease; }
.hamburger-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.offcanvas-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .25s ease; z-index: 90; }
.offcanvas-backdrop.is-visible { opacity: 1; }

.offcanvas-menu {
  position: fixed; top: 0; bottom: 0; right: 0; width: min(320px, 86vw);
  background: var(--color-surface, #fff); transform: translateX(100%);
  transition: transform .25s ease; z-index: 91; display: flex; flex-direction: column;
  box-shadow: -8px 0 24px rgba(0,0,0,.15);
}
.offcanvas-menu.is-open { transform: translateX(0); }
.offcanvas-menu__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--color-border); }
.offcanvas-menu__close { background: none; border: none; font-size: 28px; line-height: 1; cursor: pointer; color: var(--color-text); }
.offcanvas-menu__body { padding: 12px 20px 32px; overflow-y: auto; display: flex; flex-direction: column; }
.offcanvas-menu__body a { padding: 12px 0; font-weight: 600; border-bottom: 1px solid var(--color-border); }
.offcanvas-menu__body hr { border: none; border-top: 1px solid var(--color-border); margin: 8px 0; }

.bottom-nav {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--color-surface, #fff); border-top: 1px solid var(--color-border);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bottom-nav__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 6px; font-size: 11px; font-weight: 600; color: var(--color-muted); background: none; border: none; cursor: pointer; min-height: 48px; }
.bottom-nav__item.is-active { color: var(--nav-accent); }
.bottom-nav__icon { font-size: 20px; position: relative; }
.bottom-nav__badge { position: absolute; top: -6px; right: -10px; background: var(--nav-accent); color: #fff; font-size: 10px; border-radius: 50%; padding: 1px 5px; }
.bottom-nav__badge:empty { display: none; }

.search-overlay { position: fixed; inset: 0; z-index: 95; background: var(--color-bg, #fff); opacity: 0; transition: opacity .2s ease; }
.search-overlay.is-open { opacity: 1; }
.search-overlay__form { width: 100%; max-width: 640px; margin: 0 auto; display: flex; gap: 8px; padding: 24px 20px; align-items: center; }
.search-overlay__close { background: none; border: none; font-size: 28px; cursor: pointer; color: var(--color-text); }
.search-overlay__form input { flex: 1; font-size: 16px; padding: 12px 14px; } /* 16px: iOS Safari otomatik zoom yapmasın diye */

html.no-scroll, html.no-scroll body { overflow: hidden; height: 100%; }

@media (max-width: 768px) {
  .hamburger-btn { display: inline-flex; }
  .main-nav { display: none !important; }
  .header-actions a:not(.cart-link) { display: none; }
  .search-form { display: none; }
  .bottom-nav { display: flex; }
  body { padding-bottom: 64px; }
  .theme-preview-bar { display: none; }
}
@media (min-width: 769px) {
  .offcanvas-menu, .offcanvas-backdrop, .search-overlay, .bottom-nav { display: none !important; }
}