/* =========================================================================
   TJS RENTAL — satu berkas gaya.
   Tunduk pada BRAND/SISTEM_DESAIN_TJS_RENTAL.md. Kalau ragu, kembali ke sana.

   Hukum yang kelihatan di berkas ini:
     - border-radius: 0 di mana pun. Tidak ada bayangan lembut.
     - satu warna aksen (merah sinyal), dipakai hemat.
     - foto selalu <img>, TIDAK PERNAH background-image.
     - grid dipisah GARIS (gap 1px di atas bidang garis), bukan jarak longgar.
   ========================================================================= */

/* --- huruf, self-host, nol permintaan ke luar --------------------------- */
@font-face {
  font-family: "Anton";
  src: url("/assets/fonts/anton-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/assets/fonts/barlow-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/assets/fonts/barlow-600-latin.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* --- token -------------------------------------------------------------- */
:root{
  --hitam:#0E0E0E;
  --putih:#FFFFFF;
  --abu:#8A8A85;        /* GARIS & teks di bidang gelap saja (5,57:1 di hitam) */
  --abu-teks:#6A6A64;   /* teks sekunder di bidang terang. 5,44:1 di putih.
                           Token --abu asli cuma 3,47:1 di putih, GAGAL AA,
                           jadi tidak pernah dipakai untuk teks di latar terang. */
  --abu-muda:#F1F1EF;
  --garis:#DCDCD8;
  --merah:#C8102E;
  --merah-tua:#A00D25;
  --wa:#157F41;

  --judul:"Anton", Impact, sans-serif;
  --teks:"Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --maks:1240px;
  --pad:20px;
  --bagian:40px;
}
@media (min-width:900px){
  :root{ --pad:32px; --bagian:96px; }
}

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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--putih);
  color:var(--hitam);
  font-family:var(--teks);
  font-size:clamp(15px,0.9rem + 0.2vw,16px);
  line-height:1.55;
  overflow-x:hidden;      /* badan halaman tidak pernah menggulir menyamping */
}

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; }

:focus-visible{
  outline:3px solid var(--merah);
  outline-offset:2px;
}

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

.lewati{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--hitam); color:var(--putih); padding:12px 16px;
  font-weight:600;
}
.lewati:focus{ left:0; }

/* --- tipografi ---------------------------------------------------------- */
h1,h2,h3{
  font-family:var(--judul);
  font-weight:400;
  text-transform:uppercase;
  line-height:0.9;
  letter-spacing:-0.01em;
  margin:0 0 16px;
}
h1{ font-size:clamp(38px,8vw,68px); }
h2{ font-size:clamp(26px,5vw,40px); }
h3{ font-size:clamp(18px,2.4vw,22px); }

p{ margin:0 0 16px; max-width:68ch; }

.label{
  font-family:var(--teks);
  font-weight:600;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--abu-teks);
  margin:0 0 12px;
}
.kecil{ font-size:13px; color:var(--abu-teks); }

/* --- kerangka ----------------------------------------------------------- */
.bungkus{ max-width:var(--maks); margin:0 auto; padding:0 var(--pad); }
.bagian{ padding:var(--bagian) 0; }
.bagian--selang{ background:var(--abu-muda); }
.bagian--gelap{ background:var(--hitam); color:var(--putih); }
.bagian--gelap .label,
.bagian--gelap .kecil{ color:var(--abu); }

.kepala-bagian{
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:8px; margin-bottom:24px;
}
.kepala-bagian h2{ margin:0; }

/* --- kepala situs ------------------------------------------------------- */
.situs-kepala{
  border-bottom:1px solid var(--garis);
  background:var(--putih);
  position:sticky; top:0; z-index:20;
}
.situs-kepala__isi{
  max-width:var(--maks); margin:0 auto; padding:12px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.logo{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.logo img{ height:42px; width:auto; }
@media (min-width:700px){ .logo img{ height:54px; } }
.kaki__logo{ height:64px; width:auto; margin-bottom:14px; }
@media (min-width:700px){ .kaki__logo{ height:78px; } }
.logo__endorse{
  font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--abu-teks); display:none;
}
@media (min-width:700px){ .logo__endorse{ display:block; } }

.nav{ display:none; }
.nav a{
  text-decoration:none; font-weight:600; font-size:14px;
  padding:8px 0; border-bottom:2px solid transparent;
}
.nav a:hover{ border-bottom-color:var(--hitam); }
.nav a[aria-current="page"]{ border-bottom-color:var(--merah); }

@media (min-width:900px){
  .nav{ display:flex; gap:24px; align-items:center; }
  .menu-tombol{ display:none; }
}

/* Menu HP: <details>/<summary> murni, jadi navigasi tetap terbuka tanpa JS. */
.menu-tombol{
  font:inherit; font-weight:600; font-size:13px; text-transform:uppercase;
  letter-spacing:0.08em;
  background:var(--putih); color:var(--hitam);
  border:1px solid var(--hitam); border-radius:0;
  padding:10px 14px; min-height:44px; cursor:pointer;
  display:inline-flex; align-items:center;
  list-style:none;
}
.menu-tombol::-webkit-details-marker{ display:none; }
.menu-hp[open] .menu-tombol{ background:var(--hitam); color:var(--putih); }

.nav-hp{
  position:absolute; left:0; right:0; top:100%;
  background:var(--putih); border-top:1px solid var(--garis);
}
.nav-hp a{
  display:block; padding:14px var(--pad); text-decoration:none;
  font-weight:600; border-bottom:1px solid var(--garis);
}
@media (min-width:900px){ .menu-hp{ display:none; } }

/* --- tombol ------------------------------------------------------------- */
.tbl{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; min-height:48px; padding:12px 22px;
  font-family:var(--teks); font-weight:600; font-size:15px;
  text-decoration:none; border:1px solid transparent; border-radius:0;
  cursor:pointer;
}
.tbl--utama{ background:var(--hitam); color:var(--putih); border-color:var(--hitam); }
.tbl--utama:hover{ background:var(--putih); color:var(--hitam); }
.tbl--merah{ background:var(--merah); color:var(--putih); border-color:var(--merah); }
.tbl--merah:hover{ background:var(--merah-tua); border-color:var(--merah-tua); }
.tbl--wa{ background:var(--wa); color:var(--putih); border-color:var(--wa); }
.tbl--wa:hover{ background:var(--hitam); border-color:var(--hitam); }
.tbl--garis{ background:transparent; color:var(--hitam); border-color:var(--hitam); }
.tbl--garis:hover{ background:var(--hitam); color:var(--putih); }
/* Tombol bergaris tepi di atas bidang gelap HARUS dibalik warnanya. Tanpa
   baris ini, tombol "Lihat katalog" di hero jadi teks hitam di atas tirai
   hitam, praktis tak terlihat. Ini yang ketahuan saat uji tampilan 375px. */
.bagian--gelap .tbl--garis,
.hero .tbl--garis{ color:var(--putih); border-color:var(--putih); }
.bagian--gelap .tbl--garis:hover,
.hero .tbl--garis:hover{ background:var(--putih); color:var(--hitam); }
.tbl--lebar{ width:100%; }

/* --- hero --------------------------------------------------------------- */
.hero{ position:relative; background:var(--hitam); color:var(--putih); }
.hero__gambar{
  width:100%; aspect-ratio:4/5; object-fit:cover; opacity:0.55;
}
@media (min-width:700px){ .hero__gambar{ aspect-ratio:16/9; } }
/* Tirai gelap di kaki hero. Dibuat pekat sampai jauh ke atas, bukan sekadar
   memudar, karena tombol bergaris tepi putih ("Lihat katalog") duduk DI ATAS
   foto: kalau tirainya tipis, teksnya jatuh di bagian foto yang terang dan
   kontrasnya anjlok di bawah 4,5:1. Diuji di foto hero yang paling terang. */
.hero__isi{
  position:absolute; inset:auto 0 0 0;
  padding:var(--pad); padding-top:96px; padding-bottom:32px;
  background:linear-gradient(to top,
    rgba(14,14,14,0.97) 0%,
    rgba(14,14,14,0.93) 55%,
    rgba(14,14,14,0.55) 80%,
    rgba(14,14,14,0) 100%);
}
.hero__isi > *{ max-width:var(--maks); margin-left:auto; margin-right:auto; }
.hero h1{ margin-bottom:8px; }
.hero__sub{ font-size:16px; margin-bottom:20px; max-width:44ch; }
.hero__aksi{ display:flex; flex-wrap:wrap; gap:12px; }

/* Kalau foto hero belum ada, bidangnya diisi blok berlabel, bukan gambar rusak. */
.kosong{
  display:flex; align-items:center; justify-content:center;
  background:var(--abu-muda);
  border:1px dashed var(--garis);
  color:var(--abu-teks);
  font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  text-align:center; padding:16px;
}
.kosong--4x3{ aspect-ratio:4/3; }
.kosong--3x2{ aspect-ratio:3/2; }
.kosong--16x9{ aspect-ratio:4/5; }
@media (min-width:700px){ .kosong--16x9{ aspect-ratio:16/9; } }

/* --- grid kartu (dipisah garis, bukan jarak) ---------------------------- */
.grid{
  display:grid; gap:1px; background:var(--garis);
  border:1px solid var(--garis);
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:700px){ .grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1000px){ .grid--4{ grid-template-columns:repeat(4,1fr); } }
.grid--2{ grid-template-columns:1fr; }
@media (min-width:700px){ .grid--2{ grid-template-columns:repeat(2,1fr); } }

/* --- kartu produk ------------------------------------------------------- */
.kartu{
  background:var(--putih);
  display:flex; flex-direction:column;
  padding:0 0 16px;
}
.kartu__gambar{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.kartu__isi{ padding:14px 14px 0; display:flex; flex-direction:column; flex:1; }
.kartu__nama{
  font-family:var(--judul); text-transform:uppercase; font-weight:400;
  font-size:17px; line-height:1; letter-spacing:-0.01em; margin:0 0 6px;
}
.kartu__nama a{ text-decoration:none; }
.kartu__nama a:hover{ text-decoration:underline; text-underline-offset:3px; }
.kartu__spek{
  font-size:13px; color:var(--abu-teks); margin:0 0 12px; line-height:1.35;
}
.kartu__harga{ margin-top:auto; }
.harga-pasar{
  font-size:12px; color:var(--abu-teks); text-decoration:line-through;
  display:block;
}
.harga-kami{
  font-family:var(--judul); font-size:20px; line-height:1;
  color:var(--merah); display:block; margin:2px 0 12px;
}
.harga-kami small{ font-family:var(--teks); font-size:12px; letter-spacing:0; }
.harga-minta{
  font-family:var(--teks); font-weight:600; font-size:13px;
  display:block; margin:2px 0 12px;
}
.kartu .tbl{ margin:0 14px; font-size:13px; padding:8px 12px; line-height:1.25; text-align:center; }
.kartu__isi + .tbl{ margin-top:0; }

/* --- kartu kategori (foto + nama saja) ---------------------------------- */
.kat{ background:var(--putih); text-decoration:none; display:block; }
.kat img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.kat__nama{
  font-family:var(--judul); text-transform:uppercase; font-size:18px;
  line-height:1; padding:14px; margin:0;
}
.kat:hover .kat__nama{ color:var(--merah); }

/* --- baris bukti -------------------------------------------------------- */
.bukti{ display:grid; gap:1px; background:var(--garis); border:1px solid var(--garis); }
@media (min-width:700px){ .bukti{ grid-template-columns:repeat(3,1fr); } }
.bukti > div{ background:var(--putih); padding:24px; }
.bagian--selang .bukti > div{ background:var(--abu-muda); }
.bukti p{ margin:0; font-weight:600; font-size:15px; }
.bukti .label{ margin-bottom:6px; }

/* --- halaman produk ----------------------------------------------------- */
.produk{ display:grid; gap:24px; }
@media (min-width:900px){
  .produk{ grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:start; }
}
.produk__gambar{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.produk__kode{
  font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--abu-teks);
}
.produk__harga{ border-top:1px solid var(--garis); border-bottom:1px solid var(--garis);
  padding:16px 0; margin:16px 0 20px; }
.produk__harga .harga-kami{ font-size:34px; }
.produk__aksi{ display:flex; flex-direction:column; gap:12px; }
@media (min-width:520px){ .produk__aksi{ flex-direction:row; } }

.spek{ width:100%; border-collapse:collapse; font-size:14px; }
.spek th,.spek td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--garis); vertical-align:top; }
.spek th{ font-weight:600; width:42%; color:var(--abu-teks); }

.daftar-cek{ list-style:none; padding:0; margin:0 0 16px; font-size:14px; }
.daftar-cek li{ padding:8px 0 8px 20px; border-bottom:1px solid var(--garis); position:relative; }
.daftar-cek li::before{ content:""; position:absolute; left:0; top:16px; width:10px; height:1px; background:var(--hitam); }
.daftar-cek--tidak li::before{ background:var(--abu); }

/* --- tabel yang bisa digeser sendiri ------------------------------------ */
.tabel-bungkus{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 24px; }
.tabel-bungkus table{ min-width:560px; }
.tabel{ width:100%; border-collapse:collapse; font-size:14px; }
.tabel th,.tabel td{ text-align:left; padding:12px; border-bottom:1px solid var(--garis); white-space:nowrap; }
.tabel th{ font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--abu-teks); }
.tabel td:first-child{ white-space:normal; }
.tabel .harga-kami{ font-size:16px; margin:0; }

/* --- FAQ ---------------------------------------------------------------- */
.faq{ border-top:1px solid var(--garis); }
.faq details{ border-bottom:1px solid var(--garis); }
.faq summary{
  cursor:pointer; padding:16px 0; font-weight:600; font-size:15px;
  list-style:none; display:flex; justify-content:space-between; gap:16px;
  min-height:44px; align-items:center;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--judul); font-size:20px; }
.faq details[open] summary::after{ content:"\2013"; }
.faq p{ margin:0 0 16px; font-size:15px; }

/* --- remah -------------------------------------------------------------- */
.remah{ font-size:12px; color:var(--abu-teks); padding:16px 0 0; }
.remah ol{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; }
.remah a{ text-decoration:none; }
.remah a:hover{ text-decoration:underline; }
.remah li + li::before{ content:"/"; margin-right:6px; color:var(--garis); }

/* --- saringan kategori (JS opsional) ------------------------------------ */
.saring{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; padding:0; list-style:none; }
.saring a,.saring button{
  font:inherit; font-size:13px; font-weight:600;
  padding:10px 14px; min-height:44px; display:inline-flex; align-items:center;
  border:1px solid var(--garis); background:var(--putih); color:var(--hitam);
  text-decoration:none; border-radius:0; cursor:pointer;
}
.saring a:hover,.saring button:hover{ border-color:var(--hitam); }
.saring [aria-current="true"],.saring [aria-pressed="true"]{
  border-color:var(--merah); color:var(--merah);
}

/* --- kaki --------------------------------------------------------------- */
.kaki{ background:var(--hitam); color:var(--putih); padding:var(--bagian) 0 32px; }
.kaki a{ color:var(--putih); }
/* Di bidang gelap, teks sekunder HARUS balik ke --abu. Diukur di peramban:
   --abu-teks (#6A6A64) di atas hitam cuma 3,55:1, gagal AA; --abu (#8A8A85)
   di atas hitam 5,57:1, lolos. Arahnya memang terbalik dari bidang terang,
   dan itu sebabnya dua token abu ini ada. */
.kaki .label, .kaki .kecil{ color:var(--abu); }
.kaki__grid{ display:grid; gap:32px; }
@media (min-width:700px){ .kaki__grid{ grid-template-columns:1.4fr 1fr 1fr; } }
.kaki img{ height:34px; width:auto; margin-bottom:12px; }
.kaki ul{ list-style:none; margin:0; padding:0; font-size:14px; }
.kaki li{ margin-bottom:8px; }
.kaki__legal{
  border-top:1px solid #2A2A28; margin-top:32px; padding-top:20px;
  font-size:12px; color:var(--abu); line-height:1.6;
}
.kaki__legal p{ max-width:none; margin:0 0 6px; }

/* --- lain-lain ---------------------------------------------------------- */
.pita{
  background:var(--abu-muda); border-top:1px solid var(--garis);
  border-bottom:1px solid var(--garis); padding:14px 0; font-size:13px;
}
.pita p{ margin:0; }
.tautan-dalam{ display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0; list-style:none; }
.tautan-dalam a{
  font-size:13px; font-weight:600; text-decoration:none;
  border:1px solid var(--garis); padding:8px 12px; min-height:44px;
  display:inline-flex; align-items:center;
}
.tautan-dalam a:hover{ border-color:var(--hitam); }
.bagian--gelap .tautan-dalam a{ border-color:#2A2A28; }
.bagian--gelap .tautan-dalam a:hover{ border-color:var(--putih); }


/* ============================================================
   IKON WHATSAPP
   Tombol chat sebelumnya cuma teks di bidang hijau, dan Jason benar
   bahwa itu monoton. Ikon dipasang inline (bukan berkas gambar) supaya
   ikut warna teks tombol dan tidak menambah satu pun permintaan jaringan.
   ============================================================ */
.tbl--wa{ display:inline-flex; align-items:center; justify-content:center; gap:10px; }
.ikon-wa{ flex:0 0 auto; }

/* ============================================================
   GERAKAN
   Keluhan Jason: situs terasa mati karena semuanya kotak diam. Gerakan di
   sini SENGAJA hemat: yang bergerak hanya saat disentuh (hover/fokus) dan
   sekali saat bagian halaman pertama kali masuk layar. Tidak ada yang
   berkedip, berputar, atau bergerak terus menerus, karena katalog dibaca
   sambil membandingkan harga dan gerakan abadi justru mengganggu.
   Semua dimatikan total kalau pengguna minta kurangi animasi.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){

  /* 1. muncul saat masuk layar */
  .muncul{ opacity:0; transform:translateY(14px);
           transition:opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1); }
  .muncul.tampil{ opacity:1; transform:none; }
  .muncul--tunda1{ transition-delay:.06s } .muncul--tunda2{ transition-delay:.12s }
  .muncul--tunda3{ transition-delay:.18s } .muncul--tunda4{ transition-delay:.24s }

  /* 2. kartu produk & kategori: foto membesar halus, kartu naik sedikit */
  .kartu, .kartu-kategori{ transition:transform .28s ease, box-shadow .28s ease; }
  .kartu:hover, .kartu-kategori:hover{ transform:translateY(-4px); }
  .kartu figure, .kartu-kategori figure, .kartu .bingkai, .kartu-kategori .bingkai{ overflow:hidden; }
  .kartu img, .kartu-kategori img{ transition:transform .5s cubic-bezier(.22,.61,.36,1); }
  .kartu:hover img, .kartu-kategori:hover img{ transform:scale(1.045); }

  /* 3. tombol: menekan terasa, bukan cuma berubah warna */
  .tbl{ transition:background-color .18s ease, color .18s ease, transform .12s ease; }
  .tbl:active{ transform:translateY(1px); }

  /* 4. tautan navigasi: garis tumbuh dari kiri */
  .nav a{ position:relative; }
  .nav a::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
                 background:var(--merah); transform:scaleX(0); transform-origin:left;
                 transition:transform .24s ease; }
  .nav a:hover::after, .nav a:focus-visible::after{ transform:scaleX(1); }

  /* 5. hero: foto merangkak pelan sekali saat halaman dibuka, lalu berhenti */
  .hero img{ animation:heroMasuk 1.2s cubic-bezier(.22,.61,.36,1) both; }
  @keyframes heroMasuk{ from{ transform:scale(1.06); opacity:.85 } to{ transform:none; opacity:1 } }
}

@media (prefers-reduced-motion: reduce){
  .muncul{ opacity:1; transform:none; }
}

/* ============================================================
   HALAMAN PANDUAN
   Jenis halaman ketiga setelah produk dan kategori. Tugasnya dibaca,
   bukan dipindai, jadi di sini aturan "sedikit teks" TIDAK berlaku:
   yang berlaku adalah baris teks yang nyaman dibaca (maksimal 68
   karakter) dan hierarki yang tegas. Tetap nol harga, nol kartu
   promosi, supaya halaman ini terasa membantu, bukan berjualan.
   ============================================================ */
.bungkus--sempit{ max-width:720px; }

.panduan{ padding:32px 0 8px; }
.panduan h1{ margin:6px 0 14px; }
.panduan__ringkas{
  font-size:18px; line-height:1.6; color:var(--teks);
  border-left:3px solid var(--merah); padding-left:16px; margin:0 0 8px;
}
.panduan__bagian{ margin-top:36px; }
.panduan__bagian h2{ font-size:clamp(22px,4.4vw,30px); margin:0 0 12px; }
.panduan__bagian p{ margin:0 0 14px; max-width:68ch; }
.panduan__daftar{ margin:0 0 16px; padding-left:20px; }
.panduan__daftar li{ margin-bottom:8px; max-width:66ch; }

.tanya{ border-top:1px solid var(--garis); padding:14px 0; }
.tanya summary{
  cursor:pointer; font-weight:600; list-style:none; position:relative; padding-right:28px;
}
.tanya summary::-webkit-details-marker{ display:none; }
.tanya summary::after{
  content:"+"; position:absolute; right:4px; top:-2px;
  font-family:var(--judul); font-size:22px; color:var(--merah); line-height:1;
}
.tanya[open] summary::after{ content:"\2212"; }
.tanya p{ margin:10px 0 0; color:var(--teks2); max-width:66ch; }
.tanya:focus-within summary{ outline:2px solid var(--merah); outline-offset:3px; }

.panduan__ajakan{
  margin:40px 0 8px; padding:24px; background:var(--abu-muda); border:1px solid var(--garis);
}
.panduan__ajakan h2{ margin:0 0 8px; font-size:22px; }
.panduan__ajakan p{ margin:0 0 16px; }

/* indeks panduan */
.grid--panduan{ grid-template-columns:1fr; gap:1px; background:var(--garis); }
@media (min-width:700px){ .grid--panduan{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .grid--panduan{ grid-template-columns:repeat(3,1fr); } }
.kartu-panduan{
  display:flex; flex-direction:column; gap:8px; background:var(--putih);
  padding:24px; text-decoration:none; color:inherit; min-height:180px;
}
.kartu-panduan h2{ font-size:19px; margin:0; }
.kartu-panduan p{ margin:0; color:var(--teks2); font-size:14px; }
.kartu-panduan__aksi{
  margin-top:auto; font-weight:600; font-size:14px; color:var(--merah);
}
.kartu-panduan:hover .kartu-panduan__aksi{ text-decoration:underline; }
.intro{ max-width:60ch; color:var(--teks2); margin:0 0 24px; }

@media (prefers-reduced-motion: no-preference){
  .kartu-panduan{ transition:background-color .2s ease, transform .2s ease; }
  .kartu-panduan:hover{ background:var(--abu-muda); transform:translateY(-3px); }
}