/* Gaya halaman tujuan: tema HUD, dipakai bersama oleh 4 halaman */
:root { --bg:#02060d; --cyan:#00e5ff; --blue:#1f6bff; --text:#9fefff; --ink:#eaffff; --soft:#bdf5ff; --ease:cubic-bezier(.7,0,.2,1); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; background: var(--bg); color: var(--text); font-family: "Share Tech Mono", ui-monospace, monospace; }
body {
  min-height: 100vh; min-height: 100dvh; overflow-x: hidden;
  background: radial-gradient(ellipse at 50% 0%, #062038 0%, #030b17 50%, var(--bg) 80%);
  padding: calc(20px + env(safe-area-inset-top, 0px)) 16px calc(40px + env(safe-area-inset-bottom, 0px));
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgba(0,229,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,229,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
}
/* Kilatan warp yang memudar saat halaman dibuka (menyambung transisi dari beranda) */
.arrive { position: fixed; inset: 0; z-index: 50; pointer-events: none; background: radial-gradient(circle, #fff 0%, #d8fbff 40%, #00e5ff 100%); animation: arrive .8s ease-out forwards; }
@keyframes arrive { to { opacity: 0; visibility: hidden; } }

.wrap { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; animation: rise .7s .25s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(-10px); } }

/* Logo wide menyatu dengan latar: tanpa pelat, tulisan INDONESIA sudah diubah jadi cyan terang */
.brand { display: inline-flex; align-items: center; min-width: 0; text-decoration: none; transition: filter .25s; }
.brand img {
  display: block; height: 58px; width: auto; max-width: 100%;
  filter: drop-shadow(0 0 10px rgba(0,229,255,.28));
  transition: filter .25s;
}
.brand:hover img, .brand:focus-visible img { filter: drop-shadow(0 0 14px rgba(0,229,255,.6)); }
.brand:focus-visible { outline: 1px dashed var(--cyan); outline-offset: 6px; }
@media (max-width: 420px) { .brand img { height: 40px; } }
.back {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
  color: var(--cyan); text-decoration: none; font-size: 12px; letter-spacing: .2em;
  border: 1px solid rgba(0,229,255,.55); background: rgba(0,30,60,.5);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: background .2s, color .2s;
}
.back:hover, .back:focus-visible { background: rgba(0,229,255,.18); color: #fff; outline: none; }

.hero, .sec {
  position: relative; padding: clamp(18px, 3.6vw, 34px);
  border: 1px solid rgba(0,229,255,.55);
  background: linear-gradient(180deg, rgba(5,34,64,.82), rgba(2,14,30,.88));
  box-shadow: 0 0 30px rgba(0,229,255,.16), inset 0 0 30px rgba(0,229,255,.05);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}
.hero { animation: open .8s .35s var(--ease) both; transform-origin: 50% 0; }
.sec { margin-top: 22px; border-color: rgba(0,229,255,.32); }
@keyframes open { from { transform: scaleY(.04); opacity: .4; } 50% { transform: scaleY(.04); opacity: 1; } to { transform: none; } }

.tag { display: inline-block; background: var(--cyan); color: #02121f; padding: 2px 8px; font-size: 11px; letter-spacing: .1em; margin-bottom: 14px; }
h1 { font-family: "Orbitron", sans-serif; color: var(--ink); font-size: clamp(22px, 5vw, 38px); letter-spacing: .1em; line-height: 1.25; text-shadow: 0 0 18px rgba(0,229,255,.45); margin-bottom: 16px; text-wrap: balance; }
h2 { display: flex; align-items: center; gap: 10px; font-family: "Orbitron", sans-serif; color: var(--ink); font-size: clamp(14px, 2.8vw, 18px); letter-spacing: .14em; margin-bottom: 14px; }
h2::before { content: ""; width: 9px; height: 9px; flex: none; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
h3 { font-family: "Orbitron", sans-serif; color: var(--ink); font-size: 13px; letter-spacing: .1em; line-height: 1.4; margin-bottom: 8px; }
p { font-size: 15px; line-height: 1.7; color: var(--soft); max-width: 68ch; }
p + p { margin-top: 12px; }
.lead { font-size: clamp(14px, 2vw, 16px); }
.small { font-size: 12px; line-height: 1.6; color: rgba(159,239,255,.7); }

.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.card { position: relative; padding: 16px; border: 1px solid rgba(0,229,255,.4); background: rgba(3,20,40,.7); }
.card p { font-size: 13px; line-height: 1.6; }
.card .actions { margin-top: 14px; }

ul.list { list-style: none; display: grid; gap: 10px; }
ul.list li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.6; color: var(--soft); }
ul.list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 2px; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }

.kv { display: grid; grid-template-columns: minmax(130px, max-content) 1fr; gap: 10px 18px; font-size: 14px; }
.kv dt { color: rgba(159,239,255,.6); letter-spacing: .04em; }
.kv dd { color: var(--ink); line-height: 1.5; }
@media (max-width: 480px) { .kv { grid-template-columns: 1fr; gap: 2px 0; } .kv dd { margin-bottom: 10px; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 16px;
  font: inherit; font-size: 12px; letter-spacing: .16em; text-decoration: none; text-align: center;
  color: #02121f; background: var(--cyan); border: 0; cursor: pointer;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: background .2s, color .2s;
}
.btn:hover, .btn:focus-visible { background: #fff; outline: none; }
.btn.ghost { color: var(--cyan); background: rgba(0,30,60,.5); box-shadow: inset 0 0 0 1px rgba(0,229,255,.6); }
.btn.ghost:hover, .btn.ghost:focus-visible { background: rgba(0,229,255,.18); color: #fff; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.chip {
  font: inherit; font-size: 12px; letter-spacing: .12em; padding: 9px 14px; cursor: pointer;
  background: transparent; color: var(--text); border: 1px solid rgba(0,229,255,.45);
}
.chip:hover, .chip:focus-visible { color: #fff; border-color: var(--cyan); outline: none; }
.chip[aria-pressed="true"] { background: var(--cyan); color: #02121f; border-color: var(--cyan); }

.prods { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.prod { display: flex; flex-direction: column; border: 1px solid rgba(0,229,255,.4); background: rgba(3,20,40,.78); transition: border-color .2s, box-shadow .2s; }
.prod:hover { border-color: #c9fbff; box-shadow: 0 0 26px rgba(0,229,255,.3); }
.prod.hidden { display: none; }
.prod .ph { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #071d33; border-bottom: 1px solid rgba(0,229,255,.3); }
.prod .ph img { width: 100%; height: 100%; object-fit: contain; padding: 8px; display: block; }
.prod .ph.art {
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 30% 25%, #0f4a7c 0%, #05203d 55%, #02101f 100%);
}
.prod .ph.art::before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(90deg, transparent 0 18%, rgba(0,229,255,.35) 18% 19%, transparent 19% 81%, rgba(0,229,255,.35) 81% 82%, transparent 82%),
    linear-gradient(rgba(0,229,255,.25) 1px, transparent 1px);
  background-size: 100% 100%, 22px 22px;
}
.prod .mono { position: relative; font-family: "Orbitron", sans-serif; font-weight: 700; font-size: 26px; letter-spacing: .08em; color: #eaffff; text-shadow: 0 0 16px rgba(0,229,255,.8); text-align: center; padding: 0 12px; }
.prod .body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.prod .cat { font-size: 11px; letter-spacing: .14em; color: var(--cyan); }
.prod h3 { font-size: 12.5px; margin: 0; }
.prod p { font-size: 12.5px; line-height: 1.55; }
.prod .acts { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 12px; }
.prod .acts .btn { padding: 10px 8px; font-size: 10.5px; letter-spacing: .1em; }
@media (max-width: 380px) { .prod .acts { grid-template-columns: 1fr; } }

.note { margin-top: 18px; padding: 12px 14px; border-left: 3px solid var(--cyan); background: rgba(0,229,255,.06); font-size: 13px; line-height: 1.6; color: var(--text); }

.team { display: grid; grid-template-columns: minmax(0, 210px) 1fr; gap: 22px; align-items: center; }
.team img { width: 100%; height: auto; display: block; border: 1px solid var(--cyan); box-shadow: 0 0 18px rgba(0,229,255,.35); }
@media (max-width: 600px) { .team { grid-template-columns: 1fr; } .team img { max-width: 220px; } }

.split { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.split img { width: 100%; height: auto; display: block; border: 1px solid var(--cyan); box-shadow: 0 0 18px rgba(0,229,255,.3); }
@media (max-width: 720px) { .split { grid-template-columns: 1fr; } }

.map iframe { display: block; width: 100%; height: 320px; border: 1px solid rgba(0,229,255,.5); filter: saturate(.55) brightness(.9); }
.foot { margin-top: 28px; text-align: center; font-size: 11px; letter-spacing: .14em; color: rgba(159,239,255,.55); }

.hidden { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* =====================================================================
   PENINGKATAN VISUAL v20261023d — latar HUD, boot, reveal, warp keluar
   Dibangun oleh js/page.js. Tanpa JS, halaman tetap tampil normal.
   ===================================================================== */

/* Latar animasi */
body.pg-anim::before { display: none; }           /* grid statis diganti grid animasi */
.pg-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#pg-particles { position: absolute; inset: 0; width: 100%; height: 100%; }
.pg-grid {
  position: absolute; left: -60%; right: -60%; top: 34%; height: 150%;
  background-image:
    linear-gradient(rgba(0,229,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.06) 1px, transparent 1px);
  background-size: 46px 46px;
  transform-origin: 50% 0; transform: rotateX(64deg) translate3d(0,-46px,0);
  animation: pgGrid 7s linear infinite; will-change: transform;
  mask-image: radial-gradient(ellipse 65% 55% at 50% 50%, #000 15%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 65% 55% at 50% 50%, #000 15%, transparent 72%);
}
@keyframes pgGrid { to { transform: rotateX(64deg) translate3d(0,0,0); } }
.pg-scan { position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay; }
.pg-scan::after { content: ""; position: absolute; left: 0; right: 0; height: 22vh;
  background: linear-gradient(transparent, rgba(0,229,255,.05), transparent);
  animation: pgSweep 8s linear infinite; }
@keyframes pgSweep { from { top: -25vh; } to { top: 115vh; } }
.pg-vig { position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.6) 100%); }

/* Overlay HUD */
.pg-hud { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.pg-corner { position: absolute; width: 26px; height: 26px; border: 2px solid var(--cyan);
  opacity: .55; filter: drop-shadow(0 0 5px var(--cyan)); animation: pgCorner 1s var(--ease) both; }
.pg-corner.tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.pg-corner.tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.pg-corner.bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.pg-corner.br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
@keyframes pgCorner { from { opacity: 0; transform: scale(1.7); } }
.pg-rd { position: absolute; font-size: 10px; letter-spacing: .14em; color: rgba(159,239,255,.6);
  display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.pg-rd b { color: var(--cyan); font-weight: 400; text-shadow: 0 0 6px var(--cyan); }
.pg-rd .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan); animation: pgBlink 1.1s steps(2) infinite; }
@keyframes pgBlink { 50% { opacity: .2; } }
.pg-rd.tl { top: 14px; left: 44px; }
.pg-rd.br { bottom: 16px; right: 44px; }
.pg-eq { position: absolute; top: 15px; right: 44px; display: flex; gap: 2px; height: 14px; align-items: flex-end; }
.pg-eq i { width: 3px; height: 100%; background: var(--cyan); box-shadow: 0 0 5px var(--cyan);
  transform-origin: bottom; animation: pgEq 1s ease-in-out infinite; }
@keyframes pgEq { 0%,100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.pg-side { position: absolute; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; }
.pg-side.l { left: 13px; } .pg-side.r { right: 13px; align-items: flex-end; }
.pg-side i { width: 12px; height: 2px; background: rgba(0,229,255,.5); box-shadow: 0 0 5px rgba(0,229,255,.5); }
.pg-side i.lg { width: 20px; background: var(--cyan); }
@media (max-width: 640px) { .pg-side, .pg-rd.br { display: none; } .pg-eq { top: 13px; right: 40px; } }

/* Boot: ACCESS GRANTED */
.pg-boot { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: #02060d; overflow: hidden; }
.pg-boot .line { font-family: "Share Tech Mono", monospace; color: var(--cyan);
  font-size: clamp(13px, 3vw, 17px); letter-spacing: .32em; text-align: center;
  text-shadow: 0 0 14px rgba(0,229,255,.7); }
.pg-boot .line .cur { animation: pgBlink .5s steps(2) infinite; }
.pg-boot .bar { margin: 16px auto 0; width: min(62vw, 340px); height: 3px; background: rgba(0,229,255,.18); overflow: hidden; }
.pg-boot .bar i { display: block; height: 100%; width: 0; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.pg-boot .ray { position: absolute; left: 0; right: 0; height: 2px; top: 0;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent); opacity: .8;
  animation: pgRay 1s linear infinite; }
@keyframes pgRay { from { top: 0; } to { top: 100%; } }
.pg-boot.done { animation: pgBootOut .45s var(--ease) forwards; }
@keyframes pgBootOut { to { opacity: 0; visibility: hidden; transform: scale(1.04); } }

/* Konten selalu terlihat. Observer hanya menambahkan animasi dekoratif. */
body.pg-anim .pg-in { animation: pgReveal .55s var(--ease); }
@keyframes pgReveal { from { transform: translateY(12px); } to { transform: none; } }
/* garis pindai yang menyapu sekali saat panel muncul */
.sec, .card, .prod { position: relative; }
.pg-sweep { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.pg-sweep::before { content: ""; position: absolute; left: -30%; top: 0; width: 30%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,.22), transparent);
  transform: skewX(-18deg); }
.pg-in > .pg-sweep::before { animation: pgShine 1s var(--ease) .1s both; }
@keyframes pgShine { from { left: -30%; } to { left: 130%; } }

/* Header seksi dengan garis pengisi + status */
h2 { position: relative; }
h2 .fill { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(0,229,255,.5), transparent); margin-left: 4px; }
h2 .st { font-family: "Share Tech Mono", monospace; font-size: 10px; letter-spacing: .18em; color: rgba(159,239,255,.5); }

/* Judul: efek decode */
h1 .dc { color: var(--cyan); opacity: .9; }

/* Kartu: sorot & aksen sudut */
.card, .prod { overflow: hidden; }
.card::after, .prod::after { content: ""; position: absolute; top: 0; right: 0; width: 14px; height: 14px;
  border-top: 1px solid var(--cyan); border-right: 1px solid var(--cyan); opacity: .5; transition: all .25s; }
.card:hover::after, .prod:hover::after { width: 22px; height: 22px; opacity: 1; box-shadow: 0 0 10px rgba(0,229,255,.5); }
.btn { position: relative; overflow: hidden; }
.btn::before { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-20deg); }
.btn:hover::before { animation: pgShine .7s ease both; }

/* Warp keluar (balik/navigasi) */
body.pg-warp .wrap { transform: scale(1.5); opacity: 0; transition: transform .75s cubic-bezier(.6,0,.9,.4), opacity .75s ease-in; }
body.pg-warp .pg-hud, body.pg-warp .pg-bg { opacity: 0; transition: opacity .4s; }
.pg-flash { position: fixed; left: 50%; top: 50%; z-index: 70; pointer-events: none;
  width: 30vmax; height: 30vmax; margin: -15vmax 0 0 -15vmax; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #d8fbff 35%, #00e5ff 62%, rgba(0,229,255,0) 72%);
  opacity: 0; transform: scale(0); }
body.pg-warp .pg-flash { animation: pgFlash .75s cubic-bezier(.7,0,.9,.5) forwards; }
@keyframes pgFlash { 0% { opacity: 0; transform: scale(0); } 30% { opacity: 1; } 100% { opacity: 1; transform: scale(9); } }
.pg-streak { position: fixed; inset: 0; z-index: 69; pointer-events: none; opacity: 0; }
body.pg-warp .pg-streak { opacity: 1; }
/* =====================================================================
   PENINGKATAN TOKO ONLINE DINAMIS v20261023e (HUD E-COMMERCE EXTENSION)
   Mempertahankan 100% gaya HUD asli + komponen belanja, detail, & checkout
   ===================================================================== */
:root { --orange:#ff9a2e; --green:#00e676; --red:#ff4d6d; }

.top-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.nav-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px;
  color: var(--cyan); text-decoration: none; font-size: 11.5px; letter-spacing: .14em;
  border: 1px solid rgba(0,229,255,.5); background: rgba(0,30,60,.52);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: background .2s, color .2s;
}
.nav-pill:hover, .nav-pill:focus-visible { background: rgba(0,229,255,.2); color: #fff; outline: none; }
.nav-pill .cart-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px;
  background: var(--orange); color: #02121f; font-weight: 700; font-size: 11px;
}

/* Filter bar & pencarian katalog */
.shop-toolbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  margin-bottom: 14px; padding: 12px; border: 1px solid rgba(0,229,255,.3); background: rgba(2,14,28,.75);
}
.shop-toolbar input[type="search"], .shop-toolbar select {
  padding: 9px 12px; background: rgba(2,10,22,.92); border: 1px solid rgba(0,229,255,.45);
  color: var(--ink); font: inherit; font-size: 12.5px;
}
.shop-toolbar input[type="search"] { min-width: min(100%, 260px); flex: 1; }
.shop-toolbar input:focus, .shop-toolbar select:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 10px rgba(0,229,255,.35); }

/* Harga & stok di kartu produk */
.prod-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 4px; }
.prod-price { font-family: "Orbitron", sans-serif; font-size: 14px; font-weight: 700; color: var(--orange); letter-spacing: .06em; }
.prod-stock { font-size: 10.5px; letter-spacing: .1em; padding: 2px 6px; border: 1px solid rgba(0,230,118,.5); color: var(--green); background: rgba(0,230,118,.08); }
.prod-stock.out { border-color: rgba(255,77,109,.5); color: var(--red); background: rgba(255,77,109,.08); }
.prod h3 a { color: var(--ink); text-decoration: none; }
.prod h3 a:hover { color: var(--cyan); }

/* Detail produk */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px; align-items: start; }
@media (max-width: 760px) { .detail-grid { grid-template-columns: 1fr; } }
.detail-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.detail-thumbs button {
  width: 64px; height: 50px; padding: 3px; background: #071d33; border: 1px solid rgba(0,229,255,.4); cursor: pointer;
}
.detail-thumbs button.active, .detail-thumbs button:hover { border-color: var(--cyan); box-shadow: 0 0 10px rgba(0,229,255,.45); }
.detail-thumbs img { width: 100%; height: 100%; object-fit: contain; }

/* Form HUD umum (Checkout, Akun, Cek Pesanan) */
.hud-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.hud-field { margin-bottom: 14px; }
.hud-field label { display: block; font-size: 12px; letter-spacing: .1em; color: var(--cyan); margin-bottom: 6px; }
.hud-field input, .hud-field select, .hud-field textarea {
  width: 100%; padding: 10px 12px; background: rgba(2,12,26,.9);
  border: 1px solid rgba(0,229,255,.45); color: var(--ink); font: inherit; font-size: 13.5px;
}
.hud-field input:focus, .hud-field select:focus, .hud-field textarea:focus {
  outline: none; border-color: #fff; box-shadow: 0 0 12px rgba(0,229,255,.4);
}

/* Tabel Keranjang & Ringkasan */
.cart-table-wrap { overflow-x: auto; }
.cart-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cart-table th, .cart-table td { padding: 11px 10px; text-align: left; border-bottom: 1px solid rgba(0,229,255,.22); }
.cart-table th { font-family: "Orbitron", sans-serif; font-size: 11px; letter-spacing: .12em; color: var(--cyan); }
.qty-input { width: 68px !important; text-align: center; padding: 6px !important; }

/* Kurir radio card */
.courier-list { display: grid; gap: 10px; margin-top: 8px; }
.courier-option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 1px solid rgba(0,229,255,.38); background: rgba(3,20,40,.75); cursor: pointer;
}
.courier-option:hover, .courier-option.selected { border-color: var(--cyan); background: rgba(0,229,255,.12); }

/* Toast notifikasi HUD */
.xen-toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 999;
  padding: 12px 18px; background: rgba(2,16,34,.96); border: 1px solid var(--cyan);
  color: var(--ink); font-size: 13px; letter-spacing: .08em;
  box-shadow: 0 0 24px rgba(0,229,255,.45);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transform: translateY(20px); opacity: 0; pointer-events: none; transition: all .25s ease;
}
.xen-toast.show { transform: translateY(0); opacity: 1; }

.chip { text-decoration: none; }
.chip[aria-current="true"] { background: var(--cyan); color: #02121f; border-color: var(--cyan); }
.catalog-summary { margin: 0 0 16px; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; }
.prod { min-width: 0; overflow-wrap: anywhere; }
.prod h3 a, .catalog-summary a { color: var(--ink); }
:root { --orange: #ffb454; --red: #ff4d6d; --green: #00e676; }
/* Overlay dekoratif tidak boleh menghalangi pencarian atau tombol belanja. */
.pg-boot { pointer-events: none; animation: pgBootOut .45s 1s forwards; }