@charset "UTF-8";
/* ==========================================================================
   TOKO NATA — sistem desain "gemas"
   Navy #0B2A59 diambil dari logo, dipakai sebagai garis & tulisan.
   Sisanya palet permen: krem, peach, kuning, mint, pink, ungu, langit.
   ========================================================================== */

/* ---------------------------------------------------------------- TOKENS */
:root {
  /* warna inti */
  --ink:      #0B2A59;
  --ink-soft: #3C5580;
  --ink-mute: #7286A6;

  --krem:  #FFF6E9;
  --krem-2:#FFEFDA;
  --papan: #FFFFFF;

  --peach: #FF7A4D;
  --peach-t:#FFE2D5;
  --kuning:#FFC93C;
  --kuning-t:#FFF0C7;
  --mint:  #4FD1A5;
  --mint-t:#D6F6EA;
  --pink:  #FF8FB8;
  --pink-t:#FFE0EC;
  --ungu:  #9B7BE8;
  --ungu-t:#EAE1FD;
  --sky:   #5FC0F5;
  --sky-t: #DAF0FE;
  --abu:   #9AA4B2;
  --abu-t: #ECEFF3;

  --utama: var(--peach);
  --utama-t: var(--peach-t);

  /* isi wajah maskot — ikut warna kertas supaya nyaman di kedua tema */
  --wajah: #FFFFFF;

  /* garis & bayangan gaya stiker */
  --garis: 3px;
  --tepi:  var(--ink);
  --r-s: 14px;
  --r-m: 22px;
  --r-l: 32px;
  --r-xl: 44px;
  --bayang:    4px 4px 0 var(--ink);
  --bayang-lg: 7px 7px 0 var(--ink);
  --bayang-sm: 3px 3px 0 var(--ink);

  /* huruf */
  --f-judul: 'Fredoka', 'Baloo 2', ui-rounded, system-ui, sans-serif;
  --f-badan: 'Nunito', ui-rounded, system-ui, -apple-system, sans-serif;

  --lebar: 1200px;
  --gerak: cubic-bezier(.34,1.56,.64,1);
}

[data-tema="malam"] {
  --ink:      #FFF3E2;
  --ink-soft: #D6C9B8;
  --ink-mute: #9C8E7C;
  --krem:  #16182B;
  --krem-2:#1E2140;
  --papan: #232647;
  --peach-t:#4A2A20;
  --kuning-t:#48381A;
  --mint-t:#1C3F35;
  --pink-t:#48253A;
  --ungu-t:#2E2450;
  --sky-t: #1B3549;
  --abu-t: #2A2E4D;
  --tepi:  #0A0B18;
  --bayang:    4px 4px 0 #0A0B18;
  --bayang-lg: 7px 7px 0 #0A0B18;
  --bayang-sm: 3px 3px 0 #0A0B18;
  --wajah: #FFF3E2;
}

/* ----------------------------------------------------------------- RESET */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--f-badan);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--krem);
  background-image:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 12%, transparent) 1px, transparent 0);
  background-size: 22px 22px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; display: block; }

/* Atribut hidden harus selalu menang. Tanpa !important, class seperti
   .ringkasan__baris (display:flex) atau .dua-kolom (display:grid) akan
   mengalahkan aturan bawaan browser dan elemennya tetap kelihatan. */
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
h1,h2,h3,h4,h5 { font-family: var(--f-judul); font-weight: 600; line-height: 1.08; margin: 0; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--kuning); color: var(--ink); }

:focus-visible {
  outline: 3px dashed var(--peach);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lewati {
  position: fixed; top: 10px; left: 10px; z-index: 999;
  background: var(--kuning); color: var(--ink); padding: 10px 18px;
  border: var(--garis) solid var(--tepi); border-radius: 999px; font-weight: 800;
  transform: translateY(-200%); transition: transform .2s;
}
.lewati:focus { transform: none; }

/* ---------------------------------------------------------------- LAYOUT */
.bungkus { width: min(100% - 40px, var(--lebar)); margin-inline: auto; }
.sesi { padding: clamp(48px, 7vw, 92px) 0; position: relative; }
.sesi--rapat { padding: clamp(28px, 4vw, 48px) 0; }
.sesi--atas0 { padding-top: 0; }

.sesi-kepala {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 38px);
}

/* --------------------------------------------------------------- TIPOGRAFI */
.mata {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-judul); font-weight: 600; font-size: 12.5px;
  letter-spacing: .16em; text-transform: uppercase;
  background: var(--kuning); color: var(--ink);
  border: var(--garis) solid var(--tepi); border-radius: 999px;
  padding: 6px 16px; box-shadow: var(--bayang-sm);
  transform: rotate(-1.6deg);
}
.mata--mint  { background: var(--mint); }
.mata--pink  { background: var(--pink); }
.mata--ungu  { background: var(--ungu); }
.mata--sky   { background: var(--sky); }
.mata--peach { background: var(--peach); }

.j-raksasa { font-size: clamp(42px, 8.2vw, 92px); letter-spacing: -.03em; }
.j-besar   { font-size: clamp(30px, 4.6vw, 52px); letter-spacing: -.02em; }
.j-sedang  { font-size: clamp(24px, 3vw, 34px); }
.j-kecil   { font-size: clamp(19px, 2vw, 23px); }

.lede { font-size: clamp(16.5px, 1.5vw, 19.5px); color: var(--ink-soft); max-width: 62ch; line-height: 1.72; }
.kecil { font-size: 14px; color: var(--ink-soft); }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; }

/* teks bercorak: outline tebal + isi warna */
.stabilo {
  background: linear-gradient(transparent 58%, var(--kuning) 58%, var(--kuning) 92%, transparent 92%);
  padding: 0 .12em;
}
.stabilo--mint { background: linear-gradient(transparent 58%, var(--mint) 58%, var(--mint) 92%, transparent 92%); }
.stabilo--pink { background: linear-gradient(transparent 58%, var(--pink) 58%, var(--pink) 92%, transparent 92%); }

.warni { color: var(--peach); }
.warni-2 { color: var(--ungu); }

/* --------------------------------------------------------------- TOMBOL */
.tbl {
  --bg: var(--papan);
  --fg: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--f-judul); font-weight: 600; font-size: 15.5px;
  padding: 12px 24px; border-radius: 999px;
  background: var(--bg); color: var(--fg);
  border: var(--garis) solid var(--tepi);
  box-shadow: var(--bayang);
  text-decoration: none; cursor: pointer;
  transition: transform .16s var(--gerak), box-shadow .16s var(--gerak), background .16s;
  white-space: nowrap;
}
.tbl:hover  { transform: translate(-2px,-2px); box-shadow: var(--bayang-lg); }
.tbl:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 var(--tepi); }
.tbl--isi    { --bg: var(--peach); --fg: #fff; }
.tbl--kuning { --bg: var(--kuning); }
.tbl--mint   { --bg: var(--mint); }
.tbl--pink   { --bg: var(--pink); }
.tbl--ungu   { --bg: var(--ungu); --fg: #fff; }
.tbl--navy   { --bg: var(--ink); --fg: var(--krem); }
.tbl--besar  { padding: 16px 34px; font-size: 17.5px; }
.tbl--mini   { padding: 8px 16px; font-size: 13.5px; box-shadow: var(--bayang-sm); }
.tbl--blok   { display: flex; width: 100%; }
.tbl[disabled] { opacity: .5; pointer-events: none; }

/* Tombol dengan ekor gerak saat hover */
.tbl--geser:hover .panah { transform: translateX(4px); }
.panah { transition: transform .18s var(--gerak); }

/* ----------------------------------------------------------------- CHIP */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 999px;
  border: var(--garis) solid var(--tepi); background: var(--papan);
  font-family: var(--f-judul); font-weight: 600; font-size: 14px;
  text-decoration: none; box-shadow: var(--bayang-sm);
  transition: transform .16s var(--gerak), background .16s;
}
.chip:hover { transform: translateY(-3px) rotate(-1.5deg); }
.chip.is-aktif { background: var(--ink); color: var(--krem); }
.chip--peach.is-aktif { background: var(--peach); color: #fff; }
.deret-chip { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------------------------------------------------------------- KARTU */
.kartu {
  background: var(--papan);
  border: var(--garis) solid var(--tepi);
  border-radius: var(--r-l);
  box-shadow: var(--bayang);
  padding: clamp(20px, 3vw, 32px);
  position: relative;
}
.kartu--kuning { background: var(--kuning-t); }
.kartu--mint   { background: var(--mint-t); }
.kartu--pink   { background: var(--pink-t); }
.kartu--ungu   { background: var(--ungu-t); }
.kartu--sky    { background: var(--sky-t); }
.kartu--peach  { background: var(--peach-t); }

/* Jendela ala aplikasi lucu (pengganti "win" retro) */
.jendela {
  background: var(--papan);
  border: var(--garis) solid var(--tepi);
  border-radius: var(--r-l);
  box-shadow: var(--bayang-lg);
  overflow: hidden;
}
.jendela__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  background: var(--kuning);
  border-bottom: var(--garis) solid var(--tepi);
  font-family: var(--f-judul); font-weight: 600; font-size: 14px;
}
.jendela__bar--mint  { background: var(--mint); }
.jendela__bar--pink  { background: var(--pink); }
.jendela__bar--ungu  { background: var(--ungu); color: #fff; }
.jendela__bar--peach { background: var(--peach); color: #fff; }
.jendela__titik { display: inline-flex; gap: 6px; }
.jendela__titik i {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--tepi); background: var(--papan);
}
.jendela__titik i:nth-child(1) { background: #FF6B6B; }
.jendela__titik i:nth-child(2) { background: #FFD93D; }
.jendela__titik i:nth-child(3) { background: #6BCB77; }
.jendela__isi { padding: clamp(20px, 3vw, 30px); }

/* Stiker kecil yang ditempel di pojok */
.stiker {
  position: absolute; z-index: 3;
  font-family: var(--f-judul); font-weight: 600; font-size: 13px;
  background: var(--kuning); color: var(--ink);
  border: var(--garis) solid var(--tepi); border-radius: 999px;
  padding: 5px 14px; box-shadow: var(--bayang-sm);
  transform: rotate(-8deg);
}
.stiker--kanan { right: -10px; top: -14px; transform: rotate(7deg); }
.stiker--mint { background: var(--mint); }
.stiker--pink { background: var(--pink); }
.stiker--peach{ background: var(--peach); color: #fff; }

/* Selotip washi */
.selotip {
  position: absolute; top: -13px; left: 50%; translate: -50% 0;
  width: 92px; height: 26px; z-index: 2;
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--kuning) 85%, transparent) 0 7px, color-mix(in srgb, var(--peach) 60%, transparent) 7px 14px);
  border-left: 2px dashed color-mix(in srgb, var(--ink) 30%, transparent);
  border-right: 2px dashed color-mix(in srgb, var(--ink) 30%, transparent);
  rotate: -2deg; opacity: .95;
}

/* --------------------------------------------------------------- FORMULIR */
.bidang { display: block; margin-bottom: 16px; }
.bidang > span, .bidang > label {
  display: block; font-family: var(--f-judul); font-weight: 600;
  font-size: 14px; margin-bottom: 7px;
}
.bidang input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]), .bidang select, .bidang textarea, .isian {
  width: 100%; padding: 12px 16px;
  background: var(--papan); color: var(--ink);
  border: var(--garis) solid var(--tepi); border-radius: var(--r-s);
  box-shadow: var(--bayang-sm);
  transition: transform .14s var(--gerak), box-shadow .14s;
  font-family: var(--f-badan); font-size: 15.5px;
}
.bidang textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.bidang input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus, .bidang select:focus, .bidang textarea:focus, .isian:focus {
  outline: none; transform: translate(-2px,-2px); box-shadow: var(--bayang);
}
.bidang select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230B2A59' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px;
}
[data-tema="malam"] .bidang select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23FFF3E2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.bidang input:disabled, .bidang select:disabled { opacity: .55; cursor: not-allowed; }
.bidang__bantu { font-size: 13px; color: var(--ink-mute); margin-top: 6px; }
.baris { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* --------------------------------------------------------------- ANIMASI */
@keyframes ngambang { 0%,100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes goyang   { 0%,100% { rotate: -3deg; } 50% { rotate: 3deg; } }
@keyframes denyut   { 0%,100% { scale: 1; } 50% { scale: 1.06; } }
@keyframes muncul   { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes putar    { to { rotate: 360deg; } }
@keyframes kelip    { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes kilau    { 0%,100% { scale: 0; opacity: 0; } 50% { scale: 1; opacity: 1; } }
@keyframes lompat   { 0%,100% { translate: 0 0; } 30% { translate: 0 -14px; } 55% { translate: 0 0; } 70% { translate: 0 -6px; } }
@keyframes jalan-mar { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.ngambang { animation: ngambang 4.5s ease-in-out infinite; }
.goyang   { animation: goyang 3.4s ease-in-out infinite; transform-origin: 50% 90%; }
.denyut   { animation: denyut 2.4s ease-in-out infinite; }

/* Muncul saat masuk layar */
.masuk { opacity: 0; }
.masuk.is-tampil { animation: muncul .62s var(--gerak) forwards; }

/* --------------------------------------------------------------- BLOB */
.blob {
  border-radius: 46% 54% 62% 38% / 48% 40% 60% 52%;
  animation: blobing 12s ease-in-out infinite;
}
@keyframes blobing {
  0%,100% { border-radius: 46% 54% 62% 38% / 48% 40% 60% 52%; }
  33%     { border-radius: 62% 38% 42% 58% / 56% 62% 38% 44%; }
  66%     { border-radius: 38% 62% 56% 44% / 42% 48% 52% 58%; }
}

/* ================================================================ BOOT
   Layar sambutan "Nata bangun tidur" — tampil sekali per sesi.
   ================================================================ */
.boot {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center; gap: 0;
  background: var(--kuning);
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 16%, transparent) 1px, transparent 0);
  background-size: 24px 24px;
  transition: opacity .5s ease, visibility .5s;
}
.boot[hidden] { display: none; }
.boot.is-tutup { opacity: 0; visibility: hidden; }
.boot__isi { text-align: center; width: min(88vw, 420px); }
.boot__wajah { width: 168px; margin: 0 auto 22px; animation: lompat 1.4s ease-in-out infinite; }
.boot__teks {
  font-family: var(--f-judul); font-weight: 600; font-size: 19px;
  min-height: 1.6em; margin-bottom: 18px;
}
.boot__bar {
  height: 22px; border: var(--garis) solid var(--tepi); border-radius: 999px;
  background: var(--papan); overflow: hidden; box-shadow: var(--bayang-sm);
}
.boot__bar i {
  display: block; height: 100%; width: 0;
  background: repeating-linear-gradient(45deg, var(--peach) 0 12px, var(--pink) 12px 24px);
  transition: width .3s linear;
}
.boot__lewati {
  margin-top: 20px; background: none; border: 0; cursor: pointer;
  font-family: var(--f-judul); font-size: 13.5px; text-decoration: underline;
  text-underline-offset: 4px; opacity: .75;
}

/* ================================================================ HEADER */
.kepala {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--krem) 88%, transparent);
  backdrop-filter: blur(12px) saturate(1.3);
  border-bottom: var(--garis) solid var(--tepi);
}
.kepala__in {
  display: flex; align-items: center; gap: 18px;
  padding: 11px 0; min-height: 70px;
}
.kepala__logo { flex-shrink: 0; display: block; transition: transform .2s var(--gerak); }
.kepala__logo:hover { transform: rotate(-4deg) scale(1.05); }
.kepala__logo img { height: 46px; width: auto; }

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a {
  font-family: var(--f-judul); font-weight: 600; font-size: 15px;
  padding: 9px 15px; border-radius: 999px; text-decoration: none;
  border: 3px solid transparent; transition: all .16s var(--gerak);
}
.nav a:hover { background: var(--kuning); border-color: var(--tepi); transform: translateY(-2px) rotate(-1.5deg); }
.nav a.is-aktif { background: var(--peach); color: #fff; border-color: var(--tepi); }

.kepala__alat { display: flex; align-items: center; gap: 9px; }
.bulat {
  position: relative;
  width: 46px; height: 46px; flex-shrink: 0;
  display: grid; place-items: center;
  border: var(--garis) solid var(--tepi); border-radius: 50%;
  background: var(--papan); box-shadow: var(--bayang-sm);
  cursor: pointer; font-size: 19px; text-decoration: none;
  transition: transform .16s var(--gerak), background .16s;
}
.bulat:hover { transform: translate(-2px,-2px) rotate(-6deg); box-shadow: var(--bayang); }
.bulat:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--tepi); }
.bulat--keranjang { background: var(--mint); }
.bulat b {
  position: absolute; top: -6px; right: -6px;
  min-width: 23px; height: 23px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--peach); color: #fff;
  border: 2.5px solid var(--tepi); border-radius: 999px;
  font-family: var(--f-judul); font-size: 12px; font-weight: 600;
}
.bulat b[hidden] { display: none; }
.burger { display: none; }

/* menu mobile */
@media (max-width: 900px) {
  .nav {
    position: fixed; inset: 70px 0 auto; z-index: 88;
    flex-direction: column; align-items: stretch; gap: 8px;
    padding: 20px; margin: 0;
    background: var(--krem); border-bottom: var(--garis) solid var(--tepi);
    box-shadow: 0 14px 0 -6px color-mix(in srgb, var(--ink) 18%, transparent);
    transform: translateY(-130%); transition: transform .34s var(--gerak);
  }
  .nav.is-buka { transform: none; }
  .nav a { font-size: 18px; padding: 13px 18px; background: var(--papan); border-color: var(--tepi); }
  .burger { display: grid; }
  .kepala__logo img { height: 40px; }
}

/* ================================================================ MARQUEE */
.pengumuman {
  background: var(--ink); color: var(--krem);
  border-bottom: var(--garis) solid var(--tepi);
  overflow: hidden; padding: 9px 0;
  font-family: var(--f-judul); font-weight: 600; font-size: 13.5px; letter-spacing: .06em;
}
.pengumuman__in { display: flex; width: max-content; animation: jalan-mar 34s linear infinite; }
.pengumuman__in span { padding-right: 46px; white-space: nowrap; }
.pengumuman:hover .pengumuman__in { animation-play-state: paused; }

/* ================================================================ MASKOT
   Wajahnya ditelusuri langsung dari logo, jadi bentuknya nggak diutak-atik.
   Yang dianimasikan cuma seluruh kepalanya: mengangguk, condong ke arah
   kursor, dan memantul waktu disapa.
   ================================================================ */
.maskot { display: block; overflow: visible; }
.maskot__kepala {
  transform-box: fill-box; transform-origin: 50% 88%;
  transition: transform .45s var(--gerak);
}
.maskot.is-sapa .maskot__kepala { animation: sapa .66s var(--gerak); }
@keyframes sapa {
  0%   { transform: scale(1,1)      translateY(0); }
  28%  { transform: scale(1.1,.88)  translateY(6px); }
  55%  { transform: scale(.94,1.09) translateY(-10px); }
  78%  { transform: scale(1.03,.97) translateY(2px); }
  100% { transform: scale(1,1)      translateY(0); }
}
.maskot__kilau path { animation: kilau 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.maskot__kilau path:nth-child(2) { animation-delay: .8s; }
.maskot__zzz text { animation: ngambang 2.6s ease-in-out infinite; }
.maskot__zzz text:nth-child(2) { animation-delay: .5s; }

/* Maskot yang nempel di pojok layar */
.nata-pojok {
  position: fixed; right: 18px; bottom: 18px; z-index: 80;
  width: 82px; cursor: pointer;
  filter: drop-shadow(3px 3px 0 var(--tepi));
  transition: transform .22s var(--gerak);
  background: none; border: 0; padding: 0;
}
.nata-pojok:hover { transform: translateY(-6px) rotate(-6deg) scale(1.06); }
.nata-pojok__gelembung {
  position: absolute; right: 100%; bottom: 58%;
  margin-right: 12px; width: max-content; max-width: 220px;
  background: var(--papan); border: var(--garis) solid var(--tepi);
  border-radius: var(--r-m) var(--r-m) 4px var(--r-m);
  box-shadow: var(--bayang-sm); padding: 10px 15px;
  font-family: var(--f-judul); font-weight: 600; font-size: 13.5px; line-height: 1.45;
  text-align: left; opacity: 0; translate: 10px 0; pointer-events: none;
  transition: opacity .22s, translate .22s var(--gerak);
}
.nata-pojok.is-ngomong .nata-pojok__gelembung { opacity: 1; translate: 0 0; }
@media (max-width: 700px) { .nata-pojok { width: 62px; right: 12px; bottom: 12px; } .nata-pojok__gelembung { display: none; } }

/* ================================================================ HERO */
.hero { position: relative; padding: clamp(40px, 6vw, 76px) 0 clamp(48px, 6vw, 84px); overflow: hidden; }
.hero__latar {
  position: absolute; z-index: 0; pointer-events: none;
  width: 46vw; max-width: 620px; aspect-ratio: 1;
  right: -12vw; top: -10vw; opacity: .55;
  background: radial-gradient(circle at 30% 30%, var(--kuning), var(--peach) 70%);
}
.hero__latar-2 {
  position: absolute; z-index: 0; pointer-events: none;
  width: 30vw; max-width: 380px; aspect-ratio: 1;
  left: -12vw; bottom: -8vw; opacity: .42;
  background: radial-gradient(circle at 40% 40%, var(--mint), var(--sky) 72%);
  animation-delay: -4s;
}
.hero__kisi { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (max-width: 980px) { .hero__kisi { grid-template-columns: 1fr; } }

.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

.angka {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 34px;
}
.angka > div {
  background: var(--papan); border: var(--garis) solid var(--tepi);
  border-radius: var(--r-m); padding: 14px 16px; box-shadow: var(--bayang-sm);
  transition: transform .18s var(--gerak);
}
.angka > div:nth-child(1) { background: var(--mint-t); rotate: -1.5deg; }
.angka > div:nth-child(2) { background: var(--pink-t); rotate: 1deg; }
.angka > div:nth-child(3) { background: var(--sky-t);  rotate: -.7deg; }
.angka > div:hover { transform: translateY(-5px) rotate(0deg); }
.angka b { display: block; font-family: var(--f-judul); font-size: clamp(21px, 2.4vw, 27px); font-weight: 600; }
.angka span { font-size: 12.5px; color: var(--ink-soft); font-weight: 700; }

/* Kartu maskot besar di hero */
.hero__nata { position: relative; }
.hero__nata .maskot { width: min(100%, 340px); margin-inline: auto; }

/* ============================================================== PENCARI */
.pencari__keluaran {
  border: var(--garis) dashed var(--tepi); border-radius: var(--r-m);
  background: var(--kuning-t); padding: 14px 18px;
  font-family: var(--f-judul); font-weight: 600; font-size: 14.5px;
  min-height: 60px; display: flex; align-items: center; gap: 10px;
  margin-top: 4px;
}
.pencari__keluaran .titik { animation: kelip 1.1s steps(1) infinite; }

/* ================================================================ PRODUK */
.kisi-produk {
  display: grid; gap: clamp(16px, 2vw, 26px);
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
}
.kisi-produk--4 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

.pkartu {
  position: relative; display: flex; flex-direction: column;
  background: var(--papan);
  border: var(--garis) solid var(--tepi); border-radius: var(--r-l);
  box-shadow: var(--bayang); overflow: hidden;
  transition: transform .22s var(--gerak), box-shadow .22s var(--gerak);
}
.pkartu:nth-child(3n+1) { rotate: -.7deg; }
.pkartu:nth-child(3n+2) { rotate: .5deg; }
.pkartu:hover { transform: translate(-3px,-6px) rotate(0deg); box-shadow: var(--bayang-lg); }

.pkartu__gbr { position: relative; display: block; aspect-ratio: 1; background: var(--krem-2); border-bottom: var(--garis) solid var(--tepi); overflow: hidden; }
.pkartu__gbr img { width: 100%; height: 100%; object-fit: cover; transition: scale .4s var(--gerak); }
.pkartu:hover .pkartu__gbr img { scale: 1.06; }

.pkartu__badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-family: var(--f-judul); font-weight: 600; font-size: 11.5px; letter-spacing: .08em;
  background: var(--peach); color: #fff;
  border: 2.5px solid var(--tepi); border-radius: 999px; padding: 3px 11px;
  rotate: -6deg; box-shadow: 2px 2px 0 var(--tepi);
}
.pkartu__badge[data-b="BARU"]    { background: var(--mint); color: var(--ink); }
.pkartu__badge[data-b="LIMITED"] { background: var(--ungu); }
.pkartu__mat {
  position: absolute; bottom: 12px; right: 12px; z-index: 2;
  font-family: var(--f-judul); font-weight: 600; font-size: 11.5px;
  background: var(--papan); border: 2.5px solid var(--tepi); border-radius: 999px;
  padding: 3px 11px; box-shadow: 2px 2px 0 var(--tepi);
}
.pkartu__isi { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; gap: 7px; }
.pkartu__kat { font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-mute); }
.pkartu__nama { font-size: 18px; line-height: 1.22; }
.pkartu__nama a { text-decoration: none; }
.pkartu__nama a:hover { text-decoration: underline wavy var(--peach); text-underline-offset: 4px; }
.pkartu__ring { font-size: 13.6px; color: var(--ink-soft); line-height: 1.55; margin: 0; flex: 1; }
.pkartu__kaki { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.harga { font-family: var(--f-judul); font-weight: 600; font-size: 19px; display: flex; align-items: baseline; gap: 7px; }
.harga s { font-size: 13.5px; color: var(--ink-mute); font-weight: 500; }

/* ================================================================ LANGKAH */
.langkah { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); counter-reset: n; }
.langkah > div {
  position: relative; padding: 26px 20px 20px;
  border: var(--garis) solid var(--tepi); border-radius: var(--r-l);
  background: var(--papan); box-shadow: var(--bayang-sm);
  transition: transform .2s var(--gerak);
}
.langkah > div::before {
  counter-increment: n; content: counter(n);
  position: absolute; top: -18px; left: 18px;
  width: 40px; height: 40px; display: grid; place-items: center;
  font-family: var(--f-judul); font-weight: 600; font-size: 19px;
  background: var(--kuning); border: var(--garis) solid var(--tepi);
  border-radius: 50%; box-shadow: var(--bayang-sm);
}
.langkah > div:nth-child(2)::before { background: var(--mint); }
.langkah > div:nth-child(3)::before { background: var(--pink); }
.langkah > div:nth-child(4)::before { background: var(--sky); }
.langkah > div:hover { transform: translateY(-6px) rotate(-1deg); }
.langkah b { display: block; font-family: var(--f-judul); font-size: 18px; margin-bottom: 5px; }
.langkah span { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }

/* ================================================================ MATERIAL */
.kisi-material { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); }
.mat {
  border: var(--garis) solid var(--tepi); border-radius: var(--r-l);
  padding: 22px 20px; box-shadow: var(--bayang-sm); background: var(--papan);
  transition: transform .2s var(--gerak);
}
.mat:hover { transform: translateY(-6px) rotate(1deg); box-shadow: var(--bayang); }
.mat__emoji { font-size: 30px; line-height: 1; margin-bottom: 10px; display: block; }
.mat__kode { font-family: var(--f-judul); font-weight: 600; font-size: 25px; }
.mat__juluk { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); margin: 3px 0 10px; }
.mat p { font-size: 14px; color: var(--ink-soft); margin: 0; line-height: 1.6; }

/* ================================================================ GACHA
   Mesin kapsul pengganti "SPIN.CD" — putar sekali, dapat kupon.
   ================================================================ */
.gacha { display: grid; grid-template-columns: 260px 1fr; gap: clamp(20px, 3vw, 40px); align-items: center; }
@media (max-width: 760px) { .gacha { grid-template-columns: 1fr; text-align: center; } }

.mesin { position: relative; width: 230px; margin-inline: auto; }
.mesin__kubah {
  position: relative; height: 168px; border-radius: 50% 50% 22px 22px;
  border: var(--garis) solid var(--tepi);
  background: linear-gradient(160deg, color-mix(in srgb, var(--sky-t) 88%, transparent), color-mix(in srgb, var(--papan) 92%, transparent));
  overflow: hidden;
}
.mesin__kubah::after {
  content: ''; position: absolute; left: 16%; top: 12%; width: 34%; height: 26%;
  background: color-mix(in srgb, #fff 72%, transparent); border-radius: 50%; rotate: -22deg;
}
.kapsul { position: absolute; width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid var(--tepi); }
.kapsul::after { content:''; position:absolute; inset: 0 0 50% 0; background: color-mix(in srgb, #fff 55%, transparent); border-radius: 999px 999px 0 0; }
.mesin.is-putar .kapsul { animation: kocok .42s ease-in-out infinite; }
@keyframes kocok {
  0%,100% { translate: 0 0 ; rotate: 0deg; }
  25% { translate: -6px -5px; rotate: -22deg; }
  75% { translate: 6px 4px; rotate: 18deg; }
}
.mesin__badan {
  height: 74px; border: var(--garis) solid var(--tepi); border-top: 0;
  border-radius: 0 0 var(--r-m) var(--r-m); background: var(--peach);
  display: grid; place-items: center; position: relative;
}
.mesin__tuas {
  width: 46px; height: 46px; border-radius: 50%;
  border: var(--garis) solid var(--tepi); background: var(--kuning);
  display: grid; place-items: center; font-size: 20px;
  box-shadow: var(--bayang-sm); cursor: pointer;
  transition: rotate .5s var(--gerak);
}
.mesin.is-putar .mesin__tuas { rotate: 720deg; }
.mesin__lubang {
  position: absolute; bottom: -3px; left: 50%; translate: -50% 50%;
  width: 66px; height: 26px; background: var(--ink);
  border: var(--garis) solid var(--tepi); border-radius: 8px;
}
.hadiah {
  margin-top: 18px; padding: 16px 20px;
  border: var(--garis) dashed var(--tepi); border-radius: var(--r-m);
  background: var(--kuning-t); display: none;
}
.hadiah.is-tampil { display: block; animation: muncul .5s var(--gerak); }
.kode-kupon {
  font-family: var(--f-judul); font-weight: 600; font-size: 25px; letter-spacing: .08em;
  background: var(--papan); border: var(--garis) dashed var(--tepi);
  border-radius: var(--r-s); padding: 10px 18px; display: inline-block; margin: 8px 0;
  cursor: pointer; user-select: all;
}

/* ================================================================ ULASAN */
.kisi-ulasan { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.ulasan {
  background: var(--papan); border: var(--garis) solid var(--tepi);
  border-radius: var(--r-l); padding: 24px 22px 20px; box-shadow: var(--bayang-sm);
  position: relative; transition: transform .2s var(--gerak);
}
.ulasan:nth-child(even) { rotate: .8deg; }
.ulasan:nth-child(odd)  { rotate: -.8deg; }
.ulasan:hover { transform: translateY(-6px); rotate: 0deg; box-shadow: var(--bayang); }
.ulasan__bintang { color: var(--kuning); font-size: 17px; letter-spacing: 2px; -webkit-text-stroke: 1px var(--tepi); }
.ulasan p { font-size: 15px; line-height: 1.65; margin: 10px 0 14px; }
.ulasan__siapa { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.ulasan__avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  border: 2.5px solid var(--tepi); display: grid; place-items: center;
  font-family: var(--f-judul); font-weight: 600; font-size: 16px; background: var(--mint);
}

/* ================================================================ FAQ */
.faq { border: var(--garis) solid var(--tepi); border-radius: var(--r-m); background: var(--papan); margin-bottom: 12px; box-shadow: var(--bayang-sm); overflow: hidden; }
.faq summary {
  cursor: pointer; list-style: none; padding: 17px 54px 17px 20px;
  font-family: var(--f-judul); font-weight: 600; font-size: 16.5px; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 16px; top: 50%; translate: 0 -50%;
  width: 30px; height: 30px; display: grid; place-items: center;
  background: var(--kuning); border: 2.5px solid var(--tepi); border-radius: 50%;
  font-size: 19px; transition: rotate .25s var(--gerak);
}
.faq[open] summary::after { rotate: 135deg; background: var(--peach); color: #fff; }
.faq[open] summary { background: var(--kuning-t); }
.faq__isi { padding: 4px 20px 20px; font-size: 15.2px; color: var(--ink-soft); line-height: 1.72; }

/* ================================================================ LINIMASA */
.linimasa { position: relative; padding-left: 34px; }
.linimasa::before { content: ''; position: absolute; left: 13px; top: 8px; bottom: 8px; width: 3px; background: repeating-linear-gradient(var(--tepi) 0 7px, transparent 7px 14px); }
.linimasa li { position: relative; padding-bottom: 22px; }
.linimasa li::before {
  content: ''; position: absolute; left: -34px; top: 3px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--papan); border: var(--garis) solid var(--tepi);
}
.linimasa li.is-lewat::before { background: var(--mint); }
.linimasa li.is-kini::before  { background: var(--peach); animation: denyut 1.6s ease-in-out infinite; }
.linimasa b { font-family: var(--f-judul); font-size: 16.5px; display: block; }
.linimasa span { font-size: 13.5px; color: var(--ink-mute); }

/* ================================================================ KERANJANG */
.krj-baris {
  display: grid; grid-template-columns: 92px 1fr auto; gap: 16px; align-items: center;
  padding: 16px; background: var(--papan);
  border: var(--garis) solid var(--tepi); border-radius: var(--r-m);
  box-shadow: var(--bayang-sm); margin-bottom: 14px;
}
.krj-baris img { width: 92px; height: 92px; object-fit: cover; border: 2.5px solid var(--tepi); border-radius: var(--r-s); }
.krj-baris__nama { font-family: var(--f-judul); font-weight: 600; font-size: 16.5px; line-height: 1.25; }
.krj-baris__meta { font-size: 13px; color: var(--ink-mute); }
@media (max-width: 620px) { .krj-baris { grid-template-columns: 68px 1fr; } .krj-baris img { width: 68px; height: 68px; } .krj-baris__aksi { grid-column: 1 / -1; } }

.stepper { display: inline-flex; align-items: center; border: var(--garis) solid var(--tepi); border-radius: 999px; overflow: hidden; background: var(--papan); }
.stepper button { width: 34px; height: 34px; border: 0; background: var(--kuning-t); cursor: pointer; font-family: var(--f-judul); font-size: 18px; }
.stepper button:hover { background: var(--kuning); }
.stepper span { min-width: 38px; text-align: center; font-family: var(--f-judul); font-weight: 600; }

/* Kartu ringkasan hanya boleh menempel kalau dia elemen terakhir di kolomnya.
   Kartu menempel yang masih punya tetangga di bawahnya pasti bertabrakan:
   ruang aslinya tetap di alur halaman, sementara kartunya bergeser turun. */
.ringkasan { position: static; }
.ringkasan:last-child { position: sticky; top: 96px; }
.ringkasan__baris { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 15px; }
.ringkasan__baris--total { border-top: 3px dashed var(--tepi); margin-top: 8px; padding-top: 14px; font-family: var(--f-judul); font-weight: 600; font-size: 21px; }

.kosong { text-align: center; padding: 60px 20px; }
.kosong .maskot { width: 140px; margin: 0 auto 20px; }

/* ================================================================ TOAST */
.toast-wadah { position: fixed; left: 50%; bottom: 24px; translate: -50% 0; z-index: 200; display: grid; gap: 10px; width: min(92vw, 400px); }
.toast {
  display: flex; align-items: center; gap: 12px;
  background: var(--papan); border: var(--garis) solid var(--tepi);
  border-radius: var(--r-m); padding: 13px 18px; box-shadow: var(--bayang);
  font-family: var(--f-judul); font-weight: 600; font-size: 14.5px;
  animation: muncul .4s var(--gerak);
}
.toast--ok    { background: var(--mint-t); }
.toast--salah { background: var(--pink-t); }
.toast__emoji { font-size: 22px; }
.toast.is-pergi { animation: muncul .3s var(--gerak) reverse forwards; }

/* konfeti */
.konfeti { position: fixed; inset: 0; pointer-events: none; z-index: 300; overflow: hidden; }
.konfeti i {
  position: absolute; width: 10px; height: 14px; border-radius: 2px;
  animation: konfeti-jatuh var(--dur, 1.6s) linear forwards;
}
@keyframes konfeti-jatuh {
  0%   { transform: translate(0,0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx,0), 105vh) rotate(var(--rot,720deg)); opacity: 0; }
}

/* ================================================================ FOOTER */
.kaki {
  background: var(--ink); color: var(--krem);
  border-top: var(--garis) solid var(--tepi);
  padding: clamp(44px, 5vw, 68px) 0 26px; margin-top: clamp(48px, 6vw, 80px);
  position: relative;
}
.kaki::before {
  content: ''; position: absolute; top: -22px; left: 0; right: 0; height: 24px;
  background: radial-gradient(circle at 12px -4px, transparent 14px, var(--ink) 15px);
  background-size: 30px 24px;
}
.kaki__kisi { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 34px; }
@media (max-width: 880px) { .kaki__kisi { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 520px) { .kaki__kisi { grid-template-columns: 1fr; } }
.kaki h4 { font-size: 14px; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 14px; color: var(--kuning); }
.kaki li { margin-bottom: 9px; }
.kaki a { text-decoration: none; font-size: 14.6px; opacity: .88; transition: all .16s; }
.kaki a:hover { opacity: 1; text-decoration: underline wavy var(--kuning); text-underline-offset: 4px; }
.kaki__logo img { height: 60px; width: auto; filter: brightness(0) invert(1); }
.kaki__bawah {
  margin-top: 36px; padding-top: 20px; border-top: 2px dashed color-mix(in srgb, var(--krem) 32%, transparent);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 12.6px; opacity: .8;
}
.hits {
  display: inline-flex; gap: 3px; font-family: ui-monospace, monospace; font-size: 17px;
}
.hits i {
  background: var(--kuning); color: var(--ink); border-radius: 5px;
  padding: 3px 7px; font-style: normal; font-weight: 700;
  border: 2px solid color-mix(in srgb, var(--krem) 40%, transparent);
}

/* ================================================================ WA APUNG */
.wa-apung {
  position: fixed; left: 18px; bottom: 18px; z-index: 80;
  display: inline-flex; align-items: center; gap: 9px;
  background: #25D366; color: #06331A;
  border: var(--garis) solid var(--tepi); border-radius: 999px;
  padding: 11px 19px 11px 14px; box-shadow: var(--bayang);
  font-family: var(--f-judul); font-weight: 600; font-size: 14.5px; text-decoration: none;
  transition: transform .18s var(--gerak);
}
.wa-apung:hover { transform: translateY(-4px) rotate(-2deg); box-shadow: var(--bayang-lg); }
@media (max-width: 700px) { .wa-apung span { display: none; } .wa-apung { padding: 12px; left: 12px; bottom: 12px; } }

/* ================================================================ TABEL */
.tabel { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.6px; }
.tabel th, .tabel td { padding: 12px 14px; text-align: left; border-bottom: 2px dashed color-mix(in srgb, var(--ink) 22%, transparent); }
.tabel th { font-family: var(--f-judul); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-mute); }
.tabel tbody tr:hover { background: var(--kuning-t); }
.gulung { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.lencana {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-judul); font-weight: 600; font-size: 12.5px;
  border: 2.5px solid var(--tepi); border-radius: 999px; padding: 3px 12px; background: var(--papan);
}
.lencana--kuning { background: var(--kuning); } .lencana--mint { background: var(--mint); }
.lencana--pink { background: var(--pink); }     .lencana--ungu { background: var(--ungu); color:#fff; }
.lencana--peach { background: var(--peach); color:#fff; } .lencana--sky { background: var(--sky); }
.lencana--abu { background: var(--abu-t); }

/* ================================================================ PROSA */
.prosa { max-width: 72ch; }
.prosa h2 { font-size: clamp(24px, 3vw, 32px); margin: 40px 0 14px; }
.prosa h3 { font-size: 21px; margin: 28px 0 10px; }
.prosa p { color: var(--ink-soft); line-height: 1.78; }
.prosa ul { margin: 0 0 18px; padding-left: 4px; }
.prosa ul li { position: relative; padding-left: 30px; margin-bottom: 9px; color: var(--ink-soft); }
.prosa ul li::before { content: '✿'; position: absolute; left: 4px; color: var(--peach); }
.prosa strong { color: var(--ink); }
.prosa a { color: var(--peach); font-weight: 700; }

/* ================================================================ UTIL */
.tengah { text-align: center; }
.tengah .lede { margin-inline: auto; }
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:26px}.mt-4{margin-top:40px}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:26px}
.dua-kolom { display: grid; grid-template-columns: 1.4fr .9fr; gap: clamp(22px, 3vw, 42px); align-items: start; }
@media (max-width: 900px) { .dua-kolom { grid-template-columns: 1fr; } }
.tumpuk { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ================================================================ LAB NATA
   Perancang 3D di browser.
   Desktop : pratinjau menempel di kiri, pengaturan per tab di kanan.
   Ponsel  : pratinjau menempel di atas, tab menempel tepat di bawahnya,
             harga + tombol kirim menempel di dasar layar.
   ================================================================ */
.lab-atas { padding: clamp(22px, 4vw, 46px) 0 clamp(14px, 2.5vw, 26px); }
.lab-atas__isi { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; }
.lab-atas__lede { color: var(--ink-soft); max-width: 58ch; margin: 10px 0 0; font-size: 15.5px; }

.lab-wadah { padding-bottom: clamp(36px, 5vw, 64px); }

.lab {
  --tinggi-panggung: clamp(360px, calc(100vh - 240px), 620px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 410px);
  gap: 22px; align-items: start;
}
.lab__kiri  { position: sticky; top: 88px; display: grid; gap: 14px; min-width: 0; }
.lab__kanan { min-width: 0; }

/* ---- panggung 3D ---- */
.lab__panggung {
  position: relative; height: var(--tinggi-panggung);
  border: var(--garis) solid var(--tepi); border-radius: var(--r-l);
  overflow: hidden; box-shadow: var(--bayang-lg);
  background:
    radial-gradient(circle at 30% 20%, var(--kuning-t), transparent 60%),
    radial-gradient(circle at 75% 80%, var(--sky-t), transparent 62%),
    var(--krem);
}
.lab__panggung canvas { width: 100% !important; height: 100% !important; display: block; touch-action: none; }
.lab__panggung.is-kuas canvas { cursor: crosshair; }
.lab__alat { position: absolute; top: 12px; right: 12px; z-index: 4; display: flex; flex-direction: column; gap: 8px; }
.lab__alat .bulat { width: 42px; height: 42px; font-size: 17px; }
.lab__alat .bulat[aria-pressed="true"] { background: var(--mint); }
.lab__petunjuk {
  position: absolute; left: 12px; bottom: 12px; z-index: 3; margin: 0;
  max-width: calc(100% - 24px); pointer-events: none;
  font-family: var(--f-judul); font-weight: 600; font-size: 12.5px; line-height: 1.3;
  background: color-mix(in srgb, var(--papan) 88%, transparent);
  border: 2px solid var(--tepi); border-radius: 999px; padding: 5px 13px;
}
.lab__panggung.is-kuas .lab__petunjuk { background: var(--peach); color: #fff; }
.lab__muat {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 5;
  background: color-mix(in srgb, var(--krem) 82%, transparent); backdrop-filter: blur(3px);
  font-family: var(--f-judul); font-weight: 600; text-align: center; padding: 16px;
}
.lab__putaran { width: 46px; height: 46px; border: 5px solid var(--tepi); border-top-color: var(--peach); border-radius: 50%; animation: putar .9s linear infinite; margin: 0 auto 12px; }

/* ---- bar harga + kirim ---- */
.lab__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--kuning-t); border: var(--garis) solid var(--tepi);
  border-radius: var(--r-m); box-shadow: var(--bayang-sm);
  padding: 12px 14px 12px 18px;
  transition: transform .3s var(--gerak);
}
.lab__bar-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.lab__bar-label { font-size: 12px; font-weight: 800; color: var(--ink-mute); }
.lab__bar-info b { font-family: var(--f-judul); font-weight: 600; font-size: 25px; }
.lab__bar-rinci { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lab__bar .tbl { flex-shrink: 0; }
.lab__catatan { margin: 14px 0 0; max-width: 70ch; }

/* ---- tab pengaturan ---- */
.lab__tab { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin-bottom: 12px; }
.lab__tab button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 58px; padding: 6px 2px; cursor: pointer;
  background: var(--papan); color: var(--ink);
  border: var(--garis) solid var(--tepi); border-radius: var(--r-s); box-shadow: var(--bayang-sm);
  font-family: var(--f-judul); font-weight: 600; font-size: 12.5px;
  transition: transform .16s var(--gerak), background .16s;
}
.lab__tab button > span { font-size: 19px; line-height: 1; }
.lab__tab button:hover { transform: translateY(-2px); }
.lab__tab button[aria-selected="true"] { background: var(--peach); color: #fff; }

.lab__kontrol {
  background: var(--papan); border: var(--garis) solid var(--tepi);
  border-radius: var(--r-l); box-shadow: var(--bayang); padding: 4px 20px 16px;
}
.lab__hal:not([hidden]) { animation: muncul .3s var(--gerak); }
.lab__grup { border-bottom: 2px dashed color-mix(in srgb, var(--ink) 22%, transparent); padding: 16px 0; }
.lab__grup:last-child { border-bottom: 0; }
.lab__grup > h4 {
  font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.lab__grup > h4::before { content: ''; width: 12px; height: 12px; flex-shrink: 0; border-radius: 50%; background: var(--peach); border: 2px solid var(--tepi); }
.opsional { font-style: normal; font-weight: 400; color: var(--ink-mute); text-transform: none; letter-spacing: 0; }

.geser-baris > span:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.geser-baris > span:first-child b {
  font-size: 13px; background: var(--kuning-t); border: 2px solid var(--tepi);
  border-radius: 999px; padding: 1px 10px; min-width: 56px; text-align: center; white-space: nowrap;
}
.bidang .bidang__bantu { display: block; }
.bidang.cek { display: flex; align-items: center; gap: 10px; }
.bidang.cek > span { margin: 0; font-weight: 600; font-size: 14px; }
.bidang.cek input { width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--peach); }

.font-kini {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px 9px 14px; margin-bottom: 16px; font-size: 14px;
  background: var(--ungu-t); border: 2px dashed var(--tepi); border-radius: var(--r-s);
}

/* ---- penggeser ---- */
.geser { width: 100%; height: 34px; margin: 2px 0; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
.geser::-webkit-slider-runnable-track { height: 12px; background: var(--kuning-t); border: 2.5px solid var(--tepi); border-radius: 999px; }
.geser::-webkit-slider-thumb {
  -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10.5px;
  background: var(--peach); border: 2.5px solid var(--tepi); border-radius: 50%; box-shadow: 2px 2px 0 var(--tepi);
}
.geser::-moz-range-track { height: 12px; background: var(--kuning-t); border: 2.5px solid var(--tepi); border-radius: 999px; }
.geser::-moz-range-thumb { width: 24px; height: 24px; background: var(--peach); border: 2.5px solid var(--tepi); border-radius: 50%; }
.geser:focus-visible { outline: 3px dashed var(--peach); outline-offset: 2px; border-radius: 999px; }

/* ---- sumber teks / gambar ---- */
.tab-lab { display: flex; gap: 8px; margin-bottom: 14px; }
.tab-lab button {
  flex: 1; min-height: 44px; padding: 8px; cursor: pointer;
  font-family: var(--f-judul); font-weight: 600; font-size: 14px;
  background: var(--papan); color: var(--ink);
  border: var(--garis) solid var(--tepi); border-radius: 999px; box-shadow: var(--bayang-sm);
}
.tab-lab button.is-aktif { background: var(--ink); color: var(--krem); }

/* ---- pilihan font ---- */
.font-grup { font-family: var(--f-judul); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); margin: 18px 0 8px; }
.font-kisi { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.font-pilih {
  min-height: 52px; padding: 6px 10px; cursor: pointer;
  background: var(--papan); color: var(--ink);
  border: var(--garis) solid var(--tepi); border-radius: var(--r-s); box-shadow: var(--bayang-sm);
  font-size: 19px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: transform .14s var(--gerak), background .14s;
}
.font-pilih:hover { transform: translateY(-2px); }
.font-pilih.is-aktif { background: var(--ink); color: var(--krem); box-shadow: 3px 3px 0 var(--peach); }

/* ---- area unggah ----
   Harus display:block. Sebagai <label> bawaan ia inline, dan bingkai
   putus-putusnya pecah mengikuti baris teks. */
.jatuhkan {
  display: block; position: relative;
  border: var(--garis) dashed var(--tepi); border-radius: var(--r-m);
  padding: 20px 16px; text-align: center; cursor: pointer;
  background: var(--kuning-t); transition: background .18s, transform .18s var(--gerak);
}
.jatuhkan--kecil { padding: 14px; }
.jatuhkan:hover, .jatuhkan.is-atas { background: var(--mint-t); }
.jatuhkan:focus-within { outline: 3px dashed var(--peach); outline-offset: 3px; }
.jatuhkan input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.jatuhkan__ikon { display: block; font-size: 30px; line-height: 1; margin-bottom: 6px; }
.jatuhkan strong { display: block; font-family: var(--f-judul); font-weight: 600; font-size: 15px; }
.jatuhkan small { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 4px; line-height: 1.45; }
.lab__laci .jatuhkan { margin-bottom: 16px; }

/* ---- pemilih warna ----
   Radio ditaruh di dalam label ber-position:relative. Radio yang absolute
   tanpa induk ber-position mendarat di koordinat halaman, dan klik
   menggulung halaman ke sana. */
.pilih-warna { display: flex; flex-wrap: wrap; gap: 8px; }
.pilih-warna .swatch {
  position: relative; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  border: 3px solid var(--tepi); box-shadow: var(--bayang-sm);
  background: var(--w, #fff); transition: transform .16s var(--gerak);
}
.pilih-warna .swatch input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer;
}
.pilih-warna .swatch:hover { transform: scale(1.12) rotate(-8deg); }
.pilih-warna .swatch:focus-within { outline: 3px dashed var(--peach); outline-offset: 3px; }
.pilih-warna .swatch.is-pilih { transform: scale(1.16); }
.pilih-warna .swatch.is-pilih::after {
  content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font-weight: 900; font-size: 15px; color: #fff; text-shadow: 0 0 3px rgba(0,0,0,.85);
}
#lKuas.is-aktif { background: var(--peach); color: #fff; }

/* ---- ponsel & tablet kecil ---- */
@media (max-width: 900px) {
  .hal-lab .kepala { position: relative; }
  .hal-lab .wa-apung, .hal-lab .nata-pojok { display: none; }
  .hal-lab .toast-wadah { bottom: calc(100px + env(safe-area-inset-bottom)); }

  /* Judul dipadatkan jadi satu baris supaya pratinjau DAN tab sudah
     kelihatan di layar pertama, tidak tertutup bar harga. */
  .lab-atas { padding: 12px 0 10px; }
  .lab-atas__isi { flex-wrap: nowrap; align-items: center; gap: 10px; }
  .lab-atas .mata { display: none; }
  .lab-atas h1 { font-size: 26px; margin-top: 0; }
  .lab-atas__lede { display: none; }
  .lab-atas .tbl { flex-shrink: 0; padding: 8px 12px; font-size: 12.5px; }
  .lab-wadah { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }

  .lab { --tinggi-panggung: clamp(220px, 40svh, 360px); grid-template-columns: 1fr; gap: 0; }
  .lab__kiri { top: 0; z-index: 30; gap: 0; margin: 0 -20px; }
  .lab__panggung {
    border-left: 0; border-right: 0; border-radius: 0 0 26px 26px;
    box-shadow: 0 4px 0 var(--tepi);
  }
  .lab__alat { flex-direction: row; top: 10px; right: 10px; gap: 6px; }
  .lab__alat .bulat { width: 38px; height: 38px; font-size: 15px; box-shadow: 2px 2px 0 var(--tepi); }
  .lab__petunjuk { left: 10px; bottom: 10px; font-size: 11.5px; }

  .lab__tab {
    position: sticky; top: calc(var(--tinggi-panggung) + 4px); z-index: 25;
    margin: 0 -20px 12px; padding: 12px 14px 10px; gap: 5px;
    background: color-mix(in srgb, var(--krem) 95%, transparent); backdrop-filter: blur(8px);
    border-bottom: 2px dashed color-mix(in srgb, var(--ink) 20%, transparent);
  }
  .lab__tab button { min-height: 50px; font-size: 11.5px; border-width: 2.5px; box-shadow: none; }
  .lab__tab button > span { font-size: 18px; }
  .lab__tab button:hover { transform: none; }

  .lab__kontrol { padding: 2px 16px 14px; border-radius: var(--r-m); box-shadow: var(--bayang-sm); }

  .lab__bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    border-width: var(--garis) 0 0 0; border-radius: 22px 22px 0 0;
    background: var(--papan); box-shadow: 0 -6px 0 color-mix(in srgb, var(--ink) 10%, transparent);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) 18px;
  }
  .lab__bar.is-sembunyi { transform: translateY(120%); }
  .lab__bar-info b { font-size: 21px; }
  .lab__bar .tbl { padding: 12px 18px; font-size: 15px; }
  .lab__catatan { font-size: 12.5px; }

  .font-kisi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .font-pilih { font-size: 17px; min-height: 50px; }
  .font-pilih:hover { transform: none; }
  .pilih-warna { gap: 10px; }
  .pilih-warna .swatch { width: 40px; height: 40px; }
  .pilih-warna .swatch:hover { transform: none; }
  .pilih-warna .swatch.is-pilih { transform: scale(1.1); }
}
@media (max-width: 380px) {
  .sembunyi-hp { display: none; }
  .lab__tab button { font-size: 10.5px; }
  .lab__bar-label { display: none; }
  .lab__bar .tbl { padding: 11px 14px; font-size: 14px; }
}

/* ================================================================ ADMIN */
.adm { display: grid; grid-template-columns: 246px 1fr; min-height: 100vh; }
@media (max-width: 900px) { .adm { grid-template-columns: 1fr; } }
.adm__sisi {
  background: var(--ink); color: var(--krem); padding: 22px 18px;
  border-right: var(--garis) solid var(--tepi);
}
@media (max-width: 900px) { .adm__sisi { border-right: 0; border-bottom: var(--garis) solid var(--tepi); } }
.adm__sisi img { height: 44px; filter: brightness(0) invert(1); margin-bottom: 22px; }
.adm__nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: var(--r-s); text-decoration: none;
  font-family: var(--f-judul); font-weight: 600; font-size: 15px; margin-bottom: 5px;
  transition: all .16s;
}
.adm__nav a:hover { background: color-mix(in srgb, var(--krem) 14%, transparent); }
.adm__nav a.is-aktif { background: var(--peach); color: #fff; }
.adm__isi { padding: clamp(20px, 3vw, 34px); min-width: 0; }
.adm__kepala { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }

.kisi-stat { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); margin-bottom: 26px; }
.stat { background: var(--papan); border: var(--garis) solid var(--tepi); border-radius: var(--r-m); padding: 18px; box-shadow: var(--bayang-sm); }
.stat b { display: block; font-family: var(--f-judul); font-size: 30px; font-weight: 600; line-height: 1.1; }
.stat span { font-size: 12.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-mute); }
.stat:nth-child(1) { background: var(--kuning-t); } .stat:nth-child(2) { background: var(--mint-t); }
.stat:nth-child(3) { background: var(--pink-t); }   .stat:nth-child(4) { background: var(--sky-t); }

.masuk-kotak { max-width: 400px; margin: 8vh auto; }

/* pesan flash */
.flash {
  display: flex; align-items: center; gap: 10px;
  border: var(--garis) solid var(--tepi); border-radius: var(--r-m);
  padding: 13px 18px; margin-bottom: 20px; box-shadow: var(--bayang-sm);
  font-family: var(--f-judul); font-weight: 600; font-size: 14.5px;
}
.flash--ok { background: var(--mint-t); }
.flash--salah { background: var(--pink-t); }

/* cetak */
@media print {
  .kepala, .kaki, .wa-apung, .nata-pojok, .pengumuman, .boot { display: none !important; }
  body { background: #fff; }
  .kartu, .jendela { box-shadow: none; }
}

/* ================================================================ PERBAIKAN
   Logo memakai tinta navy yang sama dengan teks, jadi di mode malam
   harus dibalik supaya tetap terbaca.
   ================================================================ */
.kepala__logo img { height: 50px; }
@media (max-width: 900px) { .kepala__logo img { height: 42px; } }

[data-tema="malam"] .kepala__logo img,
[data-tema="malam"] .logo-tinta { filter: brightness(0) invert(1); }

[data-tema="malam"] .hero__latar   { opacity: .3; }
[data-tema="malam"] .hero__latar-2 { opacity: .24; }

/* Tombol apung tidak menutupi teks di layar sempit. */
@media (max-width: 620px) { .kaki { padding-bottom: 84px; } }

/* Di iOS, kolom isian dengan huruf di bawah 16px membuat Safari memperbesar
   halaman begitu disentuh. */
@media (max-width: 900px) {
  .bidang input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]), .bidang select, .bidang textarea, .isian { font-size: 16px; }
}

/* ================================================================ KIRIM DESAIN LAB
   Lembar yang muncul saat "Kirim ke Nata": di desktop kotak di tengah,
   di ponsel naik dari bawah seperti lembar bagikan.
   ================================================================ */
.dialog-kirim {
  width: min(560px, calc(100% - 24px)); max-height: calc(100dvh - 24px);
  padding: 0; overflow: auto;
  background: var(--papan); color: var(--ink);
  border: var(--garis) solid var(--tepi); border-radius: var(--r-l); box-shadow: var(--bayang-lg);
}
.dialog-kirim::backdrop { background: rgba(11, 42, 89, .45); backdrop-filter: blur(3px); }
.dialog-kirim[open] { animation: muncul .3s var(--gerak); }
.dialog-kirim__isi { padding: 16px 20px 20px; }
.dialog-kirim__kepala { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dialog-kirim__kepala .bulat { width: 40px; height: 40px; font-size: 16px; }
.dialog-kirim__pratinjau {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: center;
  background: var(--kuning-t); border: 2px dashed var(--tepi); border-radius: var(--r-m);
  padding: 10px; margin-bottom: 14px;
}
.dialog-kirim__pratinjau img {
  /* height:auto wajib: tanpa itu atribut height="300" mengalahkan aspect-ratio
     dan gambarnya jadi memanjang lalu terpotong. */
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border: 2px solid var(--tepi); border-radius: var(--r-s); background: var(--krem);
}
.dialog-kirim__pratinjau strong { display: block; font-family: var(--f-judul); font-weight: 600; font-size: 18px; line-height: 1.2; overflow-wrap: anywhere; }
.dialog-kirim__pratinjau .kecil { display: block; margin: 2px 0 4px; }
.dialog-kirim__pratinjau b { font-family: var(--f-judul); font-weight: 600; font-size: 20px; }
.dialog-kirim__info { margin: 0 0 10px; }
.dialog-kirim__galat {
  background: var(--pink-t); border: 2px solid var(--tepi); border-radius: var(--r-s);
  padding: 8px 12px; margin: 0 0 10px; font-weight: 700; font-size: 14px;
}
.dialog-kirim__aksi { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.dialog-kirim__status { font-family: var(--f-judul); font-weight: 600; text-align: center; margin: 18px 0 12px; }
.dialog-kirim__progres { height: 16px; margin-bottom: 8px; overflow: hidden; background: var(--krem); border: 2.5px solid var(--tepi); border-radius: 999px; }
.dialog-kirim__progres i { display: block; height: 100%; width: 0; transition: width .25s; background: repeating-linear-gradient(45deg, var(--peach) 0 10px, var(--pink) 10px 20px); }
.dialog-kirim__sukses { text-align: center; padding: 6px 0 4px; }
.dialog-kirim__sukses > span { display: block; font-size: 40px; line-height: 1.1; }
.dialog-kirim__sukses b { font-family: ui-monospace, monospace; font-size: 15px; }

@media (max-width: 600px) {
  .dialog-kirim {
    width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0;
    border-width: var(--garis) 0 0; border-radius: 24px 24px 0 0;
  }
  .dialog-kirim__isi { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .dialog-kirim__pratinjau { grid-template-columns: 112px minmax(0, 1fr); }
  .dialog-kirim__aksi .tbl { flex: 1; }
  /* Tombol kirim menempel di bawah lembar, jadi tidak perlu digulung dulu. */
  .dialog-kirim__aksi {
    position: sticky; bottom: 0;
    background: var(--papan); margin: 8px -20px 0; padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
    border-top: 2px dashed color-mix(in srgb, var(--ink) 18%, transparent);
  }
}

/* ---- Admin: kartu request Lab ---- */
.lab-admin { display: grid; gap: 16px; }
.lab-admin__kartu { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; padding: 16px; }
.lab-admin__foto { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.lab-admin__foto a:first-child { grid-column: 1 / -1; }
.lab-admin__foto img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  background: var(--krem); border: 2.5px solid var(--tepi); border-radius: var(--r-s);
}
.lab-admin__tanpa-foto {
  grid-column: 1 / -1; aspect-ratio: 4 / 3; display: grid; place-items: center; font-size: 36px;
  background: var(--abu-t); border: 2.5px dashed var(--tepi); border-radius: var(--r-s);
}
.lab-admin__atas { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.lab-admin__catatan { background: var(--kuning-t); border-radius: var(--r-s); padding: 8px 12px; font-size: 14px; }
.lab-admin__berkas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.lab-admin__konfig { margin-top: 12px; }
.lab-admin__konfig summary { cursor: pointer; font-family: var(--f-judul); font-weight: 600; font-size: 14px; }
.lab-admin__konfig .tabel th, .lab-admin__konfig .tabel td { padding: 6px 10px; font-size: 13.5px; }
.lab-admin__konfig .tabel th { text-transform: none; letter-spacing: 0; width: 42%; }
.lab-admin__mentah { white-space: pre-wrap; background: var(--abu-t); padding: 9px; border-radius: 9px; }
@media (max-width: 760px) { .lab-admin__kartu { grid-template-columns: 1fr; } }

/* ================================================================ POSISI LUBANG GANTUNGAN
   Kompas 3×3: delapan panah posisi cepat, di tengahnya lingkaran yang bisa
   diputar. Penggeser di sebelahnya untuk derajat yang presisi.
   ================================================================ */
.sudut-baris .sudut-judul {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--f-judul); font-weight: 600; font-size: 14px; margin-bottom: 8px;
}
.sudut-baris .sudut-judul b {
  font-size: 13px; background: var(--kuning-t); border: 2px solid var(--tepi);
  border-radius: 999px; padding: 1px 10px; min-width: 56px; text-align: center;
}
.sudut-kendali { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sudut-geser { flex: 1; min-width: 140px; }
.sudut-kompas { display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); gap: 5px; flex-shrink: 0; }
.sudut-kompas button {
  display: grid; place-items: center; padding: 0; cursor: pointer;
  font-size: 19px; font-weight: 800; line-height: 1;
  background: var(--papan); color: var(--ink);
  border: 2.5px solid var(--tepi); border-radius: var(--r-s);
  transition: transform .14s var(--gerak), background .14s;
}
.sudut-kompas button:hover { transform: scale(1.08); }
.sudut-kompas button[aria-pressed="true"] { background: var(--ink); color: var(--krem); }
.sudut-dial {
  --sudut: 180;
  position: relative; border-radius: 50%; cursor: grab; touch-action: none;
  background: radial-gradient(circle, var(--papan) 52%, var(--kuning-t) 54%);
  border: var(--garis) solid var(--tepi); box-shadow: var(--bayang-sm);
}
.sudut-dial:active { cursor: grabbing; }
.sudut-dial::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--ink);
}
.sudut-dial i {
  position: absolute; left: 50%; top: 50%; width: 13px; height: 3px; margin-top: -1.5px;
  background: var(--ink); border-radius: 3px; transform-origin: 0 50%;
  transform: rotate(calc(var(--sudut) * -1deg));
}
.sudut-dial i::after {
  content: ''; position: absolute; right: -8px; top: 50%;
  width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: var(--peach); border: 2.5px solid var(--ink);
}
@media (max-width: 900px) {
  .sudut-kompas { grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(3, 46px); }
  .sudut-kompas button:hover { transform: none; }
}

/* ================================================================ PENAWARAN LAB
   Halaman tautan harga fix untuk pemohon, dan kartu penawaran di admin.
   ================================================================ */
.penawaran-foto {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  background: var(--krem); border: var(--garis) solid var(--tepi); border-radius: var(--r-m);
}
.penawaran-rinci { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 10px 0 14px; font-size: 14px; }
.penawaran-rinci dt { color: var(--ink-mute); font-weight: 700; }
.penawaran-rinci dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.penawaran-total {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  margin: 16px 0; padding: 14px 16px;
  background: var(--kuning-t); border: 2px dashed var(--tepi); border-radius: var(--r-m);
}
.penawaran-total > span { font-size: 13px; font-weight: 800; color: var(--ink-mute); }
.penawaran-total b { font-family: var(--f-judul); font-weight: 600; font-size: clamp(28px, 5vw, 38px); line-height: 1.1; }
.penawaran-bayar {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 15px; line-height: 1.7;
  background: var(--papan); border: 2px solid var(--tepi); border-radius: var(--r-s);
  padding: 12px 14px; margin: 8px 0 12px; overflow-wrap: anywhere;
}
.penawaran-qris { margin: 0 0 12px; text-align: center; }
.penawaran-qris img {
  width: min(100%, 280px); height: auto; margin: 0 auto 6px; display: block;
  background: #fff; border: var(--garis) solid var(--tepi); border-radius: var(--r-m);
}
@media (max-width: 900px) { .penawaran-ringkas { order: -1; } }

.lab-admin__tawaran {
  margin-top: 12px; padding: 12px 14px;
  background: var(--mint-t); border: 2.5px solid var(--tepi); border-radius: var(--r-m);
}
.lab-admin__tawaran.is-baru { background: var(--kuning-t); box-shadow: 0 0 0 4px var(--peach); }
.lab-admin__tawaran-atas { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.lab-admin__tawaran-atas strong { font-family: var(--f-judul); font-weight: 600; font-size: 19px; }
.lab-admin__langkah { font-weight: 800; margin: 8px 0 0; }
.lab-admin__tawar {
  margin-top: 12px; padding: 10px 14px;
  border: 2px dashed color-mix(in srgb, var(--ink) 30%, transparent); border-radius: var(--r-m);
}
.lab-admin__tawar summary { cursor: pointer; font-family: var(--f-judul); font-weight: 600; font-size: 15px; }
.lab-admin__tawar form { margin-top: 12px; }

/* ================================================================ PEMBAYARAN
   Kartu rekening, formulir konfirmasi, dan pemeriksaan bukti di admin.
   ================================================================ */
.bayar-rek {
  background: var(--papan); border: var(--garis) solid var(--tepi);
  border-radius: var(--r-m); box-shadow: var(--bayang-sm); overflow: hidden;
}
.bayar-rek__kepala {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; background: var(--kuning); color: #1f1d3d;
  border-bottom: var(--garis) solid var(--tepi);
}
.bayar-rek__bank { font-family: var(--f-judul); font-weight: 700; font-size: 21px; line-height: 1.1; }
.bayar-rek__jenis { font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.bayar-rek__baris {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px;
  border-top: 2px dashed color-mix(in srgb, var(--ink) 18%, transparent);
}
.bayar-rek__kepala + .bayar-rek__baris { border-top: 0; }
.bayar-rek__baris > div { min-width: 0; }
.bayar-rek__baris small { display: block; font-size: 12px; font-weight: 800; color: var(--ink-mute); }
.bayar-rek__baris b { display: block; font-size: 18px; overflow-wrap: anywhere; }
.bayar-rek__baris b.mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .03em; }
.bayar-rek__baris--total { background: var(--mint-t); }
.bayar-rek__baris--total b { font-family: var(--f-judul); font-weight: 600; font-size: 24px; }
.bayar-rek .tbl { flex-shrink: 0; }
.bayar-lain { margin: 4px 0 14px; }
.bayar-lain summary { cursor: pointer; font-weight: 800; font-size: 14px; }
.bayar-pratinjau {
  display: block; width: auto; max-width: 100%; height: auto; max-height: 280px; margin: -4px 0 16px;
  border: var(--garis) solid var(--tepi); border-radius: var(--r-m);
}

.langkah-bayar { list-style: none; counter-reset: lb; margin: 0; padding: 0; }
.langkah-bayar > li { counter-increment: lb; position: relative; padding: 0 0 24px 46px; }
.langkah-bayar > li:last-child { padding-bottom: 0; }
.langkah-bayar > li::before {
  content: counter(lb); position: absolute; left: 0; top: -3px; width: 32px; height: 32px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--peach); color: #fff; border: 2.5px solid var(--tepi);
  font-family: var(--f-judul); font-weight: 700;
}
.langkah-bayar > li > b { display: block; font-family: var(--f-judul); font-weight: 600; font-size: 18px; margin-bottom: 2px; }
@media (max-width: 520px) {
  .langkah-bayar > li { padding-left: 0; padding-top: 42px; }
}

.adm__lencana {
  margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  display: inline-grid; place-items: center;
  background: var(--pink); color: #1f1d3d; font-size: 12.5px; font-weight: 800; line-height: 1;
}
.stat--tautan { color: inherit; text-decoration: none; transition: transform .16s; }
.stat--tautan:hover { transform: translate(-2px, -2px); }
.stat--sorot { background: var(--kuning-t); }

.konf {
  display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 14px; padding: 14px 0;
  border-top: 2px dashed color-mix(in srgb, var(--ink) 18%, transparent);
}
.konf:first-of-type { border-top: 0; padding-top: 4px; }
.konf--ditolak { opacity: .72; }
.konf__bukti {
  display: grid; place-items: center; aspect-ratio: 3 / 4; overflow: hidden;
  background: var(--krem); color: #1f1d3d; border: 2.5px solid var(--tepi); border-radius: var(--r-s);
  font-weight: 800; text-align: center; text-decoration: none;
}
.konf__bukti img { width: 100%; height: 100%; object-fit: cover; }
.konf__jumlah { font-family: var(--f-judul); font-weight: 600; font-size: 21px; }
.konf__cocok { font-weight: 800; color: #1f8a5b; }
.konf__beda { font-weight: 800; color: #c2410c; }
.konf__aksi { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 12px; }
.konf__tolak summary { list-style: none; cursor: pointer; }
.konf__tolak summary::-webkit-details-marker { display: none; }
.konf__tolak[open] { flex-basis: 100%; }
.konf__tolak form { margin-top: 10px; }
@media (max-width: 560px) { .konf { grid-template-columns: 84px minmax(0, 1fr); } }

/* ---------------- Admin: pengaturan warna Lab ---------------- */
.warna-chip {
  display: inline-block; width: 28px; height: 28px; flex-shrink: 0;
  background: var(--w, #fff); border: 2.5px solid var(--tepi); border-radius: 9px;
  vertical-align: middle; margin-right: 8px; box-shadow: var(--bayang-sm);
}
.warna-baris { display: flex; align-items: center; gap: 8px; }
.warna-baris .warna-chip { margin-right: 0; }
.warna-baris select, .warna-baris input[type="text"] { flex: 1; min-width: 0; }
.warna-bawaan { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.warna-bawaan .bidang { margin-bottom: 0; }

/* ================================================================ FIDGET CLICKER
   Daftar huruf: tiap huruf punya warna tombol dan warna hurufnya sendiri.
   ================================================================ */
.clicker-pesan {
  margin: 0 0 12px; padding: 10px 13px; border-radius: var(--r-s);
  background: var(--kuning-t); border: 2px dashed var(--tepi); font-size: 13.5px; font-weight: 700;
}
.clicker-huruf {
  padding: 12px 0; border-top: 2px dashed color-mix(in srgb, var(--ink) 18%, transparent);
}
.clicker-huruf:first-child { border-top: 0; padding-top: 2px; }
.clicker-huruf__kepala { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.clicker-huruf__nomor {
  width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--papan); border: 2.5px solid var(--tepi); border-radius: 9px;
  font-family: var(--f-judul); font-weight: 600; font-size: 17px; line-height: 1;
}
.clicker-huruf__baris { margin-bottom: 8px; }
.clicker-huruf__baris:last-child { margin-bottom: 0; }
.clicker-huruf__label {
  display: block; font-size: 12px; font-weight: 800; color: var(--ink-mute); margin-bottom: 5px;
}
.pilih-warna button.swatch { border: var(--garis) solid var(--tepi); padding: 0; cursor: pointer; }
.clicker-aksi { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.clicker-info {
  display: grid; gap: 4px 12px; grid-template-columns: auto minmax(0, 1fr);
  margin: 10px 0 0; font-size: 13px;
}
.clicker-info dt { color: var(--ink-mute); font-weight: 700; }
.clicker-info dd { margin: 0; font-weight: 700; }

/* Pemilih alat di Lab Nata: tab yang berupa tautan antar halaman. */
.tab-lab a {
  flex: 1; min-height: 44px; padding: 8px 12px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  text-align: center; text-decoration: none;
  font-family: var(--f-judul); font-weight: 600; font-size: 14px;
  background: var(--papan); color: var(--ink);
  border: var(--garis) solid var(--tepi); border-radius: 999px; box-shadow: var(--bayang-sm);
  transition: transform .14s var(--gerak), background .14s;
}
.tab-lab a:hover { transform: translateY(-2px); }
.tab-lab a.is-aktif { background: var(--ink); color: var(--krem); }
.tab-lab--alat { max-width: 470px; margin: 16px 0 0; }

/* Panel admin: yang menempel adalah seluruh kolom kanan, bukan satu kartunya.
   Kolomnya diberi tinggi maksimal selayar dan gulir sendiri, jadi tombol simpan
   tetap kelihatan tanpa pernah menutupi kartu di bawahnya. */
@media (min-width: 901px) {
  .adm .dua-kolom > aside {
    position: sticky; top: 20px;
    max-height: calc(100vh - 40px); overflow-y: auto;
    padding: 2px 4px 4px 2px; margin: -2px -4px -4px -2px;   /* ruang untuk bayangan kartu */
    scrollbar-width: thin;
  }
  .adm .ringkasan, .adm .ringkasan:last-child { position: static; }
}

/* Penyusun keping puzzle: kisi kecil untuk memindahkan tiap huruf. */
.susun { display: grid; gap: 4px; justify-content: start; margin-bottom: 10px; }
.susun__sel {
  width: 42px; height: 42px; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  font-family: var(--f-judul); font-weight: 600; font-size: 17px;
  background: transparent; color: var(--ink);
  border: 2px dashed color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 10px;
}
.susun__sel--isi {
  background: var(--papan); border: 2.5px solid var(--tepi); box-shadow: var(--bayang-sm);
}
.susun__sel--pilih { background: var(--peach); color: #fff; border-color: var(--tepi); }
.susun__sel--bisa { border-color: var(--peach); border-style: solid; }
.susun__sel:disabled { cursor: default; opacity: .55; }

/* Susunan keping bisa jadi lebar kalau hurufnya banyak — biar digulir mendatar. */
.susun { max-width: 100%; overflow-x: auto; padding-bottom: 4px; }

/* Pemilih ikon tambahan di Fidget Clicker. */
.ikon-grup { margin: 14px 0 4px; }
.ikon-kisi { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 6px; }
.ikon-pilih {
  width: 48px; height: 48px; padding: 0; cursor: pointer; line-height: 1;
  display: grid; place-items: center; font-size: 21px;
  background: var(--papan); color: var(--ink);
  border: var(--garis) solid var(--tepi); border-radius: var(--r-s); box-shadow: var(--bayang-sm);
  transition: transform .14s var(--gerak), background .14s;
}
.ikon-pilih:hover { transform: translateY(-2px); }
.ikon-pilih.is-aktif { background: var(--ink); color: var(--krem); box-shadow: 3px 3px 0 var(--peach); }
.ikon-sisi { margin-top: 8px; }
.ikon-sisi__label {
  display: block; font-size: 12px; font-weight: 800; color: var(--ink-mute); margin-bottom: 2px;
}

/* Admin: kartu reseller. */
.mitra-kartu--mati { opacity: .6; }
.mitra-logo {
  width: 46px; height: 46px; flex-shrink: 0; object-fit: contain;
  background: var(--papan); border: 2.5px solid var(--tepi); border-radius: 12px;
}
.mitra-logo--kosong { display: inline-block; background: var(--w, var(--peach)); }
.mitra-tautan code {
  display: inline-block; max-width: 100%; overflow-wrap: anywhere;
  background: var(--papan); border: 2px solid var(--tepi); border-radius: 8px;
  padding: 3px 8px; font-size: 12.5px; margin-right: 6px;
}

/* ========================= HALAMAN MITRA (RESELLER) =========================
   Kerangka ramping: logo + nama reseller, dua tombol alat, tanpa katalog. */
.kepala--mitra .kepala__in { gap: 12px; }
.kepala__logo--mitra {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit; min-width: 0;
}
.kepala__logo--mitra img {
  width: 46px; height: 46px; object-fit: cover;
  border-radius: 14px; border: 2px solid var(--tepi); background: var(--papan);
}
.kepala__logo--mitra b {
  font-size: 18px; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kepala--mitra .kepala__alat { margin-left: auto; gap: 8px; }

.kaki--mitra { padding: 34px 0; }
.kaki-mitra__in { text-align: center; display: grid; gap: 10px; justify-items: center; }
.kaki-mitra__nama { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 19px; }
.kaki-mitra__nama img { border-radius: 12px; border: 2px solid var(--tepi); object-fit: cover; }
.kaki-mitra__ket { margin: 0; max-width: 46ch; font-size: 14.6px; opacity: .85; }
.kaki-mitra__cetak { margin: 6px 0 0; font-size: 12.5px; opacity: .6; }

@media (max-width: 560px) {
  .kepala__logo--mitra b { font-size: 16px; max-width: 34vw; }
  .kepala--mitra .tbl--mini { padding: 8px 11px; }
}

/* ========================= SETORAN MITRA =========================
   Kartu tagihan di panel reseller dan daftar pemeriksaan di admin. */
.setor-kartu { margin-bottom: 14px; }
.setor-kartu__atas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: flex-start; }
.setor-kartu__angka { display: flex; gap: 18px; flex-wrap: wrap; }
.setor-kartu__angka div { display: grid; gap: 2px; }
.setor-kartu__angka small { font-size: 11.5px; opacity: .7; }
.setor-kartu__angka b { font-size: 16px; }
.setor-bayar { display: grid; gap: 14px; margin-top: 10px; }
@media (min-width: 760px) { .setor-bayar { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: start; } }
.setor-form { display: grid; gap: 10px; }

.setor-adm { margin-bottom: 16px; }
.setor-adm__kepala { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-start; }
.setor-adm__nilai { display: grid; gap: 2px; text-align: right; }
.setor-adm__nilai small { font-size: 11.5px; opacity: .7; }
.setor-adm__nilai b { font-size: 20px; }
.setor-adm__isi { display: grid; gap: 16px; margin-top: 12px; }
@media (min-width: 860px) { .setor-adm__isi { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); } }
.setor-adm__data { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0 0 12px; font-size: 14px; }
.setor-adm__data dt { font-weight: 800; opacity: .7; }
.setor-adm__data dd { margin: 0; }
.setor-adm__bukti {
  display: block; border: 2px solid var(--tepi); border-radius: 14px;
  overflow: hidden; background: var(--papan); text-align: center; padding: 0;
}
.setor-adm__bukti img { display: block; width: 100%; height: auto; max-height: 340px; object-fit: contain; }
.setor-adm__bukti span { display: block; padding: 22px 12px; font-weight: 800; }

/* Alamat kirim yang ikut dikirim pembeli dari Lab. */
.lab-admin__alamat {
  display: flex; gap: 12px; justify-content: space-between; align-items: flex-start;
  border: 2px dashed var(--tepi); border-radius: 14px; padding: 10px 12px; margin-bottom: 12px;
}
.lab-admin__alamat p { font-size: 14.5px; line-height: 1.5; }
.lab-admin__alamat .kecil { display: block; opacity: .7; margin-bottom: 2px; }

/* ========================= TOMBOL DI LAYAR KECIL =========================
   Di ponsel tombol dibuat seringkas mungkin tapi tetap enak disentuh:
   tinggi minimal 44px (rekomendasi WCAG), bantalan samping dipangkas,
   dan yang berjejer boleh turun baris daripada meluber ke samping. */
@media (max-width: 600px) {
  .tbl {
    padding: 9px 16px; font-size: 14.8px; gap: 6px;
    min-height: 44px; box-sizing: border-box;
  }
  .tbl--besar { padding: 11px 20px; font-size: 16px; min-height: 50px; }
  .tbl--mini  { padding: 7px 13px; font-size: 13px; min-height: 40px; align-self: center; }
  .bulat { width: 42px; height: 42px; font-size: 17.5px; }

  .tab-lab { flex-wrap: wrap; }
  .tab-lab a, .tab-lab button { font-size: 13.5px; padding: 7px 10px; }
  .tab-lab--alat a { white-space: nowrap; }

  /* Baris tombol: biar turun baris, jangan memaksa satu baris yang kepotong. */
  .dialog-kirim__aksi, .aksi-baris { flex-wrap: wrap; }
}

@media (max-width: 380px) {
  .tbl { padding: 9px 13px; font-size: 14.2px; }
  .tbl--besar { padding: 11px 16px; font-size: 15.2px; }
  .tbl--mini { padding: 6px 10px; font-size: 12.5px; }
}

/* Saringan di halaman admin: banyak tombol pendek, biarkan mengalir turun. */
.tab-lab--saring { flex-wrap: wrap; }
.tab-lab--saring a { flex: 0 1 auto; min-height: 38px; padding: 6px 14px; font-size: 13.5px; }

/* Kolom grid tidak boleh melar mengikuti isi terlebarnya — kalau tidak,
   satu nomor rekening panjang bisa menggeser seluruh halaman di ponsel. */
.dua-kolom > * { min-width: 0; }
.bayar-rek__baris > div { min-width: 0; }
.bayar-rek__baris b { overflow-wrap: anywhere; }

/* Kotak pilih berkas punya lebar bawaan sendiri yang bisa melewati induknya. */
input[type="file"] { max-width: 100%; box-sizing: border-box; }
@media (max-width: 600px) { input[type="file"] { font-size: 13px; } }

/* Tabel harga di ponsel: bantalan dan kotak angka dipangkas supaya muat
   tanpa harus digeser ke samping. */
@media (max-width: 600px) {
  .tabel { font-size: 13.8px; }
  .tabel th, .tabel td { padding: 9px 7px; }
  .tabel th { font-size: 11.5px; letter-spacing: .04em; }
  .tabel input[type="number"] { width: 78px !important; padding: 8px 9px; font-size: 14px; }
  .tabel .tbl--mini { padding: 6px 9px; }
}

/* Tabel harga mitra: di ponsel kolom “setor” dan “untung” pindah jadi
   keterangan kecil di bawah kotak harga, jadi tabelnya muat tanpa digeser. */
.harga-bayangan { display: none; }
@media (max-width: 600px) {
  .kolom-lebar { display: none; }
  .harga-bayangan { display: block; margin-top: 4px; font-size: 11.8px; opacity: .78; }
}

/* Kepala halaman mitra di layar mungil: label tombol disembunyikan,
   ikonnya saja — nama tokonya yang dikasih ruang. */
@media (max-width: 440px) {
  .kepala__logo--mitra img { width: 38px; height: 38px; }
  .kepala__logo--mitra b { font-size: 15.5px; max-width: 38vw; }
  .kepala--mitra .kepala__alat { gap: 6px; }
}
@media (max-width: 400px) {
  .kepala--mitra .alat-label { display: none; }
  .kepala--mitra .tbl--mini { padding: 7px 11px; }
}

/* Kartu request di admin: isi kartunya jangan melebarkan kolomnya. */
.lab-admin__kartu > * { min-width: 0; }

/* Isian di ponsel: hurufnya 16px supaya Safari iOS tidak ikut mem-zoom
   begitu kolom disentuh, tapi bantalan dan jaraknya dipangkas. */
@media (max-width: 600px) {
  .bidang input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .bidang select, .bidang textarea, .isian {
    font-size: 16px; padding: 11px 14px;
  }
  .bidang { margin-bottom: 13px; }
  .bidang > span, .bidang > label { font-size: 13.5px; margin-bottom: 5px; }
  .bidang textarea { min-height: 96px; }
  .bidang__bantu { font-size: 12.4px; }
}