/* ==================================================
   HEADER & NAVIGASI
================================================== */

.app-header {
  position: sticky;
  top: 0;

  z-index: 1000;

  background: rgba(255, 255, 255, 0.92);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-bottom: 1px solid var(--line);
}

/* PERINGATAN untuk yang mengubah file ini:

   backdrop-filter, filter, dan transform pada .app-header
   membuat "containing block" baru. Akibatnya elemen anak
   yang position:fixed - termasuk panel menu mobile —
   berhenti mengacu ke layar dan malah terkurung di dalam
   kotak header yang tingginya cuma 68px.

   Itu persis bug yang pernah terjadi: tirai muncul, tapi
   menunya tidak. Karena itu blur dimatikan di lebar
   mobile (lihat bagian MOBILE di bawah). Kalau nanti
   menambahkan efek serupa, jangan pasang di .app-header;
   pasang di elemen di dalamnya. */

.app-header__inner {
  display: flex;
  align-items: center;

  gap: 1.5rem;

  min-height: var(--header-h);
}

/* ==================================================
   BRAND
================================================== */

.brand {
  display: inline-flex;
  align-items: center;

  gap: 0.55rem;

  flex-shrink: 0;

  font-size: 1.05rem;
  font-weight: 700;
}

.brand__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 2rem;
  height: 2rem;

  background: var(--amber);

  border-radius: var(--r-sm);

  color: #fff;

  font-size: 0.85rem;
}

/* ==================================================
   NAVIGASI
================================================== */

.app-nav {
  flex: 1;
}

/* Panel dan kepala panel hanya berperan di mobile.
   Di layar lebar, panel cuma jadi pembungkus transparan. */

.app-nav__panel {
  display: flex;
  align-items: center;

  gap: 1.75rem;
}

.app-nav__head,
.app-nav__desc,
.app-nav__chevron,
.app-nav__aside-title,
.app-nav__area {
  display: none;
}

.app-nav__list {
  display: flex;
  align-items: center;

  gap: 1.75rem;
}

.app-nav__link {
  display: inline-flex;
  align-items: center;

  gap: 0.45rem;

  padding-block: 0.4rem;

  color: var(--muted);

  font-size: 0.85rem;
  font-weight: 500;

  transition: color var(--t);
}

.app-nav__link:hover {
  color: var(--ink);
}

.app-nav__link.is-active {
  color: var(--ink);
  font-weight: 600;
}

.app-nav__icon i {
  font-size: 0.8rem;
}

/* Bagian akun di layar lebar: cukup satu tautan akun,
   sisanya sudah ada di footer. */

.app-nav__aside {
  display: flex;
  align-items: center;

  gap: 1.25rem;

  margin-left: auto;
}

.app-nav__aside .app-nav__link--muted,
.app-nav__logout {
  display: none;
}

.app-nav__backdrop {
  display: none;
}

/* Panel tidak boleh ikut jadi lapisan di layar lebar */

.app-nav__panel {
  position: static;
}


/* ==================================================
   AKSI KANAN
================================================== */

.app-header__action {
  display: flex;
  align-items: center;

  gap: 0.5rem;

  margin-left: auto;
}

/* ==================================================
   TOMBOL KERANJANG
================================================== */

.cart-button {
  position: relative;

  display: inline-flex;
  align-items: center;

  gap: 0.55rem;

  min-height: 2.5rem;

  padding: 0.55rem 1rem;

  background: var(--navy);

  border-radius: var(--r-pill);

  color: #fff;

  font-size: 0.82rem;
  font-weight: 600;

  transition: background-color var(--t);
}

.cart-button:hover {
  background: var(--navy-dark);
}

.cart-button__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 1.25rem;
  height: 1.25rem;

  padding-inline: 0.35rem;

  background: var(--amber);

  border-radius: var(--r-pill);

  color: var(--navy);

  font-size: 0.68rem;
  font-weight: 800;

  font-variant-numeric: tabular-nums;
}

/* ==================================================
   HAMBURGER
================================================== */

.app-header__menu {
  display: none;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 4px;

  width: 2.25rem;
  height: 2.25rem;
}

.app-header__menu span {
  display: block;

  width: 1.25rem;
  height: 2px;

  background: var(--ink);

  border-radius: 2px;

  transition:
    transform var(--t),
    opacity var(--t);
}

.app-header__menu.is-open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.app-header__menu.is-open span:nth-child(2) {
  opacity: 0;
}

.app-header__menu.is-open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ==================================================
   FOOTER
================================================== */

.app-footer {
  margin-top: 3rem;

  padding-block: 2.5rem 1.5rem;

  background: var(--surface);

  border-top: 1px solid var(--line);
}

.app-footer__inner {
  display: grid;

  grid-template-columns: 1.5fr 1fr 1fr;

  gap: 2rem;

  padding-bottom: 2rem;
}

.app-footer__brand p {
  max-width: 260px;

  margin-top: 0.75rem;

  font-size: 0.8rem;

  line-height: 1.6;
}

.app-footer h2 {
  margin-bottom: 0.9rem;

  font-size: 0.8rem;
  font-weight: 700;
}

.app-footer ul {
  display: grid;

  gap: 0.55rem;
}

.app-footer a {
  display: inline-flex;
  align-items: center;

  gap: 0.5rem;

  color: var(--muted);

  font-size: 0.78rem;

  transition: color var(--t);
}

.app-footer a:hover {
  color: var(--amber-dark);
}

.app-footer__contact i {
  color: var(--amber);
}

.app-footer__bottom {
  padding-top: 1.25rem;

  border-top: 1px solid var(--line);

  color: var(--faint);

  font-size: 0.7rem;

  text-align: center;
}

/* ==================================================
   MOBILE
   768px
================================================== */

@media (max-width: 768px) {

  /* Blur dimatikan supaya panel menu yang position:fixed
     kembali mengacu ke layar, bukan ke kotak header.
     Latarnya dibuat hampir pekat sebagai gantinya. */

  .app-header {
    background: rgba(255, 255, 255, 0.98);

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .app-header__inner {
    gap: 0.75rem;
  }

  .app-header__menu {
    display: flex;

    order: -1;

    margin-left: -0.5rem;
  }

  /* ==================================================
     MENU LAYAR PENUH

     Dua lapisan: tirai gelap di belakang, panel putih
     di depan. Panelnya sendiri dibagi dua bagian —
     tujuan utama di atas, akun dan bantuan di bawah
     dengan latar berbeda.

     Tujuannya satu: tiap tautan punya area sentuh yang
     lega, jadi jari tidak perlu presisi.
  ================================================== */

  .app-nav__backdrop {
    position: fixed;
    inset: 0;

    /* Nilainya relatif terhadap .app-nav saja - panel di
       bawah memakai 2, jadi urutannya pasti benar tanpa
       bergantung pada z-index header. */
    z-index: 1;

    display: block;

    background: rgba(20, 33, 61, 0.55);

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    opacity: 0;

    transition: opacity var(--t);
  }

  .app-nav__backdrop.is-open {
    opacity: 1;
  }

  .app-nav {
    position: fixed;
    inset: 0;

    z-index: 1100;

    display: none;

    flex: none;
  }

  .app-nav.is-open {
    display: block;
  }

  /* Panel memenuhi layar, tapi disisakan sedikit di
     kiri supaya tirai di belakangnya tetap terlihat —
     itu yang memberi kesan berlapis, sekaligus jadi
     area tutup yang mudah dijangkau ibu jari. */

  .app-nav__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 3rem;

    z-index: 2;

    display: flex;
    flex-direction: column;

    gap: 0;

    background: var(--surface);

    box-shadow: -12px 0 32px rgba(20, 33, 61, 0.18);

    overflow-y: auto;
    overscroll-behavior: contain;

    transform: translateX(100%);

    transition: transform 0.24s ease;
  }

  .app-nav.is-open .app-nav__panel {
    transform: translateX(0);
  }

  /* ---------- Kepala panel ---------- */

  .app-nav__head {
    position: sticky;
    top: 0;

    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 1.1rem 1.25rem;

    border-bottom: 1px solid var(--line);

    background: var(--surface);
  }

  .app-nav__title {
    color: var(--ink);

    font-size: 1.05rem;
    font-weight: 700;
  }

  .app-nav__close {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 2.5rem;
    height: 2.5rem;

    margin-right: -0.5rem;

    border-radius: var(--r-sm);

    color: var(--muted);

    font-size: 1.15rem;
  }

  .app-nav__close:hover {
    background: var(--surface-mute);
    color: var(--ink);
  }

  /* ---------- Bagian 1: tujuan utama ---------- */

  .app-nav__list {
    flex-direction: column;

    align-items: stretch;

    gap: 0;

    padding: 0.5rem 0.75rem 1rem;
  }

  .app-nav__link {
    display: flex;
    align-items: center;

    gap: 0.9rem;

    width: 100%;

    /* Tinggi minimum 3,5rem: lega untuk jari, dan
       tidak perlu membidik. */
    min-height: 3.5rem;

    padding: 0.75rem 0.75rem;

    border-radius: var(--r-sm);

    color: var(--ink);

    font-size: 1rem;
    font-weight: 600;

    text-align: left;

    transition: background-color var(--t);
  }

  .app-nav__link:active {
    background: var(--surface-mute);
  }

  .app-nav__link.is-active {
    background: var(--amber-soft);
  }

  .app-nav__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 2.5rem;
    height: 2.5rem;

    border-radius: var(--r-sm);

    background: var(--surface-mute);
    color: var(--amber);

    font-size: 0.95rem;
  }

  .app-nav__link.is-active .app-nav__icon {
    background: var(--amber);
    color: #fff;
  }

  .app-nav__text {
    display: flex;
    flex-direction: column;

    gap: 0.1rem;

    flex: 1;

    min-width: 0;
  }

  .app-nav__desc {
    display: block;

    color: var(--muted);

    font-size: 0.78rem;
    font-weight: 400;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app-nav__chevron {
    display: block;

    flex-shrink: 0;

    color: var(--faint);

    font-size: 0.7rem;
  }

  /* ---------- Bagian 2: akun & bantuan ---------- */

  .app-nav__aside {
    display: flex;
    flex-direction: column;

    gap: 0;

    margin-left: 0;
    margin-top: auto;

    padding: 1.1rem 0.75rem 1.5rem;

    border-top: 1px solid var(--line);

    background: var(--surface-alt);
  }

  .app-nav__aside-title {
    display: block;

    padding-inline: 0.75rem;
    margin-bottom: 0.35rem;

    color: var(--faint);

    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .app-nav__aside .app-nav__link--muted {
    display: flex;

    min-height: 3rem;

    color: var(--body);

    font-size: 0.925rem;
    font-weight: 500;
  }

  .app-nav__aside .app-nav__icon {
    width: 2.25rem;
    height: 2.25rem;

    background: transparent;
    color: var(--muted);
  }

  .app-nav__link--account .app-nav__icon {
    background: var(--navy);
    color: #fff;
  }

  .app-nav__logout {
    display: block;
  }

  .app-nav__logout button {
    cursor: pointer;
  }

  .app-nav__area {
    display: flex;
    align-items: center;

    gap: 0.4rem;

    padding: 0.75rem 0.75rem 0;

    color: var(--faint);

    font-size: 0.78rem;
  }

  /* Keranjang jadi ikon saja */

  .cart-button {
    padding: 0.55rem 0.75rem;
  }

  .cart-button__text {
    display: none;
  }

  /* Footer */

  .app-footer__inner {
    grid-template-columns: 1fr 1fr;

    gap: 1.5rem;
  }

  .app-footer__brand {
    grid-column: 1 / -1;
  }
}

/* ==================================================
   SMALL MOBILE
   480px
================================================== */

@media (max-width: 480px) {
  .brand__name {
    font-size: 0.95rem;
  }

  .app-footer__inner {
    grid-template-columns: 1fr;
  }
}


/* ==================================================
   GERAK MINIMAL

   Panel tetap muncul, hanya tanpa animasi geser.
================================================== */

@media (prefers-reduced-motion: reduce) {
  .app-nav__panel,
  .app-nav__backdrop {
    transition: none;
  }
}