/*
Theme Name: Papan Dok
Theme URI: https://makassarshipyard.com/
Author: Makassar Shipyard Build Desk
Description: Tema bespoke tailored untuk makassarshipyard.com. Papan operasi pelabuhan: kertas abu-semen, navy pelabuhan, keyline kuning sulfur, angka mono. Dibangun menyesuaikan konten yang sudah tayang.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mks-papandok
Tags: custom-colors, custom-menu, translation-ready
*/

/* ==========================================================================
   0. FONT FACE — self-hosted, no CDN
   ========================================================================== */
@font-face{font-family:'Barlow Condensed';src:url('/wp-content/uploads/fonts-mks/BarlowCondensed-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow Condensed';src:url('/wp-content/uploads/fonts-mks/BarlowCondensed-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Source Sans 3';src:url('/wp-content/uploads/fonts-mks/SourceSans3-var.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap;}
@font-face{font-family:'JetBrains Mono';src:url('/wp-content/uploads/fonts-mks/JetBrainsMono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}

/* ==========================================================================
   1. TOKEN — palet PAPAN DOK (unik per domain)
   ========================================================================== */
:root{
  --semen:#D5D4D2;        /* kertas abu-semen, permukaan dominan */
  --semen-2:#C9C8C6;      /* semen lebih tua, pemisah */
  --panel:#F2F2F0;        /* kartu data & tabel */
  --navy:#152965;         /* panel, nav, heading */
  --navy-2:#0E1C46;       /* navy lebih dalam */
  --sulfur:#F2D726;       /* GRAFIS SAJA — keyline, badge, penanda */
  --amber:#665A00;        /* varian AMAN untuk TEKS aksen di atas terang */
  --tinta:#15181F;        /* teks utama */
  --tinta-60:#4A4E57;     /* teks sekunder */
  --wa:#0E7A3A;           /* tombol WhatsApp saja */
  --wa-d:#0A5E2C;
  --line:rgba(21,24,31,.16);
  --disp:'Barlow Condensed','Helvetica Neue',Arial,sans-serif;
  --body:'Source Sans 3','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
  --wrap:1180px;
  --pad:24px;
  --nav-h:64px;
}
@media (max-width:767px){:root{--pad:16px;--nav-h:58px;}}

/* ==========================================================================
   2. RESET / DASAR
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--semen);color:var(--tinta);
  font-family:var(--body);font-size:17px;line-height:1.68;
  font-weight:400;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block;}
a{color:var(--navy);text-underline-offset:3px;text-decoration-thickness:1px;}
a:hover{color:var(--amber);}
h1,h2,h3,h4{font-family:var(--disp);font-weight:700;line-height:1.08;
  letter-spacing:-.005em;color:var(--navy);margin:0 0 .5em;text-wrap:balance;}
h1{font-size:clamp(30px,5.1vw,52px);}
h2{font-size:clamp(24px,3.5vw,36px);}
h3{font-size:clamp(19px,2.2vw,23px);}
p{margin:0 0 1.1em;}
ul,ol{margin:0 0 1.1em;padding-left:1.15em;}
li{margin:0 0 .45em;}
strong{font-weight:600;}
hr{border:0;border-top:1px solid var(--line);margin:2em 0;}
.num,table td:first-child strong,.mks-mono{font-family:var(--mono);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-weight:500;}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
.skip-link{position:absolute;left:-9999px;}
.skip-link:focus{left:8px;top:8px;z-index:999;background:var(--sulfur);
  color:var(--tinta);padding:10px 16px;border-radius:2px;}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;}

/* ==========================================================================
   3. HEADER / NAV  (z-index >= 900)
   ========================================================================== */
.mks-head{
  position:sticky;top:0;z-index:900;background:var(--navy);
  border-bottom:3px solid var(--sulfur);
}
.mks-head__in{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);
  height:var(--nav-h);display:flex;align-items:center;gap:18px;}
.mks-brand{display:flex;align-items:baseline;gap:9px;text-decoration:none;margin-right:auto;}
.mks-brand__n{font-family:var(--disp);font-weight:700;font-size:22px;
  letter-spacing:.02em;color:#fff;line-height:1;text-transform:uppercase;}
.mks-brand__t{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  color:var(--sulfur);text-transform:uppercase;}
@media (max-width:420px){.mks-brand__t{display:none;}}
.mks-nav{display:flex;gap:22px;align-items:center;}
.mks-nav a{color:#E6E8EF;text-decoration:none;font-size:15px;font-weight:500;
  padding:6px 0;border-bottom:2px solid transparent;}
.mks-nav a:hover,.mks-nav a:focus{color:#fff;border-bottom-color:var(--sulfur);}
.mks-head__wa{background:var(--wa);color:#fff !important;padding:9px 16px;
  border-radius:2px;font-weight:600;font-size:15px;text-decoration:none;
  border-bottom:0 !important;white-space:nowrap;}
.mks-head__wa:hover{background:var(--wa-d);}
.mks-burger{display:none;width:48px;height:48px;background:transparent;
  border:1px solid rgba(255,255,255,.32);border-radius:2px;cursor:pointer;
  padding:0;align-items:center;justify-content:center;flex-direction:column;gap:5px;}
.mks-burger span{display:block;width:22px;height:2px;background:#fff;}
@media (max-width:1023px){
  .mks-nav{display:none;}
  .mks-burger{display:flex;}
}

/* ---- DRAWER: overlay & panel = ANAK LANGSUNG body, SEJAJAR.
        Tidak ada backdrop-filter/transform/filter pada ancestor. ---- */
.mks-drawer-overlay{
  position:fixed;inset:0;z-index:940;background:rgba(10,14,26,.62);
  opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease;
}
.mks-drawer-overlay.is-open{opacity:1;visibility:visible;}
.mks-drawer-panel{
  position:fixed;top:0;right:0;bottom:0;z-index:950;width:min(88vw,360px);
  background:var(--navy);color:#E6E8EF;overflow-y:auto;
  transform:translateX(102%);visibility:hidden;
  transition:transform .18s ease,visibility .18s ease;
  padding:18px 20px calc(28px + env(safe-area-inset-bottom));
  border-left:3px solid var(--sulfur);
}
.mks-drawer-panel.is-open{transform:translateX(0);visibility:visible;}
.mks-drawer__x{position:absolute;top:12px;right:12px;width:48px;height:48px;
  background:transparent;border:1px solid rgba(255,255,255,.3);border-radius:2px;
  color:#fff;font-size:24px;line-height:1;cursor:pointer;}
.mks-drawer__grp{margin:0 0 20px;padding-top:8px;}
.mks-drawer__lbl{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sulfur);margin:0 0 8px;}
.mks-drawer-panel a{display:block;color:#E6E8EF;text-decoration:none;
  padding:12px 0;min-height:48px;font-size:16px;border-bottom:1px solid rgba(255,255,255,.12);}
.mks-drawer-panel a:hover{color:#fff;}
.mks-drawer__wa{margin-top:18px;background:var(--wa);color:#fff !important;
  text-align:center;border-radius:2px;font-weight:600;border-bottom:0 !important;}
.mks-drawer__mail{font-size:14px;color:#AFBAD6;word-break:break-all;}
body.mks-lock{overflow:hidden;}

/* ==========================================================================
   4. STICKY CTA MOBILE
   ========================================================================== */
.mks-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:930;display:none;
  background:var(--wa);color:#fff;text-decoration:none;
  align-items:center;justify-content:center;gap:10px;
  min-height:58px;padding:0 16px calc(0px + env(safe-area-inset-bottom));
  font-weight:600;font-size:16px;box-shadow:0 -3px 0 var(--sulfur);
  transform:translateY(102%);transition:transform .2s ease;
}
.mks-sticky.is-on{transform:translateY(0);}
@media (max-width:1023px){.mks-sticky{display:flex;}}
body.mks-lock .mks-sticky{display:none;}
@media (max-width:1023px){body{padding-bottom:0;}
  .mks-foot{padding-bottom:calc(74px + env(safe-area-inset-bottom));}}

/* ==========================================================================
   5. SEKSI DASAR
   ========================================================================== */
.s{padding:clamp(44px,6vw,76px) 0;}
.s--panel{background:var(--panel);}
.s--navy{background:var(--navy);color:#DDE2EE;}
.s--navy h2,.s--navy h3{color:#fff;}
.s--navy a{color:var(--sulfur);}
.s__lbl{font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--amber);margin:0 0 10px;
  display:flex;align-items:center;gap:10px;}
.s__lbl::before{content:"";width:26px;height:3px;background:var(--sulfur);flex:none;}
.s--navy .s__lbl{color:var(--sulfur);}
.s__intro{max-width:66ch;font-size:clamp(16px,1.7vw,18px);color:var(--tinta-60);}
.s--navy .s__intro{color:#C3CBE0;}

/* ==========================================================================
   6. HERO
   ========================================================================== */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.30;}
.hero__scrim{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(14,28,70,.94) 0%,rgba(14,28,70,.80) 46%,rgba(14,28,70,.52) 100%);}
.hero__in{position:relative;max-width:var(--wrap);margin:0 auto;
  padding:clamp(30px,4.6vw,58px) var(--pad) clamp(26px,3.4vw,40px);}
.hero__eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--sulfur);margin:0 0 14px;}
.hero h1{color:#fff;max-width:19ch;margin-bottom:.42em;}
.hero__sub{max-width:60ch;font-size:clamp(16px,1.85vw,19px);color:#D3DAEC;margin:0 0 22px;}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 18px;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:13px 24px;border-radius:2px;font-weight:600;
  font-size:16px;text-decoration:none;border:2px solid transparent;}
.btn--wa{background:var(--wa);color:#fff;}
.btn--wa:hover{background:var(--wa-d);color:#fff;}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5);}
.btn--ghost:hover{border-color:var(--sulfur);color:#fff;}
.btn--solid{background:var(--navy);color:#fff;}
.btn--solid:hover{background:var(--navy-2);color:#fff;}
.hero__honest{font-size:14.5px;color:#B9C3DC;border-left:3px solid var(--sulfur);
  padding:2px 0 2px 13px;max-width:74ch;margin:0;}

/* --- lane produk utama: WAJIB above fold --- */
.hero__lanes{position:relative;max-width:var(--wrap);margin:0 auto;
  padding:0 var(--pad) clamp(26px,3.2vw,38px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.lane{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  border-top:3px solid var(--sulfur);border-radius:2px;padding:15px 16px;
  text-decoration:none;display:block;}
.lane:hover{background:rgba(255,255,255,.13);}
.lane__k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:var(--sulfur);text-transform:uppercase;}
.lane__t{font-family:var(--disp);font-weight:700;font-size:19px;color:#fff;
  margin:5px 0 3px;line-height:1.14;}
.lane__d{font-size:13.5px;color:#BFC8E0;line-height:1.5;margin:0;}
@media (max-width:767px){
  .hero__lanes{grid-template-columns:1fr;gap:9px;}
  .lane{padding:12px 14px;}
  .lane__t{font-size:17px;}
  .lane__d{font-size:13px;}
}

/* ==========================================================================
   7. KARTU BUKTI SPESIFIKASI (harapan vs lingkup)
   ========================================================================== */
.spec{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px;}
.spec__c{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:20px;}
.spec__c--bad{border-left:5px solid var(--semen-2);}
.spec__c--good{border-left:5px solid var(--sulfur);}
.spec__lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--amber);margin:0 0 9px;}
.spec__q{font-size:17px;line-height:1.5;margin:0;color:var(--tinta);}
.spec__q em{font-style:normal;background:linear-gradient(transparent 62%,var(--sulfur) 62%);}
.spec__note{font-size:14px;color:var(--tinta-60);margin:11px 0 0;}
@media (max-width:767px){.spec{grid-template-columns:1fr;}}

/* ==========================================================================
   8. KARTU / GRID UMUM
   ========================================================================== */
.grid{display:grid;gap:16px;margin-top:26px;}
.grid--2{grid-template-columns:repeat(2,1fr);}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--4{grid-template-columns:repeat(4,1fr);}
@media (max-width:1023px){.grid--4,.grid--3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr;}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:2px;
  padding:20px;display:flex;flex-direction:column;}
.s--panel .card{background:#fff;}
.card__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--amber);margin:0 0 7px;}
.card h3{margin:0 0 8px;}
.card p{font-size:15px;color:var(--tinta-60);margin:0 0 10px;}
.card__go{margin-top:auto;font-weight:600;font-size:14.5px;color:var(--navy);
  text-decoration:none;border-bottom:2px solid var(--sulfur);
  align-self:flex-start;padding-bottom:1px;}
.card__go:hover{color:var(--amber);}
.card--soon{opacity:.72;}
.card__soon{margin-top:auto;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-60);}

/* ==========================================================================
   9. TABEL DATA
   ========================================================================== */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:24px;
  border:1px solid var(--line);border-radius:2px;background:var(--panel);}
.s--panel .tbl-wrap{background:#fff;}
table.mks{width:100%;border-collapse:collapse;min-width:560px;font-size:15.5px;}
table.mks th,table.mks td{padding:14px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line);}
table.mks thead th{background:var(--navy);color:#fff;font-family:var(--disp);
  font-weight:600;font-size:15px;letter-spacing:.02em;text-transform:uppercase;
  border-bottom:3px solid var(--sulfur);position:relative;}
table.mks tbody tr:last-child td{border-bottom:0;}
table.mks tbody tr:hover{background:rgba(242,215,38,.10);}
table.mks td:first-child{font-weight:600;color:var(--navy);width:33%;}
table.mks td:last-child{color:var(--tinta-60);}
.tbl-note{font-size:14px;color:var(--tinta-60);margin:12px 0 0;}
/* <=390px: kolom kedua jadi baris kedua, bukan dipotong */
@media (max-width:479px){
  table.mks{min-width:0;}
  table.mks thead{position:absolute;left:-9999px;}
  table.mks tbody tr{display:block;border-bottom:1px solid var(--line);padding:4px 0;}
  table.mks tbody tr:last-child{border-bottom:0;}
  table.mks td{display:block;border-bottom:0;padding:7px 14px;}
  table.mks td:first-child{width:auto;padding-top:13px;}
  table.mks td:last-child{padding-bottom:13px;}
  table.mks td:last-child::before{content:attr(data-l);display:block;
    font-family:var(--mono);font-size:10px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--amber);margin-bottom:3px;}
}

/* ==========================================================================
   10. CHECKLIST BERNOMOR
   ========================================================================== */
.checks{list-style:none;margin:26px 0 0;padding:0;
  display:grid;gap:12px;grid-template-columns:1fr 1fr;}
@media (max-width:767px){.checks{grid-template-columns:1fr;}}
.checks li{display:flex;gap:14px;background:var(--panel);
  border:1px solid var(--line);border-left:4px solid var(--sulfur);
  border-radius:2px;padding:15px 17px;margin:0;}
.s--panel .checks li{background:#fff;}
.checks__n{font-family:var(--mono);font-weight:500;font-size:14px;
  color:var(--amber);flex:none;padding-top:2px;}
.checks__t{font-size:15.5px;line-height:1.55;}

/* ==========================================================================
   11. PANEL GEO / PELABUHAN
   ========================================================================== */
.geo{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;margin-top:26px;}
@media (max-width:900px){.geo{grid-template-columns:1fr;gap:24px;}}
.geo__img{border:1px solid rgba(255,255,255,.2);border-radius:2px;}
.ports{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:11px;}
.ports li{display:flex;gap:14px;align-items:flex-start;
  border-top:1px solid rgba(255,255,255,.18);padding-top:11px;}
.ports__n{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--sulfur);flex:none;width:34px;padding-top:3px;}
.ports__t{font-family:var(--disp);font-weight:600;font-size:18px;color:#fff;
  margin:0 0 2px;line-height:1.2;}
.ports__d{font-size:14.5px;color:#BCC6DE;margin:0;}

/* ==========================================================================
   12. ENTITY STRIP
   ========================================================================== */
.ent{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px;}
@media (max-width:767px){.ent{grid-template-columns:1fr;}}
.ent__c{background:var(--panel);border:1px solid var(--line);
  border-top:3px solid var(--navy);border-radius:2px;padding:17px;}
.ent__n{font-family:var(--disp);font-weight:700;font-size:17px;color:var(--navy);
  margin:0 0 5px;line-height:1.2;}
.ent__d{font-size:14px;color:var(--tinta-60);margin:0;}
.ent__rule{font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;
  color:var(--amber);margin:18px 0 0;}
.ent__en{font-size:14px;color:var(--tinta-60);margin:8px 0 0;max-width:74ch;}

/* ==========================================================================
   13. FAQ
   ========================================================================== */
.faq{margin-top:26px;border-top:1px solid var(--line);}
.faq__i{border-bottom:1px solid var(--line);}
.faq__q{width:100%;background:transparent;border:0;cursor:pointer;
  display:flex;gap:14px;align-items:flex-start;justify-content:space-between;
  padding:17px 0;min-height:52px;text-align:left;font-family:var(--disp);
  font-weight:600;font-size:19px;color:var(--navy);line-height:1.25;}
.faq__q:hover{color:var(--amber);}
.faq__ic{flex:none;width:22px;height:22px;position:relative;margin-top:2px;}
.faq__ic::before,.faq__ic::after{content:"";position:absolute;background:var(--amber);}
.faq__ic::before{left:0;top:10px;width:22px;height:3px;}
.faq__ic::after{left:10px;top:0;width:3px;height:22px;transition:opacity .16s;}
.faq__q[aria-expanded="true"] .faq__ic::after{opacity:0;}
.faq__a{padding:0 0 18px;max-width:76ch;font-size:16px;color:var(--tinta-60);}
.faq__a p:last-child{margin-bottom:0;}
.faq__a[hidden]{display:none;}

/* ==========================================================================
   14. CTA BAND
   ========================================================================== */
.cta{position:relative;background:var(--navy-2);color:#fff;overflow:hidden;}
.cta__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.24;}
.cta__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,28,70,.93),rgba(14,28,70,.66));}
.cta__in{position:relative;max-width:var(--wrap);margin:0 auto;
  padding:clamp(40px,5vw,64px) var(--pad);}
.cta h2{color:#fff;max-width:22ch;}
.cta p{max-width:62ch;color:#CBD3E8;}
.cta__row{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;}
.cta__meta{font-family:var(--mono);font-size:12.5px;color:#9FADD0;margin:16px 0 0;letter-spacing:.03em;}

/* ==========================================================================
   15. FOOTER
   ========================================================================== */
.mks-foot{background:var(--navy);color:#B9C3DC;border-top:3px solid var(--sulfur);
  padding:clamp(38px,4.5vw,56px) 0 26px;font-size:14.5px;}
.mks-foot__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
@media (max-width:900px){.mks-foot__cols{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.mks-foot__cols{grid-template-columns:1fr;}}
.mks-foot h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sulfur);margin:0 0 11px;font-weight:500;}
.mks-foot ul{list-style:none;margin:0;padding:0;}
.mks-foot li{margin:0 0 8px;}
.mks-foot a{color:#C9D2E6;text-decoration:none;}
.mks-foot a:hover{color:#fff;text-decoration:underline;}
.mks-foot__base{border-top:1px solid rgba(255,255,255,.15);margin-top:30px;
  padding-top:20px;font-size:13.5px;color:#93A0C0;}
.mks-foot__base p{margin:0 0 7px;max-width:88ch;}
.mks-foot__byline{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:#AFBAD6;}

/* ==========================================================================
   16. HALAMAN DALAM (page / single / archive)
   ========================================================================== */
.pg{padding:0 0 clamp(40px,5vw,68px);}
.pg__head{background:var(--navy);color:#fff;border-bottom:3px solid var(--sulfur);
  padding:clamp(28px,4vw,52px) 0 clamp(24px,3vw,40px);margin-bottom:clamp(28px,3.4vw,44px);}
.pg__head h1{color:#fff;margin-bottom:.3em;max-width:24ch;}
.pg__crumb{font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--sulfur);margin:0 0 12px;}
.pg__crumb a{color:var(--sulfur);text-decoration:none;}
.pg__crumb a:hover{text-decoration:underline;}
.pg__meta{font-family:var(--mono);font-size:12px;color:#AFBAD6;letter-spacing:.04em;margin:0;}
.pg__body{max-width:820px;margin:0 auto;}
.pg__body h2{margin-top:1.7em;padding-top:.15em;border-top:3px solid var(--sulfur);
  display:inline-block;padding-right:.2em;}
.pg__body h3{margin-top:1.5em;}
.pg__body ul li,.pg__body ol li{margin-bottom:.6em;}
.pg__body img{border:1px solid var(--line);border-radius:2px;margin:1.4em 0;}
.pg__body table{width:100%;border-collapse:collapse;font-size:15.5px;margin:1.4em 0;}
.pg__body table th,.pg__body table td{padding:12px 14px;border:1px solid var(--line);
  text-align:left;vertical-align:top;}
.pg__body table th{background:var(--navy);color:#fff;font-family:var(--disp);
  font-weight:600;text-transform:uppercase;font-size:14.5px;}
.pg__body blockquote{margin:1.5em 0;padding:4px 0 4px 18px;
  border-left:4px solid var(--sulfur);color:var(--tinta-60);font-style:normal;}
.pg__body .mks-byline{font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;
  color:var(--tinta-60);border-bottom:1px solid var(--line);padding-bottom:12px;}
.tbl-scroll{overflow-x:auto;}

.arc{display:grid;gap:18px;grid-template-columns:repeat(3,1fr);margin-top:8px;}
@media (max-width:1023px){.arc{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.arc{grid-template-columns:1fr;}}
.arc__c{background:var(--panel);border:1px solid var(--line);border-radius:2px;
  overflow:hidden;display:flex;flex-direction:column;}
.arc__c img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.arc__b{padding:17px 18px 20px;display:flex;flex-direction:column;flex:1;}
.arc__d{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--amber);text-transform:uppercase;margin:0 0 7px;}
.arc__c h2,.arc__c h3{font-size:19px;margin:0 0 9px;line-height:1.22;}
.arc__c h2 a,.arc__c h3 a{color:var(--navy);text-decoration:none;}
.arc__c h2 a:hover,.arc__c h3 a:hover{color:var(--amber);}
.arc__x{font-size:14.5px;color:var(--tinta-60);margin:0 0 12px;}
.arc__go{margin-top:auto;font-weight:600;font-size:14px;color:var(--navy);
  text-decoration:none;border-bottom:2px solid var(--sulfur);align-self:flex-start;}
.pagi{display:flex;flex-wrap:wrap;gap:9px;margin-top:34px;justify-content:center;}
.pagi .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:46px;min-height:46px;padding:0 12px;background:var(--panel);
  border:1px solid var(--line);border-radius:2px;text-decoration:none;
  font-family:var(--mono);font-size:14px;color:var(--navy);}
.pagi .page-numbers.current{background:var(--navy);color:#fff;border-color:var(--navy);}
.pagi .page-numbers:hover{border-color:var(--amber);}

.notfound{max-width:640px;margin:0 auto;text-align:left;}
.notfound__code{font-family:var(--mono);font-size:58px;color:var(--amber);
  letter-spacing:.06em;margin:0 0 6px;line-height:1;}
.mks-search{display:flex;gap:8px;margin:22px 0 0;flex-wrap:wrap;}
.mks-search input[type=search]{flex:1;min-width:200px;min-height:50px;padding:0 14px;
  border:1px solid var(--line);border-radius:2px;background:var(--panel);
  font-family:var(--body);font-size:16px;color:var(--tinta);}
.mks-search button{min-height:50px;padding:0 22px;border:0;border-radius:2px;
  background:var(--navy);color:#fff;font-family:var(--body);font-weight:600;
  font-size:16px;cursor:pointer;}
.mks-search button:hover{background:var(--navy-2);}

/* uplink & disclosure dari mu-plugin kanon: beri gaya, jangan sembunyikan */
.w2g2-disclosure,.w2g2-eco{max-width:var(--wrap);margin:0 auto;
  padding-left:var(--pad) !important;padding-right:var(--pad) !important;
  color:#9FADD0;background:var(--navy);border-top:1px solid rgba(255,255,255,.15) !important;}
.w2g2-disclosure a,.w2g2-eco a{color:#C9D2E6;}
.w2g2-disclosure strong{color:#E6E8EF;}

@media print{.mks-head,.mks-sticky,.mks-drawer-panel,.mks-drawer-overlay{display:none !important;}}