/* ===== dari homepage-pukatnews.html ===== */
:root{
  --ink:#0C2340;          /* navy pekat — header/footer */
  --ink-2:#122E52;
  --blue:#1A5A9E;         /* biru PUKAT dalam */
  --blue-bright:#2B7EC1;  /* biru logo */
  --paper:#FFFFFF;
  --mist:#F4F6F9;         /* abu dingin latar seksi */
  --line:#E3E8EF;
  --text:#1C2A3A;
  --muted:#5C6B7E;
  --maroon:#8E1B2F;       /* Investigasi */
  --teal:#0E7C7B;         /* Policy & Tata Ruang */
  --amber:#B07C10;        /* Bisnis & Properti */
  --live:#D64545;
  --serif:'Lora', Georgia, serif;
  --sans:'Plus Jakarta Sans', -apple-system, sans-serif;
  --maxw:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.serif{font-family:var(--serif)}

/* ============ MOTIF KADASTER (signature) ============ */
.kadaster{
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
}

/* ============ TOPBAR ============ */
.topbar{background:var(--ink);color:#B9C6D8;font-size:12.5px}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:36px}
.topbar .tag{color:#8FA5C0;letter-spacing:.02em}
.topbar .tag b{color:#fff;font-weight:600}
.topbar nav{display:flex;gap:18px}
.topbar nav a{transition:color .15s}
.topbar nav a:hover{color:#fff}
@media(max-width:760px){.topbar nav{display:none}}

/* ============ HEADER ============ */
.masthead{background:var(--ink);color:#fff;border-top:1px solid rgba(255,255,255,.08)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:20px;padding-bottom:20px;gap:24px}
.brand{display:flex;align-items:center;gap:14px}
.brand-mark{width:52px;height:52px;flex:none}
.brand-name{font-family:var(--sans);font-weight:800;font-size:34px;letter-spacing:.14em;line-height:1}
.brand-name span{color:var(--blue-bright)}
.brand-sub{font-size:10.5px;letter-spacing:.34em;color:#8FA5C0;margin-top:5px;font-weight:500}
.head-cta{display:flex;align-items:center;gap:12px}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;padding:11px 20px;border-radius:6px;transition:all .18s;cursor:pointer;border:0}
.btn-primary{background:var(--blue-bright);color:#fff}
.btn-primary:hover{background:#3B8FD3;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:#C7D4E4;border:1px solid rgba(255,255,255,.22)}
.btn-ghost:hover{border-color:#fff;color:#fff}
@media(max-width:900px){.head-cta .btn-ghost{display:none}}
@media(max-width:640px){.brand-name{font-size:26px}.brand-mark{width:42px;height:42px}}

/* ============ NAV ============ */
.mainnav{background:var(--ink);border-top:1px solid rgba(255,255,255,.1);position:sticky;top:0;z-index:60;box-shadow:0 2px 18px rgba(12,35,64,.25)}
.mainnav .wrap{display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none}
.mainnav .wrap::-webkit-scrollbar{display:none}
.mainnav a{color:#C7D4E4;font-size:14px;font-weight:600;padding:14px 16px;white-space:nowrap;border-bottom:3px solid transparent;transition:all .15s;letter-spacing:.01em}
.mainnav a:hover{color:#fff;background:rgba(255,255,255,.05)}
.mainnav a.active{color:#fff;border-bottom-color:var(--blue-bright)}
.mainnav a.pil-inv:hover,.mainnav a.pil-inv.hovered{border-bottom-color:#D0687A}
.mainnav .spacer{flex:1}
.mainnav .search-btn{color:#C7D4E4;padding:14px 12px;cursor:pointer;display:flex;align-items:center}
.mainnav .search-btn:hover{color:#fff}

/* ============ TICKER ============ */
.ticker{background:#fff;border-bottom:1px solid var(--line);overflow:hidden}
.ticker .wrap{display:flex;align-items:center;gap:16px;height:44px}
.ticker-label{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;letter-spacing:.1em;color:var(--live);flex:none}
.dot{width:7px;height:7px;border-radius:50%;background:var(--live);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.ticker-track{overflow:hidden;flex:1;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 40px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 40px),transparent 100%)}
.ticker-items{display:flex;gap:48px;animation:scroll 38s linear infinite;width:max-content}
.ticker-track:hover .ticker-items{animation-play-state:paused}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-items a{font-size:13.5px;color:var(--text);white-space:nowrap;font-weight:500}
.ticker-items a:hover{color:var(--blue)}
.ticker-items a b{color:var(--blue);font-weight:700}

/* ============ HERO ============ */
.hero{background:var(--ink);padding-bottom:44px}
.hero-inner{padding-top:28px}
.hero-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:20px}
.hero-main{position:relative;border-radius:10px;overflow:hidden;min-height:480px;display:flex;align-items:flex-end;background:#22364F}
.hero-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.hero-main:hover img{transform:scale(1.03)}
.hero-main::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,35,64,0) 30%,rgba(9,22,40,.92) 100%)}
.hero-body{position:relative;z-index:2;padding:36px;color:#fff}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.12em;padding:6px 12px;border-radius:4px;margin-bottom:14px}
.k-inv{background:var(--maroon);color:#fff}
.k-hukum{background:var(--blue);color:#fff}
.k-policy{background:var(--teal);color:#fff}
.k-bisnis{background:var(--amber);color:#fff}
.hero-title{font-family:var(--serif);font-size:clamp(26px,3.4vw,42px);font-weight:700;line-height:1.15;letter-spacing:-.01em;margin-bottom:12px}
.hero-title a{transition:color .15s}
.hero-title a:hover{color:#CDE4F7}
.hero-lede{font-size:16px;line-height:1.55;color:#CBD7E5;max-width:640px;margin-bottom:16px}
.meta{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#9FB1C7;font-weight:500}
.meta .sep{opacity:.5}
.hero-side{display:flex;flex-direction:column;gap:0}
.hero-side-head{font-size:12px;font-weight:800;letter-spacing:.14em;color:#8FA5C0;padding:2px 0 14px;border-bottom:2px solid rgba(255,255,255,.2)}
.hero-item{display:flex;gap:14px;padding:17px 0;border-bottom:1px solid rgba(255,255,255,.14);align-items:flex-start}
.hero-item .num{font-family:var(--serif);font-size:15px;font-weight:600;color:var(--blue-bright);flex:none;padding-top:2px;min-width:20px}
.hero-item h3{font-family:var(--serif);font-size:16.5px;font-weight:600;line-height:1.35}
.hero-item h3 a{transition:color .15s}
.hero-item h3 a:hover{color:#7FBCEE;text-decoration:none}
.hero-side .hero-item:last-child{border-bottom:0;padding-bottom:6px}
.hero-item .m2{font-size:11.5px;font-weight:600;margin-top:6px;letter-spacing:.06em}
.hero-side .white h3{color:#fff}
.hero-side .white .m2{color:#8FA5C0}
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .hero-main{min-height:380px}
}

/* ============ SECTION BASICS ============ */
section.band{padding:52px 0}
.band-mist{background:var(--mist)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:26px;gap:16px}
.sec-title{display:flex;align-items:center;gap:14px}
.sec-title .parcel{width:26px;height:26px;flex:none}
.sec-title h2{font-family:var(--serif);font-size:27px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.sec-title .accent{width:44px;height:4px;border-radius:2px}
.sec-more{font-size:13.5px;font-weight:700;color:var(--blue);white-space:nowrap;display:flex;align-items:center;gap:6px}
.sec-more:hover{gap:10px}
.sec-more{transition:gap .18s}

/* kartu artikel standar */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:1000px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid-4,.grid-3{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:box-shadow .2s,transform .2s;display:flex;flex-direction:column}
.card:hover{box-shadow:0 12px 32px rgba(12,35,64,.1);transform:translateY(-3px)}
.card .thumb{aspect-ratio:16/10;overflow:hidden;background:#DDE5EE}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .thumb img{transform:scale(1.05)}
.card .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:9px;flex:1}
.chip{font-size:10.5px;font-weight:800;letter-spacing:.1em;width:fit-content}
.c-hukum{color:var(--blue)}.c-inv{color:var(--maroon)}.c-policy{color:var(--teal)}.c-bisnis{color:var(--amber)}
.card h3{font-family:var(--serif);font-size:17.5px;font-weight:600;line-height:1.35;color:var(--ink)}
.card h3 a:hover{color:var(--blue)}
.card .m2{font-size:12px;color:var(--muted);font-weight:500;margin-top:auto}

/* ===== dari homepage-pukatnews.html ===== */
/* ===== HEADER & FOOTER GLOBAL (seragam semua halaman publik) ===== */
.topbar{background:var(--ink,#0C2340);color:#B9C6D8;font-size:12.5px}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:36px;max-width:1200px;margin:0 auto;padding:0 24px}
.topbar .tag{color:#8FA5C0;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .tag b{color:#fff;font-weight:600}
.topbar nav{display:flex;gap:18px;flex:none}
.topbar nav a{transition:color .15s}
.topbar nav a:hover{color:#fff}
@media(max-width:760px){.topbar nav{display:none}}

.masthead{background:var(--ink,#0C2340);color:#fff;border-top:1px solid rgba(255,255,255,.08)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;gap:24px;max-width:1200px;margin:0 auto}
.masthead .brand{display:flex;align-items:center;gap:14px}
.masthead .brand-mark{width:52px;height:52px;flex:none}
.masthead .brand-name{font-weight:800;font-size:34px;letter-spacing:.14em;line-height:1;color:#fff}
.masthead .brand-name span{color:#2B7EC1}
.masthead .brand-sub{font-size:10.5px;letter-spacing:.34em;color:#8FA5C0;margin-top:5px;font-weight:500}
.head-cta{display:flex;align-items:center;gap:12px}
.gbtn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;padding:11px 20px;border-radius:6px;transition:all .18s;cursor:pointer;border:0}
.gbtn-primary{background:#2B7EC1;color:#fff}
.gbtn-primary:hover{background:#3B8FD3;transform:translateY(-1px)}
.gbtn-ghost{background:transparent;color:#C7D4E4;border:1px solid rgba(255,255,255,.22)}
.gbtn-ghost:hover{border-color:#fff;color:#fff}
@media(max-width:900px){.head-cta .gbtn-ghost{display:none}}
@media(max-width:640px){.masthead .brand-name{font-size:26px}.masthead .brand-mark{width:42px;height:42px}.gbtn-primary{padding:10px 14px;font-size:13px}}
@media(max-width:400px){.masthead .brand-name{font-size:22px;letter-spacing:.1em}.masthead .brand-sub{letter-spacing:.2em;font-size:9px}.masthead .brand-mark{width:36px;height:36px}}

.mainnav{background:var(--ink,#0C2340);border-top:1px solid rgba(255,255,255,.1);position:sticky;top:0;z-index:60;box-shadow:0 2px 18px rgba(12,35,64,.25)}
.mainnav .wrap{display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none;max-width:1200px;margin:0 auto;padding:0 24px}
.mainnav .wrap::-webkit-scrollbar{display:none}
.mainnav a{color:#C7D4E4;font-size:14px;font-weight:600;padding:14px 16px;white-space:nowrap;border-bottom:3px solid transparent;transition:all .15s}
.mainnav a:hover{color:#fff;background:rgba(255,255,255,.05)}
.mainnav a.active{color:#fff;border-bottom-color:#2B7EC1}
.mainnav .spacer{flex:1}
.mainnav .search-btn{color:#C7D4E4;padding:14px 12px;cursor:pointer;display:flex;align-items:center}
.mainnav .search-btn:hover{color:#fff}
@media(max-width:640px){.mainnav a{padding:15px 14px;font-size:14.5px}}

.gfoot{background:var(--ink,#0C2340);color:#C7D4E4;padding:56px 0 0;margin-top:48px}
.gfoot .wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.gfoot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px}
.gfoot p{font-size:13.5px;line-height:1.65;color:#9FB1C7}
.gfoot h4{color:#fff;font-size:13px;font-weight:800;letter-spacing:.1em;margin-bottom:16px;text-transform:uppercase}
.gfoot-grid a{display:block;font-size:13.5px;padding:5px 0;color:#9FB1C7;transition:color .15s}
.gfoot-grid a:hover{color:#fff}
.gfoot .fbrand{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.gfoot .fbrand svg{width:44px;height:44px}
.gfoot .fbrand .n{font-weight:800;font-size:24px;letter-spacing:.12em;color:#fff;line-height:1}
.gfoot .fbrand .n span{color:#2B7EC1}
.gfoot .fbrand small{display:block;font-size:9px;letter-spacing:.26em;color:#8FA5C0;margin-top:4px;font-weight:600}
.gfoot-bottom{border-top:1px solid rgba(255,255,255,.12);padding:20px 0 24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:#7F93AC}
@media(max-width:900px){.gfoot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.gfoot{padding-top:40px}.gfoot-grid{grid-template-columns:1fr;gap:26px;padding-bottom:32px}.gfoot-bottom{flex-direction:column;gap:8px}}

/* ================= MENU MOBILE ================= */
.burger{display:none;background:none;border:1px solid rgba(255,255,255,.25);border-radius:8px;width:40px;height:40px;color:#fff;font-size:17px;cursor:pointer;flex:none;align-items:center;justify-content:center}
.burger:hover{border-color:#fff;background:rgba(255,255,255,.08)}
@media(max-width:860px){.burger{display:flex}}
.mscrim{position:fixed;inset:0;background:rgba(12,35,64,.5);opacity:0;pointer-events:none;transition:opacity .22s;z-index:290}
.mscrim.on{opacity:1;pointer-events:auto}
.mmenu{position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);background:linear-gradient(180deg,#0C2340,#122E52);z-index:300;transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow-y:auto;box-shadow:-20px 0 60px rgba(12,35,64,.4)}
.mmenu.open{transform:translateX(0)}
.mm-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.1)}
.mm-head .t{font-size:11px;font-weight:800;letter-spacing:.14em;color:#8FA5C0}
.mm-close{background:none;border:0;color:#C7D4E4;font-size:24px;cursor:pointer;line-height:1;padding:2px 6px}
.mm-close:hover{color:#fff}
.mm-search{margin:16px 20px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:11px 14px;color:#8FA5C0;font-size:13.5px}
.mmenu nav{padding:4px 0 8px}
.mmenu nav a{display:flex;align-items:center;gap:12px;padding:13px 20px;color:#C7D4E4;font-size:15px;font-weight:600;border-left:3px solid transparent;transition:all .15s}
.mmenu nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.mmenu nav a.on{color:#fff;background:rgba(43,126,193,.2);border-left-color:#2B7EC1}
.mmenu nav a .d{width:8px;height:8px;border-radius:2px;flex:none}
.mm-sec{padding:16px 20px 6px;font-size:10px;font-weight:800;letter-spacing:.14em;color:#647B99;border-top:1px solid rgba(255,255,255,.08);margin-top:6px}
.mm-cta{padding:16px 20px 20px;display:flex;flex-direction:column;gap:10px;margin-top:auto;border-top:1px solid rgba(255,255,255,.1)}
.mm-cta a{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:700;padding:13px;border-radius:9px;transition:all .15s}
.mm-cta .k{background:#2B7EC1;color:#fff}
.mm-cta .k:hover{background:#3B8FD3}
.mm-cta .l{border:1px solid rgba(255,255,255,.25);color:#C7D4E4}
.mm-cta .l:hover{border-color:#fff;color:#fff}
.mm-foot{padding:0 20px 22px;font-size:11.5px;color:#7F93AC;line-height:1.6}

/* ===== dari homepage-pukatnews.html ===== */
.gfoot{margin-top:0}

/* ===== dari homepage-pukatnews.html ===== */
/* ============ PERBAIKAN RESPONSIF GLOBAL ============ */
/* 1) Kunci overflow horizontal — akar masalah tampilan mengecil di HP */
html,body{width:100%;max-width:100%}
/* 2) Semua item flex/grid boleh menyusut (default min-width:auto sering bikin overflow) */
*{min-width:0}
/* 3) Media tidak pernah melebihi layar */
img,video,iframe{max-width:100%;height:auto}
/* 4) Panel menu: sembunyikan total saat tertutup agar tak menambah lebar dokumen */
.mmenu{visibility:hidden}
.mmenu.open{visibility:visible}
/* 5) Masthead di layar sangat kecil: pastikan logo + tombol + burger muat tanpa terpotong */
@media(max-width:480px){
  .masthead .wrap{padding:14px 16px;gap:10px}
  .masthead .brand{gap:9px}
  .masthead .brand-name{font-size:20px;letter-spacing:.09em}
  .masthead .brand-sub{font-size:8px;letter-spacing:.16em}
  .masthead .brand-mark{width:32px;height:32px}
  .head-cta{gap:8px}
  .gbtn-primary,.btn-primary{padding:9px 11px;font-size:12px}
  .burger{width:38px;height:38px}
  .topbar .wrap,.mainnav .wrap{padding:0 16px}
}
/* 6) Grid/flex umum yang berpotensi meluber di ponsel sempit */
@media(max-width:400px){
  .k-stats{gap:22px}
  .row-thumb{width:100px}
  .r-thumb{width:96px}
}

/* ===== dari homepage-pukatnews.html ===== */
/* ============ PERBAIKAN v3: item scroller tidak boleh menyusut ============ */
/* Aturan *{min-width:0} membuat link nav saling menumpuk — kecualikan semua
   elemen yang teksnya nowrap / berada di baris geser atau baris pill */
.mainnav a,.topbar nav a,.ticker-items a,
.subnav a,.tabs .tab,.filters .chipf,.sugg .list a,.tags .tag,.pager .pg,
.k-stat,.head-cta>*,.acts>*,.mainnav .search-btn{flex-shrink:0}
/* Tombol tidak boleh patah dua baris */
.gbtn,.btn,.btn-kh,.btn-login,.btn-submit,.go{white-space:nowrap}
/* Nav utama: pastikan tetap bisa digeser mulus di HP */
.mainnav .wrap{-webkit-overflow-scrolling:touch}
/* Sorotan hero bernomor: nomor jangan menyusut */
.hero-item .num,.pop-num,.idx .jam,.idx .rb{flex-shrink:0}

/* ===== dari homepage-pukatnews.html ===== */
/* ============ PERBAIKAN v4: kembalikan sticky header ============ */
/* overflow-x:hidden di html/body mematikan position:sticky.
   overflow-x:clip memotong overflow TANPA membuat scroll container,
   sehingga nav sticky bekerja normal kembali. */
@supports (overflow-x: clip){
  html,body{overflow-x:clip}
}

/* ===== dari homepage-pukatnews.html ===== */
/* ============ v6: SMART STICKY HEADER ============ */
/* Tombol menu kini permanen di dalam nav sticky — selalu terjangkau saat scroll */
.mainnav .burger{display:flex;width:36px;height:36px;font-size:15px;margin:6px 0 6px 6px;border-color:rgba(255,255,255,.28)}
/* Logo mini: muncul hanya saat nav dalam keadaan menempel (sudah lewat masthead) */
.nav-mini{display:none;align-items:center;gap:8px;margin-right:10px;flex-shrink:0}
.nav-mini svg{width:26px;height:26px}
.nav-mini .n{font-weight:800;font-size:15px;letter-spacing:.1em;color:#fff;line-height:1}
.nav-mini .n span{color:#2B7EC1}
.mainnav.stuck .nav-mini{display:flex;animation:miniIn .22s ease}
@keyframes miniIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.mainnav.stuck{box-shadow:0 4px 24px rgba(12,35,64,.4)}

/* ===== dari homepage-pukatnews.html ===== */
/* ============ v7: NAV 3 ZONA (kiri terkunci / tengah geser / kanan terkunci) ============ */
.mainnav .wrap{display:flex;align-items:stretch;overflow:visible;gap:0}
.nav-scroll{display:flex;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nav-scroll::-webkit-scrollbar{display:none}
.nav-actions{display:flex;align-items:center;flex:0 0 auto;gap:4px;padding-left:8px}
.nav-mini{align-self:center}
/* rapatkan sedikit di laptop agar 9 rubrik muat tanpa geser */
@media(max-width:1360px){.mainnav a{padding:14px 12px;font-size:13.5px}}
@media(max-width:1180px){.mainnav a{padding:14px 10px;font-size:13px}}
/* fade halus di tepi kanan zona rubrik ketika ada yang tersembunyi */
.nav-scroll{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%)}
@media(min-width:1360px){.nav-scroll{-webkit-mask-image:none;mask-image:none}}

/* ===== dari homepage-pukatnews.html ===== */
/* ============ v8: nav selalu muat + fade cerdas ============ */
/* Saat menempel (logo mini tampil), rubrik merapat halus agar total tetap < 1200px */
.mainnav.stuck .nav-scroll a{padding:14px 13px;font-size:13.5px}
/* Fade tidak lagi permanen — hanya saat benar-benar ada item tersembunyi */
.nav-scroll{-webkit-mask-image:none;mask-image:none}
.nav-scroll.more-r{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%)}
.nav-scroll.more-l{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 100%)}
.nav-scroll.more-l.more-r{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%)}

/* ===== dari homepage-pukatnews.html ===== */
/* ============ v9: app bar bersih di HP saat menempel ============ */
/* Di layar kecil, ruang tak cukup untuk logo + rubrik + aksi sekaligus.
   Saat nav menempel: sembunyikan zona rubrik -> bar jadi [logo | cari ☰] */
@media(max-width:640px){
  .mainnav.stuck .nav-scroll{display:none}
  .mainnav.stuck .wrap{min-height:52px;align-items:center;justify-content:space-between}
  .mainnav.stuck .nav-mini{margin-right:0}
  .mainnav.stuck .nav-mini svg{width:28px;height:28px}
  .mainnav.stuck .nav-mini .n{font-size:16px}
}

/* ===== dari homepage-pukatnews.html ===== */
/* ============ v10: menu satu layar tanpa scroll ============ */
.mmenu{width:min(600px,94vw);display:flex;flex-direction:column}
.mm-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:4px 30px;padding:4px 22px 20px;flex:1;align-content:start}
.mm-sec2{font-size:10px;font-weight:800;letter-spacing:.14em;color:#647B99;padding:14px 0 8px}
.mm-l{display:flex;align-items:center;gap:11px;padding:11px 10px;color:#C7D4E4;font-size:14.5px;font-weight:600;border-radius:8px;border-left:3px solid transparent;transition:all .15s}
.mm-l:hover{color:#fff;background:rgba(255,255,255,.06)}
.mm-l.on{color:#fff;background:rgba(43,126,193,.2);border-left-color:#2B7EC1}
.mm-l .d{width:8px;height:8px;border-radius:2px;flex:none}
.mm-about a{display:block;padding:9px 10px;color:#C7D4E4;font-size:13.5px;font-weight:600;border-radius:8px;transition:all .15s}
.mm-about a:hover{color:#fff;background:rgba(255,255,255,.06)}
.mm-cta2{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.mm-cta2 a{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13.5px;font-weight:700;padding:12px;border-radius:9px;transition:all .15s;white-space:nowrap}
.mm-cta2 .k{background:#2B7EC1;color:#fff}
.mm-cta2 .k:hover{background:#3B8FD3}
.mm-cta2 .l{border:1px solid rgba(255,255,255,.25);color:#C7D4E4}
.mm-cta2 .l:hover{border-color:#fff;color:#fff}
.mm-foot2{margin-top:14px;font-size:11px;color:#7F93AC;line-height:1.6}
/* HP: satu kolom padat yang tetap muat satu layar */
@media(max-width:700px){
  .mmenu{width:min(330px,92vw)}
  .mm-grid{grid-template-columns:1fr;gap:0;padding:0 16px 14px}
  .mm-search{margin:12px 16px 4px;padding:10px 13px;font-size:13px}
  .mm-head{padding:14px 16px}
  .mm-sec2{padding:10px 0 5px}
  .mm-l{padding:8px 9px;font-size:14px}
  .mm-about{display:grid;grid-template-columns:1fr 1fr;gap:0 8px}
  .mm-about a{padding:7px 8px;font-size:12.5px}
  .mm-cta2{flex-direction:row;margin-top:10px}
  .mm-cta2 a{flex:1;padding:11px 6px;font-size:12px}
  .mm-foot2{margin-top:10px;font-size:10px}
}
/* Layar sangat pendek: izinkan scroll sebagai jaring pengaman */
.mmenu{overflow-y:auto}

/* ===== dari homepage-pukatnews.html ===== */
/* ============ v11: menu mobile rapat & rapi, desktop diberi pemisah ============ */
/* Tinggi panel mengikuti viewport dinamis (aman dari address bar HP) */
.mmenu{height:100vh;height:100dvh}

/* --- Desktop/tablet: garis pemisah tipis antar kolom --- */
@media(min-width:701px){
  .mm-grid>.mm-col:last-child{border-left:1px solid rgba(255,255,255,.1);padding-left:26px}
}

/* --- HP: kompak agar seluruh isi muat satu layar --- */
@media(max-width:700px){
  .mm-head{padding:12px 16px 10px}
  .mm-search{margin:8px 16px 2px;padding:9px 12px;font-size:12.5px}
  .mm-grid{padding:0 14px 12px}
  .mm-sec2{padding:9px 0 4px;font-size:9.5px}
  .mm-l{padding:6px 9px;font-size:13.5px;gap:10px}
  .mm-l .d{width:7px;height:7px}
  /* Tentang: kembali 1 kolom ringkas — sejajar rapi, tanpa baris patah */
  .mm-about{display:block}
  .mm-about a{padding:5px 9px;font-size:12.5px}
  .mm-cta2{flex-direction:row;gap:8px;margin-top:9px}
  .mm-cta2 a{flex:1;padding:10px 4px;font-size:11.5px;gap:5px}
  .mm-foot2{margin-top:8px;font-size:9.5px;line-height:1.5}
}
/* HP layar pendek (<680px): sedikit lebih rapat lagi */
@media(max-width:700px) and (max-height:700px){
  .mm-l{padding:5px 9px;font-size:13px}
  .mm-about a{padding:4px 9px;font-size:12px}
  .mm-search{display:none}
}

/* ===== dari homepage-pukatnews.html ===== */
/* ============ v12: menu mobile 2 kolom — dijamin muat tanpa scroll ============ */
@media(max-width:700px){
  .mmenu{width:min(410px,95vw)}
  .mm-head{padding:12px 16px 8px}
  .mm-search{margin:6px 16px 2px;padding:9px 12px;font-size:12.5px;display:flex}
  .mm-grid{padding:0 14px 12px;gap:0}
  .mm-sec2{padding:10px 0 5px;font-size:9.5px}
  /* RUBRIK: 2 kolom -> 9 item jadi 5 baris */
  nav.mm-col{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px}
  nav.mm-col .mm-sec2{grid-column:1/-1}
  .mm-l{padding:8px 8px;font-size:12.5px;gap:8px;white-space:nowrap}
  .mm-l .d{width:7px;height:7px}
  /* TENTANG: 2 kolom -> 5 item jadi 3 baris */
  .mm-about{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px}
  .mm-about a{padding:7px 8px;font-size:12px;white-space:nowrap}
  .mm-cta2{flex-direction:row;gap:8px;margin-top:10px}
  .mm-cta2 a{flex:1;padding:11px 4px;font-size:11.5px;gap:5px}
  .mm-foot2{margin-top:9px;font-size:9.5px;line-height:1.5}
}
/* "Pedoman Media Siber" satu-satunya yang panjang: beri 1 baris penuh agar tak terpotong */
@media(max-width:700px){
  .mm-about a:nth-child(3){grid-column:1/-1}
}

/* ===== dari homepage-pukatnews.html ===== */
/* ============ v13: polesan akhir panel menu ============ */
/* Brand di kepala panel (ganti tulisan MENU polos) */
.mm-brand{display:flex;align-items:center;gap:9px}
.mm-brand svg{width:26px;height:26px}
.mm-brand b{font-weight:800;font-size:16px;letter-spacing:.11em;color:#fff}
.mm-brand b i{font-style:normal;color:#2B7EC1}
/* Napas di tepi kanan kolom rubrik */
.mm-grid{padding-left:18px;padding-right:18px}
@media(max-width:700px){nav.mm-col{gap:2px 10px}}
/* Pemisah halus di atas TENTANG (mobile) */
@media(max-width:700px){
  .mm-grid>.mm-col:last-child{border-top:1px solid rgba(255,255,255,.08);margin-top:8px;padding-top:2px}
}
/* Media sosial ditambatkan di dasar panel — mengisi ruang kosong secara elegan */
.mm-bottom{margin-top:auto;padding:14px 18px 18px;border-top:1px solid rgba(255,255,255,.08)}
.mb-t{display:block;font-size:9.5px;font-weight:800;letter-spacing:.16em;color:#647B99;margin-bottom:10px}
.mb-row{display:flex;gap:10px}
.mb-row a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;color:#C7D4E4;transition:all .15s}
.mb-row a svg{width:17px;height:17px;fill:currentColor}
.mb-row a:hover{border-color:#2B7EC1;color:#fff;background:rgba(43,126,193,.2);transform:translateY(-2px)}

/* ===== dari homepage-pukatnews.html ===== */
/* ============ v14: tombol login admin ============ */
/* Topbar (desktop/tablet): terpisah garis halus di ujung kanan */
.tb-login{display:inline-flex;align-items:center;gap:6px;margin-left:6px;padding-left:18px;border-left:1px solid rgba(255,255,255,.18);color:#8FA5C0;font-weight:600}
.tb-login:hover{color:#fff}
/* Panel menu: baris login ramping di atas blok sosial — tampil di semua perangkat */
.mm-login{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 12px;padding:10px 13px;border:1px solid rgba(255,255,255,.16);border-radius:9px;color:#C7D4E4;font-size:12.5px;font-weight:700;transition:all .15s}
.mm-login:hover{border-color:#2B7EC1;color:#fff;background:rgba(43,126,193,.15)}
.mm-login span{color:#647B99;transition:transform .15s}
.mm-login:hover span{transform:translateX(3px);color:#7FBCEE}

/* ===== dari homepage-pukatnews.html ===== */
/* ============ v15: KUNCI FINAL TATA LETAK PANEL MENU ============ */
/* Blok ini memaksa menang atas semua aturan lama yang mungkin bentrok */
aside.mmenu{
  width:620px !important;max-width:94vw !important;
  display:flex !important;flex-direction:column !important;
  height:100dvh !important;overflow-y:auto !important;
}
aside.mmenu .mm-head{display:flex !important;align-items:center;justify-content:space-between;
  padding:16px 22px !important;border-bottom:1px solid rgba(255,255,255,.1)}
aside.mmenu .mm-search{display:flex !important;margin:14px 22px 4px !important}
aside.mmenu .mm-grid{
  display:grid !important;grid-template-columns:300px 1fr !important;
  gap:2px 28px !important;padding:2px 22px 16px !important;align-content:start !important;
}
aside.mmenu nav.mm-col{display:block !important}
aside.mmenu .mm-l{display:flex !important;white-space:nowrap !important;
  padding:10px 11px !important;font-size:14.5px !important}
aside.mmenu .mm-about{display:block !important}
aside.mmenu .mm-about a{display:block !important;white-space:nowrap !important;
  padding:9px 11px !important;font-size:13.5px !important}
aside.mmenu .mm-cta2{display:flex !important;flex-direction:column !important;gap:9px !important}
aside.mmenu .mm-cta2 a{white-space:nowrap !important}
aside.mmenu .mm-bottom{margin-top:auto !important}

/* ---------- HP (≤700px): dua kolom padat, muat satu layar ---------- */
@media(max-width:700px){
  aside.mmenu{width:410px !important;max-width:95vw !important}
  aside.mmenu .mm-head{padding:12px 16px !important}
  aside.mmenu .mm-search{margin:8px 16px 2px !important;padding:9px 12px !important;font-size:12.5px !important}
  aside.mmenu .mm-grid{grid-template-columns:1fr !important;gap:0 !important;padding:0 14px 10px !important}
  aside.mmenu nav.mm-col{display:grid !important;grid-template-columns:1fr 1fr !important;gap:2px 10px !important}
  aside.mmenu nav.mm-col .mm-sec2{grid-column:1/-1}
  aside.mmenu .mm-l{padding:8px 8px !important;font-size:12.5px !important}
  aside.mmenu .mm-about{display:grid !important;grid-template-columns:1fr 1fr !important;gap:2px 8px !important}
  aside.mmenu .mm-about a{padding:7px 8px !important;font-size:12px !important}
  aside.mmenu .mm-about a:nth-child(3){grid-column:1/-1}
  aside.mmenu .mm-cta2{flex-direction:row !important;gap:8px !important;margin-top:9px !important}
  aside.mmenu .mm-cta2 a{flex:1;padding:10px 4px !important;font-size:11.5px !important}
}

/* ===== dari homepage-pukatnews.html ===== */
/* ============ v18: warna topbar seragam satu nada ============ */
.topbar .tag{color:#C2CEDD !important;font-weight:500}
.topbar .tag b{color:#C2CEDD !important;font-weight:700}
.topbar nav a{color:#C2CEDD !important}
.topbar nav a:hover,.tb-login:hover{color:#fff !important}
.tb-login{color:#C2CEDD !important}

/* ===== dari homepage-pukatnews.html ===== */
/* ============ v19: netralkan tabrakan kelas .tag (topbar vs hashtag artikel) ============ */
.topbar .tag,
.topbar .tag:hover{
  background:none !important;
  padding:0 !important;
  border-radius:0 !important;
  font-size:12.5px !important;
  font-weight:500 !important;
  font-family:var(--sans) !important;
  color:#C2CEDD !important;
}
.topbar .tag b{font-weight:700 !important;color:#C2CEDD !important}

/* ===== dari homepage-pukatnews.html ===== */
/* ============ v20: IKUTI KAMI di footer (kolom brand) ============ */
.gf-social{margin-top:20px}
.gf-t{display:block;font-size:10px;font-weight:800;letter-spacing:.16em;color:#647B99;margin-bottom:11px}
.gf-row{display:flex;gap:10px;flex-wrap:wrap}
.gf-row a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;color:#C7D4E4;transition:all .15s;flex-shrink:0}
.gf-row a svg{width:17px;height:17px;fill:currentColor}
.gf-row a:hover{border-color:#2B7EC1;color:#fff;background:rgba(43,126,193,.2);transform:translateY(-2px)}
@media(max-width:640px){
  .gf-social{margin-top:16px}
  .gf-row a{width:42px;height:42px}   /* target sentuh lebih lega di HP */
  .gf-row a svg{width:18px;height:18px}
}

/* ===== dari homepage-pukatnews.html ===== */
/* ====== gaya lanjutan ====== */
.row-item{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}
.row-item:first-child{padding-top:0}
.row-thumb{flex:none;width:220px;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:#DDE5EE}
.row-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.row-item:hover .row-thumb img{transform:scale(1.05)}
.row-body{display:flex;flex-direction:column;gap:7px}
.row-body h3{font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.3;color:var(--ink)}
.row-body h3 a:hover{color:var(--blue)}
.row-body p{font-size:14px;color:var(--muted);line-height:1.55}
.row-body .m2{font-size:12px;color:var(--muted);font-weight:500}
@media(max-width:640px){.row-thumb{width:120px;aspect-ratio:1/1}.row-body p{display:none}.row-body h3{font-size:16.5px}}

.pop-list{display:flex;flex-direction:column}
.pop-item{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.pop-num{font-family:var(--serif);font-size:26px;font-weight:700;color:#C6D2E0;line-height:1;flex:none;min-width:24px;transition:color .15s}
.pop-item:hover .pop-num{color:var(--blue-bright)}
.pop-item h4{font-family:var(--serif);font-size:15.5px;font-weight:600;line-height:1.35;color:var(--ink);margin-bottom:4px}
.pop-item:hover h4{color:var(--blue)}
.pop-item .m2{font-size:11.5px;color:var(--muted);font-weight:500}
.ad-slot{border:1.5px dashed #C6D2E0;border-radius:8px;height:250px;display:flex;align-items:center;justify-content:center;color:#9AA9BC;font-size:12px;font-weight:700;letter-spacing:.1em}

.inv-band{background:linear-gradient(135deg,#1C0E14 0%, #35121D 55%, #4A1626 100%)}
.inv-badge{font-size:10px;font-weight:800;letter-spacing:.14em;color:#F0C9D1;border:1px solid rgba(240,201,209,.4);padding:5px 10px;border-radius:99px}
.inv-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:28px}
.inv-feature{position:relative;border-radius:12px;overflow:hidden;min-height:420px;display:flex;align-items:flex-end}
.inv-feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.inv-feature::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,10,16,.05) 25%,rgba(28,10,16,.94) 100%)}
.inv-feature-body{position:relative;z-index:2;padding:30px;color:#fff}
.inv-feature-body h3{font-size:clamp(22px,2.4vw,30px);font-weight:700;line-height:1.2;margin-bottom:10px}
.inv-feature-body h3 a:hover{text-decoration:underline;text-underline-offset:5px}
.inv-feature-body p{color:#DEC4CB;font-size:14.5px;line-height:1.55;margin-bottom:12px;max-width:560px}
.inv-side{display:flex;flex-direction:column;gap:0}
.inv-mini{padding:18px 0;border-bottom:1px solid rgba(240,201,209,.22)}
.inv-mini:first-child{padding-top:4px}
.inv-mini h4{font-size:17.5px;font-weight:600;line-height:1.35;color:#fff;margin-bottom:6px}
.inv-mini h4 a:hover{color:#F0C9D1}
.inv-mini .m2{font-size:12px;color:#C9A3AB;font-weight:500}
.inv-cta{margin-top:auto;padding:16px 18px;background:rgba(255,255,255,.07);border:1px solid rgba(240,201,209,.3);border-radius:10px;color:#F5E2E6;font-size:13.5px;line-height:1.5;transition:background .18s;margin-top:20px}
.inv-cta:hover{background:rgba(255,255,255,.12)}
@media(max-width:900px){.inv-grid{grid-template-columns:1fr}.inv-feature{min-height:340px}}

.tanya-box{background:linear-gradient(165deg,var(--ink) 0%,var(--ink-2) 60%,#173B6B 100%);border-radius:14px;padding:30px 28px;color:#fff;display:flex;flex-direction:column;gap:14px;height:fit-content;position:sticky;top:72px}
.tanya-icon{font-size:34px}
.tanya-box h3{font-size:26px;font-weight:700}
.tanya-box p{font-size:14px;line-height:1.6;color:#C7D4E4}
.tanya-note{font-size:11.5px;color:#8FA5C0;text-align:center}
.tanya-stat{border-top:1px solid rgba(255,255,255,.15);padding-top:14px;font-size:13px;color:#C7D4E4}
.tanya-stat b{color:#fff;font-size:17px;margin-right:6px}

.mini-list{display:flex;flex-direction:column}
.mini{padding:14px 0;border-bottom:1px solid var(--line)}
.mini h4{font-family:var(--serif);font-size:16px;font-weight:600;line-height:1.35;color:var(--ink);margin-bottom:4px}
.mini:hover h4{color:var(--blue)}
.mini .m2{font-size:12px;color:var(--muted);font-weight:500}

.data-band{background:linear-gradient(150deg,var(--ink) 0%,#123761 60%,#17518F 100%)}
.data-badge{font-size:10px;font-weight:800;letter-spacing:.14em;color:#BCD9F2;border:1px solid rgba(188,217,242,.4);padding:5px 10px;border-radius:99px}
.data-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.data-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:24px 22px;transition:all .2s;display:flex;flex-direction:column;gap:8px}
.data-card:hover{background:rgba(255,255,255,.11);transform:translateY(-3px)}
.data-num{font-family:var(--serif);font-size:38px;font-weight:800;color:#fff;letter-spacing:-.01em}
.data-label{font-size:13.5px;line-height:1.5;color:#C7D9EC}
.data-src{font-size:11px;color:#7FA2C6;margin-top:auto;padding-top:8px}
@media(max-width:1000px){.data-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.data-grid{grid-template-columns:1fr}}

.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.tab{font-family:var(--sans);font-size:13.5px;font-weight:700;padding:9px 18px;border-radius:99px;border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;transition:all .15s}
.tab:hover{border-color:var(--blue);color:var(--blue)}
.tab.active{background:var(--ink);border-color:var(--ink);color:#fff}
.pane{display:none}
.pane.show{display:block;animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pane-empty{border:1.5px dashed #C6D2E0;border-radius:10px;padding:48px;text-align:center;color:var(--muted);font-size:14px}

.op-card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--ink);border-radius:10px;padding:26px 24px 22px;display:flex;flex-direction:column;gap:10px;transition:box-shadow .2s,transform .2s;position:relative}
.op-card:hover{box-shadow:0 12px 32px rgba(12,35,64,.1);transform:translateY(-3px)}
.op-quote{font-family:var(--serif);font-size:52px;line-height:.6;color:#D7E2EE;font-weight:800}
.op-card h3{font-size:20px;font-weight:700;line-height:1.3;color:var(--ink)}
.op-card h3 a:hover{color:var(--blue)}
.op-card p{font-size:14px;color:var(--muted);line-height:1.6;font-style:italic}
.op-author{display:flex;align-items:center;gap:12px;margin-top:8px;padding-top:14px;border-top:1px solid var(--line)}
.op-ava{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--blue-bright),var(--blue));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:none}
.op-author b{display:block;font-size:13.5px;color:var(--ink)}
.op-author span{font-size:12px;color:var(--muted)}

.cta-band{background:var(--ink);padding:56px 0}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cta-box{background:linear-gradient(160deg,#14345C,#1A497F);border-radius:14px;padding:34px 32px;color:#fff;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.cta-box h3{font-size:25px;font-weight:700}
.cta-box p{font-size:14.5px;line-height:1.6;color:#C7D4E4;max-width:440px}
.cta-maroon{background:linear-gradient(160deg,#4A1626,#7A1E33)}
.cta-maroon p{color:#EBD0D6}
@media(max-width:820px){.cta-grid{grid-template-columns:1fr}}

.news-band{background:var(--mist);border-top:1px solid var(--line);padding:44px 0}
.news-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.news-inner h3{font-size:26px;font-weight:700;color:var(--ink);margin-bottom:6px}
.news-inner p{font-size:14px;color:var(--muted);max-width:480px}
.news-form{display:flex;gap:10px;flex:1;max-width:460px;min-width:280px}
.news-form input{flex:1;border:1px solid #C6D2E0;border-radius:6px;padding:12px 16px;font-family:var(--sans);font-size:14px;outline:none;transition:border .15s}
.news-form input:focus{border-color:var(--blue-bright)}

.foot{background:var(--ink);color:#C7D4E4;padding:56px 0 0}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px}
.foot p{font-size:13.5px;line-height:1.65;color:#9FB1C7}
.foot h4{color:#fff;font-size:13px;font-weight:800;letter-spacing:.1em;margin-bottom:16px;text-transform:uppercase}
.foot-grid a{display:block;font-size:13.5px;padding:5px 0;color:#9FB1C7;transition:color .15s}
.foot-grid a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding:20px 0 24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:#7F93AC}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:960px){.two-col{grid-template-columns:1fr !important}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--blue-bright);outline-offset:2px}

/* ===================================================== */
/* ====== PENYEMPURNAAN RESPONSIF & KENYAMANAN BACA ==== */
/* ===================================================== */

/* Judul memakai Lora yang lebih tegap — sedikit penyesuaian bobot */
.hero-title{font-weight:600;letter-spacing:-.015em}
.card h3,.row-body h3,.pop-item h4,.mini h4,.inv-mini h4,.hero-item h3{font-weight:600}

/* --------- TABLET (768px – 1024px) --------- */
@media (min-width:768px) and (max-width:1024px){
  .wrap{padding:0 28px}
  .hero-grid{grid-template-columns:1fr}
  .hero{background:var(--ink)}
  .hero-main{min-height:420px}
  .hero-side{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;padding-bottom:28px}
  .hero-side-head{grid-column:1/-1}
  .two-col{grid-template-columns:1fr !important}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .data-grid{grid-template-columns:repeat(2,1fr)}
  .inv-grid{grid-template-columns:1fr}
  .inv-feature{min-height:380px}
  .tanya-box{position:static}
  .cta-grid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr}
  .row-thumb{width:200px}
}

/* --------- MOBILE (≤ 640px) --------- */
@media (max-width:640px){
  .wrap{padding:0 18px}
  section.band{padding:38px 0}
  /* teks lebih besar & lega untuk kenyamanan baca di HP */
  .hero-title{font-size:24px;line-height:1.22}
  .hero-lede{font-size:14.5px}
  .hero-body{padding:22px 20px}
  .hero-main{min-height:340px;border-radius:8px}
  .hero-item h3{font-size:16px}
  .sec-title h2{font-size:22px}
  .sec-head{margin-bottom:18px}
  .row-item{gap:14px;padding:16px 0}
  .card h3{font-size:16.5px}
  .card .body{padding:14px 15px 16px}
  .pop-item h4{font-size:15px}
  .inv-feature-body{padding:20px 18px}
  .inv-feature-body h3{font-size:21px}
  .inv-mini h4{font-size:16px}
  .data-num{font-size:32px}
  .tanya-box{position:static;padding:24px 20px}
  .cta-box{padding:26px 22px}
  .cta-box h3{font-size:21px}
  .news-inner h3{font-size:22px}
  .news-form{flex-direction:column}
  .news-form .btn{width:100%;justify-content:center}
  .foot{padding-top:40px}
  .foot-grid{grid-template-columns:1fr;gap:26px;padding-bottom:32px}
  .foot-bottom{flex-direction:column;gap:8px}
  /* target sentuh lebih besar */
  .btn{padding:13px 20px;font-size:14.5px}
  .tab{padding:10px 18px;font-size:14px}
  .mainnav a{padding:15px 14px;font-size:14.5px}
  .topbar .tag{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .head-cta .btn-primary{padding:10px 14px;font-size:13px}
  .ticker .wrap{gap:10px}
  .ticker-label{font-size:10.5px}
}

/* --------- MOBILE KECIL (≤ 400px) --------- */
@media (max-width:400px){
  .brand-name{font-size:22px;letter-spacing:.1em}
  .brand-sub{letter-spacing:.2em;font-size:9px}
  .brand-mark{width:36px;height:36px}
  .hero-title{font-size:22px}
  .row-thumb{width:104px}
}

/* --------- DESKTOP LEBAR (≥ 1440px) --------- */
@media (min-width:1440px){
  :root{--maxw:1280px}
  .hero-title{font-size:44px}
}

/* pratinjau gambar saat gagal dimuat tetap rapi */
img{background:#DDE5EE}


/* ================= MENU MOBILE ================= */
.burger{display:none;background:none;border:1px solid rgba(255,255,255,.25);border-radius:8px;width:40px;height:40px;color:#fff;font-size:17px;cursor:pointer;flex:none;align-items:center;justify-content:center}
.burger:hover{border-color:#fff;background:rgba(255,255,255,.08)}
@media(max-width:860px){.burger{display:flex}}
.mscrim{position:fixed;inset:0;background:rgba(12,35,64,.5);opacity:0;pointer-events:none;transition:opacity .22s;z-index:290}
.mscrim.on{opacity:1;pointer-events:auto}
.mmenu{position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);background:linear-gradient(180deg,#0C2340,#122E52);z-index:300;transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow-y:auto;box-shadow:-20px 0 60px rgba(12,35,64,.4)}
.mmenu.open{transform:translateX(0)}
.mm-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.1)}
.mm-head .t{font-size:11px;font-weight:800;letter-spacing:.14em;color:#8FA5C0}
.mm-close{background:none;border:0;color:#C7D4E4;font-size:24px;cursor:pointer;line-height:1;padding:2px 6px}
.mm-close:hover{color:#fff}
.mm-search{margin:16px 20px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:11px 14px;color:#8FA5C0;font-size:13.5px}
.mmenu nav{padding:4px 0 8px}
.mmenu nav a{display:flex;align-items:center;gap:12px;padding:13px 20px;color:#C7D4E4;font-size:15px;font-weight:600;border-left:3px solid transparent;transition:all .15s}
.mmenu nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.mmenu nav a.on{color:#fff;background:rgba(43,126,193,.2);border-left-color:#2B7EC1}
.mmenu nav a .d{width:8px;height:8px;border-radius:2px;flex:none}
.mm-sec{padding:16px 20px 6px;font-size:10px;font-weight:800;letter-spacing:.14em;color:#647B99;border-top:1px solid rgba(255,255,255,.08);margin-top:6px}
.mm-cta{padding:16px 20px 20px;display:flex;flex-direction:column;gap:10px;margin-top:auto;border-top:1px solid rgba(255,255,255,.1)}
.mm-cta a{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:700;padding:13px;border-radius:9px;transition:all .15s}
.mm-cta .k{background:#2B7EC1;color:#fff}
.mm-cta .k:hover{background:#3B8FD3}
.mm-cta .l{border:1px solid rgba(255,255,255,.25);color:#C7D4E4}
.mm-cta .l:hover{border-color:#fff;color:#fff}
.mm-foot{padding:0 20px 22px;font-size:11.5px;color:#7F93AC;line-height:1.6}

/* ===== dari artikel-standar-pukatnews.html ===== */
:root{
  --ink:#0C2340;--ink-2:#122E52;--blue:#1A5A9E;--blue-bright:#2B7EC1;
  --paper:#fff;--mist:#F4F6F9;--line:#E3E8EF;--text:#1C2A3A;--muted:#5C6B7E;
  --maroon:#8E1B2F;--teal:#0E7C7B;--amber:#B07C10;--live:#D64545;
  --serif:'Lora',Georgia,serif;--sans:'Plus Jakarta Sans',-apple-system,sans-serif;
  --maxw:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;background:#DDE5EE}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.serif{font-family:var(--serif)}

/* progress bar baca */
.progress{position:fixed;top:0;left:0;height:3px;background:var(--blue-bright);width:0;z-index:200;transition:width .08s linear}

/* header ringkas */
.hdr{background:var(--ink);position:sticky;top:0;z-index:100;box-shadow:0 2px 18px rgba(12,35,64,.28)}
.hdr .wrap{display:flex;align-items:center;gap:20px;height:60px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand-mark{width:34px;height:34px}
.brand-name{font-weight:800;font-size:21px;letter-spacing:.12em;color:#fff;line-height:1}
.brand-name span{color:var(--blue-bright)}
.hnav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1}
.hnav::-webkit-scrollbar{display:none}
.hnav a{color:#C7D4E4;font-size:13.5px;font-weight:600;padding:8px 12px;border-radius:6px;white-space:nowrap;transition:all .15s}
.hnav a:hover{color:#fff;background:rgba(255,255,255,.07)}
.hdr .btn-kh{flex:none;background:var(--blue-bright);color:#fff;font-weight:700;font-size:13px;padding:9px 16px;border-radius:6px;transition:background .15s}
.hdr .btn-kh:hover{background:#3B8FD3}
@media(max-width:860px){.hnav{display:none}}

/* breadcrumb */
.crumb{padding:18px 0 0;font-size:12.5px;color:var(--muted);font-weight:500}
.crumb a:hover{color:var(--blue)}
.crumb b{color:var(--blue);font-weight:700}

/* ====== LAYOUT ARTIKEL ====== */
.article-zone{display:grid;grid-template-columns:64px minmax(0,720px) 1fr;gap:40px;padding:22px 0 30px}
@media(max-width:1080px){.article-zone{grid-template-columns:minmax(0,720px) 1fr;gap:36px}.share-rail{display:none}}
@media(max-width:900px){.article-zone{grid-template-columns:1fr}.sidebar{max-width:720px}}

/* rail share kiri */
.share-rail{position:sticky;top:76px;height:fit-content;display:flex;flex-direction:column;gap:10px;align-items:center}
.share-rail .lbl{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--muted)}
.sbtn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;cursor:pointer;transition:all .15s;color:var(--ink)}
.sbtn:hover{border-color:var(--blue-bright);color:var(--blue-bright);transform:translateY(-2px)}
.sbtn.wa:hover{border-color:#25D366;color:#25D366}

/* artikel */
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.12em;padding:6px 12px;border-radius:4px;color:#fff;background:var(--blue);margin-bottom:16px}
h1.title{font-family:var(--serif);font-size:clamp(28px,4vw,40px);font-weight:600;line-height:1.2;letter-spacing:-.015em;color:var(--ink);margin-bottom:14px}
.lede{font-size:18.5px;line-height:1.6;color:var(--muted);margin-bottom:22px;font-weight:500}
.byline{display:flex;align-items:center;gap:14px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:24px;flex-wrap:wrap}
.ava{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--blue-bright),var(--blue));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex:none}
.byline .who b{display:block;font-size:14.5px;color:var(--ink)}
.byline .who b a:hover{color:var(--blue)}
.byline .who span{font-size:12.5px;color:var(--muted)}
.byline .when{margin-left:auto;text-align:right;font-size:12.5px;color:var(--muted);line-height:1.5}
.byline .when b{color:var(--ink);font-weight:700}
@media(max-width:560px){.byline .when{margin-left:0;text-align:left;width:100%}}

figure.lead-img{margin:0 0 8px;border-radius:10px;overflow:hidden}
figure.lead-img img{width:100%;aspect-ratio:16/9;object-fit:cover}
figcaption{font-size:12.5px;color:var(--muted);padding:10px 2px 0;line-height:1.5;margin-bottom:26px}
figcaption b{color:var(--text);font-weight:700}

/* body teks — kenyamanan baca maksimal */
.prose{font-family:var(--serif);font-size:18.5px;line-height:1.78;color:#22303F}
.prose p{margin-bottom:26px}
.prose p:first-of-type::first-letter{font-size:64px;font-weight:700;float:left;line-height:.82;padding:6px 12px 0 0;color:var(--blue)}
.prose h2{font-family:var(--sans);font-size:22px;font-weight:800;color:var(--ink);margin:38px 0 16px;display:flex;align-items:center;gap:12px}
.prose h2::before{content:'';width:22px;height:22px;background:var(--blue);flex:none;
  -webkit-mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><rect x="1.5" y="1.5" width="23" height="23" fill="none" stroke="black" stroke-width="2"/><path d="M1.5 9.5h10v15M11.5 9.5 24.5 1.5" fill="none" stroke="black" stroke-width="1.5"/><circle cx="11.5" cy="9.5" r="2.4"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><rect x="1.5" y="1.5" width="23" height="23" fill="none" stroke="black" stroke-width="2"/><path d="M1.5 9.5h10v15M11.5 9.5 24.5 1.5" fill="none" stroke="black" stroke-width="1.5"/><circle cx="11.5" cy="9.5" r="2.4"/></svg>') center/contain no-repeat}
.pull{border-left:4px solid var(--blue-bright);background:var(--mist);border-radius:0 10px 10px 0;padding:24px 28px;margin:34px 0;font-family:var(--serif);font-size:21px;font-style:italic;line-height:1.55;color:var(--ink)}
.pull cite{display:block;font-family:var(--sans);font-style:normal;font-size:13px;font-weight:700;color:var(--muted);margin-top:12px}

.baca-juga{border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:0 10px 10px 0;padding:16px 20px;margin:32px 0;font-family:var(--sans)}
.baca-juga .t{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--blue);margin-bottom:8px}
.baca-juga a{font-family:var(--serif);font-size:17px;font-weight:600;line-height:1.4;color:var(--ink)}
.baca-juga a:hover{color:var(--blue)}

.infobox{background:linear-gradient(160deg,#F0F6FC,#E7F0F9);border:1px solid #CBDEF0;border-radius:12px;padding:22px 24px;margin:32px 0;font-family:var(--sans)}
.infobox .t{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--blue);margin-bottom:12px;letter-spacing:.04em}
.infobox ul{list-style:none}
.infobox li{font-size:14.5px;line-height:1.6;padding:7px 0 7px 26px;position:relative;color:var(--text)}
.infobox li::before{content:'✓';position:absolute;left:0;top:7px;width:18px;height:18px;background:var(--blue-bright);color:#fff;border-radius:50%;font-size:11px;display:flex;align-items:center;justify-content:center;font-weight:800}

.ad-inline{border:1.5px dashed #C6D2E0;border-radius:8px;height:110px;display:flex;align-items:center;justify-content:center;color:#9AA9BC;font-size:11.5px;font-weight:700;letter-spacing:.1em;margin:32px 0;font-family:var(--sans)}

.disclaim{background:var(--mist);border-radius:10px;padding:16px 20px;font-family:var(--sans);font-size:13px;line-height:1.6;color:var(--muted);margin:32px 0}
.disclaim b{color:var(--ink)}
.disclaim a{color:var(--blue);font-weight:700}

/* tags + author + hak jawab */
.tags{display:flex;gap:8px;flex-wrap:wrap;margin:30px 0}
.tag{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--blue);background:#EAF2FA;padding:7px 14px;border-radius:99px;transition:all .15s}
.tag:hover{background:var(--blue);color:#fff}
.authorbox{display:flex;gap:18px;border:1px solid var(--line);border-radius:12px;padding:22px;margin:10px 0 30px;font-family:var(--sans);align-items:flex-start}
.authorbox .ava{width:60px;height:60px;font-size:18px}
.authorbox b{font-size:16px;color:var(--ink);display:block;margin-bottom:4px}
.authorbox p{font-size:13.5px;line-height:1.6;color:var(--muted)}
.authorbox a.more{font-size:12.5px;font-weight:700;color:var(--blue);display:inline-block;margin-top:8px}
.hj{font-family:var(--sans);font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px}
.hj a{color:var(--blue);font-weight:700}

/* sidebar */
.sidebar{display:flex;flex-direction:column;gap:32px}
.side-block{border:1px solid var(--line);border-radius:12px;padding:20px}
.side-block .sh{font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--ink);padding-bottom:12px;border-bottom:2px solid var(--ink);margin-bottom:6px}
.pop-item{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.pop-item:last-child{border-bottom:0;padding-bottom:2px}
.pop-num{font-family:var(--serif);font-size:23px;font-weight:700;color:#C6D2E0;line-height:1;min-width:20px;transition:color .15s}
.pop-item:hover .pop-num{color:var(--blue-bright)}
.pop-item h4{font-family:var(--serif);font-size:14.5px;font-weight:600;line-height:1.4;color:var(--ink)}
.pop-item:hover h4{color:var(--blue)}
.ad-side{border:1.5px dashed #C6D2E0;border-radius:8px;height:250px;display:flex;align-items:center;justify-content:center;color:#9AA9BC;font-size:11.5px;font-weight:700;letter-spacing:.1em}
.side-cta{background:linear-gradient(165deg,var(--ink),#173B6B);border-radius:12px;padding:24px;color:#fff}
.side-cta h4{font-family:var(--serif);font-size:20px;margin-bottom:8px}
.side-cta p{font-size:13px;color:#C7D4E4;line-height:1.55;margin-bottom:14px}
.side-cta a{display:block;text-align:center;background:var(--blue-bright);color:#fff;font-weight:700;font-size:13.5px;padding:11px;border-radius:6px;transition:background .15s}
.side-cta a:hover{background:#3B8FD3}
.sticky-side{position:sticky;top:76px}

/* terkait */
.related{background:var(--mist);padding:48px 0 56px;border-top:1px solid var(--line)}
.related h2{font-family:var(--serif);font-size:25px;color:var(--ink);margin-bottom:22px;display:flex;align-items:center;gap:12px}
.rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1000px){.rel-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.rel-grid{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:box-shadow .2s,transform .2s}
.card:hover{box-shadow:0 12px 30px rgba(12,35,64,.1);transform:translateY(-3px)}
.card .thumb{aspect-ratio:16/10;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .thumb img{transform:scale(1.05)}
.card .body{padding:14px 16px 16px}
.chip{font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--blue);display:block;margin-bottom:7px}
.card h3{font-family:var(--serif);font-size:15.5px;font-weight:600;line-height:1.4;color:var(--ink)}
.card h3 a:hover{color:var(--blue)}

/* share bawah (mobile) */
.share-bottom{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);display:none;z-index:150;box-shadow:0 -6px 24px rgba(12,35,64,.08)}
.share-bottom .in{display:flex;gap:10px;padding:10px 16px;justify-content:center}
.share-bottom .sbtn{width:42px;height:42px}
@media(max-width:1080px){.share-bottom{display:block}body{padding-bottom:64px}}

/* footer ringkas */
.foot{background:var(--ink);color:#9FB1C7;padding:30px 0;font-size:12.5px}
.foot .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.foot a{color:#C7D4E4;font-weight:600}
.foot a:hover{color:#fff}

@media(max-width:640px){
  .wrap{padding:0 18px}
  .prose{font-size:17.5px;line-height:1.75}
  .lede{font-size:16.5px}
  .pull{font-size:18px;padding:20px 22px}
  h1.title{font-size:26px}
}
@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important}}
a:focus-visible,button:focus-visible{outline:3px solid var(--blue-bright);outline-offset:2px}

/* === PERBAIKAN: rail share hanya di desktop lebar === */
@media (max-width:1080px){
  .article-zone .share-rail{display:none !important}
  .share-bottom{display:block}
  body{padding-bottom:66px}
}
@media (min-width:1081px){
  .share-bottom{display:none}
  body{padding-bottom:0}
}

/* ================= MENU MOBILE ================= */
.burger{display:none;background:none;border:1px solid rgba(255,255,255,.25);border-radius:8px;width:40px;height:40px;color:#fff;font-size:17px;cursor:pointer;flex:none;align-items:center;justify-content:center}
.burger:hover{border-color:#fff;background:rgba(255,255,255,.08)}
@media(max-width:860px){.burger{display:flex}}
.mscrim{position:fixed;inset:0;background:rgba(12,35,64,.5);opacity:0;pointer-events:none;transition:opacity .22s;z-index:290}
.mscrim.on{opacity:1;pointer-events:auto}
.mmenu{position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);background:linear-gradient(180deg,#0C2340,#122E52);z-index:300;transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow-y:auto;box-shadow:-20px 0 60px rgba(12,35,64,.4)}
.mmenu.open{transform:translateX(0)}
.mm-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.1)}
.mm-head .t{font-size:11px;font-weight:800;letter-spacing:.14em;color:#8FA5C0}
.mm-close{background:none;border:0;color:#C7D4E4;font-size:24px;cursor:pointer;line-height:1;padding:2px 6px}
.mm-close:hover{color:#fff}
.mm-search{margin:16px 20px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:11px 14px;color:#8FA5C0;font-size:13.5px}
.mmenu nav{padding:4px 0 8px}
.mmenu nav a{display:flex;align-items:center;gap:12px;padding:13px 20px;color:#C7D4E4;font-size:15px;font-weight:600;border-left:3px solid transparent;transition:all .15s}
.mmenu nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.mmenu nav a.on{color:#fff;background:rgba(43,126,193,.2);border-left-color:#2B7EC1}
.mmenu nav a .d{width:8px;height:8px;border-radius:2px;flex:none}
.mm-sec{padding:16px 20px 6px;font-size:10px;font-weight:800;letter-spacing:.14em;color:#647B99;border-top:1px solid rgba(255,255,255,.08);margin-top:6px}
.mm-cta{padding:16px 20px 20px;display:flex;flex-direction:column;gap:10px;margin-top:auto;border-top:1px solid rgba(255,255,255,.1)}
.mm-cta a{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:700;padding:13px;border-radius:9px;transition:all .15s}
.mm-cta .k{background:#2B7EC1;color:#fff}
.mm-cta .k:hover{background:#3B8FD3}
.mm-cta .l{border:1px solid rgba(255,255,255,.25);color:#C7D4E4}
.mm-cta .l:hover{border-color:#fff;color:#fff}
.mm-foot{padding:0 20px 22px;font-size:11.5px;color:#7F93AC;line-height:1.6}

/* ================= IKON SHARE SVG ================= */
.sbtn svg{width:19px;height:19px;fill:currentColor}
.sbtn{color:#5C6B7E}
.sbtn.wa:hover{border-color:#25D366;color:#25D366;background:#F2FCF6}
.sbtn.tw:hover{border-color:#0F1419;color:#0F1419;background:#F5F6F7}
.sbtn.fb:hover{border-color:#1877F2;color:#1877F2;background:#F1F6FE}
.sbtn.tg:hover{border-color:#229ED9;color:#229ED9;background:#F1F9FD}
.sbtn.cp:hover{border-color:#1A5A9E;color:#1A5A9E;background:#F2F7FC}

/* ===== dari artikel-standar-pukatnews.html ===== */
/* ============ v21: tombol BAGIKAN kanonik 7 saluran ============ */
.share-rail .lbl{font-size:10px;font-weight:800;letter-spacing:.12em;color:#5C6B7E;text-align:center;font-family:'Plus Jakarta Sans',sans-serif}
.sbtn svg{width:18px;height:18px;fill:currentColor}
.sbtn{color:#5C6B7E}
.sbtn.wa:hover{border-color:#25D366;color:#25D366;background:#F2FCF6}
.sbtn.fb:hover{border-color:#1877F2;color:#1877F2;background:#F1F6FE}
.sbtn.tw:hover{border-color:#0F1419;color:#0F1419;background:#F5F6F7}
.sbtn.tg:hover{border-color:#229ED9;color:#229ED9;background:#F1F9FD}
.sbtn.li:hover{border-color:#0A66C2;color:#0A66C2;background:#F0F6FC}
.sbtn.em:hover{border-color:#8E1B2F;color:#8E1B2F;background:#FBF3F5}
.sbtn.cp:hover{border-color:#1A5A9E;color:#1A5A9E;background:#F2F7FC}
/* bar bawah mobile: 7 tombol tetap muat di layar sempit */
.share-bottom .in{gap:8px;padding:9px 10px}
.share-bottom .sbtn{width:40px;height:40px}
@media(max-width:380px){
  .share-bottom .in{gap:5px}
  .share-bottom .sbtn{width:37px;height:37px}
  .share-bottom .sbtn svg{width:16px;height:16px}
}

/* ===== dari artikel-longform-pukatnews.html ===== */
:root{
  --ink:#0C2340;--blue:#1A5A9E;--blue-bright:#2B7EC1;
  --paper:#fff;--mist:#F4F6F9;--line:#E3E8EF;--text:#1C2A3A;--muted:#5C6B7E;
  --maroon:#8E1B2F;--maroon-d:#4A1626;--rose:#F0C9D1;
  --serif:'Lora',Georgia,serif;--sans:'Plus Jakarta Sans',-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;background:#2A1219}
a{color:inherit;text-decoration:none}
.serif{font-family:var(--serif)}

.progress{position:fixed;top:0;left:0;height:3px;background:var(--maroon);width:0;z-index:200}

/* header transparan → solid saat scroll */
.hdr{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .25s,box-shadow .25s;background:linear-gradient(180deg,rgba(10,5,8,.55),transparent)}
.hdr.solid{background:var(--maroon-d);box-shadow:0 2px 18px rgba(28,10,16,.4)}
.hdr .in{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:32px;height:32px}
.brand-name{font-weight:800;font-size:20px;letter-spacing:.12em;color:#fff}
.brand-name span{color:#7FBCEE}
.hdr .lbl-inv{font-size:10.5px;font-weight:800;letter-spacing:.16em;color:var(--rose);border:1px solid rgba(240,201,209,.5);padding:6px 12px;border-radius:99px}

/* ===== HERO IMERSIF ===== */
.hero{position:relative;min-height:86vh;display:flex;align-items:flex-end;background:#1C0E14;overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,10,16,.35) 0%,rgba(28,10,16,.15) 35%,rgba(28,10,16,.96) 100%)}
.hero .in{position:relative;z-index:2;max-width:900px;margin:0 auto;padding:0 24px 9vh;color:#fff;text-align:center;width:100%}
.serial{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;font-weight:800;letter-spacing:.18em;color:var(--rose);margin-bottom:20px}
.serial::before,.serial::after{content:'';width:44px;height:1px;background:rgba(240,201,209,.6)}
.hero h1{font-family:var(--serif);font-size:clamp(32px,5.4vw,58px);font-weight:600;line-height:1.14;letter-spacing:-.015em;margin-bottom:22px;text-shadow:0 2px 24px rgba(0,0,0,.4)}
.hero .lede{font-size:clamp(15px,1.6vw,19px);line-height:1.65;color:#E8D3D8;max-width:680px;margin:0 auto 28px}
.hero .meta{font-size:13px;color:#C9A3AB;font-weight:600;letter-spacing:.04em}
.hero .meta b{color:#fff}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;color:#E8D3D8;font-size:11px;font-weight:700;letter-spacing:.2em;display:flex;flex-direction:column;align-items:center;gap:8px;animation:bob 2.2s ease-in-out infinite}
.scroll-cue::after{content:'';width:1px;height:34px;background:linear-gradient(180deg,#E8D3D8,transparent)}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ===== BODY LONGFORM ===== */
.long{max-width:720px;margin:0 auto;padding:64px 24px 40px}
.prose{font-family:var(--serif);font-size:19px;line-height:1.85;color:#22303F}
.prose p{margin-bottom:28px}
.opener::first-letter{font-size:88px;font-weight:700;float:left;line-height:.78;padding:8px 14px 0 0;color:var(--maroon)}

/* pemisah bab dengan motif persil */
.bab{display:flex;align-items:center;gap:18px;margin:56px 0 30px}
.bab .no{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--maroon);letter-spacing:.1em;white-space:nowrap}
.bab .ln{flex:1;height:1px;background:var(--line)}
.bab .parcel{width:22px;height:22px;color:var(--maroon);flex:none}
.bab h2{font-family:var(--sans);font-size:24px;font-weight:800;color:var(--ink);white-space:normal}
.bab-title{font-family:var(--sans);font-size:26px;font-weight:800;color:var(--ink);margin:-16px 0 24px;line-height:1.3}

.pull-big{margin:48px auto;max-width:760px;text-align:center;padding:0 8px}
.pull-big .q{font-family:var(--serif);font-size:clamp(22px,2.6vw,30px);font-style:italic;font-weight:500;line-height:1.5;color:var(--maroon-d)}
.pull-big .q::before{content:'“';color:var(--maroon);font-size:1.4em}
.pull-big cite{display:block;font-family:var(--sans);font-style:normal;font-size:13px;font-weight:700;color:var(--muted);margin-top:16px;letter-spacing:.04em}

/* gambar lebar penuh dengan caption */
.wide-fig{margin:52px 0;width:100%}
.wide-fig .im{max-width:1100px;margin:0 auto;padding:0}
.wide-fig img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:12px}
.wide-fig figcaption{max-width:1100px;margin:0 auto;padding:12px 26px 0;font-size:12.5px;color:var(--muted);line-height:1.5}
.wide-fig figcaption b{color:var(--text)}

/* kotak temuan */
.temuan{background:linear-gradient(160deg,#FBF2F4,#F7E7EB);border:1px solid #E8C7CE;border-radius:14px;padding:28px;margin:44px 0;font-family:var(--sans)}
.temuan .t{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--maroon);margin-bottom:16px}
.temuan ol{list-style:none;counter-reset:tm}
.temuan li{counter-increment:tm;position:relative;padding:10px 0 10px 44px;font-size:15px;line-height:1.6;border-bottom:1px solid #EDD4DA}
.temuan li:last-child{border-bottom:0}
.temuan li::before{content:counter(tm,decimal-leading-zero);position:absolute;left:0;top:10px;font-family:var(--serif);font-weight:700;font-size:17px;color:var(--maroon)}

/* metodologi */
.metode{border:1px solid var(--line);border-radius:12px;padding:22px 24px;margin:44px 0;font-family:var(--sans);background:var(--mist)}
.metode .t{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--ink);margin-bottom:10px}
.metode p{font-size:13.5px;line-height:1.65;color:var(--muted)}

/* navigasi serial */
.serial-nav{max-width:900px;margin:56px auto 0;padding:0 24px}
.serial-nav .t{font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--maroon);margin-bottom:16px}
.sn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:820px){.sn-grid{grid-template-columns:repeat(2,1fr)}}
.sn{border:1px solid var(--line);border-radius:10px;padding:16px;transition:all .2s;position:relative;overflow:hidden}
.sn:hover{border-color:var(--maroon);transform:translateY(-2px);box-shadow:0 8px 22px rgba(142,27,47,.12)}
.sn.now{background:var(--maroon-d);border-color:var(--maroon-d);color:#fff}
.sn .p{font-family:var(--serif);font-size:12px;font-weight:700;color:var(--maroon);margin-bottom:6px}
.sn.now .p{color:var(--rose)}
.sn h4{font-family:var(--serif);font-size:14px;font-weight:600;line-height:1.4}
.sn .soon{position:absolute;top:10px;right:10px;font-size:9px;font-weight:800;letter-spacing:.08em;background:var(--mist);color:var(--muted);padding:3px 8px;border-radius:99px}

/* penutup: tim, tags, cta lapor */
.credits{max-width:720px;margin:52px auto 0;padding:0 24px;font-family:var(--sans)}
.credits .box{border-top:2px solid var(--ink);padding-top:22px;font-size:14px;line-height:1.8;color:var(--muted)}
.credits b{color:var(--ink)}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0}
.tag{font-size:12.5px;font-weight:700;color:var(--maroon);background:#F7E9EC;padding:7px 14px;border-radius:99px;transition:all .15s}
.tag:hover{background:var(--maroon);color:#fff}
.lapor{background:linear-gradient(160deg,var(--maroon-d),#7A1E33);border-radius:16px;padding:34px 32px;color:#fff;margin:40px 0;text-align:center}
.lapor h3{font-family:var(--serif);font-size:26px;margin-bottom:10px}
.lapor p{font-size:14.5px;color:#EBD0D6;line-height:1.6;max-width:520px;margin:0 auto 20px}
.lapor a{display:inline-block;background:#fff;color:var(--maroon);font-weight:800;font-size:14px;padding:13px 28px;border-radius:8px;transition:transform .15s}
.lapor a:hover{transform:translateY(-2px)}

/* share rail */
.share-rail{position:fixed;left:max(16px,calc(50% - 620px));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:90}
.sbtn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;transition:all .15s;box-shadow:0 4px 14px rgba(12,35,64,.08)}
.sbtn:hover{border-color:var(--maroon);color:var(--maroon);transform:translateY(-2px)}
@media(max-width:1330px){.share-rail{display:none}}
.share-bottom{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);display:none;z-index:150;box-shadow:0 -6px 24px rgba(12,35,64,.08)}
.share-bottom .in{display:flex;gap:10px;padding:10px 16px;justify-content:center}
@media(max-width:1330px){.share-bottom{display:block}body{padding-bottom:64px}}

.foot{background:var(--ink);color:#9FB1C7;padding:28px 0;font-size:12.5px;margin-top:64px}
.foot .in{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.foot a{color:#C7D4E4;font-weight:600}
.foot a:hover{color:#fff}

@media(max-width:640px){
  .long{padding:44px 18px 30px}
  .prose{font-size:17.5px;line-height:1.8}
  .opener::first-letter{font-size:68px}
  .hero{min-height:88vh}
  .wide-fig img{aspect-ratio:16/10;border-radius:0}
  .wide-fig .im{padding:0}
  .wide-fig figcaption{padding:12px 18px 0}
  .lapor{padding:26px 20px}
  .credits,.serial-nav{padding:0 18px}
}
@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important}}
a:focus-visible,button:focus-visible{outline:3px solid var(--maroon);outline-offset:2px}

/* === PENGAMAN: rail vs bar share tidak pernah tampil bersamaan === */
@media (max-width:1330px){
  .share-rail{display:none !important}
  .share-bottom{display:block}
  body{padding-bottom:66px}
}
@media (min-width:1331px){
  .share-bottom{display:none !important}
  body{padding-bottom:0}
}

/* ================= IKON SHARE SVG ================= */
.sbtn svg{width:19px;height:19px;fill:currentColor}
.sbtn{color:#5C6B7E}
.sbtn.wa:hover{border-color:#25D366;color:#25D366;background:#F2FCF6}
.sbtn.tw:hover{border-color:#0F1419;color:#0F1419;background:#F5F6F7}
.sbtn.fb:hover{border-color:#1877F2;color:#1877F2;background:#F1F6FE}
.sbtn.tg:hover{border-color:#229ED9;color:#229ED9;background:#F1F9FD}
.sbtn.cp:hover{border-color:#1A5A9E;color:#1A5A9E;background:#F2F7FC}

/* ===== dari rubrik-pukatnews.html ===== */
:root{
  --ink:#0C2340;--ink-2:#122E52;--blue:#1A5A9E;--blue-bright:#2B7EC1;
  --paper:#fff;--mist:#F4F6F9;--line:#E3E8EF;--text:#1C2A3A;--muted:#5C6B7E;
  --serif:'Lora',Georgia,serif;--sans:'Plus Jakarta Sans',-apple-system,sans-serif;--maxw:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;background:#DDE5EE}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.serif{font-family:var(--serif)}

.hdr{background:var(--ink);position:sticky;top:0;z-index:100;box-shadow:0 2px 18px rgba(12,35,64,.28)}
.hdr .wrap{display:flex;align-items:center;gap:20px;height:60px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand-mark{width:34px;height:34px}
.brand-name{font-weight:800;font-size:21px;letter-spacing:.12em;color:#fff;line-height:1}
.brand-name span{color:var(--blue-bright)}
.hnav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1}
.hnav::-webkit-scrollbar{display:none}
.hnav a{color:#C7D4E4;font-size:13.5px;font-weight:600;padding:8px 12px;border-radius:6px;white-space:nowrap;transition:all .15s}
.hnav a:hover{color:#fff;background:rgba(255,255,255,.07)}
.hnav a.active{color:#fff;background:rgba(43,126,193,.28)}
.hdr .btn-kh{flex:none;background:var(--blue-bright);color:#fff;font-weight:700;font-size:13px;padding:9px 16px;border-radius:6px}
.hdr .btn-kh:hover{background:#3B8FD3}
@media(max-width:860px){.hnav{display:none}}

/* masthead rubrik */
.rubrik-head{background:linear-gradient(150deg,var(--ink) 0%,var(--ink-2) 55%,#173B6B 100%);color:#fff;padding:44px 0 40px;position:relative;overflow:hidden}
.rubrik-head::before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px}
.rubrik-head .wrap{position:relative}
.crumb{font-size:12.5px;color:#8FA5C0;font-weight:500;margin-bottom:16px}
.crumb a:hover{color:#fff}
.rubrik-title{display:flex;align-items:center;gap:16px;margin-bottom:12px;flex-wrap:wrap}
.rubrik-title .parcel{width:34px;height:34px;color:#6FB1E8;flex:none}
.rubrik-title h1{font-family:var(--serif);font-size:clamp(30px,4vw,42px);font-weight:600;letter-spacing:-.01em}
.rubrik-desc{font-size:15.5px;line-height:1.6;color:#C7D4E4;max-width:640px;margin-bottom:22px}
.subnav{display:flex;gap:8px;flex-wrap:wrap}
.subnav a{font-size:13px;font-weight:700;padding:8px 16px;border-radius:99px;border:1px solid rgba(255,255,255,.25);color:#C7D4E4;transition:all .15s}
.subnav a:hover{border-color:#fff;color:#fff}
.subnav a.on{background:var(--blue-bright);border-color:var(--blue-bright);color:#fff}

/* layout */
.zone{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:44px;padding:40px 0 30px}
@media(max-width:960px){.zone{grid-template-columns:1fr}}

/* unggulan rubrik */
.feat{display:grid;grid-template-columns:1.25fr 1fr;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:34px;background:#fff;transition:box-shadow .2s}
.feat:hover{box-shadow:0 14px 36px rgba(12,35,64,.12)}
.feat .thumb{overflow:hidden;min-height:280px}
.feat .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.feat:hover .thumb img{transform:scale(1.04)}
.feat .body{padding:28px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.chip{font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--blue)}
.feat h2{font-family:var(--serif);font-size:24px;font-weight:600;line-height:1.3;color:var(--ink)}
.feat h2 a:hover{color:var(--blue)}
.feat p{font-size:14px;color:var(--muted);line-height:1.6}
.m2{font-size:12px;color:var(--muted);font-weight:500}
@media(max-width:700px){.feat{grid-template-columns:1fr}.feat .thumb{min-height:200px}}

/* daftar artikel */
.row-item{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
.row-thumb{flex:none;width:230px;aspect-ratio:16/10;border-radius:8px;overflow:hidden}
.row-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.row-item:hover .row-thumb img{transform:scale(1.05)}
.row-body{display:flex;flex-direction:column;gap:7px}
.row-body h3{font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.3;color:var(--ink)}
.row-body h3 a:hover{color:var(--blue)}
.row-body p{font-size:14px;color:var(--muted);line-height:1.55}
@media(max-width:640px){.row-thumb{width:118px;aspect-ratio:1/1}.row-body p{display:none}.row-body h3{font-size:16.5px}.row-item{gap:14px;padding:16px 0}}

/* pagination */
.pager{display:flex;gap:8px;justify-content:center;padding:34px 0 8px}
.pg{min-width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;font-weight:700;font-size:14px;color:var(--muted);transition:all .15s;padding:0 12px}
.pg:hover{border-color:var(--blue);color:var(--blue)}
.pg.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* sidebar */
.sidebar{display:flex;flex-direction:column;gap:28px}
.sticky-side{position:sticky;top:76px;display:flex;flex-direction:column;gap:28px}
.side-block{border:1px solid var(--line);border-radius:12px;padding:20px}
.side-block .sh{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--ink);padding-bottom:12px;border-bottom:2px solid var(--ink);margin-bottom:6px}
.pop-item{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.pop-item:last-child{border-bottom:0;padding-bottom:2px}
.pop-num{font-family:var(--serif);font-size:23px;font-weight:700;color:#C6D2E0;line-height:1;min-width:20px}
.pop-item:hover .pop-num{color:var(--blue-bright)}
.pop-item h4{font-family:var(--serif);font-size:14.5px;font-weight:600;line-height:1.4;color:var(--ink)}
.pop-item:hover h4{color:var(--blue)}
.side-cta{background:linear-gradient(165deg,var(--ink),#173B6B);border-radius:12px;padding:24px;color:#fff}
.side-cta h4{font-family:var(--serif);font-size:20px;margin-bottom:8px}
.side-cta p{font-size:13px;color:#C7D4E4;line-height:1.55;margin-bottom:14px}
.side-cta a{display:block;text-align:center;background:var(--blue-bright);color:#fff;font-weight:700;font-size:13.5px;padding:11px;border-radius:6px}
.side-cta a:hover{background:#3B8FD3}
.ad-side{border:1.5px dashed #C6D2E0;border-radius:8px;height:250px;display:flex;align-items:center;justify-content:center;color:#9AA9BC;font-size:11.5px;font-weight:700;letter-spacing:.1em}

.foot{background:var(--ink);color:#9FB1C7;padding:30px 0;font-size:12.5px;margin-top:40px}
.foot .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.foot a{color:#C7D4E4;font-weight:600}
.foot a:hover{color:#fff}
@media(max-width:640px){.wrap{padding:0 18px}}
@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important}}
a:focus-visible{outline:3px solid var(--blue-bright);outline-offset:2px}

/* ================= MENU MOBILE ================= */
.burger{display:none;background:none;border:1px solid rgba(255,255,255,.25);border-radius:8px;width:40px;height:40px;color:#fff;font-size:17px;cursor:pointer;flex:none;align-items:center;justify-content:center}
.burger:hover{border-color:#fff;background:rgba(255,255,255,.08)}
@media(max-width:860px){.burger{display:flex}}
.mscrim{position:fixed;inset:0;background:rgba(12,35,64,.5);opacity:0;pointer-events:none;transition:opacity .22s;z-index:290}
.mscrim.on{opacity:1;pointer-events:auto}
.mmenu{position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);background:linear-gradient(180deg,#0C2340,#122E52);z-index:300;transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow-y:auto;box-shadow:-20px 0 60px rgba(12,35,64,.4)}
.mmenu.open{transform:translateX(0)}
.mm-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.1)}
.mm-head .t{font-size:11px;font-weight:800;letter-spacing:.14em;color:#8FA5C0}
.mm-close{background:none;border:0;color:#C7D4E4;font-size:24px;cursor:pointer;line-height:1;padding:2px 6px}
.mm-close:hover{color:#fff}
.mm-search{margin:16px 20px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:11px 14px;color:#8FA5C0;font-size:13.5px}
.mmenu nav{padding:4px 0 8px}
.mmenu nav a{display:flex;align-items:center;gap:12px;padding:13px 20px;color:#C7D4E4;font-size:15px;font-weight:600;border-left:3px solid transparent;transition:all .15s}
.mmenu nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.mmenu nav a.on{color:#fff;background:rgba(43,126,193,.2);border-left-color:#2B7EC1}
.mmenu nav a .d{width:8px;height:8px;border-radius:2px;flex:none}
.mm-sec{padding:16px 20px 6px;font-size:10px;font-weight:800;letter-spacing:.14em;color:#647B99;border-top:1px solid rgba(255,255,255,.08);margin-top:6px}
.mm-cta{padding:16px 20px 20px;display:flex;flex-direction:column;gap:10px;margin-top:auto;border-top:1px solid rgba(255,255,255,.1)}
.mm-cta a{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:700;padding:13px;border-radius:9px;transition:all .15s}
.mm-cta .k{background:#2B7EC1;color:#fff}
.mm-cta .k:hover{background:#3B8FD3}
.mm-cta .l{border:1px solid rgba(255,255,255,.25);color:#C7D4E4}
.mm-cta .l:hover{border-color:#fff;color:#fff}
.mm-foot{padding:0 20px 22px;font-size:11.5px;color:#7F93AC;line-height:1.6}

/* ===== dari klinik-hukum-pukatnews.html ===== */
:root{
  --ink:#0C2340;--ink-2:#122E52;--blue:#1A5A9E;--blue-bright:#2B7EC1;
  --paper:#fff;--mist:#F4F6F9;--line:#E3E8EF;--text:#1C2A3A;--muted:#5C6B7E;
  --serif:'Lora',Georgia,serif;--sans:'Plus Jakarta Sans',-apple-system,sans-serif;--maxw:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.serif{font-family:var(--serif)}

.hdr{background:var(--ink);position:sticky;top:0;z-index:100;box-shadow:0 2px 18px rgba(12,35,64,.28)}
.hdr .wrap{display:flex;align-items:center;gap:20px;height:60px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand-mark{width:34px;height:34px}
.brand-name{font-weight:800;font-size:21px;letter-spacing:.12em;color:#fff;line-height:1}
.brand-name span{color:var(--blue-bright)}
.hnav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1}
.hnav::-webkit-scrollbar{display:none}
.hnav a{color:#C7D4E4;font-size:13.5px;font-weight:600;padding:8px 12px;border-radius:6px;white-space:nowrap}
.hnav a:hover{color:#fff;background:rgba(255,255,255,.07)}
@media(max-width:860px){.hnav{display:none}}

/* hero klinik */
.k-hero{background:linear-gradient(150deg,var(--ink) 0%,var(--ink-2) 55%,#173B6B 100%);color:#fff;padding:52px 0 120px;position:relative;overflow:hidden}
.k-hero::before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px}
.k-hero .wrap{position:relative;text-align:center}
.k-badge{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.16em;color:#BCD9F2;border:1px solid rgba(188,217,242,.45);padding:7px 16px;border-radius:99px;margin-bottom:18px}
.k-hero h1{font-family:var(--serif);font-size:clamp(30px,4.4vw,46px);font-weight:600;letter-spacing:-.01em;margin-bottom:14px}
.k-hero p{font-size:16px;line-height:1.65;color:#C7D4E4;max-width:620px;margin:0 auto 28px}
.k-stats{display:flex;gap:38px;justify-content:center;flex-wrap:wrap}
.k-stat b{font-family:var(--serif);font-size:30px;display:block;color:#fff}
.k-stat span{font-size:12.5px;color:#8FA5C0;font-weight:600}

/* langkah */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:-72px;position:relative;z-index:2}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:0 14px 40px rgba(12,35,64,.1)}
.step .n{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--blue-bright),var(--blue));color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:17px;margin-bottom:14px}
.step h3{font-size:16.5px;font-weight:800;color:var(--ink);margin-bottom:8px}
.step p{font-size:13.5px;line-height:1.6;color:var(--muted)}

/* zona form */
.f-zone{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:44px;padding:48px 0 30px}
@media(max-width:960px){.f-zone{grid-template-columns:1fr}}
.f-card{border:1px solid var(--line);border-radius:16px;padding:32px;box-shadow:0 8px 30px rgba(12,35,64,.05)}
.f-card h2{font-family:var(--serif);font-size:26px;color:var(--ink);margin-bottom:6px}
.f-card .sub{font-size:14px;color:var(--muted);margin-bottom:26px}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:620px){.f-grid{grid-template-columns:1fr}.f-card{padding:22px 18px}}
.f-field{display:flex;flex-direction:column;gap:7px}
.f-field.full{grid-column:1/-1}
.f-field label{font-size:13px;font-weight:700;color:var(--ink)}
.f-field label i{font-style:normal;color:#D64545}
.f-field label small{font-weight:500;color:var(--muted)}
.f-field input,.f-field select,.f-field textarea{font-family:var(--sans);font-size:14.5px;padding:13px 15px;border:1.5px solid #D4DCE6;border-radius:9px;outline:none;transition:border .15s,box-shadow .15s;background:#fff;color:var(--text)}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{border-color:var(--blue-bright);box-shadow:0 0 0 4px rgba(43,126,193,.12)}
.f-field textarea{min-height:150px;resize:vertical;line-height:1.6}
.f-hint{font-size:12px;color:var(--muted)}
.f-upload{border:1.5px dashed #C6D2E0;border-radius:10px;padding:22px;text-align:center;color:var(--muted);font-size:13.5px;cursor:pointer;transition:all .15s}
.f-upload:hover{border-color:var(--blue-bright);color:var(--blue);background:#F6FAFD}
.f-upload b{color:var(--blue);font-weight:700}
.f-consent{display:flex;gap:12px;align-items:flex-start;background:var(--mist);border-radius:10px;padding:16px;font-size:13px;line-height:1.6;color:var(--muted)}
.f-consent input{width:18px;height:18px;margin-top:2px;accent-color:var(--blue-bright);flex:none}
.f-consent a{color:var(--blue);font-weight:700}
.btn-submit{background:var(--blue-bright);color:#fff;font-family:var(--sans);font-weight:800;font-size:15px;padding:15px;border:0;border-radius:10px;cursor:pointer;transition:all .18s;width:100%}
.btn-submit:hover{background:#3B8FD3;transform:translateY(-1px);box-shadow:0 10px 24px rgba(43,126,193,.3)}
.f-note{font-size:12px;color:var(--muted);text-align:center;line-height:1.6}
.f-note a{color:var(--blue);font-weight:700}

/* sidebar klinik */
.k-side{display:flex;flex-direction:column;gap:26px}
.qa-block{border:1px solid var(--line);border-radius:14px;padding:22px}
.qa-block .sh{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--ink);padding-bottom:12px;border-bottom:2px solid var(--ink);margin-bottom:8px}
.qa{padding:14px 0;border-bottom:1px solid var(--line)}
.qa:last-child{border-bottom:0;padding-bottom:4px}
.qa .q{font-family:var(--serif);font-size:15px;font-weight:600;line-height:1.45;color:var(--ink)}
.qa:hover .q{color:var(--blue)}
.qa .a{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.qa .m{font-size:11.5px;color:var(--blue);font-weight:700;margin-top:6px;display:inline-block}
.trust{background:linear-gradient(160deg,#F0F6FC,#E7F0F9);border:1px solid #CBDEF0;border-radius:14px;padding:22px;font-size:13px;line-height:1.7;color:var(--text)}
.trust b{display:flex;align-items:center;gap:8px;color:var(--blue);font-size:13.5px;margin-bottom:10px}
.trust ul{list-style:none}
.trust li{padding:4px 0 4px 24px;position:relative}
.trust li::before{content:'✓';position:absolute;left:0;color:var(--blue-bright);font-weight:800}

.foot{background:var(--ink);color:#9FB1C7;padding:30px 0;font-size:12.5px;margin-top:44px}
.foot .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.foot a{color:#C7D4E4;font-weight:600}
.foot a:hover{color:#fff}
@media(max-width:640px){.wrap{padding:0 18px}}
@media (prefers-reduced-motion: reduce){*{transition:none !important}}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--blue-bright);outline-offset:2px}

/* ================= MENU MOBILE ================= */
.burger{display:none;background:none;border:1px solid rgba(255,255,255,.25);border-radius:8px;width:40px;height:40px;color:#fff;font-size:17px;cursor:pointer;flex:none;align-items:center;justify-content:center}
.burger:hover{border-color:#fff;background:rgba(255,255,255,.08)}
@media(max-width:860px){.burger{display:flex}}
.mscrim{position:fixed;inset:0;background:rgba(12,35,64,.5);opacity:0;pointer-events:none;transition:opacity .22s;z-index:290}
.mscrim.on{opacity:1;pointer-events:auto}
.mmenu{position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);background:linear-gradient(180deg,#0C2340,#122E52);z-index:300;transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow-y:auto;box-shadow:-20px 0 60px rgba(12,35,64,.4)}
.mmenu.open{transform:translateX(0)}
.mm-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.1)}
.mm-head .t{font-size:11px;font-weight:800;letter-spacing:.14em;color:#8FA5C0}
.mm-close{background:none;border:0;color:#C7D4E4;font-size:24px;cursor:pointer;line-height:1;padding:2px 6px}
.mm-close:hover{color:#fff}
.mm-search{margin:16px 20px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:11px 14px;color:#8FA5C0;font-size:13.5px}
.mmenu nav{padding:4px 0 8px}
.mmenu nav a{display:flex;align-items:center;gap:12px;padding:13px 20px;color:#C7D4E4;font-size:15px;font-weight:600;border-left:3px solid transparent;transition:all .15s}
.mmenu nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.mmenu nav a.on{color:#fff;background:rgba(43,126,193,.2);border-left-color:#2B7EC1}
.mmenu nav a .d{width:8px;height:8px;border-radius:2px;flex:none}
.mm-sec{padding:16px 20px 6px;font-size:10px;font-weight:800;letter-spacing:.14em;color:#647B99;border-top:1px solid rgba(255,255,255,.08);margin-top:6px}
.mm-cta{padding:16px 20px 20px;display:flex;flex-direction:column;gap:10px;margin-top:auto;border-top:1px solid rgba(255,255,255,.1)}
.mm-cta a{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:700;padding:13px;border-radius:9px;transition:all .15s}
.mm-cta .k{background:#2B7EC1;color:#fff}
.mm-cta .k:hover{background:#3B8FD3}
.mm-cta .l{border:1px solid rgba(255,255,255,.25);color:#C7D4E4}
.mm-cta .l:hover{border-color:#fff;color:#fff}
.mm-foot{padding:0 20px 22px;font-size:11.5px;color:#7F93AC;line-height:1.6}

/* ===== dari box-redaksi-pukatnews.html ===== */
:root{
  --ink:#0C2340;--ink-2:#122E52;--blue:#1A5A9E;--blue-bright:#2B7EC1;
  --paper:#fff;--mist:#F4F6F9;--line:#E3E8EF;--text:#1C2A3A;--muted:#5C6B7E;
  --serif:'Lora',Georgia,serif;--sans:'Plus Jakarta Sans',-apple-system,sans-serif;--maxw:1100px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.serif{font-family:var(--serif)}

.hdr{background:var(--ink);position:sticky;top:0;z-index:100;box-shadow:0 2px 18px rgba(12,35,64,.28)}
.hdr .wrap{display:flex;align-items:center;gap:20px;height:60px;max-width:1200px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand-mark{width:34px;height:34px}
.brand-name{font-weight:800;font-size:21px;letter-spacing:.12em;color:#fff;line-height:1}
.brand-name span{color:var(--blue-bright)}
.hnav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1}
.hnav::-webkit-scrollbar{display:none}
.hnav a{color:#C7D4E4;font-size:13.5px;font-weight:600;padding:8px 12px;border-radius:6px;white-space:nowrap}
.hnav a:hover{color:#fff;background:rgba(255,255,255,.07)}
@media(max-width:860px){.hnav{display:none}}

/* hero */
.p-hero{background:linear-gradient(150deg,var(--ink) 0%,var(--ink-2) 55%,#173B6B 100%);color:#fff;padding:52px 0 48px;position:relative;overflow:hidden;text-align:center}
.p-hero::before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px}
.p-hero .wrap{position:relative}
.p-hero .crumb{font-size:12.5px;color:#8FA5C0;font-weight:500;margin-bottom:16px}
.p-hero .crumb a:hover{color:#fff}
.p-hero h1{font-family:var(--serif);font-size:clamp(30px,4.4vw,44px);font-weight:600;letter-spacing:-.01em;margin-bottom:12px}
.p-hero p{font-size:15px;line-height:1.65;color:#C7D4E4;max-width:640px;margin:0 auto}

section.blok{padding:46px 0 8px}
.blok-h{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.blok-h .parcel{width:24px;height:24px;color:var(--blue);flex:none}
.blok-h h2{font-family:var(--serif);font-size:24px;font-weight:700;color:var(--ink)}
.blok-h .ln{flex:1;height:1px;background:var(--line)}

/* kartu pimpinan */
.lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:760px){.lead-grid{grid-template-columns:1fr}}
.lead-card{border:1px solid var(--line);border-radius:16px;padding:28px;display:flex;gap:20px;align-items:center;transition:box-shadow .2s,transform .2s;background:linear-gradient(160deg,#fff,#F8FAFC)}
.lead-card:hover{box-shadow:0 14px 36px rgba(12,35,64,.1);transform:translateY(-3px)}
.lead-card .ava{width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,var(--blue-bright),var(--blue));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:26px;flex:none;box-shadow:0 8px 22px rgba(26,90,158,.3)}
.lead-card .role{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--blue);margin-bottom:6px}
.lead-card h3{font-family:var(--serif);font-size:21px;font-weight:700;color:var(--ink);line-height:1.3}
@media(max-width:480px){.lead-card{flex-direction:column;text-align:center;padding:24px 18px}}

/* grid struktur */
.org-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.org-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.org-grid{grid-template-columns:1fr}}
.org{border:1px solid var(--line);border-radius:12px;padding:18px 20px;transition:all .18s;background:#fff}
.org:hover{border-color:var(--blue-bright);box-shadow:0 8px 22px rgba(12,35,64,.08)}
.org .role{font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--muted);margin-bottom:6px}
.org b{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--ink);display:block}
.org small{font-size:12px;color:var(--muted)}

/* biro */
.biro-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.biro-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.biro-grid{grid-template-columns:1fr 1fr}}
.biro{background:linear-gradient(160deg,var(--ink),#173B6B);border-radius:12px;padding:20px;color:#fff;transition:transform .18s,box-shadow .18s;position:relative;overflow:hidden}
.biro::before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:26px 26px}
.biro:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(12,35,64,.28)}
.biro .k{position:relative;font-size:10px;font-weight:800;letter-spacing:.14em;color:#8FA5C0;margin-bottom:8px}
.biro b{position:relative;font-family:var(--serif);font-size:19px;font-weight:600}
.biro small{position:relative;display:block;font-size:11.5px;color:#B9C6D8;margin-top:4px}

/* kantor + legal */
.office{display:grid;grid-template-columns:1.2fr 1fr;gap:22px;margin-top:8px}
@media(max-width:820px){.office{grid-template-columns:1fr}}
.of-card{border:1px solid var(--line);border-radius:16px;padding:28px}
.of-card h3{font-family:var(--serif);font-size:20px;color:var(--ink);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.of-card p{font-size:14.5px;line-height:1.75;color:var(--muted)}
.of-card p b{color:var(--ink)}
.of-card .row{display:flex;gap:12px;padding:9px 0;font-size:14px;color:var(--muted);align-items:baseline}
.of-card .row b{color:var(--ink);font-weight:700}
.legal{background:var(--mist);border:1px solid var(--line)}
.legal ul{list-style:none;margin-top:4px}
.legal li{padding:7px 0 7px 26px;position:relative;font-size:13.5px;line-height:1.6;color:var(--muted)}
.legal li::before{content:'✓';position:absolute;left:0;top:7px;width:17px;height:17px;background:var(--blue-bright);color:#fff;border-radius:50%;font-size:10px;display:flex;align-items:center;justify-content:center;font-weight:800}
.legal a{color:var(--blue);font-weight:700}

.foot{background:var(--ink);color:#9FB1C7;padding:30px 0;font-size:12.5px;margin-top:52px}
.foot .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;max-width:1200px}
.foot a{color:#C7D4E4;font-weight:600}
.foot a:hover{color:#fff}
@media(max-width:640px){.wrap{padding:0 18px}}
@media (prefers-reduced-motion: reduce){*{transition:none !important}}
a:focus-visible{outline:3px solid var(--blue-bright);outline-offset:2px}

/* ================= MENU MOBILE ================= */
.burger{display:none;background:none;border:1px solid rgba(255,255,255,.25);border-radius:8px;width:40px;height:40px;color:#fff;font-size:17px;cursor:pointer;flex:none;align-items:center;justify-content:center}
.burger:hover{border-color:#fff;background:rgba(255,255,255,.08)}
@media(max-width:860px){.burger{display:flex}}
.mscrim{position:fixed;inset:0;background:rgba(12,35,64,.5);opacity:0;pointer-events:none;transition:opacity .22s;z-index:290}
.mscrim.on{opacity:1;pointer-events:auto}
.mmenu{position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);background:linear-gradient(180deg,#0C2340,#122E52);z-index:300;transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow-y:auto;box-shadow:-20px 0 60px rgba(12,35,64,.4)}
.mmenu.open{transform:translateX(0)}
.mm-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.1)}
.mm-head .t{font-size:11px;font-weight:800;letter-spacing:.14em;color:#8FA5C0}
.mm-close{background:none;border:0;color:#C7D4E4;font-size:24px;cursor:pointer;line-height:1;padding:2px 6px}
.mm-close:hover{color:#fff}
.mm-search{margin:16px 20px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:11px 14px;color:#8FA5C0;font-size:13.5px}
.mmenu nav{padding:4px 0 8px}
.mmenu nav a{display:flex;align-items:center;gap:12px;padding:13px 20px;color:#C7D4E4;font-size:15px;font-weight:600;border-left:3px solid transparent;transition:all .15s}
.mmenu nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.mmenu nav a.on{color:#fff;background:rgba(43,126,193,.2);border-left-color:#2B7EC1}
.mmenu nav a .d{width:8px;height:8px;border-radius:2px;flex:none}
.mm-sec{padding:16px 20px 6px;font-size:10px;font-weight:800;letter-spacing:.14em;color:#647B99;border-top:1px solid rgba(255,255,255,.08);margin-top:6px}
.mm-cta{padding:16px 20px 20px;display:flex;flex-direction:column;gap:10px;margin-top:auto;border-top:1px solid rgba(255,255,255,.1)}
.mm-cta a{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:700;padding:13px;border-radius:9px;transition:all .15s}
.mm-cta .k{background:#2B7EC1;color:#fff}
.mm-cta .k:hover{background:#3B8FD3}
.mm-cta .l{border:1px solid rgba(255,255,255,.25);color:#C7D4E4}
.mm-cta .l:hover{border-color:#fff;color:#fff}
.mm-foot{padding:0 20px 22px;font-size:11.5px;color:#7F93AC;line-height:1.6}

/* ===== dari pencarian-pukatnews.html ===== */
:root{--ink:#0C2340;--ink-2:#122E52;--blue:#1A5A9E;--blue-bright:#2B7EC1;--paper:#fff;--mist:#F4F6F9;--line:#E3E8EF;--text:#1C2A3A;--muted:#5C6B7E;--maroon:#8E1B2F;--teal:#0E7C7B;--amber:#B07C10;--serif:'Lora',Georgia,serif;--sans:'Plus Jakarta Sans',-apple-system,sans-serif;--maxw:1100px}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;background:#DDE5EE}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.hdr{background:var(--ink);position:sticky;top:0;z-index:100;box-shadow:0 2px 18px rgba(12,35,64,.28)}
.hdr .wrap{display:flex;align-items:center;gap:20px;height:60px;max-width:1200px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand-mark{width:34px;height:34px}
.brand-name{font-weight:800;font-size:21px;letter-spacing:.12em;color:#fff;line-height:1}
.brand-name span{color:var(--blue-bright)}
.hnav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1}
.hnav::-webkit-scrollbar{display:none}
.hnav a{color:#C7D4E4;font-size:13.5px;font-weight:600;padding:8px 12px;border-radius:6px;white-space:nowrap}
.hnav a:hover{color:#fff;background:rgba(255,255,255,.07)}
@media(max-width:860px){.hnav{display:none}}

/* zona cari */
.s-hero{background:linear-gradient(150deg,var(--ink),var(--ink-2) 60%,#173B6B);color:#fff;padding:44px 0 40px;position:relative;overflow:hidden}
.s-hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:120px 120px,120px 120px,24px 24px,24px 24px}
.s-hero .wrap{position:relative}
.s-hero h1{font-family:var(--serif);font-size:clamp(24px,3.2vw,32px);font-weight:600;margin-bottom:18px}
.sbox{display:flex;gap:10px;max-width:640px}
.sbox .f{flex:1;position:relative}
.sbox .f .ic{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#9AA9BC;font-size:16px}
.sbox input{width:100%;font-family:var(--sans);font-size:15px;padding:15px 16px 15px 46px;border:0;border-radius:10px;outline:none}
.sbox input:focus{box-shadow:0 0 0 4px rgba(43,126,193,.4)}
.sbox button{background:var(--blue-bright);color:#fff;font-weight:800;font-size:14.5px;padding:0 26px;border:0;border-radius:10px;cursor:pointer;transition:background .15s}
.sbox button:hover{background:#3B8FD3}
@media(max-width:560px){.sbox{flex-direction:column}.sbox button{padding:14px}}
.s-meta{margin-top:18px;font-size:14px;color:#C7D4E4}
.s-meta b{color:#fff}

/* filter */
.filters{display:flex;gap:10px;flex-wrap:wrap;padding:22px 0;border-bottom:1px solid var(--line);align-items:center}
.filters .lb{font-size:11.5px;font-weight:800;letter-spacing:.1em;color:var(--muted);margin-right:4px}
.chipf{font-size:13px;font-weight:700;padding:8px 16px;border-radius:99px;border:1px solid var(--line);color:var(--muted);background:#fff;transition:all .15s;cursor:pointer}
.chipf:hover{border-color:var(--blue);color:var(--blue)}
.chipf.on{background:var(--ink);border-color:var(--ink);color:#fff}
.sel{margin-left:auto;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:9px 12px;background:#fff;cursor:pointer}
@media(max-width:700px){.sel{margin-left:0;width:100%}}

/* hasil */
.res{padding:8px 0 0}
.r-item{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
.r-thumb{flex:none;width:180px;aspect-ratio:16/10;border-radius:8px;overflow:hidden}
.r-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.r-item:hover .r-thumb img{transform:scale(1.05)}
.r-body{display:flex;flex-direction:column;gap:7px;min-width:0}
.chip{font-size:10.5px;font-weight:800;letter-spacing:.1em}
.c-h{color:var(--blue)}.c-i{color:var(--maroon)}.c-p{color:var(--teal)}.c-b{color:var(--amber)}
.r-body h3{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.35;color:var(--ink)}
.r-body h3 a:hover{color:var(--blue)}
.r-body p{font-size:14px;color:var(--muted);line-height:1.6}
mark{background:#FFF1B8;color:var(--ink);padding:0 3px;border-radius:3px;font-weight:600}
.r-body .m2{font-size:12px;color:var(--muted);font-weight:500}
@media(max-width:640px){.r-thumb{width:110px;aspect-ratio:1/1}.r-body h3{font-size:16.5px}.r-item{gap:14px;padding:16px 0}}

.pager{display:flex;gap:8px;justify-content:center;padding:32px 0}
.pg{min-width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;font-weight:700;font-size:14px;color:var(--muted);padding:0 12px}
.pg:hover{border-color:var(--blue);color:var(--blue)}
.pg.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* saran & kosong */
.sugg{background:var(--mist);border-radius:14px;padding:24px;margin:30px 0 40px}
.sugg .t{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--ink);margin-bottom:14px}
.sugg .list{display:flex;gap:9px;flex-wrap:wrap}
.sugg a{font-size:13px;font-weight:700;color:var(--blue);background:#fff;border:1px solid var(--line);padding:8px 15px;border-radius:99px;transition:all .15s}
.sugg a:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

.foot{background:var(--ink);color:#9FB1C7;padding:30px 0;font-size:12.5px}
.foot .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;max-width:1200px}
.foot a{color:#C7D4E4;font-weight:600}
.foot a:hover{color:#fff}
@media(max-width:640px){.wrap{padding:0 18px}}
@media (prefers-reduced-motion: reduce){*{transition:none !important}}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--blue-bright);outline-offset:2px}

/* ================= MENU MOBILE ================= */
.burger{display:none;background:none;border:1px solid rgba(255,255,255,.25);border-radius:8px;width:40px;height:40px;color:#fff;font-size:17px;cursor:pointer;flex:none;align-items:center;justify-content:center}
.burger:hover{border-color:#fff;background:rgba(255,255,255,.08)}
@media(max-width:860px){.burger{display:flex}}
.mscrim{position:fixed;inset:0;background:rgba(12,35,64,.5);opacity:0;pointer-events:none;transition:opacity .22s;z-index:290}
.mscrim.on{opacity:1;pointer-events:auto}
.mmenu{position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);background:linear-gradient(180deg,#0C2340,#122E52);z-index:300;transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow-y:auto;box-shadow:-20px 0 60px rgba(12,35,64,.4)}
.mmenu.open{transform:translateX(0)}
.mm-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.1)}
.mm-head .t{font-size:11px;font-weight:800;letter-spacing:.14em;color:#8FA5C0}
.mm-close{background:none;border:0;color:#C7D4E4;font-size:24px;cursor:pointer;line-height:1;padding:2px 6px}
.mm-close:hover{color:#fff}
.mm-search{margin:16px 20px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:11px 14px;color:#8FA5C0;font-size:13.5px}
.mmenu nav{padding:4px 0 8px}
.mmenu nav a{display:flex;align-items:center;gap:12px;padding:13px 20px;color:#C7D4E4;font-size:15px;font-weight:600;border-left:3px solid transparent;transition:all .15s}
.mmenu nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.mmenu nav a.on{color:#fff;background:rgba(43,126,193,.2);border-left-color:#2B7EC1}
.mmenu nav a .d{width:8px;height:8px;border-radius:2px;flex:none}
.mm-sec{padding:16px 20px 6px;font-size:10px;font-weight:800;letter-spacing:.14em;color:#647B99;border-top:1px solid rgba(255,255,255,.08);margin-top:6px}
.mm-cta{padding:16px 20px 20px;display:flex;flex-direction:column;gap:10px;margin-top:auto;border-top:1px solid rgba(255,255,255,.1)}
.mm-cta a{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:700;padding:13px;border-radius:9px;transition:all .15s}
.mm-cta .k{background:#2B7EC1;color:#fff}
.mm-cta .k:hover{background:#3B8FD3}
.mm-cta .l{border:1px solid rgba(255,255,255,.25);color:#C7D4E4}
.mm-cta .l:hover{border-color:#fff;color:#fff}
.mm-foot{padding:0 20px 22px;font-size:11.5px;color:#7F93AC;line-height:1.6}

/* ===== dari indeks-pukatnews.html ===== */
:root{--ink:#0C2340;--ink-2:#122E52;--blue:#1A5A9E;--blue-bright:#2B7EC1;--paper:#fff;--mist:#F4F6F9;--line:#E3E8EF;--text:#1C2A3A;--muted:#5C6B7E;--maroon:#8E1B2F;--teal:#0E7C7B;--amber:#B07C10;--serif:'Lora',Georgia,serif;--sans:'Plus Jakarta Sans',-apple-system,sans-serif;--maxw:1100px}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.hdr{background:var(--ink);position:sticky;top:0;z-index:100;box-shadow:0 2px 18px rgba(12,35,64,.28)}
.hdr .wrap{display:flex;align-items:center;gap:20px;height:60px;max-width:1200px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand-mark{width:34px;height:34px}
.brand-name{font-weight:800;font-size:21px;letter-spacing:.12em;color:#fff;line-height:1}
.brand-name span{color:var(--blue-bright)}
.hnav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1}
.hnav::-webkit-scrollbar{display:none}
.hnav a{color:#C7D4E4;font-size:13.5px;font-weight:600;padding:8px 12px;border-radius:6px;white-space:nowrap}
.hnav a:hover{color:#fff;background:rgba(255,255,255,.07)}
@media(max-width:860px){.hnav{display:none}}

.i-hero{background:linear-gradient(150deg,var(--ink),var(--ink-2) 60%,#173B6B);color:#fff;padding:44px 0 38px;position:relative;overflow:hidden}
.i-hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:120px 120px,120px 120px,24px 24px,24px 24px}
.i-hero .wrap{position:relative}
.crumb{font-size:12.5px;color:#8FA5C0;font-weight:500;margin-bottom:14px}
.crumb a:hover{color:#fff}
.i-hero h1{font-family:var(--serif);font-size:clamp(28px,3.8vw,38px);font-weight:600;margin-bottom:10px}
.i-hero p{font-size:14.5px;color:#C7D4E4;line-height:1.6;max-width:620px}

/* kontrol tanggal */
.ctrl{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding:24px 0;border-bottom:1px solid var(--line)}
.ctrl .fld{display:flex;flex-direction:column;gap:6px}
.ctrl label{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--muted)}
.ctrl input,.ctrl select{font-family:var(--sans);font-size:14px;font-weight:600;padding:11px 14px;border:1.5px solid #D4DCE6;border-radius:9px;outline:none;background:#fff;color:var(--text);transition:border .15s}
.ctrl input:focus,.ctrl select:focus{border-color:var(--blue-bright)}
.ctrl .go{background:var(--blue-bright);color:#fff;font-weight:800;font-size:14px;border:0;border-radius:9px;padding:12px 22px;cursor:pointer;align-self:flex-end;transition:background .15s}
.ctrl .go:hover{background:#3B8FD3}
.ctrl .cnt{margin-left:auto;font-size:13px;color:var(--muted);align-self:flex-end;padding-bottom:12px}
.ctrl .cnt b{color:var(--ink)}
@media(max-width:700px){.ctrl .fld{flex:1;min-width:140px}.ctrl .cnt{margin-left:0;width:100%;padding-bottom:0}}

/* daftar per tanggal */
.day{padding:30px 0 6px}
.day-h{display:flex;align-items:center;gap:14px;margin-bottom:6px;position:sticky;top:48px;background:#fff;padding:12px 0;z-index:20}
.day-h .d{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--ink);white-space:nowrap}
.day-h .ln{flex:1;height:1px;background:var(--line)}
.day-h .n{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}
.idx{display:flex;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);align-items:baseline}
.idx:hover{background:#FAFCFE}
.idx .jam{font-family:var(--serif);font-size:14px;font-weight:700;color:var(--blue);min-width:52px;flex:none}
.idx .rb{font-size:10px;font-weight:800;letter-spacing:.08em;min-width:92px;flex:none}
.rb.h{color:var(--blue)}.rb.i{color:var(--maroon)}.rb.p{color:var(--teal)}.rb.b{color:var(--amber)}.rb.d{color:var(--muted)}
.idx h3{font-family:var(--serif);font-size:16.5px;font-weight:600;line-height:1.4;color:var(--ink)}
.idx:hover h3{color:var(--blue)}
@media(max-width:640px){
  .idx{flex-wrap:wrap;gap:6px 12px;padding:14px 0}
  .idx h3{width:100%;font-size:16px;order:3}
  .idx .rb{min-width:auto}
}
.pager{display:flex;gap:8px;justify-content:center;padding:34px 0 44px}
.pg{min-width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;font-weight:700;font-size:14px;color:var(--muted);padding:0 12px}
.pg:hover{border-color:var(--blue);color:var(--blue)}
.pg.on{background:var(--ink);border-color:var(--ink);color:#fff}
.foot{background:var(--ink);color:#9FB1C7;padding:30px 0;font-size:12.5px}
.foot .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;max-width:1200px}
.foot a{color:#C7D4E4;font-weight:600}
.foot a:hover{color:#fff}
@media(max-width:640px){.wrap{padding:0 18px}}
@media (prefers-reduced-motion: reduce){*{transition:none !important}}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--blue-bright);outline-offset:2px}

/* ================= MENU MOBILE ================= */
.burger{display:none;background:none;border:1px solid rgba(255,255,255,.25);border-radius:8px;width:40px;height:40px;color:#fff;font-size:17px;cursor:pointer;flex:none;align-items:center;justify-content:center}
.burger:hover{border-color:#fff;background:rgba(255,255,255,.08)}
@media(max-width:860px){.burger{display:flex}}
.mscrim{position:fixed;inset:0;background:rgba(12,35,64,.5);opacity:0;pointer-events:none;transition:opacity .22s;z-index:290}
.mscrim.on{opacity:1;pointer-events:auto}
.mmenu{position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);background:linear-gradient(180deg,#0C2340,#122E52);z-index:300;transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow-y:auto;box-shadow:-20px 0 60px rgba(12,35,64,.4)}
.mmenu.open{transform:translateX(0)}
.mm-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.1)}
.mm-head .t{font-size:11px;font-weight:800;letter-spacing:.14em;color:#8FA5C0}
.mm-close{background:none;border:0;color:#C7D4E4;font-size:24px;cursor:pointer;line-height:1;padding:2px 6px}
.mm-close:hover{color:#fff}
.mm-search{margin:16px 20px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:11px 14px;color:#8FA5C0;font-size:13.5px}
.mmenu nav{padding:4px 0 8px}
.mmenu nav a{display:flex;align-items:center;gap:12px;padding:13px 20px;color:#C7D4E4;font-size:15px;font-weight:600;border-left:3px solid transparent;transition:all .15s}
.mmenu nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.mmenu nav a.on{color:#fff;background:rgba(43,126,193,.2);border-left-color:#2B7EC1}
.mmenu nav a .d{width:8px;height:8px;border-radius:2px;flex:none}
.mm-sec{padding:16px 20px 6px;font-size:10px;font-weight:800;letter-spacing:.14em;color:#647B99;border-top:1px solid rgba(255,255,255,.08);margin-top:6px}
.mm-cta{padding:16px 20px 20px;display:flex;flex-direction:column;gap:10px;margin-top:auto;border-top:1px solid rgba(255,255,255,.1)}
.mm-cta a{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:700;padding:13px;border-radius:9px;transition:all .15s}
.mm-cta .k{background:#2B7EC1;color:#fff}
.mm-cta .k:hover{background:#3B8FD3}
.mm-cta .l{border:1px solid rgba(255,255,255,.25);color:#C7D4E4}
.mm-cta .l:hover{border-color:#fff;color:#fff}
.mm-foot{padding:0 20px 22px;font-size:11.5px;color:#7F93AC;line-height:1.6}

/* ===== dari 404-pukatnews.html ===== */
:root{--ink:#0C2340;--ink-2:#122E52;--blue:#1A5A9E;--blue-bright:#2B7EC1;--paper:#fff;--mist:#F4F6F9;--line:#E3E8EF;--text:#1C2A3A;--muted:#5C6B7E;--maroon:#8E1B2F;--teal:#0E7C7B;--amber:#B07C10;--serif:'Lora',Georgia,serif;--sans:'Plus Jakarta Sans',-apple-system,sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px;width:100%}

.hdr{background:var(--ink)}
.hdr .wrap{display:flex;align-items:center;gap:20px;height:60px}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:34px;height:34px}
.brand-name{font-weight:800;font-size:21px;letter-spacing:.12em;color:#fff;line-height:1}
.brand-name span{color:var(--blue-bright)}

/* panel utama */
.main{flex:1;background:linear-gradient(160deg,var(--ink) 0%,var(--ink-2) 55%,#173B6B 100%);color:#fff;position:relative;overflow:hidden;display:flex;align-items:center;padding:64px 0}
.main::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:140px 140px,140px 140px,28px 28px,28px 28px}
.grid{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
@media(max-width:900px){.grid{grid-template-columns:1fr;gap:36px}}

.badge{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:800;letter-spacing:.16em;color:#BCD9F2;border:1px solid rgba(188,217,242,.4);padding:7px 15px;border-radius:99px;margin-bottom:22px}
.main h1{font-family:var(--serif);font-size:clamp(30px,4.4vw,44px);font-weight:600;line-height:1.2;letter-spacing:-.015em;margin-bottom:16px}
.main .lede{font-size:16px;line-height:1.7;color:#C7D4E4;max-width:520px;margin-bottom:28px}
.acts{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:14.5px;padding:14px 24px;border-radius:9px;transition:all .18s}
.btn-p{background:var(--blue-bright);color:#fff}
.btn-p:hover{background:#3B8FD3;transform:translateY(-2px);box-shadow:0 10px 26px rgba(43,126,193,.3)}
.btn-g{border:1px solid rgba(255,255,255,.28);color:#C7D4E4}
.btn-g:hover{border-color:#fff;color:#fff}
.sbox{display:flex;gap:10px;max-width:460px}
.sbox .f{flex:1;position:relative}
.sbox .f .ic{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#9AA9BC;font-size:15px}
.sbox input{width:100%;font-family:var(--sans);font-size:14.5px;padding:14px 15px 14px 44px;border:0;border-radius:9px;outline:none}
.sbox input:focus{box-shadow:0 0 0 4px rgba(43,126,193,.4)}
.sbox button{background:#fff;color:var(--ink);font-weight:800;font-size:14px;padding:0 22px;border:0;border-radius:9px;cursor:pointer;transition:all .15s}
.sbox button:hover{background:#E7F0F9}
@media(max-width:520px){.sbox{flex-direction:column}.sbox button{padding:13px}}

/* ilustrasi persil hilang */
.art{position:relative;display:flex;align-items:center;justify-content:center}
.art svg{width:100%;max-width:380px;height:auto}
.code{position:absolute;font-family:var(--serif);font-size:clamp(90px,13vw,150px);font-weight:700;color:rgba(255,255,255,.07);letter-spacing:-.03em;pointer-events:none;user-select:none}
@media(max-width:900px){.art{order:-1}.art svg{max-width:280px}}

/* tautan bantuan */
.help{background:var(--mist);padding:44px 0}
.help h2{font-family:var(--serif);font-size:22px;color:var(--ink);margin-bottom:20px}
.h-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.h-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.h-grid{grid-template-columns:1fr}}
.h-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;transition:all .18s}
.h-card:hover{border-color:var(--blue-bright);box-shadow:0 10px 26px rgba(12,35,64,.09);transform:translateY(-3px)}
.h-card .ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:12px}
.h-card b{display:block;font-size:15px;color:var(--ink);margin-bottom:5px}
.h-card p{font-size:12.5px;color:var(--muted);line-height:1.55}

.foot{background:var(--ink);color:#9FB1C7;padding:26px 0;font-size:12.5px}
.foot .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.foot a{color:#C7D4E4;font-weight:600}
.foot a:hover{color:#fff}
@media(max-width:640px){.wrap{padding:0 18px}}
@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important}}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--blue-bright);outline-offset:2px}
/* ===== v24: rapikan grid TENTANG di panel menu (mobile) ===== */
@media(max-width:700px){
  aside.mmenu .mm-about a:nth-child(3){ grid-column:auto !important; }
  aside.mmenu .mm-about a{
    white-space:nowrap !important;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:11.5px !important;
    letter-spacing:-.01em;
  }
}

/* ============================================================
   v26: PEMISAHAN KONTEKS — template standar vs longform
   CSS longform sempat menimpa template standar karena digabung.
   Selector di bawah lebih spesifik sehingga menang.
   ============================================================ */

/* Kolom share pada ARTIKEL STANDAR: menempel di kolom kiri grid */
.article-zone .share-rail{
  position:sticky !important;
  top:76px !important;
  left:auto !important;
  transform:none !important;
  height:fit-content !important;
  align-items:center !important;
  z-index:1 !important;
}
@media(max-width:1080px){
  .article-zone .share-rail{display:none !important}
}

/* Isi artikel standar: ukuran baca sesuai mockup standar */
.article-zone .prose{font-size:18.5px !important;line-height:1.78 !important}

/* Sidebar standar tidak boleh melebar keluar kolomnya */
.article-zone .sidebar{min-width:0}
.article-zone > article{min-width:0}

/* ============================================================
   v27: jarak sebelum footer + label BAGIKAN terbaca di segala latar
   ============================================================ */

/* 1) Beri napas antara akhir konten dengan footer */
.credits{padding-bottom:44px}
.article-zone{padding-bottom:48px}
.gfoot{margin-top:0}
main + .gfoot, .related + .gfoot{margin-top:0}

/* longform: blok hak jawab jangan menempel footer */
.credits > p:last-child{margin-bottom:8px}

/* 2) Label BAGIKAN: kontras di latar terang maupun gelap */
.share-rail .lbl{
  display:inline-block;
  font-size:9.5px !important;
  font-weight:800 !important;
  letter-spacing:.14em !important;
  color:#fff !important;
  background:rgba(12,35,64,.82);
  padding:5px 10px;
  border-radius:99px;
  text-align:center;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  box-shadow:0 2px 8px rgba(12,35,64,.18);
}

/* 3) Tombol share: pastikan tetap tegas di latar apa pun */
.share-rail .sbtn{
  background:#fff !important;
  border-color:#D9E1EA !important;
  box-shadow:0 2px 10px rgba(12,35,64,.10);
}
.share-bottom .sbtn{
  background:#fff !important;
  border-color:#D9E1EA !important;
}

/* ============================================================
   v28: kolom BAGIKAN longform — memudar saat footer muncul
   ============================================================ */
body > .share-rail{
  transition:opacity .25s ease, visibility .25s ease;
}
body > .share-rail.sembunyi{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
/* label BAGIKAN longform: kapsul kontras (samakan dengan standar) */
body > .share-rail .lbl{
  color:#fff !important;
  background:rgba(74,22,38,.85);
  padding:5px 10px;
  border-radius:99px;
  font-size:9.5px !important;
  letter-spacing:.14em !important;
  font-weight:800 !important;
  text-align:center;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
body > .share-rail .sbtn{
  background:#fff !important;
  border-color:#D9E1EA !important;
  box-shadow:0 2px 10px rgba(12,35,64,.12);
}

/* ============================================================
   v29: SCOPING PER HALAMAN
   CSS mockup digabung dari 9 halaman; sebagian selector bernama
   sama tetapi berbeda nilai. Blok ini mengembalikan tiap aturan
   ke halaman asalnya berdasarkan kelas pada <body>.
   ============================================================ */

/* ---------- .hero : homepage vs longform ---------- */
body.p-home .hero{
  position:static !important;
  min-height:0 !important;
  background:var(--ink) !important;
  padding-bottom:44px !important;
  display:block !important;
  overflow:visible !important;
}
body.p-home .hero::after{content:none !important}

/* ---------- .crumb : artikel (latar terang) vs rubrik/indeks (latar navy) ---------- */
body.p-artikel .crumb{
  padding:18px 0 0 !important;
  color:var(--muted) !important;
  margin-bottom:0 !important;
}
body.p-artikel .crumb a{color:var(--muted)}
body.p-artikel .crumb a:hover{color:var(--blue)}
body.p-artikel .crumb b{color:var(--blue)}

/* ---------- .chip : kembalikan warna default per halaman ---------- */
body.p-artikel .chip{color:var(--blue);display:block;margin-bottom:7px}
body.p-rubrik .chip{color:var(--blue)}

/* ---------- .sbox : halaman cari lebih lebar dari 404 ---------- */
body.p-cari .sbox{max-width:640px !important}

/* ---------- .prose : ukuran baca per template ---------- */
body.p-artikel .prose{font-size:18.5px !important;line-height:1.78 !important}
body.p-longform .prose{font-size:19px !important;line-height:1.85 !important}

/* ---------- .sidebar & sticky : jarak per halaman ---------- */
body.p-artikel .sidebar{gap:32px !important}
body.p-artikel .sticky-side{display:flex;flex-direction:column;gap:28px}

/* ---------- .row-item : jarak per halaman ---------- */
body.p-home .row-item{padding:20px 0 !important}
body.p-rubrik .row-item{padding:22px 0 !important}

/* ---------- .pager : padding per halaman ---------- */
body.p-cari .pager{padding:32px 0 !important}
body.p-indeks .pager{padding:34px 0 44px !important}
body.p-rubrik .pager{padding:34px 0 8px !important}

/* ---------- kolom BAGIKAN hanya untuk halaman artikel ---------- */
body:not(.p-artikel):not(.p-longform) .share-rail,
body:not(.p-artikel):not(.p-longform) .share-bottom{display:none !important}

/* ===== v30: pagination berderet mendatar ===== */
.pager{flex-wrap:wrap;align-items:center}
.pager .pgs{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  min-width:auto !important;
}
.pager .pg{
  flex:0 0 auto !important;
  white-space:nowrap;
  min-width:42px;
}

/* ===== v31: halaman layanan (klinik & lapor) ===== */
body.p-klinik .f-upload{cursor:pointer}
body.p-klinik .f-upload:hover{border-color:var(--blue-bright);background:#F6FAFD}
body.p-lapor .f-upload:hover{border-color:var(--maroon);background:#FBF3F5}
body.p-lapor .btn-submit:hover{background:#7A1E33 !important}
body.p-klinik .f-consent input{cursor:pointer}
body.p-klinik textarea{min-height:150px}
body.p-klinik .qa{display:block}

/* ===== v32: input file tersembunyi tapi tetap dapat diklik lewat label ===== */
.f-file-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
label.f-upload{cursor:pointer;display:block}
label.f-upload:hover{border-color:var(--blue-bright);background:#F6FAFD}
body.p-lapor label.f-upload:hover{border-color:var(--maroon);background:#FBF3F5}
.f-file-hidden:focus + label.f-upload{outline:3px solid var(--blue-bright);outline-offset:2px}

/* ============================================================
   v34: HALAMAN STATIS (Tentang, Pedoman, Disclaimer, dll)
   ============================================================ */
body.p-statis .statis-zone{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;padding:44px 0 20px;align-items:start}
@media(max-width:960px){body.p-statis .statis-zone{grid-template-columns:1fr;gap:32px;padding:32px 0 10px}}

body.p-statis .statis-isi{font-family:var(--serif);font-size:17px;line-height:1.8;color:#22303F;max-width:760px}
body.p-statis .statis-isi h2{font-family:var(--sans);font-size:21px;font-weight:800;color:var(--ink);margin:34px 0 14px;padding-bottom:10px;border-bottom:2px solid var(--line)}
body.p-statis .statis-isi h2:first-child{margin-top:0}
body.p-statis .statis-isi p{margin-bottom:18px}
body.p-statis .statis-isi ul,
body.p-statis .statis-isi ol{margin:0 0 20px 22px}
body.p-statis .statis-isi li{margin-bottom:10px;line-height:1.75}
body.p-statis .statis-isi b{color:var(--ink)}
body.p-statis .statis-isi a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:3px}
body.p-statis .statis-isi a:hover{color:var(--blue-bright)}
body.p-statis .statis-isi blockquote{
  border-left:4px solid var(--blue-bright);background:var(--mist);
  border-radius:0 10px 10px 0;padding:20px 24px;margin:24px 0;
  font-style:italic;font-size:19px;line-height:1.6;color:var(--ink)}
body.p-statis .statis-isi ol{counter-reset:none}

body.p-statis .statis-side{display:flex;flex-direction:column;gap:24px;position:sticky;top:76px}
@media(max-width:960px){body.p-statis .statis-side{position:static}}
body.p-statis .statis-link{
  display:block;font-family:var(--sans);font-size:13.5px;font-weight:600;
  color:var(--muted);padding:10px 0;border-bottom:1px solid var(--line);transition:color .15s}
body.p-statis .statis-link:last-child{border-bottom:0}
body.p-statis .statis-link:hover{color:var(--blue)}
body.p-statis .side-cta p{font-size:12.5px;line-height:1.6;white-space:pre-line}

/* ===== v35: logo transparan — buang latar bawaan img ===== */
.masthead .brand-mark,
.nav-mini img,
.mm-brand img,
.gfoot .fbrand img,
.brand img{
  background:transparent !important;
  object-fit:contain;
  mix-blend-mode:normal;
}
/* ukuran proporsional */
.masthead .brand-mark{width:52px;height:52px}
.nav-mini img{width:26px;height:26px}
.gfoot .fbrand img{width:44px;height:44px}
@media(max-width:640px){.masthead .brand-mark{width:42px;height:42px}}
@media(max-width:400px){.masthead .brand-mark{width:36px;height:36px}}

/* ===== v36: logo mini nav sticky ===== */
.nav-mini img{width:26px;height:26px;object-fit:contain;background:transparent !important}
@media(max-width:640px){.mainnav.stuck .nav-mini img{width:28px;height:28px}}

/* ===== v37: thumbnail dapat diklik ===== */
a.row-thumb{display:block;flex:none;width:220px;aspect-ratio:16/10;border-radius:8px;overflow:hidden}
a.row-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
a.row-thumb:hover img{transform:scale(1.05)}
@media(max-width:640px){a.row-thumb{width:118px;aspect-ratio:1/1}}
a.thumb{display:block;aspect-ratio:16/10;overflow:hidden}
a.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover a.thumb img{transform:scale(1.05)}

/* ===== v38: jarak ticker ke hero ===== */
body.p-home .hero{padding-top:26px}
body.p-home .hero-inner{padding-top:0}
body.p-home .hero-side-head{padding-top:6px}
@media(max-width:960px){body.p-home .hero{padding-top:20px}}
@media(max-width:640px){body.p-home .hero{padding-top:16px}}

/* ============================================================
   v39: PANEL MENU — tata letak seimbang & rapat
   ============================================================ */

/* ---------- DESKTOP: dua kolom setara, TENTANG ikut 2 kolom ---------- */
@media(min-width:701px){
  aside.mmenu{width:660px !important}
  aside.mmenu .mm-grid{
    grid-template-columns:1fr 1fr !important;
    gap:0 34px !important;
    align-content:start !important;
  }
  /* rubrik jadi dua kolom di dalam kolomnya sendiri agar tak terlalu tinggi */
  aside.mmenu nav.mm-col{display:block !important}
  aside.mmenu .mm-l{padding:9px 11px !important;font-size:14px !important}

  /* kolom kanan: Tentang dibuat 2 kolom agar mengisi ruang */
  aside.mmenu .mm-about{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:2px 10px !important;
  }
  aside.mmenu .mm-about a{
    white-space:nowrap !important;
    padding:9px 10px !important;
    font-size:13px !important;
  }
  aside.mmenu .mm-about a:nth-child(3){grid-column:1/-1}

  /* CTA berdampingan agar tidak memanjang ke bawah */
  aside.mmenu .mm-cta2{
    flex-direction:row !important;
    gap:10px !important;
    margin-top:18px !important;
  }
  aside.mmenu .mm-cta2 a{flex:1;padding:12px 8px !important;font-size:13px !important}

  /* garis pemisah lebih halus */
  aside.mmenu .mm-grid > .mm-col:last-child{
    border-left:1px solid rgba(255,255,255,.09);
    padding-left:30px;
  }
}

/* ---------- MOBILE: rapatkan & hilangkan ruang kosong ---------- */
@media(max-width:700px){
  aside.mmenu .mm-grid{padding:0 16px 8px !important}
  aside.mmenu .mm-about{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:2px 10px !important;
  }
  aside.mmenu .mm-about a:nth-child(3){grid-column:1/-1}
  aside.mmenu .mm-cta2{margin-top:12px !important}
  /* blok bawah menempel ke konten, bukan terdorong ke dasar layar */
  aside.mmenu .mm-bottom{margin-top:14px !important;padding:14px 16px 16px !important}
  aside.mmenu{height:auto !important;max-height:100dvh !important}
}

/* ---------- Umum: pemisah antar seksi lebih tegas ---------- */
aside.mmenu .mm-sec2{
  padding:14px 0 7px !important;
  border-top:1px solid rgba(255,255,255,.07);
  margin-top:4px;
}
aside.mmenu .mm-grid > .mm-col:first-child .mm-sec2:first-child,
aside.mmenu .mm-grid > .mm-col:last-child .mm-sec2:first-child{
  border-top:0;margin-top:0;padding-top:8px !important;
}
/* baris login lebih menyatu */
aside.mmenu .mm-login{margin-bottom:14px !important}

/* ============================================================
   v40: PANEL MENU DESKTOP — rubrik 2 kolom, tinggi seimbang
   ============================================================ */
@media(min-width:701px){
  aside.mmenu{width:720px !important;height:auto !important;max-height:100dvh !important}

  /* satu area, dua seksi bertumpuk — bukan dua kolom timpang */
  aside.mmenu .mm-grid{
    display:block !important;
    padding:4px 26px 20px !important;
  }
  aside.mmenu .mm-grid > .mm-col:last-child{
    border-left:0 !important;
    padding-left:0 !important;
  }

  /* RUBRIK: 2 kolom → 9 item jadi 5 baris */
  aside.mmenu nav.mm-col{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:2px 20px !important;
  }
  aside.mmenu nav.mm-col .mm-sec2{grid-column:1/-1}
  aside.mmenu .mm-l{padding:10px 12px !important;font-size:14px !important;white-space:nowrap}

  /* TENTANG: 3 kolom rapat */
  aside.mmenu .mm-about{
    display:grid !important;
    grid-template-columns:1fr 1fr 1fr !important;
    gap:2px 20px !important;
  }
  aside.mmenu .mm-about a{
    padding:9px 12px !important;font-size:13px !important;white-space:nowrap !important;
  }
  aside.mmenu .mm-about a:nth-child(3){grid-column:auto !important}

  /* CTA berdampingan, lebar penuh */
  aside.mmenu .mm-cta2{
    flex-direction:row !important;gap:12px !important;margin-top:20px !important;
  }
  aside.mmenu .mm-cta2 a{flex:1;padding:13px 10px !important;font-size:13.5px !important}

  aside.mmenu .mm-foot2{margin-top:14px !important}
  aside.mmenu .mm-bottom{margin-top:16px !important}
  aside.mmenu .mm-search{margin:14px 26px 2px !important}
  aside.mmenu .mm-head{padding:16px 26px !important}
}

/* ============================================================
   v41: PANEL MENU DESKTOP — batalkan v40, kembali dua kolom
   ============================================================ */
@media(min-width:701px){
  aside.mmenu{width:620px !important}

  /* kembalikan grid dua kolom */
  aside.mmenu .mm-grid{
    display:grid !important;
    grid-template-columns:300px 1fr !important;
    gap:2px 30px !important;
    padding:4px 24px 18px !important;
    align-content:start !important;
  }

  /* RUBRIK kembali satu kolom vertikal */
  aside.mmenu nav.mm-col{
    display:block !important;
    grid-template-columns:none !important;
  }
  aside.mmenu .mm-l{padding:10px 11px !important;font-size:14.5px !important;white-space:nowrap}

  /* TENTANG satu kolom, sejajar dengan rubrik */
  aside.mmenu .mm-about{
    display:block !important;
    grid-template-columns:none !important;
  }
  aside.mmenu .mm-about a{
    display:block !important;
    padding:10px 11px !important;
    font-size:13.5px !important;
    white-space:nowrap !important;
  }
  aside.mmenu .mm-about a:nth-child(3){grid-column:auto !important}

  /* CTA bertumpuk di kolom kanan (mengisi ruang bawah) */
  aside.mmenu .mm-cta2{
    flex-direction:column !important;
    gap:10px !important;
    margin-top:20px !important;
  }
  aside.mmenu .mm-cta2 a{width:100%;padding:13px !important;font-size:13.5px !important}

  /* pemisah kolom */
  aside.mmenu .mm-grid > .mm-col:last-child{
    border-left:1px solid rgba(255,255,255,.09) !important;
    padding-left:26px !important;
  }

  aside.mmenu .mm-head{padding:16px 24px !important}
  aside.mmenu .mm-search{margin:14px 24px 2px !important}
  aside.mmenu .mm-foot2{margin-top:16px !important}
}

/* ===== v46: halaman PUKAT Data ===== */
body.p-data .data-band{background:linear-gradient(150deg,#0C2340,#173B6B)}
body.p-data .data-card{transition:transform .2s, background .2s}
body.p-data a.data-card:hover{transform:translateY(-3px);background:rgba(255,255,255,.09)}
body.p-data .rubrik-head{background:linear-gradient(150deg,#0C2340,#1A5A9E)}
.data-badge{background:rgba(111,177,232,.18);color:#9FCDF0;font-size:10px;font-weight:800;
  letter-spacing:.12em;padding:5px 11px;border-radius:99px;margin-left:10px}
body.p-data .side-cta h4{color:#fff}

/* ===== v47: halaman Kabar Daerah ===== */
body.p-daerah .rubrik-head{background:linear-gradient(150deg,#0C2340,#37506E)}
body.p-daerah .subnav a span{font-size:11px;font-weight:700;margin-left:3px}
body.p-daerah .pop-item .pop-num{
  background:#EAF2FA;color:#1A5A9E;border-radius:7px;
  min-width:28px;height:24px;display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;font-size:12px;
}
body.p-daerah .side-block .pop-item h4{font-size:14px}


/* ===== v49: proporsi kartu pilihan — teks lebih lega ===== */
@media(min-width:701px){
  .feat{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
  .feat .body{padding:30px 32px}
}

/* ===== v50: cegah foto meluber keluar kolom ===== */
.feat{align-items:stretch}
.feat > *{min-width:0}
.feat .thumb{
  position:relative;
  width:100%;
  max-width:100%;
  overflow:hidden;
}
.feat .thumb img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  object-fit:cover;
}
.feat .body{position:relative;z-index:1;background:#fff;min-width:0}

/* ===== v53: slot iklan tayang ===== */
.ad-live{position:relative;text-align:center;border-radius:10px;overflow:hidden;background:#F1F4F8}
.ad-live img{max-width:100%;height:auto;display:block;margin:0 auto}
.ad-live .ad-tag{
  position:absolute;top:6px;right:6px;
  background:rgba(12,35,64,.72);color:#fff;
  font-size:8.5px;font-weight:800;letter-spacing:.12em;
  padding:3px 7px;border-radius:4px;
}