/* Alttan açılan sayfa (mobil) — masaüstünde sağ panel gibi davranır */
.sheet-backdrop { position: fixed; inset: 0; z-index: var(--z-sheet); background: var(--overlay); animation: fade-in var(--dur) var(--ease); }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sheet); max-height: 88vh; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--shadow-lg); animation: sheet-up var(--dur-slow) var(--ease); }
.sheet__grip { width: var(--size-36); height: var(--size-4); border-radius: var(--r-2xs); background: var(--border-strong); margin: var(--sp-2) auto 0; }
.sheet__header { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
.sheet__title { flex: 1; font-size: var(--text-h3); font-weight: var(--w-semibold); }
.sheet__body { flex: 1; overflow-y: auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }
.sheet__body > * { flex: none; }
.sheet__footer { display: flex; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
.sheet__footer .btn { flex: 1; }
@keyframes sheet-up { from { transform: translateY(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 768px) {
  .sheet { top: 0; left: auto; width: var(--drawer-w); max-height: none; border-radius: 0; border-left: 1px solid var(--border); animation: slide-in var(--dur-slow) var(--ease); }
  .sheet__grip { display: none; }
}

/* Açılır menü (kart "..." menüsü, mağaza seçici) */
.menu { position: absolute; z-index: var(--z-drawer); min-width: var(--size-200); padding: var(--sp-1); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-md); }
.menu__item { display: flex; align-items: center; gap: var(--sp-3); width: 100%; height: var(--size-40); padding: 0 var(--sp-3); border-radius: var(--r-sm); font-size: var(--text-sm); color: var(--text); }
.menu__item:hover { background: var(--surface-hover); }
.menu__item.is-danger { color: var(--danger-text); }
.menu__item .icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--text-2); }
.menu__item.is-active { background: var(--primary-soft); color: var(--primary-soft-text); }
.menu__sub { font-size: var(--text-xs); color: var(--text-3); margin-left: auto; }