/* =====================================================================
   PENABUR Cirebon — Theme Override
   Palet: Biru #1F4E91 (utama) · Merah #D32F2F (aksen) · Kuning #F5B800 (CTA)
   Gaya: modern, bersih, mobile-first (referensi: umn.ac.id)
   Dimuat SETELAH style.css untuk menimpa tema "education" bawaan template.
   ===================================================================== */

:root {
    --biru: #1F4E91;
    --biru-dark: #163A6B;
    --biru-light: #EAF1FB;
    --merah: #D32F2F;
    --merah-dark: #B71C1C;
    --kuning: #F5B800;
    --kuning-dark: #D89E00;
    --ink: #1B2433;
    --muted: #5A6473;
    --line: #E6EAF0;
    --bg-soft: #F6F8FB;
    --radius: 14px;
    --shadow-sm: 0 4px 14px rgba(31, 78, 145, .08);
    --shadow-md: 0 10px 30px rgba(31, 78, 145, .12);
    --font-head: 'Poppins', 'Segoe UI', sans-serif;
    --font-body: 'Inter', 'Segoe UI', sans-serif;
}

/* ---------- Base ---------- */
body {
    font-family: var(--font-body);
    color: var(--ink);
    background: #fff;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    color: var(--ink);
    font-weight: 700;
}
a { color: var(--biru); }
a:hover, a:focus { color: var(--biru-dark); text-decoration: none; }
.section-padding { padding: 80px 0; }
.bg-soft { background: var(--bg-soft); }
img { max-width: 100%; }

/* ---------- Section titles ---------- */
.section-title h2,
.section-title-two h2 { color: var(--ink); font-weight: 700; }
.section-title p span,
.section-title-two h2 span,
.section-title h2 span { color: var(--biru); }
.section_top h4 { color: var(--merah); letter-spacing: 2px; text-transform: uppercase; font-weight: 600; }

.pn-eyebrow {
    display: inline-block;
    color: var(--merah);
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 10px;
}
.pn-heading { font-size: 34px; line-height: 1.2; margin-bottom: 14px; }
.pn-heading span { color: var(--biru); }
.pn-sub { color: var(--muted); max-width: 720px; }
.text-center .pn-sub { margin-left: auto; margin-right: auto; }

/* Template menata .section-title h2 sebagai teks mungil (14px, line-height 1px,
   UPPERCASE) dan .section-title p sebagai judul raksasa 40px — kebalikan dari
   hierarki yang dipakai di sini. Selector di bawah menang karena sama-sama
   (0,1,1) dan penabur.css dimuat belakangan. */
h2.pn-heading {
    font-size: 34px; font-weight: 700; line-height: 1.25;
    letter-spacing: 0; text-transform: none; color: var(--ink);
    margin: 0 0 14px; padding: 0;
}
p.pn-sub {
    width: auto; max-width: 720px;
    font-size: 16px; font-weight: 400; line-height: 1.7;
    text-transform: none; color: var(--muted);
}

/* ---------- Buttons ---------- */
.btn_one, .btn_two,
.pn-btn {
    display: inline-block;
    border: none;
    border-radius: 50px;
    font-family: var(--font-head);
    font-weight: 600;
    padding: 12px 28px;
    transition: all .25s ease;
    cursor: pointer;
}
.btn_one, .pn-btn-primary {
    background: var(--biru) !important;
    color: #fff !important;
}
.btn_one:before { display: none !important; }
.btn_one:hover, .pn-btn-primary:hover { background: var(--biru-dark) !important; color: #fff !important; box-shadow: var(--shadow-md); transform: translateY(-2px); }

.pn-btn-accent { background: var(--kuning) !important; color: #1B2433 !important; }
.pn-btn-accent:hover { background: var(--kuning-dark) !important; color: #1B2433 !important; transform: translateY(-2px); box-shadow: var(--shadow-md); }

.pn-btn-red { background: var(--merah) !important; color: #fff !important; }
.pn-btn-red:hover { background: var(--merah-dark) !important; color: #fff !important; transform: translateY(-2px); }

.pn-btn-outline { background: transparent !important; color: #fff !important; border: 2px solid rgba(255,255,255,.7) !important; padding: 10px 26px; }
.pn-btn-outline:hover { background: #fff !important; color: var(--biru) !important; }

.btn_two { background: var(--kuning); color: #1B2433; }
.btn_two:hover { background: var(--kuning-dark); color: #1B2433; }
.cta:before { background: rgba(31, 78, 145, .12); }
.cta:hover:before { background: var(--biru); }
.cta span { color: var(--biru); }
.cta:hover span { color: #fff; }
.cta svg { stroke: var(--biru); }
.cta:hover svg { stroke: #fff; }
.cta svg path, .cta svg polyline { stroke: var(--biru); }
.cta:hover svg path, .cta:hover svg polyline { stroke: #fff; }

/* Tombol kecil modern (mis. "Lihat" pada kartu) */
.pn-btn-sm {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--biru); color: #fff !important;
    font-family: var(--font-head); font-weight: 600; font-size: 13px;
    padding: 8px 18px; border-radius: 50px; line-height: 1;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pn-btn-sm i { font-size: 12px; transition: transform .2s ease; }
.pn-btn-sm:hover { background: var(--biru-dark); color: #fff !important; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.pn-btn-sm:hover i { transform: translateX(3px); }
.pn-btn-sm.outline { background: transparent; color: var(--biru) !important; border: 1.5px solid var(--biru); }
.pn-btn-sm.outline:hover { background: var(--biru); color: #fff !important; }

/* ---------- Top contact bar ---------- */
.logo-contact { background: var(--biru-dark); padding: 0; }
.pn-topbar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 6px 20px; min-height: 42px;
}
/* kontak dikelompokkan di kiri agar tidak menggantung di tengah */
.pn-topbar-info { display: flex; align-items: center; flex-wrap: wrap; }
.pn-topbar-item {
    display: inline-flex; align-items: center; gap: 8px;
    color: rgba(255,255,255,.82); font-size: 13.5px; padding: 10px 18px 10px 0;
    transition: color .2s ease;
}
.pn-topbar-item + .pn-topbar-item { padding-left: 18px; border-left: 1px solid rgba(255,255,255,.15); }
.pn-topbar-item i { color: var(--kuning); font-size: 14px; }
a.pn-topbar-item:hover { color: #fff; }

.pn-topbar-social { display: flex; align-items: center; gap: 6px; }
.pn-topbar-follow {
    color: rgba(255,255,255,.5); font-size: 11.5px; font-weight: 600;
    letter-spacing: 1.4px; text-transform: uppercase; margin-right: 6px;
}
.pn-topbar-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px; font-size: 14px;
    background: rgba(255,255,255,.1); color: #fff;
    transition: background .2s ease, color .2s ease;
}
.pn-topbar-social a:hover { color: #fff; }
.pn-topbar-social .s-fb:hover { background: #1877F2; }
.pn-topbar-social .s-ig:hover { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4); }
.pn-topbar-social .s-yt:hover { background: #FF0000; }

/* ---------- Navbar (menempel saat digulir, tetap dalam alur — tidak menimpa hero) ---------- */
#navigation.pn-navbar {
    position: sticky !important;
    top: 0;
    z-index: 990;
    margin-top: 0 !important;
    padding: 0 !important;
    width: 100%;
    background: #fff !important;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 4px 18px rgba(31, 78, 145, .06);
    transition: box-shadow .25s ease;
}
#navigation.pn-navbar.is-stuck { box-shadow: 0 8px 26px rgba(31, 78, 145, .14); }
.top_menu_bg { background: transparent; }
.pn-logo { display: flex; align-items: center; gap: 12px; padding: 14px 0; }
.pn-logo-mark {
    width: 46px; height: 46px; border-radius: 12px; flex: 0 0 46px;
    background: linear-gradient(135deg, var(--biru), var(--biru-dark));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-head); font-weight: 800; font-size: 20px;
    box-shadow: var(--shadow-sm);
}
.pn-logo-mark span { color: var(--kuning); }
.pn-logo-text strong { display: block; font-family: var(--font-head); color: var(--biru); font-size: 17px; line-height: 1.1; font-weight: 700; }
.pn-logo-text small { color: var(--muted); font-size: 11px; letter-spacing: .5px; }

.header_right { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
#main-menu ul { text-align: right; white-space: nowrap; margin: 0; }
#main-menu > ul > li { margin-left: 0; }
#main-menu > ul > li > a {
    color: var(--ink) !important;
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 14.5px;
    padding: 30px 13px;
    display: inline-block;
    position: relative;
}
/* penanda menu aktif — garis biru yang melebar dari tengah */
#main-menu > ul > li > a:after {
    content: ""; position: absolute; left: 13px; right: 13px; bottom: 22px;
    height: 3px; border-radius: 3px; background: var(--biru);
    transform: scaleX(0); transform-origin: center;
    transition: transform .25s ease;
}
#main-menu > ul > li > a:hover:after,
#main-menu > ul > li.active > a:after { transform: scaleX(1); }
#main-menu > ul > li.active > a { font-weight: 600; }
#main-menu > ul > li > a .ti-angle-down {
    font-size: 10px; margin-left: 4px; display: inline-block; transition: transform .25s ease;
}
#main-menu > ul > li:hover > a .ti-angle-down { transform: rotate(180deg); }
#main-menu > ul > li > a:hover,
#main-menu > ul > li.active > a { color: var(--biru) !important; }
/* jarak lega sebelum tombol CTA agar menu tidak menempel ke tombol */
.header_right > .nav-cta-btn,
.header_right > .dropdown { margin-left: 22px; }
.nav-cta-btn { flex: 0 0 auto; white-space: nowrap; padding: 10px 22px; }

@media (min-width: 992px) and (max-width: 1199px) {
    #main-menu > ul > li > a { padding: 30px 9px; font-size: 13.5px; }
    #main-menu > ul > li > a:after { left: 9px; right: 9px; }
    .nav-cta-btn { padding: 9px 16px; font-size: 14px; }
    .header_right > .nav-cta-btn, .header_right > .dropdown { margin-left: 12px; }
    .pn-logo-text small { font-size: 10px; }
}
#main-menu ul li ul { box-shadow: var(--shadow-md); border-top: 3px solid var(--biru); border-radius: 0 0 10px 10px; }
#main-menu ul li ul li a { color: var(--ink) !important; font-size: 14px; }
#main-menu ul li ul li a:hover { background: var(--biru-light); color: var(--biru) !important; padding-left: 22px; }
.nav-cta { padding: 18px 0; text-align: right; }

/* ---------- Menu mobile (slicknav) ----------
   Panel dibuat selebar kontainer dan mengalir di bawah baris logo, bukan
   menggantung setengah layar menimpa logo. Tombol tetap rata kanan. */
#mobile_menu { width: 100% !important; margin: 0; }
.slicknav_menu {
    display: flex; flex-direction: column; align-items: stretch;
    background: transparent; padding: 0;
}
/* tombol menu: template menaruhnya position:absolute terhadap dokumen (tanpa
   induk ber-posisi) sehingga letaknya rapuh dan tidak menyumbang tinggi. */
.slicknav_btn {
    position: static !important; float: none !important; margin: 0 !important;
    top: auto !important; right: auto !important; align-self: flex-end;
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0 !important;
    background: var(--biru) !important; border-radius: 10px;
    transition: background .2s ease;
}
.slicknav_btn:hover, .slicknav_btn:focus { background: var(--biru-dark) !important; }
.slicknav_menu .slicknav_icon { margin: 0 !important; float: none !important; }

/* Kolom menu hanya selebar setengah baris (berbagi dengan logo), jadi panel yang
   mengalir normal ikut terjepit setengah layar dan menimpa logo. Panel dilepas
   dari kolom itu dan direntangkan selebar kontainer, tepat di bawah navbar. */
#navigation .top_menu_bg { position: relative; }
.slicknav_nav {
    position: absolute; left: 12px; right: 12px; top: calc(100% + 6px); z-index: 999;
    width: auto; background: var(--biru) !important;
    border-radius: 14px; margin: 0; padding: 6px;
    box-shadow: 0 14px 34px rgba(22, 58, 107, .3);
}
.slicknav_nav ul { margin: 0 !important; padding: 0; }
.slicknav_nav li { list-style: none; }
/* garis tipis antar item utama agar batasnya terbaca */
.slicknav_nav > ul > li + li { border-top: 1px solid rgba(255,255,255,.13); }

/* satu aturan untuk tautan biasa maupun baris induk bersubmenu */
.slicknav_nav a,
.slicknav_nav .slicknav_row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: 0 !important; padding: 13px 14px !important; border-radius: 10px;
    color: #fff !important; font-family: var(--font-head);
    font-weight: 500; font-size: 15px; line-height: 1.35;
    transition: background .2s ease;
}
/* baris induk sudah jadi wadah — tautan di dalamnya jangan diberi padding lagi */
.slicknav_nav .slicknav_row > a { padding: 0 !important; flex: 1; border-radius: 0; }
.slicknav_nav a:hover, .slicknav_nav a:focus,
.slicknav_nav .slicknav_row:hover { background: rgba(255,255,255,.14) !important; color: #fff !important; }
.slicknav_nav .slicknav_row > a:hover { background: transparent !important; }
/* halaman yang sedang dibuka ditandai kuning */
.slicknav_nav > ul > li.active > a { background: rgba(255,255,255,.14) !important; color: var(--kuning) !important; font-weight: 600; }

/* panah bawaan template ikut tersalin ke menu mobile — pakai penanda slicknav saja */
.slicknav_nav .ti-angle-down { display: none !important; }
.slicknav_nav .slicknav_arrow {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 22px; height: 22px; margin: 0; flex: 0 0 22px;
    font-size: 9px; border-radius: 50%; background: rgba(255,255,255,.16);
}
/* slicknav sudah menukar sendiri lambangnya (► ke ▼) saat submenu dibuka,
   jadi jangan diputar lagi — hasilnya malah menghadap ke samping. */
.slicknav_nav .slicknav_open > .slicknav_row .slicknav_arrow { background: var(--kuning); color: #1B2433; }

/* submenu dibedakan latar & indentasinya supaya jenjangnya jelas */
.slicknav_nav ul ul {
    background: rgba(0,0,0,.16); border-radius: 10px; margin: 0 0 6px !important; padding: 4px !important;
}
.slicknav_nav ul ul li + li { border-top: 1px solid rgba(255,255,255,.08); }
.slicknav_nav ul ul a { font-size: 14px; font-weight: 400; padding: 11px 14px 11px 26px !important; }

/* tombol masuk/keluar akun di dasar panel — di ponsel tombol CTA navbar tersembunyi.
   Selector ber-id dipakai agar menang atas aturan `#main-menu ul li` milik template,
   yang kalau tidak akan menampilkan item ini juga di menu desktop. */
#main-menu > ul > li.pn-menu-cta { display: none; }
@media (max-width: 991px) {
    .slicknav_nav .pn-menu-cta { display: block; border-top: 1px solid rgba(255,255,255,.13); }
    .slicknav_nav .pn-menu-cta a,
    .slicknav_nav .pn-menu-cta button {
        width: 100%; justify-content: center; gap: 8px;
        margin: 6px 0 2px !important; padding: 12px 14px !important;
        background: var(--kuning) !important; color: #1B2433 !important;
        border: 0; border-radius: 10px; font-weight: 700; font-size: 14.5px;
        font-family: var(--font-head); cursor: pointer;
    }
    .slicknav_nav .pn-menu-cta a:hover,
    .slicknav_nav .pn-menu-cta button:hover { background: var(--kuning-dark) !important; color: #1B2433 !important; }
}

/* ---------- HERO ---------- */
.pn-hero {
    position: relative;
    background: linear-gradient(120deg, var(--biru-dark) 0%, var(--biru) 60%, #2a63b0 100%);
    color: #fff;
    padding: 80px 0 100px;
    overflow: hidden;
}
.pn-hero:before {
    content: ""; position: absolute; right: -120px; top: -120px;
    width: 420px; height: 420px; border-radius: 50%;
    background: rgba(245, 184, 0, .14);
}
.pn-hero:after {
    content: ""; position: absolute; left: -80px; bottom: -140px;
    width: 360px; height: 360px; border-radius: 50%;
    background: rgba(211, 47, 47, .16);
}
.pn-hero .container { position: relative; z-index: 2; }
.pn-hero h1 { color: #fff; font-size: 46px; line-height: 1.15; margin-bottom: 18px; }
.pn-hero h1 span { color: var(--kuning); }
.pn-hero p { color: rgba(255,255,255,.9); font-size: 18px; max-width: 620px; margin-bottom: 28px; }
.pn-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.14); color: #fff;
    border-radius: 50px; padding: 7px 16px; font-size: 13px; font-weight: 600;
    margin-bottom: 22px; backdrop-filter: blur(4px);
}
.pn-hero-badge i { color: var(--kuning); }
.pn-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.pn-hero-search {
    margin-top: 30px; background: #fff; border-radius: 50px; padding: 7px;
    display: flex; max-width: 560px; box-shadow: var(--shadow-md);
}
.pn-hero-search input { flex: 1; border: none; outline: none; padding: 12px 20px; border-radius: 50px; color: var(--ink); }
.pn-hero-search button { border: none; background: var(--kuning); color: #1B2433; font-weight: 700; border-radius: 50px; padding: 0 26px; }
.pn-hero-search button:hover { background: var(--kuning-dark); }

/* ---------- Page banner (inner pages) ---------- */
.pn-page-hero {
    background: linear-gradient(120deg, var(--biru-dark), var(--biru));
    color: #fff; padding: 60px 0 56px; position: relative; overflow: hidden;
}
.pn-page-hero:after {
    content:""; position:absolute; right:-80px; top:-80px; width:280px; height:280px;
    border-radius:50%; background: rgba(245,184,0,.12);
}
.pn-page-hero .container { position: relative; z-index: 2; }
.pn-page-hero h1 { color: #fff; font-size: 38px; margin-bottom: 8px; }
.pn-page-hero p { color: rgba(255,255,255,.88); margin: 0; }
.pn-breadcrumb { font-size: 14px; color: rgba(255,255,255,.8); margin-top: 10px; }
.pn-breadcrumb a { color: var(--kuning); }

/* ---------- Stat counters ---------- */
.pn-stats { background: var(--bg-soft); }
.pn-stat-card {
    background: #fff; border-radius: var(--radius); padding: 32px 22px; text-align: center;
    box-shadow: var(--shadow-sm); border: 1px solid var(--line); height: 100%;
    transition: transform .25s ease, box-shadow .25s ease;
}
.pn-stat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.pn-stat-ico {
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center; font-size: 26px;
    background: var(--biru-light); color: var(--biru);
}
.pn-stat-card:nth-child(2) .pn-stat-ico { background: #fdeaea; color: var(--merah); }
.pn-stat-card:nth-child(3) .pn-stat-ico { background: #fff6da; color: var(--kuning-dark); }
.pn-stat-num { font-family: var(--font-head); font-size: 34px; font-weight: 800; color: var(--biru); line-height: 1; }
.pn-stat-card p { margin: 8px 0 0; color: var(--muted); font-weight: 500; }

/* ---------- Panel kanan "Tentang Kami" (foto + statistik) ---------- */
.pn-about-side { display: flex; flex-direction: column; gap: 22px; height: 100%; }
.pn-about-photo {
    position: relative; flex: 1 1 auto; min-height: 240px;
    border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-md);
    background: linear-gradient(135deg, var(--biru-light), #fff);
}
.pn-about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.pn-about-photo:after {
    content: ""; position: absolute; right: -40px; top: -40px; width: 130px; height: 130px;
    border-radius: 50%; background: rgba(245, 184, 0, .22);
}
.pn-about-photo-badge {
    position: absolute; left: 16px; bottom: 16px; z-index: 2;
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255, 255, 255, .92); color: var(--biru); backdrop-filter: blur(4px);
    font-family: var(--font-head); font-weight: 600; font-size: 13px;
    padding: 8px 14px; border-radius: 50px; box-shadow: var(--shadow-sm);
}
.pn-about-photo-badge i { color: var(--merah); }
.pn-about-stat-card {
    background: linear-gradient(135deg, var(--biru), var(--biru-dark));
    border-radius: 18px; padding: 30px; color: #fff; box-shadow: var(--shadow-sm);
    position: relative; overflow: hidden;
}
.pn-about-stat-card:before {
    content: ""; position: absolute; left: -30px; bottom: -50px; width: 150px; height: 150px;
    border-radius: 50%; background: rgba(255, 255, 255, .06);
}
.pn-about-stat-card h3 { color: #fff; font-size: 22px; margin: 0 0 8px; position: relative; }
.pn-about-stat-card p { color: rgba(255, 255, 255, .9); margin: 0 0 18px; font-size: 14.5px; position: relative; }
.pn-about-stat-row { display: flex; gap: 10px; position: relative; }
.pn-about-stat-row > div { flex: 1; }
.pn-about-stat-row strong { display: block; font-family: var(--font-head); font-size: 30px; font-weight: 800; color: var(--kuning); line-height: 1; }
.pn-about-stat-row small { color: rgba(255, 255, 255, .85); font-size: 13px; }

@media (max-width: 991px) {
    .pn-about-photo { min-height: 280px; }
}

/* ---------- Visi & Misi ---------- */
.pn-vm-card {
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    padding: 22px 24px 22px 28px; box-shadow: var(--shadow-sm);
    position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease;
}
.pn-vm-card:hover { transform: translateX(4px); box-shadow: var(--shadow-md); }
.pn-vm-card:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.pn-vm-visi:before { background: var(--biru); }
.pn-vm-misi:before { background: var(--merah); }
.pn-vm-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pn-vm-ico {
    width: 46px; height: 46px; border-radius: 12px; flex: 0 0 46px;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.pn-vm-visi .pn-vm-ico { background: var(--biru-light); color: var(--biru); }
.pn-vm-misi .pn-vm-ico { background: #fdeaea; color: var(--merah); }
.pn-vm-head h4 { margin: 0; font-size: 19px; }
.pn-vm-head small { display: block; color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: .5px; }
.pn-misi-list { list-style: none; padding: 0; margin: 0; }
.pn-misi-list li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.pn-misi-list li + li { border-top: 1px dashed var(--line); }
.pn-misi-list li i { color: var(--merah); margin-top: 3px; font-size: 15px; }

/* ---------- Cards (generic) ---------- */
.pn-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; height: 100%; box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease;
    display: flex; flex-direction: column;
}
.pn-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.pn-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.pn-tag {
    display: inline-block; background: var(--biru-light); color: var(--biru);
    font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 50px; margin-bottom: 10px;
    /* di dalam kartu (flex column) badge ikut melar selebar kartu — kunci selebar teksnya */
    align-self: flex-start; max-width: 100%; width: fit-content;
}
/* beberapa badge berdampingan di dalam kartu flex */
.pn-tag-group { display: flex; flex-wrap: wrap; gap: 6px; }
.pn-tag-group .pn-tag { margin-bottom: 10px; }
.pn-tag.red { background: #fdeaea; color: var(--merah); }
.pn-tag.yellow { background: #fff6da; color: var(--kuning-dark); }
.pn-card h3 { font-size: 18px; margin: 0 0 8px; line-height: 1.35; }
.pn-card h3 a { color: var(--ink); }
.pn-card h3 a:hover { color: var(--biru); }
.pn-meta { color: var(--muted); font-size: 13px; }
/* hanya kartu daftar (grid) yang meta-nya menempel ke bawah agar rata */
.pn-card-body > .pn-meta:last-child { margin-top: auto; }
.pn-meta i { color: var(--biru); margin-right: 5px; }

/* book / cover thumbs */
.pn-cover {
    aspect-ratio: 3 / 4; background: linear-gradient(135deg, var(--biru-light), #fff);
    display: flex; align-items: center; justify-content: center; color: var(--biru);
    position: relative; overflow: hidden;
}
.pn-cover i { font-size: 46px; opacity: .5; }
.pn-cover .pn-cover-title {
    position: absolute; inset: 0; padding: 18px; display: flex; flex-direction: column;
    justify-content: flex-end; background: linear-gradient(180deg, transparent 40%, rgba(22,58,107,.85));
    color: #fff; text-align: left;
}
.pn-cover .pn-cover-title strong { font-family: var(--font-head); font-size: 15px; line-height: 1.25; }
.pn-cover .pn-cover-title small { opacity: .9; font-size: 12px; margin-top: 4px; }

.pn-thumb {
    aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--biru), var(--biru-dark));
    display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.7);
}
.pn-thumb i { font-size: 40px; }

/* ---------- Kartu bersampul (karya digital & artikel) ---------- */
.pn-card-cover { position: relative; overflow: hidden; }
.pn-card-cover img {
    width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
    transition: transform .4s ease;
}
.pn-card:hover .pn-card-cover img { transform: scale(1.04); }
/* kategori & penanda unggulan dipindah ke atas sampul agar badan kartu lega */
.pn-card-cover .pn-card-cat {
    position: absolute; left: 12px; bottom: 12px; margin: 0;
    background: rgba(255,255,255,.94); box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.pn-work-flag {
    position: absolute; right: 12px; top: 12px;
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--kuning); color: #1B2433;
    font-size: 11px; font-weight: 700; letter-spacing: .3px;
    padding: 5px 11px; border-radius: 50px; box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.pn-work-flag i { font-size: 10px; }

/* judul dikunci dua baris supaya blok info & kaki kartu sejajar antar kartu */
.pn-card-title {
    font-size: 17px; line-height: 1.35; margin: 0 0 12px; min-height: 2.7em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pn-card-excerpt {
    font-size: 14px; line-height: 1.65; color: var(--muted); margin: 0 0 16px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* baris kaki kartu — dipisah garis dan selalu menempel ke dasar kartu */
.pn-card-foot {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line);
    font-size: 13px; color: var(--muted);
}
/* flex + align-items:center menyejajarkan ikon dengan teks tanpa geseran margin */
.pn-card-foot > span { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.pn-card-foot > span > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-card-foot i { color: var(--biru); font-size: 13px; line-height: 1; flex: 0 0 auto; margin: 0; }

/* E-Sight: sampul majalah tegak, tanggal + tombol baca menumpuk di kaki kartu */
.pn-esight-card .pn-card-cover img,
.pn-esight-card .pn-cover { aspect-ratio: 3 / 4; }
/* judul pindah ke badan kartu, jadi sampul cadangan tidak lagi punya teks —
   gradasi dipekatkan supaya tidak terlihat kosong */
.pn-esight-card .pn-cover {
    background: linear-gradient(150deg, var(--biru), var(--biru-dark));
    color: rgba(255,255,255,.5);
}
.pn-esight-card .pn-cover i { font-size: 56px; opacity: 1; }
.pn-esight-card .pn-card-title { font-size: 16px; min-height: 2.6em; }
.pn-esight-card .pn-card-excerpt { font-size: 13.5px; -webkit-line-clamp: 2; margin-bottom: 14px; }
.pn-esight-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.pn-esight-date {
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; color: var(--muted); margin-bottom: 12px;
}
.pn-esight-date i { color: var(--biru); font-size: 13px; line-height: 1; flex: 0 0 auto; margin: 0; }
.pn-esight-foot .btn_one { display: block; width: 100%; text-align: center; padding: 11px 16px; }
/* ikon yang punya warnanya sendiri jangan ikut dibirukan aturan di atas */
.pn-card-foot .pn-like i { color: var(--merah); }
.pn-card-foot .pn-btn-sm i { color: inherit; }
/* info disusun sebagai daftar berkolom ikon, bukan baris teks lepas */
.pn-work-meta { display: grid; gap: 7px; font-size: 13.5px; line-height: 21px; color: var(--muted); }
.pn-work-meta > span { display: grid; grid-template-columns: 16px 1fr; gap: 9px; align-items: start; }
/* .fa memaksa line-height:1 lewat shorthand font-nya, jadi kotak baris ikon lebih
   pendek dari kotak baris teks dan posisinya tidak pernah bertemu. Ikon ditaruh di
   kotak setinggi satu baris teks lalu dipusatkan — cara ini konsisten untuk semua
   ikon, tidak seperti geseran margin yang harus disetel per ikon. */
.pn-work-meta i {
    color: var(--biru); font-size: 13px; margin: 0;
    display: flex; align-items: center; justify-content: center;
    height: 21px; line-height: 1;
}
.pn-work-meta em { font-style: normal; color: var(--ink); font-weight: 500; }

.pn-work-card .pn-work-meta { margin-bottom: 16px; }
.pn-work-foot .pn-like {
    display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px;
    background: #fdeaea; padding: 5px 12px; border-radius: 50px;
}
.pn-work-foot .pn-like i { margin: 0; }

/* Panggung karya di halaman detail.
   Sebelumnya `aspect-ratio: 16/10` dipadu `min-height: 340px` lewat style inline:
   rasio itu menurunkan LEBAR dari tinggi (340 x 1,6 = 544px), sehingga di layar
   390px kotaknya meluber 166px keluar layar. Lebar dikunci ke induk, tinggi
   mengikuti rasio. */
.pn-work-stage {
    width: 100%; max-width: 100%; aspect-ratio: 16 / 10;
    border-radius: var(--radius); overflow: hidden; margin-bottom: 20px;
}
.pn-work-stage img, .pn-work-stage .pn-thumb { width: 100%; height: 100%; object-fit: cover; }
.pn-work-stage .pn-thumb { aspect-ratio: auto; }
.pn-work-stage .pn-thumb i { font-size: 64px; }

/* ---------- Halaman isi karya ---------- */
.pn-work-detail { padding: 28px; }
.pn-work-detail-head { padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.pn-work-detail-head h2 { font-size: 26px; line-height: 1.3; margin: 12px 0 12px; }
.pn-work-desc {
    font-size: 15.5px; line-height: 1.75; color: var(--muted);
    background: var(--bg-soft); border-left: 4px solid var(--biru);
    border-radius: 0 10px 10px 0; padding: 16px 20px; margin: 0 0 22px;
}
/* penampil isi karya — tinggi mengikuti layar agar tidak perlu menggulir dua kali */
.pn-work-viewer {
    border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
    background: var(--bg-soft); margin-bottom: 22px;
}
.pn-work-viewer iframe { display: block; width: 100%; height: min(75vh, 760px); border: 0; }
.pn-work-viewer img { display: block; width: 100%; height: auto; }
/* Tombol adalah anak langsung .pn-card yang flex column — tanpa pembungkus baris
   ini setiap tombol akan melar selebar kartu. */
.pn-work-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding-top: 22px; border-top: 1px solid var(--line);
}
.pn-work-actions form { margin: 0; }

@media (max-width: 575px) {
    .pn-work-detail { padding: 20px; }
    .pn-work-detail-head h2 { font-size: 20px; }
    .pn-work-viewer iframe { height: 60vh; }
    /* di layar sempit tombol berjejer justru terpotong — dibuat menumpuk penuh */
    .pn-work-actions { flex-direction: column; align-items: stretch; }
    .pn-work-actions > * { width: 100%; }
    .pn-work-actions .btn_one, .pn-work-actions .pn-btn-sm { width: 100%; justify-content: center; text-align: center; }
}

/* ---------- School grid (About / OPAC) ---------- */
.pn-school-card { text-align: center; }
.pn-school-logo {
    width: 84px; height: 84px; flex: 0 0 84px; margin: 0 auto 16px; border-radius: 18px;
    background: linear-gradient(135deg, var(--biru), var(--biru-dark)); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-head); font-weight: 800; box-shadow: var(--shadow-sm);
    /* label panjang seperti "SMP/SMA" harus turun baris, bukan meluber keluar kotak */
    font-size: 22px; line-height: 1.05; text-align: center; padding: 6px;
    overflow-wrap: anywhere; hyphens: none;
}
.pn-level-badge {
    display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .6px;
    padding: 4px 12px; border-radius: 50px; background: var(--kuning); color: #1B2433;
    margin: 2px 0 12px; line-height: 1.4;
    /* induknya flex column — tanpa ini pil kuning melar selebar kartu */
    align-self: center; width: fit-content; max-width: 100%;
}
/* nama sekolah dikunci setinggi dua baris agar pil kategori sejajar antar kartu */
.pn-school-card h3 {
    font-size: 16.5px; margin-bottom: 10px; min-height: 2.7em;
    display: flex; align-items: center; justify-content: center;
}

/* ---------- Promo (E-Sight) ---------- */
.pn-promo {
    background: linear-gradient(120deg, var(--merah), var(--merah-dark));
    border-radius: 20px; color: #fff; padding: 48px; overflow: hidden; position: relative;
}
.pn-promo h2 { color: #fff; }
.pn-promo p { color: rgba(255,255,255,.92); }
.pn-promo .pn-eyebrow { color: var(--kuning); }

/* ---------- Quick access (hero shortcuts) ---------- */
.pn-quick { margin-top: -50px; position: relative; z-index: 5; }
.pn-quick-card {
    background: #fff; border-radius: var(--radius); padding: 26px 20px; text-align: center;
    box-shadow: var(--shadow-md); height: 100%; transition: transform .25s ease; display:block;
}
.pn-quick-card:hover { transform: translateY(-6px); }
.pn-quick-ico {
    width: 58px; height: 58px; border-radius: 14px; margin: 0 auto 14px; font-size: 24px;
    display: flex; align-items: center; justify-content: center; background: var(--biru-light); color: var(--biru);
}
.pn-quick-card h4 { font-size: 17px; margin: 0 0 4px; }
.pn-quick-card p { color: var(--muted); font-size: 13px; margin: 0; }

/* ---------- Filters ---------- */
.pn-filter {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 18px; box-shadow: var(--shadow-sm); margin-bottom: 30px;
}
.pn-filter label {
    display: block; font-family: var(--font-head); font-size: 13px; font-weight: 600;
    color: var(--ink); margin-bottom: 7px;
}
.pn-filter label .pn-sub { font-family: var(--font-body); font-weight: 400; font-size: 12px; }
.pn-filter select, .pn-filter input {
    width: 100%; color: var(--ink); font-family: var(--font-body); font-size: 14.5px;
    line-height: 1.4; background-color: #fff;
    border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
/* Panah bawaan sistem menempel ke tepi kanan dan tidak mengikuti padding kolom.
   Diganti panah sendiri yang jaraknya sama dengan padding teks (14px). */
.pn-filter select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    padding-right: 40px; cursor: pointer; text-overflow: ellipsis;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%231F4E91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
}
.pn-filter select:hover:not(:disabled) { border-color: #C3D2E8; }
.pn-filter select:focus, .pn-filter input:focus {
    outline: none; border-color: var(--biru); box-shadow: 0 0 0 3px rgba(31, 78, 145, .12);
}
/* pilihan yang belum tersedia harus terlihat memang belum bisa dipakai */
.pn-filter select:disabled {
    background-color: var(--bg-soft); color: var(--muted); cursor: not-allowed; opacity: 1;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%235A6473' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* daftar pilihan digambar sistem operasi — yang bisa kita atur hanya jarak barisnya */
.pn-filter select option { padding: 8px 12px; color: var(--ink); }

/* ---------- Baris hasil katalog (UCS) ---------- */
.pn-book-row {
    flex-direction: row; align-items: center; gap: 18px;
    padding: 18px; margin-bottom: 16px;
}
.pn-book-cover {
    width: 70px; height: 94px; flex: 0 0 70px; border-radius: 8px; aspect-ratio: auto;
}
.pn-book-cover i { font-size: 26px; }
/* min-width:0 supaya kolom judul boleh menyusut, bukan mendesak kolom lain */
.pn-book-info { flex: 1 1 auto; min-width: 0; }
.pn-book-info h3 { margin: 0 0 4px; font-size: 17px; }
.pn-book-status { flex: 0 0 auto; text-align: right; max-width: 220px; }
.pn-book-status .pn-meta { display: block; margin-top: 6px; }
.pn-tag.ok { background: #E6F7EC; color: #1A8F4C; }

@media (max-width: 767px) {
    /* di layar sempit tiga kolom saling mendesak sampai tiap kata turun baris —
       status dipindah ke baris sendiri, sampul & judul tetap berdampingan */
    .pn-book-row { flex-wrap: wrap; align-items: flex-start; gap: 14px; padding: 16px; }
    .pn-book-cover { width: 58px; height: 78px; flex: 0 0 58px; }
    .pn-book-info h3 { font-size: 16px; }
    .pn-book-status {
        flex: 1 1 100%; max-width: none; text-align: left;
        display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
        border-top: 1px solid var(--line); padding-top: 12px;
    }
    .pn-book-status .pn-tag { margin-bottom: 0; }
    .pn-book-status .pn-meta { margin-top: 0; }
}

/* ---------- Footer ---------- */
.footer { background: var(--biru-dark); color: rgba(255,255,255,.78); }
.footer .single_footer h4 { color: #fff; }
.footer .single_footer h4:after { background: var(--kuning); }
.footer .single_footer ul li a { color: rgba(255,255,255,.78); }
.footer .single_footer ul li a:hover { color: var(--kuning); padding-left: 6px; }
.footer .single_footer p { color: rgba(255,255,255,.7); }
.footer .sf_contact span { color: var(--kuning); }
.footer .sf_contact h3 { color: #fff; }
/* media sosial footer — tombol bulat, warna brand saat disorot */
.foot_social { margin-top: 24px; }
.foot_social_label {
    display: block; font-family: var(--font-head); font-size: 12px; font-weight: 600;
    letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 12px;
}
.foot_social ul {
    display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none;
}
.foot_social ul li { float: none; }
.foot_social ul li a {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%; margin-right: 0;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
    color: #fff; font-size: 17px; text-decoration: none;
    transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.foot_social ul li a:hover {
    color: #fff; transform: translateY(-4px);
    border-color: transparent; box-shadow: 0 8px 18px rgba(0,0,0,.28);
}
.foot_social .s-fb:hover { background: #1877F2; }
.foot_social .s-ig:hover { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4); }
.foot_social .s-yt:hover { background: #FF0000; }
.foot_social .s-wa:hover { background: #25D366; }
.footer_copyright p, .footer_menu ul li a { color: rgba(255,255,255,.7); }
.footer_menu ul li a:hover { color: var(--kuning); }
/* baris copyright: rapatkan jarak atas & sisa ruang kosong di bawahnya */
.footer.section-padding { padding-bottom: 26px; }
.footer .fc { margin-top: 40px; padding-top: 22px; }
.footer_copyright p, .footer_menu ul { margin-bottom: 0; }
/* template memaksa text-transform:capitalize di baris ini — "Hak cipta dilindungi"
   jadi "Hak Cipta Dilindungi". Dikembalikan ke teks apa adanya. */
.footer_copyright p { text-transform: none; text-align: left; }
/* kredit pembuat */
.footer_copyright p.pn-credit {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    font-size: 13px; color: rgba(255,255,255,.45); margin-top: 7px; text-transform: none;
}
.footer_copyright p.pn-credit a {
    color: rgba(255,255,255,.85); font-family: var(--font-head); font-weight: 600;
    letter-spacing: .2px; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease;
}
.footer_copyright p.pn-credit a:hover { color: var(--kuning); border-bottom-color: var(--kuning); }

/* ---------- WhatsApp float + Chatbot ----------
   Tumpukan pojok kanan-bawah (bawah → atas), tiap tombol berjarak ~70px:
   WhatsApp (24px) · Chat (94px) · Scroll-top #topcontrol (164px) */
.pn-wa-float {
    position: fixed; right: 24px; bottom: 24px; z-index: 1040;
    width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 28px;
    box-shadow: 0 8px 24px rgba(37,211,102,.5); transition: transform .2s ease;
}
.pn-wa-float:hover { transform: scale(1.08); color: #fff; }

.pn-chat-toggle {
    position: fixed; right: 24px; bottom: 94px; z-index: 1040;
    width: 56px; height: 56px; border-radius: 50%; background: var(--biru); color: #fff;
    border: none; display: flex; align-items: center; justify-content: center; font-size: 24px;
    box-shadow: var(--shadow-md); transition: transform .2s ease;
}
.pn-chat-toggle:hover { transform: scale(1.08); background: var(--biru-dark); }

/* Scroll-to-top (template #topcontrol) dipindah ke atas tumpukan agar tak menempel WhatsApp.
   Ukuran & jarak kanannya disamakan dengan dua tombol lain: kalau lebarnya beda
   sementara `right` sama (atau sebaliknya), titik tengahnya bergeser dan tumpukan
   terlihat miring. Lebar diberi !important karena scrolltopcontrol.js memasang
   lebar hasil pengukurannya sendiri sebagai style inline. */
#topcontrol.topcontrol {
    right: 24px !important; bottom: 164px !important;
    width: 56px !important; height: 56px; text-align: center;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; line-height: 1;
    background: #fff !important; color: var(--biru) !important;
    border: 1px solid var(--line); border-radius: 50% !important;
    box-shadow: var(--shadow-sm); z-index: 1040;
}
#topcontrol.topcontrol:hover { background: var(--biru) !important; color: #fff !important; }

.pn-chat-window {
    position: fixed; right: 24px; bottom: 94px; z-index: 1041;
    width: 340px; max-width: calc(100vw - 44px); height: 460px; max-height: calc(100vh - 130px);
    background: #fff; border-radius: 16px; box-shadow: var(--shadow-md);
    display: none; flex-direction: column; overflow: hidden; border: 1px solid var(--line);
}
.pn-chat-window.open { display: flex; }
.pn-chat-head { background: var(--biru); color: #fff; padding: 16px; display: flex; align-items: center; gap: 10px; }
.pn-chat-head .pn-chat-ava { width: 38px; height: 38px; border-radius: 50%; background: var(--kuning); color: #1B2433; display:flex; align-items:center; justify-content:center; font-weight:800; }
.pn-chat-head strong { color: #fff; font-size: 15px; display: block; }
.pn-chat-head small { color: rgba(255,255,255,.85); font-size: 12px; }
.pn-chat-head .pn-chat-close { margin-left: auto; background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; }
.pn-chat-body { flex: 1; overflow-y: auto; padding: 16px; background: var(--bg-soft); }
.pn-chat-msg { max-width: 85%; padding: 10px 14px; border-radius: 14px; margin-bottom: 10px; font-size: 14px; line-height: 1.45; }
.pn-chat-msg.bot { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.pn-chat-msg.user { background: var(--biru); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.pn-chat-faq { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.pn-chat-faq button {
    background: var(--biru-light); color: var(--biru); border: 1px solid #d6e3f7;
    border-radius: 50px; padding: 7px 12px; font-size: 12.5px; cursor: pointer; text-align: left;
}
.pn-chat-faq button:hover { background: var(--biru); color: #fff; }
.pn-chat-wa { display: block; text-align: center; background: #25D366; color: #fff; padding: 12px; font-weight: 600; }
.pn-chat-wa:hover { background: #1da851; color: #fff; }

/* ---------- Login notice (History gating) ---------- */
.pn-notice {
    background: var(--biru-light); border: 1px solid #d6e3f7; border-left: 4px solid var(--biru);
    border-radius: 10px; padding: 16px 20px; color: var(--biru-dark); display: flex; gap: 12px; align-items: flex-start;
}
.pn-notice i { color: var(--biru); font-size: 20px; margin-top: 2px; }

/* ---------- Auth card ---------- */
.pn-auth-card {
    max-width: 460px; margin: 0 auto; background: #fff; border-radius: var(--radius);
    box-shadow: var(--shadow-md); padding: 36px; border: 1px solid var(--line);
}
.pn-auth-card .form-control { border-radius: 10px; padding: 12px 16px; border: 1px solid var(--line); margin-bottom: 16px; }
.pn-auth-card label { font-weight: 600; font-size: 14px; margin-bottom: 6px; display: block; }

/* ---------- No-download guard for protected media ---------- */
.pn-protected img, .pn-cover.pn-protected { -webkit-user-select: none; user-select: none; pointer-events: none; }

/* ---------- Article detail (post) ---------- */
.pn-post-head { margin-bottom: 22px; }
.pn-post-head h1 { font-size: 34px; line-height: 1.25; margin: 12px 0 14px; }
.pn-post-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
    color: var(--muted); font-size: 14px;
}
.pn-post-meta span { display: inline-flex; align-items: center; gap: 7px; }
.pn-post-meta i { color: var(--biru); }
.pn-post-cover {
    border-radius: var(--radius); overflow: hidden; margin-bottom: 28px;
    box-shadow: var(--shadow-sm); border: 1px solid var(--line);
}
.pn-post-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }

/* isi artikel — tipografi baca panjang */
.pn-post-body { font-size: 16.5px; line-height: 1.85; color: #333B49; }
.pn-post-body p { margin-bottom: 18px; }
.pn-post-body p:last-child { margin-bottom: 0; }
.pn-post-body h2 { font-size: 24px; margin: 32px 0 12px; }
.pn-post-body h3 { font-size: 20px; margin: 28px 0 10px; }
.pn-post-body ul, .pn-post-body ol { margin: 0 0 18px 20px; }
.pn-post-body li { margin-bottom: 8px; list-style: inherit; }
.pn-post-body img { border-radius: 10px; margin: 10px 0 18px; }
.pn-post-body a { text-decoration: underline; }
.pn-post-body blockquote {
    margin: 24px 0; padding: 16px 22px; background: var(--bg-soft);
    border-left: 4px solid var(--kuning); border-radius: 0 10px 10px 0;
    font-style: italic; color: var(--ink);
}
.pn-post-lead {
    font-size: 17px; line-height: 1.75; color: var(--ink); font-weight: 500;
    padding: 16px 20px; background: var(--bg-soft); border-radius: 10px;
    border-left: 4px solid var(--biru); margin-bottom: 24px;
}

/* bagikan */
.pn-share {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line);
}
.pn-share > strong { font-family: var(--font-head); font-size: 14px; margin-right: 4px; }
.pn-share a, .pn-share button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
    background: #fff; color: var(--muted); font-size: 15px; cursor: pointer;
    transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.pn-share a:hover, .pn-share button:hover { transform: translateY(-3px); color: #fff; border-color: transparent; }
.pn-share .sh-fb:hover { background: #1877F2; }
.pn-share .sh-tw:hover { background: #111; }
.pn-share .sh-wa:hover { background: #25D366; }
.pn-share .sh-cp:hover { background: var(--biru); }

/* navigasi artikel sebelumnya / berikutnya */
.pn-postnav { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 26px; }
.pn-postnav a {
    flex: 1 1 240px; min-width: 0; display: block; padding: 16px 18px;
    border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.pn-postnav a:hover { border-color: var(--biru); box-shadow: var(--shadow-sm); }
.pn-postnav small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.pn-postnav strong {
    font-family: var(--font-head); font-size: 14.5px; color: var(--ink); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pn-postnav .nav-next { text-align: right; }

/* ---------- Sidebar widgets ---------- */
.pn-sidebar { position: sticky; top: 96px; }
.pn-widget {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); padding: 20px; margin-bottom: 24px;
}
.pn-widget-title {
    font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--ink);
    margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: 9px;
}
.pn-widget-title i { color: var(--merah); font-size: 15px; }
.pn-widget-title:after { content: none; }

/* daftar artikel di sidebar */
.pn-side-post { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.pn-side-post:first-of-type { padding-top: 0; }
.pn-side-post:last-child { border-bottom: 0; padding-bottom: 0; }
.pn-side-post .pn-thumb {
    width: 68px; height: 60px; flex: 0 0 68px; aspect-ratio: auto;
    border-radius: 10px; overflow: hidden;
}
.pn-side-post .pn-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pn-side-post .pn-thumb i { font-size: 20px; }
.pn-side-post > span:last-child { min-width: 0; }
.pn-side-post strong {
    font-family: var(--font-head); font-size: 14px; color: var(--ink); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pn-side-post:hover strong { color: var(--biru); }
.pn-side-post .pn-meta { font-size: 12.5px; margin-top: 4px; }

/* daftar kategori */
.pn-cat-list { list-style: none; margin: 0; padding: 0; }
.pn-cat-list li + li { border-top: 1px solid var(--line); }
.pn-cat-list a {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 10px 0; color: var(--muted); font-size: 14.5px;
}
.pn-cat-list a:hover, .pn-cat-list a.active { color: var(--biru); font-weight: 600; }
.pn-cat-list .count {
    background: var(--biru-light); color: var(--biru); font-size: 12px; font-weight: 600;
    padding: 2px 10px; border-radius: 50px; flex: 0 0 auto;
}
.pn-cat-list a:hover .count, .pn-cat-list a.active .count { background: var(--biru); color: #fff; }

/* widget ajakan (CTA) */
.pn-widget-cta {
    background: linear-gradient(135deg, var(--biru), var(--biru-dark)); color: #fff;
    border: 0; text-align: center;
}
.pn-widget-cta .pn-widget-title { color: #fff; border-bottom-color: rgba(255,255,255,.2); justify-content: center; }
.pn-widget-cta .pn-widget-title i { color: var(--kuning); }
.pn-widget-cta p { color: rgba(255,255,255,.82); font-size: 14px; margin-bottom: 16px; }

/* ---------- Utilities ---------- */
.pn-mt-gap > [class*="col-"] { margin-bottom: 26px; }
.pn-like { color: var(--merah); font-weight: 600; }
.pn-like i { margin-right: 4px; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .pn-hero { padding: 60px 0 64px; }
    .pn-hero h1 { font-size: 34px; }
    .pn-quick { margin-top: 24px; }
    /* Template baru mengganti ke menu mobile di ≤880px, padahal tombol CTA navbar
       sudah hilang sejak <992px. Di sela 881–991px menu desktop tetap tampil tapi
       terjepit tanpa jarak dan tanpa jalan masuk ke akun. Peralihan disamakan. */
    #main-menu { display: none !important; }
    #mobile_menu { display: block !important; }
    /* menu mobile (slicknav) bisa panjang — navbar kembali mengalir normal */
    #navigation.pn-navbar { position: static !important; }
    .header_right > .nav-cta-btn, .header_right > .dropdown { margin-left: 0; }
    .pn-topbar-hours { display: none; }
}

@media (max-width: 767px) {
    .pn-topbar { justify-content: center; gap: 0 12px; }
    .pn-topbar-info { justify-content: center; }
    .pn-topbar-item { padding: 8px 12px 8px 0; font-size: 12.5px; }
    .pn-topbar-item + .pn-topbar-item { padding-left: 12px; }
    .pn-topbar-follow { display: none; }
    .pn-topbar-social { padding-bottom: 8px; }
}

/* ---- Mobile: rapikan header, scroll-top tampil, dsb ---- */
@media (max-width: 880px) {
    /* tombol scroll-to-top: tampilkan juga di mobile (template menyembunyikannya) */
    /* posisi & ukuran ikut aturan utama — sebelumnya ditimpa di sini dengan nilai
       berbeda (right 24 pada lebar 48) sehingga di ponsel tumpukannya tidak lurus */
    #topcontrol.topcontrol { display: flex; }
}

@media (max-width: 575px) {
    /* header lebih ringkas — cegah teks logo turun banyak baris */
    #navigation.pn-navbar { padding: 0 !important; }
    .pn-logo { padding: 10px 0; gap: 10px; }
    .pn-logo-mark { width: 40px; height: 40px; flex: 0 0 40px; font-size: 17px; border-radius: 10px; }
    .pn-logo-text strong { font-size: 15px; }
    .pn-logo-text small { font-size: 10px; white-space: nowrap; }

    /* fitur cari lebih rapi: input boleh menyusut, tombol tidak terbungkus */
    .pn-hero-search { padding: 6px; }
    .pn-hero-search input { padding: 11px 14px; font-size: 14px; min-width: 0; }
    .pn-hero-search button { padding: 0 16px; white-space: nowrap; flex: 0 0 auto; font-size: 14px; }
    .pn-hero-search button i { margin-right: 4px; }
}
@media (max-width: 991px) {
    /* sidebar berhenti menempel saat kolom sudah menumpuk */
    .pn-sidebar { position: static; margin-top: 40px; }
}

@media (max-width: 575px) {
    .section-padding { padding: 56px 0; }
    .pn-post-body { font-size: 15.5px; }
    .pn-postnav .nav-next { text-align: left; }
    .pn-promo { padding: 30px; }
    .pn-page-hero { padding: 44px 0 40px; }

    /* Skala judul untuk layar sempit.
       Selector harus se-spesifik `h2.pn-heading`/`p.pn-sub` di bagian atas berkas
       (0,1,1): media query tidak menambah specificity, jadi `.pn-heading` saja
       akan kalah dan ukuran desktop tetap terpakai di ponsel. */
    h2.pn-heading, .pn-heading { font-size: 23px; line-height: 1.3; margin-bottom: 10px; }
    p.pn-sub, .pn-sub { font-size: 15px; line-height: 1.65; }
    .pn-hero h1 { font-size: 26px; }
    .pn-page-hero h1 { font-size: 24px; }
    .pn-post-head h1 { font-size: 21px; }
    .pn-eyebrow { font-size: 11px; letter-spacing: 2px; }
    .pn-card-title, .pn-card h3 { font-size: 16px; }
    .footer .single_footer h4 { font-size: 17px; }
}

@media (max-width: 380px) {
    h2.pn-heading, .pn-heading { font-size: 21px; }
    .pn-hero h1 { font-size: 24px; }
    .pn-page-hero h1 { font-size: 22px; }
}