/* ==========================================================================
   LOUDTAPE — satu berkas gaya untuk seluruh situs.
   Mobile-first: aturan dasar untuk HP, lalu @media untuk layar besar.

   Arah desain: "pitanya lagi teriak". Huruf poster yang tebal dan sempit,
   angka mono, satu warna panas, dan latar gelap berbutir seperti cetakan.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --bg: #0a0a0e;
  --panel: #121218;
  --panel-2: #191922;
  --line: #262633;
  --line-soft: #1c1c26;

  --ink: #eef0f5;        /* putih sedikit dingin, menyesuaikan aksen ungu */
  --dim: #8b8b9c;
  --dimmer: #5c5c70;

  --heat: #a385ff;     /* ungu: warna merek */
  --heat-hot: #35e2a4; /* mint: ujung panas & data hidup */
  --gain: #35e2a4;
  --loss: #ff6b81;

  /* Tiga suara, masing-masing satu tugas.
     Serif untuk kalimat besar — inilah yang memisahkan halaman yang dirancang
     dari halaman meme coin, yang selalu memakai huruf kapital tebal raksasa.
     Mono untuk semua angka dan label. Sans untuk paragraf biasa.
     Anton disimpan khusus untuk logo saja, supaya mereknya tetap sama. */
  --display: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --brand: 'Anton', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --nav-h: 0px; /* navigasi bawah dihapus, semua layar tampil di deretan tab atas */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.5;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Butiran halus di atas segalanya supaya hitamnya tidak terasa mati.
   pointer-events:none supaya tidak menghalangi sentuhan. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 14px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--dim); }
.gain { color: var(--gain); }
.loss { color: var(--loss); }

/* ---------- Bilah atas ---------- */

.topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(10, 10, 11, 0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar-in {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  /* Hanya jarak atas. Menulis `padding` ringkas di sini akan menghapus
     jarak kiri-kanan milik .wrap dan logo jadi menempel tepi layar. */
  padding-top: 9px;
}

/* Gugus kanan: alamat kontrak, tombol beli, tautan sosial, keadaan pasar. */
.topright { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }

/* Di HP, keadaan pasar disembunyikan dari bilah — informasinya sudah ada di
   baris data tiap layar, dan memaksanya masuk membuat logo ikut terpotong. */
.state { display: none; }
.ca-slab .lbl { display: none; }

/* Kolom alamat kontrak.
   Sengaja BUKAN pil melengkung dengan titik berkedip — bentuk itu dipakai
   hampir semua situs token. Di sini bentuknya lempeng bersudut tegas, tanpa
   cahaya, dengan penanda batang seperti logo, dan garis kemajuan setipis
   rambut di bawahnya yang menunjukkan seberapa dekat waktu peluncuran. */
.ca-slab {
  display: inline-flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 7px;
  background: #0e0e14; overflow: hidden; cursor: pointer;
  transition: border-color 0.2s ease;
}
.ca-slab:hover { border-color: rgba(163, 133, 255, 0.42); }
.ca-top { display: flex; align-items: center; gap: 9px; padding: 6px 11px 5px; }
.ca-eq { display: flex; align-items: flex-end; gap: 2px; height: 11px; flex: none; }
.ca-eq i { display: block; width: 2.5px; border-radius: 1px; background: var(--heat-hot); }
.ca-eq i:nth-child(2), .ca-eq i:nth-child(3) { background: var(--heat); }
.ca-txt {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em;
  color: var(--dim); white-space: nowrap;
}
.ca-txt b { color: var(--ink); font-weight: 700; }
.ca-txt .t { color: var(--heat); font-weight: 700; }
.ca-line { height: 2px; background: var(--line-soft); }
.ca-line span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--heat), var(--heat-hot));
  transition: width 1s linear;
}
.ca-slab.is-live { flex-direction: row; align-items: stretch; }
.ca-addr {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px;
  font-family: var(--mono); font-size: 11.5px; color: var(--dim);
  background: transparent; border: 0; cursor: pointer; white-space: nowrap;
}
.ca-addr:hover { color: var(--ink); }
.ca-addr svg { width: 12px; height: 12px; }
.ca-buy {
  display: inline-flex; align-items: center; padding: 7px 13px;
  border-left: 1px solid var(--line);
  background: rgba(163, 133, 255, 0.12); color: var(--heat);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
}
.ca-buy:hover { background: rgba(163, 133, 255, 0.2); }

/* Logo: empat batang penunjuk suara yang naik-turun sendiri, lalu nama.
   Bentuknya langsung menyatakan isi produk — sesuatu yang sedang nyaring. */
.logo { display: flex; align-items: center; gap: 9px; }

.logo-eq { display: flex; align-items: flex-end; gap: 2.5px; height: 19px; }
.logo-eq i {
  display: block; width: 3.5px; border-radius: 1px;
  background: linear-gradient(180deg, var(--heat-hot), var(--heat));
  box-shadow: 0 0 9px rgba(163, 133, 255, 0.55);
  animation: vu 1.05s ease-in-out infinite;
}
.logo-eq i:nth-child(1) { height: 42%; animation-delay: 0s;    animation-duration: 0.9s; }
.logo-eq i:nth-child(2) { height: 100%; animation-delay: 0.17s; animation-duration: 1.25s; }
.logo-eq i:nth-child(3) { height: 62%; animation-delay: 0.34s; animation-duration: 0.78s; }
.logo-eq i:nth-child(4) { height: 84%; animation-delay: 0.09s; animation-duration: 1.05s; }
@keyframes vu { 0%, 100% { transform: scaleY(0.34); } 50% { transform: scaleY(1); } }
.logo-eq i { transform-origin: bottom; }

.logo-word {
  font-family: var(--brand); font-size: 21px; letter-spacing: 0.015em;
  line-height: 1;
}
.logo-word span { color: var(--heat); }

.state {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--dim);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 9px; white-space: nowrap;
}
.state-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dimmer); }
.state.is-open { color: var(--gain); border-color: rgba(53, 226, 164, 0.32); }
.state.is-open .state-dot { background: var(--gain); box-shadow: 0 0 8px var(--gain); }

/* ---------- Pita berjalan ---------- */

.tape {
  border-bottom: 1px solid var(--line-soft);
  background: #0e0e10;
  overflow: hidden; height: 30px; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent);
}
.tape-run {
  display: flex; align-items: center; gap: 20px;
  height: 30px; width: max-content;
  animation: run 52s linear infinite;
  font-family: var(--mono); font-size: 12.5px;
  white-space: nowrap;
}
@keyframes run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .tape-run, .logo-eq i, .eq-bar { animation: none !important; }
  .panel { transition: none !important; }
}
.tape-item { display: inline-flex; align-items: center; gap: 6px; color: var(--dimmer); }
.tape-item b { font-weight: 500; color: var(--dim); }
.tape-x { color: var(--heat); font-weight: 700; }
/* Persentase diredam supaya pita terbaca sebagai satu tekstur, bukan
   deretan warna yang berebut perhatian dengan judul. */
.tape-item .gain, .tape-item .loss { opacity: 0.55; }

/* ---------- Judul halaman ---------- */

.head { padding: 24px 0 4px; }
.head h1 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: clamp(36px, 11vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.head h1 em { font-style: normal; color: var(--heat); }
.head p { margin: 0; color: var(--dim); font-size: 15px; max-width: 46ch; }

/* ---------- POSTER: saham ternyaring saat ini ---------- */

.hero {
  position: relative; overflow: hidden;
  margin: 18px 0 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(163, 133, 255, 0.14), transparent 60%),
    var(--panel);
  padding: 16px 15px 15px;
}
.hero-label {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--heat);
  display: flex; align-items: center; gap: 7px;
}
.hero-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(163, 133, 255,.4), transparent); }

.hero-tick {
  font-family: var(--display);
  font-size: clamp(60px, 21vw, 112px);
  line-height: 0.95; letter-spacing: -0.02em;
  margin: 12px 0 2px;
}
.hero-name { color: var(--dim); font-size: 14.5px; margin-bottom: 14px; }

.hero-x {
  font-family: var(--display);
  font-size: clamp(70px, 26vw, 140px);
  line-height: 0.9; letter-spacing: -0.03em;
  background: linear-gradient(100deg, var(--heat) 15%, var(--heat-hot));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* Tanda kali dibuat lebih kecil dan sedikit naik, supaya tidak terbaca huruf X. */
/* Warnanya harus ditulis tegas. Induknya memakai teknik gradien-di-dalam-huruf
   (background-clip:text + color:transparent); begitu anaknya diberi opacity,
   ia jadi lapisan sendiri dan tanda kalinya hilang sama sekali. */
.x-mark {
  font-size: 0.4em; vertical-align: 0.52em; margin-left: 0.05em;
  color: #b79cff; -webkit-text-fill-color: #b79cff;
}

.hero-x-note {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--dim); margin-top: 4px;
}

/* Penunjuk suara: tinggi tiap batang mewakili panasnya satu saham. */
.eq { display: flex; align-items: flex-end; gap: 3px; height: 46px; margin: 16px 0 14px; }
.eq-bar {
  flex: 1; min-width: 0; border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, var(--heat-hot), var(--heat));
  transform-origin: bottom;
  animation: breathe 2.6s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.82); } }

.hero-stats {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 14.5px;
  padding-top: 13px; border-top: 1px solid var(--line-soft);
}
.hero-stats .vol { color: var(--dimmer); font-size: 12.5px; width: 100%; }

.hero-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 16px; padding: 15px;
  border-radius: 12px;
  background: linear-gradient(180deg, #b49bff, #8e6df0);
  color: #0d0518;
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}

/* ---------- Judul kecil pemisah bagian ---------- */

.section-label {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--dimmer);
  display: flex; align-items: center; gap: 9px; margin: 4px 0 11px;
}
.section-label::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }

/* ---------- Tab ---------- */

.tabs {
  display: flex; gap: 4px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 11px; padding: 3px; margin-bottom: 16px;
}
.tab {
  flex: 1; text-align: center;
  padding: 9px 6px; border: 0; background: transparent;
  border-radius: 8px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dim); cursor: pointer;
}
.tab[aria-selected="true"] { background: var(--panel-2); color: var(--ink); }

/* ---------- Baris saham ---------- */

.list { display: flex; flex-direction: column; gap: 7px; }

.row {
  display: block; position: relative; overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 11px 13px;
}
.row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--heat-line, transparent);
}
.row-top { display: flex; align-items: baseline; gap: 8px; }
.rank { font-family: var(--mono); font-size: 12px; color: var(--dimmer); width: 20px; flex: none; }
.tick { font-family: var(--mono); font-weight: 700; font-size: 16.5px; letter-spacing: -0.01em; }
.nm { color: var(--dim); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.px { font-family: var(--mono); font-size: 15px; margin-left: auto; flex: none; }
.chg { font-family: var(--mono); font-size: 13px; flex: none; width: 62px; text-align: right; }

.heat-row { display: flex; align-items: center; gap: 9px; margin-top: 8px; padding-left: 28px; }
.heat-bar { flex: 1; height: 5px; border-radius: 99px; background: var(--line); overflow: hidden; }
.heat-fill {
  display: block; /* wajib: tanpa ini <span> tetap inline dan batangnya tidak muncul */
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--heat), var(--heat-hot));
  min-width: 3px;
}
.heat-x {
  font-family: var(--mono); font-weight: 700; font-size: 14.5px;
  color: var(--heat); width: 54px; text-align: right; flex: none;
}
.heat-note { font-size: 12px; color: var(--dimmer); font-family: var(--mono); }

.row-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-left: 28px; margin-top: 6px;
}
.row-cta {
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--heat); white-space: nowrap; flex: none;
}

/* ---------- Ticker yang sudah diklaim ---------- */

.row.is-claimed { border-color: rgba(53, 226, 164, 0.22); }
.row.is-claimed::before { background: var(--gain); }
.row-cta.claimed { color: var(--gain); }

.claim-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--gain); background: rgba(53, 226, 164, 0.09);
  border: 1px solid rgba(53, 226, 164, 0.25); border-radius: 5px; padding: 1px 6px;
}

/* ---------- Adu koin lawan sahamnya ---------- */

.score { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.score-side { flex: 1; min-width: 0; }
.score-lbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dimmer); margin-bottom: 3px;
}
.score-val { font-family: var(--mono); font-weight: 700; font-size: 19px; line-height: 1; }
.score-vs {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--dimmer); flex: none;
}
.score-bar { height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: 6px; }
.score-fill { display: block; height: 100%; border-radius: 99px; }
.score-note {
  font-family: var(--mono); font-size: 12px; color: var(--dim);
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft);
}
.score-note b { color: var(--ink); }

/* ---------- Kartu koin ---------- */

.coin {
  display: flex; gap: 11px; align-items: center;
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: 12px; padding: 11px 12px;
}
.coin img { width: 44px; height: 44px; border-radius: 10px; flex: none; object-fit: cover; background: var(--panel-2); }
.coin-body { flex: 1; min-width: 0; }
.coin-name { font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coin-sub { font-size: 13px; color: var(--dim); font-family: var(--mono); }
.pairtag {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--heat); background: rgba(163, 133, 255, 0.1);
  border: 1px solid rgba(163, 133, 255, 0.25);
  border-radius: 5px; padding: 1px 5px;
}

/* ---------- Keadaan kosong / memuat / galat ---------- */

.note {
  border: 1px dashed var(--line); border-radius: 12px;
  padding: 24px 16px; text-align: center; color: var(--dim); font-size: 15px;
}
.note strong {
  color: var(--ink); display: block; margin-bottom: 7px;
  font-family: var(--display); font-size: 23px; letter-spacing: -0.01em;
}
.err { border-color: rgba(255, 77, 94, 0.35); color: var(--loss); }

.skel { height: 74px; border-radius: 12px; background: var(--panel); animation: sk 1.4s ease-in-out infinite; }
.skel-hero { height: 330px; border-radius: 16px; background: var(--panel); animation: sk 1.4s ease-in-out infinite; margin: 18px 0 26px; }
@keyframes sk { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.85; } }

/* ---------- Formulir ---------- */

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; }
.field label { font-size: 14px; font-weight: 600; }
.field .hint { font-size: 13px; color: var(--dimmer); }

input[type="text"], input[type="number"], input[type="url"], input[type="password"], textarea, select {
  width: 100%;
  background: #0e0e10; color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 12px;
  font-family: var(--sans); font-size: 17px; /* 16px mencegah iOS memperbesar layar sendiri */
}
textarea { resize: vertical; min-height: 76px; font-size: 16.5px; }

input[type="file"] { padding: 9px 10px; font-size: 14.5px; }
input[type="file"]::file-selector-button {
  background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 11px; margin-right: 10px; font-size: 14.5px; font-weight: 600; cursor: pointer;
}
input[type="checkbox"] { accent-color: var(--heat); width: 17px; height: 17px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--heat); }

.btn {
  width: 100%; border: 0; border-radius: 12px;
  padding: 16px;
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: linear-gradient(180deg, #b49bff, #8e6df0);
  color: #0d0518; cursor: pointer;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-ghost { background: var(--panel); color: var(--ink); border: 1px solid var(--line); font-size: 14.5px; }

.card {
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: 14px; padding: 15px; margin-bottom: 14px;
}
.card h2 {
  margin: 0 0 12px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dim); font-weight: 700;
}

.kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14.5px; border-bottom: 1px solid var(--line-soft); }
.kv:last-child { border-bottom: 0; }
.kv span:last-child { font-family: var(--mono); }

.warn {
  background: rgba(163, 133, 255, 0.07);
  border: 1px solid rgba(163, 133, 255, 0.22);
  border-radius: 11px; padding: 12px; font-size: 14px; color: #cdb8ff;
  margin-bottom: 14px;
}

/* ---------- Pita keterbukaan di paling atas ---------- */

.disclose {
  background: #0e0e10; border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: 12px; line-height: 1.55; color: var(--dim);
}
.disclose summary {
  list-style: none; cursor: pointer;
  padding: 8px 14px; display: flex; gap: 8px; align-items: flex-start;
}
.disclose summary::-webkit-details-marker { display: none; }
.disclose b { color: var(--heat); font-weight: 700; }
.disclose .more { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.disclose p { margin: 0; padding: 0 14px 11px; max-width: 70ch; }

/* ---------- Tiga jaminan ---------- */

.facts { display: grid; gap: 8px; margin: 26px 0 4px; }
.fact {
  border: 1px solid var(--line-soft); border-radius: 12px;
  background: var(--panel); padding: 13px 14px;
}
.fact h3 {
  margin: 0 0 4px; font-family: var(--mono); font-size: 12.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--heat);
}
.fact p { margin: 0; font-size: 14px; color: var(--dim); }

/* ---------- Tiga langkah ---------- */

.steps { display: grid; gap: 10px; margin-bottom: 6px; }
.step {
  display: flex; gap: 13px; align-items: flex-start;
  border: 1px solid var(--line-soft); border-radius: 12px;
  background: var(--panel); padding: 14px;
}
.step-n {
  font-family: var(--display); font-size: 34px; line-height: 0.8;
  flex: none; width: 34px;
  /* Urutan wajib: background dulu, baru background-clip. Kalau dibalik, penulisan
     singkat `background` mengembalikan clip ke bawaan dan angkanya jadi kotak buntu. */
  background: linear-gradient(180deg, var(--heat), var(--heat-hot));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.step h3 { margin: 0 0 4px; font-size: 16px; }
.step p { margin: 0; font-size: 14px; color: var(--dim); }

/* ==========================================================================
   LATAR HIDUP — osiloskop yang digambar dari angka HEAT sungguhan,
   plus cahaya yang berpindah warna dan posisi tiap ganti layar.
   Keduanya di belakang segalanya dan tidak bisa disentuh.
   ========================================================================== */

#bgwave {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; opacity: 0.3;
}

/* Dua gumpalan cahaya raksasa yang bergerak sangat lambat. Tidak pernah
   disadari secara sadar, tapi inilah yang membuat latar terasa punya
   kedalaman alih-alih seperti bidang hitam yang dicat rata. */
.aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aurora i {
  position: absolute; display: block;
  width: 62vmax; height: 62vmax; border-radius: 50%;
  filter: blur(90px); opacity: 0.14; will-change: transform;
}
.aurora i:nth-child(1) {
  background: radial-gradient(circle, #a385ff, transparent 66%);
  top: -22vmax; left: -14vmax; animation: drift1 44s ease-in-out infinite;
}
.aurora i:nth-child(2) {
  background: radial-gradient(circle, #35e2a4, transparent 66%);
  bottom: -26vmax; right: -18vmax; animation: drift2 56s ease-in-out infinite;
}
@keyframes drift1 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(14vmax,9vmax,0) scale(1.14); } }
@keyframes drift2 { 0%,100% { transform: translate3d(0,0,0) scale(1.08); } 50% { transform: translate3d(-12vmax,-8vmax,0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .aurora i { animation: none; } }

.bg-glow {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(58% 46% at var(--glow-x, 15%) var(--glow-y, 85%), var(--glow-c, rgba(163, 133, 255,.18)), transparent 72%);
  opacity: 0.72;
  transition: background 1.3s ease;
}

/* Isi halaman harus berada di atas latar. */
.topbar, .tape, .railtabs, .deck { z-index: 2; }
.topbar { z-index: 30; }
.railtabs { position: relative; z-index: 29; }

/* ==========================================================================
   DEK — tiap bagian adalah satu layar penuh, bukan halaman gulung panjang.
   Hanya dipakai di halaman depan (body.is-deck).
   ========================================================================== */

/* Susunan kolom: bilah atas dan pita mengambil tingginya sendiri, sisanya
   diberikan ke dek. Tinggi bilah jadi tidak perlu ditebak saat menunya
   berubah dari dua baris (HP) jadi satu baris (layar lebar). */
body.is-deck {
  overflow: hidden; padding-bottom: 0;
  height: 100dvh; display: flex; flex-direction: column;
}
body.is-deck > .topbar, body.is-deck > .tape { flex: none; }

.deck { flex: 1; position: relative; overflow: hidden; min-height: 0; }

.panel {
  position: absolute; inset: 0;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column;
  padding: 18px 0 22px;
  opacity: 0; transform: translateY(22px) scale(0.988);
  filter: blur(6px);
  pointer-events: none;
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease), filter 0.45s ease;
}
/* Isinya dipusatkan lewat margin otomatis, BUKAN justify-content:center.
   Pada wadah yang bisa digulung, justify-content:center memotong bagian atas
   isi yang kepanjangan dan potongannya mustahil dijangkau dengan menggulung. */
.panel > * { margin-top: auto; margin-bottom: auto; }
.panel.is-list > * { margin-top: 0; margin-bottom: auto; }
.panel.is-on { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.panel.is-up { transform: translateY(-22px) scale(0.985); } /* keluar ke arah atas */

/* Panel yang isinya daftar panjang: rata atas, bukan tengah. */


.panel-head { margin-bottom: 12px; }
.panel-title {
  font-family: var(--display); font-size: clamp(30px, 9vw, 48px);
  line-height: 1.04; letter-spacing: -0.015em; margin: 0 0 8px;
}
.panel-sub { margin: 0; color: var(--dim); font-size: 14.5px; max-width: 48ch; }

/* ---------- Layar pembuka ---------- */

.opening { text-align: left; }
.logo-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.logo-hero .logo-eq { height: 46px; gap: 5px; }
.logo-hero .logo-eq i { width: 8px; border-radius: 2px; }
.logo-hero .logo-word { font-size: clamp(38px, 13vw, 62px); }

.opening h1 {
  font-family: var(--display);
  font-size: clamp(44px, 13vw, 82px); line-height: 1.0;
  letter-spacing: -0.02em; margin: 0 0 16px;
}
.opening h1 em { font-style: normal; color: var(--heat); }
.opening .lede { color: var(--dim); font-size: 16px; max-width: 42ch; margin: 0 0 20px; }

.live-strip {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 12.5px; color: var(--dimmer);
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  padding: 11px 0; margin-bottom: 20px;
}
.live-strip b { color: var(--ink); font-weight: 700; }
.live-strip .hot { color: var(--heat); font-weight: 700; }

.cta-pair { display: flex; flex-direction: column; gap: 9px; }
.cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px; border: 0; border-radius: 12px; cursor: pointer;
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: linear-gradient(180deg, #a78dfb, #7d5ce4); color: #0b0416;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 24px rgba(140,105,240,.28);
}
.cta.ghost {
  background: rgba(255,255,255,.015); border: 1px solid var(--line); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

/* ---------- Sentuhan yang membuatnya terasa mahal ---------- */

/* Sudut atas tiap kartu diberi garis cahaya setipis rambut. Efeknya kecil,
   tapi inilah yang membedakan permukaan yang terasa padat dari kotak datar. */
.card, .fact, .step, .row, .coin, .clock-cell, .hero, .note {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 1px 2px rgba(0, 0, 0, 0.5);
}
.panel .hero { box-shadow: none; }

/* Vinyet: tepi layar diredupkan sedikit supaya mata jatuh ke tengah. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(130% 100% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55));
}

/* Isi tiap layar masuk bertahap, bukan muncul serentak. */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.panel.is-on .stagger > * { animation: rise 0.62s var(--ease) backwards; }
.panel.is-on .stagger > *:nth-child(1) { animation-delay: 0.06s; }
.panel.is-on .stagger > *:nth-child(2) { animation-delay: 0.12s; }
.panel.is-on .stagger > *:nth-child(3) { animation-delay: 0.18s; }
.panel.is-on .stagger > *:nth-child(4) { animation-delay: 0.24s; }
.panel.is-on .stagger > *:nth-child(5) { animation-delay: 0.30s; }
.panel.is-on .stagger > *:nth-child(6) { animation-delay: 0.36s; }
.panel.is-on .stagger > *:nth-child(7) { animation-delay: 0.42s; }
.panel.is-on .stagger > *:nth-child(8) { animation-delay: 0.48s; }
@media (prefers-reduced-motion: reduce) { .panel.is-on .stagger > * { animation: none; } }

/* Tombol terangkat sedikit saat disentuh kursor. */
.cta, .btn, .hero-cta { transition: transform 0.2s var(--ease), filter 0.2s ease; }
@media (hover: hover) {
  .cta:hover, .btn:hover, .hero-cta:hover { transform: translateY(-1.5px); filter: brightness(1.06); }
  .row { transition: border-color 0.22s ease, transform 0.22s var(--ease); }
  .row:hover { border-color: rgba(163, 133, 255, 0.35); transform: translateX(2px); }
}

/* ---------- Tombol lanjut ke layar berikutnya ---------- */

.next-btn {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 22px; padding: 11px 16px; cursor: pointer;
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dim);
}
.next-btn b { color: var(--ink); font-weight: 700; }
.next-btn svg { width: 13px; height: 13px; color: var(--heat); }
@media (hover: hover) { .next-btn:hover { border-color: rgba(163, 133, 255,.4); color: var(--ink); } }

/* ---------- Deretan tab: semua layar terlihat, tidak ada yang disembunyikan ---------- */

.railtabs {
  display: flex; gap: 6px; align-items: center;
  overflow-x: auto; scrollbar-width: none;
  order: 3; width: 100%;              /* di HP: baris sendiri di bawah logo */
  padding: 9px 0 10px;
}
.railtabs::-webkit-scrollbar { display: none; }

.rtab {
  flex: none; cursor: pointer;
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--dim);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap; transition: all 0.2s ease;
}
.rtab[aria-current="true"] {
  background: var(--heat); border-color: var(--heat); color: #0e0620; font-weight: 700;
}
.rtab.go {
  border-color: rgba(163, 133, 255, 0.4); color: var(--heat);
}
@media (hover: hover) {
  .rtab:hover { color: var(--ink); border-color: #3a3a46; }
  .rtab[aria-current="true"]:hover { color: #0e0620; border-color: var(--heat); }
  .rtab.go:hover { background: rgba(163, 133, 255, 0.1); color: var(--heat); }
}

/* ---------- Tautan sosial ---------- */

.socials { display: flex; gap: 8px; }
.social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px;
  border: 1px solid var(--line); color: var(--dim);
  transition: all 0.2s ease;
}
.social svg { width: 14px; height: 14px; }
@media (hover: hover) { .social:hover { color: var(--heat); border-color: rgba(163, 133, 255,.4); } }
.social-wide {
  display: flex; align-items: center; gap: 10px; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  font-size: 14.5px; font-weight: 600;
}
.social-wide small { display: block; font-weight: 400; font-size: 12.5px; color: var(--dimmer); }
.social-wide svg { width: 17px; height: 17px; color: var(--heat); flex: none; }

/* ---------- Lencana hitung mundur di layar pembuka ---------- */

.ltape-chip {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid rgba(163, 133, 255, 0.35); border-radius: 999px;
  background: rgba(163, 133, 255, 0.08);
  padding: 8px 14px; margin-bottom: 18px; cursor: pointer;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink);
}
.ltape-chip b { color: var(--heat); font-weight: 700; }
.ltape-chip .beat {
  width: 7px; height: 7px; border-radius: 50%; background: var(--heat);
  box-shadow: 0 0 10px var(--heat); animation: beat 1.4s ease-in-out infinite; flex: none;
}
@keyframes beat { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }

/* ---------- Layar $LTAPE ---------- */

.ltape-sym {
  font-family: var(--display); font-size: clamp(52px, 18vw, 96px);
  line-height: 0.86; margin: 8px 0 4px;
}
.ltape-sym span { color: var(--heat); }

.clock { display: flex; gap: 7px; margin: 20px 0 14px; }
.clock-cell {
  flex: 1; min-width: 0; text-align: center;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--panel); padding: 12px 4px;
}
.clock-n {
  font-family: var(--display); font-size: clamp(26px, 9vw, 42px); line-height: 1;
  background: linear-gradient(180deg, var(--heat), var(--heat-hot));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.clock-l {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dimmer); margin-top: 5px;
}
.when { font-family: var(--mono); font-size: 13px; color: var(--dim); margin: 0 0 4px; }
.when b { color: var(--ink); }
.when-local { font-family: var(--mono); font-size: 12px; color: var(--dimmer); margin: 0 0 18px; }

.ltape-points { display: grid; gap: 7px; margin-bottom: 18px; }
.ltape-point { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--dim); }
.ltape-point::before {
  content: ""; flex: none; width: 5px; height: 5px; margin-top: 7px;
  border-radius: 50%; background: var(--heat);
}

.ltape-live {
  display: block; text-align: center; padding: 14px; border-radius: 11px;
  border: 1px dashed var(--line); color: var(--dim);
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase;
}

/* Papan kecil di sisi kanan, hanya muncul di layar lebar. Gunanya mengisi ruang
   kosong dengan data sungguhan, bukan hiasan. */
.opening-side { display: none; }

.mini-label {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--heat); margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.mini-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(163, 133, 255,.4), transparent); }

.mini-row {
  display: grid; grid-template-columns: 62px 1fr 58px; gap: 12px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft);
}
.mini-row:last-child { border-bottom: 0; }
.mini-t { font-family: var(--mono); font-weight: 700; font-size: 15.5px; }
.mini-x { font-family: var(--mono); font-weight: 700; font-size: 14.5px; color: var(--heat); text-align: right; }
.mini-bar { height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; }
.mini-fill { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--heat), var(--heat-hot)); }

.hint-touch { display: inline; }
.hint-point { display: none; }
@media (hover: hover) and (pointer: fine) {
  .hint-touch { display: none; }
  .hint-point { display: inline; }
}

.swipe-hint {
  margin-top: 18px; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dimmer);
  display: flex; align-items: center; gap: 7px;
}
.swipe-hint i {
  display: block; width: 1px; height: 15px;
  background: linear-gradient(180deg, var(--heat), transparent);
  animation: drop 1.8s ease-in-out infinite;
}
@keyframes drop { 0%, 100% { opacity: 0.25; transform: translateY(-3px); } 50% { opacity: 1; transform: translateY(3px); } }

/* Di dalam dek, poster tidak perlu bingkai sendiri lagi.
   overflow dan sudut membulat wajib ikut dimatikan — kalau tidak, sudut kiri-atas
   yang membulat memangkas huruf pertama label. */
.panel .hero {
  margin: 0; border: 0; background: none; padding: 0;
  overflow: visible; border-radius: 0;
}

/* ---------- Susunan dua kolom untuk layar lebar ---------- */

@media (min-width: 1024px) {
  .panel .wrap.wide { max-width: 1160px; }
  .opening {
    display: grid; grid-template-columns: 1.02fr 0.98fr;
    gap: 60px; align-items: center;
  }
  .opening-side { display: block; }
  .opening h1 { font-size: 82px; }
  .logo-hero .logo-word { font-size: 56px; }
}

footer { padding: 26px 0 34px; color: var(--dimmer); font-size: 13px; line-height: 1.65; }

/* ---------- Layar besar ---------- */

@media (min-width: 760px) {
  body { padding-bottom: 0; font-size: 17px; }
  /* Bilah atas TIDAK boleh ikut dikurung lebar 760px seperti isi halaman —
     kalau ikut, tabnya terpotong dan separuh layar jadi tidak terlihat. */
  .topbar .wrap { max-width: 1440px; }
  .state { display: inline-flex; }
  .ca-slab .lbl { display: inline; }
  .topbar-in { flex-wrap: nowrap; padding-top: 0; height: 64px; }
  .railtabs { order: 0; width: auto; flex: 1; padding: 0 6px; min-width: 0; }
  .rtab { font-size: 11px; padding: 7px 11px; letter-spacing: 0.08em; }
  .tape { padding: 0; }
  .cta-pair { flex-direction: row; }
  .cta { flex: 1; }
  .topnav { display: flex !important; gap: 18px; margin-left: 22px; }
  .topnav a {
    color: var(--dim);
    font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase;
  }
  .topnav a[aria-current="page"] { color: var(--ink); }
  .wrap { padding: 0 20px; }
  .hero { padding: 26px 26px 22px; }
  .hero-tick { font-size: 96px; }
  .hero-x { font-size: 120px; }
  .eq { height: 62px; }
}
.topnav { display: none; }