/* ══════════════════════════════════════════════════════════════════════
   Naratama Adya Dewata

   Situs ini sengaja dibangun TANPA FOTO. Bukan karena kekurangan, tapi
   karena foto stok kapal raksasa di pelabuhan internasional akan terbaca
   sebagai pinjaman oleh siapa pun yang mengerti bisnis ini -- dan foto
   yang terbaca sebagai pinjaman merugikan lebih banyak daripada tidak ada
   foto sama sekali.

   Sebagai gantinya, bobot visualnya ditanggung oleh: peta rute yang
   digambar sendiri, tabel yang padat informasi, skala huruf yang berani,
   dan blok warna gelap-terang yang berselang. Ini bahasa rupa laporan
   cetak dan jadwal pelayaran -- memang tidak pernah butuh foto, dan justru
   terbaca serius.

   Semua gaya ada di berkas ini, tidak ada lagi style="" bertebaran di
   dalam HTML seperti versi sebelumnya. Itu sebabnya versi lama tidak punya
   satu pun keadaan hover dan tidak bisa menyesuaikan diri di layar HP.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --navy-pekat:#0A1424;
  --navy:#0E1930;
  --tinta:#10192B;
  --tinta-sedang:#3C4A63;
  --tinta-lembut:#6B7890;
  --emas:#C6963A;
  --emas-terang:#D9B565;
  --emas-tua:#96723A;
  --krem:#F7F5EF;
  --krem-tua:#EFEBE1;
  --putih:#FFFFFF;
  --garis:rgba(16,25,43,0.12);
  --garis-terang:rgba(247,245,239,0.16);
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Public Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --lebar:1240px;
  --radius:10px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--krem);
  color:var(--tinta);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
::selection{background:var(--emas);color:var(--navy)}

:is(a,button,input,select,textarea,summary,details):focus-visible{
  outline:2px solid var(--emas);outline-offset:2px;border-radius:4px;
}
.lewati{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--navy);color:var(--krem);padding:12px 20px;font-weight:600;
}
.lewati:focus{left:0}

.wadah{max-width:var(--lebar);margin:0 auto;padding:0 40px;width:100%}
.wadah.sempit{max-width:820px}

/* ───────────────── tombol ───────────────── */
.tbl{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:6px;cursor:pointer;
  font-family:var(--sans);font-size:15px;font-weight:600;line-height:1;
  padding:15px 26px;white-space:nowrap;
  transition:background-color .16s,color .16s,transform .12s,box-shadow .16s;
}
.tbl:hover{transform:translateY(-1px)}
.tbl:active{transform:translateY(0)}
.tbl-utama{background:var(--emas);color:var(--navy);font-weight:700}
.tbl-utama:hover{background:var(--emas-terang);box-shadow:0 6px 18px rgba(198,150,58,.28)}
.tbl-gelap{background:var(--tinta);color:var(--krem);padding:11px 22px;font-size:14px}
.tbl-gelap:hover{background:var(--navy)}
.tbl-garis{border:1px solid rgba(247,245,239,.38);color:var(--krem)}
.tbl-garis:hover{background:rgba(247,245,239,.10);border-color:rgba(247,245,239,.6)}
.tbl-garis-gelap{border:1px solid var(--garis);color:var(--tinta);background:transparent}
.tbl-garis-gelap:hover{background:var(--krem-tua)}

/* ───────────────── ticker berita ─────────────────
   Menyembunyikan dirinya sendiri kalau beritanya sudah basi -- lihat
   script.js. Ticker berisi berita bulan Maret yang dibaca orang di bulan
   Desember membuat situs terbaca terbengkalai, lebih buruk daripada tidak
   ada ticker sama sekali. */
.ticker{background:var(--navy-pekat);color:rgba(247,245,239,.9);font-size:13.5px}
.ticker-dalam{display:flex;align-items:center;gap:16px;height:42px;overflow:hidden}
.ticker-label{
  flex:none;font-size:10.5px;font-weight:700;letter-spacing:.18em;color:var(--emas-terang);
  border-right:1px solid var(--garis-terang);padding-right:16px;
}
.ticker-jendela{flex:1;overflow:hidden;position:relative;height:42px;mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.ticker-jalur{display:flex;align-items:center;gap:44px;height:42px;width:max-content;
  animation:ticker-geser 48s linear infinite}
.ticker-jalur.henti{animation-play-state:paused}
.ticker-jalur a{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;opacity:.88}
.ticker-jalur a:hover{opacity:1;color:var(--emas-terang)}
.ticker-tgl{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--emas);flex:none}
.ticker-sumber{font-size:11px;color:rgba(247,245,239,.5)}
.ticker-jeda{
  flex:none;background:transparent;border:1px solid var(--garis-terang);color:inherit;
  width:26px;height:26px;border-radius:5px;cursor:pointer;font-size:9px;line-height:1;
}
.ticker-jeda:hover{background:rgba(247,245,239,.1)}
@keyframes ticker-geser{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-jalur{animation:none}}

/* ───────────────── kepala ───────────────── */
.kepala{
  position:sticky;top:0;z-index:40;
  background:rgba(247,245,239,.93);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--garis);
}
.kepala-dalam{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:16px;padding-bottom:16px}
.merek{display:flex;flex-direction:column;line-height:1;flex:none}
.merek-1{font-family:var(--serif);font-size:21px;font-weight:600;letter-spacing:.01em}
.merek-2{font-size:9.5px;font-weight:700;letter-spacing:.2em;color:var(--tinta-sedang);margin-top:3px}
.nav{display:flex;align-items:center;gap:28px;flex-grow:1;justify-content:center}
.nav a{font-size:14px;font-weight:500;color:var(--tinta-sedang);padding:4px 0;position:relative}
.nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:1.5px;
  background:var(--emas);transform:scaleX(0);transition:transform .18s;
}
.nav a:hover{color:var(--tinta)}
.nav a:hover::after{transform:scaleX(1)}
.kepala-kanan{display:flex;align-items:center;gap:16px;flex:none}
.bahasa{
  font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--tinta-sedang);
  border:1px solid var(--garis);border-radius:5px;padding:6px 10px;
}
.bahasa:hover{border-color:var(--emas);color:var(--tinta)}
.menu-tbl{display:none;background:transparent;border:none;cursor:pointer;padding:8px;gap:5px;flex-direction:column}
.menu-tbl span{display:block;width:22px;height:2px;background:var(--tinta);border-radius:2px;transition:transform .2s,opacity .2s}
.menu-tbl[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-tbl[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-tbl[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ───────────────── hero ───────────────── */
.hero{position:relative;background:var(--navy);color:var(--krem);overflow:hidden}
.hero-peta{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.hero-dalam{position:relative;padding-top:120px;padding-bottom:108px;display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.mata{font-size:11.5px;font-weight:700;letter-spacing:.2em;color:var(--emas-tua)}
.mata.emas{color:var(--emas-terang)}
.hero h1{
  font-family:var(--serif);font-weight:500;font-size:clamp(34px,5.2vw,58px);
  line-height:1.1;letter-spacing:-.015em;max-width:15ch;
}
.hero-sub{font-size:18px;line-height:1.65;color:rgba(247,245,239,.76);max-width:58ch}
.hero-tombol{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}

@keyframes dash-flow{to{stroke-dashoffset:-140}}
@keyframes hero-glow{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes aurora-drift{0%,100%{transform:translate(0,0) scale(1);opacity:.85}50%{transform:translate(-2%,3%) scale(1.07);opacity:1}}
.route-line{animation:dash-flow 7s linear infinite}
.route-line.slow{animation-duration:11s}
.route-line.slower{animation-duration:15s}
.route-beacon{filter:url(#beaconGlow);animation:hero-glow 3.5s ease-in-out infinite}
.route-beacon:nth-child(2){animation-delay:.7s}
.route-beacon:nth-child(3){animation-delay:1.4s}
.route-beacon:nth-child(4){animation-delay:2.1s}
.route-beacon:nth-child(5){animation-delay:2.8s}
.hero-aurora{animation:aurora-drift 16s ease-in-out infinite;transform-origin:center}
@media (prefers-reduced-motion:reduce){
  .route-line,.route-beacon,.hero-aurora{animation:none}
}

/* ───────────────── strip bukti ───────────────── */
.bukti{background:var(--navy-pekat);color:var(--krem);border-top:1px solid var(--garis-terang)}
.bukti-baris{display:flex;flex-wrap:wrap;gap:0;padding-top:0;padding-bottom:0}
.bukti-butir{
  flex:1 1 180px;padding:22px 28px 22px 0;margin-right:28px;
  border-right:1px solid var(--garis-terang);
}
.bukti-butir:last-child{border-right:none;margin-right:0}
.bukti-butir dt{font-size:11px;font-weight:700;letter-spacing:.14em;color:rgba(247,245,239,.5);text-transform:uppercase}
.bukti-butir dd{font-size:15.5px;font-weight:600;margin-top:5px;color:var(--krem)}

/* ───────────────── bagian ───────────────── */
.bagian{padding:96px 0}
.bagian.putih{background:var(--putih);border-top:1px solid var(--garis);border-bottom:1px solid var(--garis)}
.bagian.gelap{background:var(--navy);color:var(--krem)}
.bagian-kepala{max-width:66ch;margin-bottom:52px}
.bagian-kepala h2{
  font-family:var(--serif);font-weight:500;font-size:clamp(27px,3.4vw,38px);
  line-height:1.2;letter-spacing:-.01em;margin-top:12px;
}
.bagian-sub{margin-top:16px;font-size:16px;line-height:1.7;color:var(--tinta-sedang);max-width:62ch}
.bagian-kepala.terang h2{color:var(--krem)}
.bagian-kepala.terang .bagian-sub{color:rgba(247,245,239,.72)}
.gelap .bagian-sub{color:rgba(247,245,239,.72)}

.kisi-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.kisi-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}

/* ───────────────── kartu layanan ───────────────── */
.kartu-layanan{
  background:var(--putih);border:1px solid var(--garis);border-radius:12px;
  padding:34px 30px;display:flex;flex-direction:column;gap:14px;
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.kartu-layanan:hover{border-color:rgba(198,150,58,.55);box-shadow:0 10px 30px rgba(16,25,43,.07);transform:translateY(-2px)}
.kartu-ikon{width:52px;height:52px;border-radius:10px;background:var(--krem);
  display:flex;align-items:center;justify-content:center;border:1px solid var(--garis)}
.kartu-layanan h3{font-size:19px;font-weight:700}
.kartu-layanan>p{font-size:14.5px;line-height:1.65;color:var(--tinta-sedang)}
ul.centang{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:4px;
  padding-top:16px;border-top:1px solid var(--garis)}
ul.centang li{position:relative;padding-left:22px;font-size:14px;line-height:1.55;color:var(--tinta-sedang)}
ul.centang li::before{
  content:'';position:absolute;left:0;top:7px;width:11px;height:7px;
  border-left:1.8px solid var(--emas);border-bottom:1.8px solid var(--emas);
  transform:rotate(-45deg);
}

/* ───────────────── peta rute ───────────────── */
.peta-bungkus{margin:0 0 44px}
.peta{width:100%;height:auto;background:rgba(10,20,36,.45);border:1px solid var(--garis-terang);border-radius:12px}
.peta-pulau path{fill:rgba(247,245,239,.075);stroke:rgba(247,245,239,.22);stroke-width:1}
.peta-rute .rute-garis{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:4 7;
  animation:dash-flow 9s linear infinite;opacity:.9}
.peta-kota circle{fill:var(--emas);stroke:var(--navy);stroke-width:1.5}
.peta-kota text{font-family:var(--sans);font-size:13px;font-weight:600;paint-order:stroke}
.peta-kota text.alas{stroke:#0C1526;stroke-width:4.5;stroke-linejoin:round;fill:none}
.peta-kota text.atas{fill:rgba(247,245,239,.9)}
.peta-kaki{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;
  margin-top:14px;font-size:12.5px;color:rgba(247,245,239,.55)}
.peta-kunci{display:flex;gap:18px;flex-wrap:wrap}
.kunci-butir{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:rgba(247,245,239,.8)}
.kunci-butir i{width:14px;height:2.5px;border-radius:2px;display:block}
@media (prefers-reduced-motion:reduce){.peta-rute .rute-garis{animation:none}}

/* ───────────────── tabel rute ───────────────── */
.tabel-gulung{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.rute{width:100%;border-collapse:collapse;font-size:14.5px;min-width:580px}
table.rute th{
  text-align:left;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(247,245,239,.5);padding:0 18px 12px 0;border-bottom:1px solid var(--garis-terang);
}
table.rute th.num,table.rute td.num{text-align:right;padding-right:0}
table.rute td{padding:15px 18px 15px 0;border-bottom:1px solid rgba(247,245,239,.08);color:rgba(247,245,239,.88)}
table.rute tbody tr:hover td{background:rgba(247,245,239,.04)}
.rute-nama{display:flex;align-items:center;gap:10px;font-weight:600;white-space:nowrap}
.rute-nama .panah{color:var(--emas);flex:none}
.pil{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  padding:4px 11px;border-radius:999px;border:1px solid}
.pil.moda-darat{color:#E2BE7C;border-color:rgba(198,150,58,.5);background:rgba(198,150,58,.12)}
.pil.moda-laut{color:#9BC8E0;border-color:rgba(91,155,191,.5);background:rgba(91,155,191,.12)}
.pil.moda-udara{color:#EBB492;border-color:rgba(217,143,95,.5);background:rgba(217,143,95,.12)}
.rute-lain{margin-top:26px;font-size:14.5px;color:rgba(247,245,239,.62);max-width:62ch}

/* ───────────────── langkah ───────────────── */
.langkah-daftar{list-style:none}
.langkah{display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:2px solid var(--emas)}
.langkah-no{font-family:var(--serif);font-size:30px;color:var(--emas);line-height:1}
.langkah h3{font-size:16.5px;font-weight:700}
.langkah p{font-size:14px;line-height:1.65;color:var(--tinta-sedang)}

/* ───────────────── dokumen ───────────────── */
.kisi-dok{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 32px}
.dok-butir{display:flex;gap:14px;align-items:flex-start;padding:20px 0;border-top:1px solid var(--garis)}
.dok-butir svg{flex:none;margin-top:2px}
.dok-butir h3{font-size:15.5px;font-weight:700;margin-bottom:4px}
.dok-butir p{font-size:13.5px;line-height:1.6;color:var(--tinta-sedang)}

/* ───────────────── kenapa kami ───────────────── */
.dua-kolom{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.bagian-kepala.lengket{position:sticky;top:96px;margin-bottom:0}
.kenapa-daftar{display:flex;flex-direction:column;gap:30px}
.kenapa-butir{display:flex;gap:18px;align-items:flex-start}
.kenapa-butir svg{flex:none;margin-top:3px}
.kenapa-butir h3{font-size:17px;font-weight:700;margin-bottom:6px}
.kenapa-butir p{font-size:14.5px;line-height:1.68;color:var(--tinta-sedang)}

/* ───────────────── tanya jawab ───────────────── */
.tanya-daftar{display:flex;flex-direction:column}
details.tanya{border-top:1px solid var(--garis)}
details.tanya:last-child{border-bottom:1px solid var(--garis)}
details.tanya summary{
  list-style:none;cursor:pointer;padding:22px 0;display:flex;align-items:center;
  justify-content:space-between;gap:20px;font-size:17px;font-weight:600;
}
details.tanya summary::-webkit-details-marker{display:none}
details.tanya summary:hover{color:var(--emas-tua)}
details.tanya summary svg{flex:none;color:var(--emas);transition:transform .2s}
details.tanya[open] summary svg{transform:rotate(45deg)}
details.tanya p{padding:0 0 24px;font-size:15px;line-height:1.72;color:var(--tinta-sedang);max-width:70ch}

/* ───────────────── kontak & formulir ───────────────── */
.kontak-kisi{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start}
.kontak-kiri h2{font-family:var(--serif);font-weight:500;font-size:clamp(27px,3.2vw,36px);
  line-height:1.22;margin:14px 0 16px;color:var(--krem)}
.kontak-rinci{margin-top:38px;padding-top:28px;border-top:1px solid var(--garis-terang)}
.kontak-rinci h3{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--emas-terang);margin-bottom:16px}
.kontak-rinci dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:14.5px}
.kontak-rinci dt{color:rgba(247,245,239,.5);white-space:nowrap}
.kontak-rinci dd{color:rgba(247,245,239,.9)}
.kontak-rinci a{border-bottom:1px solid rgba(198,150,58,.5)}
.kontak-rinci a:hover{color:var(--emas-terang)}
.tautan-peta{display:inline-block;margin-top:4px;font-size:13px;color:var(--emas-terang)}

.form{background:var(--krem);border-radius:14px;padding:36px;color:var(--tinta)}
.form-kisi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.isian{display:flex;flex-direction:column;gap:6px;min-width:0}
.isian.penuh{grid-column:1/-1}
.isian label{font-size:12.5px;font-weight:600;color:var(--tinta-sedang)}
.wajib{color:#B4452F;text-decoration:none;font-weight:700}
.isian input,.isian select,.isian textarea{
  width:100%;border:1px solid var(--garis);border-radius:6px;padding:11px 12px;
  font-family:inherit;font-size:14.5px;color:var(--tinta);background:var(--putih);
  transition:border-color .15s,box-shadow .15s;
}
.isian textarea{resize:vertical;min-height:76px}
.isian input:focus,.isian select:focus,.isian textarea:focus{
  outline:none;border-color:var(--emas);box-shadow:0 0 0 3px rgba(198,150,58,.16);
}
.isian.kurang input,.isian.kurang select{border-color:#B4452F;background:#FDF3F1}
.form-bantu{margin-top:18px;font-size:13px;line-height:1.6;color:var(--tinta-lembut)}
.form-tombol{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.form-galat{margin-top:14px;font-size:14px;font-weight:600;color:#B4452F;
  background:#FDF3F1;border-radius:6px;padding:11px 14px}
.form-sukses{margin-top:14px;font-size:14px;line-height:1.6;color:#15603C;
  background:#E4F4EA;border-radius:6px;padding:12px 14px}

/* ───────────────── kaki ───────────────── */
.kaki{background:var(--navy-pekat);color:rgba(247,245,239,.56);padding:58px 0 36px;font-size:14px}
.kaki-atas{display:flex;justify-content:space-between;flex-wrap:wrap;gap:34px;margin-bottom:34px}
.kaki-merek .merek-1{color:var(--krem);display:block;margin-bottom:9px}
.kaki-merek p{max-width:38ch;line-height:1.65;font-size:13.5px}
.kaki-nav{display:flex;gap:26px;flex-wrap:wrap}
.kaki-nav a:hover{color:var(--emas-terang)}
.kaki-legal{font-size:12.5px;line-height:1.6;color:rgba(247,245,239,.42);margin-bottom:8px;max-width:76ch}
.kaki-bawah{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  border-top:1px solid rgba(247,245,239,.12);padding-top:22px;margin-top:18px;font-size:12.5px}
.kaki-bawah a{border-bottom:1px solid rgba(198,150,58,.45)}
.kaki-bawah a:hover{color:var(--emas-terang)}

/* ══════════════════════════════════════════════════════════════════════
   LAYAR KECIL
   Situs lamamu tidak punya satu pun @media. Seluruh tata letaknya dipatok
   repeat(3,...), repeat(4,...), padding 96px, judul 56px -- di ponsel itu
   berdesakan dan judulnya melewati tepi layar. Untuk B2B di Indonesia,
   sebagian besar yang membuka pertama kali memakai ponsel.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:1040px){
  .kisi-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kisi-dok{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dua-kolom,.kontak-kisi{grid-template-columns:1fr;gap:40px}
  .bagian-kepala.lengket{position:static}
  .nav{gap:20px}
  .nav a{font-size:13.5px}
}

@media (max-width:860px){
  .wadah{padding:0 22px}
  .bagian{padding:68px 0}
  .kisi-3{grid-template-columns:1fr;gap:18px}
  .hero-dalam{padding-top:76px;padding-bottom:72px}
  .hero-sub{font-size:16.5px}

  /* Nav jadi panel yang dibuka tombol. */
  .menu-tbl{display:flex}
  .sembunyi-hp{display:none}
  .nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--krem);border-bottom:1px solid var(--garis);
    box-shadow:0 14px 30px rgba(16,25,43,.1);
    max-height:0;overflow:hidden;transition:max-height .24s ease;
  }
  .nav.buka{max-height:70vh;overflow:auto}
  .nav a{padding:15px 22px;border-bottom:1px solid var(--garis);font-size:15px}
  .nav a::after{display:none}
  .kepala-dalam{position:relative}

  .bukti-butir{flex:1 1 44%;border-right:none;margin-right:0;padding:16px 0;
    border-bottom:1px solid var(--garis-terang)}
  .bukti-butir:nth-last-child(-n+1){border-bottom:none}

  .form{padding:24px 20px}
  .form-kisi{grid-template-columns:1fr}
  .form-tombol .tbl{flex:1 1 100%}

  .peta-kota text{font-size:17px}
  .peta-kaki{font-size:12px}

  .kaki-atas{flex-direction:column;gap:24px}
  details.tanya summary{font-size:16px;gap:14px}
}

@media (max-width:520px){
  .kisi-4,.kisi-dok{grid-template-columns:1fr}
  .bukti-butir{flex:1 1 100%}
  .ticker-label{display:none}
  .hero-tombol{flex-direction:column;align-items:stretch;width:100%}
  .hero-tombol .tbl{width:100%}
  .merek-1{font-size:19px}
  .tbl{padding:14px 22px;font-size:14.5px}
}

@media print{
  .ticker,.kepala,.hero-peta,.menu-tbl,.form-tombol,.lewati{display:none !important}
  body{background:#fff;color:#000;font-size:11pt}
  .bagian,.hero,.bukti,.kaki{background:#fff !important;color:#000 !important;padding:16pt 0}
  .bagian-kepala h2,.hero h1,.kontak-kiri h2{color:#000 !important}
  table.rute td,table.rute th{color:#000 !important;border-color:#999 !important}
  details.tanya{break-inside:avoid}
  details.tanya p{display:block !important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

/* Spanduk ini hanya muncul kalau WhatsApp, email, dan Formspree ketiganya
   masih kosong di isi.py -- artinya formulir penawaran belum punya tujuan
   kirim. Sengaja dibuat mencolok dan tidak bisa ditutup: situs yang
   mengucapkan terima kasih lalu membuang permintaan pelanggan adalah cacat
   yang harus berisik, bukan yang disembunyikan. */
.belum-siap{
  background:#8E2A1B;color:#fff;font-size:13.5px;font-weight:600;line-height:1.5;
  padding:11px 22px;text-align:center;
}

/* Telepon di bilah atas. Disembunyikan di HP bersama tombol penawaran --
   di layar sempit keduanya tidak muat, dan di HP nomornya tetap sejauh
   satu ketukan lewat menu dan bagian Kontak. */
.kepala-telp{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:600;color:var(--tinta-sedang);white-space:nowrap;
}
.kepala-telp svg{color:var(--emas-tua)}
.kepala-telp:hover{color:var(--tinta)}
.kaki-hubungi{
  font-size:13.5px;line-height:1.7;color:rgba(247,245,239,.62);margin-bottom:10px;
}
.kaki-hubungi a{border-bottom:1px solid rgba(198,150,58,.45)}
.kaki-hubungi a:hover{color:var(--emas-terang)}