/* ==========================================================================
   Tiket Karimunjawa
   Arah desain: papan informasi pelabuhan. Garis rambut, bukan bayangan.
   Sudut tajam, bukan membulat. Angka tabular. Hierarki tegas.

   Aturan responsif: ukuran huruf dan jarak memakai clamp() sehingga menyesuaikan
   lebar layar secara mulus. Media query hanya dipakai untuk mengubah SUSUNAN
   (jumlah kolom, tumpuk atau sejajar), bukan untuk mengecilkan huruf satu per satu.
   Diuji pada 360, 390, 414, 768, 1024, dan 1440 piksel.
   ========================================================================== */

:root {
  /* warna — diambil langsung dari logo: biru #0878c8, cyan #12abdc, kuning #f9b70a */
  --tinta:      #0d1a24;
  --tinta-2:    #46596a;
  --tinta-3:    #7b8b99;
  --kertas:     #fbfcfd;
  --kertas-2:   #eff4f8;
  --laut:       #0878c8;
  --laut-tua:   #05548f;
  --laut-muda:  #e9f3fb;
  --cyan:       #12abdc;
  --kuning:     #f9b70a;
  --sinyal:     #0878c8;   /* aksi utama di latar terang */
  --garis:      #e2e8ed;
  --garis-2:    #c8d3dc;
  --papan-bg:   #06202e;

  /* ukuran — ikut lebar layar */
  --lebar: 1180px;
  --tepi: clamp(16px, 4vw, 24px);
  --lengkung: 3px;
  --blok-y: clamp(34px, 6vw, 56px);

  --sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

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

body {
  margin: 0;
  overflow-x: hidden;                 /* jaring pengaman: halaman tidak pernah geser ke samping */
  background: var(--kertas);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: clamp(15.5px, .3vw + 15px, 16.5px);
  line-height: 1.62;
  overflow-wrap: break-word;          /* kata atau tautan panjang tidak menjebol layar */
  font-feature-settings: "cv05", "ss01";
  -webkit-font-smoothing: antialiased;
}

img, svg, iframe { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--laut); }
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -.022em; margin: 0; font-weight: 800; }
time, .angka { font-variant-numeric: tabular-nums; }

.wadah { width: 100%; max-width: var(--lebar); margin: 0 auto; padding: 0 var(--tepi); }

.lewati { position: absolute; left: -9999px; background: var(--tinta); color: #fff; padding: 10px 16px; z-index: 100; }
.lewati:focus { left: 10px; top: 10px; }

.kicir {
  font-size: clamp(10px, .2vw + 9.6px, 11px); font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; color: var(--tinta-3); margin: 0;
}

/* ==========================================================================
   Bilah atas
   ========================================================================== */
.bilah { background: var(--tinta); color: rgba(255, 255, 255, .62); font-size: clamp(11.5px, .2vw + 11px, 12.5px); }
.bilah-isi { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; padding-block: 8px; }
.bilah-kiri { display: flex; align-items: center; gap: 9px; }
.bilah b { color: #fff; font-weight: 600; }
.bilah a { color: rgba(255, 255, 255, .82); text-decoration: none; font-weight: 600; }
.bilah a:hover { color: #fff; }

.titik-hidup { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; flex: 0 0 7px; animation: denyut 2.6s ease-out infinite; }
@keyframes denyut {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
@media (prefers-reduced-motion: reduce) { .titik-hidup { animation: none; } }

/* ==========================================================================
   Kepala
   ========================================================================== */
.kepala { background: var(--kertas); border-bottom: 1px solid var(--garis); position: sticky; top: 0; z-index: 40; }
.kepala-isi { display: flex; align-items: center; gap: 20px; min-height: 70px; flex-wrap: wrap; }

.merek { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; margin-right: auto; min-width: 0; }
.merek img { width: 40px; height: 40px; flex: 0 0 40px; }
.merek strong { display: block; font-size: clamp(15px, .4vw + 14px, 16.5px); font-weight: 800; letter-spacing: -.02em; }
.merek small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); margin-top: 1px; }

.navigasi { display: flex; gap: clamp(16px, 2vw, 26px); }
.navigasi a { position: relative; padding: 24px 0; text-decoration: none; color: var(--tinta-2); font-size: 14.5px; font-weight: 600; }
.navigasi a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; }
.navigasi a:hover, .navigasi a.aktif { color: var(--tinta); }
.navigasi a.aktif::after { background: var(--kuning); }

.tombol-menu { display: none; }

/* ==========================================================================
   Tombol
   ========================================================================== */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px; border-radius: var(--lengkung); text-decoration: none;
  font-weight: 700; font-size: 14.5px; text-align: center;
  border: 1px solid var(--garis-2); color: var(--tinta); background: transparent;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.tombol:hover { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.tombol.utama { background: var(--laut); border-color: var(--laut); color: #fff; }
.tombol.utama:hover { background: var(--laut-tua); border-color: var(--laut-tua); }

/* ==========================================================================
   Sorot / hero
   ========================================================================== */
.sorot { border-bottom: 1px solid var(--garis); padding: clamp(38px, 6vw, 66px) 0 clamp(34px, 5vw, 58px); }
.sorot-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 56px); align-items: end; }
.sorot h1 { font-size: clamp(30px, 6vw, 60px); letter-spacing: -.034em; margin: 14px 0 18px; max-width: 15ch; text-wrap: balance; }
.sorot h1 em { font-style: normal; color: var(--laut); }
.sorot-teks { max-width: 52ch; color: var(--tinta-2); margin: 0 0 26px; font-size: clamp(15.5px, .5vw + 14.5px, 17px); }
.sorot-aksi { display: flex; gap: 11px; flex-wrap: wrap; }
.sorot-aksi .tombol { flex: 1 1 auto; min-width: 0; }

.sorot-fakta { border-top: 2px solid var(--tinta); }
.sorot-fakta div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--garis); }
.sorot-fakta span { color: var(--tinta-3); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.sorot-fakta b { font-size: clamp(14px, .4vw + 13px, 15.5px); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Papan keberangkatan
   ========================================================================== */
.papan-bungkus { padding: clamp(28px, 4vw, 44px) 0 8px; }
.papan { background: var(--papan-bg); color: #fff; border-radius: var(--lengkung); overflow: hidden; }

.papan-kepala {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px clamp(16px, 2.4vw, 24px); border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.papan-kepala strong { font-size: clamp(11px, .2vw + 10.6px, 12px); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.papan-kepala a { color: var(--kuning); text-decoration: none; font-size: 13px; font-weight: 700; }
.papan-kepala a:hover { color: #fff; }

.papan-daftar { list-style: none; margin: 0; padding: 0; }
.papan-daftar li {
  display: grid; grid-template-columns: minmax(84px, 118px) minmax(0, 1fr) auto; align-items: center;
  gap: clamp(12px, 2vw, 22px); padding: 16px clamp(16px, 2.4vw, 24px);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.papan-daftar li:last-child { border-bottom: 0; }
.papan-jam { font-size: clamp(23px, 3.4vw, 30px); font-weight: 800; color: var(--kuning); letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.papan-rute b { font-weight: 700; font-size: clamp(14.5px, .5vw + 13.5px, 16px); letter-spacing: -.015em; }
.papan-rute i { font-style: normal; color: rgba(255, 255, 255, .35); margin: 0 7px; }
.papan-rute small { display: block; color: rgba(255, 255, 255, .45); font-size: 12.5px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.papan-harga { text-align: right; }
.papan-harga span { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .5); white-space: nowrap; font-variant-numeric: tabular-nums; }
.papan-harga b { color: #fff; font-weight: 700; }

.papan-kosong { margin: 0; padding: 28px clamp(16px, 2.4vw, 24px); color: rgba(255, 255, 255, .55); font-size: 14.5px; }
.papan-kaki { margin: 0; padding: 13px clamp(16px, 2.4vw, 24px); font-size: 12px; color: rgba(255, 255, 255, .35); border-top: 1px solid rgba(255, 255, 255, .07); }

/* ==========================================================================
   Blok isi
   ========================================================================== */
.blok { padding: var(--blok-y) 0; }
.blok + .blok { border-top: 1px solid var(--garis); }

.blok-kepala { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 24px; flex-wrap: wrap; }
.blok-kepala h2 { font-size: clamp(20px, 2.6vw, 27px); }
.blok-kepala h2 a { text-decoration: none; color: inherit; }
.blok-kepala h2 a:hover { color: var(--laut); }
.blok-kepala > a { font-size: 14px; text-decoration: none; font-weight: 700; color: var(--laut); }
.blok-kepala > a:hover { color: var(--laut-tua); }

.judul-halaman { padding: clamp(32px, 5vw, 56px) 0 0; }
.judul-halaman h1 { font-size: clamp(26px, 5vw, 46px); letter-spacing: -.03em; margin: 10px 0 14px; max-width: 20ch; text-wrap: balance; }
.judul-halaman > p { max-width: 62ch; color: var(--tinta-2); margin: 0; font-size: clamp(15.5px, .5vw + 14.5px, 17px); }

.remah { font-size: 12.5px; color: var(--tinta-3); margin: 0 0 12px; font-weight: 600; }
.remah a { text-decoration: none; color: var(--tinta-3); }
.remah a:hover { color: var(--laut); }
.catatan-kecil { font-size: 13px; color: var(--tinta-3); }

.kosong { color: var(--tinta-2); border: 1px dashed var(--garis-2); border-radius: var(--lengkung); padding: 24px; margin: 0; }
.kosong code { background: var(--laut-muda); padding: 2px 6px; border-radius: 2px; font-size: 13px; }

.pil { display: inline-block; border: 1px solid var(--garis-2); color: var(--tinta-2); font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.label { display: block; font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--tinta-3); font-weight: 700; margin-bottom: 8px; }

/* ==========================================================================
   Kartu
   ========================================================================== */
.kartu-baris { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 262px), 1fr)); gap: 0; border-top: 1px solid var(--garis); }
.kartu {
  padding: 24px clamp(18px, 2vw, 26px); text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  border-bottom: 1px solid var(--garis); border-right: 1px solid var(--garis);
  transition: background .16s ease;
}
.kartu:hover { background: var(--kertas-2); }
.kartu:hover h2, .kartu:hover h3 { color: var(--laut); }
.kartu h2, .kartu h3 { font-size: clamp(17px, .6vw + 16px, 19px); margin: 0 0 9px; letter-spacing: -.024em; transition: color .16s ease; }
.kartu p { color: var(--tinta-2); font-size: 14.5px; margin: 0 0 18px; }
.kartu-kaki {
  margin-top: auto; display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px 14px; flex-wrap: wrap; font-size: 13px; padding-top: 13px; border-top: 1px solid var(--garis);
}
.kartu-kaki span { color: var(--tinta-3); font-weight: 600; }
.kartu-kaki b { color: var(--laut); font-weight: 700; white-space: nowrap; }
.kartu.ringkas p { margin-bottom: 12px; }

/* ==========================================================================
   Tabel jadwal
   ========================================================================== */
.tabel-gulir { overflow-x: auto; border: 1px solid var(--garis); border-radius: var(--lengkung); -webkit-overflow-scrolling: touch; }
.tabel { width: 100%; border-collapse: collapse; min-width: 660px; font-size: 14.5px; }
.tabel th {
  text-align: left; padding: 12px 18px; background: var(--kertas-2); color: var(--tinta-2);
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; white-space: nowrap;
  border-bottom: 1px solid var(--garis);
}
.tabel td { padding: 15px 18px; border-bottom: 1px solid var(--garis); vertical-align: top; font-variant-numeric: tabular-nums; }
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel tbody tr:hover { background: var(--kertas-2); }
.tabel td:first-child { font-weight: 600; }
.harga { display: block; white-space: nowrap; font-size: 13.5px; color: var(--tinta-3); }
.harga b { color: var(--tinta); font-weight: 700; }

/* ==========================================================================
   Fakta pada halaman detail
   ========================================================================== */
.fakta { display: flex; flex-wrap: wrap; gap: 0; margin-top: 26px; border-top: 1px solid var(--garis); }
.fakta div { padding: 13px 26px 13px 0; margin-right: 26px; border-right: 1px solid var(--garis); }
.fakta div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.fakta span { display: block; font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--tinta-3); font-weight: 700; margin-bottom: 3px; }
.fakta b { font-size: clamp(15px, .4vw + 14px, 16px); font-weight: 700; }

/* ==========================================================================
   Artikel
   ========================================================================== */
.artikel { max-width: 68ch; font-size: clamp(16px, .5vw + 15px, 17px); }
.artikel h2 { font-size: clamp(20px, 2vw, 23px); margin: 36px 0 13px; letter-spacing: -.026em; }
.artikel h2:first-child { margin-top: 0; }
.artikel p { margin: 0 0 18px; }
.artikel ul, .artikel ol { margin: 0 0 20px; padding-left: 0; list-style: none; counter-reset: langkah; }
.artikel li { margin-bottom: 11px; padding-left: 28px; position: relative; }
.artikel ul > li::before { content: ""; position: absolute; left: 5px; top: 11px; width: 7px; height: 7px; background: var(--laut); border-radius: 50%; }
.artikel ol > li { counter-increment: langkah; }
.artikel ol > li::before { content: counter(langkah); position: absolute; left: 0; top: 1px; font-size: 12.5px; font-weight: 800; color: var(--laut); font-variant-numeric: tabular-nums; }
.artikel a { color: var(--laut); text-decoration-thickness: 1px; text-underline-offset: 3px; font-weight: 600; }
.artikel a:hover { color: var(--laut-tua); }

.catatan { background: var(--laut-muda); border-left: 3px solid var(--cyan); padding: 18px clamp(16px, 2vw, 24px); margin: 0 0 20px; }
.catatan h2 { margin-top: 0; font-size: 19px; }
.catatan p:last-child, .catatan ul:last-child, .catatan li:last-child { margin-bottom: 0; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { max-width: 68ch; border-top: 1px solid var(--garis); }
.faq details { border-bottom: 1px solid var(--garis); }
.faq summary { padding: 17px 40px 17px 0; cursor: pointer; font-weight: 700; font-size: clamp(15.5px, .5vw + 14.5px, 16.5px); list-style: none; position: relative; letter-spacing: -.016em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 26px; width: 11px; height: 2px; background: var(--tinta); }
.faq summary::before { content: ""; position: absolute; right: 11px; top: 21px; width: 2px; height: 11px; background: var(--tinta); transition: opacity .18s ease; }
.faq details[open] summary::before { opacity: 0; }
.faq details p { padding: 0 0 18px; margin: 0; color: var(--tinta-2); max-width: 62ch; }

/* ==========================================================================
   Daftar tulisan
   ========================================================================== */
.daftar-tulisan { border-top: 1px solid var(--garis); }
.daftar-tulisan .tulisan {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; align-items: baseline;
  padding: 24px 0; border-bottom: 1px solid var(--garis); text-decoration: none; color: inherit;
}
.tulisan:hover h2 { color: var(--laut); }
.tulisan h2 { font-size: clamp(18px, 1.6vw, 21px); margin: 0 0 7px; letter-spacing: -.026em; transition: color .16s ease; }
.tulisan p { margin: 0; color: var(--tinta-2); font-size: 15px; max-width: 70ch; }
.tulisan time { font-size: 12.5px; color: var(--tinta-3); white-space: nowrap; font-weight: 600; }

/* ==========================================================================
   Kontak
   ========================================================================== */
.kontak-susun { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 44px); align-items: start; }
.kontak-kartu h2 { font-size: clamp(19px, 2vw, 22px); margin: 0 0 16px; }
.kontak-kartu .tombol { width: 100%; }
.kontak-rinci { margin: 24px 0 0; border-top: 1px solid var(--garis); }
.kontak-rinci dt { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--tinta-3); font-weight: 700; padding-top: 15px; }
.kontak-rinci dd { margin: 3px 0 15px; border-bottom: 1px solid var(--garis); padding-bottom: 15px; }
.kontak-rinci dd:last-child { border-bottom: 0; }
.kontak-rinci dd a { margin-right: 16px; font-weight: 600; display: inline-block; }
.kontak-peta iframe { width: 100%; height: clamp(260px, 42vw, 420px); border: 1px solid var(--garis); border-radius: var(--lengkung); }

/* ==========================================================================
   Ajakan
   ========================================================================== */
.ajakan { background: var(--laut-tua); color: #fff; padding: clamp(44px, 7vw, 68px) 0; }
.ajakan h2 { font-size: clamp(22px, 3.6vw, 34px); margin: 0 0 12px; max-width: 20ch; }
.ajakan p { color: rgba(255, 255, 255, .72); margin: 0 0 26px; max-width: 52ch; font-size: clamp(15.5px, .5vw + 14.5px, 16.5px); }
.ajakan .tombol { border-color: rgba(255, 255, 255, .3); color: #fff; }
.ajakan .tombol:hover { background: #fff; border-color: #fff; color: var(--laut-tua); }
.ajakan .tombol.utama { background: var(--kuning); border-color: var(--kuning); color: #05314f; }
.ajakan .tombol.utama:hover { background: #ffc835; border-color: #ffc835; color: #05314f; }

.ajakan-kecil { display: flex; align-items: center; justify-content: space-between; gap: 16px 20px; flex-wrap: wrap; border-top: 1px solid var(--garis); padding-top: 28px; }
.ajakan-kecil p { margin: 0; font-weight: 700; font-size: clamp(16px, .5vw + 15px, 17px); letter-spacing: -.02em; }

.kosong-halaman { text-align: center; padding-bottom: 64px; }
.kosong-halaman h1 { margin-left: auto; margin-right: auto; }
.kosong-halaman .sorot-aksi { justify-content: center; }

/* ==========================================================================
   Kaki
   ========================================================================== */
.kaki { background: var(--tinta); color: rgba(255, 255, 255, .6); padding: clamp(40px, 6vw, 60px) 0 0; }

.kaki-peta { padding-bottom: clamp(30px, 4vw, 44px); margin-bottom: clamp(30px, 4vw, 44px); border-bottom: 1px solid rgba(255, 255, 255, .11); }
.kaki-peta-kepala { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 22px; flex-wrap: wrap; margin-bottom: 16px; }
.kaki-peta-kepala h3 { font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: rgba(255, 255, 255, .4); margin: 0; font-weight: 700; }
.kaki-peta-kepala p { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .6); }
.kaki-peta iframe { width: 100%; height: clamp(190px, 26vw, 260px); border: 0; border-radius: var(--lengkung); filter: grayscale(.2) contrast(1.03); }

.kaki-isi { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 44px); padding-bottom: clamp(34px, 4vw, 46px); }
.kaki-merek img { width: clamp(150px, 20vw, 196px); height: auto; margin-bottom: 16px; }
.kaki-merek p { margin: 0; font-size: 14.5px; max-width: 46ch; line-height: 1.6; }
.kaki-kolom h3 { font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: rgba(255, 255, 255, .38); margin: 0 0 12px; font-weight: 700; }
.kaki-kolom a { display: block; color: rgba(255, 255, 255, .74); text-decoration: none; font-size: 14.5px; padding: 5px 0; }
.kaki-kolom a:hover { color: #fff; }
.kaki-alamat { font-size: 13.5px; margin: 12px 0 0; color: rgba(255, 255, 255, .42); }
.kaki-bawah {
  border-top: 1px solid rgba(255, 255, 255, .11); padding-top: 20px;
  padding-bottom: 90px;               /* ruang supaya tombol WhatsApp tidak menutupi teks */
  display: flex; justify-content: space-between; gap: 12px 22px; flex-wrap: wrap;
}
.kaki-bawah p { margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, .4); max-width: 62ch; }
.kaki-induk a { color: rgba(255, 255, 255, .78); font-weight: 600; }

/* ==========================================================================
   WhatsApp melayang
   ========================================================================== */
.wa-layang {
  position: fixed; right: clamp(14px, 3vw, 20px); bottom: clamp(14px, 3vw, 20px);
  width: clamp(48px, 9vw, 54px); height: clamp(48px, 9vw, 54px); border-radius: 50%;
  background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 26px rgba(37, 211, 102, .38); z-index: 50; transition: transform .16s ease;
}
.wa-layang:hover { transform: translateY(-2px) scale(1.04); }
.wa-layang svg { width: 55%; height: 55%; }

/* ==========================================================================
   SUSUNAN — hanya mengubah jumlah kolom dan tumpukan
   ========================================================================== */

/* Laptop kecil: kartu maksimal 3 kolom supaya tidak terlalu ramping */
@media (max-width: 1100px) {
  .kartu-baris { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
}

/* Tablet mendatar dan tablet potret */
@media (max-width: 1000px) {
  .sorot-grid { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .sorot h1 { max-width: 18ch; }
  .kontak-susun { grid-template-columns: 1fr; }
  .kaki-isi { grid-template-columns: 1fr 1fr; }
  .kaki-merek { grid-column: 1 / -1; }
}

/* Batas menu: di bawah ini navigasi jadi menu lipat */
@media (max-width: 860px) {
  .kepala-isi { min-height: 64px; }
  .tombol-menu {
    display: block; width: 44px; height: 44px; border: 1px solid var(--garis-2);
    border-radius: var(--lengkung); cursor: pointer; position: relative; flex: 0 0 44px;
  }
  .tombol-menu span, .tombol-menu span::before, .tombol-menu span::after {
    content: ""; position: absolute; left: 12px; width: 18px; height: 2px; background: var(--tinta); border-radius: 2px;
  }
  .tombol-menu span { top: 21px; }
  .tombol-menu span::before { top: -6px; left: 0; }
  .tombol-menu span::after { top: 6px; left: 0; }

  .navigasi { display: none; width: 100%; flex-direction: column; gap: 0; border-top: 1px solid var(--garis); padding-bottom: 6px; }
  #buka-menu:checked ~ .navigasi { display: flex; }
  .navigasi a { padding: 14px 0; border-bottom: 1px solid var(--garis); }
  .navigasi a:last-child { border-bottom: 0; }
  .navigasi a::after { display: none; }
  .navigasi a.aktif { color: var(--laut); }

  /* judul blok dan tautannya ditumpuk, tidak lagi berebut satu baris */
  .blok-kepala { flex-direction: column; align-items: flex-start; gap: 10px; }
  .kartu-baris { grid-template-columns: 1fr 1fr; }
}

/* Ponsel */
@media (max-width: 640px) {
  .bilah-kanan { display: none; }
  .bilah-isi { justify-content: flex-start; }

  .kartu-baris { grid-template-columns: 1fr; }
  .kartu { border-right: 0; padding: 22px 0; }
  .kartu:hover { background: transparent; }

  .sorot-aksi .tombol { flex: 1 1 100%; }
  .fakta div { border-right: 0; margin-right: 22px; padding-right: 0; }
  .daftar-tulisan .tulisan { grid-template-columns: 1fr; }
  .kaki-isi { grid-template-columns: 1fr; gap: 28px; }
  .kaki-bawah { padding-bottom: 86px; }

  /* papan: harga turun ke baris sendiri */
  .papan-daftar li { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; }
  .papan-harga { grid-column: 2; text-align: left; margin-top: 4px; }
  .papan-harga span { display: inline-block; margin-right: 14px; }

  /* tabel berubah jadi tumpukan berlabel */
  .tabel-gulir { overflow-x: visible; }
  .tabel { min-width: 0; }
  .tabel thead { display: none; }
  .tabel, .tabel tbody, .tabel tr, .tabel td { display: block; width: 100%; }
  .tabel tr { border-bottom: 1px solid var(--garis); padding: 10px 0; }
  .tabel tr:last-child { border-bottom: 0; }
  .tabel td { border: 0; padding: 5px 16px; display: flex; gap: 14px; align-items: flex-start; }
  .tabel td::before {
    content: attr(data-judul); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--tinta-3); font-weight: 700; flex: 0 0 78px; padding-top: 4px;
  }
  .tabel td .sel { flex: 1 1 auto; text-align: right; }
  .tabel td .harga { text-align: right; }
}

/* Ponsel kecil (360px ke bawah) */
@media (max-width: 400px) {
  .merek small { display: none; }
  .merek img { width: 36px; height: 36px; flex-basis: 36px; }
  .papan-daftar li { grid-template-columns: 62px minmax(0, 1fr); gap: 12px; }
  .papan-rute i { margin: 0 5px; }
  .fakta div { padding-right: 0; margin-right: 18px; }
  .artikel li { padding-left: 24px; }
}