/* ModalMarkets — gaya rambu jalan. Ditulis khusus untuk situs ini. */
:root{
  --aspal:#fefce8; --kuning:#fde047; --hitam:#111827; --merah:#b91c1c; --biru:#1e40af; --kertas:#ffffff;
  --abu:#4b5563; --garis:3px solid var(--hitam); --sudut:10px;
  --judul:"Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
  --isi:"Source Serif 4", Georgia, "Times New Roman", serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--aspal);color:var(--hitam);font-family:var(--isi);font-size:18px;line-height:1.65}
img{max-width:100%;height:auto;display:block}
a{color:var(--biru);text-underline-offset:3px;text-decoration-thickness:2px}
a:hover{color:var(--merah)}
h1,h2,h3{font-family:var(--judul);line-height:1.08;letter-spacing:.01em;text-transform:none}
h1{font-size:clamp(2.2rem,6vw,3.6rem);font-weight:800;margin:.3em 0 .35em}
h2{font-size:clamp(1.6rem,4vw,2.2rem);font-weight:800;margin:1.6em 0 .5em}
h3{font-size:1.35rem;font-weight:600;margin:1.3em 0 .4em}
p,li{overflow-wrap:anywhere}
.lompat{position:absolute;left:-9999px}
.lompat:focus{left:12px;top:12px;background:var(--kertas);padding:10px;border:var(--garis);z-index:9}

/* ---------- kepala: papan nama jalan ---------- */
.papan-atas{background:var(--kuning);border-bottom:var(--garis)}
.papan-atas .lebar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:10px 16px}
.merek{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--hitam);min-height:48px}
.merek svg{width:44px;height:44px;flex:none}
.merek b{font-family:var(--judul);font-size:1.7rem;font-weight:800;letter-spacing:.02em}
.jalur{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.jalur a{font-family:var(--judul);font-weight:600;font-size:1.05rem;text-decoration:none;color:var(--hitam);background:var(--kertas);
  border:2px solid var(--hitam);border-radius:6px;padding:6px 11px;min-height:40px;display:inline-flex;align-items:center}
.jalur a:hover,.jalur a[aria-current]{background:var(--hitam);color:var(--kuning)}
.lebar{max-width:1120px;margin:0 auto}

/* ---------- jejak (breadcrumb) ---------- */
.jejak{max-width:1120px;margin:14px auto 0;padding:0 16px;font-size:.95rem}
.jejak ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.jejak li{display:flex;align-items:center}
.jejak li+li::before{content:"›";margin:0 6px;color:var(--abu)}
.jejak a{display:inline-block;padding:10px 0}

/* ---------- tata letak isi ---------- */
.ruas{max-width:1120px;margin:0 auto;padding:0 16px 40px}
.naskah{max-width:760px}
.naskah p,.naskah li{font-size:1.06rem}
.pengantar{font-size:1.2rem;border-left:8px solid var(--kuning);padding-left:14px;margin:0 0 1.2em}
.cap{font-size:.95rem;color:var(--abu);display:flex;flex-wrap:wrap;gap:4px 14px;margin-bottom:10px}
.cap span{display:inline-block}
figure{margin:1.4em 0}
.bingkai{border:var(--garis);border-radius:var(--sudut);overflow:hidden;background:var(--kertas)}
figcaption{font-size:.92rem;color:var(--abu);padding:8px 12px}

/* ---------- tiang rambu pembuka ---------- */
.tiang{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:flex-end;margin:12px 0 18px;padding:14px 14px 0;
  border-bottom:10px solid #9ca3af;position:relative}
.tiang-item{margin:0;display:flex;flex-direction:column;align-items:center;width:112px;position:relative;padding-bottom:26px}
.tiang-item::after{content:"";position:absolute;bottom:0;left:50%;width:8px;height:26px;margin-left:-4px;background:#6b7280;border-radius:2px 2px 0 0}
.tiang-item svg{width:84px;height:84px}
.tiang-item .plat{background:var(--kertas);border:2px solid var(--hitam);border-radius:5px;padding:3px 6px;margin-top:6px;
  font-family:var(--judul);font-weight:600;font-size:.92rem;line-height:1.15;text-align:center;color:var(--hitam)}

/* ---------- papan peringatan risiko ---------- */
.papan-risiko{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:start;background:var(--kertas);
  border:var(--garis);border-left:14px solid var(--merah);border-radius:var(--sudut);padding:14px 16px;margin:18px 0 26px}
.papan-risiko svg{width:60px;height:60px}
.papan-risiko p{margin:0;font-size:1rem}
.papan-risiko strong{font-family:var(--judul);font-size:1.25rem;letter-spacing:.02em;display:block;margin-bottom:2px}

/* ---------- tabel ---------- */
.tabel-wrap{overflow-x:auto;border:var(--garis);border-radius:var(--sudut);background:var(--kertas);margin:1.2em 0}
table{border-collapse:collapse;width:100%;font-size:.98rem}
th,td{padding:9px 11px;text-align:left;vertical-align:top;border-bottom:1px solid #d1d5db}
thead th{background:var(--hitam);color:var(--kuning);font-family:var(--judul);font-size:1.08rem;letter-spacing:.02em}
tbody tr:nth-child(even){background:#fffbe0}
td.angka,th.angka{text-align:right;white-space:nowrap}
caption{caption-side:bottom;text-align:left;font-size:.9rem;color:var(--abu);padding:8px 11px}

/* ---------- kotak-kotak ---------- */
.kotak-hitung{background:var(--kertas);border:var(--garis);border-radius:var(--sudut);padding:6px 18px 12px;margin:1.4em 0;
  background-image:repeating-linear-gradient(135deg,var(--kuning) 0 12px,var(--hitam) 12px 24px);background-size:100% 10px;background-repeat:no-repeat}
.kotak-hitung h3{margin-top:.9em}
.label-ilustrasi{display:inline-block;font-family:var(--judul);font-weight:600;background:var(--kuning);border:2px solid var(--hitam);
  border-radius:5px;padding:0 7px;font-size:.95rem}
.biru-info{background:#e0e7ff;border:var(--garis);border-radius:var(--sudut);padding:6px 18px;margin:1.4em 0}
.daftar-rambu{list-style:none;padding:0;margin:1em 0}
.daftar-rambu li{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:start;padding:10px 0;border-bottom:2px dashed #9ca3af}
.daftar-rambu li svg{width:50px;height:50px}
.daftar-rambu li p{margin:.2em 0 0}
.dua-kolom{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:1.2em 0}
.dua-kolom>div{background:var(--kertas);border:var(--garis);border-radius:var(--sudut);padding:4px 16px 10px}
.dua-kolom>div.merah{border-top:12px solid var(--merah)}
.dua-kolom>div.biru{border-top:12px solid var(--biru)}
.sumber-cek{border-top:6px double var(--hitam);margin-top:2.4em;padding-top:.6em;font-size:.97rem}
.sumber-cek li{font-size:.97rem}
.faq details{background:var(--kertas);border:var(--garis);border-radius:var(--sudut);margin:10px 0;padding:0 14px}
.faq summary{cursor:pointer;font-weight:600;padding:12px 0;min-height:44px}
.faq details p{margin:.2em 0 1em}

/* ---------- tombol papan jalan ---------- */
.papan-jalan{display:inline-flex;align-items:center;gap:10px;background:var(--biru);color:var(--kertas);text-decoration:none;
  font-family:var(--judul);font-weight:600;font-size:1.15rem;letter-spacing:.02em;border:var(--garis);border-radius:var(--sudut);
  padding:8px 16px 8px 14px;min-height:46px;box-shadow:0 0 0 3px var(--kertas) inset}
.papan-jalan::after{content:"";width:0;height:0;border-left:11px solid var(--kertas);border-top:8px solid transparent;border-bottom:8px solid transparent}
.papan-jalan:hover{background:var(--hitam);color:var(--kuning)}
.lanjut{display:flex;flex-wrap:wrap;gap:10px;margin:1.6em 0}

/* ---------- kalkulator uji janji ---------- */
.mesin{background:var(--hitam);color:var(--kertas);border-radius:var(--sudut);border:var(--garis);padding:14px 18px;margin:1.4em 0}
.mesin h3{color:var(--kuning);margin-top:.3em}
.mesin label{display:block;font-size:.98rem;margin:.6em 0 .2em}
.mesin input{font:inherit;font-size:1.05rem;width:100%;max-width:260px;padding:9px 10px;border-radius:6px;border:3px solid var(--kuning);min-height:46px}
.mesin output{display:block;font-family:var(--judul);font-size:1.6rem;color:var(--kuning);margin:.5em 0 .2em}
.mesin p{font-size:.98rem}
.mesin .baris{display:flex;flex-wrap:wrap;gap:6px 22px}

/* ---------- beranda: jalan ---------- */
.gerbang{display:grid;grid-template-columns:1.25fr 1fr;gap:26px;align-items:center;padding:22px 16px 10px;max-width:1120px;margin:0 auto}
.gerbang .lede{font-size:1.18rem}
.gerbang-rambu{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;justify-items:center;background:var(--kertas);border:var(--garis);border-radius:var(--sudut);padding:16px}
.gerbang-rambu svg{width:86px;height:86px}
.gerbang-rambu p{grid-column:1/-1;margin:.2em 0 0;font-size:.98rem;text-align:center}
.jalan{position:relative;max-width:1120px;margin:10px auto 0;padding:10px 16px 30px}
.jalan::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:120px;margin-left:-60px;background:#374151;border-left:6px solid var(--kertas);border-right:6px solid var(--kertas)}
.jalan::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:8px;margin-left:-4px;
  background:repeating-linear-gradient(to bottom,var(--kuning) 0 34px,transparent 34px 60px)}
.jalan-judul{position:relative;z-index:1;text-align:center;background:var(--aspal);border:var(--garis);border-radius:var(--sudut);max-width:560px;margin:0 auto 24px;padding:4px 16px 10px}
.jalan-judul h2{margin:.35em 0 .2em}
.jalan-judul p{margin:0}
.km{position:relative;z-index:1;display:grid;grid-template-columns:1fr 150px 1fr;align-items:center;margin:0 0 26px}
.km-papan{background:var(--kertas);border:var(--garis);border-radius:var(--sudut);padding:6px 16px 14px;grid-column:1}
.km:nth-child(odd) .km-papan{grid-column:3}
.km-tanda{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:center}
.km-tanda svg{width:92px;height:92px}
.km-tanda span{font-family:var(--judul);font-weight:800;background:var(--kertas);color:var(--hitam);border:2px solid var(--hitam);border-radius:4px;padding:0 8px;margin-top:4px;font-size:.98rem}
.km-papan h3{margin:.45em 0 .25em}
.km-papan p{margin:.2em 0 .7em;font-size:1rem}
.km-papan a.papan-jalan{font-size:1.02rem}
.persimpangan{max-width:1120px;margin:0 auto;padding:0 16px 30px;display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.persimpangan .bingkai{margin:0}
.tabel-mini{margin-top:0}
.pos-lapor{max-width:1120px;margin:0 auto 40px;padding:0 16px}
.pos-lapor-isi{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;background:var(--biru);color:var(--kertas);border:var(--garis);border-radius:var(--sudut);padding:16px 20px}
.pos-lapor-isi svg{width:96px;height:96px}
.pos-lapor-isi h2{color:var(--kertas);margin:.2em 0}
.pos-lapor-isi a{color:var(--kuning)}
.pos-lapor-isi a.papan-jalan{color:var(--hitam);background:var(--kuning);box-shadow:none}
.pos-lapor-isi a.papan-jalan::after{border-left-color:var(--hitam)}

/* ---------- kaki ---------- */
.kaki{background:var(--hitam);color:#f3f4f6;border-top:8px solid var(--kuning);margin-top:30px}
.kaki .lebar{padding:26px 16px;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:22px}
.kaki a{color:var(--kuning);display:inline-block;padding:6px 0;min-height:32px}
.kaki ul{list-style:none;margin:0;padding:0}
.kaki .kaki-judul{font-family:var(--judul);font-size:1.3rem;font-weight:800;color:var(--kertas);margin:0 0 6px}
.kaki p{font-size:.98rem}
.kaki .garis-bawah{grid-column:1/-1;border-top:2px dashed #6b7280;padding-top:12px;font-size:.92rem}

@media (max-width:820px){
  body{font-size:17px}
  .gerbang,.persimpangan{grid-template-columns:1fr}
  .jalan::before{left:36px;width:44px;margin-left:-22px;border-width:4px}
  .jalan::after{left:36px;width:5px;margin-left:-2px}
  .km{grid-template-columns:72px 1fr;gap:10px}
  .km .km-papan,.km:nth-child(odd) .km-papan{grid-column:2;grid-row:1}
  .km-tanda{grid-column:1}
  .km-tanda svg{width:64px;height:64px}
  .jalan-judul{margin-left:56px}
  .dua-kolom{grid-template-columns:1fr}
  .kaki .lebar{grid-template-columns:1fr}
  .jalur{margin-left:0}
  .pos-lapor-isi{grid-template-columns:1fr}
  .tiang-item{width:96px}
  .tiang-item svg{width:70px;height:70px}
}
@media (max-width:400px){
  .jalur a{font-size:.98rem;padding:5px 9px}
  .tiang{gap:12px 6px;padding:12px 0 0;justify-content:space-between}
  .tiang-item{width:74px}
  .tiang-item svg{width:58px;height:58px}
  .tiang-item .plat{font-size:.8rem;padding:2px 4px}
}