/* ==========================================================================
   THEME 2 CSS + SCROLL ANIMATIONS
   PPID Polda Riau — Modern Elegant White & Gold
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ============================================================
   GLOBAL ENHANCEMENTS  (aktif di semua tema)
   ============================================================ */

html { scroll-behavior: smooth; }

body {
    font-family: 'Poppins', 'Roboto', sans-serif !important;
    animation: pidFadeIn 0.45s ease forwards;
}

@keyframes pidFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---- NAVBAR SLIDE DOWN ---- */
header nav.navbar {
    animation: navSlideDown 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes navSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

/* ---- CARD HOVER ---- */
.card {
    transition: transform 0.33s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.33s ease !important;
    will-change: transform;
}
.card:hover {
    transform: translateY(-7px) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,0.13) !important;
}

/* ---- SERVICE ICON HOVER ---- */
.service-icon-item-horizontal {
    transition: transform 0.28s ease, filter 0.28s ease !important;
}
.service-icon-item-horizontal:hover {
    transform: translateY(-6px) scale(1.07) !important;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.22)) !important;
}

/* ---- SOCIAL ICONS HOVER ---- */
.social-media-icons-top .nav-link {
    transition: transform 0.28s ease, color 0.28s ease !important;
    font-size: 1.5rem !important;
    color: #0C0950 !important;
}
.social-media-icons-top .nav-link:hover {
    transform: translateY(-5px) scale(1.2) !important;
    color: #75010f !important;
}

/* ---- CATEGORY CARD ---- */
.category-card {
    transition: transform 0.33s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.33s ease !important;
}

/* ---- DROPDOWN FADE ---- */
.navbar-nav .dropdown-menu {
    animation: dropFadeIn 0.22s ease both !important;
}
@keyframes dropFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- HERO CAROUSEL ZOOM ---- */
#heroCarousel .carousel-item.active img {
    animation: heroZoom 7s ease-out both;
}
@keyframes heroZoom {
    from { transform: scale(1.06); }
    to   { transform: scale(1); }
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.revealed { opacity: 1; transform: translateY(0); }

.reveal-left {
    opacity: 0;
    transform: translateX(-32px);
    transition: opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.revealed { opacity: 1; transform: translateX(0); }

.reveal-right {
    opacity: 0;
    transform: translateX(32px);
    transition: opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right.revealed { opacity: 1; transform: translateX(0); }

.reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale.revealed { opacity: 1; transform: scale(1); }

.delay-100 { transition-delay: 0.10s !important; }
.delay-200 { transition-delay: 0.20s !important; }
.delay-300 { transition-delay: 0.30s !important; }
.delay-400 { transition-delay: 0.40s !important; }
.delay-500 { transition-delay: 0.50s !important; }

/* ============================================================
   THEME TOGGLE FLOATING BUTTON
   ============================================================ */
.theme-toggle-wrap {
    position: fixed;
    right: 16px;
    bottom: 60px;
    z-index: 1046;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none; /* container does not steal clicks */
}

.theme-toggle-label {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.6);
    background: rgba(8,14,26,0.75);
    border-radius: 4px;
    padding: 2px 5px;
    text-transform: uppercase;
    user-select: none;
    pointer-events: none;
}

.theme-btn-group {
    display: flex;
    gap: 4px;
    background: rgba(8, 14, 26, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 5px;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 6px 24px rgba(0,0,0,0.38);
    pointer-events: auto; /* only buttons receive clicks */
}

.theme-btn {
    padding: 5px 14px;
    border: 1px solid transparent;
    border-radius: 25px;
    cursor: pointer;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    gap: 5px;
    outline: none !important;
    background: transparent;
    color: rgba(255,255,255,0.42);
    font-family: 'Poppins', sans-serif;
    transition: all 0.28s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.theme-btn:hover { color: rgba(255,255,255,0.85) !important; }
.theme-btn:focus { outline: none !important; box-shadow: none !important; }

.theme-btn-1.active {
    background: linear-gradient(135deg, #75010f, #a8001a);
    color: #fff !important;
    border-color: rgba(168,0,26,0.5);
    box-shadow: 0 3px 14px rgba(117,1,15,0.5);
}
.theme-btn-2.active {
    background: linear-gradient(135deg, #c9930a, #f5c842);
    color: #000 !important;
    border-color: rgba(245,200,66,0.5);
    box-shadow: 0 3px 14px rgba(201,147,10,0.45);
}

@media (max-width: 576px) {
    .theme-toggle-wrap { right: 10px; bottom: 64px; }
    .theme-btn { padding: 4px 10px; font-size: 0.62rem; }
}

/* ============================================================
   GLOBAL RESPONSIVE IMPROVEMENTS (both themes)
   ============================================================ */
@media (max-width: 767.98px) {
    .card:hover { transform: translateY(-3px) !important; }
    .hero-carousel-section .carousel-item img { max-height: 220px !important; }
    .four-column-news-section .card-img-top { height: 155px !important; }
}
@media (max-width: 575.98px) {
    .hero-carousel-section .carousel-item img { max-height: 178px !important; }
    .service-icon-item-horizontal {
        flex-basis: calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
        height: 50px !important;
    }
}

/* ==================================================================
   TEMA 2 — ELEGANT WHITE & GOLD
   Diaktifkan dengan class   body.theme-2
   ================================================================== */

/* ---- ROOT / BODY ---- */
body.theme-2 {
    background-color: #f0f4f9 !important;
    color: #1a2335 !important;
    font-family: 'Poppins', sans-serif !important;
}

/* ---- NAVBAR — tetap navy gelap ---- */
body.theme-2 .bgnavbar {
    background: linear-gradient(105deg, #050f22 0%, #0a1a3a 55%, #050f22 100%) !important;
    border-bottom: none !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.5) !important;
}
body.theme-2 .pid-text {
    color: #f5c842 !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 0 16px rgba(245,200,66,0.3) !important;
}
body.theme-2 .navbar-nav .nav-link {
    color: #c8d5ec !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.3px !important;
    transition: color 0.22s ease !important;
}
body.theme-2 .navbar-nav .nav-link:hover { color: #f5c842 !important; }

body.theme-2 .navbar-nav .dropdown-menu {
    background: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.14) !important;
    padding: 6px !important;
}
body.theme-2 .navbar-nav .dropdown-menu .dropdown-item {
    color: #1a2335 !important;
    border-radius: 8px !important;
    padding: 9px 14px !important;
    font-size: 0.83rem !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}
body.theme-2 .navbar-nav .dropdown-menu .dropdown-item:hover {
    background: rgba(201,147,10,0.1) !important;
    color: #a37208 !important;
}

body.theme-2 .navbar-toggler .fas.fa-bars { color: #f5c842 !important; }

/* Mobile only — collapse gets solid dark bg + gold separator line */
@media (max-width: 991.98px) {
    body.theme-2 .navbar-collapse {
        background: #050f22 !important;
        border-top: 1px solid rgba(201,147,10,0.3) !important;
    }
    body.theme-2 .navbar-nav .dropdown-menu {
        background: #0a1a3a !important;
        border-radius: 8px !important;
    }
    body.theme-2 .navbar-nav .dropdown-menu .dropdown-item {
        color: #c8d5ec !important;
    }
    body.theme-2 .navbar-nav .dropdown-menu .dropdown-item:hover {
        background: rgba(201,147,10,0.15) !important;
        color: #f5c842 !important;
    }
}

/* ---- HERO CAROUSEL ---- */
body.theme-2 .hero-carousel-section {
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    margin-bottom: 0;
}
body.theme-2 .hero-carousel-section .carousel-item img {
    filter: brightness(0.85) !important;
}
body.theme-2 .card-img-overlay,
body.theme-2 .carousel-caption {
    background: linear-gradient(to top,
        rgba(5,15,34,0.92) 0%,
        rgba(5,15,34,0.1) 65%,
        transparent 100%) !important;
}

/* ---- BADGE ---- */
body.theme-2 .badgecara {
    background: linear-gradient(to right, #c9930a, #f5c842) !important;
    color: #000 !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    letter-spacing: 0.5px !important;
}

/* ---- CARDS — white elevated ---- */
body.theme-2 .card {
    background: #ffffff !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 16px rgba(26,35,53,0.08) !important;
    color: #1a2335 !important;
    overflow: hidden;
}
body.theme-2 .card:hover {
    box-shadow: 0 14px 44px rgba(26,35,53,0.15) !important;
}
body.theme-2 .card-img-top {
    border-radius: 16px 16px 0 0 !important;
    transition: transform 0.5s ease !important;
    height: 185px !important;
    object-fit: cover;
}
body.theme-2 .card:hover .card-img-top {
    transform: scale(1.05) !important;
}
body.theme-2 .card-body {
    padding: 14px 16px 18px !important;
}
body.theme-2 .card-title,
body.theme-2 .card h5,
body.theme-2 .card h6 {
    color: #1a2335 !important;
    font-weight: 600 !important;
}
body.theme-2 .text-muted  { color: #6b7ea0 !important; }
body.theme-2 .text-dark   { color: #1a2335 !important; }

/* ---- NEWS LINK CARDS ---- */
body.theme-2 a.text-decoration-none { color: #1a2335 !important; }
body.theme-2 a.text-decoration-none:hover { color: #1a2335 !important; }

/* ---- SECTION HEADINGS (home/general — excludes accordion headers & page-section-title) ---- */
body.theme-2 h2:not(.accordion-header):not(.page-section-title) {
    background: none !important;
    background-color: transparent !important;
    color: #0a1a3a !important;
    font-weight: 800 !important;
    font-size: 1.25rem !important;
    padding: 0 0 10px 0 !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 3px solid #c9930a !important;
    box-shadow: none !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    display: inline-block !important;
    margin-bottom: 20px !important;
}
/* Pinned post h2 (used as title inside card row) */
body.theme-2 .col-md-4 .d-flex h2,
body.theme-2 .d-flex.mb-3.align-items-center h2 {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: none !important;
    color: #1a2335 !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    padding: 0 !important;
    margin: 0 0 3px 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    display: block !important;
}
/* ---- SIDEBAR HEADINGS ---- */
body.theme-2 .col-md-4 > h5,
body.theme-2 .video-profile-section h5 {
    color: #0a1a3a !important;
    font-weight: 700 !important;
    padding-bottom: 8px !important;
    position: relative !important;
    display: inline-block !important;
}
body.theme-2 .col-md-4 > h5::after,
body.theme-2 .video-profile-section h5::after {
    content: '' !important;
    position: absolute !important;
    left: 0; bottom: 0 !important;
    width: 36px; height: 3px !important;
    background: linear-gradient(to right, #c9930a, #f5c842) !important;
    border-radius: 2px !important;
}

/* ---- PINNED POSTS ---- */
body.theme-2 .col-md-4 .d-flex.mb-3.align-items-center {
    border-bottom: 1px solid #edf0f6 !important;
    padding: 8px !important;
    border-radius: 10px !important;
    transition: background 0.22s ease !important;
}
body.theme-2 .col-md-4 .d-flex.mb-3.align-items-center:hover {
    background: #f5f8fc !important;
}
body.theme-2 .col-md-4 .d-flex.mb-3.align-items-center img {
    border-radius: 10px !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1) !important;
}

/* ---- SEARCH BAR ---- */
body.theme-2 .search__input {
    background: #ffffff !important;
    border: 1.5px solid #d4dbe8 !important;
    color: #1a2335 !important;
    border-radius: 10px 0 0 10px !important;
    font-size: 0.9rem !important;
}
body.theme-2 .search__input::placeholder { color: #9aabc0 !important; }
body.theme-2 .search__input:focus {
    border-color: #c9930a !important;
    box-shadow: 0 0 0 3px rgba(201,147,10,0.15) !important;
    outline: none !important;
}
body.theme-2 .search__button {
    background: linear-gradient(135deg, #c9930a, #f5c842) !important;
    border-color: #c9930a !important;
    color: #000 !important;
    border-radius: 0 10px 10px 0 !important;
}

/* ---- CATEGORY CARDS ---- */
body.theme-2 .category-card {
    border-radius: 18px !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: 0 3px 18px rgba(0,0,0,0.09) !important;
}
body.theme-2 .category-card:hover {
    box-shadow: 0 12px 36px rgba(201,147,10,0.22) !important;
}
body.theme-2 .category-card .card-body {
    background: linear-gradient(135deg, #0a1a3a 0%, #152848 100%) !important;
    color: #ffffff !important;
    min-height: 110px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    border-radius: 0 0 18px 18px !important;
}
body.theme-2 .category-card .card-body .card-title {
    color: #f5c842 !important;
    font-size: 0.92rem !important;
}
body.theme-2 .category-overlay {
    background: linear-gradient(to top, rgba(5,15,34,0.9) 0%, transparent 65%) !important;
}

/* ---- VIDEO + RANDOM NEWS ---- */
body.theme-2 .video-profile-section {
    background: #ffffff !important;
    border-radius: 20px !important;
    padding: 24px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07) !important;
    margin-bottom: 24px !important;
}
body.theme-2 video {
    border-radius: 14px !important;
    box-shadow: 0 6px 24px rgba(0,0,0,0.12) !important;
}
body.theme-2 .random-news-list .d-flex {
    border-bottom: 1px solid #edf0f6 !important;
    padding: 10px 8px !important;
    border-radius: 8px !important;
    transition: background 0.2s ease !important;
}
body.theme-2 .random-news-list .d-flex:hover { background: #f5f8fc !important; }
body.theme-2 .random-news-list h6 { color: #1a2335 !important; font-size: 0.88rem !important; }
body.theme-2 .random-news-list img { border-radius: 10px !important; }
body.theme-2 .random-news-list .text-muted { color: #7a8fa6 !important; }

/* ---- FOUR-COLUMN NEWS SECTIONS ---- */
body.theme-2 .four-column-news-section {
    background: #ffffff !important;
    border-radius: 20px !important;
    padding: 24px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06) !important;
    margin-bottom: 24px !important;
}

/* ---- NEWS SECTION (main carousel + pinned) ---- */
body.theme-2 .news-section {
    background: #ffffff !important;
    border-radius: 20px !important;
    padding: 20px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06) !important;
    margin-bottom: 20px !important;
}

/* ---- CATEGORY SECTION ---- */
body.theme-2 .category-content-section {
    background: #edf2f9 !important;
    border-radius: 20px !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}
body.theme-2 .category-content-section h2 {
    color: #0a1a3a !important;
}

/* ---- STAT / CHANNEL / LINK BOXES ---- */
body.theme-2 .col-md-4 > div[style],
body.theme-2 .col-md-4 > .border.p-3 {
    background: #ffffff !important;
    border: none !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 20px rgba(26,35,53,0.07) !important;
    padding: 22px !important;
    transition: box-shadow 0.28s ease, transform 0.28s ease !important;
    display: block !important;
}
body.theme-2 .col-md-4 > div[style]:hover,
body.theme-2 .col-md-4 > .border.p-3:hover {
    box-shadow: 0 10px 32px rgba(201,147,10,0.18) !important;
    transform: translateY(-5px) !important;
}

/* Override inline background on stat box badge headers */
body.theme-2 .mb-2[style*="background-color: #75010f"],
body.theme-2 div[style*="background-color: #75010f"].mb-2 {
    background: linear-gradient(135deg, #c9930a, #f5c842) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
}
body.theme-2 .mb-2[style*="background-color: #75010f"] span,
body.theme-2 div[style*="background-color: #75010f"].mb-2 span {
    color: #000 !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.6px !important;
}

/* ---- CHANNEL & LINK LISTS ---- */
body.theme-2 ul.list-unstyled li a {
    color: #1a4a8a !important;
    font-weight: 500 !important;
    transition: color 0.22s ease, padding-left 0.22s ease !important;
    display: block !important;
    padding: 5px 0 !important;
    border-radius: 6px !important;
}
body.theme-2 ul.list-unstyled li a:hover {
    color: #c9930a !important;
    padding-left: 8px !important;
}

/* ---- SOCIAL MEDIA ICONS ---- */
body.theme-2 .social-media-icons-top .nav-link {
    color: #0a1a3a !important;
    font-size: 1.65rem !important;
    opacity: 0.72;
    transition: transform 0.28s ease, color 0.28s ease, opacity 0.28s ease !important;
}
body.theme-2 .social-media-icons-top .nav-link:hover {
    color: #c9930a !important;
    opacity: 1;
    transform: translateY(-5px) scale(1.2) !important;
}

/* ---- SERVICE ICONS WRAPPER ---- */
body.theme-2 .service-icons-group-container {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 18px 16px !important;
    box-shadow: 0 3px 18px rgba(0,0,0,0.07) !important;
    margin-bottom: 4px !important;
}
body.theme-2 .service-icon-item-horizontal:hover {
    filter: drop-shadow(0 0 10px rgba(201,147,10,0.5)) !important;
}

/* ---- HR DIVIDERS ---- */
body.theme-2 hr {
    border-color: #dde4ef !important;
    opacity: 1 !important;
}

/* ---- FOOTER ---- */
body.theme-2 footer {
    background: linear-gradient(to right, #050f22, #0a1a3a) !important;
    color: #8facc8 !important;
    border-top: 3px solid #c9930a !important;
    padding: 28px 0 !important;
}
body.theme-2 footer p {
    color: #8facc8 !important;
    font-size: 0.82rem !important;
}

/* ---- BREAKING NEWS ---- */
body.theme-2 .polri-info-ticker-wrap {
    background: #0a1a3a !important;
    border-top: 1px solid rgba(201,147,10,0.4) !important;
}
body.theme-2 .polri-info-ticker-label {
    background: linear-gradient(to right, #c9930a, #f5c842) !important;
    color: #000 !important;
    font-weight: 800 !important;
}
body.theme-2 .polri-info-ticker-content { color: #a8bbd0 !important; }

/* ---- SCROLLBAR ---- */
body.theme-2 ::-webkit-scrollbar-track { background: #edf0f6 !important; }
body.theme-2 ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #c9930a, #f5c842) !important;
}
body.theme-2 { scrollbar-color: #c9930a #edf0f6; }

/* ---- INLINE COLOR OVERRIDES ---- */
body.theme-2 *[style*="color: #0C0950"] { color: #1a4a8a !important; }
body.theme-2 *[style*="color: #75010f"] { color: #c9930a !important; }

/* ---- GENERAL LINKS ---- */
body.theme-2 a:not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.btn):not(.theme-btn) {
    color: inherit;
}
body.theme-2 a:not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.btn):not(.theme-btn):focus-visible {
    outline: 2px solid #c9930a;
    outline-offset: 2px;
}

/* ============================================================
   THEME 2 RESPONSIVE
   ============================================================ */
@media (max-width: 767.98px) {
    body.theme-2 .video-profile-section { padding: 16px !important; }
    body.theme-2 .four-column-news-section { padding: 16px !important; }
    body.theme-2 .news-section { padding: 14px !important; }
    body.theme-2 .col-md-4 > div[style],
    body.theme-2 .col-md-4 > .border.p-3 { padding: 16px !important; }
    body.theme-2 h2:not(.accordion-header):not(.page-section-title) { font-size: 1.05rem !important; }
    body.theme-2 .card-img-top,
    body.theme-2 .home-card-img { height: 145px !important; }
}
@media (max-width: 575.98px) {
    body.theme-2 .service-icons-group-container { padding: 10px !important; }
    body.theme-2 h2:not(.accordion-header):not(.page-section-title) { font-size: 0.95rem !important; }
    body.theme-2 .card-img-top,
    body.theme-2 .home-card-img { height: 118px !important; }
    body.theme-2 .card-body { padding: 10px 10px 12px !important; }
}

/* ============================================================
   INNER PAGE DESIGN SYSTEM (page-banner, page-content, t2-accordion, etc.)
   ============================================================ */

/* ---- Page Banner ---- */
.page-banner {
    background: linear-gradient(135deg, #050f22 0%, #0d1e45 55%, #162454 100%);
    padding: 100px 0 52px;
    border-bottom: 3px solid rgba(201,147,10,0.55);
    position: relative;
    overflow: hidden;
}
.page-banner::after {
    content: '';
    position: absolute;
    top: -60px; right: -80px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(201,147,10,0.08) 0%, transparent 70%);
    pointer-events: none;
}
.page-banner h1 {
    color: #fff;
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.page-banner .banner-bar {
    width: 52px; height: 3px;
    background: rgba(201,147,10,0.85);
    border-radius: 3px;
    margin: 10px auto 16px;
}
.page-banner p.lead {
    color: rgba(255,255,255,0.78);
    max-width: 680px;
    font-size: 0.98rem;
    line-height: 1.65;
}
.page-banner .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 14px 0 0;
    justify-content: center;
}
.page-banner .breadcrumb-item,
.page-banner .breadcrumb-item a {
    color: rgba(255,255,255,0.55);
    font-size: 0.82rem;
    text-decoration: none;
}
.page-banner .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255,255,255,0.3);
}
.page-banner .breadcrumb-item.active {
    color: rgba(201,147,10,0.9);
}

/* ---- Page Content Wrapper ---- */
.page-content {
    background: #f0f4f9;
    padding: 48px 0 72px;
    min-height: 50vh;
}

/* ---- Page Card ---- */
.page-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 28px rgba(5,15,34,0.08);
    padding: 36px 42px;
    margin-bottom: 28px;
}
@media (max-width: 575.98px) {
    .page-card { padding: 22px 18px; }
}

/* ---- Section Title (inside page-card) ---- */
.page-section-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0d1e45;
    margin-bottom: 1.4rem;
    padding-bottom: 0.7rem;
    border-bottom: 2px solid rgba(201,147,10,0.35);
    display: flex;
    align-items: center;
    gap: 10px;
}
.page-section-title::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 1.3em;
    background: rgba(201,147,10,0.85);
    border-radius: 3px;
    flex-shrink: 0;
}
/* ---- T2 Accordion ---- */
.t2-accordion .accordion-item {
    border: none;
    border-radius: 12px !important;
    margin-bottom: 10px;
    box-shadow: 0 2px 14px rgba(5,15,34,0.07);
    overflow: hidden;
}
.t2-accordion .accordion-button {
    background: #fff;
    color: #0d1e45;
    font-weight: 600;
    font-size: 0.94rem;
    padding: 17px 20px;
    box-shadow: none;
    border: none;
    display: flex;
    align-items: center;
    gap: 0;
}
.t2-accordion .accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, #050f22 0%, #0d1e45 100%);
    color: #fff;
}
.t2-accordion .accordion-button::after {
    margin-left: auto;
    flex-shrink: 0;
}
.t2-accordion .accordion-button:not(.collapsed)::after {
    filter: invert(1) brightness(2);
}
.t2-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}
.t2-accordion .accordion-body {
    background: #f8fafc;
    padding: 20px 24px;
    font-size: 0.91rem;
    color: #3a4a6b;
    line-height: 1.75;
}
.t2-accordion .accordion-body ul {
    padding-left: 1.2rem;
}
.t2-accordion .accordion-body li {
    margin-bottom: 5px;
}
.t2-accordion .accordion-body a {
    color: #0d1e45;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.t2-accordion .accordion-body a:hover {
    color: #c9930a;
}
/* Acc icon badge inside button */
.t2-acc-icon {
    width: 30px; height: 30px;
    background: rgba(201,147,10,0.12);
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
    color: rgba(201,147,10,0.9);
    font-size: 0.85rem;
    transition: background 0.2s;
}
.t2-accordion .accordion-button:not(.collapsed) .t2-acc-icon {
    background: rgba(255,255,255,0.15);
    color: rgba(201,147,10,1);
}

/* ---- Profile Page ---- */
.profile-photo-wrap img {
    width: 200px; height: 200px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid rgba(201,147,10,0.55);
    box-shadow: 0 8px 32px rgba(5,15,34,0.2);
}
@media (max-width: 767.98px) {
    .profile-photo-wrap img { width: 150px; height: 150px; }
}
.profile-badge {
    display: inline-block;
    background: rgba(201,147,10,0.1);
    color: #8a6205;
    border: 1px solid rgba(201,147,10,0.3);
    border-radius: 20px;
    padding: 3px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.4px;
}
.profile-name {
    font-size: 1.6rem;
    font-weight: 700;
    color: #0d1e45;
    line-height: 1.25;
}
.profile-position {
    color: #6b7a9a;
    font-size: 0.95rem;
}

/* ---- SOP / PDF Cards ---- */
.sop-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 18px rgba(5,15,34,0.07);
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.25s, transform 0.25s;
    border: 1px solid rgba(5,15,34,0.06);
}
.sop-card:hover {
    box-shadow: 0 8px 32px rgba(5,15,34,0.13);
    transform: translateY(-3px);
}
.sop-card-icon {
    width: 46px; height: 46px;
    background: linear-gradient(135deg, #0d1e45, #162454);
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
    flex-shrink: 0;
}
.sop-card-icon i { color: rgba(201,147,10,0.9); font-size: 1.2rem; }
.sop-card h5 {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0d1e45;
    margin-bottom: 7px;
    flex-grow: 1;
}
.sop-card p {
    font-size: 0.82rem;
    color: #6b7a9a;
    margin-bottom: 16px;
    flex-grow: 1;
}
.sop-dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #050f22, #0d1e45);
    color: #c9930a;
    border: none;
    border-radius: 8px;
    padding: 9px 18px;
    font-size: 0.83rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
}
.sop-dl-btn:hover { opacity: 0.85; color: #e8b020; }

/* ---- Standar Layanan Item Cards ---- */
.sl-item-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 3px 22px rgba(5,15,34,0.08);
    overflow: hidden;
    margin-bottom: 24px;
}
.sl-item-header {
    background: linear-gradient(135deg, #050f22 0%, #0d1e45 100%);
    padding: 18px 26px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.sl-item-header .sl-icon {
    width: 40px; height: 40px;
    background: rgba(201,147,10,0.15);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(201,147,10,0.9);
    font-size: 1rem;
    flex-shrink: 0;
}
.sl-item-header h4 {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}
.sl-item-body { padding: 22px 26px; font-size: 0.91rem; color: #3a4a6b; }

/* ---- Info banners (serta merta / berkala / setiap saat) ---- */
.info-page-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(201,147,10,0.1);
    color: #8a6205;
    border: 1px solid rgba(201,147,10,0.28);
    border-radius: 20px;
    padding: 5px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 8px;
}

/* ---- Struktur page image zoom ---- */
.page-img-container {
    background: #f0f4f9;
    border-radius: 12px;
    padding: 16px;
    overflow-x: auto;
    margin-bottom: 8px;
    text-align: center;
}
.page-img-container img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    cursor: zoom-in;
    transition: transform 0.3s;
}
.page-img-container img.zoomed {
    transform: scale(1.6);
    transform-origin: top left;
    cursor: zoom-out;
}

/* =====================================================
   NEWS CARDS – category & search pages (t2-news-card)
===================================================== */
.t2-news-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 3px 18px rgba(5,15,34,0.08);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.t2-news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 36px rgba(5,15,34,0.16);
}
.t2-news-card > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none !important;
}
.t2-news-card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    flex-shrink: 0;
}
.t2-news-card-body {
    padding: 20px 22px 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.t2-news-card-category {
    display: inline-block;
    background: rgba(201,147,10,0.12);
    color: rgba(158,110,0,0.95);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 3px 11px;
    border-radius: 20px;
    margin-bottom: 10px;
    align-self: flex-start;
}
.t2-news-card-title {
    color: #0d1e45;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.45;
    margin-bottom: 12px;
    flex: 1;
}
.t2-news-card:hover .t2-news-card-title {
    color: #c9930a;
}
.t2-news-card-date {
    color: #6c757d;
    font-size: 0.82rem;
    margin: 0;
}

/* =====================================================
   PAGINATION – theme 2 (wrap with .t2-pagination)
===================================================== */
.t2-pagination .pagination {
    gap: 4px;
    flex-wrap: wrap;
}
.t2-pagination .page-link {
    border-radius: 8px !important;
    border: 1px solid rgba(13,30,69,0.15);
    color: #0d1e45;
    font-weight: 600;
    padding: 7px 14px;
    transition: all 0.2s;
}
.t2-pagination .page-link:hover {
    background: #0d1e45;
    color: #fff;
    border-color: #0d1e45;
}
.t2-pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #050f22, #0d1e45);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 3px 10px rgba(5,15,34,0.3);
}
.t2-pagination .page-item.disabled .page-link {
    color: #adb5bd;
    background: #f8f9fa;
}

/* =====================================================
   SEARCH BOX – theme 2  (.t2-search-wrap)
===================================================== */
.t2-search-wrap {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 3px 18px rgba(5,15,34,0.08);
    padding: 24px 28px;
    margin-bottom: 36px;
}
.t2-search-wrap .form-control {
    border: 2px solid rgba(13,30,69,0.15);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 1rem;
    color: #0d1e45;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.t2-search-wrap .form-control:focus {
    border-color: rgba(201,147,10,0.6);
    box-shadow: 0 0 0 3px rgba(201,147,10,0.1);
}
.t2-search-wrap .btn-search {
    background: linear-gradient(135deg, #050f22, #0d1e45);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 24px;
    font-weight: 600;
    white-space: nowrap;
    transition: opacity 0.2s;
}
.t2-search-wrap .btn-search:hover {
    opacity: 0.85;
    color: #fff;
}