/* ===========================================================================
   Gaya untuk situs CONTOH (demo) di /demo/*.

   PELAJARAN YANG MEMBENTUK BERKAS INI.
   Versi pertama memakai satu tata letak untuk semua contoh dan cuma menukar
   warna, huruf, dan foto. Hasilnya persis seperti yang dikhawatirkan: ketiga
   contohnya terasa seperti satu template yang dicat ulang tiga kali. Padahal
   yang mau ditunjukkan justru sebaliknya — bahwa tiap jenis usaha dapat
   susunan yang cocok untuk dagangannya.

   Jadi sekarang tiap contoh punya susunan komponennya sendiri:

     .t-resto   daftar menu bergaris titik-titik seperti buku menu cetak;
                hero terbelah dua, teks di panel warna, foto di sebelahnya.
     .t-butik   lookbook: foto penuh tanpa bingkai, kisi rapat, huruf besar
                berjarak lebar, kepala halaman menumpang di atas foto.
     .t-mainan  serba bulat dan tebal, pilihan umur berupa pil, kartu
                bergaris tebal berwarna.
     .t-jasa    formulir pemesanan langsung di hero, daftar harga berbentuk
                tabel, langkah kerja bernomor, dan nomor telepon yang selalu
                kelihatan.

   Yang tetap dipakai bersama cuma dasarnya: pita penanda contoh, tombol,
   kaki halaman, dan tata ruang. Itu bagian yang memang tidak perlu berbeda.
   =========================================================================== */

/* ===================================================== dasar bersama ====== */
.t-resto  { --aksen:#B45309; --aksen-2:#F59E0B; --gelap:#2A1D10; --lembut:#FDF6EC; }
.t-butik  { --aksen:#111111; --aksen-2:#8B7355; --gelap:#111111; --lembut:#F6F4F1; }
.t-mainan { --aksen:#E11D48; --aksen-2:#0EA5E9; --gelap:#1B2440; --lembut:#FFF5F7; }
.t-jasa   { --aksen:#047857; --aksen-2:#10B981; --gelap:#0B2A22; --lembut:#F0FBF6; }

:root { --tinta:#1F2530; --tinta-2:#5B6577; --garis:#E6E9EF; }

/* PENTING untuk tiap <img> yang diberi aspect-ratio di bawah: WAJIB disertai
   height:auto. Semua gambar di sini punya atribut width/height supaya
   peramban memesan ruangnya sebelum gambarnya sampai, tapi atribut height itu
   berlaku sebagai tinggi tetap — dan aspect-ratio baru dipakai kalau salah
   satu sisinya auto. Tanpa height:auto, aspect-ratio diabaikan diam-diam dan
   gambarnya meregang. Ini pernah terjadi: foto koleksi butik yang seharusnya
   3:4 tampil 352x800. */

*,*::before,*::after { box-sizing:border-box; }
body {
  margin:0; color:var(--tinta); background:#fff;
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
/* Pengaman terakhir. Halaman contoh yang bisa digeser ke samping di HP
   memberi kesan buruk justru pada hal yang sedang dijual — jadi kalau ada
   satu bagian yang terlanjur kelebaran, yang digeser cukup bagian itu, bukan
   seluruh halaman. */
html, body { overflow-x:hidden; }
a { color:var(--aksen); }
h1,h2,h3 { margin:0; line-height:1.14; color:var(--gelap); letter-spacing:-.015em; }
p { margin:0; }
ul { margin:0; padding:0; list-style:none; }
:focus-visible { outline:3px solid var(--aksen); outline-offset:3px; border-radius:6px; }

.wrap { width:100%; max-width:1160px; margin-inline:auto; padding-inline:clamp(18px,4vw,32px); }
.wrap--sempit { max-width:820px; }
.bagian { padding-block:clamp(46px,7vw,86px); }
.bagian--lembut { background:var(--lembut); }
.bagian--gelap { background:var(--gelap); color:#fff; }
.bagian--gelap h2, .bagian--gelap h3 { color:#fff; }
.tengah { text-align:center; }
.lead { font-size:1.06rem; color:var(--tinta-2); }
.measure { max-width:58ch; }
.bagian--gelap .lead { color:rgba(255,255,255,.82); }

/* Pita penanda contoh. Halaman ini memang dibuat semirip mungkin dengan
   website usaha sungguhan, dan justru karena itu harus ada yang menyatakan
   bahwa ini contoh — tanpa penanda, orang bisa mengira usahanya benar-benar
   ada lalu mencoba memesan. */
.pita { background:#111827; color:#fff; font-size:.82rem; padding:9px 0; text-align:center; }
.pita a { color:#fff; font-weight:700; }

.tbl {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px; text-decoration:none; font-weight:700; font-size:.97rem;
  border:2px solid transparent; cursor:pointer; border-radius:10px;
}
.tbl--utama { background:var(--aksen); color:#fff; }
.tbl--utama:hover { background:var(--gelap); }
.tbl--garis { border-color:var(--garis); color:var(--gelap); background:#fff; }
.tbl--garis:hover { border-color:var(--aksen); color:var(--aksen); }
.tbl--terang { background:#fff; color:var(--gelap); }
.tbl--penuh { width:100%; }

.isian, .area {
  width:100%; padding:13px 15px; border:1.5px solid var(--garis); border-radius:10px;
  font:inherit; font-size:.97rem; background:#fff; color:var(--tinta);
}
.area { min-height:110px; resize:vertical; }
.isian:focus, .area:focus { outline:none; border-color:var(--aksen); }
.kolom { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.kolom label { font-weight:700; font-size:.88rem; }

.kaki { background:var(--gelap); color:rgba(255,255,255,.72); padding-block:44px 26px; }
.kaki__in { display:grid; gap:26px; grid-template-columns:1fr; }
@media(min-width:760px){ .kaki__in{grid-template-columns:1.6fr 1fr 1fr} }
.kaki h4 { color:#fff; font-size:.95rem; margin:0 0 12px; }
.kaki a { color:rgba(255,255,255,.78); text-decoration:none; }
.kaki a:hover { color:#fff; }
.kaki li { margin-bottom:7px; font-size:.92rem; }
.kaki__bawah {
  border-top:1px solid rgba(255,255,255,.14); margin-top:30px; padding-top:18px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.84rem;
}
.kaki__merek { color:#fff; font-weight:800; font-size:1.1rem; }

.peta {
  width:100%; aspect-ratio:16/10; border-radius:12px; border:1px solid var(--garis);
  background:var(--lembut); display:grid; place-items:center; color:var(--tinta-2);
  font-size:.92rem; text-align:center; padding:20px;
}

/* =========================================================================
   1. RESTOKU — buku menu
   Ciri khasnya daftar harga bergaris titik-titik. Restoran memang menyajikan
   menunya begitu, dan kartu berfoto satu per satu justru membuat pengunjung
   harus menggulir jauh cuma untuk membandingkan harga.
   ========================================================================= */
.t-resto { font-family:"Lora", Georgia, serif; }
.t-resto h1, .t-resto h2, .t-resto h3 { font-family:"Playfair Display", Georgia, serif; }
.t-resto h1 { font-size:clamp(2.1rem,5vw,3.4rem); }
.t-resto h2 { font-size:clamp(1.6rem,3.2vw,2.3rem); }

.r-kepala { background:var(--gelap); color:#fff; }
.r-kepala__atas { display:flex; justify-content:center; padding-top:22px; }
.r-merek { font-family:"Playfair Display",Georgia,serif; font-size:1.7rem; font-weight:700; color:#fff; text-decoration:none; letter-spacing:.02em; }
.r-menu { display:flex; justify-content:center; gap:28px; padding:16px 0 20px; flex-wrap:wrap; }
.r-menu a {
  color:rgba(255,255,255,.72); text-decoration:none; font-size:.82rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; padding-bottom:4px;
  border-bottom:2px solid transparent; font-family:"Plus Jakarta Sans",sans-serif;
}
.r-menu a:hover { color:#fff; }
.r-menu a[aria-current=page] { color:#fff; border-bottom-color:var(--aksen-2); }

/* Hero terbelah: teks di panel warna, foto di sebelahnya. Bukan tulisan di
   atas foto — di atas foto makanan, tulisan apa pun mengurangi selera. */
.r-hero { display:grid; grid-template-columns:1fr; }
@media(min-width:900px){ .r-hero{grid-template-columns:1fr 1fr} }
.r-hero__teks { background:var(--gelap); color:#fff; padding:clamp(38px,6vw,74px) clamp(24px,5vw,64px); display:flex; flex-direction:column; justify-content:center; }
.r-hero__teks h1 { color:#fff; }
.r-hero__teks p { color:rgba(255,255,255,.82); margin-top:18px; }
.r-hero__gbr { min-height:300px; }
.r-hero__gbr img { width:100%; height:100%; object-fit:cover; }
.r-kicau { font-family:"Plus Jakarta Sans",sans-serif; font-size:.75rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--aksen-2); margin-bottom:16px; }
.r-tbl { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }

/* Strip jam buka: satu baris tegas, karena itu pertanyaan nomor satu. */
.r-strip { background:var(--aksen); color:#fff; }
.r-strip__in { display:flex; justify-content:center; gap:clamp(20px,5vw,64px); flex-wrap:wrap; padding:18px 0; text-align:center; font-family:"Plus Jakarta Sans",sans-serif; }
.r-strip b { display:block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; opacity:.75; }
.r-strip span { font-size:1rem; font-weight:700; }

.r-cerita { display:grid; gap:clamp(26px,4vw,54px); align-items:center; grid-template-columns:1fr; }
@media(min-width:880px){ .r-cerita{grid-template-columns:1fr 1fr} }
.r-cerita img { border-radius:2px; width:100%; height:auto; }

/* Daftar menu bergaris titik-titik. */
.r-daftar { display:grid; gap:26px; }
.r-gol h3 {
  font-family:"Plus Jakarta Sans",sans-serif; font-size:.78rem; font-weight:800;
  letter-spacing:.2em; text-transform:uppercase; color:var(--aksen);
  padding-bottom:10px; border-bottom:2px solid var(--aksen); margin-bottom:6px;
}
.r-baris { display:flex; align-items:baseline; gap:10px; padding:13px 0; border-bottom:1px dotted #D9CFC0; }
.r-baris__n { font-weight:700; color:var(--gelap); font-size:1.06rem; }
.r-baris__t { font-size:.9rem; color:var(--tinta-2); font-family:"Plus Jakarta Sans",sans-serif; display:block; margin-top:3px; }
/* Garis titik-titik yang meregang sendiri antara nama dan harga — inilah
   bentuk yang membuat daftarnya terbaca sebagai menu, bukan sebagai tabel. */
.r-baris__titik { flex:1; border-bottom:1px dotted #C9B99F; transform:translateY(-4px); min-width:20px; }
.r-baris__h { font-weight:700; color:var(--aksen); white-space:nowrap; font-family:"Plus Jakarta Sans",sans-serif; }
.r-baris__h s { display:block; font-size:.76rem; color:var(--tinta-2); font-weight:600; }
.r-tanda { display:inline-block; font-family:"Plus Jakarta Sans",sans-serif; font-size:.64rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--aksen); padding:2px 7px; border-radius:3px; margin-left:8px; vertical-align:middle; }

.r-foto { display:grid; gap:14px; grid-template-columns:repeat(2,1fr); margin-top:34px; }
@media(min-width:760px){ .r-foto{grid-template-columns:repeat(3,1fr)} }
.r-foto img { aspect-ratio:4/3; object-fit:cover; width:100%; height:auto; }

/* =========================================================================
   2. BUTIKKU — lookbook
   Foto sebesar mungkin, tulisan sesedikit mungkin, tanpa bingkai kartu.
   Yang dijual tampilan, jadi yang boleh menonjol cuma fotonya.
   ========================================================================= */
.t-butik h1 { font-size:clamp(2.2rem,6vw,4.2rem); font-weight:700; letter-spacing:-.03em; }
.t-butik h2 { font-size:clamp(1.4rem,3vw,2rem); font-weight:700; }

/* Kepala menumpang di atas foto hero, tanpa latar. */
.b-kepala { position:absolute; inset:0 0 auto; z-index:20; }
.b-kepala--padat { position:sticky; top:0; background:#fff; border-bottom:1px solid var(--garis); }
.b-kepala__in { display:flex; align-items:center; justify-content:space-between; padding-block:20px; gap:20px; }
.b-merek { font-size:1.3rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase; text-decoration:none; color:var(--gelap); }
.b-kepala:not(.b-kepala--padat) .b-merek { color:#fff; }
.b-menu { display:flex; gap:24px; }
.b-menu a { text-decoration:none; font-size:.76rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gelap); }
.b-kepala:not(.b-kepala--padat) .b-menu a { color:rgba(255,255,255,.85); }
.b-kepala:not(.b-kepala--padat) .b-menu a[aria-current=page] { color:#fff; text-decoration:underline; text-underline-offset:5px; }
.b-menu a[aria-current=page] { text-decoration:underline; text-underline-offset:5px; }

/* Di HP, merek berjarak .28em ditambah tiga menu melebihi lebar layar dan
   membuat SELURUH halaman bisa digeser ke samping. Jaraknya dirapatkan dan
   barisnya dibiarkan membungkus. */
@media(max-width:560px){
  .b-kepala__in { flex-wrap:wrap; gap:10px; padding-block:14px; }
  .b-merek { font-size:1.05rem; letter-spacing:.16em; }
  .b-menu { gap:14px; }
  .b-menu a { font-size:.7rem; letter-spacing:.12em; }
}

.b-hero { position:relative; min-height:clamp(520px,86vh,760px); display:grid; place-items:center; text-align:center; }
.b-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.b-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.18) 40%,rgba(0,0,0,.42)); }
.b-hero__isi { position:relative; z-index:1; color:#fff; padding:24px; max-width:38rem; }
.b-hero__isi h1 { color:#fff; }
.b-hero__isi p { color:rgba(255,255,255,.9); margin-top:18px; }
.b-kicau { font-size:.72rem; font-weight:700; letter-spacing:.34em; text-transform:uppercase; color:rgba(255,255,255,.85); display:block; margin-bottom:20px; }

/* Kisi lookbook: rapat, tanpa bingkai, dua kolom bahkan di HP. */
.b-kisi { display:grid; gap:clamp(10px,1.6vw,20px); grid-template-columns:repeat(2,1fr); }
@media(min-width:900px){ .b-kisi{grid-template-columns:repeat(3,1fr)} }
.b-item { text-decoration:none; color:inherit; display:block; }
.b-item__gbr { overflow:hidden; background:var(--lembut); }
.b-item img { aspect-ratio:3/4; object-fit:cover; width:100%; height:auto; transition:transform .5s ease; }
.b-item:hover img { transform:scale(1.04); }
.b-item__n { margin-top:12px; font-size:.9rem; font-weight:600; }
.b-item__h { margin-top:2px; font-size:.9rem; color:var(--tinta-2); }
.b-item__h s { color:#B9BFC9; margin-right:7px; }
.b-tanda { font-size:.64rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--aksen-2); display:block; margin-top:8px; }

/* Blok editorial: gambar dan teks bergantian, tidak simetris. */
.b-editorial { display:grid; gap:clamp(24px,4vw,60px); align-items:center; grid-template-columns:1fr; }
@media(min-width:880px){
  .b-editorial{grid-template-columns:1.15fr .85fr}
  .b-editorial--balik>*:first-child{order:2}
}
.b-teks p { margin-top:16px; }
.b-cek { margin-top:24px; display:grid; gap:10px; }
.b-cek li { font-size:.94rem; padding-left:20px; position:relative; }
.b-cek li::before { content:"—"; position:absolute; left:0; color:var(--aksen-2); }

/* =========================================================================
   3. MAINANKU — serba bulat
   Sudut besar, garis tebal, warna berani. Yang membaca halaman ini orang tua
   sambil dipangku anaknya, dan bentuk bulat-tebal jauh lebih mudah dikenali
   sekilas daripada kartu tipis bersudut tajam.
   ========================================================================= */
.t-mainan h1 { font-size:clamp(2rem,5.4vw,3.5rem); font-weight:800; letter-spacing:-.03em; }
.t-mainan h2 { font-size:clamp(1.5rem,3.4vw,2.2rem); font-weight:800; }

.m-kepala { position:sticky; top:0; z-index:20; background:#fff; border-bottom:3px solid var(--gelap); }
.m-kepala__in { display:flex; align-items:center; justify-content:space-between; padding-block:14px; gap:16px; }
.m-merek { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:800; font-size:1.2rem; color:var(--gelap); }
.m-merek span:first-child {
  width:38px; height:38px; border-radius:14px; display:grid; place-items:center; color:#fff;
  background:var(--aksen); transform:rotate(-6deg); font-size:1.05rem;
}
.m-menu { display:flex; gap:8px; }
.m-menu a {
  text-decoration:none; font-weight:800; font-size:.9rem; color:var(--gelap);
  padding:9px 16px; border-radius:99px; border:2px solid transparent;
}
.m-menu a:hover { border-color:var(--gelap); }
.m-menu a[aria-current=page] { background:var(--gelap); color:#fff; }

/* Sama seperti butik: tiga pil menu berpadding tebal melebihi 375px. */
@media(max-width:560px){
  .m-kepala__in { flex-wrap:wrap; gap:10px; }
  .m-merek { font-size:1.05rem; }
  .m-merek span:first-child { width:32px; height:32px; border-radius:11px; }
  .m-menu { gap:5px; }
  .m-menu a { font-size:.82rem; padding:7px 12px; }
}

.m-hero { padding-block:clamp(28px,4vw,52px); }
.m-hero__kotak {
  background:var(--lembut); border:3px solid var(--gelap); border-radius:34px;
  padding:clamp(26px,4vw,52px); display:grid; gap:clamp(24px,4vw,44px);
  grid-template-columns:1fr; align-items:center;
}
@media(min-width:900px){ .m-hero__kotak{grid-template-columns:1.05fr .95fr} }
.m-hero__kotak img { border-radius:24px; border:3px solid var(--gelap); aspect-ratio:4/3; object-fit:cover; width:100%; height:auto; }
.m-kicau {
  display:inline-block; background:var(--aksen-2); color:#fff; font-weight:800;
  font-size:.76rem; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 14px; border-radius:99px; margin-bottom:16px;
}
.m-tbl { display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.m-tbl .tbl { border-radius:99px; border-width:3px; }
.m-tbl .tbl--utama { border-color:var(--gelap); }
.m-tbl .tbl--garis { border-color:var(--gelap); }

/* Pil pilihan umur — cara orang tua sungguhan memilih mainan. */
.m-pil { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:34px; }
.m-pil span {
  border:2px solid var(--gelap); border-radius:99px; padding:8px 18px;
  font-weight:800; font-size:.88rem; background:#fff;
}
.m-pil span:nth-child(2n) { background:var(--lembut); }

.m-kisi { display:grid; gap:20px; grid-template-columns:1fr; }
@media(min-width:620px){ .m-kisi{grid-template-columns:repeat(2,1fr)} }
@media(min-width:960px){ .m-kisi{grid-template-columns:repeat(3,1fr)} }
.m-kartu {
  border:3px solid var(--gelap); border-radius:26px; overflow:hidden; background:#fff;
  display:flex; flex-direction:column;
}
.m-kartu img { aspect-ratio:1/1; object-fit:cover; width:100%; height:auto; border-bottom:3px solid var(--gelap); }
.m-kartu__isi { padding:18px 20px 22px; display:flex; flex-direction:column; gap:8px; flex:1; }
.m-umur {
  align-self:flex-start; background:var(--aksen-2); color:#fff; font-weight:800;
  font-size:.72rem; padding:4px 12px; border-radius:99px;
}
.m-kartu__ket { font-size:.9rem; color:var(--tinta-2); }
.m-kartu__bawah { margin-top:auto; padding-top:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.m-harga { font-weight:800; color:var(--aksen); font-size:1.1rem; }
.m-harga s { display:block; font-size:.74rem; color:var(--tinta-2); font-weight:600; }

.m-langkah { display:grid; gap:18px; grid-template-columns:1fr; }
@media(min-width:760px){ .m-langkah{grid-template-columns:repeat(3,1fr)} }
.m-langkah > div { background:#fff; border:3px solid var(--gelap); border-radius:22px; padding:22px; }
.m-langkah b { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--aksen); color:#fff; margin-bottom:12px; }

/* =========================================================================
   4. JASAKU — jasa panggilan
   Yang dicari orang di halaman tukang cuma tiga: bisa apa, berapa, dan
   bagaimana memanggilnya. Jadi formulir pemesanan ditaruh langsung di hero,
   harga dalam bentuk tabel yang bisa dibandingkan sekali lihat, dan nomor
   teleponnya menempel di kepala halaman sepanjang halaman digulir.
   ========================================================================= */
.t-jasa h1 { font-size:clamp(1.9rem,4.6vw,3rem); font-weight:800; }
.t-jasa h2 { font-size:clamp(1.45rem,3vw,2.05rem); font-weight:800; }

.j-kepala { position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid var(--garis); }
.j-kepala__in { display:flex; align-items:center; justify-content:space-between; padding-block:12px; gap:14px; flex-wrap:wrap; }
.j-merek { display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.15rem; color:var(--gelap); text-decoration:none; }
.j-merek span:first-child { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:var(--aksen); color:#fff; font-size:.95rem; }
.j-kanan { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.j-menu { display:flex; gap:4px; }
.j-menu a { text-decoration:none; font-weight:600; font-size:.92rem; color:var(--tinta-2); padding:8px 12px; border-radius:8px; }
.j-menu a:hover { background:var(--lembut); color:var(--gelap); }
.j-menu a[aria-current=page] { color:var(--aksen); background:var(--lembut); }
.j-telp { display:inline-flex; align-items:center; gap:7px; background:var(--aksen); color:#fff; font-weight:800; font-size:.88rem; padding:9px 16px; border-radius:8px; text-decoration:none; white-space:nowrap; }

.j-hero { position:relative; background:var(--gelap); color:#fff; overflow:hidden; }
.j-hero__gbr { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.28; }
.j-hero__in { position:relative; z-index:1; display:grid; gap:clamp(26px,4vw,48px); grid-template-columns:1fr; padding-block:clamp(40px,6vw,72px); align-items:center; }
@media(min-width:920px){ .j-hero__in{grid-template-columns:1.05fr .95fr} }
.j-hero h1 { color:#fff; }
.j-hero p { color:rgba(255,255,255,.86); margin-top:16px; }
.j-kicau { display:inline-block; background:rgba(255,255,255,.14); color:#fff; font-weight:700; font-size:.78rem; padding:6px 14px; border-radius:99px; margin-bottom:16px; }
.j-jaminan { display:flex; gap:18px; flex-wrap:wrap; margin-top:26px; }
.j-jaminan li { font-size:.9rem; color:rgba(255,255,255,.9); display:flex; gap:8px; align-items:center; }
.j-jaminan b { color:var(--aksen-2); }

/* Formulir pemesanan langsung di hero. */
.j-form { background:#fff; border-radius:16px; padding:clamp(22px,3vw,30px); color:var(--tinta); box-shadow:0 18px 40px rgba(0,0,0,.22); }
.j-form h2 { font-size:1.15rem; margin-bottom:4px; }
.j-form .ket { font-size:.88rem; color:var(--tinta-2); margin-bottom:18px; }

/* Tabel harga: yang dibandingkan orang adalah angkanya, jadi angkanya
   disejajarkan dalam satu kolom, bukan disebar di dalam kartu. */
.j-tabel { width:100%; border-collapse:collapse; }
.j-tabel th { text-align:left; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-2); padding:0 14px 12px; border-bottom:2px solid var(--garis); }
.j-tabel th:last-child, .j-tabel td:last-child { text-align:right; }
.j-tabel td { padding:16px 14px; border-bottom:1px solid var(--garis); vertical-align:top; }
.j-tabel tr:hover td { background:var(--lembut); }
.j-tabel .n { font-weight:700; color:var(--gelap); }
.j-tabel .k { font-size:.88rem; color:var(--tinta-2); margin-top:3px; }
.j-tabel .h { font-weight:800; color:var(--aksen); white-space:nowrap; }
.j-tabel .h small { display:block; font-weight:600; font-size:.74rem; color:var(--tinta-2); }
.j-gulir { overflow-x:auto; }

.j-langkah { counter-reset:l; display:grid; gap:20px; grid-template-columns:1fr; }
@media(min-width:820px){ .j-langkah{grid-template-columns:repeat(4,1fr)} }
.j-langkah > li { counter-increment:l; position:relative; padding-top:52px; }
.j-langkah > li::before {
  counter-increment:none; content:counter(l); position:absolute; top:0; left:0;
  width:40px; height:40px; border-radius:50%; background:var(--aksen); color:#fff;
  display:grid; place-items:center; font-weight:800;
}
.j-langkah h3 { font-size:1.02rem; margin-bottom:6px; }
.j-langkah p { font-size:.92rem; color:var(--tinta-2); }

.j-suara { display:grid; gap:18px; grid-template-columns:1fr; }
@media(min-width:820px){ .j-suara{grid-template-columns:repeat(3,1fr)} }
.j-suara blockquote { margin:0; background:#fff; border:1px solid var(--garis); border-radius:14px; padding:24px; }
.j-suara p { font-size:.96rem; }
.j-suara footer { margin-top:14px; font-size:.86rem; color:var(--tinta-2); font-weight:700; }
.j-bintang { color:#F59E0B; letter-spacing:2px; margin-bottom:10px; }

.j-daerah { display:flex; gap:9px; flex-wrap:wrap; }
.j-daerah span { background:#fff; border:1px solid var(--garis); border-radius:99px; padding:7px 16px; font-size:.88rem; font-weight:600; }

.j-kotak { background:#fff; border:1px solid var(--garis); border-radius:14px; padding:22px; }
.j-kotak h3 { font-size:1.02rem; margin-bottom:6px; }
.j-kotak p { font-size:.94rem; color:var(--tinta-2); }
.j-tiga { display:grid; gap:16px; grid-template-columns:1fr; }
@media(min-width:760px){ .j-tiga{grid-template-columns:repeat(3,1fr)} }

.j-galeri { display:grid; gap:14px; grid-template-columns:repeat(2,1fr); }
@media(min-width:820px){ .j-galeri{grid-template-columns:repeat(4,1fr)} }
.j-galeri img { aspect-ratio:4/3; object-fit:cover; width:100%; height:auto; border-radius:12px; }