/* ==========================================================================
   REFRESH TAMPILAN PPSDML (Okt 2026)
   --------------------------------------------------------------------------
   Lapisan penyegaran visual yang dimuat SETELAH CSS lama (bootstrap, global.css,
   CSS per-halaman). Hanya tipografi, spasi, micro-interaction, dan efek scroll
   ringan — struktur, isi, warna identitas, dan logika tidak diubah.
   Rollback: hapus baris include refresh.css / refresh.js di layout_index &
   layout_news2.
   ========================================================================== */

/* ---- 1. Font: Plus Jakarta Sans (self-host, OFL 1.1, variable 200–800) ---- */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-display: optional;   /* tanpa swap di tengah render → tanpa layout shift */
    font-weight: 200 800;
    src: url('../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2-variations'),
         url('../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-display: optional;   /* tanpa swap di tengah render → tanpa layout shift */
    font-weight: 200 800;
    src: url('../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-ext-wght-normal.woff2') format('woff2-variations'),
         url('../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fallback bermetrik sama: Arial/Helvetica yang diskalakan agar lebar & tinggi
   baris ≈ Plus Jakarta Sans (diukur dari file font: avg width 0.5072 vs 0.4919 em;
   ascent 1.038, descent 0.222, line-gap 0). Bila font utama belum siap, teks
   memakai fallback ini — tata letak praktis identik sehingga CLS tidak naik. */
@font-face {
    font-family: 'Jakarta Fallback';
    src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
    size-adjust: 103.11%;
    ascent-override: 100.66%;
    descent-override: 21.53%;
    line-gap-override: 0%;
}

/* ---- 2. Design token ---- */
:root {
    /* Tipografi — skala 1.2 dengan base 16px */
    --r-font: 'Plus Jakarta Sans', 'Jakarta Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --r-fs-meta: .8125rem;      /* 13px — batas bawah teks meta (dulu 11–12px) */
    --r-fs-sm: .875rem;
    --r-fs-base: 1rem;
    --r-fs-card: 1.0625rem;
    --r-fs-section: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
    --r-lh-body: 1.6;
    --r-lh-heading: 1.25;
    --r-tracking-heading: -.01em;
    --r-tracking-caps: .06em;

    /* Warna — hanya merujuk warna identitas yang SUDAH dipakai situs */
    --r-navy: #122086;
    --r-navy-ink: #1f2440;
    --r-yellow: #FFE500;
    --r-muted: #5b6275;         /* abu teks meta, kontras ≥ 4.5:1 di putih & bg-light */

    /* Spasi — kelipatan 4px */
    --r-section-y: clamp(2rem, 1.6rem + 1.2vw, 2.75rem);   /* padding atas-bawah tiap section */
    --r-card-pad: 1rem;
    --r-gap: 1.5rem;

    /* Radius & bayangan (warna bayangan dari navy identitas) */
    --r-radius-sm: 8px;
    --r-radius-card: 16px;
    --r-radius-pill: 999px;
    --r-shadow-1: 0 1px 3px rgba(18, 32, 134, .08), 0 1px 2px rgba(18, 32, 134, .04);
    --r-shadow-2: 0 10px 24px rgba(18, 32, 134, .14), 0 2px 6px rgba(18, 32, 134, .06);

    /* Gerak */
    --r-dur-fast: 150ms;
    --r-dur: 220ms;
    --r-dur-reveal: 600ms;
    --r-ease: cubic-bezier(.2, .8, .2, 1);
    --r-reveal-y: 16px;

    /* Fokus keyboard */
    --r-focus: 0 0 0 3px rgba(18, 32, 134, .35);

    /* Komponen Bootstrap ikut font baru */
    --bs-body-font-family: var(--r-font);
    --bs-font-sans-serif: var(--r-font);
}

/* ---- 3. Tipografi dasar ----
   global.css memaksa `html * { font-family: Roboto }` (Roboto tidak pernah dimuat).
   Selector yang sama di file yang dimuat belakangan menggantikannya. Ikon font
   (FontAwesome) memakai selector class sehingga tetap menang. */
html * {
    font-family: var(--r-font);
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    line-height: var(--r-lh-heading);
    letter-spacing: var(--r-tracking-heading);
}

/* ---- 4. Aksesibilitas gerak ----
   Pengguna yang memilih "kurangi gerakan": semua animasi & transisi dekoratif mati. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- 5. Navbar & dropdown ----
   Selector sengaja lebih spesifik daripada <style> inline di header.blade.php
   (yang dimuat SETELAH file ini) agar menang tanpa !important. */

/* Hover menu utama: garis bawah tipis (transform), bukan opacity .7 yang
   menurunkan kontras teks putih. ::after dipakai Bootstrap untuk caret dropdown,
   jadi indikator memakai ::before. */
.navbar .navbar-nav > .nav-item > .nav-link {
    position: relative;
}
.navbar .navbar-nav > .nav-item > .nav-link::before {
    content: '';
    position: absolute;
    left: .5rem;
    right: .5rem;
    bottom: .2rem;
    height: 2px;
    border-radius: 2px;
    background: var(--r-yellow);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--r-dur) var(--r-ease);
    pointer-events: none;
}
.navbar .navbar-nav > .nav-item:hover > .nav-link,
.navbar .navbar-nav > .nav-item > .nav-link:focus-visible,
.navbar .navbar-nav > .nav-item > .nav-link.show {
    opacity: 1;
}
.navbar .navbar-nav > .nav-item:hover > .nav-link::before,
.navbar .navbar-nav > .nav-item > .nav-link:focus-visible::before,
.navbar .navbar-nav > .nav-item > .nav-link.show::before {
    transform: scaleX(1);
}

/* Cincin fokus keyboard: kuning di latar navy, navy di panel putih */
.navbar a:focus-visible,
.navbar button:focus-visible {
    outline: 2px solid var(--r-yellow);
    outline-offset: 2px;
    border-radius: 6px;
    box-shadow: none;
}
.navbar .dropdown-menu a:focus-visible,
.navbar .dropdown-menu button:focus-visible {
    outline-color: var(--r-navy);
    outline-offset: -2px;
}

/* Panel dropdown: sudut 12px, bayangan lembut, muncul fade + naik 6px */
.navbar .dropdown-menu {
    border: 0;
    border-radius: 12px;
    box-shadow: var(--r-shadow-2);
    padding: .375rem 0;
    overflow: hidden;
}
.navbar .dropdown-menu.show {
    animation: r-dropdown-in var(--r-dur-fast) var(--r-ease);
}
@keyframes r-dropdown-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Item dropdown: hover = latar lembut + aksen navy di kiri (bukan opacity .7) */
.navbar .dropdown-menu .dropdown-item {
    position: relative;
    line-height: 1.4;
}
.navbar .dropdown-menu .dropdown-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--r-navy);
    transform: scaleY(0);
    transition: transform var(--r-dur-fast) var(--r-ease);
}
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus-visible {
    opacity: 1;
    background-color: #f3f5fc;
    color: var(--r-navy) !important;   /* header.blade memaksa #212529 !important */
}
.navbar .dropdown-menu .dropdown-item:hover::before,
.navbar .dropdown-menu .dropdown-item:focus-visible::before {
    transform: scaleY(1);
}
.navbar .dropdown-menu .dropdown-item:active {
    background-color: #e8ecf8;
}
.navbar .dropdown-menu li:last-child > .dropdown-item,
.navbar .dropdown-menu li:last-child form > .dropdown-item {
    border-bottom: 0;
}

/* Tombol hamburger (mobile): umpan balik tekan */
.navbar .navbar-toggler {
    transition: transform var(--r-dur-fast) var(--r-ease);
}
.navbar .navbar-toggler:active {
    transform: scale(.94);
}
/* Menu mobile (collapse) tersusun vertikal selebar layar → garis bawah tidak cocok */
@media (max-width: 991.98px) {
    .navbar .navbar-nav > .nav-item > .nav-link::before {
        display: none;
    }
}

/* ---- 6. Section, judul section & kartu ---- */

/* Ritme vertikal section seragam (dulu py-4 / py-5 bercampur) */
#body > section > .container-xl.py-4,
#body > section > .py-5 {
    padding-top: var(--r-section-y) !important;
    padding-bottom: var(--r-section-y) !important;
}

/* Kepala section: garis kuning identitas + label (teks tetap seperti semula) */
.r-section-head {
    gap: 1rem !important;
    margin-bottom: 1.5rem !important;
}
.r-section-rule {
    width: 40px;
    margin: 0;
    border: 0;
    border-top: 3px solid var(--r-yellow);
    opacity: 1;
    flex: 0 0 auto;
}
.r-section-head > a,
.r-section-head > button,
.r-section-head > strong {
    font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
    letter-spacing: .04em;
    line-height: 1.3;
    padding: 0;
}
.r-section-head > button {
    cursor: pointer;
}
.r-section-head > button:focus-visible,
.r-section-head > a:focus-visible {
    outline: 2px solid var(--r-navy);
    outline-offset: 4px;
    border-radius: 4px;
}

/* Judul tengah (Aplikasi & Layanan, Media Sosial) + garis kuning di bawah */
.r-section-heading {
    font-size: var(--r-fs-section);
    letter-spacing: var(--r-tracking-heading);
    margin-bottom: .75rem;
}
.r-section-heading::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    margin: .75rem auto 0;
    border-radius: 2px;
    background: var(--r-yellow);
}

/* Efek sapuan biru bawaan (block-reveal): wrapper selalu memotong isinya.
   Sebelumnya hanya saat .animated → blok transparan meluber ke kanan dan
   memicu scroll horizontal di semua lebar layar. Tampilan tidak berubah. */
.block-reveal {
    position: relative;
    overflow: hidden;
}

/* Kartu berita/pengumuman: radius 16px, bayangan halus, naik 4px saat hover.
   Catatan: modal share berada DI LUAR .card (saudara di .col), jadi transform
   pada .card tidak mengurung modal position:fixed. */
#berita-body .container-overlay.card,
#pengumuman-body .container-overlay.card {
    border-radius: var(--r-radius-card);
    box-shadow: var(--r-shadow-1);
    transition: transform var(--r-dur) var(--r-ease);
}
#berita-body .container-overlay.card:hover,
#pengumuman-body .container-overlay.card:hover,
#berita-body .container-overlay.card:focus-within,
#pengumuman-body .container-overlay.card:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--r-shadow-2);
}
#berita-body .container-overlay .rounded,
#pengumuman-body .container-overlay .rounded {
    border-radius: var(--r-radius-card) !important;   /* global.css: 24px !important */
}

/* Overlay kartu (ikon Detail/Bagikan/Unduh): dulu display none→block seketika
   dan TIDAK terjangkau keyboard. Kini fade (opacity) + tampil saat fokus. */
.container-overlay .card-overlay {
    display: block;
    position: absolute;
    z-index: 4;
    opacity: 0;
    transition: opacity var(--r-dur) var(--r-ease);
}
.container-overlay:hover .card-overlay,
.container-overlay:focus-within .card-overlay {
    opacity: 1;
    z-index: 999;
}
.container-overlay .card-overlay a {
    transition: transform var(--r-dur-fast) var(--r-ease);
}
.container-overlay .card-overlay a:hover {
    transform: scale(1.1);
}
.container-overlay .card-overlay a:focus-visible {
    outline: 2px solid var(--r-yellow);
    outline-offset: 4px;
    border-radius: 6px;
}

/* Gambar kartu & galeri: zoom halus di dalam bingkai */
.container-overlay .post-img img,
.r-card .position-relative > img {
    transition: transform 400ms var(--r-ease);
}
.container-overlay:hover .post-img img,
.container-overlay:focus-within .post-img img,
a:hover > .r-card .position-relative > img,
a:focus-visible > .r-card .position-relative > img {
    transform: scale(1.04);
}

/* Galeri foto & video: sudut gambar seragam 16px */
.container-overlay:not(.card) .post-img,
.container-overlay:not(.card) .card-overlay,
#body a > .post-img.block-reveal {
    border-radius: var(--r-radius-card);
}

/* Kartu siaran pers: radius seragam + naik saat hover/fokus */
.r-card {
    border-radius: var(--r-radius-card) !important;   /* inline 10px */
    transition: transform var(--r-dur) var(--r-ease);
}
a:hover > .r-card,
a:focus-visible > .r-card {
    transform: translateY(-4px);
    box-shadow: var(--r-shadow-2) !important;
}
a:focus-visible:has(> .r-card) {
    outline: 2px solid var(--r-navy);
    outline-offset: 4px;
    border-radius: var(--r-radius-card);
}

/* Teks meta (tanggal, editor, view) minimal 13px — dulu 12px inline */
#body .post-date,
#body .post-date > i {
    font-size: var(--r-fs-meta) !important;
}

/* Tombol "Tampilkan Lebih Banyak" */
.btn-box .btn {
    border-radius: var(--r-radius-pill) !important;
    padding: .625rem 1.5rem;
    font-weight: 600;
    transition: transform var(--r-dur-fast) var(--r-ease);
}
.btn-box .btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--r-shadow-2);
}
.btn-box .btn:active {
    transform: translateY(0) scale(.98);
}
.btn-box .btn:focus-visible {
    outline: 2px solid var(--r-navy);
    outline-offset: 3px;
    box-shadow: none;
}

/* Aplikasi & layanan terkait */
#aplikas-dan-layanan-terkait .row.layanan-terkait {
    margin-left: 0;    /* .row tanpa container → margin negatif meluber (scroll horizontal di mobile) */
    margin-right: 0;
}
#aplikas-dan-layanan-terkait .card-layanan {
    border-radius: var(--r-radius-card);
}
#aplikas-dan-layanan-terkait .card-layanan img {
    transition: transform var(--r-dur) var(--r-ease);
}
#aplikas-dan-layanan-terkait .card-layanan:hover img,
#aplikas-dan-layanan-terkait .card-layanan:focus-visible img {
    transform: scale(1.06);
}
#aplikas-dan-layanan-terkait .card-layanan:focus-visible {
    outline: 2px solid var(--r-navy);
    outline-offset: 3px;
}

/* Media sosial: radius seragam */
.bg-medsos.rounded {
    border-radius: var(--r-radius-card) !important;
}

/* ---- 7. Tabel jadwal diklat (tanpa animasi) ---- */
#tb_data {
    --bs-table-striped-bg: #f5f7fd;
    --bs-table-hover-bg: #e9edfa;
}
#tb_data > :not(caption) > * > * {
    padding: .625rem .75rem;
    vertical-align: middle;
}
#tb_data > thead > tr > th {
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* Judul kartu berita/galeri: kotak tinggi 56px + line-clamp 3 (bawaan). Ukuran &
   line-height disetel agar 3 baris muat utuh (3 × 18px = 54px). */
#body .post-title h6 {
    font-size: .9375rem;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0;
}

/* ---- 8. Statistik ---- */
.r-stat-number {
    font-variant-numeric: tabular-nums;   /* angka selebar sama → tidak bergoyang saat menghitung */
    letter-spacing: -.01em;
    margin-bottom: .25rem;
}

/* Zebra tabel jadwal: CSS DataTables (bootstrap4.min.css) memaksa abu-abu 5%
   lewat box-shadow; diganti rona navy sangat lembut. */
#tb_data.table-striped > tbody > tr:nth-of-type(odd) > * {
    box-shadow: inset 0 0 0 9999px #f3f5fc;
}
#tb_data.table-hover > tbody > tr:hover > * {
    box-shadow: inset 0 0 0 9999px #e6eaf8;
}

/* ---- 9. Footer ---- */
/* Jarak antar-tautan: dulu mb-2 (li) + margin-bottom 8px (a) = 16px ganda */
#footer .nav-item > .nav-link {
    margin-bottom: 0;
    font-size: var(--r-fs-sm);
    line-height: 1.5;
    transition: transform var(--r-dur-fast) var(--r-ease);
}
/* <style> header.blade (.nav-item:hover>a { opacity:.7 }) ikut bocor ke footer */
#footer .nav-item:hover > .nav-link {
    opacity: 1;
}
#footer .nav-item > .nav-link:hover {
    transform: translateX(3px);
    text-decoration: underline;
    text-underline-offset: 3px;
}
#footer a:focus-visible {
    outline: 2px solid var(--r-navy);
    outline-offset: 3px;
    border-radius: 4px;
}
#footer h5 {
    letter-spacing: .02em;
}
#footer address {
    line-height: 1.7;
}
.r-footer-map {
    display: block;
    border-radius: var(--r-radius-card);
}
.footer-copyright .copyright {
    font-size: var(--r-fs-sm);
    margin-bottom: 0;
    padding-bottom: 1rem;   /* atas = mt-3 (1rem, !important dari Bootstrap) → simetris */
}

/* Logo ISO (absolute) menimpa daftar tautan di layar sempit → mengalir di bawah daftar */
@media (max-width: 767.98px) {
    #footer img[src*="iso-logo"] {
        position: static !important;   /* inline: position absolute */
        display: block;
        margin: 1.25rem auto 0;
    }
}

/* ---- 10. Efek scroll ----
   State awal reveal HANYA berlaku bila refresh.js memasang .r-js di <html> dan
   class .r-reveal-pending di elemen → tanpa JS, konten selalu tampil. */
/* !important: kartu berita punya aturan transform/transition ber-ID (hover) yang
   lebih spesifik; state reveal hanya hidup < 1 detik lalu class dihapus JS. */
.r-js [data-reveal].r-reveal-pending {
    opacity: 0 !important;
    transform: translateY(var(--r-reveal-y)) !important;
}
.r-js [data-reveal].r-reveal-pending.r-revealed {
    opacity: 1 !important;
    transform: none !important;
    transition: opacity var(--r-dur-reveal) var(--r-ease), transform var(--r-dur-reveal) var(--r-ease) !important;
}

/* Header setelah di-scroll: bayangan tipis (opacity) + logo mengecil (transform) */
.navbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 14px;
    transform: translateY(100%);
    background: linear-gradient(to bottom, rgba(10, 14, 60, .18), rgba(10, 14, 60, 0));
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--r-dur) var(--r-ease);
}
.navbar.r-scrolled.sticky-top::after {
    opacity: 1;
}
.navbar .nav-brand {
    transform-origin: left center;
    transition: transform var(--r-dur) var(--r-ease);
}
.navbar.r-scrolled .nav-brand {
    transform: scale(.94);
}

/* ---- 11. Halaman konten (berita detail, PPID) — cegah scroll horizontal ---- */
/* Gambar di isi artikel (dari editor) tidak boleh melebihi kolom */
.post-content img,
.tabs-desktop .tab-content img,
.tabs-mobile .accordion-body img {
    max-width: 100%;
    height: auto;
}
/* PPID desktop: isi tab boleh menyusut (flex item) & menu tab boleh membungkus
   di layar tablet (text-nowrap membuat menu terlalu lebar → isi meluber 163px) */
.tabs-desktop .tab-content {
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
}
@media (max-width: 1199.98px) {
    .tabs-desktop .nav {
        flex: 0 0 34%;
        max-width: 34%;
    }
    .tabs-desktop .nav-link.text-nowrap {
        white-space: normal !important;   /* utilitas Bootstrap ber-!important */
    }
}
/* Navbar di layar 992–1199px: 8 menu + logo melebihi lebar → pilihan bahasa
   terdorong keluar layar (scroll horizontal ±19px di halaman ber-sticky-top) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar .navbar-nav > .nav-item > .nav-link {
        padding-left: .4rem;
        padding-right: .4rem;
        font-size: .84rem;
    }
}

/* ---- 12. Pesan ruang banner hero (cegah layout shift) ----
   Gambar banner tanpa width/height → tinggi 0 sampai terunduh, lalu seluruh
   konten di bawahnya terdorong ±675px (CLS hingga 0.6–0.8 di Lighthouse).
   Splide menyamakan tinggi track dengan slide tertinggi; rasio banner saat ini
   2.13–2.27 (lebar:tinggi) → ruang dipesan setara rasio tertinggi (2.133).
   Setelah gambar termuat, tinggi akhirnya identik → tampilan tidak berubah. */
.splide.banners .splide__track {
    min-height: calc(100vw / 2.133);
}