/* Taqi Desk: tampilan HP lebih dulu, kit merek Palet B (biru malam, stabilo, biru, putih) dan huruf Poppins.
   Ganti warna hanya di :root. Tiap pasangan teks/latar diperiksa tes/periksa-halaman.js (kontras minimal 4,5 : 1).
   Aturan logo: di atas biru malam pakai versi gelap; ruang kosong di sekeliling logo minimal setinggi kotak lambang
   (logo tinggi 32 px -> lambang sekitar 27 px); biru tidak dipakai di atas biru malam. */
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url(huruf/poppins-400.woff) format("woff"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url(huruf/poppins-600.woff) format("woff"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url(huruf/poppins-700.woff) format("woff"); }

:root {
  --ink: #0f1b33;        /* biru malam: teks utama */
  --malam: #0f1b33;      /* biru malam: bagian atas dan bawah */
  --stabilo: #ffd84d;
  --on-stabilo: #0f1b33;
  --muted: #4a5468;
  --bg: #ffffff;
  --soft: #f4f6fa;
  --line: #d9dfea;
  --garis-isian: #7a869c; /* batas kotak isian dan pilihan: minimal 3 : 1 terhadap bg dan soft (WCAG 1.4.11) */
  --accent: #1d4ed8;     /* biru situs: tombol dan tautan di latar terang */
  --on-accent: #ffffff;
  --on-malam: #ffffff;
  --muted-malam: #c9d2e3;
  --ok: #0f5132;
  --ok-bg: #e6f4ec;
  --off: #7a2e0e;
  --off-bg: #fdf0e6;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-bottom: 88px; } /* fokus tidak tertutup tombol melayang */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; padding-bottom: 88px;
  font: 16px/1.6 "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink); background: var(--bg);
}
h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.atas :focus-visible, .hero :focus-visible, .kaki :focus-visible { outline-color: var(--stabilo); }
[hidden] { display: none !important; }
section[id] { scroll-margin-top: 16px; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

.lewati { position: absolute; left: -999px; top: 0; z-index: 60; background: var(--stabilo); color: var(--on-stabilo); padding: 12px 16px; font-weight: 700; }
.lewati:focus { left: 8px; top: 8px; }

/* header: biru malam, logo versi gelap dengan ruang kosong 28 px di atas dan bawah */
.atas { background: var(--malam); }
.atas-isi { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 28px 16px; }
.merek { min-height: 44px; display: inline-flex; align-items: center; }
.merek img { display: block; height: 32px; width: auto; }
.menu { display: none; gap: 4px; margin-left: auto; }
.menu a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--on-malam); font-weight: 600; text-decoration: none; }
.menu a:hover { color: var(--stabilo); }

/* tombol */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 48px; padding: 0 22px; border-radius: 12px; border: 2px solid var(--accent);
  background: var(--accent); color: var(--on-accent); font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none;
}
.tombol-kosong { background: var(--bg); color: var(--accent); }
.tombol-kecil { min-height: 44px; padding: 0 18px; }
.tombol-stabilo { background: var(--stabilo); border-color: var(--stabilo); color: var(--on-stabilo); }
.tombol-garis-terang { background: transparent; border-color: var(--on-malam); color: var(--on-malam); }
.wa-melayang { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 30; box-shadow: 0 6px 20px rgba(15, 27, 51, .3); }
.tautan-besar { display: inline-flex; align-items: center; min-height: 44px; }

/* hero: lanjutan biru malam */
/* tekstur: titik halus dan cahaya stabilo samar di biru malam */
.atas, .hero, .kaki {
  background-color: var(--malam);
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.6px);
  background-size: 18px 18px;
}
.hero { position: relative; overflow: hidden; color: var(--on-malam); padding: 8px 0 44px; }
.hero::before { content: ""; position: absolute; width: 460px; height: 460px; right: -160px; top: 10%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 216, 77, .16), rgba(255, 216, 77, 0) 65%); pointer-events: none; }
.hero-isi { position: relative; display: grid; gap: 28px; }
.hero h1 { margin: 16px 0 10px; font-size: 30px; line-height: 1.2; max-width: 18em; }
.lead { margin: 0 0 24px; font-size: 17px; color: var(--muted-malam); max-width: 34em; }
.aksi { display: flex; flex-direction: column; gap: 12px; }
.status { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 14px; background: var(--off-bg); color: var(--off); }
.status .titik { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.status.buka { background: var(--ok-bg); color: var(--ok); }

/* bagian */
.bagian { padding: 44px 0; }
/* tekstur garis buku tulis di bagian terang */
.bagian.lembut { background-color: var(--soft);
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(15, 27, 51, .045) 31px 32px); }
.bagian h2 { margin: 0 0 8px; font-size: 26px; line-height: 1.25; }
/* coretan stabilo di bawah judul bagian */
.bagian h2 { display: inline; background: linear-gradient(transparent 58%, var(--stabilo) 58%, var(--stabilo) 92%, transparent 92%);
  box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 4px; margin-left: -4px; }
.bagian h2 + .catatan { margin-top: 12px; }

/* tumpukan kertas 3D (CSS saja, tanpa pustaka) */
.kertas-3d { position: relative; width: 160px; height: 190px; margin: 4px auto 0; perspective: 900px; }
.kertas-3d .lembar.l1 { padding: 20px 16px; gap: 8px; }
.lembar { position: absolute; inset: 0; border-radius: 10px; background: #ffffff;
  box-shadow: 0 18px 30px rgba(0, 0, 0, .35); transform-style: preserve-3d; }
.lembar.l3 { transform: rotateX(18deg) rotateZ(-14deg) translate(-26px, 10px); background: #dfe6f3; }
.lembar.l2 { transform: rotateX(18deg) rotateZ(-6deg) translate(-12px, 4px); background: #eef2f9; }
.lembar.l1 { transform: rotateX(18deg) rotateZ(4deg); padding: 26px 22px; display: flex; flex-direction: column; gap: 10px;
  background-image: repeating-linear-gradient(to bottom, transparent 0 21px, rgba(29, 78, 216, .10) 21px 22px); background-position: 0 82px; }
.lembar i { display: block; height: 7px; border-radius: 4px; background: #c7d0e0; }
.lembar i.judul { width: 70%; height: 12px; background: var(--malam); margin: 0 auto; }
.lembar i.sub { width: 45%; margin: 0 auto 10px; }
.lembar i.stabilo { background: var(--stabilo); height: 12px; width: 85%; transform: skewX(-12deg); }
.lembar i.pendek { width: 55%; }
.penjepit { position: absolute; top: -10px; left: 50%; width: 70px; height: 22px; margin-left: -35px; border-radius: 6px;
  background: var(--stabilo); transform: rotateX(18deg) rotateZ(4deg); box-shadow: 0 4px 8px rgba(0, 0, 0, .25); }
.kertas-3d > * { animation: melayang 6s ease-in-out infinite; }
.kertas-3d .l2 { animation-delay: -.6s; }
.kertas-3d .l3 { animation-delay: -1.2s; }
@keyframes melayang { 50% { translate: 0 -8px; } }
@media (prefers-reduced-motion: reduce) { .kertas-3d > * { animation: none; } }
.catatan { margin: 0 0 16px; color: var(--muted); }
.kelompok { margin: 28px 0 0; }
.kelompok h3 { margin: 0 0 4px; font-size: 19px; }

/* paket makalah: pilihan bahan dan tiga kartu */
.jalur { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: var(--soft); border: 1px solid var(--line); margin: 4px 0 20px; }
.jalur label { position: relative; }
.jalur input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.jalur span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 10px; font-weight: 600; color: var(--ink); }
.jalur input:checked + span { background: var(--malam); color: var(--on-malam); }
.jalur input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.kartu-paket { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.kartu { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 20px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); }
.kartu.sorot { border: 3px solid var(--stabilo); box-shadow: 0 8px 24px rgba(15, 27, 51, .10); }
.kartu .lencana { position: absolute; top: -13px; left: 18px; padding: 2px 12px; border-radius: 999px; background: var(--stabilo); color: var(--on-stabilo); font-size: 13px; font-weight: 700; }
.kartu h3 { margin: 0; font-size: 20px; }
.kartu .harga-besar { margin: 0; font-size: 30px; font-weight: 700; line-height: 1.1; }
.kartu .selesai { margin: 0; font-weight: 600; }
.kartu ul { margin: 4px 0 8px; padding-left: 20px; color: var(--muted); }
.kartu .tombol { margin-top: auto; }
.judul-langkah { margin: 40px 0 12px; font-size: 20px; }
.langkah { margin: 0; padding: 0; list-style: none; counter-reset: l; display: grid; gap: 12px; }
.langkah li { counter-increment: l; position: relative; padding: 2px 0 2px 48px; }
.langkah li::before { content: counter(l); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--malam); color: var(--stabilo); font-weight: 700; display: grid; place-items: center; }
.janji { margin: 20px 0 0; padding: 14px 16px; border-left: 5px solid var(--stabilo); background: var(--soft); border-radius: 0 12px 12px 0; font-weight: 600; }

/* daftar harga: tab per kelompok, baris ringkas (nama dan harga satu baris, seluruh baris ditekan untuk memesan) */
.tab-layanan { display: flex; gap: 8px; overflow-x: auto; margin: 2px -16px 6px; padding: 6px 16px 10px; scrollbar-width: thin; }
.tab { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.tab svg { width: 18px; height: 18px; flex: none; }
.tab[aria-selected="true"] { background: var(--malam); border-color: var(--malam); color: var(--on-malam); }
.kelompok { margin: 12px 0 0; padding: 4px 16px 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 16px; }
.kelompok h3 { margin: 12px 0 2px; font-size: 18px; }
.daftar { list-style: none; margin: 0; padding: 0; }
#makalah-lain { margin-top: 20px; }
.baris { border-top: 1px solid var(--line); }
.baris-isi { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 12px; min-height: 48px; padding: 10px 0; color: var(--ink); text-decoration: none; }
a.baris-isi:hover .nama { color: var(--accent); }
.baris-isi .nama { display: block; font-weight: 600; }
.baris-isi .ket { display: block; color: var(--muted); font-size: 14px; line-height: 1.45; }
.baris-isi .harga { font-weight: 700; text-align: right; max-width: 11em; }
.baris-isi .panah { color: var(--accent); font-size: 22px; font-weight: 700; line-height: 1; }
div.baris-isi { grid-template-columns: minmax(0, 1fr) auto; }
.pesan { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 64px; padding: 0 12px; border-radius: 10px; border: 2px solid var(--accent); color: var(--accent); font-weight: 700; text-decoration: none; background: var(--bg); }

/* tabel */
.tabel { width: 100%; border-collapse: collapse; margin-top: 8px; background: var(--bg); }
.tabel th, .tabel td { text-align: left; padding: 10px 8px; border-top: 1px solid var(--line); }
.tabel th { color: var(--muted); font-size: 14px; }
.tabel td:last-child, .tabel th:last-child { text-align: right; font-weight: 700; white-space: nowrap; }

/* galeri */
.galeri { display: grid; grid-template-columns: 1fr; gap: 16px; }
.galeri figure { margin: 0; }
.galeri img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.galeri figcaption { margin-top: 6px; color: var(--muted); font-size: 15px; }

/* jam dan lokasi */
.jam { margin: 8px 0 12px; }
.jam .r { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.jam dt { font-weight: 600; }
.jam dd { margin: 0; font-weight: 700; }
.alamat { margin: 16px 0; font-size: 18px; font-weight: 600; }
.aksi-lokasi { display: flex; flex-wrap: wrap; gap: 12px; }
.bintang { width: 20px; height: 20px; margin-right: 8px; flex: none; fill: var(--stabilo); stroke: var(--on-stabilo); stroke-width: 1.5; stroke-linejoin: round; }

.kaki { background: var(--malam); color: var(--on-malam); padding: 28px 0; }
.kaki a { color: var(--stabilo); }
.kaki p { margin: 4px 0; }


@media (min-width: 760px) {
  .menu { display: flex; }
  .aksi { flex-direction: row; }
  .hero { padding: 16px 0 72px; }
  .hero h1 { font-size: 44px; }
  .hero-isi { grid-template-columns: minmax(0, 1fr) 300px; align-items: center; }
  .kertas-3d { width: 240px; height: 290px; margin: 24px auto 0; }
  .kertas-3d .lembar.l1 { padding: 26px 22px; gap: 10px; }
  .kartu-paket { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .langkah { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .langkah li { padding: 46px 0 0; }
  .galeri { grid-template-columns: repeat(3, 1fr); }
  .wa-melayang { left: auto; right: 24px; width: auto; }
  body { padding-bottom: 96px; }
}

/* hitung perkiraan harga makalah: grid yang menyesuaikan lebar; pilihan berupa kotak yang bisa dicentang */
.hitung { margin: 32px 0 0; padding: 20px; border: 2px dashed var(--line); border-radius: 16px; background: var(--soft);
  display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.hitung h3 { margin: 0; font-size: 20px; }
#form-hitung { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); align-items: start; }
.isian { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-weight: 600; }
.isian select, .isian input { width: 100%; min-width: 0; min-height: 48px; padding: 0 12px; border: 2px solid var(--garis-isian); border-radius: 10px;
  background: var(--bg); color: var(--ink); font: inherit; font-weight: 600; text-overflow: ellipsis; }
.isian small { color: var(--muted); font-weight: 400; font-size: 13px; }
.pilihan { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.centang { flex: 1 1 180px; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px;
  border: 2px solid var(--garis-isian); border-radius: 12px; background: var(--bg); cursor: pointer; }
.centang:has(input:checked) { border-color: var(--accent); }
.centang input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); flex: none; }
.centang-teks { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.centang-teks b { font-weight: 600; }
.centang-teks small { color: var(--muted); font-size: 13px; }
.hasil-hitung { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#h-total { font-size: 28px; font-weight: 700; line-height: 1.2; }
#h-rincian { list-style: none; margin: 0; padding: 0; }
#h-rincian li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 15px; }
#h-rincian .angka { font-weight: 700; white-space: nowrap; }
#h-rincian li:last-child { border-bottom: 1px solid var(--line); }
.hasil-hitung .catatan { margin: 0; font-size: 14px; }
.hasil-hitung .tombol { width: 100%; }

/* yang sering ditanyakan */
.daftar-tanya { margin-top: 16px; display: grid; gap: 10px; }
.tanya { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.tanya summary { display: flex; align-items: center; min-height: 52px; padding: 0 16px; font-weight: 600; cursor: pointer; list-style: none; }
.tanya summary::-webkit-details-marker { display: none; }
.tanya summary::after { content: "+"; margin-left: auto; padding-left: 12px; font-size: 22px; color: var(--accent); }
.tanya[open] summary::after { content: "\2212"; }
.tanya p { margin: 0; padding: 0 16px 16px; color: var(--muted); }

/* mode malam: di luar jam balas WhatsApp. Biru tidak dipakai di atas biru malam; sorotan memakai stabilo. */
.pita-malam { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--stabilo); color: var(--on-stabilo); font-weight: 700; }
body.malam {
  color-scheme: dark; /* daftar pilihan dan panah angka bawaan peramban ikut gelap */
  --bg: #0f1b33;
  --soft: #16233f;
  --ink: #ffffff;
  --muted: #c9d2e3;
  --line: #2c3d60;
  --garis-isian: #6b7fa6;
  --accent: #ffd84d;
  --on-accent: #0f1b33;
}
body.malam .tab[aria-selected="true"], body.malam .jalur input:checked + span { background: var(--stabilo); border-color: var(--stabilo); color: var(--on-stabilo); }
body.malam .langkah li::before { background: var(--stabilo); color: var(--on-stabilo); }
body.malam .tombol-garis-terang { border-color: #ffffff; color: #ffffff; }
body.malam .bagian.lembut { background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(255, 255, 255, .04) 31px 32px); }
body.malam .kaki { border-top: 1px solid var(--line); }
@media (min-width: 760px) {
  .hitung { grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); column-gap: 28px; padding: 24px; }
  .hitung h3 { grid-column: 1 / -1; }
  .hasil-hitung { padding: 16px 18px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); align-self: start; }
  .baris-isi .harga { max-width: none; white-space: nowrap; }
}
/* mode malam: judul putih tidak ditimpa stabilo; coretan menjadi garis bawah tipis */
body.malam .bagian h2 { background: linear-gradient(transparent 88%, var(--stabilo) 88%, var(--stabilo) 98%, transparent 98%); }
/* layar sangat sempit: harga boleh dua baris supaya nama layanan tidak terdesak */
@media (max-width: 359px) {
  .baris-isi { gap: 4px 8px; }
  .baris-isi .harga { max-width: 7.5em; font-size: 15px; }
}
/* desktop: tiga isian sebaris, lebar sesuai isi (Bahan paling panjang) */
@media (min-width: 760px) { #form-hitung { grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr) minmax(0, .7fr); } }
/* tablet: hasil hitungan di bawah formulir, supaya kotak isian tetap lebar */
@media (min-width: 760px) and (max-width: 999px) { .hitung { grid-template-columns: minmax(0, 1fr); } }
/* formulir tidak meregang mengikuti tinggi panel hasil; label isian satu baris */
#form-hitung { align-content: start; }
.isian { white-space: nowrap; }
.isian small { white-space: normal; }

/* hitung harga cetak: empat kategori warna dalam kisi, lalu rangkap dan jilid */
#form-cetak { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
.isian-kategori { grid-column: 1 / -1; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.isian-sisi { padding: 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--bg); white-space: normal; }
.isian-judul { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.isian-judul b { font-weight: 600; }
.harga-kecil { font-weight: 700; white-space: nowrap; color: var(--ink); }
.rincian { list-style: none; margin: 0; padding: 0; }
.rincian li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 15px; }
.rincian li:last-child { border-bottom: 1px solid var(--line); }
.rincian .angka { font-weight: 700; white-space: nowrap; }
#c-total { font-size: 28px; font-weight: 700; line-height: 1.2; }
@media (max-width: 419px) { #form-cetak { grid-template-columns: minmax(0, 1fr); } }
/* kartu kategori: judul dua baris tetap, harga di bawahnya, supaya kotak isian antarkartu sejajar */
@media (min-width: 420px) {
  .isian-judul { flex-direction: column; align-items: flex-start; gap: 0; }
  .isian-judul b { min-height: 3.2em; line-height: 1.6; }
}