/* ============================================================
   layout.css — announcement bar, nav, hero, ticker, footer,
   toast, cart drawer. Struktur halaman, bukan kartu produk.
   ============================================================ */

/* --- Announcement bar (40px) --- */
.announcement {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  padding-inline: var(--spacing-40);
  position: relative;
  font-size: 13px;
}
.announcement__text { margin: 0; text-align: center; }
.announcement__link { text-decoration: underline; margin-left: var(--spacing-8); }
.announcement__close {
  position: absolute;
  right: var(--spacing-12);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
}
.announcement.is-hidden { display: none; }

/* --- Nav --- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-height);
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-subtle);
  backdrop-filter: blur(12px);
}
.nav__inner {
  height: var(--nav-height);
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  min-width: 0;
}
.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  font-size: var(--text-subheading);
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
}
.nav__logo span:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Mobile: logo jadi mark saja (teks disembunyikan) agar nav tidak sempit */
@media (max-width: 767px) {
  .nav__logo span:last-child { display: none; }
  .nav__logo { flex-shrink: 0; }
}
.nav__logo-mark {
  width: 12px;
  height: 12px;
  background: var(--accent);
  border-radius: 2px;
}
.nav__links {
  display: none; /* mobile-first: tampil via burger */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  padding: var(--spacing-16);
  gap: var(--spacing-16);
}
.nav__links.is-open { display: flex; }
.nav__link { color: var(--text); padding: var(--spacing-8) 0; }
.nav__link:hover { color: var(--text-muted); }
.nav__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  flex-shrink: 0;
}

/* Ikon tema */
.icon--moon { display: none; }
[data-theme="dark"] .icon--sun { display: none; }
[data-theme="dark"] .icon--moon { display: block; }

/* Language switch */
.lang-switch {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-buttons);
  overflow: hidden;
}
.lang-switch__btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  padding: var(--spacing-8) var(--spacing-12);
  transition: background-color 0.3s ease-out, color 0.3s ease-out;
}
.lang-switch__btn.is-active {
  background: var(--accent);
  color: var(--accent-text);
}

/* Badge keranjang */
.cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--radius-tags);
  background: var(--accent);
  color: var(--accent-text);
  font-size: var(--text-caption);
  line-height: 18px;
  text-align: center;
}

/* --- Hero --- */
.hero {
  padding-top: var(--spacing-48);
  padding-bottom: var(--spacing-48);
  text-align: left;
}
.hero__title {
  font-size: 36px;
  line-height: 1.05;
  margin: 0 0 var(--spacing-16);
  max-width: 14ch;
}
.hero__sub {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  color: var(--text-muted);
  margin: 0 0 var(--spacing-24);
  max-width: 46ch;
}
.hero__cta {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  max-width: 480px;
}

/* --- Ticker (band gelap) --- */
.ticker {
  background: var(--inverted-bg);
  color: var(--inverted-text);
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100vw;
}
.ticker::-webkit-scrollbar { display: none; }
.ticker__track {
  display: flex;
  gap: var(--spacing-48);
  padding: var(--spacing-20) var(--spacing-16);
  width: max-content;
  min-width: 100%;
  justify-content: flex-start;
}
.ticker__item { display: flex; flex-direction: column; gap: var(--spacing-4); }
.ticker__label {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-ash);
}
.ticker__value {
  font-size: 14px;
  color: var(--color-paper);
  transition: opacity 0.4s ease-out;
}
.ticker__value.pulse { opacity: 0.4; }

/* --- Section generic --- */
.section { padding-block: var(--spacing-48); }
.section__title {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  margin: 0 0 var(--spacing-24);
}
.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-8);
}
.section__count {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 var(--spacing-16);
}
.filters { display: flex; flex-direction: column; gap: var(--spacing-12); }
.chips { display: flex; gap: var(--spacing-8); flex-wrap: wrap; }

.empty-state {
  text-align: left;
  color: var(--text-muted);
  padding: var(--spacing-48) 0;
}

/* --- Footer --- */
.footer {
  background: var(--inverted-bg);
  color: var(--inverted-text);
  padding-block: var(--spacing-48);
  margin-top: var(--spacing-64);
}
.footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}
.footer__brand { font-size: var(--text-heading-sm); margin: 0 0 var(--spacing-8); }
.footer__tag { color: var(--color-ash); margin: 0; font-size: 14px; }
.footer__copy { color: var(--color-ash); font-size: 13px; margin: 0; }
.footer .nav__logo-accent { color: var(--accent); }

/* --- Cart drawer --- */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 10, 8, 0.5);
  backdrop-filter: blur(8px);
  z-index: 90;
}
.cart {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100%);
  background: var(--card-bg);
  border-left: 1px solid var(--border);
  z-index: 100;
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform 0.35s ease-out;
}
.cart[hidden], .cart-overlay[hidden] { display: none; }
.cart.is-closing { transform: translateX(100%); }

.cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-20);
  border-bottom: 1px solid var(--border);
}
.cart__title { margin: 0; font-size: var(--text-heading-sm); }

.cart__items {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-16) var(--spacing-20);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}
.cart-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--spacing-12);
  align-items: center;
  padding-bottom: var(--spacing-16);
  border-bottom: 1px solid var(--border);
}
.cart-item__img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-wash);
  background: var(--surface-wash);
}
.cart-item__name { font-size: 14px; margin: 0 0 var(--spacing-4); }
.cart-item__price { font-size: 13px; color: var(--text-muted); }
.cart-item__qty {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  margin-top: var(--spacing-8);
}
.qty-btn {
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  border-radius: var(--radius-tags);
  line-height: 1;
}
.cart-item__remove {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  align-self: start;
  text-decoration: underline;
}

.cart__empty {
  padding: var(--spacing-40) var(--spacing-20);
  color: var(--text-muted);
  margin: 0;
}

.cart__foot {
  border-top: 1px solid var(--border);
  padding: var(--spacing-20);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}
.cart__row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.cart__row--muted { color: var(--text-muted); }
.cart__row--total {
  font-size: var(--text-body);
  padding-top: var(--spacing-8);
  border-top: 1px solid var(--border);
  margin-top: var(--spacing-4);
}
.cart__foot .btn { margin-top: var(--spacing-12); }

/* --- Toast --- */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--spacing-24);
  transform: translateX(-50%) translateY(16px);
  background: var(--color-obsidian);
  color: var(--color-paper);
  border-radius: var(--radius-wash);
  padding: var(--spacing-12) var(--spacing-20);
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  z-index: 200;
  max-width: calc(100vw - 32px);
}
.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* --- Breakpoints (mobile-first) --- */
@media (min-width: 480px) {
  .hero__cta { flex-direction: row; }
  .hero__cta .input { flex: 1; }
}

@media (min-width: 768px) {
  .container { padding-inline: var(--spacing-24); }
  .hero { padding-top: var(--spacing-64); padding-bottom: var(--spacing-64); }
  .hero__title { font-size: var(--text-display); line-height: var(--leading-display); }
  .section { padding-block: var(--spacing-64); }
  .section__title { font-size: var(--text-heading-lg); }
  .section__head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .filters { flex-direction: row; align-items: center; }

  /* Nav desktop: link inline */
  .nav__links {
    display: flex;
    position: static;
    flex-direction: row;
    background: none;
    border: none;
    padding: 0;
    gap: var(--spacing-24);
    margin-left: var(--spacing-32);
  }
  .nav__burger { display: none; }

  .footer__inner { flex-direction: row; justify-content: space-between; align-items: flex-end; }
}