/* DOPS Flow: meja balas komentar akun TikTok resmi DOPS.
   Mengikuti logo DOPS Flow: navy pekat sebagai latar, biru dan cyan sebagai identitas, gradasi cyan ke biru
   dipakai hemat (garis atas, penanda aktif, tombol utama). Judul memakai huruf geometris seperti logo
   (Montserrat), isi memakai Plus Jakarta Sans yang mudah dibaca. Kartu bersudut lembut, garis tipis kebiruan. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("plus-jakarta-sans.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("montserrat.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --latar: #040c30;        /* navy pekat: latar halaman */
  --latar-dalam: #030926;  /* rel menu dan bilah bawah */
  --panel: #0a1748;        /* kartu */
  --panel-2: #0f1f5c;      /* kolom isian, butir aktif, ubin di dalam kartu */
  --panel-3: #16297a;
  --garis: #1b2d6d;
  --garis-kuat: #2a4396;
  --teks: #f3f6ff;
  --teks-2: #b9c6ef;
  --teks-3: #8f9fd4;
  --biru: #4a90ff;         /* tautan aktif, angka sorotan */
  --tombol: #155ef5;       /* tombol utama, teks putih tetap terbaca (>= 4.5:1) */
  --tombol-2: #0b52e0;
  --cyan: #2ad8ff;         /* aksen: fokus, penanda aktif, garis batas karakter */
  --cyan-redup: rgba(42, 216, 255, .13);
  --gradasi: linear-gradient(90deg, #03e1ff, #1b6dff);
  --data: #3d8bff;         /* tanda grafik satu seri, divalidasi di atas --panel */
  --merah: #ff5c6c;
  --merah-teks: #ff97a1;
  --merah-redup: rgba(255, 92, 108, .14);
  --hijau: #3ddc97;
  --hijau-redup: rgba(61, 220, 151, .13);
  --jingga: #ffb547;
  --jingga-redup: rgba(255, 181, 71, .13);
  --huruf: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --judul: "Montserrat", "Plus Jakarta Sans", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --r: 16px;               /* sudut kartu */
  --r-kecil: 10px;         /* sudut tombol dan kolom isian */
  --tepi: 16px;            /* jarak isi kartu ke tepinya */
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--latar);
  color: var(--teks);
  font: 500 15px/1.5 var(--huruf);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  height: 100%;
}

body { margin: 0; min-height: 100%; background: var(--latar); }

h1, h2, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-color: var(--garis-kuat); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
code { font-family: var(--mono); font-size: .86em; font-weight: 400; color: var(--teks); background: var(--panel-2); border: 1px solid var(--garis); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
::selection { background: var(--cyan); color: #031034; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
[hidden] { display: none !important; }

h1 {
  font-family: var(--judul);
  font-size: clamp(24px, 1vw + 18px, 30px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h2 { font-family: var(--judul); font-size: 15.5px; font-weight: 650; line-height: 1.3; letter-spacing: -0.005em; margin-bottom: 14px; }
.lead { color: var(--teks-2); margin-top: 8px; max-width: 70ch; }
.lead-kecil { color: var(--teks-2); font-size: 14px; margin: -6px 0 14px; }
.bantu { color: var(--teks-3); font-size: 12.5px; line-height: 1.5; margin-top: 10px; max-width: 78ch; }
.sepi { color: var(--teks-3); font-size: 14px; }

/* ------------------------------------------------------------ tombol */

.tb {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px;
  border: 1px solid var(--garis-kuat); border-radius: var(--r-kecil); background: rgba(255, 255, 255, .03);
  color: var(--teks); font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.tb:hover { background: var(--panel-2); border-color: #3b57b2; }
.tb-utama { background: linear-gradient(180deg, var(--tombol), var(--tombol-2)); border-color: transparent; color: #fff; font-weight: 700; }
.tb-utama:hover { background: linear-gradient(180deg, var(--tombol), var(--tombol-2)); border-color: transparent; box-shadow: 0 0 0 3px rgba(42, 216, 255, .22), 0 10px 26px -12px rgba(21, 94, 245, .95); }
.tb-kecil { min-height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.tb-lebar { width: 100%; min-height: 48px; font-size: 15px; }
.tb-bahaya { border-color: rgba(255, 92, 108, .6); color: var(--merah-teks); }
.tb-bahaya:hover { background: var(--merah-redup); border-color: var(--merah); }
.tb-mati, .tb:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.tb-utama:disabled { background: linear-gradient(180deg, var(--tombol), var(--tombol-2)); }
.tb[aria-busy="true"] { opacity: .7; cursor: progress; }
.tb-teks {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 2px;
  border: 0; background: none; color: var(--teks-2); font-size: 13.5px; font-weight: 600;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; cursor: pointer;
}
.tb-teks:hover { color: var(--teks); text-decoration-color: currentColor; }
.tb-teks.aktif { color: var(--cyan); }

/* ---------------------------------------------------------- kerangka */

.lompat { position: absolute; left: -999px; top: 8px; background: var(--cyan); color: #031034; font-weight: 700; padding: 8px 12px; border-radius: 8px; z-index: 50; }
.lompat:focus { left: 8px; }

/* cahaya biru lembut di sudut seperti latar logo, dan garis gradasi tipis di tepi atas */
body.app { position: relative; isolation: isolate; }
body.app::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 520px at 100% -8%, rgba(14, 135, 252, .20), transparent 70%),
    radial-gradient(700px 460px at -8% 108%, rgba(3, 218, 254, .08), transparent 70%);
}
body.app::after { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--gradasi); z-index: 40; pointer-events: none; }

.merek { display: inline-flex; align-items: center; text-decoration: none; border-radius: 8px; }
.merek-gambar { display: block; width: auto; height: 34px; }

.rel { position: sticky; top: 0; z-index: 25; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--latar-dalam); border-bottom: 1px solid var(--garis); }
.rel-kaki { display: none; }

.akun-menu { position: relative; font-size: 14px; }
.akun-menu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 0 14px; border: 1px solid var(--garis-kuat); border-radius: 999px; color: var(--teks-2); font-weight: 600;
}
.akun-menu > summary::-webkit-details-marker { display: none; }
.akun-menu > summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.akun-menu[open] > summary { color: var(--teks); border-color: var(--teks-3); }
.akun-isi {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 210px;
  background: var(--panel); border: 1px solid var(--garis-kuat); border-radius: 14px; padding: 6px;
  display: grid; gap: 2px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .65);
}
.akun-isi a, .akun-isi .tb-teks { display: flex; width: 100%; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--teks); text-decoration: none; align-items: center; font-size: 14px; font-weight: 500; }
.akun-isi a:hover, .akun-isi .tb-teks:hover { background: var(--panel-2); }

.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--latar-dalam); border-top: 1px solid var(--garis);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-butir {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 60px; padding: 7px 2px 5px; color: var(--teks-3); font-size: 11.5px; font-weight: 600; text-decoration: none;
}
.nav-ikon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-butir[aria-current="page"] { color: var(--teks); }
.nav-butir[aria-current="page"] .nav-ikon { stroke: var(--cyan); }
.nav-butir[aria-current="page"]::before { content: ""; position: absolute; top: -1px; left: 50%; width: 32px; height: 2px; margin-left: -16px; border-radius: 2px; background: var(--gradasi); }
.nav-sekunder { display: none; }
.nav-hitung {
  position: absolute; top: 4px; left: calc(50% + 5px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--panel-3); color: var(--teks-2); font-size: 10.5px; font-weight: 800; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
}
.nav-hitung.ada { background: var(--cyan); color: #031034; }
.nav-hitung:empty { display: none; }

.isi { width: 100%; max-width: 1640px; margin: 0 auto; padding: 18px 16px calc(100px + env(safe-area-inset-bottom)); outline: none; }

.kepala { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 4px 0 22px; }
.kepala-aksi { display: flex; gap: 8px; align-items: center; }
.remah { font-size: 13px; color: var(--teks-3); margin: 4px 0 10px; }
.remah a { color: var(--teks-2); }
.remah a + a::before { content: "/"; margin: 0 8px; color: var(--teks-3); display: inline-block; }

.kilas-wadah { display: grid; gap: 8px; margin: 0 0 18px; }
.kilas { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; font-size: 14px; border: 1px solid var(--garis-kuat); border-radius: 12px; background: var(--panel); }
.kilas::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--hijau); box-shadow: 0 0 0 3px var(--hijau-redup); transform: translateY(-1px); }
.kilas-galat { border-color: rgba(255, 92, 108, .55); }
.kilas-galat::before { background: var(--merah); box-shadow: 0 0 0 3px var(--merah-redup); }

/* kartu: setiap bagian halaman berdiri di kartunya sendiri */
.blok { margin-top: 16px; padding: var(--tepi); background: var(--panel); border: 1px solid var(--garis); border-radius: var(--r); min-width: 0; }
.dua { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 20px; }
.dua > * { min-width: 0; }
.lembar { background: var(--panel); border: 1px solid var(--garis); border-radius: var(--r); overflow: hidden; }
.gulir { overflow-x: auto; }
.sepi-besar { padding: 44px 24px; text-align: center; display: grid; gap: 14px; justify-items: center; color: var(--teks-2); }
.baris-aksi { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 14px; }

/* daftar dan tabel di dalam kartu memakai bingkai kartunya, barisnya membentang sampai tepi */
.blok .lembar, .blok .gulir, .blok .perlu, .blok .rw, .blok .fakta { background: none; border: 0; border-radius: 0; }
.blok > .lembar, .blok > .gulir, .blok > .perlu, .blok > .rw, .blok > .fakta, .blok > .gf-wadah .gf-tabel .gulir { margin-left: calc(-1 * var(--tepi)); margin-right: calc(-1 * var(--tepi)); }
.blok > .gulir:last-child, .blok > .perlu:last-child, .blok > .rw:last-child, .blok > .lembar:last-child, .blok > .fakta:last-child { margin-bottom: calc(-1 * var(--tepi) + 4px); }
.blok > .lembar:not(:last-child), .blok > .gulir:not(:last-child) { border-bottom: 1px solid var(--garis); }

/* ----------------------------------------------------- cip dan tanda */

.cip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; line-height: 1; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--teks-2); white-space: nowrap; }
.cip-merah { background: var(--merah-redup); color: var(--merah-teks); }
.cip-biru { background: var(--cyan-redup); color: var(--cyan); }
.cip-hijau { background: var(--hijau-redup); color: var(--hijau); }
.cip-jingga { background: var(--jingga-redup); color: var(--jingga); }

.tanda { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; }
.tanda::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teks-3); }
.tanda-hijau::before { background: var(--hijau); box-shadow: 0 0 0 3px var(--hijau-redup); }
.tanda-merah::before { background: var(--merah); box-shadow: 0 0 0 3px var(--merah-redup); }

/* ------------------------------------------------------------- tabel */

.tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabel th, .tabel td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--garis); vertical-align: top; font-weight: 500; }
.tabel th:first-child, .tabel td:first-child { padding-left: var(--tepi); }
.tabel th:last-child, .tabel td:last-child { padding-right: var(--tepi); }
.tabel thead th { color: var(--teks-3); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.tabel tbody th { font-weight: 600; min-width: 160px; }
.tabel tbody tr:last-child th, .tabel tbody tr:last-child td { border-bottom: 0; }
.tabel tbody tr:hover > * { background: rgba(255, 255, 255, .02); }
.tabel .angka, .angka { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabel a { font-weight: 600; }
.td-ket { display: block; color: var(--teks-3); font-size: 12.5px; font-weight: 500; margin-top: 2px; }
.td-jingga { color: var(--jingga); }

.fakta { display: grid; }
.fakta > div { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; padding: 12px var(--tepi); border-bottom: 1px solid var(--garis); font-size: 14px; }
.fakta > div:last-child { border-bottom: 0; }
.fakta dt { color: var(--teks-3); }
.fakta dd { overflow-wrap: anywhere; }

.rinci { margin-top: 12px; font-size: 14px; max-width: 460px; }
.rinci li { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; color: var(--teks-2); border-bottom: 1px solid var(--garis); }
.rinci li:last-child { border-bottom: 0; }

/* -------------------------------------------------------------- ubin */

.ubin-baris { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ubin { padding: 16px 18px; background: var(--panel); border: 1px solid var(--garis); border-radius: 14px; min-width: 0; }
.blok .ubin { background: var(--panel-2); border-color: transparent; }
.ubin-label { font-size: 13px; font-weight: 600; color: var(--teks-2); }
.ubin-nilai { font-family: var(--judul); font-size: 28px; font-weight: 700; line-height: 1.1; margin: 8px 0 6px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ubin-ket { font-size: 12.5px; color: var(--teks-3); line-height: 1.4; }

/* ------------------------------------------------------------ batang */

progress.batang, progress.meter { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; width: 100%; border: 0; background: transparent; }
progress.batang { height: 8px; border-left: 1px solid var(--garis-kuat); }
progress.batang::-webkit-progress-bar { background: transparent; }
progress.batang::-webkit-progress-value { background: var(--data); border-radius: 0 4px 4px 0; }
progress.batang::-moz-progress-bar { background: var(--data); border-radius: 0 4px 4px 0; }

.db li { display: grid; grid-template-columns: minmax(96px, 38%) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--garis); font-size: 14px; }
.db li:last-child { border-bottom: 0; }
.db-nama { overflow-wrap: anywhere; line-height: 1.3; }
.db-nama a { text-decoration-color: transparent; }
.db-nama a:hover { text-decoration-color: currentColor; }
.db-nilai { font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; font-weight: 700; }

/* ------------------------------------------------------------ grafik */

.gf-wadah { background: var(--panel); border: 1px solid var(--garis); border-radius: var(--r); padding: 18px 18px 8px; }
.blok .gf-wadah { background: none; border: 0; border-radius: 0; padding: 4px 0 0; }
.gf-bingkai { position: relative; container-type: inline-size; }
.gf { display: block; width: 100%; height: auto; overflow: visible; }
.gf-lebar, .gf-sedang { display: none; }
.gf-sempit { max-width: 470px; }
@container (min-width: 520px) {
  .gf-sedang { display: block; }
  .gf-sempit { display: none; }
}
@container (min-width: 860px) {
  .gf-lebar { display: block; }
  .gf-sedang { display: none; }
}
.gf-garis { stroke: var(--garis); stroke-width: 1; }
.gf-nol { stroke: var(--garis-kuat); }
.gf-sumbu { fill: var(--teks-3); font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.gf-nilai { fill: var(--teks); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gf-kol { fill: var(--data); }
.gf-kena { fill: transparent; }
.gf-titik { outline: none; cursor: default; }
.gf-titik:hover .gf-kol, .gf-titik:focus .gf-kol { fill: var(--cyan); }
.gf-titik:focus-visible .gf-kena { stroke: var(--cyan); stroke-width: 1; }
.gf-tip { position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, calc(-100% - 8px)); background: #030a2a; border: 1px solid var(--garis-kuat); border-radius: 10px; padding: 7px 11px; white-space: nowrap; font-size: 12.5px; color: var(--teks-2); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .7); }
.gf-tip b { display: block; font-size: 14px; font-weight: 700; color: var(--teks); }
.gf-tabel { margin-top: 6px; font-size: 13.5px; }
.gf-tabel > summary { cursor: pointer; color: var(--teks-2); padding: 8px 0; width: fit-content; }
.gf-tabel > summary:hover { color: var(--teks); }
.gf-tabel .gulir { max-height: 320px; overflow-y: auto; border-top: 1px solid var(--garis); }

.seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--panel); border: 1px solid var(--garis); border-radius: 12px; margin-bottom: 18px; }
.seg-butir { padding: 7px 14px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--teks-2); text-decoration: none; }
.seg-butir:hover { color: var(--teks); background: var(--panel-2); }
.seg-butir[aria-current="true"] { background: linear-gradient(180deg, var(--tombol), var(--tombol-2)); color: #fff; }

/* ----------------------------------------------------------- beranda */

.beranda { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.beranda > .blok { margin-top: 0; }

.utama {
  display: grid; gap: 14px 26px; align-content: center; padding: 24px 22px;
  border: 1px solid var(--garis-kuat); border-radius: 20px;
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(27, 109, 255, .42), transparent 58%),
    radial-gradient(90% 90% at 0% 100%, rgba(3, 225, 255, .10), transparent 60%),
    linear-gradient(180deg, #0c1c5c, #0a1748);
}
.utama-angka {
  font-family: var(--judul); font-size: clamp(72px, 16vw, 116px); font-weight: 700; line-height: .85; letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff 25%, #8cc0ff); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.utama-teks { display: grid; gap: 12px; justify-items: start; align-content: end; }
.utama h1 { font-size: clamp(22px, .8vw + 17px, 27px); }
.utama .lead { margin-top: 0; }
.utama-kosong .utama-angka { background: linear-gradient(180deg, #ffffff 10%, #6f9dea); -webkit-background-clip: text; background-clip: text; }

.perlu { border: 1px solid var(--garis); background: var(--panel); border-radius: var(--r); overflow: hidden; }
.perlu-butir { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; align-items: start; padding: 12px var(--tepi); border-bottom: 1px solid var(--garis); font-size: 14px; }
.perlu-butir:last-child { border-bottom: 0; }
.perlu-butir .tb { grid-column: 2; justify-self: start; }
.perlu-tanda { font-size: 11.5px; font-weight: 700; min-width: 74px; padding: 5px 10px; border-radius: 999px; text-align: center; background: var(--panel-3); color: var(--teks-2); }
.perlu-merah .perlu-tanda { background: var(--merah-redup); color: var(--merah-teks); }
.perlu-jingga .perlu-tanda { background: var(--jingga-redup); color: var(--jingga); }
.perlu-biru .perlu-tanda { background: var(--cyan-redup); color: var(--cyan); }

.ak-daftar li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--garis); font-size: 14px; }
.ak-daftar li:first-child { padding-top: 2px; }
.ak-daftar li:last-child { border-bottom: 0; padding-bottom: 0; }
.ak-nama b { font-weight: 700; }
.ak-antre { color: var(--teks-2); white-space: nowrap; text-align: right; }
.ak-antre b { color: var(--teks); font-family: var(--judul); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ak-kondisi { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.ak-kondisi .td-ket { margin: 0; }
.ak-exp { grid-column: 1 / -1; color: var(--teks-3); font-size: 12.5px; }

.rw { border: 1px solid var(--garis); background: var(--panel); border-radius: var(--r); font-size: 14px; overflow: hidden; }
.rw li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 11px var(--tepi); border-bottom: 1px solid var(--garis); }
.rw li:last-child { border-bottom: 0; }
.rw-waktu { color: var(--teks-3); font-variant-numeric: tabular-nums; font-size: 13px; padding-top: 1px; }
.rw-isi { color: var(--teks-2); overflow-wrap: anywhere; }
.rw-isi b { color: var(--teks); font-weight: 700; }
.rw-detail { display: block; color: var(--teks-3); font-size: 13px; margin-top: 2px; }

/* ----------------------------------------------------------- antrean */

.antrean { display: grid; gap: 16px; }
.antrean-isi { min-width: 0; }
.saring { display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 4px; margin: 0 -16px; scrollbar-width: none; }
.saring::-webkit-scrollbar { display: none; }
.sr-grup { display: contents; }
.sr-judul { display: none; }
.sr-butir { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 1px solid var(--garis-kuat); border-radius: 999px; background: var(--panel); font-size: 13.5px; font-weight: 600; color: var(--teks-2); text-decoration: none; white-space: nowrap; }
.sr-butir:hover { color: var(--teks); border-color: var(--teks-3); }
.sr-butir[aria-current="true"] { background: linear-gradient(180deg, var(--tombol), var(--tombol-2)); border-color: transparent; color: #fff; }
.sr-hitung { font-variant-numeric: tabular-nums; font-weight: 700; }
.sr-butir:not([aria-current]) .sr-hitung { color: var(--teks-3); }

.kabar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 11px 16px; margin-bottom: 14px; border: 1px solid rgba(42, 216, 255, .45); border-radius: 12px; background: var(--cyan-redup); font-size: 14px; }

.kom-daftar { display: grid; gap: 14px; background: none; border: 0; border-radius: 0; overflow: visible; }
.kom { position: relative; padding: 18px var(--tepi) var(--tepi); background: var(--panel); border: 1px solid var(--garis); border-radius: var(--r); }
.kom-mendesak { border-color: rgba(255, 92, 108, .45); }
.kom:target { box-shadow: 0 0 0 2px var(--cyan); }
.kom-kepala, .br-kepala { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13.5px; }
.kom-siapa { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; order: 1; }
.kom-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; order: 3; flex-basis: 100%; }
.kom-akun, .kom-suka { color: var(--teks-3); }
.kom-waktu { color: var(--teks-3); margin-left: auto; white-space: nowrap; order: 2; }
.kom-induk { margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--garis-kuat); color: var(--teks-3); font-size: 13.5px; }
.kom-teks { margin-top: 12px; font-size: 17px; line-height: 1.5; font-weight: 500; overflow-wrap: anywhere; max-width: 72ch; }
.kom-gambar { color: var(--teks-3); font-size: 15px; }
.kom-video { margin-top: 8px; font-size: 13.5px; color: var(--teks-3); overflow-wrap: anywhere; }
.kom-video a { color: var(--teks-2); }

.balas { margin-top: 16px; }
.balas-label { display: flex; align-items: baseline; gap: 10px; font-size: 13px; margin-bottom: 6px; }
.balas-label label { font-weight: 700; color: var(--teks-2); }
.balas-sumber { color: var(--teks-3); }
.balas-hitung { margin-left: auto; color: var(--teks-3); font-variant-numeric: tabular-nums; }
.balas-hitung.lebih { color: var(--merah-teks); font-weight: 700; }
.balas textarea {
  display: block; width: 100%; min-height: 86px; resize: vertical; field-sizing: content;
  background: var(--panel-2); border: 1px solid var(--garis-kuat); border-radius: 12px;
  padding: 12px 14px; font-size: 16px; line-height: 1.5; color: var(--teks);
}
.balas textarea::placeholder { color: var(--teks-3); }
.balas textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(42, 216, 255, .16); }
/* garis batas 150 karakter: terisi cyan seiring ketikan, merah kalau lewat */
progress.meter { height: 4px; margin-top: 6px; border-radius: 999px; overflow: hidden; background: var(--cyan-redup); }
progress.meter::-webkit-progress-bar { background: var(--cyan-redup); border-radius: 999px; }
progress.meter::-webkit-progress-value { background: var(--cyan); border-radius: 999px; }
progress.meter::-moz-progress-bar { background: var(--cyan); border-radius: 999px; }
progress.meter.lebih, progress.meter.lebih::-webkit-progress-bar { background: var(--merah-redup); }
progress.meter.lebih::-webkit-progress-value { background: var(--merah); }
progress.meter.lebih::-moz-progress-bar { background: var(--merah); }
.cat { font-size: 13px; color: var(--teks-2); margin-top: 8px; }
.cat-merah { color: var(--merah-teks); }
.cat-jingga { color: var(--jingga); }

.aksi { display: grid; gap: 10px; margin-top: 14px; }
.aksi-utama { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.aksi-utama .tb { min-height: 46px; }
.aksi-sunyi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; justify-items: start; }

.yakin > summary { list-style: none; cursor: pointer; }
.yakin > summary::-webkit-details-marker { display: none; }
.yakin[open] > summary { color: var(--teks); }
.aksi-sunyi .yakin[open] { grid-column: 1 / -1; flex-basis: 100%; }
.yakin-isi { margin-top: 8px; padding: 12px 14px; border: 1px solid var(--garis-kuat); border-radius: 12px; background: var(--panel-2); display: grid; gap: 10px; justify-items: start; font-size: 14px; color: var(--teks-2); max-width: 460px; }

.nomor { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: 13.5px; color: var(--teks-2); }

/* ---------------------------------------------------------- komentar */

.filter { display: grid; gap: 12px; align-items: end; margin-bottom: 16px; padding: var(--tepi); background: var(--panel); border: 1px solid var(--garis); border-radius: var(--r); }
.blok .filter { padding: 0; background: none; border: 0; margin: 16px 0 0; }
.fl { display: grid; gap: 6px; min-width: 0; }
.fl label, .isian > label, .pilih legend { font-size: 13px; font-weight: 700; color: var(--teks-2); }
input[type="text"], input[type="search"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], select {
  width: 100%; min-height: 44px; padding: 0 12px;
  background: var(--panel-2); border: 1px solid var(--garis-kuat); border-radius: var(--r-kecil); color: var(--teks); font-size: 16px;
}
select { -webkit-appearance: none; appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--teks-2) 50%), linear-gradient(135deg, var(--teks-2) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
input::placeholder { color: var(--teks-3); }
input:focus, select:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(42, 216, 255, .16); }
input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(.8); }
.jumlah { font-size: 13px; color: var(--teks-3); margin-bottom: 8px; }

.br { padding: 14px var(--tepi); border-bottom: 1px solid var(--garis); }
.br:last-child { border-bottom: 0; }
.br-teks { margin-top: 6px; font-size: 15px; overflow-wrap: anywhere; max-width: 80ch; }
.br-balasan { margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--garis-kuat); font-size: 14px; color: var(--teks-2); overflow-wrap: anywhere; max-width: 80ch; }
.br-oleh { color: var(--teks-3); }
.br-aksi { margin-top: 10px; }

/* ------------------------------------------------------------ hadiah */

.buat { margin-top: 16px; }
.buat > summary { cursor: pointer; padding: 16px var(--tepi); list-style: none; display: flex; align-items: center; justify-content: space-between; }
.buat > summary::-webkit-details-marker { display: none; }
.buat > summary::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--teks-2); border-bottom: 1.5px solid var(--teks-2); transform: rotate(45deg); margin-right: 4px; }
.buat[open] > summary::after { transform: rotate(-135deg); }
.buat[open] > summary { border-bottom: 1px solid var(--garis); }
.buat-judul { font-family: var(--judul); font-weight: 650; font-size: 15.5px; }
.isian { display: grid; gap: 8px; }
.isian > label { margin-top: 10px; }
.isian-kisi { padding: 18px var(--tepi) 20px; gap: 18px 16px; }
.isian-kisi .fl { align-content: start; }
.isian-kisi input[type="time"] { margin-top: 2px; }
.pilih { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.pilih legend { padding: 0; margin-bottom: 8px; }
.centang { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--teks); cursor: pointer; }
.centang input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--tombol); flex: none; }
.centang small { display: block; color: var(--teks-3); font-size: 12.5px; line-height: 1.45; margin-top: 2px; }

.rinci-kisi { display: grid; grid-template-columns: minmax(0, 1fr); }
.rinci-kiri, .rinci-kanan { display: contents; }
.r-fakta { order: 1; }
.r-peserta { order: 2; }
.r-pemenang { order: 3; }
.r-tentukan { order: 4; }
.r-penutup { order: 5; }
.rinci-kisi > .kilas, .rinci-kiri > .kilas { margin-top: 16px; }

.pm { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; align-items: start; padding: 14px var(--tepi); border-bottom: 1px solid var(--garis); }
.pm:last-child { border-bottom: 0; }
.pm-urut { font-size: 12.5px; font-weight: 800; color: var(--cyan); min-width: 20px; padding-top: 3px; font-variant-numeric: tabular-nums; }
.tinjau { padding: 18px var(--tepi); display: grid; gap: 4px; }
.tinjau h2 { margin: 12px 0 0; color: var(--teks-2); font-size: 13px; font-weight: 700; }
.tinjau h2:first-child { margin-top: 0; }
.tinjau .kom-teks { margin-top: 4px; }

/* ------------------------------------------------------------- masuk */

/* halaman pembuka: latar biru bercahaya dengan dua bidang miring di sudut, seperti latar logo */
body.masuk {
  position: relative; isolation: isolate; overflow-x: hidden;
  display: grid; place-items: center; padding: 32px 16px; min-height: 100vh; min-height: 100dvh;
  background: radial-gradient(120% 90% at 50% 0%, #0a2fa6 0%, #031777 45%, #010c4a 100%);
}
body.masuk::before, body.masuk::after {
  content: ""; position: fixed; z-index: -1; pointer-events: none;
  width: 80vmax; height: 36vmax; border-radius: 3vmax; transform: skewX(-38deg);
}
body.masuk::before { top: -16vmax; left: -34vmax; background: linear-gradient(180deg, rgba(31, 98, 235, .5), rgba(31, 98, 235, .06)); }
body.masuk::after { bottom: -18vmax; right: -34vmax; background: linear-gradient(0deg, rgba(14, 135, 252, .55), rgba(14, 135, 252, .06)); }
.masuk-kotak {
  width: 100%; max-width: 410px; display: grid; gap: 10px; padding: 30px 26px 24px;
  background: rgba(3, 12, 52, .80); border: 1px solid rgba(110, 150, 255, .22); border-radius: 22px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .75); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.masuk-logo { display: block; width: 210px; height: auto; margin: 0 0 18px; }
.masuk-kotak h1 { font-size: 26px; }
.masuk-kotak .isian { margin-top: 12px; }
.masuk-kotak .tb-lebar { margin-top: 14px; }
.masuk-kotak .centang { margin-top: 12px; color: var(--teks-2); }
.isian-kode { font-variant-numeric: tabular-nums; letter-spacing: .3em; font-size: 20px !important; font-weight: 700; }
.masuk-kaki { margin-top: 20px; font-size: 12.5px; color: var(--teks-3); line-height: 1.5; }

/* ----------------------------------------------------- layar sedang */

@media (min-width: 620px) {
  :root { --tepi: 20px; }
  .isi { padding-left: 24px; padding-right: 24px; }
  .rel { padding-left: 24px; padding-right: 24px; }
  .saring { margin: 0; padding: 0; flex-wrap: wrap; overflow: visible; }
  .ubin-baris { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .utama { grid-template-columns: auto minmax(0, 1fr); align-items: end; padding: 28px 30px; }
  .beranda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .beranda > .b-utama, .beranda > .b-hari, .beranda > .b-perlu, .beranda > .b-baru { grid-column: 1 / -1; }
  .filter { grid-template-columns: minmax(200px, 2fr) repeat(auto-fit, minmax(140px, 1fr)); }
  .filter > .tb { justify-self: start; }
  .isian-kisi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fl-penuh { grid-column: 1 / -1; }
  .perlu-butir { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .perlu-butir .tb { grid-column: auto; }
  .kom { padding: 22px 24px 20px; }
  .kom-meta { order: 2; flex-basis: auto; }
  .kom-waktu { order: 3; }
  .aksi { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 24px; }
  .aksi-utama { display: flex; }
  .aksi-utama .tb { min-height: 40px; }
  .aksi-sunyi { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px 18px; }
  .masuk-kotak { padding: 36px 34px 28px; }
}

/* -------------------------------------------------------- layar lebar */

@media (min-width: 960px) {
  body.app { display: grid; grid-template-columns: 252px minmax(0, 1fr); align-items: start; }
  .rel {
    position: sticky; top: 0; height: 100vh; height: 100dvh; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 28px;
    padding: 28px 16px 22px; border-bottom: 0; border-right: 1px solid var(--garis); background: rgba(3, 9, 38, .72);
  }
  .rel .merek { padding: 0 10px; align-self: flex-start; }
  .merek-gambar { height: 46px; }
  .akun-menu { display: none; }
  .nav { position: static; display: grid; grid-template-columns: 1fr; gap: 4px; background: none; border: 0; padding: 0; }
  .nav-butir { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 12px; font-size: 14.5px; color: var(--teks-2); }
  .nav-butir:hover { color: var(--teks); background: rgba(255, 255, 255, .04); }
  .nav-butir[aria-current="page"] { color: #fff; background: linear-gradient(90deg, rgba(3, 225, 255, .16), rgba(27, 109, 255, .10)); box-shadow: inset 0 0 0 1px rgba(42, 216, 255, .22); }
  .nav-butir[aria-current="page"]::before { display: none; }
  .nav-ikon { width: 20px; height: 20px; }
  .nav-sekunder { display: flex; }
  .nav-hitung { position: static; margin-left: auto; height: 20px; min-width: 22px; line-height: 20px; font-size: 11.5px; }
  .rel-kaki { display: grid; gap: 12px; margin-top: auto; padding: 14px; background: var(--panel); border: 1px solid var(--garis); border-radius: 14px; }
  .rel-tarikan { font-size: 12.5px; color: var(--teks-3); line-height: 1.45; }
  .rel-kaki .tb { width: 100%; }
  .rel-akun { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid var(--garis); }
  .rel-nama { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
  .isi { padding: 30px 40px 72px; }
  .kepala { margin-top: 0; }
  .dua { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .antrean { grid-template-columns: minmax(0, 1fr) 256px; gap: 24px; align-items: start; }
  .saring {
    order: 2; position: sticky; top: 30px; display: grid; gap: 18px;
    padding: 14px 10px; background: var(--panel); border: 1px solid var(--garis); border-radius: var(--r);
  }
  .sr-grup { display: grid; gap: 2px; }
  .sr-judul { display: block; font-size: 12.5px; font-weight: 700; color: var(--teks-3); padding: 0 10px 6px; }
  .sr-butir { justify-content: space-between; border: 0; border-radius: 10px; background: none; min-height: 38px; padding: 0 10px; }
  .sr-butir:hover { background: rgba(255, 255, 255, .04); }
  .sr-butir[aria-current="true"] { background: linear-gradient(90deg, rgba(3, 225, 255, .16), rgba(27, 109, 255, .10)); color: #fff; box-shadow: inset 0 0 0 1px rgba(42, 216, 255, .22); }
  .sr-butir[aria-current="true"] .sr-hitung { color: var(--cyan); }
}

/* --------------------------------------------------- layar sangat lebar */

@media (min-width: 1200px) {
  .beranda { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
  .beranda > .b-utama { grid-column: span 5; }
  .beranda > .b-hari { grid-column: span 7; }
  .beranda > .b-perlu { grid-column: 1 / -1; }
  .beranda > .b-kat, .beranda > .b-akun, .beranda > .b-baru { grid-column: span 4; }
  .b-hari .ubin-baris { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .utama { grid-template-columns: minmax(0, 1fr); align-content: space-between; }
  .rinci-kisi { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 20px; align-items: start; }
  .rinci-kiri, .rinci-kanan { display: grid; align-content: start; min-width: 0; }
  .rinci-kiri > .r-fakta { margin-top: 0; }
  .rinci-kanan > .blok:first-child { margin-top: 0; }
}

@media (pointer: coarse) {
  .tb, .tb-kecil, .tb-teks, .sr-butir, .seg-butir, .akun-menu > summary { min-height: 44px; }
  .seg-butir { display: inline-flex; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .rel, .nav, .kepala-aksi, .balas, .seg { display: none !important; }
  html, body { background: #fff; color: #000; }
  body.app::before, body.app::after { display: none; }
}