/* ===========================================================================
   Halaman berita
   ---------------------------------------------------------------------------
   Menumpang seluruh token pada portal.css — warna, radius, bayangan, dan
   tumpukan huruf tidak ada yang baru di sini, sehingga mode gelap, kontras
   tinggi, dan pengatur ukuran teks di panel aksesibilitas ikut bekerja tanpa
   satu baris tambahan.

   Ditaruh terpisah, bukan disisipkan ke portal.css, karena berkas itu hanya
   dimuat halaman berita. Rancangannya mengikuti docs/mockup-berita.html.
   =========================================================================== */

/* --- Judul halaman ------------------------------------------------------- */

/* Versi ringkas dari area biru beranda. Beranda memakai area tinggi berikut
   foto Bupati dan Wakil Bupati; di sini pembaca datang untuk membaca daftar,
   dan mengulang sorot beranda akan mendorong berita pertama keluar layar. */
.b-judul {
    background: linear-gradient(160deg, var(--sorot-awal), var(--sorot-akhir));
    color: var(--teks-balik);
    padding: 26px 0 22px;
    border-bottom: 1px solid var(--sorot-kaki);
}
.b-judul h1 {
    margin: 0 0 5px;
    font-size: clamp(20px, 3vw, 26px);
    letter-spacing: -0.01em;
}
.b-judul p { margin: 0; font-size: 14px; opacity: 0.92; }

/* --- Bilah cari ---------------------------------------------------------- */

/* Satu kotak untuk kata kunci berita sekaligus nama instansi. Menggantikan dua
   medan berlabel yang dulu ada di sini — kotak cari dan daftar pilihan
   instansi.

   Latar dan garisnya sama dengan bilah sebelumnya, jadi tempatnya di halaman
   tetap terbaca sebagai "baris alat di bawah judul". */
.b-saring-bar {
    background: var(--latar-tinggi);
    border-bottom: 1px solid var(--garis);
    padding: 12px 0;
}
.b-saring {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* Kotak cari: pendek saat diam, memanjang saat disentuh atau difokus.

   Yang dianimasikan lebar kotaknya, dan itu memang menghitung ulang tata
   letak — tetapi hanya di dalam satu baris alat yang isinya empat butir, bukan
   di tengah halaman. Butir di kanannya bergeser, dan justru itu yang
   diinginkan: kotaknya melebar ke arah ruang yang memang kosong.

   :focus-within, bukan :focus pada input-nya: yang harus tetap panjang adalah
   kotaknya selama kursor teks masih di dalamnya. Dengan :hover saja, kotak yang
   sedang diketik akan menyusut kembali begitu tetikus bergeser sedikit — dan
   kata kunci yang sedang ditulis terpotong dari pandangan.

   .b-cari-terisi menahannya tetap panjang ketika ada kata kunci yang sedang
   berlaku. Kotak yang menyusut menyembunyikan kata kunci yang sedang menyaring
   halaman, dan pengunjung kehilangan satu-satunya keterangan tentang MENGAPA
   daftarnya hanya berisi sedikit berita. */
.b-cari {
    flex: 0 1 auto;
    width: clamp(180px, 34vw, 260px);
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--garis-tegas);
    border-radius: 999px;
    background: var(--latar);
}
.b-cari:hover,
.b-cari:focus-within,
.b-cari-terisi { width: min(100%, 560px); }

/* Tepinya berganti ke --fokus, sama dengan kotak pencarian beranda: satu
   kebiasaan tanda fokus untuk seluruh portal. Cincinnya diturunkan dari token
   yang sama, bukan warna tetap, supaya mode kontras tinggi yang memaksa
   --fokus menjadi hitam ikut terbawa. */
.b-cari:focus-within {
    border-color: var(--fokus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fokus) 24%, transparent);
}

.b-cari svg {
    width: 16px;
    height: 16px;
    flex: none;
    fill: none;
    stroke: var(--teks-lembut);
    stroke-width: 2;
    stroke-linecap: round;
}

/* Tepi dan latarnya dilepas, bukan diwarnai ulang: yang menggambar kotaknya
   adalah .b-cari di atas. Cincin fokus bawaan juga dilepas karena
   :focus-within pembungkusnya sudah menampilkannya sekali. */
.b-cari input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: none;
    padding: 9px 0;
    font: inherit;
    font-size: 14px;
    color: var(--teks);
}
.b-cari input:focus-visible { outline: none; }
.b-cari input::placeholder {
    color: var(--teks-lembut);

    /* Dipotong dengan elipsis, bukan dibiarkan terpangkas di tengah huruf:
       pada lebar diamnya, ajakan "Cari berita atau instansi..." memang tidak
       muat seluruhnya, dan potongan bertitik-tiga memberi tahu bahwa masih ada
       lanjutannya. */
    text-overflow: ellipsis;
}

/* Silang bawaan Safari/Chrome dilepas; "Bersihkan" di ujung bilah sudah
   mengerjakan hal yang sama dan tampil di seluruh peramban. */
.b-cari input::-webkit-search-cancel-button { display: none; }

/* --- Petunjuk "Tekan Enter" ---------------------------------------------- */

/* Muncul hanya setelah ada yang diketik, BUKAN saat kotaknya disentuh.

   Sebelumnya ia ikut muncul bersama pemanjangan kotak, dan itu terlalu dini:
   yang baru menyentuh kotaknya belum punya apa pun untuk dikirim, sehingga
   petunjuk mengirim di sana menjawab pertanyaan yang belum diajukan. Yang
   sudah mengetik justru sedang mencari tahu apa langkah berikutnya — di situlah
   petunjuknya berguna.

   :not(:placeholder-shown) adalah cara CSS menanyakan "sudah ada isinya?":
   ajakan mengetik hanya tampil selama medannya kosong. Pemilih saudara ~ dapat
   dipakai karena petunjuk ini memang ditulis SESUDAH medannya di Blade —
   pemilih saudara hanya memandang ke bawah.

   Tanpa JavaScript sama sekali, dan itu penting: petunjuk yang menunggu skrip
   akan hilang tepat pada peramban yang paling membutuhkannya. */
.b-cari-enter {
    flex: none;
    color: var(--teks-lembut);
    font-size: 11.5px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;

    /* max-width, BUKAN width. Lebar ke `auto` tidak dapat dianimasikan sama
       sekali — peralihan yang ditulis untuknya diam-diam menjadi lompatan.
       max-width punya kedua ujung yang pasti, jadi ia benar-benar meluncur.

       Margin negatif menyerap jarak antarbutir .b-cari selama petunjuknya
       tersembunyi. Tanpa itu, kotak cari kehilangan 8px selamanya demi butir
       yang sedang tidak terlihat. */
    max-width: 0;
    margin-inline-start: -8px;
    opacity: 0;
    transform: translateX(10px);
    overflow: hidden;
}
.b-cari input:not(:placeholder-shown) ~ .b-cari-enter {
    max-width: 120px;
    margin-inline-start: 0;
    opacity: 1;
    transform: none;
}

/* --- Tombol kirim yang tak terlihat sampai difokus ----------------------- */

/* Polanya sama dengan .lewati di portal.css: disingkirkan dari pandangan,
   BUKAN dari form. Menekan Enter di kotak cari sudah cukup — tombol ini untuk
   pembaca layar dan untuk yang menelusuri dengan Tab.

   Dikembalikan sepenuhnya saat difokus, jadi tidak ada perhentian Tab yang
   kosong. Perhentian yang tidak menampilkan apa pun terbaca sebagai fokus yang
   hilang, dan itu lebih buruk daripada tombol yang selalu terlihat. */
.b-kirim-diam:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    min-height: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Keterangan pencarian nihil.

   Memakai pasangan --bahaya / --bahaya-latar yang sudah ada di palet dan sudah
   punya nilainya sendiri di keempat mode, termasuk kontras tinggi. Tidak ada
   warna baru yang diperkenalkan untuk ini: warna peringatan yang dikarang
   sendiri akan meleset dari yang dipakai bagian lain portal, dan mode kontras
   tinggi tidak akan punya jawabannya.

   Nadanya memang lebih tegas daripada versi sebelumnya yang kelabu — itu yang
   diminta. Yang ditahan tinggal ukurannya: keping sekali baris, menyesuaikan
   isinya, dan tidak melebar mengisi sisa baris. Diregangkan, ia membentang
   sampai tepi kanan bilah dan menyisakan bidang berwarna panjang di belakang
   tiga kata — jauh lebih mencolok daripada "agak".

   Hilang sendiri setelah lima detik; pewaktunya di portal.js, sebab
   prefers-reduced-motion memaksa seluruh animation-delay menjadi 0ms dan
   pewaktu berbasis animasi akan melenyapkannya seketika bagi yang justru paling
   perlu waktu membaca. */
.b-nihil {
    flex: 0 1 auto;
    max-width: min(100%, 420px);
    min-width: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid color-mix(in srgb, var(--bahaya) 35%, transparent);
    border-radius: 999px;
    background: var(--bahaya-latar);
    color: var(--bahaya);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.b-nihil svg {
    width: 15px;
    height: 15px;
    flex: none;
    fill: none;
    stroke: currentcolor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Dipasang portal.js saat pewaktunya habis. Elemennya dilepas dari aliran
   setelah memudar, bukan hanya diredupkan: keping tembus yang tetap memakan
   ruang menyisakan lubang di bilah cari yang tidak dapat dijelaskan siapa
   pun. */
.b-nihil-pudar {
    opacity: 0;
    visibility: hidden;
}

.b-saring-semua {
    flex: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--utama-kuat);
    text-decoration: none;
    padding: 0 4px;
}

/* --- Keping saringan tahun yang sedang berlaku ----------------------------
   Menampilkan tahun yang menyaring, dan sekaligus melepasnya bila ditekan.
   Sebentuk dengan .b-cocok-keping di bawah — keduanya keping berlatar aksen di
   bilah yang sama, dan membedakannya hanya akan membuat pengunjung menduga
   keduanya berperilaku lain.

   Bertepi TEGAS, tidak seperti keping instansi yang bertepi lembut: keping ini
   menyatakan sesuatu yang sedang BERLAKU atas daftar di bawahnya, bukan
   menawarkan jalan pintas. Perbedaan tebal tepinya cukup untuk memisahkan
   keduanya tanpa memakai warna kedua. */
.b-saring-lepas {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 0 11px;
    border: 1px solid var(--utama-kuat);
    border-radius: 999px;
    background: color-mix(in srgb, var(--utama-kuat) 12%, transparent);
    color: var(--utama-kuat);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.b-saring-lepas:hover { background: color-mix(in srgb, var(--utama-kuat) 22%, transparent); }

/* Tanda kali dibesarkan sedikit dan diredupkan: pada 12,5px ia nyaris tak
   terlihat di samping angka tahun, dan keping yang tidak menampakkan cara
   melepasnya terbaca sebagai label mati. */
.b-saring-lepas-kali {
    font-size: 15px;
    line-height: 1;
    opacity: 0.75;
}

/* --- Instansi yang cocok ------------------------------------------------- */

/* Baris keping di bawah kotak cari. Muncul hanya ketika ada kata kunci yang
   namanya cocok dengan satuan kerja — kalau tidak, barisnya tidak digambar
   sama sekali alih-alih tampil kosong. */
.b-cocok {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    padding-top: 10px;
}
.b-cocok-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--teks-lembut);
    margin-right: 2px;
}
.b-cocok-keping {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid color-mix(in srgb, var(--utama-kuat) 32%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--utama-kuat) 9%, transparent);
    color: var(--utama-kuat);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.b-cocok-keping:hover { background: color-mix(in srgb, var(--utama-kuat) 18%, transparent); }

/* --- Tulisan di atas isian aksen ------------------------------------------ */

/* Satu token untuk seluruh elemen yang BERLATAR --utama-kuat, bukan
   --teks-balik langsung.

   Alasannya terukur: di mode gelap --utama-kuat menjadi warna MUDA — #a8cbec
   pada tema bawaan portal, dan sejak tema-opd.css punya varian gelap, warna
   muda juga pada keenam tema satuan kerja. Sementara itu --teks-balik tetap
   putih. Putih di atas biru muda bernisbah sekitar 1,4:1: tombol dan keping
   terpilih yang tidak terbaca justru pada mode yang dipilih orang untuk
   memudahkan matanya.

   Ditaruh di :root, bukan pada masing-masing elemen, supaya elemen isian
   berikutnya tidak perlu menemukan ulang keputusan yang sama — dan supaya
   satu tempat saja yang harus diperiksa untuk membuktikan janjinya. */
:root { --teks-atas-utama: var(--teks-balik); }

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="terang"]) { --teks-atas-utama: var(--latar); }
}
:root[data-tema="gelap"] { --teks-atas-utama: var(--latar); }

.b-saring-tombol {
    flex: none;
    min-height: 40px;
    padding: 0 20px;
    border: 1px solid var(--utama-kuat);
    border-radius: 10px;
    background: var(--utama-kuat);
    color: var(--teks-atas-utama);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.b-saring-tombol:hover { background: var(--utama); border-color: var(--utama); }

/* Di layar sempit kotaknya penuh lebar sejak awal, TANPA memanjang saat
   disentuh.

   Bukan penyederhanaan: di layar sentuh tidak ada "hover" sama sekali, jadi
   keadaan pendeknya tidak akan pernah bisa dilepas kecuali dengan menyentuh
   kotaknya — dan kotak yang harus disentuh dulu supaya cukup lebar untuk
   diketik adalah satu langkah yang tidak menghasilkan apa-apa. Lebar penuh 360px
   pun hanya memuat satu kotak, jadi tidak ada ruang yang dihemat dengan
   memendekkannya.

   Tingginya sekaligus dinaikkan ke 44px — target sentuh WCAG yang dipakai
   portal.css. Di tetikus 40px sudah cukup; yang membutuhkan 44px adalah jempol,
   dan justru di lebar inilah jempol yang memakainya. */
@media (max-width: 560px) {
    .b-cari,
    .b-cari:hover,
    .b-cari:focus-within { flex: 1 1 100%; width: 100%; }

    .b-saring-tombol { flex: 1 1 auto; }

    .b-cari,
    .b-saring-tombol { min-height: 44px; }

    .b-saring-semua {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* --- Daftar berita ------------------------------------------------------- */

.b-badan { padding: 22px 0 34px; }

.b-opd {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--utama-kuat);
    text-decoration: none;
}
.b-opd::before {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 4px;
    /* Token tema, BUKAN --biru-600/500 langsung. Keping ini satu-satunya sisa
       yang tetap biru saat satuan kerja memilih tema lain, dan biru di antara
       hijau terbaca sebagai lencana milik orang lain alih-alih penanda OPD.

       Di halaman apex tema tidak dipasang, sehingga --utama tetap biru resmi
       portal — di sana keping ini memang menandai banyak OPD sekaligus. */
    background: linear-gradient(150deg, var(--utama-kuat), var(--utama));
    flex: none;
}

.b-waktu {
    font-size: 12.5px;
    color: var(--teks-lembut);
    font-variant-numeric: tabular-nums;
}

/* --- Kaki kartu: tanggal dan jumlah suka -----------------------------------
   Berjauhan ke dua ujung, bukan berdampingan. Keduanya keterangan yang tidak
   berhubungan — kapan terbitnya, dan berapa yang menyukainya — dan dua
   keterangan berbeda yang ditaruh bersebelahan pada kartu sempit terbaca
   sebagai satu kalimat: "13 Agustus 2026 3".

   align-items: baseline, bukan center: tanggal 12,5px dan angka suka 12,5px
   dengan lambang hati 13px di depannya tidak pernah setinggi sama persis, dan
   yang harus sebaris adalah huruf-hurufnya, bukan kotaknya. */
.b-kartu-kaki {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

/* Angkanya sewarna tanggal di sebelahnya — ia keterangan, bukan seruan — dan
   JEMPOLNYA yang berwarna. Mewarnai angkanya sekalian membuat kaki kartu punya
   dua warna yang berebut, dan yang kalah justru tanggalnya.

   var(--utama), token yang sama dengan jempol pada tombol suka: keduanya
   lambang yang sama untuk hal yang sama, dan di halaman satuan kerja keduanya
   ikut bertema bersama-sama. Warna yang ditulis tetap akan lolos dari mode
   gelap, mode kontras tinggi, dan tema satuan kerja sekaligus — ketiganya tanpa
   satu pun galat.

   Jempolnya 16px sementara hurufnya 13px, jadi ia sedikit lebih besar daripada
   satu huruf. Itu batas yang masih terbaca sebagai penanda di depan angka;
   lebih besar lagi ia mulai terbaca sebagai tombol yang dapat ditekan —
   padahal kartu ini tidak menyediakan penekanan apa pun untuknya. */
.b-suka-nilai {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
    font-size: 13px;
    color: var(--teks-lembut);
    font-variant-numeric: tabular-nums;
}
.b-suka-nilai svg {
    width: 16px;
    height: 16px;
    fill: var(--utama);
    stroke: none;
}

.b-gambar {
    background: linear-gradient(135deg, rgb(27 85 138 / 18%), rgb(18 180 124 / 14%)),
                var(--latar-lembut);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.b-gambar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b-gambar span {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teks-lembut);
}

/* Berita teratas, ditampilkan lebih besar. */
.b-utama {
    position: relative;
    display: grid;
    border: 1px solid var(--garis-lembut);
    border-radius: var(--lengkung);
    background: var(--latar-tinggi);
    overflow: hidden;
    box-shadow: var(--bayang-1);
    margin-bottom: 18px;
}
@media (min-width: 700px) { .b-utama { grid-template-columns: 1.2fr 1fr; } }
.b-utama .b-gambar { min-height: 190px; }
.b-utama-isi { padding: 18px 20px 20px; display: grid; align-content: start; gap: 9px; }
.b-utama-isi h2 { margin: 0; font-size: clamp(17px, 2.2vw, 21px); line-height: 1.3; }
.b-utama-isi h2 a { color: inherit; text-decoration: none; }
.b-utama-isi h2 a:hover { color: var(--utama-kuat); }
.b-kutip { margin: 0; font-size: 14.5px; color: var(--teks-lembut); }

.b-petak { display: grid; gap: 14px; }
@media (min-width: 620px) { .b-petak { grid-template-columns: 1fr 1fr; } }
@media (min-width: 940px) { .b-petak { grid-template-columns: repeat(3, 1fr); } }

.b-kartu {
    position: relative;
    border: 1px solid var(--garis-lembut);
    border-radius: var(--lengkung);
    background: var(--latar-tinggi);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr;
}
.b-kartu .b-gambar { min-height: 128px; }
.b-kartu-isi { padding: 13px 14px 15px; display: grid; gap: 7px; align-content: start; }
.b-kartu h3 { margin: 0; font-size: 15px; line-height: 1.35; }
.b-kartu h3 a { color: inherit; text-decoration: none; }
.b-kartu h3 a:hover { color: var(--utama-kuat); }

/* --- Seluruh kartu dapat ditekan ----------------------------------------- */

/* Kartu berita seluruhnya menuju beritanya, bukan hanya barisan huruf judulnya.
   Sasaran tekan judul dua kata pada kartu selebar 300px hanya sekitar seperlima
   permukaan kartu — dan sisanya, termasuk gambarnya, tidak melakukan apa pun
   saat ditekan. Kartu di beranda sudah lama begini: di sana SELURUH kartu
   memang satu <a>.

   Caranya lapisan tembus dari judulnya, bukan membungkus kartu dengan <a>.
   Bedanya menentukan:

     - Tetap SATU tautan per kartu. Membungkus kartu berarti tautan yang
       memuat gambar, nama satuan kerja, dan tanggal sekaligus, dan pembaca
       layar membacakan seluruhnya sebagai satu nama tautan yang panjang.
     - Judulnya tetap <h3> di dalam <article>. Susunan itu yang membuat daftar
       berita dapat ditelusuri per judul oleh pembaca layar.
     - Tautan kedua di dalam kartu — nama satuan kerja — tetap bisa ditekan
       sendiri, cukup dengan menaikkannya di atas lapisan ini.

   Yang hilang: menyorot teks di dalam kartu dengan tetikus. Itu memang harga
   pola ini, dan untuk kartu ringkasan yang tulisannya diulang penuh di halaman
   beritanya, harga itu wajar. */
.b-kartu h3 > a::after,
.b-utama-isi h2 > a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Di atas lapisan tekan kartu, supaya nama satuan kerja tetap menuju satuan
   kerjanya. Tanpa ini ia terkubur dan menekannya membuka beritanya — tautan
   yang terlihat, dapat difokus papan tuntun, tetapi pergi ke tempat lain. */
.b-opd { position: relative; z-index: 2; }

.b-kosong {
    border: 1px dashed var(--garis-tegas);
    border-radius: var(--lengkung);
    background: var(--latar-lembut);
    padding: 26px 20px;
    text-align: center;
    color: var(--teks-lembut);
}
.b-kosong strong { display: block; color: var(--teks); margin-bottom: 5px; font-size: 15px; }

/* --- Penomoran halaman --------------------------------------------------- */

/* Tautan <a> sungguhan, bukan gulir tanpa henti: gulir tanpa henti perlu
   JavaScript, tidak bisa dibagikan, dan menyulitkan pembaca yang mencari
   berita yang pernah dilihatnya. */
.b-nomor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--garis);
    font-size: 13px;
    color: var(--teks-lembut);
}
.b-nomor nav { display: flex; gap: 6px; flex-wrap: wrap; }
.b-nomor a, .b-nomor span.kini, .b-nomor span.mati {
    min-width: 36px;
    min-height: 36px;
    padding: 6px 11px;
    border: 1px solid var(--garis-tegas);
    border-radius: 9px;
    background: var(--latar-tinggi);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    color: var(--teks);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.b-nomor a:hover { border-color: var(--utama); color: var(--utama-kuat); }
.b-nomor span.kini {
    background: var(--utama-kuat);
    border-color: var(--utama-kuat);
    color: var(--teks-atas-utama);
    font-weight: 600;
}
.b-nomor span.mati { opacity: 0.45; }

/* --- Satu berita: tata letak kartu --------------------------------------- */

/* Setiap bagian berdiri di kartunya sendiri di atas latar halaman, dan
   keterangan berita pindah ke bilah sisi. Rancangannya mengikuti pola yang
   dipakai portal kabupaten tetangga (web.tapinkab.go.id) dengan tiga
   penyesuaian yang disengaja:

     - Warna kepingnya mengikuti tema satuan kerja, bukan kuning tetap. Halaman
       ini tampil di subdomain bertema, dan satu warna tetap untuk seluruh OPD
       terbaca sebagai lencana milik orang lain.
     - Tanggal tinggal di kartu kepala. Di layar sempit bilah sisi jatuh ke
       BAWAH tulisan, dan tanggal yang baru terbaca setelah artikelnya habis
       tidak lagi menjawab pertanyaan yang diajukan orang sebelum membaca.
     - Tidak ada kartu "Bagikan": halaman publik portal ini tidak menarik apa
       pun dari pihak ketiga, dan tombol bagi menuntut alamat facebook atau x
       di dalam href. Lihat uji halaman_publik_tidak_menarik_apa_pun_dari_pihak_ketiga.
   */

.a-jejak { font-size: 12.5px; color: var(--teks-lembut); padding: 18px 0 14px; }
.a-jejak a { color: var(--utama-kuat); }

/* Jarak ke kaki halaman. Terukur nol sebelum ini: kartu terbawah — petak
   "Berita terkait" — berbatasan tepat dengan garis atas kaki halaman, sehingga
   keduanya terbaca sebagai satu blok dan kartu terakhir tampak seperti bagian
   dari kaki.

   Dipasang pada <main>, bukan sebagai margin pada kartu terakhirnya: kartu
   terbawah berbeda-beda menurut isinya — petak berita terkait bila ada, kalau
   tidak, bilah sisi — dan jarak yang menempel pada masing-masing akan hilang
   begitu yang terbawah berganti.

   TIDAK dipasang pada .a-dokumen, meski itu lebih singkat: kelas yang sama juga
   membungkus remah halaman di atas, dan bantalan di sana menyisipkan jarak
   kosong tepat di bawah remahnya. */
.a-utama { padding-bottom: clamp(30px, 4vw, 52px); }

/* Pembungkus halaman berdokumen — satu berita, dan halaman statis satuan kerja.
   ---------------------------------------------------------------------------
   TANPA batas lebarnya sendiri. Yang membatasi hanya .bungkus di atasnya, sama
   dengan kepala portal, kaki portal, dan halaman daftar berita.

   Dulu ia bernama .a-sempit dan berbatas 940px, dengan alasan yang benar untuk
   isinya: bilah sisi 296px, celah, dan sisanya menyisakan kolom tulisan ~570px
   yang nyaman dibaca. Yang tidak ikut dihitung waktu itu adalah HALAMANNYA:
   .bungkus di sekelilingnya 1440px, jadi seluruh artikel menjorok 250px ke
   dalam dari kepala dan kaki portal di halaman yang sama — terukur pada
   layar 1718px, dan terlihat sebagai remah halaman yang tidak sebaris dengan
   apa pun di atasnya. Petak "Berita terkait" pun 940px di sini sementara petak
   yang sama 1056px di halaman daftar.

   Ukur baca TIDAK ikut melebar; ia pindah ke --ukur-prosa di bawah, dan
   elemen yang memakainya ditengahkan. Yang berubah lebar halamannya, bukan
   lebar baris bacaannya. */
.a-dokumen {
    /* Satu ukuran untuk segala yang dibaca baris demi baris. Ditulis sebagai
       px, bukan ch, justru karena itulah cacat yang pernah ada di sini:
       `max-width: 68ch` dipakai di tiga tempat berhuruf berbeda ukuran, dan ch
       mengikuti font-size elemennya sendiri. Terukur waktu itu — prosa 587px,
       kaki artikel 477px, sampul 820px: tiga lebar bertumpuk tanpa satu pun
       yang sengaja dipilih.

       Tetap 600px, tidak dinaikkan meski kolomnya kini jauh lebih lega:
       melebarkan wadah adalah soal keselarasan halaman, sedangkan panjang baris
       adalah soal mata. Keduanya tidak perlu dijawab dengan angka yang sama. */
    --ukur-prosa: 600px;
}

/* Kartu badan artikel memenuhi lajurnya, dan tulisannya memenuhi kartunya.
   ---------------------------------------------------------------------------
   Sejak halaman ini selebar halaman daftar, lajur isinya 1056px. Sisa lebar di
   luar ukur baca 600px harus jatuh ke suatu tempat, dan ketiga kemungkinannya
   sudah dicoba di halaman yang sebenarnya:

     - Kartunya disusutkan memeluk prosanya: bidang kosongnya pindah ke LUAR
       kartu — celah 400px menganga antara badan artikel dan kartu Penerbit,
       dan kartu badannya tidak lagi sebaris dengan sampul di atasnya maupun
       petak "Berita terkait" di bawahnya.
     - Kartunya memenuhi lajur dengan prosa 600px ditengahkan: celahnya tertutup,
       tetapi tulisannya berdiri sebagai pita sempit di tengah kartu selebar
       1000px, dengan bidang kosong seimbang di kiri dan kanannya.
     - Yang berlaku sekarang: kartunya memenuhi lajur, dan TULISANNYA memenuhi
       kartu.

   Ukur baca 600px karena itu tidak berlaku di dalam kartu ini. Itu keputusan
   yang diambil sadar, bukan kelalaian: baris selebar ~1000px memuat sekitar 110
   huruf, jauh di atas panjang yang nyaman diikuti mata, dan --ukur-prosa ada
   justru untuk menjawab itu. Yang menang di sini permintaan yang lebih besar —
   halaman yang tidak menyisakan bidang kosong. Bila kelak panjang barisnya
   terasa melelahkan, satu-satunya yang perlu dikembalikan adalah batas pada
   .a-badan .a-teks; seluruh aturan foto di bawah tidak bergantung padanya.

   Berlingkup .a-badan, yang hanya dipakai halaman satu berita. Halaman statis
   satuan kerja memakai .a-teks yang sama TANPA kartu, dan di sana ukur bacanya
   tetap berlaku. */
.a-badan .a-teks { max-width: none; }

/* Foto: dua sebaris.
   ---------------------------------------------------------------------------
   Foto selebar kartu penuh terdengar seperti pemakaian ruang yang baik sampai
   fotonya TEGAK. Foto impor di sini umumnya 819x1024; diregangkan ke 1000px ia
   menjadi 1250px tinggi — satu foto lebih tinggi daripada layar, dan tiga di
   antaranya (bentuk paling lazim di berita impor) mendorong seluruh tulisan
   berita ke luar layar. Pembaca yang datang untuk beritanya harus menggulir
   melewati ribuan piksel foto lebih dulu.

   MENGAPUNG, bukan petak dua lajur pada .a-teks. Bedanya menentukan, dan
   bentuk isinyalah yang menentukan:

     - Foto di sini tidak pernah dibungkus wadah bersama. Yang dikeluarkan isi
       impor adalah deretan saudara — "figure figure figure p p p" — dan
       sebagiannya bahkan berselang-seling dengan tulisan. Petak menuntut
       wadah; apungan tidak menuntut apa pun.
     - Dua foto memenuhi satu baris, dan yang ketiga turun sendiri. Itu
       perilaku bawaan apungan, bukan aturan yang ditulis: tidak ada
       nth-of-type yang perlu menebak foto keberapa yang harus mengakhiri
       baris — tebakan yang selalu meleset begitu ada satu tulisan menyelip di
       tengah deretan.
     - Aliran normal di luar foto tidak tersentuh, berikut seluruh margin yang
       sudah diatur di berkas ini. Petak pada .a-teks akan mengubah SETIAP
       jarak antarblok sekaligus, sebab margin sebelah-menyebelah tidak lagi
       diruntuhkan di dalam petak: jarak sebelum tiap judul bagian bertambah
       20px tanpa satu baris pun yang menyebutkannya.

   display: flow-root pada .a-teks yang menampung apungannya. Tanpa itu, foto
   pada akhir tulisan menjulur keluar dari kartunya — kartu berhenti pada
   tulisan terakhir sementara fotonya menimpa "Berita terkait" di bawahnya.

   HANYA dari 620px. Di ponsel kartunya sekitar 300px, dan dua foto sebaris di
   sana menyisakan 143px untuk masing-masing — lebih kecil daripada gambar mini,
   dan wajah orang di dalamnya tidak lagi dapat dikenali. */
.a-badan .a-teks {
    --celah-foto: 14px;
    display: flow-root;
}

@media (min-width: 620px) {
    /* Ketiga bentuk foto yang dikeluarkan Markdown dan pembersih isi impor:
       <figure>, <img> yang menjadi satu-satunya isi <p>, dan <img> telanjang.
       Yang tertinggal dari daftar ini akan berdiri sendirian selebar separuh
       kartu tanpa pasangan di sebelahnya.

       Ikon sebaris tidak ikut: ia duduk DI DALAM kalimat, jadi ia anak <p>,
       bukan anak .a-teks.

       Lebarnya dikurangi DUA celah, bukan satu: tiap foto membawa celahnya
       sendiri di kanan, termasuk yang mengakhiri baris. Dikurangi satu celah,
       margin foto kedua mendorong jumlahnya melewati 100% dan yang kedua turun
       ke baris berikutnya — satu foto sebaris lagi, persis yang diperbaiki. */
    .a-badan .a-teks > figure,
    .a-badan .a-teks > img,
    .a-badan .a-teks > p:has(> img:only-child) {
        float: left;
        width: calc((100% - 2 * var(--celah-foto)) / 2);
        margin: 0 var(--celah-foto) var(--celah-foto) 0;
    }

    /* Isi selain foto turun ke bawah deretannya, bukan mengalir di sampingnya.

       Tulisan yang mengalir di samping foto terbaca sebagai kolom sempit yang
       tiba-tiba melebar di tengah paragraf, dan pada foto tegak setinggi 600px
       kolom sempit itu berlangsung sepuluh baris.

       clear: both, bukan clear: left: keduanya sama saja hari ini sebab tidak
       ada yang mengapung ke kanan, dan yang pertama tetap benar bila kelak ada. */
    .a-badan .a-teks > *:not(figure, img, p:has(> img:only-child)) {
        clear: both;
    }

    /* Kelompok foto yang SUDAH berwadah — satu <figure> berisi <figure>, bentuk
       yang dikeluarkan blok galeri pada sebagian isi impor.

       Tidak ikut mengapung: wadahnya yang mengapung akan memampatkan kedua foto
       di dalamnya menjadi seperempat kartu. Wadahnya tetap selebar kartu dan
       isinya yang disusun dua lajur — hasil akhirnya sama persis dengan foto
       bersaudara di atas.

       align-items: start supaya foto yang lebih pendek tidak diregangkan
       menyamai tetangganya; perbandingan sisi foto tidak boleh ditentukan oleh
       foto di sebelahnya. */
    .a-badan .a-teks > figure:has(> figure) {
        float: none;
        clear: both;
        width: auto;
        margin: 26px 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--celah-foto);
        align-items: start;
    }

    /* Jarak antarfoto di dalamnya diurus gap petaknya. Margin bawaan .a-teks
       figure yang tertinggal akan menambah 26px lagi di antara baris petaknya
       saja — jarak yang berbeda antara baris dan lajur tanpa satu pun sebab
       yang terlihat. */
    .a-badan .a-teks > figure:has(> figure) > figure { margin: 0; }
}

/* --- Kartu ---------------------------------------------------------------- */

/* Satu bentuk kartu untuk seluruh halaman ini. Bantalannya menyempit sendiri
   di layar kecil: 28px pada lebar 360px menyisakan 300px untuk tulisan, dan
   prosa selebar itu terpecah menjadi baris-baris tiga kata. */
.a-kartu {
    background: var(--latar-tinggi);
    border: 1px solid var(--garis-lembut);
    border-radius: var(--lengkung);
    box-shadow: var(--bayang-1);
    padding: clamp(18px, 2.4vw, 28px);
}

/* Jarak antarkartu dipasang lewat pemilih adjacent, bukan margin-bottom pada
   setiap kartu: kartu terakhir sebelum kaki halaman tidak boleh menambah jarak
   yang sudah disediakan .a-badan-halaman di bawah. */
.a-kartu + .a-kartu,
.a-kartu + .a-tata { margin-top: 16px; }

/* --- Kartu kepala --------------------------------------------------------- */

.a-kepala-baris {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

/* Keping penerbit, sebentuk pil. Ditandai kuat karena di halaman apex maupun
   di subdomain inilah satu-satunya tempat pembaca melihat SIAPA yang
   menerbitkan sebelum ia mulai membaca. */
.a-penerbit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 5px 12px 5px 6px;
    border: 1px solid color-mix(in srgb, var(--utama-kuat) 30%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--utama-kuat) 10%, transparent);
    text-decoration: none;
}
.a-penerbit-lambang {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;

    /* Token tema, BUKAN --biru-* langsung, mengikuti alasan yang sama dengan
       .b-opd: di subdomain bertema hijau, keping biru terbaca sebagai lencana
       milik orang lain alih-alih penanda OPD. */
    background: linear-gradient(150deg, var(--utama-kuat), var(--utama));
    color: var(--teks-atas-utama);
    font-size: 10px;
    font-weight: 700;
}
.a-penerbit-lambang img {
    width: 100%;
    height: 100%;
    object-fit: contain;

    /* Bantalan di DALAM keping: lambang OPD hampir selalu bertepi putih, dan
       tanpa jarak ia menempel ke tepi lingkaran sehingga kepingnya tampak
       seperti gambar yang gagal dipotong. */
    padding: 2px;
    background: var(--latar-tinggi);
}
.a-penerbit-nama {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--utama-kuat);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.a-penerbit:hover { background: color-mix(in srgb, var(--utama-kuat) 18%, transparent); }

.a-tanggal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--teks-lembut);
}
.a-tanggal svg {
    width: 14px;
    height: 14px;
    flex: none;
    fill: none;
    stroke: currentcolor;
    stroke-width: 1.7;
    stroke-linecap: round;
}
.a-tanggal time { font-variant-numeric: tabular-nums; }

.a-kepala h1 {
    margin: 14px 0 0;
    font-size: clamp(23px, 3.6vw, 34px);
    line-height: 1.18;
    letter-spacing: -0.022em;
    text-wrap: balance;
}

/* Dek: inti berita sebelum pembaca memutuskan lanjut atau tidak. Ukurannya
   sengaja di antara judul dan prosa — sejajar prosa ia hilang, sebesar judul
   ia bersaing dengannya. */
/* Dek membuka kartu isi, jadi jaraknya di BAWAH, bukan di atas: ia anak
   pertama kartunya, dan bantalan kartu sudah menyediakan jarak atasnya.

   Garis pemisahnya bukan hiasan. Tanpa garis, dek kelabu dan paragraf pertama
   yang berwarna teks penuh menempel jadi satu blok — terukur pada berita Dinkes
   13 Agustus, di mana keduanya terbaca seperti satu paragraf yang separuhnya
   berganti warna di tengah jalan. */
.a-dek {
    margin: 0 0 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--garis);
    max-width: var(--ukur-prosa);
    font-size: clamp(15.5px, 1.3vw, 17.5px);
    line-height: 1.6;
    color: var(--teks-lembut);
    text-wrap: pretty;
}

/* --- Kartu hero: kepala di atas foto -------------------------------------- */

/* Judul, tanggal, dan keping penerbit duduk DI DALAM kartu foto, di bagian
   bawahnya. Bantalan kartunya dilepas dan isinya dipotong tepi kartu: foto yang
   bergantung di tengah kartu berbantalan terbaca sebagai gambar yang
   disisipkan, bukan sebagai sampul berita. */
.a-hero {
    padding: 0;
    overflow: hidden;
}

/* Tingginya dipasang pada <img>, BUKAN pada penampungnya.

   Percobaan pertama memasangnya di penampung dan menumpuk gambar dengan
   judulnya lewat grid. Itu gagal terukur: <img> ber-height:100% membuat baris
   grid diukur dari tinggi ASLI gambar (703,5px) meski kotaknya 400px, judul
   yang align-self:end menempel ke dasar BARIS — 304px di luar kartu — dan
   overflow:hidden memotongnya habis. Judulnya hilang sama sekali, tanpa satu
   pun galat, dan hanya muncul kembali saat fotonya dibuka.

   Dengan tinggi di gambarnya, penampung mengikuti isinya. Akibat baiknya
   menyusul sendiri: di layar sempit judulnya cukup dikembalikan ke aliran
   normal untuk berpindah ke BAWAH foto, tanpa satu pun aturan tinggi yang
   perlu ditulis ulang. */
.a-hero-gambar {
    --tinggi-batas: 400px;

    /* Tinggi saat terbuka. --tinggi-asli diisi portal.js dari
       naturalWidth/naturalHeight gambarnya; nilai daruratnya dipakai bila skrip
       tidak berjalan. Dipisah menjadi peubah sendiri karena dibutuhkan DUA
       tempat sekaligus — tinggi gambarnya dan perhitungan geserannya — dan
       menyalin ungkapan var(...) berdaftar-darurat ke dua tempat berarti
       keduanya bisa melenceng tanpa ada yang menyadarinya. */
    --tinggi-buka: var(--tinggi-asli, min(78vh, 760px));

    /* Tinggi yang sedang berlaku.

       min() pada keadaan tertutup, bukan nilai tetap: gambar yang lebih pendek
       daripada batasnya tidak boleh DIREGANGKAN oleh batas itu. Tanpa min(),
       sampul melintang pendek dipaksa setinggi 400px dan object-fit: cover
       memotong kiri-kanannya demi memenuhi tinggi yang tidak diminta siapa
       pun. */
    --tinggi-kini: min(var(--tinggi-buka), var(--tinggi-batas));

    position: relative;
    background: var(--latar-lembut);
}

/* Bingkai pemotong. HANYA ini yang tingginya berubah.

   Sebelumnya tinggi itu dipasang pada <img>-nya sendiri, dan di situlah
   pembesarannya tersendat: mengubah tinggi <img> berarti peramban menskalakan
   ulang bitmap 1280x960 ke ukuran baru pada SETIAP bingkai animasi — pekerjaan
   raster penuh, enam puluh kali sedetik, untuk gambar sebesar layar.

   Sekarang gambarnya tetap seukuran --tinggi-buka sepanjang waktu; yang
   berubah tinggi kotak yang memotongnya. Rasterisasinya sekali. */
.a-hero-bingkai {
    display: block;
    position: relative;
    height: var(--tinggi-kini);
    overflow: hidden;

    /* Pekerjaan lukisnya dikurung di dalam kotak ini, jadi tinggi yang berubah
       tidak memaksa peramban menghitung ulang lukisan di luarnya. */
    contain: paint;
}

/* Gambarnya digeser, bukan diperkecil.

   translateY setengah selisihnya memusatkan potongan yang terlihat: tanpa itu,
   keadaan tertutup memperlihatkan bagian ATAS foto — dan pada foto kegiatan,
   bagian atas hampir selalu langit-langit ruangan.

   Geseran dikerjakan penyusun tanpa mengukur ulang atau meraster ulang apa pun,
   jadi ia gratis dibandingkan mengubah tingginya. */
.a-hero-bingkai img {
    display: block;
    width: 100%;
    height: var(--tinggi-buka);
    object-fit: cover;
    transform: translateY(calc((var(--tinggi-kini) - var(--tinggi-buka)) / 2));
}

/* Tiga jalan membuka, dan ketiganya perlu:

     :hover           tetikus, seperti yang diminta;
     :has(:checked)   sentuhan dan papan tuntun — di layar sentuh "hover" tidak
                      ada sama sekali, jadi tanpa sakelar fotonya tidak akan
                      pernah bisa dibuka oleh sebagian besar pengunjung;
     :focus-within    papan tuntun, supaya yang menelusuri dengan Tab melihat
                      hal yang sama dengan yang memakai tetikus.

   Ditulis sebagai daftar terpisah, bukan :is(), karena :has() yang tidak
   dikenal peramban lama akan membatalkan SELURUH daftar bila digabung — dan
   yang batal berarti fotonya tidak pernah bisa dibuka.

   --tinggi-asli diisi portal.js dari naturalWidth/naturalHeight gambarnya,
   sehingga keadaan terbuka benar-benar seukuran aslinya. Nilai daruratnya
   dipakai bila skrip tidak berjalan; ia cukup untuk foto 4:3 yang mengisi
   hampir seluruh berkas di sini, dan poster tegak akan tetap terpotong sebagian
   — kurang tepat, tetapi tidak pernah rusak. */
.a-hero-gambar:hover,
.a-hero-gambar:focus-within,
.a-hero:has(.a-hero-suis:checked) .a-hero-gambar {
    --tinggi-kini: var(--tinggi-asli, min(78vh, 760px));
}

/* Peredup gradasi, bukan bidang pekat rata. Pekat rata menutupi sepertiga bawah
   foto seluruhnya, dan yang tertutup justru bagian foto kegiatan yang berisi
   orang. Gradasi memekat hanya sejauh yang dibutuhkan huruf paling bawah. */
.a-hero-teks {
    position: absolute;
    inset: auto 0 0;

    /* Di atas tumpukan, sebab kerangka memuat (.b-memuat::after) berkedudukan
       absolute dan karena itu dilukis SESUDAH seluruh isi yang tidak
       berkedudukan — termasuk judul ini. Terukur: selama fotonya masih dimuat,
       judulnya tertutup rapat oleh kerangka abu.

       Itu keliru justru menurut alasan kerangka itu sendiri ada: judulnya sudah
       tiba bersama HTML-nya, jadi tidak ada yang perlu ditunggu di sana. Yang
       menunggu hanya fotonya. */
    z-index: 2;

    padding: clamp(30px, 5vw, 52px) clamp(16px, 2.4vw, 26px) clamp(16px, 2.4vw, 24px);

    /* Perhentiannya dipadatkan ke bawah, bukan disebar rata.

       Sebaran rata terukur gagal pada foto ini: keping penerbit dan tanggal
       duduk sekitar 55% dari dasar peredup, tempat sebaran rata baru mencapai
       50% kepekatan — dan tepat di belakang keduanya ada lantai marmer putih.
       Dipadatkan, bidang yang ditempati huruf tetap di atas 55% kepekatan
       sementara dua pertiga foto di atasnya sama sekali tidak tersentuh. */
    background: linear-gradient(to top,
        rgb(6 12 18 / 90%) 0%,
        rgb(6 12 18 / 82%) 30%,
        rgb(6 12 18 / 55%) 62%,
        rgb(6 12 18 / 0%) 100%);
    color: var(--teks-balik);

    /* Tembus bagi tetikus, supaya menekan bagian bawah foto tetap membuka
       fotonya alih-alih mengenai peredup yang tidak melakukan apa pun.
       Tautan di dalamnya dinyalakan kembali satu per satu di bawah. */
    pointer-events: none;
}
.a-hero-teks .a-penerbit { pointer-events: auto; }

.a-hero-teks h1 {
    margin: 12px 0 0;
    font-size: clamp(22px, 3.4vw, 33px);
    line-height: 1.16;
    letter-spacing: -0.022em;
    text-wrap: balance;

    /* Bayangan huruf, bukan hanya peredup. Peredup menjamin rata-rata bidang di
       bawah huruf, tetapi tidak menjamin titik paling terang di foto — satu
       jendela putih tepat di belakang satu kata membuat kata itu hilang. */
    text-shadow: 0 1px 3px rgb(0 0 0 / 55%);
}

/* Tanggal di atas foto: putih redup, bukan --teks-lembut. Token itu dipilih
   untuk latar halaman, dan di atas foto gelap ia justru yang paling dulu
   hilang. */
.a-hero-teks .a-tanggal {
    color: rgb(255 255 255 / 82%);
    text-shadow: 0 1px 2px rgb(0 0 0 / 50%);
}

/* Keping penerbit ragam kaca. Warna tema tidak dipakai di atas foto: fotonya
   bisa apa saja, dan hijau tua di atas bayangan gelap hilang sama sekali.

   Kacanya GELAP, bukan putih tembus. Putih 16% di atas lantai marmer putih
   praktis tidak ada bidangnya, dan hurufnya yang juga putih tinggal bergantung
   pada bayangan huruf — terukur pada foto Inspektorat 6 Agustus, yang bagian
   bawahnya justru paling terang. Kaca gelap membuat kepingnya punya bidang
   sendiri di atas foto terang maupun gelap, dan sekaligus sama dengan keping
   "Foto penuh" di kanan atas.

   Warna satuan kerja tidak hilang: lambang di dalamnya tetap bergradasi tema. */
.a-penerbit-kaca {
    border-color: rgb(255 255 255 / 34%);
    background: rgb(6 12 18 / 48%);

    /* Diberi kabur bila peramban mendukungnya; tanpa itu, kaca di atas foto
       bermotif rumit membuat hurufnya beradu dengan motif di belakangnya. */
    backdrop-filter: blur(6px);
}
.a-penerbit-kaca .a-penerbit-nama {
    color: var(--teks-balik);
    text-shadow: 0 1px 2px rgb(0 0 0 / 45%);
}
.a-penerbit-kaca:hover { background: rgb(6 12 18 / 68%); }

/* --- Sakelar foto penuh --------------------------------------------------- */

/* Label menutupi SELURUH foto, sehingga menekan foto di mana pun membukanya —
   itulah yang diminta. Kepingnya yang terlihat ada di kanan atas, menjauh dari
   judul yang menempati bagian bawah.

   inset: 0 sudah cukup sekarang, sebab yang dibatasinya .a-hero-bingkai —
   kotak yang isinya persis fotonya. Sebelum bingkai itu ada, label ini terpasang
   pada penampung yang di layar sempit JUGA memuat judul di bawah foto, sehingga
   tingginya harus menyalin ulang perhitungan --tinggi-kini agar judul beserta
   tautan di dalamnya tidak ikut menjadi sasaran buka-foto. */
.a-hero-alih {
    position: absolute;
    inset: 0;
    z-index: 1;

    cursor: zoom-in;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 12px;
}
.a-hero:has(.a-hero-suis:checked) .a-hero-alih { cursor: zoom-out; }

.a-hero-keping {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border: 1px solid rgb(255 255 255 / 34%);
    border-radius: 999px;
    background: rgb(6 12 18 / 55%);
    backdrop-filter: blur(6px);
    color: var(--teks-balik);
    font-size: 12px;
    font-weight: 600;
}
.a-hero-keping svg {
    width: 14px;
    height: 14px;
    flex: none;
    fill: none;
    stroke: currentcolor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Ikon dan tulisannya bertukar menurut keadaan sakelar. */
.a-hero-tutup { display: none; }
.a-hero:has(.a-hero-suis:checked) .a-hero-buka { display: none; }
.a-hero:has(.a-hero-suis:checked) span.a-hero-tutup { display: inline; }
.a-hero:has(.a-hero-suis:checked) svg.a-hero-tutup { display: block; }

/* Cincin fokus dipasang pada kepingnya, bukan pada label seluas foto: cincin
   sebesar foto tidak menunjukkan apa pun tentang APA yang sedang difokus. */
.a-hero-suis:focus-visible + .a-hero-gambar .a-hero-keping {
    outline: 3px solid var(--fokus);
    outline-offset: 2px;
}

.a-hero-ket {
    margin: 0;
    padding: 12px clamp(16px, 2.4vw, 24px);
    border-top: 1px solid var(--garis);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--teks-lembut);
    text-wrap: pretty;
}

/* Di layar sempit judul TURUN ke bawah foto alih-alih menumpanginya.

   Bukan pilihan rupa, melainkan hasil ukuran. Judul berita ini pada lebar 328px
   menjadi 307px tinggi — lebih tinggi daripada batas foto 280px yang wajar di
   layar sebesar itu. Ditumpangkan, yang tersisa dari "kartu foto" hanyalah
   93px foto di atas judul yang memenuhi sisanya; ditumpuk, fotonya utuh dan
   judulnya lapang. Batas 280px pun jadi masuk akal kembali.

   Peralihannya cuma mengembalikan judulnya ke aliran normal. Tidak ada satu pun
   aturan tinggi yang ditulis ulang — itulah gunanya tinggi dipasang pada
   gambarnya, bukan pada penampungnya. */
@media (max-width: 560px) {
    .a-hero-gambar { --tinggi-batas: 280px; }

    .a-hero-teks {
        position: static;
        padding: 16px;
        background: none;
        color: inherit;
        pointer-events: auto;
    }

    /* Warna kembali ke warna halaman: hurufnya tidak lagi di atas foto, dan
       putih di atas kartu putih tidak terbaca sama sekali. */
    .a-hero-teks h1 {
        margin: 12px 0 0;
        font-size: clamp(21px, 6vw, 26px);
        text-shadow: none;
    }
    .a-hero-teks .a-tanggal { color: var(--teks-lembut); text-shadow: none; }

    /* Keping kembali ke ragam tema, dengan alasan yang sama. */
    .a-penerbit-kaca {
        border-color: color-mix(in srgb, var(--utama-kuat) 30%, transparent);
        background: color-mix(in srgb, var(--utama-kuat) 10%, transparent);
        backdrop-filter: none;
    }
    .a-penerbit-kaca .a-penerbit-nama { color: var(--utama-kuat); text-shadow: none; }
    .a-penerbit-kaca:hover { background: color-mix(in srgb, var(--utama-kuat) 18%, transparent); }

    /* Tulisan kepingnya disembunyikan: pada 280px foto, keping berteks memakan
       seperempat lebarnya. */
    .a-hero-keping-teks { display: none; }
    .a-hero-keping { padding: 8px; }
}

/* --- Badan + bilah sisi --------------------------------------------------- */

/* Celah 24px dan ambang 1040px — angka yang SAMA dengan .b-tata di halaman
   daftar, bukan angka lain yang kebetulan mirip. Dulu 16px dan 900px, dengan
   alasan yang sah selama kolomnya masih 940px; sejak kolomnya selebar halaman
   daftar, alasan itu habis dan yang tertinggal hanya dua halaman bersebelahan
   yang bilah sisinya melompat berdampingan pada lebar layar yang berbeda. */
.a-tata { display: grid; gap: 24px; }

@media (min-width: 1040px) {
    .a-tata {
        grid-template-columns: minmax(0, 1fr) 296px;
        align-items: start;
    }

    /* Menempel saat digulir, sama seperti bilah sisi halaman daftar.

       Berhentinya DI BAWAH kepala, bukan di tepi layar. Kepala portal
       berkedudukan sticky dengan top 0 dan tinggi 69px; bilah sisi yang
       berhenti pada top 14px karena itu meluncur MASUK ke belakangnya —
       terselamatkan hanya oleh latar kepala yang tembus 88%, sehingga yang
       terlihat adalah kartu Penerbit yang samar-samar menembus bilah kepala.

       Jaraknya ditambah 14px lagi supaya kartunya tidak menempel rapat: dua
       bidang berkartu yang bersentuhan tepat tanpa celah terbaca sebagai satu
       bidang yang terpotong, bukan dua yang bertumpuk.

       max-height ikut dikurangi setinggi kepala, kalau tidak balok terbawah
       bilah sisi jatuh di luar layar pada layar pendek dan tidak akan pernah
       terjangkau.

       TANPA overscroll-behavior: contain — sifat itu menghentikan rantai
       gulungan, sehingga begitu bilah sisi mencapai dasarnya halaman di
       belakangnya berhenti ikut bergulir, dan pengunjung yang kebetulan menaruh
       kursor di sini merasa halamannya macet. */
    .a-sisi {
        position: sticky;
        top: calc(var(--tinggi-kepala) + 14px);
        max-height: calc(100vh - var(--tinggi-kepala) - 28px);
        overflow-y: auto;
    }
}

.a-sisi { display: grid; gap: 16px; align-content: start; }

.a-sisi-blok h2 {
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--garis);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--teks-lembut);
}

.a-sisi-opd {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: inherit;
}
.a-sisi-lambang {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(150deg, var(--utama-kuat), var(--utama));
    color: var(--teks-atas-utama);
    font-size: 13px;
    font-weight: 700;
}
.a-sisi-lambang img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    background: var(--latar-tinggi);
}
.a-sisi-opd-teks {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.a-sisi-opd-teks strong {
    font-size: 13px;
    line-height: 1.35;
    color: var(--teks);
}
.a-sisi-opd-teks > span {
    font-size: 12px;
    font-weight: 600;
    color: var(--utama-kuat);
}


/* Keterangan sebagai <dl>, bukan baris teks berpemisah titik. Pasangan
   istilah-nilai memang inilah bentuknya, dan pembaca layar menyebutkannya
   sebagai pasangan alih-alih satu kalimat panjang tanpa jeda. */
.a-sisi-daftar {
    display: grid;
    gap: 10px;
    margin: 0;
}
.a-sisi-daftar > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.a-sisi-daftar dt {
    font-size: 12.5px;
    color: var(--teks-lembut);
    flex: none;
}
.a-sisi-daftar dd {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--teks);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Lencana tinjauan. Tepinya sendiri, bukan sebentuk keterangan lagi: ia
   penanda mutu, dan disamakan bentuknya dengan tanggal membuatnya terlewat. */
.a-lencana {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 14px;
    padding: 4px 11px 4px 8px;
    border: 1px solid color-mix(in srgb, var(--utama-kuat) 35%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--utama-kuat) 10%, transparent);
    color: var(--utama-kuat);
    font-size: 12px;
    font-weight: 600;
}
.a-lencana svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentcolor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Prosa ---------------------------------------------------------------- */

/* Satu-satunya tempat di portal yang melepas --lebar-maks. Portal memakai
   lebar penuh karena isinya daftar tautan yang dipindai; prosa dibaca baris
   demi baris, dan baris selebar itu membuat mata kehilangan awal baris
   berikutnya. */
.a-teks { max-width: var(--ukur-prosa); }
.a-teks p { margin: 0 0 20px; font-size: 17px; line-height: 1.78; }
.a-teks > *:last-child { margin-bottom: 0; }

/* Judul bagian di dalam prosa. Jarak atasnya jauh lebih besar daripada jarak
   bawahnya — itulah yang membuatnya terbaca sebagai kepala bagian BARU alih-
   alih baris tebal yang menempel pada paragraf sebelumnya. */
.a-teks h2,
.a-teks h3 {
    line-height: 1.3;
    letter-spacing: -0.012em;
    text-wrap: balance;
}
.a-teks h2 { font-size: 21px; margin: 34px 0 12px; }
.a-teks h3 { font-size: 18px; margin: 28px 0 10px; }
.a-teks h2:first-child,
.a-teks h3:first-child { margin-top: 0; }

.a-teks ul, .a-teks ol { margin: 0 0 20px; padding-left: 1.3em; }
.a-teks li { margin-bottom: 8px; line-height: 1.75; font-size: 17px; }
.a-teks li::marker { color: var(--utama-kuat); }

.a-teks blockquote {
    margin: 26px 0;
    padding: 16px 20px;
    border: 0;
    border-left: 3px solid var(--utama-kuat);
    border-radius: 0 12px 12px 0;
    background: var(--latar-lembut);
    color: var(--teks);
    font-size: 17px;
}
.a-teks blockquote p:last-child { margin-bottom: 0; }

.a-teks img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 26px 0;
    border-radius: 12px;
    border: 1px solid var(--garis);
}

/* Melebar penuh kolom HANYA bila gambarnya berdiri sendiri.

   Isi impor membungkus setiap fotonya dalam <figure>, dan Markdown menaruh
   gambar tunggal sebagai satu-satunya anak <p>. Keduanya itulah foto kegiatan
   yang memang layak selebar kolom. Yang TIDAK disertakan adalah gambar yang
   duduk di tengah kalimat — ikon atau lambang sebaris — sebab width:100%
   menyeluruh akan membesarkannya sampai selebar paragraf.

   Yang diperbaiki: figure bawaan peramban bermargin 1em 40px, sehingga tepi
   kiri foto tidak sebaris dengan tepi kiri tulisan, dan foto impor tampil pada
   ukuran aslinya (sekitar 410px) sehingga terbaca sebagai gambar mini alih-alih
   foto kegiatan. */
.a-teks figure { margin: 26px 0; }
.a-teks figure img,
.a-teks p > img:only-child { width: 100%; }
.a-teks figure img { margin: 0; }
.a-teks figcaption {
    font-size: 12.5px;
    color: var(--teks-lembut);
    padding-top: 8px;
    text-wrap: pretty;
}

/* Garis bawahnya diberi jarak dari huruf. Pada tautan panjang, garis yang
   menempel memotong ekor huruf g, j, dan y sehingga katanya sulit dibaca —
   dan tautan di dalam berita hampir selalu berupa nama panjang. */
.a-teks a {
    color: var(--utama-kuat);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.a-teks hr {
    margin: 32px 0;
    border: 0;
    border-top: 1px solid var(--garis);
}

/* Tabel dari Markdown (Str::markdown memakai varian GitHub, jadi tabel mungkin
   muncul). Digulir di dalam dirinya sendiri: tabel lebar yang dibiarkan meluap
   membuat SELURUH halaman bergulir menyamping, dan bilah gulung mendatar di
   badan halaman terbaca sebagai tata letak yang rusak.

   display:block dipasang pada <table>-nya, bukan pada pembungkus, karena tidak
   ada pembungkus untuk dipasangi — Markdown mengeluarkan <table> langsung
   sebagai anak .a-teks. Isinya tetap tampil sebagai tabel: peramban membuatkan
   kotak tabel anonim untuk baris-barisnya. */
.a-teks table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    margin: 26px 0;
    border-collapse: collapse;
    font-size: 15px;
}
.a-teks th, .a-teks td {
    padding: 9px 12px;
    border: 1px solid var(--garis);
    text-align: left;
    vertical-align: top;
}
.a-teks th { background: var(--latar-lembut); font-weight: 700; }

.a-teks code {
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--latar-lembut);
    font-size: 0.92em;
}
.a-teks pre {
    margin: 26px 0;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--garis);
    background: var(--latar-lembut);
    overflow-x: auto;
}
.a-teks pre code { padding: 0; background: none; }

/* Paragraf pengantar pada templat halaman OPD (daftar layanan, dokumen, data
   statistik, galeri). TIDAK dipakai halaman berita — di sana perannya diambil
   .a-teks-pembuka di bawah — tetapi tetap ada karena empat templat itu
   memakainya. Dihapus, keempatnya kehilangan pengantarnya tanpa satu pun galat. */
.a-lead {
    font-size: clamp(16px, 1.4vw, 18.5px);
    font-weight: 500;
    line-height: 1.65;
    color: var(--teks);
    margin-bottom: 22px;
    text-wrap: pretty;
}

/* Paragraf pembuka berita, dipakai hanya ketika kartu kepala tidak punya dek —
   lihat alasannya di satu.blade.php. Menyasar p pertama, jadi tidak ada kelas
   yang harus disisipkan ke dalam HTML hasil Markdown. */
.a-teks-pembuka > p:first-child {
    font-size: clamp(17px, 1.4vw, 18.5px);
    font-weight: 500;
    line-height: 1.68;
    color: var(--teks);
    margin-bottom: 22px;
    text-wrap: pretty;
}

/* --- Kaki halaman OPD ----------------------------------------------------- */

/* Dipakai halaman OPD (publik/opd/halaman.blade.php), BUKAN halaman berita —
   di sana keterangannya sudah pindah ke bilah sisi. Dibiarkan pada bentuk
   aslinya dengan sengaja: isinya di sana dua <span> polos, dan gaya kartu
   berjajar akan menempelkan keduanya berdampingan tanpa ada yang memintanya.

   Satu-satunya yang berubah lebar ukurnya, supaya ia sebaris dengan .a-teks
   di atasnya — 68ch pada huruf 13px menghasilkan 477px, jauh lebih sempit
   daripada prosanya sendiri. */
.a-kaki {
    max-width: var(--ukur-prosa);
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--garis);
    display: grid;
    gap: 4px;
    font-size: 13px;
    color: var(--teks-lembut);
}

/* --- Berita terkait ------------------------------------------------------- */

.a-lain { margin-top: 34px; }
.a-lain-kepala {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-bottom: 16px;
}
.a-lain-kepala h2 { font-size: 19px; margin: 0; letter-spacing: -0.015em; }
.a-lain-kepala p { margin: 3px 0 0; font-size: 13px; color: var(--teks-lembut); }

/* Tombol garis, bukan tombol terisi: yang terisi di halaman ini dijatah untuk
   tindakan utama, dan "lihat semua" adalah jalan keluar — bukan yang paling
   ingin ditekan pengunjung yang baru selesai membaca. */
.a-lain-semua {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid color-mix(in srgb, var(--utama-kuat) 45%, transparent);
    border-radius: 999px;
    background: var(--latar-tinggi);
    color: var(--utama-kuat);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.a-lain-semua:hover {
    border-color: var(--utama-kuat);
    background: color-mix(in srgb, var(--utama-kuat) 10%, transparent);
}

/* ===========================================================================
   Tata letak dua kolom + bilah sisi
   ---------------------------------------------------------------------------
   Bilah sisi baru muncul pada 1040px ke atas. Di bawah itu ia jatuh ke bawah
   daftar, BUKAN disembunyikan: isinya — kini tinggal "Terbaru" — adalah jalan
   keluar dari halaman ini menuju tulisan lain, dan menyembunyikannya di ponsel
   berarti mencabut jalan itu justru dari pemakai yang paling banyak.

   Angka dan peringkat yang dulu menemaninya di sini pindah ke dasbor di kepala
   halaman; balok bilah sisi di bawah menyisakan gaya yang masih terpakai
   keduanya. Lihat bagian "Dasbor ringkasan" di dasar berkas ini.
   =========================================================================== */

.b-tata { display: grid; gap: 24px; }

@media (min-width: 1040px) {
    .b-tata {
        grid-template-columns: minmax(0, 1fr) 296px;
        align-items: start;
    }

    /* Menempel saat digulir. Dibatasi tinggi layar dan digulir sendiri supaya
       balok terbawah tetap terjangkau pada layar pendek.

       Berhentinya di bawah kepala, alasannya sama persis dengan .a-sisi di
       atas — dan cacatnya pun sama: kepala portal menempel di top 0 dengan
       tinggi 69px, jadi bilah sisi yang berhenti pada top 14px meluncur masuk
       ke belakangnya dan terlihat samar-samar menembus bilah kepala.

       TANPA overscroll-behavior: contain. Sifat itu menghentikan rantai
       gulungan, sehingga begitu bilah sisi mencapai dasarnya, halaman di
       belakangnya berhenti ikut bergulir — dan pengunjung yang kebetulan
       menaruh kursor di sini merasa halamannya macet. Dibiarkan merantai,
       gulungannya berlanjut ke halaman seperti yang diharapkan. */
    .b-sisi {
        position: sticky;
        top: calc(var(--tinggi-kepala) + 14px);
        max-height: calc(100vh - var(--tinggi-kepala) - 28px);
        overflow-y: auto;

        /* Batang gulirnya ditipiskan dan diredupkan.

           Sejak seluruh ringkasan kembali ke sini, baloknya tujuh dan bilah ini
           SELALU lebih tinggi daripada layar — jadi batang gulirnya selalu
           terlihat, bukan sesekali seperti dulu ketika isinya satu balok. Batang
           gulir bawaan setebal 15px berdiri tepat di antara kartu dan tepi
           halaman, dan pada kolom 296px ia terbaca sebagai garis abu-abu yang
           tidak jelas miliknya.

           Ini keadaan dasarnya, dan layar sentuh memakainya apa adanya. Pada
           penunjuk halus batangnya menyingkir selama tidak dipakai — lihat blok
           "Batang gulir yang menyingkir sendiri" di dasar berkas ini, berikut
           alasan mengapa di sana ia dikembalikan oleh :hover dan :focus-within,
           bukan hanya oleh gulungan.

           Yang berlaku di KEDUA keadaan: batangnya ditipiskan, tidak pernah
           dilepas. ::-webkit-scrollbar {display: none} maupun scrollbar-width:
           none mengembalikan lebar salurannya kepada isi kolom, dan ketujuh
           baloknya bergeser mendatar setiap kali batangnya menghilang. */
        scrollbar-width: thin;
        scrollbar-color: var(--garis-tegas) transparent;
    }
}

/* Kolom utama menyempit, jadi tiga kartu sebaris baru muat di layar lebar. */
@media (min-width: 940px) and (max-width: 1039px) { .b-petak { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) and (max-width: 1319px) { .b-petak { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1320px) { .b-petak { grid-template-columns: repeat(3, 1fr); } }

/* --- Lubang pada kartu tanpa gambar --------------------------------------
   Kartu sebaris disamakan tingginya oleh grid, sehingga kartu berjudul pendek
   menyisakan ruang kosong besar di bawah tanggalnya — paling terasa pada OPD
   yang beritanya jarang bergambar (putr: 0 dari 8). Tanggalnya didorong ke
   dasar kartu supaya ruang itu jatuh di antara judul dan tanggal, terbaca
   sebagai jarak yang disengaja, bukan sebagai lubang.

   Gambarnya diberi rasio tetap, bukan tinggi tetap: sampul OPD umumnya poster
   tegak, dan tanpa rasio kartunya menjulang tak seragam. */
.b-kartu .b-gambar { aspect-ratio: 16 / 10; min-height: 0; }
.b-kartu-isi { display: flex; flex-direction: column; gap: 8px; }

/* Didorong ke dasar kartu, dan yang didorong KAKINYA — bukan tanggalnya
   sendiri seperti sebelumnya. Sejak jumlah suka berdiri di sebelah tanggal,
   margin-top: auto pada <time> hanya mendorong tanggalnya sendiri turun
   meninggalkan angka sukanya di tempat semula. */
.b-kartu-isi .b-kartu-kaki { margin-top: auto; padding-top: 4px; }

/* --- Balok bilah sisi ----------------------------------------------------- */

.b-blok {
    border: 1px solid var(--garis-lembut);
    border-radius: var(--lengkung);
    background: var(--latar-tinggi);
    padding: 14px 15px 15px;

    /* Bayangan --bayang-1, sama dengan .a-kartu di halaman satu berita dan
       .kartu di beranda. Tanpa bayangan, balok bertepi tipis di atas latar yang
       hampir sewarna terbaca sebagai bidang datar tanpa lapis — dan tujuh
       bidang datar berjajar di satu kolom terbaca sebagai satu daftar panjang,
       bukan tujuh balok. */
    box-shadow: var(--bayang-1);
}
.b-blok + .b-blok { margin-top: 14px; }

/* Petak, supaya ikon kepalanya sebaris tengah dengan tulisannya. Dengan blok
   biasa, ikon 14px di dalam baris berhuruf 11,5px menempel ke garis dasar dan
   tampak melorot setengah piksel dari tulisannya. */
.b-blok h2 {
    margin: 0 0 11px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teks-lembut);
}

/* --- Daftar tautan -------------------------------------------------------- */

.b-daftar { margin: 0; padding: 0; list-style: none; }
.b-daftar li + li {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--garis);
}
.b-daftar a {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    color: inherit;
    text-decoration: none;
}
.b-daftar a:hover { color: var(--utama-kuat); }
.b-meta {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--teks-lembut);
    font-variant-numeric: tabular-nums;
}

/* Daftar bernomor. Angkanya dibangkitkan CSS, bukan ditulis di markah, supaya
   urutannya tidak pernah berbeda dari urutan datanya. */
.b-urut { counter-reset: peringkat; }

/* Petak, bukan flex. Dengan flex, lencana angka, judul, dan keterangan menjadi
   tiga butir sebaris, sehingga "3x dibaca" berjejer di samping judul alih-alih
   di bawahnya. Di sini lencananya menempati lajur pertama dan keduanya
   ditumpuk pada lajur kedua. */
.b-urut li {
    counter-increment: peringkat;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    column-gap: 9px;
    align-items: start;
}
.b-urut li > a,
.b-urut li > .b-meta { grid-column: 2; }
.b-urut li::before {
    content: counter(peringkat);
    grid-column: 1;
    grid-row: 1;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--utama-lembut, var(--latar-lembut));
    color: var(--utama-kuat);
    font-size: 10.5px;
    font-weight: 700;
    display: grid;
    place-items: center;
    font-variant-numeric: tabular-nums;
}

/* --- Batang mendatar ------------------------------------------------------
   Dipakai tiga kartu dasbor: satuan kerja teraktif, sebaran jenjang, dan arsip
   per tahun. Dua yang pertama bertaut, yang ketiga bertaut SEKALIGUS menjadi
   penyaring; yang di tengah tidak bertaut sama sekali, sebab tidak ada halaman
   "seluruh berita kecamatan" untuk dituju. Karena itu barisnya boleh berupa <a>
   maupun <p>, dan keduanya harus terlihat persis sama — batang yang bentuknya
   berbeda-beda antar kartu terbaca sebagai tiga grafik yang tidak sebanding,
   padahal satuannya sama. */

.b-batang { margin: 0; padding: 0; list-style: none; }
.b-batang li + li { margin-top: 9px; }
.b-batang a,
.b-batang .b-batang-baris {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    margin: 0 0 4px;
}
.b-batang a:hover .b-batang-nama { color: var(--utama-kuat); }
.b-batang-nama { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-batang-nilai { font-size: 11.5px; color: var(--teks-lembut); font-variant-numeric: tabular-nums; }
.b-batang-alur {
    display: block;
    height: 5px;
    border-radius: 999px;
    background: var(--latar-lembut);
    overflow: hidden;
}
.b-batang-alur > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sorot-awal), var(--sorot-akhir));
}
.b-batang li.kini .b-batang-nama { color: var(--utama-kuat); }

/* Tahun yang sedang menyaring. Ditandai lewat aria-current, bukan lewat kelas
   yang ditempel Blade: satu penanda untuk mata dan untuk pembaca layar
   sekaligus, jadi keduanya tidak mungkin berbeda. */
.b-batang a[aria-current="true"] .b-batang-nama { color: var(--utama-kuat); }
.b-batang a[aria-current="true"] + .b-batang-alur { box-shadow: 0 0 0 1px var(--utama-kuat); }

/* ===========================================================================
   Ringkasan dan peringkat di bilah sisi
   ---------------------------------------------------------------------------
   KEMBALI ke bilah sisi, sesudah sempat menjadi dasbor di kepala halaman lalu
   tutup buka di sana. Seluruh gaya dasbor itu — .b-dasbor*, petak tambal-lubang,
   dan bilah <summary> beserta tinggi 0fr/1fr yang dianimasikan — dihapus, bukan
   ditinggalkan menganggur. Aturan yang tidak lagi dipakai satu pun markah adalah
   bentuk kegagalan paling mahal di berkas gaya: ia terbaca benar dan tidak
   pernah berlaku.

   Baloknya memakai .b-blok, .b-daftar, .b-urut, dan .b-batang yang sudah ada di
   atas — bukan sepasang kelas baru yang kebetulan mirip.
   =========================================================================== */

/* --- Ikon kepala balok ---------------------------------------------------- */

/* Ikon kecil di setiap kepala balok. Bukan hiasan belaka: tujuh balok bertulisan
   huruf kapital kecil berjajar dalam satu kolom sempit terbaca sebagai satu
   daftar panjang tanpa batas antarbagian, dan mata kehilangan tempat berhenti.
   Ikon memberi setiap balok satu jangkar yang dapat dikenali tanpa dibaca.

   currentcolor, jadi ia ikut meredup bersama tulisan kepalanya dan tidak perlu
   token warna sendiri di mode gelap maupun pada keenam tema satuan kerja. */
.b-ikon {
    width: 14px;
    height: 14px;
    flex: none;
    fill: none;
    stroke: currentcolor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
}

/* --- Angka ringkas -------------------------------------------------------- */

/* Dua lajur, bukan tiga seperti dulu. Di lebar 296px, tiga keping menyisakan
   ~85px per keping dan "Satuan kerja" pada 10,5px sudah menuntut dua baris —
   tiga keping bertinggi tidak sama, yang justru menarik mata ke kepingnya alih-
   alih ke angkanya. Dua lajur memberi ~125px, cukup untuk satu baris.

   auto-fit tidak dipakai di sini: kepingnya berjumlah empat di apex tetapi tiga
   di subdomain OPD, dan pada tiga keping auto-fit menyisakan satu petak
   menganga. repeat(2) membuat keping ketiga jatuh ke baris kedua dan keping
   keempat melengkapinya; pada tiga keping, yang terakhir dilebarkan penuh oleh
   aturan di bawah. */
.b-angka {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.b-angka > div {
    background: var(--latar-lembut);
    border-radius: calc(var(--lengkung) - 4px);
    padding: 9px 10px 10px;
}

/* Keping terakhir melebar penuh bila jumlahnya ganjil — tiga keping di subdomain
   OPD. Dibaca dari kedudukan kepingnya sendiri, jadi tidak ada hitungan yang
   perlu dikirim Blade ke sini dan tidak ada pula hitungan yang dapat melenceng
   dari susunan yang sebenarnya. */
.b-angka > div:last-child:nth-child(odd) { grid-column: 1 / -1; }

.b-angka dt {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--teks-lembut);
    margin-bottom: 3px;
}
.b-angka dd {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.05;
    color: var(--utama-kuat);
    font-variant-numeric: tabular-nums;
}

/* --- Terbit per bulan: garis-percik --------------------------------------- */

/* Bentuknya strip, BUKAN grafik bersumbu seperti versi kepala halaman dulu.
   Alasannya terukur: bilah ini 296px, dan dua belas nama bulan di sana
   menyisakan 20px per nama sementara "Sep" pada 10px sudah menuntut 22px —
   seluruh sumbunya terpotong menjadi elipsis. Rentangnya pindah ke dua ujung
   strip: dua tanggal alih-alih dua belas, dan bentuk naik-turunnya tetap utuh. */
.b-tren {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 2px;
}
.b-tren li { min-width: 0; }

/* Tingginya dipatok pada ALURNYA, bukan dibiarkan mengikuti batang tertinggi.
   Bulan bernilai nol tidak menggambar batang sama sekali; kalau tinggi kolomnya
   ikut runtuh, alur bulan itu ikut hilang dan garis waktunya putus persis di
   bulan yang justru ingin ditunjukkan kosong. */
.b-tren-alur {
    display: flex;
    align-items: flex-end;
    height: 48px;
    border-radius: 3px;
    overflow: hidden;

    /* Alurnya SANGAT tipis, 7% aksen — bukan --latar-lembut seperti batang
       mendatar di bawah. Pada strip serapat ini, alur sepekat itu berbobot
       hampir sama dengan batangnya sendiri, dan bulan kosong terbaca sebagai
       batang pucat alih-alih sebagai slot yang memang kosong. Terlihat pada
       tangkapan layar pertama: Nov, Des, dan Jun tampil seperti tiga batang
       tertinggi di seluruh strip.

       Ditarik dari --utama-kuat, bukan warna tetap, supaya ia ikut berpindah
       bersama keenam tema satuan kerja dan mode gelap. */
    background: color-mix(in srgb, var(--utama-kuat) 7%, transparent);
}
.b-tren-alur > span {
    display: block;
    width: 100%;

    /* Hanya sudut atasnya. Dasar batang sudah dipotong lengkung alurnya lewat
       overflow, dan melengkungkannya sekali lagi membuat batang pendek tampil
       sebagai butir melayang alih-alih batang yang tumbuh dari dasar. */
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, var(--sorot-awal), var(--sorot-akhir));
}

.b-tren-rentang {
    display: flex;
    justify-content: space-between;
    margin: 8px 0 0;
    font-size: 10.5px;
    color: var(--teks-lembut);
    font-variant-numeric: tabular-nums;
}

/* --- Bilah sisi di layar sedang ------------------------------------------- */

/* Dua lajur pada 620–1039px, satu lajur di bawahnya.
   ---------------------------------------------------------------------------
   Di bawah 1040px bilah sisi jatuh ke BAWAH daftar berita — dan tujuh balok
   bertumpuk satu lajur di sana menjadi kolom setinggi ~1600px yang harus
   digulir habis untuk mencapai kaki halaman. Pada tablet, lebarnya cukup untuk
   dua lajur, dan tingginya langsung terbelah dua.

   Di ponsel (<620px) tetap satu lajur: dua lajur pada 360px memberi ~160px per
   balok, dan strip dua belas batang di sana menyisakan 11px per batang.

   BERBATAS ATAS pada 1039px, dan itu wajib: dari 1040px bilah sisi menjadi
   kolom 296px yang menempel saat digulir, dan petak dua lajur di sana akan
   memampatkan setiap balok menjadi 136px. */
@media (min-width: 620px) and (max-width: 1039px) {
    .b-sisi {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        align-items: start;
    }

    /* Jarak antarbalok diurus gap petaknya. Margin yang tertinggal akan
       menambah 14px lagi hanya pada balok kedua ke bawah — jarak yang tidak
       sama antarbaris tanpa satu pun sebab yang terlihat. */
    .b-blok + .b-blok { margin-top: 0; }

    /* Balok terakhir melebar penuh bila jumlahnya ganjil, supaya tidak ada
       petak menganga di ujung baris terakhir. */
    .b-sisi > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* --- Batang gulir yang menyingkir sendiri ---------------------------------
   Batang gulir halaman menghilang selama tidak dipakai, lalu muncul kembali
   begitu halaman digulir — dan tetap muncul selagi tetikus berdiam di tepi
   kanan, yaitu ketika seseorang hendak menyeretnya.

   Halaman berita SAJA, penandanya data-halaman="berita" pada elemen akar yang
   dipasang kerangka.blade.php. Berkas ini dimuat pada setiap halaman publik,
   jadi tanpa penanda itu batang gulir seluruh portal ikut berubah.

   Yang disembunyikan hanya WARNANYA, bukan salurannya. scrollbar-width tetap
   'thin' pada kedua keadaan, sehingga lebar yang disisihkan tidak pernah
   berubah. scrollbar-width: none — atau ::-webkit-scrollbar { display: none }
   — akan melepas saluran selebar belasan piksel setiap kali batangnya
   menghilang, dan SELURUH isi halaman bergeser mendatar tiap gulungan
   berhenti. Goyangan itu jauh lebih mengganggu daripada batang gulir yang
   terlihat, dan ia terjadi berkali-kali dalam satu kunjungan.

   Sengaja sifat baku CSS (scrollbar-width dan scrollbar-color), BUKAN
   ::-webkit-scrollbar. Sejak Chrome 121 keduanya tidak dapat dipakai
   bersamaan: begitu salah satu sifat baku dipasang, seluruh aturan
   ::-webkit-scrollbar pada pengulir yang sama diabaikan. Menulis keduanya
   berarti menulis satu himpunan aturan yang tidak pernah berjalan.

   Hanya untuk penunjuk halus. Di layar sentuh batang gulir sudah berupa
   lapisan yang muncul saat digulir lalu memudar sendiri — persis perilaku yang
   ditiru di sini, jadi tidak ada yang perlu ditambahkan; mewarnainya
   transparan justru berisiko menghapusnya sepanjang pudarnya.

   Bilah sisi ikut menyingkir, dengan satu tambahan yang halaman tidak
   memerlukannya — lihat aturannya di bawah. */
@media (pointer: fine) {
    :root[data-halaman="berita"] {
        scrollbar-width: thin;
        scrollbar-color: transparent transparent;

        /* Memudar, bukan berkedip padam. Peramban yang belum menganimasikan
           scrollbar-color menggantinya seketika, dan itu tetap benar — tidak
           ada keadaan tampilan yang hanya bisa dicapai lewat peralihan ini.

           prefers-reduced-motion tidak perlu ditulis di sini: aturan menyeluruh
           di portal.css memakai pemilih *, dan * menjangkau elemen akar. */
        transition: scrollbar-color 260ms ease;
    }

    /* Dipasang portal.js selama halaman digulir dan sekitar sedetik sesudahnya,
       serta selagi tetikus mendekati tepi kanan. */
    :root[data-halaman="berita"].gulir-tampak {
        scrollbar-color: var(--garis-tegas) transparent;
    }
}

/* Bilah sisi berita, pada lebar yang sama dengan tempat ia menjadi kolom
   menempel yang digulir sendiri (>= 1040px). Di bawah itu ia berupa petak dua
   lajur atau satu lajur mengalir — tidak ada yang digulir, jadi tidak ada
   batang gulir untuk disembunyikan.

   Tanpa JavaScript, dan itu bukan penghematan melainkan cara yang lebih tepat.
   Batang gulir halaman terpaksa memakai pewaktu sebab viewport tidak bisa
   di-:hover; bilah sisi sebuah ELEMEN, dan dua keadaan semunya sudah menjawab
   seluruh cara ia digulir:

     - Roda tetikus hanya menggulir bilah ini bila penunjuknya berada DI ATASNYA.
       Jadi setiap gulungan roda selalu didahului :hover — batangnya sudah
       terlihat sebelum gulungannya dimulai, bukan sesudahnya.
     - Menggulir dengan papan tuts menuntut fokus berada di dalamnya, dan itu
       :focus-within. Tautan di dalam balok yang belum terlihat karena itu tetap
       menampakkan batangnya begitu di-Tab.

   Dan justru :hover yang menjaga apa yang dikhawatirkan aturan .b-sisi di atas:
   bahwa halaman bisa digulir sudah diketahui semua orang, tetapi bahwa kolom
   setinggi layar ini masih menyimpan balok di bawahnya tidak. Menaruh tetikus di
   atasnya — yang dilakukan siapa pun sebelum menggulir — memunculkan tandanya
   tepat ketika ia dicari.

   Layar sentuh tidak ikut: di sana tidak ada :hover yang dapat mengembalikannya,
   sehingga batangnya akan hilang selamanya. Batang gulir sentuh sudah berupa
   lapisan yang muncul saat digulir lalu memudar sendiri. */
@media (min-width: 1040px) and (pointer: fine) {
    .b-sisi {
        scrollbar-color: transparent transparent;
        transition: scrollbar-color 260ms ease;
    }

    .b-sisi:hover,
    .b-sisi:focus-within {
        scrollbar-color: var(--garis-tegas) transparent;
    }
}

/* --- Bilah suka dan bagikan ----------------------------------------------
   Di kaki badan berita, dipisahkan garis dari tulisannya. Garisnya menandai
   akhir bacaan: tanpa itu, deretan keping bertepi tepat di bawah kalimat
   terakhir terbaca sebagai bagian dari beritanya.

   Semua kepingnya berbentuk sama — tombol suka, tombol bagikan sistem,
   keempat tautan saluran, dan tombol salin. Bentuk yang sama menegaskan
   ketujuhnya setara: tidak ada satu saluran pun yang lebih dianjurkan portal
   ini daripada yang lain, dan tombol suka bukan ajakan yang lebih besar
   daripada berbagi.

   Membungkus ke baris berikutnya di layar sempit, bukan menggulir menyamping:
   keping yang separuhnya terpotong di tepi kanan tidak pernah terlihat sebagai
   "ada lagi di sebelah sana" — ia terlihat sebagai tata letak yang rusak. */
.a-aksi {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--garis-lembut);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

/* Kata "Bagikan" berdiri sebagai nama bagi daftar salurannya, bukan sebagai
   judul di atasnya: satu baris pendek berisi tujuh keping tidak membutuhkan
   kepala bagian, tetapi daftarnya tetap membutuhkan nama yang dapat
   dibacakan — aria-labelledby pada <ul> menunjuk ke sini. */
.a-aksi-nama {
    margin: 0 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--teks-lembut);
}

.a-aksi-daftar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.a-aksi-keping {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border: 1px solid var(--garis);
    border-radius: 999px;
    background: var(--latar-tinggi);
    color: var(--teks);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}
.a-aksi-keping:hover { background: var(--latar-lembut); border-color: var(--garis-tegas); }

.a-aksi-keping svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentcolor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.a-suka-bentuk { margin: 0; }

/* Jempol, SELALU terisi warnanya — juga sebelum ditekan.

   var(--utama), bukan --bahaya seperti ketika lambangnya masih hati. Merah
   pada hati terbaca sebagai kasih sayang; merah yang sama pada jempol terbaca
   sebagai peringatan, sebab di seluruh portal ini --bahaya memang dipakai
   untuk itu. --utama pula yang membuat lambangnya ikut bertema di halaman
   satuan kerja, seperti tautan dan judulnya.

   Yang menanggung keterangan "sudah kamu sukai" KEPINGNYA, bukan isian
   jempolnya: tepinya menguat, latarnya bersemu, dan hurufnya ikut berwarna.
   Ketiganya berubah bersamaan, jadi keadaannya terbaca sekali lihat — dan
   tetap terbaca pula oleh yang tidak membedakan warna, sebab aria-pressed pada
   tombolnya yang dibacakan pembaca layar, bukan warnanya.

   Token, bukan warna yang ditulis sendiri: --utama sudah punya pasangan
   gelapnya, sudah dipekatkan di mode kontras tinggi, dan sudah diganti tema
   satuan kerja. Warna tetap akan lolos dari ketiganya tanpa satu pun galat. */
.a-suka svg { fill: var(--utama); stroke: none; }

.a-suka[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--utama) 45%, var(--garis));
    background: color-mix(in srgb, var(--utama) 8%, var(--latar-tinggi));
    color: var(--utama-kuat);
}

/* Angkanya tabular supaya lebar kepingnya tidak berubah-ubah saat angkanya
   berganti dari 9 ke 10 — keping yang melebar sendiri menggeser seluruh
   deretan di sebelahnya pada layar sempit. */
.a-suka-angka {
    font-variant-numeric: tabular-nums;
    padding-left: 2px;
    color: var(--teks-lembut);
}
.a-suka[aria-pressed="true"] .a-suka-angka { color: inherit; }

/* --- Lambang saluran berbagi ---------------------------------------------
   Ikon saja, tanpa tulisan. Yang membuatnya tetap dapat dipakai orang yang
   tidak mengenali lambangnya ada tiga, dan ketiganya di berkas lain: nama
   lengkap di dalam .sr-only, title bawaan peramban, dan kata "BAGIKAN" yang
   menamai seluruh deretnya.

   Bundar, bukan bersudut seperti keping suka di sebelahnya. Bedanya bukan
   selera: keping bertulisan lebarnya mengikuti tulisannya, sedangkan enam
   bidang seukuran sama berjajar hanya terbaca sebagai satu kelompok bila
   bentuknya juga sama rata ke segala arah.

   40px, bukan 36: itu batas bawah sasaran tekan yang masih nyaman di layar
   sentuh menurut WCAG 2.5.8 (24px minimum, 44px dianjurkan), dan ikon berbagi
   ditekan justru paling sering dari ponsel.

   Warnanya mengikuti pola .tombol-alat di portal.css: nilai tetap, bukan
   peubah tema, sebab warna sebuah layanan tidak berubah hanya karena portalnya
   sedang gelap. X memakai var(--teks) justru karena warnanya HITAM — hitam
   pada latar gelap tidak terlihat sama sekali, sedangkan --teks membalik
   sendiri mengikuti temanya. */
.a-aksi-ikon {
    --warna-bagi: var(--teks-lembut);
    --tinta-bagi: #fff;

    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--garis);
    border-radius: 999px;
    background: var(--latar-tinggi);
    color: var(--warna-bagi);
    cursor: pointer;
}
.a-aksi-ikon svg {
    width: 19px;
    height: 19px;
    fill: var(--warna-bagi);
    stroke: none;
}

/* Dua kendali yang bukan merek — papan bagi sistem dan salin tautan — memakai
   ikon bergaris seperti seluruh ikon lain di portal ini, bukan bidang penuh.
   Bedanya menjadi keterangan: yang bergaris perbuatan portal sendiri, yang
   berbidang penuh lambang layanan di luar sana. */
.a-aksi-ikon .a-ikon-garis {
    fill: none;
    stroke: currentcolor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.a-bagi-wa { --warna-bagi: #25d366; }
.a-bagi-fb { --warna-bagi: #1877f2; }
.a-bagi-tg { --warna-bagi: #229ed9; }
.a-bagi-x  { --warna-bagi: var(--teks); --tinta-bagi: var(--latar-tinggi); }

/* Disentuh, warnanya berpindah dari ikon ke bidangnya. Itu yang membuat satu
   lambang menonjol sendiri dari deretnya — enam ikon berwarna yang hanya
   menggelap saat disentuh tidak pernah benar-benar terbaca "yang ini". */
.a-aksi-ikon:hover,
.a-aksi-ikon:focus-visible {
    background: var(--warna-bagi);
    border-color: var(--warna-bagi);
    color: var(--tinta-bagi);
}
.a-aksi-ikon:hover svg { fill: var(--tinta-bagi); }
.a-aksi-ikon:hover .a-ikon-garis { fill: none; stroke: var(--tinta-bagi); }

/* Kontras tinggi meniadakan warna layanan, sama persis dengan .tombol-alat di
   bilah kepala: di mode itu yang diutamakan keterbacaan, bukan pengenalan
   cepat lewat warna. */
:root[data-kontras="tinggi"] .a-aksi-ikon {
    --warna-bagi: var(--teks);
    --tinta-bagi: var(--latar-tinggi);
}

.a-aksi-kabar {
    flex-basis: 100%;
    margin: 0;
    min-height: 1.2em;
    font-size: 12.5px;
    color: var(--teks-lembut);
}

/* Di ponsel, "Bagikan" tidak lagi didorong ke ujung kanan: pada satu lajur ia
   akan berdiri sendirian di baris keduanya, jauh dari daftar yang dinamainya. */
@media (max-width: 619px) {
    .a-aksi-nama { margin-left: 0; }
}