/* ===========================================================
     GAYA LAPANGAN
     Arah visual yang dipilih pada Oktober 2026. Tegas dan
     operasional, meniru papan penunjuk di area kerja: blok warna
     penuh, batas tebal, huruf judul memanjat ke atas, dan tidak
     ada sudut membulat sama sekali.

     Naskah situs tidak ikut berubah. Seluruh perubahan arah ini
     tinggal di dua berkas, yaitu desain-2.css dan beranda.css.
     =========================================================== */
  :root{
    --paper:#ffffff;
    --paper-2:#e4e7ea;      /* abu beton, bukan kertas hangat */
    --ink:#13181d;
    --ink-2:#6d7984;
    --rule:#c8cdd2;
    --rule-2:#dfe3e7;
    --biru:#0b2545;         /* bidang besar */
    --biru-2:#09203d;       /* pita paling atas */
    --merah:#be1522;        /* penanda, dipakai sedikit tapi berani */
    --merah-2:#9d1019;
    --gut:clamp(20px,4vw,56px);
    /* Satu keluarga huruf untuk seluruh situs. Perbedaan antara
       judul, badan tulisan, dan label dikerjakan oleh tebal dan
       ukuran, bukan oleh pergantian huruf. */
    --d:"Plus Jakarta Sans",-apple-system,"Segoe UI",sans-serif;
    --b:"Plus Jakarta Sans",-apple-system,"Segoe UI",sans-serif;
    --m:"Plus Jakarta Sans",-apple-system,"Segoe UI",sans-serif;
  }
  *{box-sizing:border-box}
  /* Laci menu dan pop-up formulir memakai display:flex / block,
     yang mengalahkan bawaan atribut hidden. Tanpa baris ini keduanya
     tetap ikut tata letak meski tertutup, dan membuat halaman melebar. */
  [hidden]{display:none!important}
  html{-webkit-text-size-adjust:100%;overflow-x:hidden;scroll-behavior:smooth}
  body{margin:0;background:var(--paper);color:var(--ink);
    font-family:var(--b);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
  h1,h2,h3{font-family:var(--d);margin:0;font-weight:800;letter-spacing:-.022em;line-height:1.12;
    text-wrap:balance}
  p{margin:0}
  ul{margin:0;padding:0;list-style:none}
  a{color:inherit;text-decoration:none}
  button{font:inherit;-webkit-tap-highlight-color:transparent}
  img{max-width:100%;display:block}
  :focus-visible{outline:2px solid var(--merah);outline-offset:2px}

  /* ---------- kerangka ---------- */
  /* Kerangka dibiarkan selebar layar supaya warna latar tiap bagian
     sampai ke tepi kiri dan kanan. Yang dibatasi lebarnya bukan
     bagiannya, melainkan isinya, lewat jarak samping yang melebar
     sendiri di layar besar. Tanpa ini, blok biru hero berhenti di
     1560 piksel dan menyisakan pita putih di layar lebar. */
  .shell{background:var(--paper)}
  .pad{padding-inline:max(var(--gut), calc((100% - 1560px) / 2 + var(--gut)))}
  .rule{border-top:1px solid var(--rule)}
  .rule-b{border-bottom:1px solid var(--rule)}

  /* index mono, tanda khas arsip */
  .idx{font-family:var(--m);font-size:11px;font-weight:500;letter-spacing:.012em;
    color:var(--merah)}
  .idx.b{color:var(--biru)}
  .idx.q{color:var(--ink-2)}

  /* ---------- pita dokumen paling atas ---------- */
  .docbar{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;
    padding-block:9px;border-bottom:1px solid var(--rule);background:var(--paper-2);
    font-family:var(--m);font-size:10.5px;letter-spacing:.012em;color:var(--ink-2)}
  .docbar b{color:var(--ink);font-weight:600}
  .docbar .sp{margin-left:auto}

  /* ---------- navigasi ---------- */
  .nav{display:flex;align-items:center;gap:28px;height:76px;border-bottom:1px solid var(--rule);
    position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(6px)}
  .brand{display:flex;align-items:center;gap:14px;min-width:0}
  .brand img{height:36px;width:auto}
  .brand .sep{width:1px;height:26px;background:var(--rule)}
  .brand span{font-family:var(--m);font-size:10px;letter-spacing:.012em;
    color:var(--ink-2);line-height:1.4;max-width:78px}
  .menu{display:flex;gap:26px;margin-left:auto;font-family:var(--m);font-size:11.5px;
    letter-spacing:.1em;}
  .menu a,.menu button{background:none;border:0;padding:8px 0;color:var(--ink-2);cursor:pointer;
    border-bottom:2px solid transparent;letter-spacing:inherit}
  .menu a:hover,.menu button:hover{color:var(--ink)}
  .menu a[aria-current=page],.menu button[aria-current=page]{color:var(--ink);border-bottom-color:var(--merah)}

  /* ---------- tombol: persegi, tanpa bayangan ---------- */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;
    padding:0 22px;border:1px solid transparent;cursor:pointer;
    font-family:var(--m);font-size:11.5px;font-weight:500;letter-spacing:.012em;}
  .btn svg{width:15px;height:15px}
  .btn-red{background:var(--merah);color:#fff}
  .btn-red:hover{background:var(--merah-2)}
  .btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
  .btn-line:hover{background:var(--ink);color:var(--paper)}
  .btn-ghost-w{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
  .btn-ghost-w:hover{background:#fff;color:var(--biru)}

  /* ---------- kepala section: rel kiri + judul kanan ---------- */
  .sec{padding-block:clamp(56px,7vw,96px)}
  .sec.tint{background:var(--paper-2)}
  .shead{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,9fr);gap:clamp(20px,4vw,56px);
    padding-top:18px;border-top:1px solid var(--ink);margin-bottom:clamp(32px,4vw,56px)}
  .shead h2{font-size:clamp(30px,4.4vw,52px)}
  .shead .lede{margin-top:16px;color:var(--ink-2);max-width:62ch;font-size:16px}
  .shead .meta{font-family:var(--m);font-size:11px;letter-spacing:.1em;
    color:var(--ink-2);margin-top:10px;line-height:1.7}

  /* ---------- hero ---------- */
  .hero{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);
    gap:clamp(24px,4vw,56px);padding-block:clamp(44px,6vw,78px);align-items:end}
  .hero h1{font-size:clamp(40px,7.4vw,98px);letter-spacing:-.045em}
  .hero h1 em{font-style:normal;color:var(--biru)}
  .hero .sub{margin-top:26px;font-size:17px;color:var(--ink-2);max-width:52ch}
  .hero .acts{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
  .spec{border-top:1px solid var(--ink);padding-top:14px}
  .spec dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:0}
  .spec dt,.spec dd{font-family:var(--m);font-size:11px;letter-spacing:.012em;
    padding:9px 0;border-bottom:1px solid var(--rule-2);margin:0}
  .spec dt{color:var(--ink-2);padding-right:18px}
  .spec dd{color:var(--ink);text-align:right;font-weight:500;min-width:0;overflow-wrap:anywhere}

  /* ---------- gambar ---------- */
  figure{margin:0}
  .fig img{width:100%;height:auto;object-fit:cover}
  .fig figcaption{display:flex;justify-content:space-between;gap:16px;padding-top:9px;
    border-top:1px solid var(--rule);margin-top:9px;
    font-family:var(--m);font-size:10.5px;letter-spacing:.1em;color:var(--ink-2)}
  .bleed{margin-inline:calc(var(--gut) * -1)}
  .bleed img{width:100%}
  .bleed figcaption{padding-inline:var(--gut)}
  .ratio-wide img{aspect-ratio:16/7}
  .ratio-4 img{aspect-ratio:4/3}
  .ratio-53 img{aspect-ratio:5/3}

  /* ---------- daftar nilai: kolom dipisah garis, bukan kartu ---------- */
  .cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--ink)}
  .cols > div{padding:22px 20px 26px;border-right:1px solid var(--rule)}
  .cols > div:last-child{border-right:0}
  .cols > div:first-child{padding-left:0}
  .cols h3{font-size:21px;margin:14px 0 10px}
  .cols p{font-size:14px;color:var(--ink-2)}

  /* ---------- baris layanan ---------- */
  .rows{border-top:1px solid var(--ink)}
  .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,4fr) minmax(0,6fr);
    gap:clamp(16px,3vw,44px);padding:26px 0;border-bottom:1px solid var(--rule);align-items:start}
  .row h3{font-size:clamp(20px,2.2vw,27px)}
  .row p{color:var(--ink-2);font-size:15px;max-width:62ch}
  .row .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
  .tag{font-family:var(--m);font-size:10px;letter-spacing:.1em;
    border:1px solid var(--rule);padding:4px 9px;color:var(--ink-2)}

  /* ---------- prosedur 7 tahap ---------- */
  .proc{border-top:1px solid var(--ink)}
  .proc li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3.6fr) minmax(0,6fr);
    gap:clamp(16px,3vw,44px);padding:20px 0;border-bottom:1px solid var(--rule);align-items:baseline}
  .proc h3{font-size:19px}
  .proc p{color:var(--ink-2);font-size:14.5px}

  /* ---------- pilar ---------- */
  .pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
  .pillar{border-top:1px solid var(--ink);padding-top:16px}
  .pillar h3{font-size:clamp(22px,2.4vw,30px);margin:12px 0 12px}
  .pillar p{color:var(--ink-2);font-size:14.5px}
  .pillar .fig{margin-top:18px}

  /* ---------- galeri ---------- */
  .gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);
    border:1px solid var(--rule)}
  .gal figure{background:var(--paper)}
  .gal img{aspect-ratio:4/3;width:100%;object-fit:cover}
  .gal figcaption{border:0;margin:0;padding:11px 14px 13px;display:block}
  .gal figcaption b{display:block;font-family:var(--d);font-size:13.5px;font-weight:600;
    letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:3px}


  /* Grid dua kolom yang dipakai di halaman isi.
     Sebelumnya ditulis sebagai gaya inline, sehingga tidak bisa
     dilipat jadi satu kolom oleh media query di layar kecil. */
  .duo{display:grid;gap:clamp(24px,4vw,64px);align-items:start}
  .duo-75{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .duo-57{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .duo-29{grid-template-columns:minmax(0,2fr) minmax(0,9fr)}
  @media (max-width:900px){
    .duo-75,.duo-57,.duo-29{grid-template-columns:1fr}
  }


  /* Judul kartu: h3 demi urutan heading, ukuran tetap seperti h4. */
  .card .ch,.doc .ch{font-size:15px;font-weight:600;line-height:1.35;margin:0}

  /* ---------- tabel data ---------- */
  .tbl{width:100%;border-collapse:collapse;font-size:14.5px}
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tbl th,.tbl td{text-align:left;padding:13px 16px 13px 0;border-bottom:1px solid var(--rule)}
  .tbl th{font-family:var(--m);font-size:10.5px;letter-spacing:.012em;
    color:var(--ink-2);font-weight:500;border-bottom-color:var(--ink)}
  .tbl td:first-child{font-family:var(--m);font-size:11.5px;letter-spacing:.012em;color:var(--ink-2);
    white-space:nowrap;width:1%;padding-right:36px;}
  .tbl td strong{font-weight:600}

  /* ---------- pita biru ---------- */
  .band{background:var(--biru);color:#fff;padding-block:clamp(52px,7vw,92px)}
  .band h2{font-size:clamp(28px,4.2vw,50px);max-width:20ch}
  .band p{color:#c3d5ea;margin-top:18px;max-width:52ch;font-size:16px}
  .band .acts{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
  .band .grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    gap:clamp(24px,4vw,56px);align-items:end}
  .band .idx{color:#f0b9bc}
  .band .spec{border-top-color:rgba(255,255,255,.5)}
  .band .spec dt{color:#a9c1dc}
  .band .spec dd{color:#fff}
  .band .spec dt,.band .spec dd{border-bottom-color:rgba(255,255,255,.22)}

  /* ---------- stempel ---------- */
  .stamp{display:inline-block;border:2px solid var(--merah);color:var(--merah);
    padding:9px 16px;transform:rotate(-3deg);
    font-family:var(--m);font-size:10.5px;font-weight:600;letter-spacing:.012em;
    line-height:1.5;text-align:center}
  .stamp b{display:block;font-size:13px;letter-spacing:.1em}

  /* ---------- ceklis ---------- */
  .check li{display:grid;grid-template-columns:20px 1fr;gap:12px;padding:11px 0;
    border-bottom:1px solid var(--rule-2);font-size:14.5px;align-items:start}
  .check svg{width:16px;height:16px;color:var(--biru);margin-top:3px}

  /* ---------- formulir ---------- */
  .form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .f{display:flex;flex-direction:column;gap:7px}
  .f.full{grid-column:1/-1}
  .f label{font-family:var(--m);font-size:10.5px;letter-spacing:.012em;
    color:var(--ink-2)}
  .f label .req{color:var(--merah)}
  .f input,.f select,.f textarea{font-family:var(--b);font-size:15px;color:var(--ink);
    background:var(--paper);border:1px solid var(--rule);border-radius:0;padding:12px 13px;width:100%}
  .f input:focus,.f select:focus,.f textarea:focus{border-color:var(--ink);outline:none}
  .f textarea{min-height:96px;resize:vertical}
  .f ::placeholder{color:#9a9a95}
  .f .err{display:none;font-family:var(--m);font-size:10.5px;letter-spacing:.012em;
    color:var(--merah)}
  .f.bad input,.f.bad select{border-color:var(--merah);background:#fdf6f6}
  .f.bad .err{display:block}
  .note{font-family:var(--m);font-size:10.5px;letter-spacing:.012em;color:var(--ink-2);
    grid-column:1/-1;line-height:1.7}

  /* ---------- tanya jawab ---------- */
  .qa{border-top:1px solid var(--ink)}
  .qa details{border-bottom:1px solid var(--rule)}
  .qa summary{list-style:none;cursor:pointer;padding:18px 0;display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,9fr) 20px;gap:clamp(16px,3vw,44px);align-items:baseline;
    font-family:var(--d);font-weight:600;font-size:17px;letter-spacing:-.01em}
  .qa summary::-webkit-details-marker{display:none}
  .qa summary .pm{font-family:var(--m);color:var(--merah);text-align:right}
  .qa details[open] summary .pm::after{content:"\2212"}
  .qa summary .pm::after{content:"+"}
  .qa .ans{padding:0 0 20px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,9fr) 20px;
    gap:clamp(16px,3vw,44px)}
  .qa .ans p{grid-column:2;color:var(--ink-2);max-width:68ch;font-size:14.5px}

  /* ---------- footer ---------- */
  .foot{border-top:1px solid var(--ink);padding-block:clamp(44px,5vw,72px) 28px;background:var(--paper-2)}
  .foot .top{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,3fr) minmax(0,5fr);
    gap:clamp(24px,4vw,56px)}
  .foot img{height:50px;width:auto;margin-bottom:16px}
  .foot p{color:var(--ink-2);font-size:14px;max-width:44ch}
  .foot h4,.foot .fh{font-family:var(--m);font-size:10.5px;letter-spacing:.012em;
    color:var(--ink);margin:0 0 14px;font-weight:600}
  .foot li{padding:3px 0;font-size:14px;color:var(--ink-2)}
  /* Tautan footer dibuat blok dengan jarak dalam supaya cukup lega
     ditekan dengan jempol di layar ponsel. */
  .foot li a{display:inline-block;padding-block:7px}
  .foot li a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
  .foot .bot{margin-top:clamp(32px,4vw,56px);padding-top:18px;border-top:1px solid var(--rule);
    display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
    font-family:var(--m);font-size:10.5px;letter-spacing:.1em;color:var(--ink-2)}

  /* ---------- laci menu ---------- */
  .mbtn{display:none;align-items:center;gap:9px;margin-left:auto;height:44px;padding:0 15px;
    border:1px solid var(--ink);background:transparent;cursor:pointer;color:var(--ink);
    font-family:var(--m);font-size:11px;letter-spacing:.012em;}
  .mbtn svg{width:17px;height:17px}
  .scrim{position:fixed;inset:0;background:rgba(17,20,23,.55);opacity:0;visibility:hidden;
    transition:opacity .2s,visibility .2s;z-index:60}
  body.nav-open .scrim{opacity:1;visibility:visible}
  .drawer{position:fixed;inset:0 0 0 auto;width:min(360px,86%);background:var(--paper);z-index:61;
    transform:translateX(100%);transition:transform .22s ease;display:flex;flex-direction:column;
    border-left:1px solid var(--ink);overflow-y:auto}
  body.nav-open .drawer{transform:none}
  .drawer .dh{display:flex;align-items:center;justify-content:space-between;
    padding:18px 20px;border-bottom:1px solid var(--ink)}
  .drawer .dh span{font-family:var(--m);font-size:10.5px;letter-spacing:.012em;
    color:var(--ink-2)}
  .xbtn{width:42px;height:42px;display:grid;place-items:center;border:0;background:none;cursor:pointer;color:var(--ink)}
  .xbtn svg{width:19px;height:19px}
  .drawer nav a,.drawer nav button{display:flex;align-items:center;justify-content:space-between;width:100%;
    background:none;border:0;border-bottom:1px solid var(--rule);padding:17px 20px;cursor:pointer;
    font-family:var(--d);font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--ink);text-align:left}
  .drawer nav a[aria-current=page],.drawer nav button[aria-current=page]{color:var(--merah)}
  .drawer nav a span,.drawer nav button span{font-family:var(--m);font-size:10.5px;letter-spacing:.1em;color:var(--ink-2)}
  .dfoot{margin-top:auto;padding:20px;border-top:1px solid var(--ink);display:grid;gap:12px}
  .dfoot .btn{width:100%}
  .dfoot .wa{font-family:var(--m);font-size:10.5px;letter-spacing:.012em;color:var(--ink-2);line-height:1.9}
  .dfoot .wa b{color:var(--ink)}

  /* ---------- pop-up formulir ---------- */
  .mscrim{position:fixed;inset:0;background:rgba(17,20,23,.6);opacity:0;visibility:hidden;
    transition:opacity .2s,visibility .2s;z-index:70}
  body.form-open .mscrim{opacity:1;visibility:visible}
  .modal{position:fixed;z-index:71;left:50%;top:50%;transform:translate(-50%,-47%);
    width:min(620px,calc(100% - 24px));max-height:90dvh;overflow-y:auto;background:var(--paper);
    border:1px solid var(--ink);opacity:0;visibility:hidden;
    transition:opacity .2s,visibility .2s,transform .2s}
  body.form-open .modal{opacity:1;visibility:visible;transform:translate(-50%,-50%)}
  .modal .mh{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;
    padding:22px 24px 18px;border-bottom:1px solid var(--ink)}
  .modal .mh h3{font-size:24px}
  .modal .mh p{font-size:13.5px;color:var(--ink-2);margin-top:8px;max-width:46ch}
  .modal .mb{padding:22px 24px 26px}
  .done{display:none;text-align:center;padding:14px 0 6px}
  .done .stamp{margin-bottom:18px}
  .done h3{font-size:22px;margin-bottom:12px}
  .done p{color:var(--ink-2);font-size:14.5px;max-width:44ch;margin:0 auto 22px}
  .done .acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
  body.sent .modal form{display:none}
  body.sent .modal .done{display:block}

  /* ---------- tombol WhatsApp mengambang ---------- */
  .fab{position:fixed;right:16px;bottom:16px;z-index:35;display:none;align-items:center;gap:9px;
    height:50px;padding:0 18px;background:var(--merah);color:#fff;
    font-family:var(--m);font-size:11px;letter-spacing:.012em;}
  .fab svg{width:19px;height:19px}
  body.nav-open .fab,body.form-open .fab{display:none!important}

  /* ---------- responsif ---------- */
  @media (max-width:1080px){
    .menu{display:none}
    .mbtn{display:inline-flex}
    .hero{grid-template-columns:1fr;gap:34px;align-items:start}
    .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
    .cols > div{border-bottom:1px solid var(--rule)}
    .cols > div:nth-child(2n){border-right:0}
    .cols > div:nth-child(odd){padding-left:0}
    .pillars{grid-template-columns:1fr;gap:32px}
    .gal{grid-template-columns:repeat(2,minmax(0,1fr))}
    .band .grid{grid-template-columns:1fr;align-items:start}
    .foot .top{grid-template-columns:repeat(2,minmax(0,1fr))}
    .fab{display:inline-flex}
  }
  @media (max-width:720px){
    .shead{grid-template-columns:1fr;gap:14px}
    .row,.proc li{grid-template-columns:1fr;gap:8px}
    .row .idx,.proc .idx{margin-bottom:4px}
    /* Tiga kolom tidak muat di ponsel. Nomor pertanyaan dinaikkan
       ke barisnya sendiri, pertanyaan dan tanda +/- di baris bawah. */
    .qa summary,.qa .ans{grid-template-columns:minmax(0,1fr) 20px;gap:4px 12px}
    .qa summary .idx{grid-column:1/-1}
    .qa summary .pm{grid-column:2;grid-row:2}
    .qa .ans p{grid-column:1/-1}
    .cols{grid-template-columns:1fr}
    .cols > div{border-right:0;padding-left:0;padding-right:0}
    .gal{grid-template-columns:1fr}
    .form{grid-template-columns:1fr}
    .foot .top{grid-template-columns:1fr}
    .btn{width:100%}
    .hero .acts .btn{width:100%}
    .docbar .sp{margin-left:0}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

  /* =========================================================
     BERITA - halaman daftar dan halaman baca
     Isi diambil dari admin panel lewat assets/js/berita.js.
     ========================================================= */

  /* daftar berita: satu baris per berita, bergaya arsip */
  .blist{border-top:1px solid var(--ink)}
  .brow{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,7fr) minmax(0,3fr);
    gap:clamp(16px,3vw,44px);padding:24px 0;border-bottom:1px solid var(--rule);align-items:start}
  .brow .idx{padding-top:3px}
  .brow .btxt h3{font-family:var(--d);font-size:clamp(19px,2.1vw,26px);font-weight:700;
    letter-spacing:-.025em;line-height:1.1;margin:0}
  .brow:hover .btxt h3{color:var(--merah)}
  .brow .btxt p{color:var(--ink-2);font-size:14.5px;margin-top:10px;max-width:64ch}
  .brow .btxt .tag{display:inline-block;margin-top:14px}
  .brow .bimg img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--rule)}

  /* halaman baca */
  .bart{max-width:1000px}
  .bart h1{font-size:clamp(30px,4.8vw,62px);margin-top:16px}
  .bart .blede{margin-top:20px;font-size:17.5px;color:var(--ink-2);max-width:62ch}
  .bart .bpenulis{margin-top:14px;font-family:var(--m);font-size:10.5px;letter-spacing:.012em;
    color:var(--ink-2)}
  .bart .bfig{margin-top:clamp(24px,3vw,38px)}
  .bart .bfig img{width:100%;aspect-ratio:16/9;object-fit:cover}
  .bisi{margin-top:clamp(26px,3vw,36px);border-top:1px solid var(--ink);padding-top:26px}
  .bisi p{font-size:16.5px;line-height:1.78;color:var(--ink);max-width:68ch}
  .bisi p+p{margin-top:18px}
  .bisi .bul+p{margin-top:18px}
  .bisi .bul{margin-top:18px;max-width:68ch}
  .bisi .bul li{position:relative;padding:9px 0 9px 24px;font-size:16px;color:var(--ink-2);
    border-bottom:1px solid var(--rule-2);line-height:1.7}
  .bisi .bul li::before{content:"";position:absolute;left:2px;top:19px;width:9px;height:1px;
    background:var(--merah)}
  .bkembali{margin-top:clamp(28px,4vw,44px);padding-top:18px;border-top:1px solid var(--ink);
    font-family:var(--m);font-size:11px;letter-spacing:.012em;}
  .bkembali a:hover{color:var(--merah)}

  /* pesan saat berita belum ada atau belum tersambung */
  .bkosong{border-top:1px solid var(--ink);padding-top:22px}
  .bkosong h1,.bkosong h2{font-size:clamp(23px,3.2vw,34px)}
  .bkosong p{margin-top:12px;color:var(--ink-2);max-width:58ch;font-size:15px}

  @media (max-width:900px){
    .brow{grid-template-columns:minmax(0,2fr) minmax(0,7fr);gap:14px clamp(16px,3vw,32px)}
    .brow .bimg{grid-column:1/-1;max-width:420px}
  }
  @media (max-width:720px){
    .brow{grid-template-columns:1fr;gap:8px}
    .brow .idx{padding-top:0}
    .brow .bimg{grid-column:auto;max-width:none;margin-top:6px}
    .brow .bimg img{aspect-ratio:16/9}
    .bisi p{font-size:15.5px}
  }

  /* Keterangan sumber dan kredit foto pada halaman baca berita.
     Dipisah dari badan tulisan supaya jelas mana tulisan MQ
     dan mana yang berasal dari pihak lain. */
  .bsumber{margin-top:30px;padding-top:18px;border-top:1px solid var(--ink);
    display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 18px;font-size:13.5px}
  .bsumber dt{font-family:var(--m);font-size:10px;letter-spacing:.012em;
    color:var(--ink-2);padding-top:3px}
  .bsumber dd{color:var(--ink);overflow-wrap:anywhere}
  .bsumber a{color:var(--merah-2);text-decoration:underline;text-underline-offset:3px}
  @media (max-width:520px){
    .bsumber{grid-template-columns:1fr;gap:3px 0}
    .bsumber dd{margin-bottom:12px}
  }

  /* ===========================================================
     GAYA LAPANGAN - lapisan bentuk

     Bagian di atas menetapkan warna dan huruf. Bagian ini yang
     mengubah bentuknya: pita atas dan navigasi jadi bidang biru
     tua, hero jadi blok warna penuh, label kecil tidak lagi
     memakai huruf mesin ketik, dan pembatas berubah dari garis
     rambut menjadi batas tebal.

     Semuanya ditulis sebagai lapisan di ujung berkas supaya
     mudah ditelusuri dan mudah dicabut kalau arahnya diganti.
     =========================================================== */

  /* ---------- pita dokumen paling atas ---------- */
  .docbar{background:var(--biru-2);border-bottom:0;color:#9fb3cd;
    font-family:var(--d);font-size:11px;font-weight:400;letter-spacing:.1em;padding-block:10px}
  .docbar b{color:#fff;font-weight:500}

  /* ---------- navigasi ---------- */
  .nav{background:var(--biru);border-bottom:0;height:72px;backdrop-filter:none}
  .brand .sep{background:rgba(255,255,255,.28)}
  .brand span{color:#9fb3cd;font-family:var(--d);font-size:11px;font-weight:400;letter-spacing:.012em}
  .brand img{filter:brightness(0) invert(1)}
  .menu{gap:2px}
  .menu a,.menu button{color:#c3d2e4;border-bottom:0;padding:7px 10px;
    font-family:var(--d);font-size:12.5px;font-weight:400;letter-spacing:.012em;}
  .menu a:hover,.menu button:hover{color:#fff;background:rgba(255,255,255,.08)}
  .menu a[aria-current=page],.menu button[aria-current=page]{
    color:#fff;background:var(--merah);border-bottom:0}
  .mbtn{color:#fff;border-color:rgba(255,255,255,.35)}
  .mbtn:hover{border-color:#fff}

  /* ---------- tombol ---------- */
  .btn{font-family:var(--d);font-size:14px;font-weight:500;letter-spacing:.012em;height:50px}
  .btn-line{border-width:2px}
  .btn-ghost-w{border-width:2px;border-color:rgba(255,255,255,.45)}

  /* ---------- hero jadi blok warna penuh ---------- */
  .hero{background:var(--biru);color:#fff;align-items:center;
    padding-block:clamp(48px,6.5vw,84px)}
  .hero h1{letter-spacing:.004em;line-height:1.04;font-size:clamp(36px,6.4vw,82px)}
  .hero h1 em{font-style:normal;color:#8fb3dd}
  .hero .sub{color:#bdcbdc}
  .hero .idx{color:#fff;background:var(--merah);display:inline-block;
    padding:5px 11px;letter-spacing:.012em}
  .hero .spec{border-top-color:rgba(255,255,255,.4)}
  .hero .spec dt,.hero .spec dd{border-bottom-color:rgba(255,255,255,.18)}
  .hero .spec dt{color:#8fa6c2}
  .hero .spec dd{color:#fff}
  .hero .btn-line{color:#fff;border-color:rgba(255,255,255,.45)}
  .hero .btn-line:hover{background:rgba(255,255,255,.1);border-color:#fff}

  /* ---------- label kecil ---------- */
  .idx{font-family:var(--d);font-size:12px;font-weight:500;letter-spacing:.012em}
  .spec dt,.spec dd{font-family:var(--d);font-size:12.5px;font-weight:400;letter-spacing:.05em}
  .spec{border-top-width:3px}
  .note{font-family:var(--b);font-size:13px;letter-spacing:0;line-height:1.75}

  /* ---------- kepala bagian ---------- */
  .shead{border-top:0;border-bottom:4px solid var(--ink);padding-top:0;padding-bottom:16px}
  .shead h2{letter-spacing:.004em;line-height:1.05}
  .shead .lede{font-size:15px}

  /* ---------- daftar baris dan tahapan ---------- */
  .rows{border-top:4px solid var(--ink)}
  .row{border-bottom:1px solid var(--rule);border-left:6px solid var(--merah);
    padding-left:clamp(14px,2vw,22px)}
  .row h3{font-size:19px;letter-spacing:.01em}
  .proc{border-top:4px solid var(--ink)}
  .proc li{border-left:6px solid var(--biru);padding-left:clamp(14px,2vw,22px)}
  .proc h3{letter-spacing:.01em}

  /* ---------- tabel ---------- */
  .tbl th{font-family:var(--d);font-size:12.5px;font-weight:500;letter-spacing:.012em;
    border-bottom:3px solid var(--ink)}
  .tbl td strong{font-family:var(--d);font-weight:500;letter-spacing:.02em;}

  /* ---------- pita ajakan ---------- */
  .band{background:var(--biru)}
  .band .idx{background:var(--merah);color:#fff;display:inline-block;padding:5px 11px}
  .band .spec dt,.band .spec dd{font-family:var(--d)}

  /* ---------- cap dan tanya jawab ---------- */
  .stamp{font-family:var(--d);font-weight:500;letter-spacing:.1em;transform:none;
    border-width:3px}
  .qa summary{font-family:var(--d);font-weight:500;font-size:18px;letter-spacing:.02em;
    }
  .qa details{border-left:6px solid var(--rule);padding-left:clamp(14px,2vw,22px)}
  .qa details[open]{border-left-color:var(--merah)}

  /* ---------- formulir ---------- */
  .f label{font-family:var(--d);font-size:12.5px;font-weight:400;letter-spacing:.05em}
  .f input,.f select,.f textarea{border-width:2px}

  /* ---------- laci menu di layar kecil ---------- */
  .drawer{background:var(--biru);color:#fff}
  .drawer .dh{border-bottom-color:rgba(255,255,255,.2);color:#9fb3cd}
  .drawer .dh span{font-family:var(--d);letter-spacing:.1em}
  .drawer nav a,.drawer nav button{color:#fff;border-bottom-color:rgba(255,255,255,.14);
    font-family:var(--d);font-weight:400;letter-spacing:.012em;}
  .drawer nav a span,.drawer nav button span{color:#7f9cc0}
  .drawer nav a[aria-current=page]{background:var(--merah)}
  .drawer .xbtn{color:#fff}
  .drawer .dfoot{border-top-color:rgba(255,255,255,.2)}
  .drawer .wa{color:#bdcbdc}
  .drawer .wa b{color:#fff}

  /* ---------- keterangan sumber berita ---------- */
  .bsumber{border-top-width:3px}
  .bsumber dt{font-family:var(--d);font-size:12px;font-weight:400;letter-spacing:.012em}

  /* ---------- daftar dan baca berita ---------- */
  .bart .blede{font-size:17px}
  .bkembali a{font-family:var(--d);letter-spacing:.012em;}

  /* ===========================================================
     RUANG SOP DAN CONTOH BERKAS

     Dua bagian yang kerangkanya sudah jadi tetapi isinya masih
     menunggu naskah resmi dari pengurus. Penanda "menunggu"
     dibuat terlihat jelas supaya tidak pernah tertukar dengan
     isi yang sudah sah.
     =========================================================== */
  .sop{border-top:4px solid var(--ink)}
  .sop .baris{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,5fr) minmax(0,5fr) auto;
    gap:clamp(14px,2.6vw,36px);padding:22px 0;border-bottom:1px solid var(--rule);
    align-items:start;border-left:6px solid var(--biru);
    padding-left:clamp(14px,2vw,22px)}
  .sop h3{font-size:18px;letter-spacing:.01em}
  .sop p{color:var(--ink-2);font-size:14.5px}
  .tunggu{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
    border:2px solid var(--rule);color:var(--ink-2);padding:5px 11px;
    font-family:var(--d);font-size:12px;font-weight:400;letter-spacing:.012em;}
  .tunggu::before{content:"";width:8px;height:8px;background:var(--ink-2);flex:none}
  .tunggu.siap{border-color:var(--merah);color:var(--merah)}
  .tunggu.siap::before{background:var(--merah)}

  /* Lima berkas dibagi tiga lalu dua, bukan empat lalu satu,
     supaya tidak ada kartu yang berdiri sendirian di barisnya. */
  .berkas{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));
    gap:clamp(14px,2.2vw,20px)}
  @media (min-width:1080px){ .berkas{grid-template-columns:repeat(3,minmax(0,1fr))} }
  .berkas article{background:var(--paper);border:1px solid var(--rule);
    border-top:4px solid var(--biru);padding:22px 22px 24px;
    display:flex;flex-direction:column;gap:11px;min-width:0}
  .sec.tint .berkas article{background:var(--paper)}
  .berkas .kode{font-family:var(--d);font-size:12.5px;font-weight:500;letter-spacing:.012em;
    color:var(--merah)}
  .berkas h3{font-size:18px;letter-spacing:.01em}
  .berkas p{color:var(--ink-2);font-size:14px}
  .berkas .kaki{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule-2)}

  @media (max-width:860px){
    .sop .baris{grid-template-columns:minmax(0,1fr) minmax(0,6fr);gap:10px 18px}
    .sop .baris .tunggu{grid-column:2}
  }
  @media (max-width:560px){
    .sop .baris{grid-template-columns:1fr}
    .sop .baris .tunggu{grid-column:1}
  }

  /* ===========================================================
     PERBAIKAN KETERBACAAN DAN LAYAR KECIL

     Empat hal yang diperbaiki di sini.

     Satu, tombol WhatsApp mengambang menutupi baris terakhir
     daftar keterangan di hero. Sekarang bagian yang berpotensi
     tertutup diberi ruang bawah.

     Dua, daftar keterangan hero memaksa nama dan nilainya berbagi
     satu baris sempit, sehingga nilainya terpatah-patah. Di layar
     kecil keduanya ditumpuk.

     Tiga, label kecil seperti Catatan dan Cakupan tadinya berdiri
     sendirian jauh di atas tulisan yang diterangkannya. Sekarang
     menempel rapat sebagai kepala kecil.

     Empat, paragraf catatan di akhir bagian tidak punya penanda
     apa pun. Sekarang diberi garis kiri supaya jelas itu catatan,
     bukan kalimat yang terputus dari paragraf sebelumnya.
     =========================================================== */

  .note{border-left:3px solid var(--rule);padding-left:14px;max-width:84ch}

  .duo > .idx:first-child,.duo > .idx.q:first-child{margin-bottom:-6px}

  @media (max-width:860px){
    /* nama dan nilai ditumpuk, tidak lagi berebut satu baris */
    .spec dl{grid-template-columns:1fr}
    .spec dt{padding:10px 0 0;border-bottom:0}
    .spec dd{text-align:left;padding:2px 0 10px;font-size:14px}
    /* ruang supaya baris terakhir tidak tertutup tombol mengambang */
    .hero .spec,.band .spec{padding-bottom:62px}
    .duo,.duo-75,.duo-57,.duo-29{gap:10px}
    .duo > .idx,.duo > .idx.q{margin-bottom:0}
  }

  /* hero yang isinya tinggal satu kolom dibiarkan melebar sendiri,
     tidak menyisakan kolom kosong di sebelah kanan */
  .hero > div:only-child{grid-column:1/-1;max-width:70ch}

  /* ---------- tujuh tahap kerja sama jadi garis waktu ----------
     Bentuknya disamakan dengan alur kerja di beranda: satu garis
     tegak yang menyambung tiap tahap, dibaca dari atas ke bawah. */
  .proc{border-top:0;max-width:880px}
  .proc li{position:relative;display:grid;
    grid-template-columns:38px minmax(0,1fr);column-gap:20px;row-gap:4px;
    align-items:start;border-bottom:0;border-left:0;padding:0 0 26px}
  .proc li:last-child{padding-bottom:0}
  .proc li::before{content:"";position:absolute;left:18px;top:40px;bottom:0;
    width:2px;background:var(--rule)}
  .proc li:last-child::before{display:none}
  .proc li > .idx{grid-column:1;grid-row:1/span 2;width:38px;height:38px;
    display:grid;place-items:center;background:var(--biru);color:#fff;
    font-size:13px;font-weight:700;letter-spacing:0;font-variant-numeric:tabular-nums}
  .proc h3{grid-column:2;grid-row:1;align-self:center;font-size:18px}
  .proc p{grid-column:2;grid-row:2;color:var(--ink-2);max-width:72ch}

  /* ===========================================================
     PENYEGARAN TAMPILAN

     Arahnya: ruang kosong yang mengerjakan pemisahan, bukan garis
     dan kotak. Tiga hal pokok yang diubah.

     Satu, kepala bagian. Tadinya label kecil berdiri di kolom
     sempit sebelah kiri judul, menyisakan ruang menganga dan
     membuat judul mulai jauh dari tepi. Sekarang label duduk di
     atas judul, rata kiri, dan judulnya diperbesar.

     Dua, daftar baris dan tabel kehilangan batas tebal serta
     garis merah di sisi kiri. Pemisah antarbaris cukup satu garis
     tipis, selebihnya dikerjakan oleh jarak.

     Tiga, ukuran huruf badan tulisan dinaikkan. Ukuran lama
     dirancang untuk huruf sempit, dan terasa kekecilan setelah
     hurufnya diganti.
     =========================================================== */

  /* ---------- kepala bagian ---------- */
  .shead{grid-template-columns:1fr;gap:12px;border-bottom:0;padding-bottom:0;
    margin-bottom:clamp(28px,3.6vw,44px);max-width:70ch}
  .shead h2{font-size:clamp(28px,3.6vw,42px);line-height:1.14;letter-spacing:-.025em}
  .shead .lede{font-size:16.5px;line-height:1.7;color:var(--ink-2);margin-top:4px}
  .shead .idx{font-size:13px;font-weight:600;letter-spacing:.01em}

  /* ---------- daftar baris ---------- */
  .rows{border-top:1px solid var(--rule)}
  .row{border-left:0;padding:clamp(22px,2.6vw,30px) 0;
    grid-template-columns:minmax(0,1fr) minmax(0,4fr) minmax(0,6fr)}
  .row h3{font-size:clamp(19px,1.6vw,22px)}
  .row p{font-size:15.5px;line-height:1.75;color:var(--ink-2)}
  .row .idx{align-self:start;padding-top:3px}

  /* ---------- tabel ---------- */
  .tbl th{border-bottom:1px solid var(--ink)}
  .tbl th,.tbl td{padding:16px 18px 16px 0;font-size:15px}
  .tbl td strong{font-weight:700}

  /* ---------- badan tulisan ---------- */
  body{font-size:16px;line-height:1.7}
  .hero .sub{font-size:17.5px;line-height:1.65}
  .check li{font-size:15.5px;padding:13px 0;line-height:1.65}
  .qa summary{font-size:17px}
  .note{font-size:14px;line-height:1.8}
  .sop p{font-size:15px}
  .berkas p{font-size:15px}
  .proc p{font-size:15.5px;line-height:1.75}

  /* ---------- label yang berdiri sendiri di kolom sempit ---------- */
  .duo-29{grid-template-columns:1fr;gap:10px}
  .duo-29 > .idx{margin-bottom:-2px}

  /* ---------- galeri dokumentasi ---------- */
  /* jarak antarbaris dibuat lebih lega daripada antarkolom, karena
     di bawah tiap foto masih ada keterangannya */
  .gal{column-gap:clamp(16px,2vw,26px);row-gap:clamp(28px,3.4vw,46px);
    background:transparent;border:0}
  .gal figure{background:transparent}
  .gal img{border:1px solid var(--rule-2)}
  .gal figcaption{padding:13px 0 0}
  .gal figcaption b{font-size:15.5px}

  /* ---------- visi dan misi ----------
     Label Visi dan Misi tadinya sekecil keterangan gambar,
     sementara kalimat visinya setebal judul. Sekarang keduanya
     ditata sebagai satu pasangan yang seimbang: label jelas
     terbaca, kalimat visi besar tapi tidak sekaku judul, dan
     butir misi cukup lega untuk dibaca berurutan. */
  .idx.b{font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--biru)}
  .pernyataan{font-family:var(--d);font-size:clamp(21px,2.1vw,26px);font-weight:600;
    letter-spacing:-.02em;line-height:1.45;margin-top:14px;max-width:34ch;color:var(--ink)}
  .duo-57 .check{margin-top:14px}
  .duo-57 .check li{font-size:16px;padding:15px 0;line-height:1.7}

  /* Galeri sekarang berisi empat foto, bukan enam. Tiga kolom
     menyisakan satu foto sendirian di baris kedua, jadi kolomnya
     dibiarkan menyesuaikan lebar yang tersedia: empat sejajar di
     layar lebar, dua-dua di layar sedang, satu di ponsel. */
  @media (min-width:1100px){
    .gal{grid-template-columns:repeat(4,minmax(0,1fr))}
  }