:root{
    --primary:#163b6d;--gold:#c6a04d;--text:#23344f;--light:#f7f9fc;
}
*{
    margin:0;padding:0;box-sizing:border-box;
}
body{
    font-family:"Inter",sans-serif;color:var(--text);background:#fff;
}
.container{
    max-width:1320px;
}
.top-header{
    background:var(--primary);height:42px;color:white;display:flex;align-items:center;
}
.top-header .container{
    display:flex;justify-content:space-between;align-items:center;height:42px;
}
.top-left, .top-right{
    display:flex;align-items:center;gap:25px;
}
.top-header a{
    color:white;text-decoration:none;font-size:14px;
}
.login-button{
    background:var(--gold);padding:8px 18px;border-radius:40px;font-weight:600;
}
#header{
    background:white;box-shadow:0 8px 25px rgba(0,0,0,.05);
}
.navbar-custom{
    display:flex;justify-content:space-between;align-items:center;height:90px;
}
.logo-area{
    display:flex;align-items:center;gap:15px;
}
.logo-area img{
    width:70px;
}
.logo-area h2{
    font-size:28px;margin:0;color:var(--primary);font-weight:800;
}
.logo-area p{
    margin:0;color:#666;
}
nav ul{
    display:flex;list-style:none;gap:35px;margin:0;
}
nav a{
    text-decoration:none;color:var(--text);font-weight:700;
}
nav a.active{
    color:var(--gold);
}
.search-box{
    width:46px;height:46px;border-radius:14px;background:#eef3fb;display:flex;justify-content:center;align-items:center;cursor:pointer;
}
/* ===========================
   MEGA MENU
=========================== */
.mega-menu-item{
    position:relative;
}
.mega-menu{
    position:absolute;left:50%;transform:translateX(-50%);top:60px;width:1180px;background:#fff;border-radius:16px;padding:35px;box-shadow:0 20px 45px rgba(0,0,0,.12);opacity:0;visibility:hidden;transition:.3s;z-index:999;
}
.mega-container{
    display:grid;grid-template-columns:1fr 1fr 1fr 320px;gap:35px;
}
.mega-column h5{
    color:#163b6d;font-size:17px;font-weight:700;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid #f0f0f0;
}
.mega-column a{
    display:block;padding:10px 0;color:#555;font-size:15px;transition:.25s;
}
.mega-column a:hover{
    color:#c6a04d;padding-left:10px;
}
.mega-menu-item:hover .mega-menu{
    opacity:1;visibility:visible;top:82px;
}
.info-card{
    background:linear-gradient(135deg,#163b6d,#234d82);border-radius:16px;color:#fff;padding:30px;height:100%;
}
.info-card h4{
    font-weight:700;margin-bottom:15px;
}
.info-card p{
    opacity:.9;margin-bottom:25px;
}
.btn-info{
    display:inline-block;background:#c6a04d;color:#fff !important;padding:12px 22px;border-radius:10px;font-weight:600;
}
.mega-menu::before{
    content:"";position:absolute;top:-25px;left:0;width:100%;height:25px;
}
/* ===========================
   HERO
=========================== */
.hero-section{
    margin-top:0;
}
.heroSwiper{
    width:100%;height:100vh;
}
.hero-image{
    width:100%;height:100vh;object-fit:cover;
}
.hero-overlay{
    position:absolute;inset:0;background:linear-gradient(
        rgba(8,25,48,.65),
        rgba(8,25,48,.65)
    );display:flex;align-items:center;
}
.hero-content{
    color:white;max-width:700px;
}
.hero-badge{
    display:inline-block;background:rgba(255,255,255,.18);padding:10px 20px;border-radius:40px;backdrop-filter:blur(10px);margin-bottom:20px;
}
.hero-content h1{
    font-size:65px;font-weight:800;line-height:1.15;margin-bottom:25px;
}
.hero-content p{
    font-size:20px;line-height:34px;opacity:.95;margin-bottom:35px;
}
.btn-gold{
    display:inline-block;background:#C6A04D;color:white;padding:16px 36px;border-radius:40px;font-weight:700;transition:.3s;
}
.btn-gold:hover{
    background:#B48D33;color:white;
}
.swiper-button-next, .swiper-button-prev{
    color:white;
}
.swiper-pagination-bullet{
    background:white;opacity:1;
}
.swiper-pagination-bullet-active{
    background:#C6A04D;
}
/* =========================================================
   HERO
========================================================= */
.hero-overlay{
    position:absolute;inset:0;background:linear-gradient(
        90deg,
        rgba(8,25,48,.78) 0%,
        rgba(8,25,48,.52) 48%,
        rgba(8,25,48,.30) 100%
    );display:flex;align-items:center;
}
.hero-badge{
    display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);padding:10px 20px;border-radius:40px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);margin-bottom:20px;
}
.btn-gold{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#d5b45c,#b88d2f);color:white;padding:16px 36px;border-radius:40px;font-weight:700;box-shadow:0 12px 28px rgba(198,160,77,.25);transition:transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
.btn-gold:hover{
    background:linear-gradient(135deg,#e0c46e,#b48d33);color:white;transform:translateY(-3px);box-shadow:0 16px 34px rgba(198,160,77,.35);
}
/* =========================================================
   QUICK MENU — PREMIUM CIRCLE / HALF OVERLAP HERO
   Tidak membuat background penuh di bawah lingkaran.
========================================================= */
.quick-menu{
    position:relative;z-index:30;margin-top:-125px;padding:0 0 55px;background:transparent;
}
.quick-grid{
    width:min(1320px, calc(100% - 40px));margin:0 auto;display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));gap:18px;align-items:center;
}
.quick-card{
    position:relative;width:250px;height:250px;margin:0 auto;padding:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;text-decoration:none;color:#163b6d;background:linear-gradient(145deg,#ffffff 0%,#f5f8fc 100%);border:1px solid rgba(255,255,255,.96);border-radius:50%;box-shadow:
        0 26px 55px rgba(12,43,78,.18),
        0 8px 22px rgba(12,43,78,.09),
        inset 0 1px 0 rgba(255,255,255,1);overflow:hidden;isolation:isolate;transition:
        transform .15s ease-out,
        box-shadow .15s ease-out,
        border-color .15s ease-out;
}
/* Cincin luar yang sangat halus */
.quick-card::before{
    content:"";position:absolute;inset:8px;border-radius:50%;border:1px solid rgba(22,59,109,.07);background:radial-gradient(
        circle at 75% 18%,
        rgba(198,160,77,.20) 0,
        rgba(198,160,77,.08) 16%,
        transparent 36%
    );pointer-events:none;z-index:0;transition:transform .15s ease-out, border-color .15s ease-out;
}
/* Aksen gold kecil di bawah */
.quick-card::after{
    content:"";position:absolute;width:52px;height:4px;left:50%;bottom:27px;transform:translateX(-50%);border-radius:999px;background:linear-gradient(90deg,#163b6d,#c6a04d);box-shadow:0 3px 10px rgba(198,160,77,.20);z-index:2;
}
.quick-card:hover{
    transform:translateY(-4px) scale(1.01);
    border-color:rgba(198,160,77,.45);
    box-shadow:
        0 30px 60px rgba(12,43,78,.20),
        0 10px 24px rgba(198,160,77,.10),
        inset 0 1px 0 rgba(255,255,255,1);
}
.quick-card:hover::before{
    transform:scale(1.02);border-color:rgba(198,160,77,.16);
}
.quick-icon{
    position:relative;z-index:3;width:58px;height:58px;display:flex;align-items:center;justify-content:center;margin-bottom:13px;border-radius:50%;background:linear-gradient(145deg,#f4f8fc,#e5eef7);border:1px solid #d7e5f1;box-shadow:
        0 8px 20px rgba(22,59,109,.09),
        inset 0 1px 0 rgba(255,255,255,.95);transition:
        transform .15s ease-out,
        background .15s ease-out,
        box-shadow .15s ease-out;
}
.quick-icon i{
    font-size:23px;color:#174b80;transition:color .15s ease-out, transform .15s ease-out;
}
.quick-card:hover .quick-icon{
    transform:translateY(-2px) scale(1.02);background:linear-gradient(145deg,#174b80,#245f94);border-color:#174b80;box-shadow:0 10px 20px rgba(22,59,109,.20);
}
.quick-card:hover .quick-icon i{
    color:#fff;transform:scale(1.02);
}
.quick-card h4{
    position:relative;z-index:3;margin:0 0 8px;color:#123d6c;font-size:17px;font-weight:750;line-height:1.25;letter-spacing:-.2px;
}
.quick-card p{
    position:relative;z-index:3;margin:0;max-width:165px;color:#718197;font-size:12px;line-height:1.55;
}
.quick-card span{
    display:none;
}
/* =========================================================
   RESPONSIVE QUICK MENU
========================================================= */
@media (max-width:1250px){
.quick-grid{
    width:calc(100% - 30px);gap:12px;
}
.quick-card{
    width:220px;height:220px;padding:24px;
}
}
@media (max-width:1100px){
.quick-menu{
    margin-top:-95px;
}
.quick-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
}
.quick-card{
    width:220px;height:220px;
}
}
@media (max-width:768px){
.heroSwiper, .hero-image{
    height:78vh;
}
.hero-content h1{
    font-size:42px;
}
.hero-content p{
    font-size:16px;line-height:27px;
}
.quick-menu{
    margin-top:-75px;padding-bottom:35px;
}
.quick-grid{
    width:calc(100% - 24px);grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
}
.quick-card{
    width:190px;height:190px;padding:18px;
}
.quick-icon{
    width:48px;height:48px;margin-bottom:9px;
}
.quick-icon i{
    font-size:20px;
}
.quick-card h4{
    font-size:15px;
}
.quick-card p{
    max-width:140px;font-size:11px;line-height:1.45;
}
.quick-card::after{
    bottom:20px;width:45px;
}
}
@media (max-width:520px){
.heroSwiper, .hero-image{
    height:72vh;
}
.quick-menu{
    margin-top:-60px;
}
.quick-grid{
    grid-template-columns:1fr;gap:14px;
}
.quick-card{
    width:210px;height:210px;
}
}
@media (max-width:380px){
.quick-card{
    width:195px;height:195px;
}
}
.highlight-section{
    padding:90px 0;background:white;
}
.highlight-small{
    background:#fff;border-radius:18px;padding:30px;box-shadow:0 15px 35px rgba(0,0,0,.06);
}
.badge-news{
    display:inline-block;padding:8px 16px;border-radius:30px;background:#163b6d;color:white;font-size:13px;margin-bottom:20px;
}
.highlight-small h3{
    font-size:24px;font-weight:700;margin-bottom:15px;
}
.highlight-small p{
    color:#777;
}
.highlight-big{
    position:relative;overflow:hidden;border-radius:22px;height:100%;min-height:500px;
}
.highlight-big img{
    width:100%;height:100%;object-fit:cover;
}
.highlight-big .overlay{
    position:absolute;left:0;right:0;bottom:0;padding:45px;background:linear-gradient(transparent,rgba(0,0,0,.75));color:white;
}
.highlight-big h2{
    font-size:40px;font-weight:800;margin:20px 0;
}
.highlight-big a{
    background:#C6A04D;padding:14px 30px;border-radius:35px;display:inline-block;color:white;
}
.information-section{
    padding:100px 0;background:white;
}
.featured-news{
    position:relative;border-radius:24px;overflow:hidden;height:540px;box-shadow:0 20px 50px rgba(0,0,0,.08);
}
.featured-news img{
    width:100%;height:100%;object-fit:cover;transition:.5s;
}
.featured-news:hover img{
    transform:scale(1.05);
}
.news-overlay{
    position:absolute;left:0;right:0;bottom:0;padding:45px;background:linear-gradient(transparent,rgba(0,0,0,.85));color:white;
}
.badge-news{
    background:#C6A04D;padding:8px 18px;border-radius:30px;font-size:13px;font-weight:700;
}
.news-overlay h2{
    margin:18px 0;font-size:38px;font-weight:800;
}
.news-overlay p{
    opacity:.9;margin-bottom:30px;
}
.btn-read{
    background:white;padding:14px 26px;border-radius:30px;color:#163b6d;font-weight:700;
}
.info-list{
    display:flex;flex-direction:column;gap:22px;height:100%;
}
.info-item{
    background:#fff;padding:28px;border-radius:18px;box-shadow:0 15px 35px rgba(0,0,0,.06);transition:.3s;
}
.info-item:hover{
    transform:translateY(-5px);
}
.tag{
    display:inline-block;padding:7px 15px;border-radius:20px;background:#163b6d;color:white;font-size:12px;margin-bottom:15px;
}
/* ==========================
   GALERI
========================== */
.gallery-section{
    padding:100px 0;background:#f7f9fc;
}
.gallery-grid{
    display:grid;grid-template-columns:2fr 1fr;gap:20px;
}
.gallery-big{
    position:relative;overflow:hidden;border-radius:22px;height:460px;
}
.gallery-big img{
    width:100%;height:100%;object-fit:cover;transition:.5s;
}
.gallery-big:hover img{
    transform:scale(1.05);
}
.gallery-caption{
    position:absolute;left:0;right:0;bottom:0;padding:35px;color:white;background:linear-gradient(transparent,rgba(0,0,0,.75));
}
.gallery-caption span{
    background:#C6A04D;padding:8px 16px;border-radius:30px;
}
.gallery-caption h3{
    margin-top:15px;font-size:24px;line-height:1.4;
}
.gallery-side{
    display:grid;grid-template-rows:repeat(2,220px);grid-template-columns:repeat(2,1fr);gap:18px;
}
.gallery-small{
    position:relative;border-radius:18px;overflow:hidden;height:220px;
}
.gallery-small img{
    width:100%;height:100%;object-fit:cover;transition:.5s;
}
.gallery-small:hover img{
    transform:scale(1.05);
}
.more-photo .overlay{
    position:absolute;inset:0;background:rgba(22,59,109,.65);display:flex;justify-content:center;align-items:center;
}
.more-photo a{
    color:white;font-size:28px;font-weight:700;
}
/* ===============================
   PREMIUM FOOTER
================================ */
.footer{
    background:#0d2d57;color:#fff;margin-top:80px;
}
.footer .container{
    max-width:1320px;
}
.footer-content{
    display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:55px;padding:55px 0;
}
.footer-logo{
    width:60px;margin-bottom:15px;
}
.brand h3{
    font-size:28px;font-weight:800;line-height:1.1;margin-bottom:5px;
}
.brand small{
    color:#C6A04D;letter-spacing:1px;
}
.brand p{
    margin-top:18px;color:#c8d5e6;line-height:1.8;
}
.footer-col h4{
    font-size:18px;margin-bottom:22px;font-weight:700;
}
.footer-col a{
    display:block;color:#d4deea;text-decoration:none;margin-bottom:13px;transition:.3s;
}
.footer-col a:hover{
    color:#C6A04D;padding-left:5px;
}
.footer-col p{
    display:flex;align-items:flex-start;gap:12px;color:#d4deea;margin-bottom:14px;line-height:1.6;
}
.footer-col p i{
    width:20px;min-width:20px;margin-top:3px;color:#C6A04D;
}
.footer-col i{
    color:#C6A04D;margin-right:10px;
}
.social{
    display:flex;gap:12px;margin-top:25px;
}
.social a{
    width:42px;height:42px;border-radius:12px;display:flex;justify-content:center;align-items:center;background:rgba(255,255,255,.08);color:white;transition:.3s;
}
.social a:hover{
    background:#C6A04D;
}
.maps-btn{
    margin-top:12px;display:flex !important;align-items:center;justify-content:center;gap:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:15px;
}
.footer-bottom{
    border-top:1px solid rgba(255,255,255,.12);
}
.footer-bottom .container{
    display:flex;justify-content:space-between;align-items:center;padding:18px 0;
}
.footer-links{
    display:flex;gap:28px;
}
.footer-links a{
    color:#d4deea;text-decoration:none;
}
.footer-links a:hover{
    color:#C6A04D;
}
/* ===========================
   DROPDOWN PROFIL
=========================== */
.nav-dropdown{
    position:relative;
}
.dropdown-menu-custom{
    position:absolute;top:70px;left:0;width:280px;background:#fff;border-radius:16px;box-shadow:0 20px 45px rgba(0,0,0,.08);padding:12px 0;opacity:0;visibility:hidden;transform:translateY(15px);transition:.35s;z-index:999;
}
.nav-dropdown:hover .dropdown-menu-custom{
    opacity:1;visibility:visible;transform:translateY(0);
}
.dropdown-menu-custom a{
    display:flex;align-items:center;gap:14px;padding:14px 22px;color:#163b6d;font-weight:500;transition:.3s;
}
.dropdown-menu-custom a i{
    width:22px;color:#C6A04D;font-size:18px;
}
.dropdown-menu-custom a:hover{
    background:#f5f8fc;color:#163b6d;padding-left:28px;
}
.dropdown-menu-custom::before{
    content:"";position:absolute;top:-12px;left:30px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:12px solid white;
}
/* ==========================
 MEGA MENU LAYANAN
=========================== */
.mega-layanan{
    position:relative;
}
.mega-layanan-menu{
    position:absolute;left:50%;transform:translateX(-50%);top:75px;width:900px;background:white;border-radius:18px;padding:35px;box-shadow:0 20px 50px rgba(0,0,0,.08);opacity:0;visibility:hidden;transition:.35s;z-index:999;
}
.mega-layanan:hover .mega-layanan-menu{
    opacity:1;visibility:visible;top:60px;
}
.layanan-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
}
.layanan-card{
    background:#fff;border:1px solid #edf1f7;border-radius:18px;padding:28px;transition:.35s;
}
.layanan-card:hover{
    transform:translateY(-6px);box-shadow:0 20px 40px rgba(0,0,0,.08);
}
.layanan-card .icon{
    width:56px;height:56px;border-radius:16px;background:#123c73;color:white;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:20px;
}
.layanan-card h4{
    font-size:22px;margin-bottom:12px;color:#123c73;font-weight:700;
}
.layanan-card p{
    color:#666;line-height:1.8;min-height:75px;
}
.layanan-card a{
    display:flex;justify-content:center;align-items:center;gap:10px;margin-top:25px;background:#123c73;color:white;border-radius:12px;padding:14px;font-weight:600;transition:.3s;
}
.layanan-card a:hover{
    background:#0b2f5a;
}
/* =========================================
   HALAMAN DINAMIS
========================================= */
.page-header{
    padding-top: 55px;padding-bottom: 30px;
}
/* =================================
   MENU WEBSITE ADMIN
================================= */
.menu-admin-item{
    display: flex;justify-content: space-between;align-items: center;padding: 16px 18px;border: 1px solid #edf0f5;border-radius: 14px;margin-bottom: 10px;background: #fff;transition: .25s ease;
}
.menu-admin-item:hover{
    border-color: #d9e0ea;box-shadow: 0 6px 20px rgba(0,0,0,.04);
}
.menu-admin-main{
    display: flex;align-items: center;gap: 14px;
}
.menu-drag{
    color: #adb5bd;cursor: grab;font-size: 20px;
}
.menu-icon{
    width: 42px;height: 42px;border-radius: 12px;background: #f1f5f9;display: flex;align-items: center;justify-content: center;color: #163b6d;font-size: 18px;
}
.menu-title-admin{
    font-weight: 600;color: #1f2937;
}
.menu-admin-actions{
    display: flex;align-items: center;gap: 8px;
}
.submenu-item{
    margin-left: 45px;background: #fafbfc;
}
.submenu-line{
    width: 20px;height: 20px;border-left: 2px solid #d9dee7;border-bottom: 2px solid #d9dee7;border-radius: 0 0 0 8px;
}
.nav-dropdown{
    position: relative;
}
.nav-dropdown-toggle{
    display: flex;align-items: center;gap: 4px;
}
.nav-dropdown-menu{
    position: absolute;top: calc(100% + 15px);left: 0;width: 270px;background: #fff;border-radius: 12px;padding: 8px;box-shadow: 0 15px 40px rgba(0,0,0,.12);border: 1px solid #e8ebef;opacity: 0;visibility: hidden;transform: translateY(8px);transition: .2s ease;z-index: 9999;
}
.nav-dropdown:hover .nav-dropdown-menu{
    opacity: 1;visibility: visible;transform: translateY(0);
}
.nav-dropdown-menu a{
    display: flex;align-items: center;gap: 13px;padding: 12px;border-radius: 9px;text-decoration: none;color: #26364d;transition: .2s ease;
}
.nav-dropdown-menu a:hover{
    background: #f3f6fa;
}
.nav-dropdown-menu a > i{
    width: 38px;height: 38px;display: flex;align-items: center;justify-content: center;border-radius: 9px;background: #edf3f9;color: #173f70;font-size: 17px;
}
.nav-dropdown-menu span{
    display: flex;flex-direction: column;font-size: 14px;font-weight: 600;
}
.nav-dropdown-menu small{
    margin-top: 3px;color: #8993a2;font-size: 11px;font-weight: 400;
}
.nav-dropdown-toggle{
    border: 0;background: transparent;display: flex;align-items: center;gap: 6px;padding: 0;color: inherit;font-family: inherit;font-size: inherit;font-weight: 700;cursor: pointer;
}
/* =====================================================
   PREMIUM FOOTER
===================================================== */
.premium-footer{
    background: #0d355c;color: #d9e6f2;margin-top: 80px;
}
/* =====================================================
   FOOTER GRID
===================================================== */
.premium-footer-grid{
    display: grid;grid-template-columns:
        1.35fr
        .75fr
        1.15fr
        1.15fr;gap: 55px;padding: 62px 0 55px;
}
/* =====================================================
   GENERAL
===================================================== */
.premium-footer h4{
    margin: 0 0 8px;color: #ffffff;font-family: Georgia, serif;font-size: 17px;font-weight: 700;
}
.footer-heading-line{
    width: 38px;height: 2px;background: #e4b63c;margin-bottom: 22px;
}
/* =====================================================
   BRAND
===================================================== */
.footer-brand-title{
    display: flex;align-items: center;gap: 14px;margin-bottom: 22px;
}
.footer-brand-title img{
    width: 52px;height: 52px;object-fit: contain;
}
.footer-brand-title h3{
    margin: 0;color: #ffffff;font-family: Georgia, serif;font-size: 20px;line-height: 1.1;text-transform: uppercase;
}
.footer-brand-title span{
    display: block;margin-top: 6px;color: #e4b63c;font-size: 9px;font-weight: 700;letter-spacing: 1.2px;
}
.footer-brand > p{
    max-width: 310px;margin: 0;color: #9eafc1;font-size: 13px;line-height: 1.8;
}
/* =====================================================
   NAVIGATION
===================================================== */
.footer-navigation a{
    display: block;width: fit-content;margin-bottom: 14px;color: #b6c4d2;font-size: 13px;text-decoration: none;transition: all .25s ease;
}
.footer-navigation a:hover{
    color: #e4b63c;transform: translateX(4px);
}
/* =====================================================
   SOCIAL MEDIA
===================================================== */
.footer-social{
    display: flex;gap: 10px;margin-bottom: 23px;
}
.footer-social a{
    width: 38px;height: 38px;display: flex;align-items: center;justify-content: center;border: 1px solid rgba(255,255,255,.25);border-radius: 50%;color: #d8e1ea;text-decoration: none;transition: all .25s ease;
}
.footer-social a:hover{
    background: #e4b63c;border-color: #e4b63c;color: #07111f;transform: translateY(-3px);
}
/* =====================================================
   CONTACT
===================================================== */
.footer-contact-row{
    display: flex;align-items: flex-start;gap: 12px;margin-bottom: 15px;font-size: 12.5px;line-height: 1.6;
}
.footer-contact-row > i{
    min-width: 18px;margin-top: 3px;color: #e4b63c;font-size: 14px;
}
.footer-contact-row span, .footer-contact-row a{
    color: #b5c3d0;text-decoration: none;transition: .2s ease;
}
.footer-contact-row a:hover{
    color: #e4b63c;
}
/* =====================================================
   MAP
===================================================== */
.footer-map{
    width: 100%;height: 165px;overflow: hidden;border-radius: 10px;border: 1px solid rgba(255,255,255,.15);background: #172537;
}
.footer-map iframe{
    width: 100%;height: 100%;border: 0;display: block;
}
/* =====================================================
   MAP BUTTON
===================================================== */
.footer-map-button{
    display: flex;align-items: center;justify-content: center;gap: 9px;margin-top: 12px;padding: 10px 13px;border: 1px solid rgba(255,255,255,.14);border-radius: 8px;color: #cbd6e0;font-size: 12px;text-decoration: none;transition: all .25s ease;
}
.footer-map-button i:first-child{
    color: #e4b63c;
}
.footer-map-button i:last-child{
    font-size: 10px;opacity: .7;
}
.footer-map-button:hover{
    background: #e4b63c;border-color: #e4b63c;color: #07111f;
}
.footer-map-button:hover i:first-child{
    color: #07111f;
}
/* =====================================================
   FOOTER BOTTOM
===================================================== */
.premium-footer-bottom{
    border-top: 1px solid rgba(255,255,255,.09);
}
.footer-bottom-content{
    min-height: 70px;display: flex;align-items: center;justify-content: space-between;gap: 25px;
}
.footer-bottom-content p{
    margin: 0;color: #718397;font-size: 12px;
}
.footer-bottom-content strong{
    color: #9aabba;font-weight: 600;
}
/* =====================================================
   FOOTER LINKS
===================================================== */
.footer-bottom-links{
    display: flex;gap: 25px;
}
.footer-bottom-links a{
    color: #718397;font-size: 12px;text-decoration: none;transition: .2s ease;
}
.footer-bottom-links a:hover{
    color: #e4b63c;
}
/* =====================================================
   BACK TO TOP
===================================================== */
.back-to-top{
    position: fixed;right: 24px;bottom: 24px;z-index: 1000;height: 54px;display: flex;align-items: center;gap: 13px;padding: 5px 7px 5px 19px;border: 1px solid rgba(255,255,255,.2);border-radius: 30px;background: #07111f;color: #ffffff;cursor: pointer;box-shadow: 0 8px 25px rgba(0,0,0,.18);transition: all .3s ease;
}
.back-to-top span{
    font-size: 10px;font-weight: 700;letter-spacing: .4px;
}
.back-to-top i{
    width: 42px;height: 42px;display: flex;align-items: center;justify-content: center;border-radius: 50%;background: #e4b63c;color: #07111f;font-size: 17px;
}
.back-to-top:hover{
    transform: translateY(-4px);box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 1000px){
.premium-footer-grid{
    grid-template-columns: 1fr 1fr;gap: 40px;padding: 50px 25px;
}
}
@media (max-width: 650px){
.premium-footer-grid{
    grid-template-columns: 1fr;gap: 35px;padding: 45px 20px;
}
.footer-bottom-content{
    flex-direction: column;justify-content: center;text-align: center;padding: 20px;
}
.footer-bottom-links{
    flex-wrap: wrap;justify-content: center;gap: 12px 18px;
}
.back-to-top{
    right: 15px;bottom: 15px;
}
.back-to-top span{
    display: none;
}
.back-to-top{
    padding: 5px;
}
}
/* =========================================================
   INFORMASI PUBLIK - PREMIUM
========================================================= */
.public-information-section{
    position: relative;padding: 90px 0 95px;background:
        linear-gradient(
            180deg,
            #f5f8fc 0%,
            #f8fafc 100%
        );
}
/* =========================================================
   HEADER
========================================================= */
.public-info-header{
    display: flex;align-items: flex-end;justify-content: space-between;gap: 40px;margin-bottom: 38px;
}
.public-info-heading{
    max-width: 700px;
}
.public-info-line{
    width: 46px;height: 3px;margin-bottom: 14px;background: #e3b52f;border-radius: 3px;
}
.public-info-label{
    display: block;margin-bottom: 8px;color: #7890a8;font-size: 11px;font-weight: 700;letter-spacing: 1.6px;
}
.public-info-heading h2{
    margin: 0 0 12px;color: #123b63;font-family: Georgia, "Times New Roman", serif;font-size: clamp(34px, 4vw, 48px);line-height: 1.1;font-weight: 700;
}
.public-info-heading p{
    max-width: 620px;margin: 0;color: #6f8499;font-size: 14px;line-height: 1.8;
}
/* =========================================================
   BUTTON
========================================================= */
.public-info-button{
    display: inline-flex;align-items: center;gap: 16px;padding: 14px 20px;border: 1px solid #d9e4ef;border-radius: 12px;background: #ffffff;color: #123b63;font-size: 13px;font-weight: 700;text-decoration: none;white-space: nowrap;box-shadow:
        0 8px 25px rgba(18,59,99,.06);transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}
.public-info-button i{
    color: #dcae26;font-size: 16px;transition: transform .25s ease;
}
.public-info-button:hover{
    color: #ffffff;background: #123b63;border-color: #123b63;transform: translateY(-3px);box-shadow:
        0 12px 30px rgba(18,59,99,.18);
}
.public-info-button:hover i{
    color: #e3b52f;transform: translateX(4px);
}
/* =========================================================
   GRID
========================================================= */
.public-info-grid{
    display: grid;grid-template-columns:
        1fr
        1fr
        .95fr;gap: 18px;align-items: stretch;
}
/* =========================================================
   CARD
========================================================= */
.public-info-card{
    position: relative;overflow: hidden;min-height: 470px;padding: 25px;border: 1px solid #e1e9f1;border-radius: 18px;background: rgba(255,255,255,.96);box-shadow:
        0 10px 35px rgba(18,59,99,.055);transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}
.public-info-card::before{
    content: "";position: absolute;top: 0;left: 0;width: 100%;height: 3px;background:
        linear-gradient(
            90deg,
            #123b63,
            #e3b52f
        );opacity: .8;
}
.public-info-card:hover{
    transform: translateY(-5px);border-color: #d3dfeb;box-shadow:
        0 18px 45px rgba(18,59,99,.11);
}
/* =========================================================
   CARD HEADER
========================================================= */
.public-card-header{
    display: flex;align-items: center;gap: 14px;padding-bottom: 20px;margin-bottom: 5px;border-bottom: 1px solid #e8eef4;
}
.public-card-icon{
    width: 48px;height: 48px;flex: 0 0 48px;display: flex;align-items: center;justify-content: center;border-radius: 13px;font-size: 20px;
}
.program-icon{
    color: #185487;background: #edf5fd;border: 1px solid #d9eafb;
}
.finance-icon{
    color: #185487;background: #edf7f4;border: 1px solid #d8eee8;
}
.other-icon{
    color: #185487;background: #f1f5fb;border: 1px solid #dfe8f3;
}
.public-card-header h3{
    margin: 0 0 3px;color: #123b63;font-size: 17px;font-weight: 700;
}
.public-card-header span{
    color: #9aaabd;font-size: 11px;
}
/* =========================================================
   LIST
========================================================= */
.public-card-list{
    display: flex;flex-direction: column;
}
.public-card-list a{
    display: flex;align-items: center;justify-content: space-between;gap: 10px;min-height: 41px;padding: 7px 3px;border-bottom: 1px solid #f0f3f6;color: #31516f;font-size: 12.5px;text-decoration: none;transition:
        padding .2s ease,
        color .2s ease,
        background .2s ease;
}
.public-card-list a:last-child{
    border-bottom: 0;
}
.public-card-list a span{
    display: flex;align-items: center;gap: 12px;
}
.public-card-list a span i{
    width: 18px;color: #6d8aa5;font-size: 13px;transition: color .2s ease;
}
.public-card-list a > i{
    color: #a5b5c5;font-size: 10px;transition:
        transform .2s ease,
        color .2s ease;
}
.public-card-list a:hover{
    padding-left: 8px;color: #123b63;
}
.public-card-list a:hover span i{
    color: #dcae26;
}
.public-card-list a:hover > i{
    color: #dcae26;transform: translateX(3px);
}
/* =========================================================
   MENU LAINNYA
========================================================= */
.other-card{
    min-height: 470px;
}
.other-menu-grid{
    display: grid;grid-template-columns: 1fr 1fr;gap: 8px;padding-top: 10px;
}
.other-menu-grid a{
    display: flex;align-items: flex-start;gap: 10px;min-height: 55px;padding: 12px 9px;border-radius: 10px;color: #31516f;font-size: 12px;line-height: 1.45;text-decoration: none;transition:
        background .25s ease,
        transform .25s ease,
        color .25s ease;
}
.other-menu-grid a i{
    flex: 0 0 17px;margin-top: 1px;color: #6c89a4;font-size: 14px;transition: color .25s ease;
}
.other-menu-grid a:hover{
    background: #f2f6fa;color: #123b63;transform: translateX(3px);
}
.other-menu-grid a:hover i{
    color: #dcae26;
}
/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1050px){
.public-info-grid{
    grid-template-columns: 1fr 1fr;
}
.other-card{
    grid-column: 1 / -1;min-height: auto;
}
.other-menu-grid{
    grid-template-columns:
            repeat(3, 1fr);
}
}
@media (max-width: 768px){
.public-information-section{
    padding: 60px 0;
}
.public-info-header{
    align-items: flex-start;flex-direction: column;gap: 22px;
}
.public-info-grid{
    grid-template-columns: 1fr;
}
.other-card{
    grid-column: auto;
}
.other-menu-grid{
    grid-template-columns: 1fr 1fr;
}
.public-info-card{
    min-height: auto;
}
}
@media (max-width: 480px){
.other-menu-grid{
    grid-template-columns: 1fr;
}
.public-info-button{
    width: 100%;justify-content: space-between;
}
}

/* =========================================================
   AREA DI BAWAH HERO + QUICK MENU
   WARNA MENYATU DENGAN BACKGROUND HALAMAN
========================================================= */
.quick-menu{
    position: relative;z-index: 10;margin-top: -105px;background: #f5f8fc;padding-top: 0;padding-bottom: 95px;
}
/* =========================================================
   HILANGKAN AREA PUTIH DI BELAKANG LINGKARAN
========================================================= */
.quick-menu::before{
    content: "";position: absolute;top: -105px;left: 0;width: 100%;height: 105px;background:
        linear-gradient(
            to bottom,
            rgba(245,248,252,0),
            #f5f8fc
        );z-index: -1;pointer-events: none;
}
/* =========================================================
   BACKGROUND SETELAH QUICK MENU
========================================================= */
.quick-menu::after{
    content: "";position: absolute;left: 0;bottom: 0;width: 100%;height: 100px;background:
        linear-gradient(
            to bottom,
            #f5f8fc,
            #f5f8fc
        );z-index: -1;pointer-events: none;
}
/* =========================================================
   FIX QUICK MENU
   LINGKARAN 50% MASUK KE HERO
========================================================= */
/* Quick menu tetap menjadi area bawah hero */
.quick-menu{
    position: relative;z-index: 20;margin-top: 0 !important;padding-top: 0;padding-bottom: 105px;background: #f5f8fc;
}
/* =========================================================
   GRID DIANGKAT SETENGAH LINGKARAN
========================================================= */
.quick-grid{
    position: relative;z-index: 30;transform: translateY(-110px);margin-bottom: -110px;
}
/* =========================================================
   LINGKARAN
   Diameter ±220px
   Naik 110px = tepat setengah masuk hero
========================================================= */
.quick-card{
    position: relative;z-index: 31;width: 220px;height: 220px;border-radius: 50%;background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.99),
            rgba(246,249,252,.97)
        );border: 1px solid rgba(255,255,255,.95);box-shadow:
        0 22px 45px rgba(18,55,91,.16),
        0 6px 18px rgba(18,55,91,.08),
        inset 0 1px 0 rgba(255,255,255,1);overflow: hidden;transition:
        transform .15s ease-out,
        box-shadow .15s ease-out;
}
/* =========================================================
   HOVER
========================================================= */
.quick-card:hover{
    transform:translateY(-114px) scale(1.01);
    box-shadow:
        0 26px 52px rgba(18,55,91,.18),
        0 8px 20px rgba(198,160,77,.10),
        inset 0 1px 0 rgba(255,255,255,1);
}
/* =========================================================
   INNER RING
========================================================= */
.quick-card::before{
    content: "";position: absolute;inset: 8px;border-radius: 50%;border: 1px solid rgba(22,59,109,.08);pointer-events: none;
}
/* =========================================================
   GOLD MORPH
========================================================= */
.quick-card::after{
    content: "";position: absolute;width: 100px;height: 100px;top: -20px;right: -20px;border-radius: 50%;background:
        radial-gradient(
            circle,
            rgba(198,160,77,.18),
            rgba(198,160,77,0)
        );pointer-events: none;
}
/* =========================================================
   HERO
========================================================= */
.hero{
    position: relative;z-index: 1;overflow: visible;
}
/* =========================================================
   GRADIENT BAWAH HERO
   jangan sampai menutupi lingkaran
========================================================= */
.hero::before{
    content: "";position: absolute;left: 0;bottom: -65px;width: 100%;height: 100px;background:
        linear-gradient(
            to bottom,
            rgba(245,248,252,0),
            rgba(245,248,252,.55),
            #f5f8fc
        );z-index: 2;pointer-events: none;
}
/* =========================================================
   MATIKAN CURVE LAMA
========================================================= */
.hero::after{
    display: none !important;
}
/* =========================================================
   INFORMASI PUBLIK
========================================================= */
.informasi-publik{
    position: relative;z-index: 1;background: #f5f8fc;
}
/* =========================================================
   DESKTOP BESAR
========================================================= */
@media (min-width: 1400px){
.quick-grid{
    transform: translateY(-115px);margin-bottom: -115px;
}
.quick-card{
    width: 230px;height: 230px;
}
.quick-card:hover{
    transform:translateY(-119px) scale(1.01);
}
}
/* =========================================================
   LAPTOP
========================================================= */
@media (max-width: 1250px){
.quick-grid{
    transform: translateY(-100px);margin-bottom: -100px;
}
.quick-card{
    width: 205px;height: 205px;
}
.quick-card:hover{
    transform:translateY(-104px) scale(1.01);
}
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 1050px){
.quick-grid{
    transform: translateY(-90px);margin-bottom: -90px;grid-template-columns:
            repeat(3, 1fr);
}
.quick-card{
    width: 205px;height: 205px;
}

.quick-card:hover{
    transform:translateY(-94px) scale(1.01);
}
}
/* =========================================================
   TABLET KECIL
========================================================= */
@media (max-width: 768px){
.quick-grid{
    transform: translateY(-75px);margin-bottom: -75px;grid-template-columns:
            repeat(2, 1fr);
}
.quick-card{
    width: 190px;height: 190px;
}
.quick-card:hover{
    transform:translateY(-79px) scale(1.01);
}
}
/* =========================================================
   HP
========================================================= */
@media (max-width: 520px){
.quick-grid{
    transform: translateY(-60px);margin-bottom: -60px;grid-template-columns: 1fr;
}
.quick-card{
    width: 205px;height: 205px;
}
.quick-card:hover{
    transform:translateY(-64px) scale(1.01);
}
}
/* =========================================================
   QUICK MENU → INFORMASI PUBLIK
   MEMPERKECIL JARAK ANTARA KEDUANYA
========================================================= */
/* Quick menu tetap berada di atas */
.quick-menu{
    position: relative;z-index: 20;margin-bottom: -120px !important;
}
/* =========================================================
   SECTION INFORMASI PUBLIK
========================================================= */
#informasi-publik, .informasi-publik, .public-info-section{
    position: relative;z-index: 5;margin-top: 0 !important;padding-top: 120px !important;
}
/* =========================================================
   HEADER INFORMASI PUBLIK
========================================================= */
#informasi-publik .section-header, .informasi-publik .section-header, .public-info-section .section-header{
    margin-top: 0 !important;padding-top: 0 !important;
}
/* =========================================================
   CONTAINER
========================================================= */
#informasi-publik .container, .informasi-publik .container, .public-info-section .container{
    margin-top: 0 !important;
}
/* =========================================================
   JUDUL
========================================================= */
#informasi-publik h2, .informasi-publik h2, .public-info-section h2{
    margin-top: 0 !important;
}
/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1050px){
.quick-menu{
    margin-bottom: -90px !important;
}
#informasi-publik, .informasi-publik, .public-info-section{
    padding-top: 90px !important;
}
}
@media (max-width: 768px){
.quick-menu{
    margin-bottom: -70px !important;
}
#informasi-publik, .informasi-publik, .public-info-section{
    padding-top: 70px !important;
}
}
@media (max-width: 520px){
.quick-menu{
    margin-bottom: -50px !important;
}
#informasi-publik, .informasi-publik, .public-info-section{
    padding-top: 50px !important;
}
}
/* =========================================================
   PROFIL & INFORMASI - MANUAL
   Lapas Perempuan Kelas IIA Tenggarong
========================================================= */
/* =========================================================
   SECTION UTAMA
========================================================= */
.profil-section{
    width: 100%;max-width: 1200px;margin: 0 auto;padding: 90px 20px 100px;box-sizing: border-box;
}
/* =========================================================
   HEADING
========================================================= */
.profil-heading{
    width: 100%;max-width: 850px;margin: 0 auto 45px;text-align: center;
}
.profil-heading > span{
    display: block;margin-bottom: 10px;color: #c7951b;font-size: 12px;font-weight: 700;letter-spacing: 2px;text-transform: uppercase;
}
.profil-heading h2{
    margin: 0;color: #164a73;font-family: Georgia, "Times New Roman", serif;font-size: 42px;font-weight: 700;line-height: 1.25;
}
.heading-line{
    width: 55px;height: 4px;margin: 15px auto 18px;background: #d8a51e;border-radius: 10px;
}
.profil-heading p{
    max-width: 750px;margin: 0 auto;color: #71859a;font-size: 15px;line-height: 1.8;
}
/* =========================================================
   CARD PROFIL
========================================================= */
.profil-card{
    width: 100%;background: #ffffff;border-radius: 22px;overflow: hidden;box-shadow:
        0 15px 45px rgba(22, 66, 100, 0.10);border: 1px solid #edf1f5;
}
/* =========================================================
   TAB
========================================================= */
.profile-tabs{
    width: 100%;display: grid;grid-template-columns: repeat(4, 1fr);background: #ffffff;border-bottom: 1px solid #e8edf2;
}
.profile-tab{
    position: relative;
    width: 100%;
    min-height: 70px;
    padding: 15px 10px;
    border: none;
    outline: none;
    background: #ffffff;
    color: #8092a5;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: none !important;
    transform: none !important;
    box-shadow: none;
}
.profile-tab i{
    font-size: 15px;
}
/* Tidak ada efek morph/gerak saat hover */
.profile-tab:hover{
    background: #f5f9fc;
    color: #175e8d;
    transform: none !important;
    box-shadow: none !important;
}
/* Saat diklik/aktif: hanya warna yang berubah */
.profile-tab.active{
    background: #17618f !important;
    color: #ffffff !important;
    transform: none !important;
    box-shadow: none !important;
}
.profile-tab.active::after{
    display: none !important;
}
/* =========================================================
   PANEL
========================================================= */
.profil-panel{
    display: none;width: 100%;padding: 38px;box-sizing: border-box;
}
.profil-panel.active{
    display: block;
}
/* =========================================================
   LABEL PANEL
========================================================= */
.profil-panel .page-label{
    display: block;margin-bottom: 6px;color: #c7951b;font-size: 11px;font-weight: 700;letter-spacing: 2px;text-transform: uppercase;
}
/* =========================================================
   JUDUL PANEL
========================================================= */
.profil-panel > h2{
    margin: 0 0 25px;color: #164a73;font-family: Georgia, "Times New Roman", serif;font-size: 31px;font-weight: 700;line-height: 1.3;
}
/* =========================================================
   SEJARAH
========================================================= */
.sejarah-layout{
    width: 100%;display: grid;grid-template-columns: 270px minmax(0, 1fr);gap: 30px;align-items: start;
}
/* FOTO SEJARAH */
.sejarah-foto{
    width: 270px;border-radius: 16px;overflow: hidden;background: #eef3f7;box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.10);
}
.sejarah-foto img{
    display: block;width: 270px;height: 210px;object-fit: cover;border-radius: 16px;
}
/* TEKS SEJARAH */
.sejarah-teks{
    min-width: 0;color: #566c81;font-size: 15px;line-height: 1.85;
}
.sejarah-teks p{
    margin: 0 0 16px;
}
.sejarah-teks p:last-child{
    margin-bottom: 0;
}
/* =========================================================
   VISI & MISI
========================================================= */
.visi-misi-grid{
    width: 100%;display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 25px;
}
.visi-card, .misi-card{
    padding: 28px;background: #f8fafc;border: 1px solid #e5ebf0;border-radius: 16px;box-sizing: border-box;
}
.visi-card:hover, .misi-card:hover{
    transform: none !important;
    box-shadow: none !important;
}
.visi-card > i, .misi-card > i{
    display: flex;width: 48px;height: 48px;margin-bottom: 18px;align-items: center;justify-content: center;border-radius: 50%;background: #e9f2f8;color: #17618f;font-size: 20px;
}
.visi-card h3, .misi-card h3{
    margin: 0 0 10px;color: #174d76;font-size: 20px;
}
.visi-card p, .misi-card p{
    margin: 0;color: #607589;font-size: 14px;line-height: 1.8;
}
/* =========================================================
   TUGAS & FUNGSI
========================================================= */
.tugas-box{
    display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 25px;
}
.tugas-item{
    display: flex;align-items: flex-start;gap: 18px;padding: 25px;background: #f8fafc;border: 1px solid #e5ebf0;border-radius: 16px;box-sizing: border-box;
}
.tugas-item > i{
    flex-shrink: 0;display: flex;width: 48px;height: 48px;align-items: center;justify-content: center;border-radius: 50%;background: #e9f2f8;color: #17618f;font-size: 19px;
}
.tugas-item h3{
    margin: 0 0 8px;color: #174d76;font-size: 20px;
}
.tugas-item p{
    margin: 0;color: #607589;font-size: 14px;line-height: 1.8;
}
/* =========================================================
   STRUKTUR ORGANISASI
========================================================= */
.struktur-foto{
    width: 100%;padding: 10px;background: #f8fafc;border: 1px solid #e3eaf0;border-radius: 16px;box-sizing: border-box;text-align: center;
}
.struktur-foto img{
    display: block;width: 100%;max-width: 850px;height: auto;margin: 0 auto;border-radius: 10px;
}
/* =========================================================
   RESPONSIVE TABLET
========================================================= */
@media (max-width: 900px){
.profil-section{
    padding: 70px 18px 80px;
}
.profil-heading h2{
    font-size: 36px;
}
.profil-panel{
    padding: 30px;
}
.sejarah-layout{
    grid-template-columns: 230px minmax(0, 1fr);gap: 25px;
}
.sejarah-foto{
    width: 230px;
}
.sejarah-foto img{
    width: 230px;height: 180px;
}
}
/* =========================================================
   RESPONSIVE HP
========================================================= */
@media (max-width: 650px){
.profil-section{
    padding: 55px 12px 70px;
}
/* HEADING */
.profil-heading{
    margin-bottom: 30px;
}
.profil-heading h2{
    font-size: 30px;
}
.profil-heading p{
    font-size: 14px;
}
/* TAB */
.profile-tabs{
    grid-template-columns: repeat(2, 1fr);
}
.profile-tab{
    min-height: 60px;padding: 12px 8px;font-size: 12px;
}
/* PANEL */
.profil-panel{
    padding: 25px 20px;
}
.profil-panel > h2{
    font-size: 27px;
}
/* SEJARAH */
.sejarah-layout{
    display: flex;flex-direction: column;gap: 22px;
}
.sejarah-foto{
    width: 100%;max-width: 320px;margin: 0 auto;
}
.sejarah-foto img{
    width: 100%;height: 210px;
}
.sejarah-teks{
    font-size: 14px;line-height: 1.8;
}
/* VISI MISI */
.visi-misi-grid{
    grid-template-columns: 1fr;
}
/* TUGAS */
.tugas-box{
    grid-template-columns: 1fr;
}
}
/* =========================================================
   HP KECIL
========================================================= */
@media (max-width: 400px){
.profil-section{
    padding-left: 8px;padding-right: 8px;
}
.profil-heading h2{
    font-size: 27px;
}
.profile-tab{
    font-size: 11px;
}
.profile-tab i{
    font-size: 13px;
}
.profil-panel{
    padding: 22px 16px;
}
}
/* ========================================
   LIST MISI & FUNGSI
======================================== */
.misi-list, .fungsi-list{
    margin: 18px 0 0;padding-left: 28px;
}
.misi-list li, .fungsi-list li{
    margin-bottom: 14px;padding-left: 6px;font-size: 14px;line-height: 1.75;color: #60748d;
}
.misi-list li::marker, .fungsi-list li::marker{
    font-weight: 700;color: #175b87;
}
.misi-list li:last-child, .fungsi-list li:last-child{
    margin-bottom: 0;
}
/* ================================
   BACKGROUND SECTION PROFIL
================================ */
.profil-section{
    background: #f4f8fc;width: 100%;padding: 80px 0;margin: 0;
}
/* Area isi profil */
.profil-card{
    background: #ffffff;max-width: 1000px;margin: 40px auto 0;border-radius: 20px;overflow: hidden;box-shadow: 0 10px 35px rgba(20, 60, 90, 0.08);
}
/* =========================================
   FIX BACKGROUND PROFIL
   ========================================= */
.profil-section{
    position: relative !important;width: 100% !important;max-width: none !important;background: #f4f8fc !important;background-color: #f4f8fc !important;overflow: hidden !important;box-sizing: border-box !important;
}
/* Semua wrapper di dalam section transparan */
.profil-section > div, .profil-section .profil-heading, .profil-section .profil-content, .profil-section .profile-content, .profil-section .profile-tab-content{
    background: transparent !important;background-color: transparent !important;
}
/* HANYA kartu profil yang putih */
.profil-section .profil-card{
    background: #ffffff !important;background-color: #ffffff !important;
}
/* Hilangkan kemungkinan pseudo-element putih */
.profil-section::before, .profil-section::after{
    background: transparent !important;
}
/* Pastikan tidak ada elemen yang melebar keluar */
.profil-section *{
    box-sizing: border-box;
}
/* Kumpulan foto layanan */
.layanan-images{
    width: 100%;max-width: 850px;margin: 30px auto;
}
/* Setiap foto */
.layanan-images .layanan-image{
    width: 100%;height: auto;display: block;object-fit: contain;border: 2px solid #e5e7eb;border-radius: 14px;margin-bottom: 25px;box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);box-sizing: border-box;
}
/* Foto terakhir */
.layanan-images .layanan-image:last-child{
    margin-bottom: 0;
}
.content-area img{
    width: 100%;max-width: 100%;height: auto;object-fit: contain;display: block;
}
/* =========================================================
   PRODUK HUKUM
========================================================= */
.produk-container{
    width: min(1135px, calc(100% - 40px));margin: auto;
}
/* =========================================================
   HERO
========================================================= */
.produk-hukum-hero{
    background:
        linear-gradient(
            110deg,
            #0b2f59 0%,
            #164578 55%,
            #285b8d 100%
        );padding: 55px 0 65px;color: white;
}
.produk-breadcrumb{
    display: flex;gap: 12px;align-items: center;font-size: 14px;margin-bottom: 28px;color: rgba(255,255,255,.75);
}
.produk-breadcrumb a{
    color: white;text-decoration: none;
}
.produk-hukum-hero h1{
    margin: 0 0 12px;font-family: Georgia, serif;font-size: 42px;font-weight: 700;
}
.produk-hukum-hero p{
    max-width: 650px;margin: 0;font-size: 16px;line-height: 1.7;color: rgba(255,255,255,.88);
}
/* =========================================================
   SECTION
========================================================= */
.produk-hukum-section{
    background: #f5f7fa;padding: 38px 0 70px;
}
.produk-card{
    background: white;border-radius: 18px;padding: 24px;box-shadow:
        0 8px 30px rgba(15, 45, 75, .06);
}
/* =========================================================
   FILTER
========================================================= */
.produk-filter{
    display: flex;justify-content: space-between;gap: 20px;align-items: center;margin-bottom: 30px;
}
.kategori-list{
    display: flex;gap: 8px;flex-wrap: wrap;
}
.kategori-btn{
    display: inline-flex;align-items: center;justify-content: center;padding: 10px 17px;border: 1px solid #dbe3ed;border-radius: 30px;background: white;color: #173b64;font-size: 13px;font-weight: 600;text-decoration: none;transition: .2s;
}
.kategori-btn:hover{
    border-color: #174b82;color: #174b82;
}
.kategori-btn.active{
    background: #164b83;border-color: #164b83;color: white;
}
/* SEARCH */
.produk-search{
    position: relative;width: 300px;flex-shrink: 0;
}
.produk-search i{
    position: absolute;left: 16px;top: 50%;transform: translateY(-50%);color: #50627a;
}
.produk-search input{
    width: 100%;height: 44px;border: 1px solid #dbe3ed;border-radius: 12px;padding: 0 15px 0 43px;outline: none;font-size: 13px;
}
.produk-search input:focus{
    border-color: #174b82;box-shadow: 0 0 0 3px rgba(23,75,130,.08);
}
/* =========================================================
   HEADER
========================================================= */
.produk-list-header{
    display: flex;justify-content: space-between;align-items: center;margin-bottom: 14px;font-size: 13px;color: #708097;
}
.produk-sort{
    display: flex;align-items: center;gap: 7px;
}
/* =========================================================
   TABLE
========================================================= */
.produk-table-head{
    display: grid;grid-template-columns:
        55px
        minmax(300px, 1fr)
        190px
        80px
        150px;padding: 12px 14px;background: #f7f9fc;border-radius: 10px;color: #8190a4;font-size: 11px;font-weight: 700;
}
.produk-row{
    display: grid;grid-template-columns:
        55px
        minmax(300px, 1fr)
        190px
        80px
        150px;align-items: center;padding: 18px 14px;border-bottom: 1px solid #edf1f5;
}
.produk-row:last-child{
    border-bottom: none;
}
.col-no{
    color: #8a98aa;font-size: 13px;
}
.col-judul{
    display: flex;gap: 13px;align-items: center;min-width: 0;
}
.dokumen-icon{
    width: 36px;height: 36px;flex-shrink: 0;border-radius: 9px;background: #fff1f1;color: #c65b5b;display: flex;align-items: center;justify-content: center;
}
.col-judul h3{
    margin: 0 0 4px;font-size: 14px;line-height: 1.45;color: #142f50;font-weight: 700;
}
.dokumen-meta{
    font-size: 11px;color: #8996a8;
}
.dokumen-meta span{
    margin: 0 5px;
}
.kategori-badge{
    display: inline-flex;padding: 6px 11px;border-radius: 20px;background: #edf5fd;color: #22588d;font-size: 11px;font-weight: 600;
}
.col-tahun{
    color: #4d6078;font-size: 13px;font-weight: 600;
}
/* =========================================================
   ACTION
========================================================= */
.col-aksi{
    display: flex;align-items: center;justify-content: flex-end;gap: 7px;
}
.btn-preview{
    height: 36px;display: inline-flex;align-items: center;gap: 7px;padding: 0 13px;border: 1px solid #dce4ee;border-radius: 10px;background: white;color: #174b82;text-decoration: none;font-size: 11px;font-weight: 600;
}
.btn-preview:hover{
    background: #f4f8fc;
}
.btn-download{
    width: 36px;height: 36px;display: inline-flex;align-items: center;justify-content: center;border-radius: 10px;background: #174b82;color: white;text-decoration: none;
}
.btn-download:hover{
    background: #0e3763;color: white;
}
.file-empty{
    font-size: 10px;color: #a3acb8;
}
/* =========================================================
   EMPTY
========================================================= */
.produk-empty{
    text-align: center;padding: 70px 20px;
}
.empty-icon{
    width: 60px;height: 60px;margin: 0 auto 15px;border-radius: 50%;background: #f0f4f8;display: flex;align-items: center;justify-content: center;font-size: 24px;color: #7d8da1;
}
.produk-empty h3{
    margin: 0 0 6px;color: #213c5c;font-size: 18px;
}
.produk-empty p{
    margin: 0;color: #8996a8;font-size: 13px;
}
/* =========================================================
   PAGINATION
========================================================= */
.produk-pagination{
    padding-top: 25px;display: flex;justify-content: center;
}
.produk-pagination nav{
    display: flex;justify-content: center;
}
/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 992px){
.produk-filter{
    flex-direction: column;align-items: stretch;
}
.produk-search{
    width: 100%;
}
.produk-table-head{
    display: none;
}
.produk-row{
    grid-template-columns: 45px 1fr;gap: 15px;padding: 20px 10px;
}
.produk-row .col-kategori, .produk-row .col-tahun{
    grid-column: 2;
}
.produk-row .col-aksi{
    grid-column: 2;justify-content: flex-start;
}
}
@media (max-width: 576px){
.produk-container{
    width: min(100% - 24px, 1135px);
}
.produk-hukum-hero{
    padding: 40px 0 45px;
}
.produk-hukum-hero h1{
    font-size: 32px;
}
.produk-card{
    padding: 15px;border-radius: 14px;
}
}
/* ===== NAVBAR FIX ===== */
.site-topbar{
    background:#0b2d4d;color:#fff;font-size:13px;border-bottom:1px solid rgba(255,255,255,.12);
}
.topbar-inner{
    max-width:1200px;min-height:38px;margin:auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;
}
.topbar-contact, .topbar-links{
    display:flex;align-items:center;gap:18px;
}
.site-topbar a{
    color:#fff;text-decoration:none;
}
.site-topbar a:hover{
    color:#d8b45a;
}
.main-navbar{
    position:relative;z-index:1000;background:#fff;border-bottom:1px solid #e5eaf0;box-shadow:0 3px 15px rgba(0,0,0,.06);
}
.navbar-inner{
    max-width:1200px;min-height:82px;margin:auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:25px;
}
.brand{
    display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0;
}
.brand-logo{
    width:52px;height:52px;object-fit:contain;display:block;
}
.brand-text{
    display:flex;flex-direction:column;line-height:1.15;
}
.brand-text strong{
    color:#0b2d4d;font-size:15px;font-weight:800;
}
.brand-text span{
    color:#6b7280;font-size:11px;margin-top:4px;
}
.public-navigation{
    display:flex;align-items:center;justify-content:flex-end;gap:4px;flex:1;
}
.public-navigation > a, .public-navigation .nav-link-public{
    position:relative;display:inline-flex;align-items:center;padding:30px 12px;color:#25364a;text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap;
}
.public-navigation > a:hover, .public-navigation .nav-link-public:hover{
    color:#0b5a8f;
}
.search-button{
    width:40px;height:40px;border:1px solid #dfe5eb;border-radius:50%;background:#fff;color:#0b2d4d;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.search-button:hover{
    background:#0b2d4d;color:#fff;
}
.admin-login{
    display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 15px;border-radius:7px;background:#0b2d4d;color:#fff !important;text-decoration:none;font-size:12px;font-weight:700;white-space:nowrap;
}
.admin-login:hover{
    background:#123f65;color:#fff !important;
}
.mobile-menu-button{
    display:none;width:42px;height:42px;border:1px solid #dce3ea;border-radius:7px;background:#fff;color:#0b2d4d;align-items:center;justify-content:center;cursor:pointer;
}
.mega-menu{
    position:absolute;left:50%;top:100%;width:min(1050px,calc(100vw - 40px));transform:translateX(-50%);padding:25px;background:#fff;border:1px solid #e5eaf0;border-radius:0 0 12px 12px;box-shadow:0 15px 35px rgba(0,0,0,.12);
}
.mega-menu-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:25px;
}
.mega-column h4{
    margin:0 0 12px;color:#0b2d4d;font-size:13px;font-weight:800;
}
.mega-line{
    display:block;padding:7px 0;color:#4b5563;text-decoration:none;font-size:12px;
}
.mega-line:hover{
    color:#0b5a8f;
}
.information-card{
    background:#f6f8fa;border-radius:10px;padding:15px;
}
.public-search-overlay{
    position:fixed;inset:0;z-index:9999;background:rgba(5,24,42,.96);display:none;align-items:center;justify-content:center;padding:30px;
}
.public-search-overlay.show{
    display:flex;
}
.public-search-box{
    width:min(700px,100%);
}
.public-search-box input{
    width:100%;padding:18px 20px;border:0;border-radius:10px;outline:none;font-size:18px;
}
.search-close{
    position:absolute;top:25px;right:30px;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:22px;cursor:pointer;
}
/* DROPDOWN */
.nav-dropdown, .simple-dropdown{
    position:relative;
}
.nav-dropdown .mega-menu{
    display:none;
}
.nav-dropdown:hover .mega-menu{
    display:block;
}
/* MOBILE */
@media (max-width:900px){
.mobile-menu-button{
    display:inline-flex;
}
.public-navigation{
    display:none;position:absolute;top:100%;left:0;right:0;padding:15px 20px;background:#fff;border-top:1px solid #e5eaf0;border-bottom:1px solid #e5eaf0;box-shadow:0 15px 25px rgba(0,0,0,.08);flex-direction:column;align-items:stretch;
}
.public-navigation.show{
    display:flex;
}
.public-navigation > a, .public-navigation .nav-link-public{
    padding:13px 10px;border-bottom:1px solid #eef1f4;
}
.mega-menu{
    position:static;width:100%;transform:none;margin-top:5px;border-radius:8px;box-shadow:none;
}
.mega-menu-grid{
    grid-template-columns:1fr;
}
}
@media (max-width:600px){
.topbar-contact{
    display:none;
}
.topbar-links{
    width:100%;justify-content:center;
}
.navbar-inner{
    padding:0 15px;
}
.brand-logo{
    width:42px;height:42px;
}
.brand-text strong{
    font-size:12px;
}
.brand-text span{
    font-size:9px;
}
}
/* =========================================================
   FIX DROPDOWN NAVBAR
   ========================================================= */
/* Semua dropdown menjadi acuan posisi */
.nav-dropdown{
    position: relative;display: flex;align-items: center;
}
/* Tombol dropdown */
.nav-dropdown > .dropdown-trigger{
    border: 0;background: transparent;cursor: pointer;font-family: inherit;
}
/* PROFIL - sembunyikan menu secara default */
.nav-dropdown > .simple-dropdown{
    position: absolute;top: calc(100% + 1px);left: 0;min-width: 245px;display: none;padding: 10px 0;background: #fff;border: 1px solid #e5eaf0;border-radius: 0 0 10px 10px;box-shadow: 0 12px 30px rgba(0,0,0,.12);z-index: 2000;
}
/* Tampilkan PROFIL saat mouse diarahkan */
.nav-dropdown:hover > .simple-dropdown{
    display: block;
}
/* Link di dalam PROFIL */
.nav-dropdown > .simple-dropdown a{
    display: block;padding: 10px 18px;color: #25364a;font-size: 13px;font-weight: 500;line-height: 1.4;text-decoration: none;white-space: nowrap;transition: .2s ease;
}
/* Hover link */
.nav-dropdown > .simple-dropdown a:hover{
    background: #f4f7fa;color: #0b5a8f;
}
/* Chevron */
.dropdown-trigger .bi-chevron-down{
    margin-left: 5px;font-size: 10px;transition: transform .2s ease;
}
.nav-dropdown:hover > .dropdown-trigger .bi-chevron-down{
    transform: rotate(180deg);
}
/* =========================================================
   MEGA MENU INFORMASI PUBLIK
   ========================================================= */
.nav-dropdown.mega-dropdown-wrapper{
    position: relative;
}
.nav-dropdown.mega-dropdown-wrapper > .mega-menu{
    display: none;position: absolute;top: calc(100% + 1px);left: 50%;transform: translateX(-50%);width: min(1050px, calc(100vw - 40px));background: #fff;border: 1px solid #e5eaf0;border-radius: 0 0 12px 12px;box-shadow: 0 15px 35px rgba(0,0,0,.12);z-index: 2000;
}
.nav-dropdown.mega-dropdown-wrapper:hover > .mega-menu{
    display: block;
}
/* =========================================================
   PERBAIKI BUTTON NAV
   ========================================================= */
.public-navigation .nav-link-public{
    border: 0;background: transparent;font-family: inherit;cursor: pointer;
}
/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 900px){
.nav-dropdown{
    width: 100%;display: block;
}
.nav-dropdown > .dropdown-trigger{
    width: 100%;justify-content: space-between;text-align: left;
}
.nav-dropdown > .simple-dropdown{
    position: static;width: 100%;min-width: 0;display: none;padding: 5px 0;border: 0;border-radius: 0;box-shadow: none;background: #f8fafc;
}
.nav-dropdown:hover > .simple-dropdown{
    display: block;
}
.nav-dropdown > .simple-dropdown a{
    padding: 10px 25px;white-space: normal;
}
.nav-dropdown.mega-dropdown-wrapper > .mega-menu{
    position: static;width: 100%;transform: none;margin-top: 5px;border-radius: 8px;box-shadow: none;
}
}
/* =========================================================
   MEGA MENU INFORMASI PUBLIK - FINAL FIX
   ========================================================= */
/* sembunyikan */
.nav-dropdown.mega-dropdown-wrapper > .mega-menu{
    display: none !important;position: absolute;top: calc(100% + 1px);left: 50%;transform: translateX(-50%);width: 1050px;max-width: calc(100vw - 40px);padding: 25px;background: #fff;border: 1px solid #e3e8ee;border-radius: 0 0 14px 14px;box-shadow: 0 18px 40px rgba(0,0,0,.15);z-index: 9999;
}
/* buka ketika class show ditambahkan */
.nav-dropdown.mega-dropdown-wrapper > .mega-menu.show{
    display: block !important;
}
/* buka saat hover desktop */
@media (min-width: 901px){
.nav-dropdown.mega-dropdown-wrapper:hover > .mega-menu{
    display: block !important;
}
}
/* isi mega menu */
.mega-menu-grid{
    display: grid;grid-template-columns: repeat(3, 1fr);gap: 25px;
}
.mega-column{
    min-width: 0;
}
.mega-column h4{
    margin: 0 0 10px;color: #0b2d4d;font-size: 13px;font-weight: 800;
}
.mega-column h4 i{
    margin-right: 6px;color: #c9a227;
}
.mega-column > a, .mega-line + a{
    display: block;padding: 8px 10px;color: #374151;text-decoration: none;font-size: 12px;line-height: 1.4;border-radius: 6px;transition: .2s ease;
}
.mega-column > a:hover{
    background: #f3f6f9;color: #0b5a8f;padding-left: 14px;
}
.mega-line{
    height: 1px;margin-bottom: 7px;background: #e5eaf0;
}
/* =========================================================
   MEGA MENU OPEN STATE
   ========================================================= */
.nav-dropdown.mega-dropdown-wrapper.active > .mega-menu{
    display: block !important;
}
.nav-dropdown.mega-dropdown-wrapper > .dropdown-trigger{
    display: inline-flex;align-items: center;gap: 5px;
}
.nav-dropdown.mega-dropdown-wrapper > .dropdown-trigger .bi-chevron-down{
    transition: transform .2s ease;
}
.nav-dropdown.mega-dropdown-wrapper.active > .dropdown-trigger .bi-chevron-down{
    transform: rotate(180deg);
}
/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 900px){
.nav-dropdown.mega-dropdown-wrapper > .mega-menu{
    position: static;width: 100%;max-width: none;transform: none;margin-top: 5px;padding: 15px;border-radius: 8px;box-shadow: none;
}
.mega-menu-grid{
    grid-template-columns: 1fr;gap: 15px;
}
.nav-dropdown.mega-dropdown-wrapper.active > .mega-menu{
    display: block !important;
}
}
/* =========================================================
   INFORMASI PUBLIK - OPEN ON HOVER
   ========================================================= */
@media (min-width: 901px){
.nav-dropdown.mega-dropdown-wrapper{
    position: relative;
}
/* Mega menu tersembunyi */
.nav-dropdown.mega-dropdown-wrapper > .mega-menu{
    display: none !important;position: absolute;top: 100%;left: 50%;transform: translateX(-50%);width: 1050px;max-width: calc(100vw - 40px);padding: 25px;background: #fff;border: 1px solid #e5eaf0;border-radius: 0 0 14px 14px;box-shadow: 0 15px 35px rgba(0,0,0,.14);z-index: 9999;
}
/* MUNCUL SAAT MOUSE DIARAHKAN */
.nav-dropdown.mega-dropdown-wrapper:hover > .mega-menu{
    display: block !important;
}
/* Pastikan area hover menyatu */
.nav-dropdown.mega-dropdown-wrapper:hover > .dropdown-trigger{
    color: #0b5a8f;
}
/* Chevron berputar */
.nav-dropdown.mega-dropdown-wrapper:hover > .dropdown-trigger .bi-chevron-down{
    transform: rotate(180deg);
}
}
/* =========================================================
   ISI MEGA MENU
   ========================================================= */
.mega-column h4 i{
    color: #c9a227;margin-right: 6px;
}
.mega-column > a{
    display: block;padding: 8px 10px;color: #374151;font-size: 12px;line-height: 1.4;text-decoration: none;border-radius: 6px;transition: all .2s ease;
}
.mega-column > a:hover{
    background: #f3f6f9;color: #0b5a8f;padding-left: 15px;
}
/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 900px){
.nav-dropdown.mega-dropdown-wrapper > .mega-menu{
    position: static;width: 100%;max-width: none;transform: none;margin-top: 5px;padding: 15px;border-radius: 8px;box-shadow: none;
}
.mega-menu-grid{
    grid-template-columns: 1fr;
}
}
/* =========================================================
   FINAL FIX - MEGA MENU INFORMASI PUBLIK
   ========================================================= */
/* Pastikan navbar tidak memotong mega menu */
.main-navbar, .navbar-inner, .public-navigation{
    overflow: visible !important;
}
/* Container */
.nav-dropdown.mega-dropdown-wrapper{
    position: relative !important;overflow: visible !important;
}
/* MEGA MENU DEFAULT */
.nav-dropdown.mega-dropdown-wrapper > .mega-menu{
    position: absolute !important;top: 100% !important;left: 50% !important;transform: translateX(-50%) !important;width: 1050px !important;max-width: calc(100vw - 40px) !important;display: none !important;padding: 25px !important;background: #ffffff !important;border: 1px solid #e1e7ed !important;border-radius: 0 0 14px 14px !important;box-shadow: 0 18px 45px rgba(0,0,0,.16) !important;z-index: 99999 !important;visibility: visible !important;opacity: 1 !important;
}
/* =========================================================
   BUKA OTOMATIS SAAT MOUSE DIARAHKAN
   ========================================================= */
.nav-dropdown.mega-dropdown-wrapper:hover > .mega-menu{
    display: block !important;
}
/* Tetap bisa terbuka ketika class active */
/* =========================================================
   ISI MEGA MENU
   ========================================================= */
.nav-dropdown.mega-dropdown-wrapper > .mega-menu .mega-menu-grid{
    display: grid !important;grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(240px, 1fr) !important;gap: 22px !important;width: 100% !important;
}
/* Kolom */
.nav-dropdown.mega-dropdown-wrapper .mega-menu .mega-column{
    min-width: 0 !important;
}
/* Judul kolom */
.nav-dropdown.mega-dropdown-wrapper .mega-menu .mega-column h4{
    margin: 0 0 10px !important;color: #0b2d4d !important;font-size: 13px !important;font-weight: 800 !important;white-space: nowrap !important;
}
/* Garis bawah judul */
.nav-dropdown.mega-dropdown-wrapper .mega-menu .mega-line{
    height: 1px !important;margin: 0 0 8px !important;background: #e5eaf0 !important;
}
/* Link */
.nav-dropdown.mega-dropdown-wrapper .mega-menu .mega-column > a{
    display: block !important;padding: 7px 9px !important;color: #374151 !important;font-size: 12px !important;line-height: 1.35 !important;text-decoration: none !important;border-radius: 6px !important;white-space: normal !important;
}
/* Hover link */
.nav-dropdown.mega-dropdown-wrapper .mega-menu .mega-column > a:hover{
    background: #f2f6f9 !important;color: #0b5a8f !important;padding-left: 13px !important;
}
/* =========================================================
   CARD AJUKAN PERMINTAAN INFORMASI
   ========================================================= */
.nav-dropdown.mega-dropdown-wrapper .mega-menu .information-card{
    align-self: start !important;padding: 20px !important;background: #f5f8fb !important;border: 1px solid #e3e9ef !important;border-radius: 12px !important;
}
.nav-dropdown.mega-dropdown-wrapper .mega-menu .information-card h3{
    margin: 10px 0 8px !important;color: #0b2d4d !important;font-size: 15px !important;
}
.nav-dropdown.mega-dropdown-wrapper .mega-menu .information-card p{
    margin: 0 0 15px !important;color: #667085 !important;font-size: 12px !important;line-height: 1.5 !important;
}
.nav-dropdown.mega-dropdown-wrapper .mega-menu .information-card > a{
    display: inline-block !important;padding: 9px 14px !important;background: #0b2d4d !important;color: #fff !important;border-radius: 6px !important;text-decoration: none !important;font-size: 12px !important;font-weight: 700 !important;
}
.nav-dropdown.mega-dropdown-wrapper .mega-menu .information-card > a:hover{
    background: #123f65 !important;
}
/* =========================================================
   CHEVRON
   ========================================================= */
.nav-dropdown.mega-dropdown-wrapper .dropdown-trigger .bi-chevron-down{
    transition: transform .2s ease !important;
}
.nav-dropdown.mega-dropdown-wrapper:hover .dropdown-trigger .bi-chevron-down{
    transform: rotate(180deg) !important;
}
/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 900px){
.nav-dropdown.mega-dropdown-wrapper > .mega-menu{
    position: static !important;width: 100% !important;max-width: none !important;transform: none !important;padding: 15px !important;border-radius: 8px !important;box-shadow: none !important;
}
.nav-dropdown.mega-dropdown-wrapper .mega-menu .mega-menu-grid{
    grid-template-columns: 1fr !important;
}
.nav-dropdown.mega-dropdown-wrapper:hover > .mega-menu{
    display: none !important;
}
.nav-dropdown.mega-dropdown-wrapper.active > .mega-menu{
    display: block !important;
}
}
/* =========================================================
   ANTI FLASH HTML - INFORMASI PUBLIK
   ========================================================= */
/* Bentuk dasar langsung tersedia sebelum seluruh CSS selesai */
.public-info-hero, .public-information-section, .public-info-section{
    display: block;width: 100%;
}
.public-info-container{
    width: min(1200px, calc(100% - 40px));margin-left: auto;margin-right: auto;
}
.public-info-layout{
    display: grid;grid-template-columns: 280px minmax(0, 1fr);gap: 30px;
}
.public-info-sidebar{
    width: 100%;
}
.public-info-main{
    width: 100%;
}
.public-info-grid{
    display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 24px;
}
.public-info-card{
    display: block;width: 100%;
}
.sidebar-group-content{
    display: block;
}
.sidebar-item{
    display: flex;align-items: center;
}
@media (max-width: 900px){
.public-info-layout{
    grid-template-columns: 1fr;
}
.public-info-grid{
    grid-template-columns: 1fr;
}
}
:root{
    --ip-navy: #123b68;--ip-navy-dark: #0d3158;--ip-blue: #1d568d;--ip-gold: #d9a928;--ip-bg: #f4f7fb;--ip-border: #dce5ef;--ip-text: #183b5d;--ip-muted: #718096;
}
/* =========================================================
   GLOBAL
========================================================= */
.ip-container{
    width: min(1180px, calc(100% - 40px));margin: 0 auto;
}
/* =========================================================
   HERO
========================================================= */
.ip-hero{
    background:
        linear-gradient(
            115deg,
            var(--ip-navy-dark),
            var(--ip-blue)
        );color: #fff;padding: 42px 0 48px;
}
.ip-breadcrumb{
    display: flex;align-items: center;gap: 12px;font-size: 13px;margin-bottom: 22px;color: rgba(255,255,255,.7);
}
.ip-breadcrumb a{
    color: rgba(255,255,255,.75);text-decoration: none;
}
.ip-breadcrumb a:hover{
    color: #fff;
}
.ip-breadcrumb strong{
    color: #fff;
}
.ip-hero-content{
    display: flex;align-items: center;justify-content: space-between;gap: 40px;
}
.ip-eyebrow{
    color: var(--ip-gold);font-size: 12px;font-weight: 800;letter-spacing: 1.5px;margin-bottom: 8px;
}
.ip-hero h1{
    margin: 0 0 10px;font-size: clamp(34px, 5vw, 48px);font-weight: 700;line-height: 1.1;
}
.ip-hero p{
    max-width: 680px;margin: 0;font-size: 15px;line-height: 1.7;color: rgba(255,255,255,.85);
}
.ip-view-switch{
    display: flex;border: 1px solid rgba(255,255,255,.3);border-radius: 10px;padding: 4px;background: rgba(255,255,255,.08);flex-shrink: 0;
}
.ip-switch{
    border: 0;background: transparent;color: rgba(255,255,255,.8);padding: 10px 15px;border-radius: 7px;font-size: 12px;cursor: pointer;text-decoration: none;
}
.ip-switch.active{
    background: rgba(255,255,255,.15);color: #fff;font-weight: 700;
}
/* =========================================================
   SECTION
========================================================= */
.ip-section{
    background: var(--ip-bg);padding: 48px 0 70px;min-height: 550px;
}
.ip-grid{
    display: grid;grid-template-columns: 280px minmax(0, 1fr);gap: 22px;align-items: start;
}
/* =========================================================
   SIDEBAR
========================================================= */
.ip-sidebar-inner{
    background: #fff;border: 1px solid var(--ip-border);border-radius: 14px;padding: 15px;box-shadow: 0 8px 25px rgba(20,55,90,.05);
}
.ip-sidebar-title{
    font-size: 10px;font-weight: 800;letter-spacing: 1.2px;color: #8090a0;padding: 4px 10px 13px;border-bottom: 1px solid var(--ip-border);
}
.ip-sidebar-group{
    border-bottom: 1px solid #eef2f6;
}
.ip-group-header{
    width: 100%;display: flex;align-items: center;justify-content: space-between;gap: 10px;border: 0;background: transparent;padding: 13px 10px;color: var(--ip-text);font-size: 13px;font-weight: 700;cursor: pointer;text-align: left;
}
.ip-group-header:hover{
    color: var(--ip-blue);
}
.ip-group-header span{
    display: flex;align-items: center;gap: 9px;
}
.ip-chevron{
    transition: transform .2s ease;
}
.ip-chevron.rotate{
    transform: rotate(180deg);
}
.ip-group-items{
    display: none;padding: 0 0 8px;
}
.ip-group-items.show{
    display: block;
}
.ip-sidebar-link{
    position: relative;display: flex;align-items: center;gap: 9px;padding: 9px 9px 9px 18px;margin: 2px 0;border-radius: 7px;color: #52677c;font-size: 12px;text-decoration: none;transition: .2s ease;
}
.ip-sidebar-link:hover{
    background: #f1f6fb;color: var(--ip-blue);
}
.ip-sidebar-link.active{
    background: #eaf2fb;color: var(--ip-navy);font-weight: 700;
}
.ip-sidebar-link.active .ip-sidebar-line{
    position: absolute;left: 0;top: 7px;bottom: 7px;width: 3px;background: var(--ip-gold);border-radius: 4px;
}
.ip-sidebar-line{
    display: none;
}
.ip-sidebar-name{
    flex: 1;line-height: 1.35;
}
.ip-active-arrow{
    margin-left: auto;font-size: 11px;
}
/* =========================================================
   PPID
========================================================= */
.ip-ppid-box{
    margin-top: 15px;padding: 18px;border-radius: 11px;background: var(--ip-navy);color: #fff;
}
.ip-ppid-icon{
    width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;background: rgba(255,255,255,.12);border-radius: 7px;margin-bottom: 10px;
}
.ip-ppid-box strong{
    display: block;font-size: 12px;margin-bottom: 6px;
}
.ip-ppid-box p{
    margin: 0 0 13px;color: rgba(255,255,255,.75);font-size: 10px;line-height: 1.6;
}
.ip-ppid-button{
    display: block;text-align: center;padding: 9px 10px;border-radius: 7px;background: var(--ip-gold);color: #132d49;font-size: 11px;font-weight: 800;text-decoration: none;
}
.ip-ppid-button:hover{
    background: #edbe36;color: #132d49;
}
/* =========================================================
   MAIN CARD
========================================================= */
.ip-card{
    background: #fff;border: 1px solid var(--ip-border);border-radius: 14px;padding: 25px;box-shadow: 0 8px 25px rgba(20,55,90,.05);
}
.ip-main-header{
    display: flex;justify-content: space-between;align-items: flex-start;gap: 20px;padding-bottom: 20px;border-bottom: 1px solid var(--ip-border);
}
.ip-main-eyebrow{
    color: var(--ip-gold);font-size: 10px;font-weight: 800;letter-spacing: 1.2px;margin-bottom: 4px;
}
.ip-main-header h2{
    margin: 0;color: #123554;font-size: 25px;line-height: 1.2;
}
.ip-count{
    margin: 5px 0 0;color: var(--ip-muted);font-size: 11px;
}
.ip-actions{
    display: flex;align-items: center;gap: 7px;
}
.ip-filter-form{
    margin: 0;
}
.ip-year-select, .ip-print-button{
    height: 36px;padding: 0 12px;border: 1px solid var(--ip-border);border-radius: 7px;background: #fff;color: #3d5870;font-size: 11px;cursor: pointer;
}
.ip-print-button{
    display: flex;align-items: center;gap: 6px;
}
/* =========================================================
   DOCUMENT
========================================================= */
.ip-document-list{
    display: flex;flex-direction: column;gap: 9px;margin-top: 16px;
}
.ip-document-card{
    display: flex;align-items: center;gap: 14px;padding: 13px;border: 1px solid var(--ip-border);border-radius: 11px;background: #fff;transition: .2s ease;
}
.ip-document-card:hover{
    border-color: #bfd2e5;box-shadow: 0 5px 15px rgba(25,65,100,.06);transform: translateY(-1px);
}
.ip-document-icon{
    width: 39px;height: 39px;min-width: 39px;display: flex;align-items: center;justify-content: center;border: 1px solid #f0d8d8;border-radius: 8px;background: #fffafa;color: #c44b4b;font-size: 17px;
}
.ip-document-info{
    min-width: 0;flex: 1;
}
.ip-document-info h3{
    margin: 0 0 5px;color: #183c5e;font-size: 13px;font-weight: 700;line-height: 1.4;
}
.ip-document-meta{
    display: flex;align-items: center;flex-wrap: wrap;gap: 5px;color: #8a99a8;font-size: 9px;
}
.ip-document-meta span:first-child{
    color: #7b8d9d;
}
.ip-status{
    display: inline-flex;align-items: center;padding: 2px 6px;border-radius: 4px;background: #e8f7ed;color: #319054;font-size: 8px;font-weight: 700;
}
.ip-document-actions{
    display: flex;align-items: center;gap: 5px;flex-shrink: 0;
}
.ip-detail-button, .ip-download-button{
    min-width: 66px;height: 32px;padding: 0 11px;border: 0;border-radius: 7px;display: inline-flex;align-items: center;justify-content: center;gap: 5px;font-size: 10px;font-weight: 700;text-decoration: none;cursor: pointer;
}
.ip-detail-button{
    background: #edf4fb;color: #28547a;
}
.ip-detail-button:hover{
    background: #dceaf7;
}
.ip-download-button{
    background: var(--ip-navy);color: #fff;
}
.ip-download-button:hover{
    background: #0c3159;color: #fff;
}
.ip-download-button.disabled{
    opacity: .5;cursor: not-allowed;
}
/* =========================================================
   EMPTY
========================================================= */
.ip-empty{
    padding: 60px 20px;text-align: center;
}
.ip-empty-icon{
    width: 65px;height: 65px;margin: 0 auto 15px;display: flex;align-items: center;justify-content: center;background: #f0f5fa;color: #7e98ae;border-radius: 50%;font-size: 26px;
}
.ip-empty h3{
    margin: 0 0 6px;color: #254966;font-size: 17px;
}
.ip-empty p{
    margin: 0 auto 18px;max-width: 430px;color: #7a8b9b;font-size: 12px;
}
.ip-empty-button{
    display: inline-block;padding: 9px 14px;border-radius: 7px;background: var(--ip-navy);color: #fff;text-decoration: none;font-size: 11px;font-weight: 700;
}
/* =========================================================
   NOTE
========================================================= */
.ip-information-note{
    display: flex;align-items: flex-start;gap: 10px;margin-top: 15px;padding: 12px 14px;border: 1px solid var(--ip-border);border-radius: 8px;background: #f8fafc;color: #8393a2;font-size: 9px;line-height: 1.6;
}
.ip-information-note i{
    color: #5d7892;font-size: 13px;
}
/* =========================================================
   PAGINATION
========================================================= */
.ip-pagination{
    margin-top: 20px;display: flex;justify-content: center;
}
.ip-pagination nav{
    display: flex;justify-content: center;
}
/* =========================================================
   MODAL
========================================================= */
.ip-modal{
    position: fixed;inset: 0;z-index: 99999;display: none;align-items: center;justify-content: center;padding: 20px;background: rgba(9,30,50,.65);backdrop-filter: blur(3px);
}
.ip-modal.show{
    display: flex;
}
.ip-modal-content{
    position: relative;width: min(560px, 100%);background: #fff;border-radius: 15px;padding: 30px;box-shadow: 0 25px 80px rgba(0,0,0,.25);
}
.ip-modal-close{
    position: absolute;top: 15px;right: 15px;width: 32px;height: 32px;border: 0;border-radius: 50%;background: #f2f5f8;color: #65788a;cursor: pointer;
}
.ip-modal-icon{
    width: 45px;height: 45px;display: flex;align-items: center;justify-content: center;border-radius: 9px;background: #eef5fb;color: var(--ip-navy);font-size: 20px;margin-bottom: 15px;
}
.ip-modal-eyebrow{
    color: var(--ip-gold);font-size: 10px;font-weight: 800;letter-spacing: 1.2px;margin-bottom: 5px;
}
.ip-modal-content h3{
    margin: 0;padding-right: 35px;color: #183b5d;font-size: 20px;line-height: 1.4;
}
.ip-modal-meta{
    display: flex;flex-wrap: wrap;gap: 10px;margin-top: 10px;color: #8293a2;font-size: 11px;
}
.ip-modal-description{
    margin-top: 20px;padding: 15px;border-radius: 9px;background: #f6f9fc;color: #5c7083;font-size: 12px;line-height: 1.7;
}
.ip-modal-description p{
    margin: 0;
}
.ip-modal-button{
    margin-top: 18px;border: 0;padding: 9px 18px;border-radius: 7px;background: var(--ip-navy);color: #fff;font-size: 11px;font-weight: 700;cursor: pointer;
}
/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 900px){
.ip-grid{
    grid-template-columns: 1fr;
}
.ip-sidebar{
    order: 2;
}
.ip-main{
    order: 1;
}
.ip-hero-content{
    flex-direction: column;align-items: flex-start;
}
.ip-view-switch{
    width: 100%;
}
.ip-switch{
    flex: 1;text-align: center;
}
}
@media (max-width: 650px){
.ip-container{
    width: min(100% - 24px, 1180px);
}
.ip-hero{
    padding: 30px 0 35px;
}
.ip-section{
    padding: 25px 0 45px;
}
.ip-card{
    padding: 15px;
}
.ip-main-header{
    flex-direction: column;
}
.ip-actions{
    width: 100%;
}
.ip-filter-form{
    flex: 1;
}
.ip-year-select{
    width: 100%;
}
.ip-document-card{
    align-items: flex-start;flex-wrap: wrap;
}
.ip-document-info{
    width: calc(100% - 55px);
}
.ip-document-actions{
    width: 100%;padding-left: 53px;
}
.ip-detail-button, .ip-download-button{
    flex: 1;
}
}
/* =========================================================
   PRINT
========================================================= */
print{
.ip-hero{
    background: #fff !important;color: #000 !important;border-bottom: 2px solid #123b68;
}
.ip-hero p, .ip-breadcrumb, .ip-view-switch, .ip-sidebar, .ip-actions, .ip-document-actions, .ip-information-note{
    display: none !important;
}
.ip-section{
    background: #fff;padding: 20px 0;
}
.ip-grid{
    display: block;
}
.ip-card{
    border: 0;box-shadow: none;
}
.ip-document-card{
    break-inside: avoid;
}
}


/* =========================================================
   FINAL PROFILE TAB OVERRIDE
   Klik = hanya perubahan warna, tanpa morph/gerakan
========================================================= */
.profile-tabs .profile-tab,
.profile-tabs .profile-tab:hover,
.profile-tabs .profile-tab:focus,
.profile-tabs .profile-tab:active,
.profile-tabs .profile-tab.active {
    transition: none !important;
    transform: none !important;
    animation: none !important;
    box-shadow: none !important;
}
.profile-tabs .profile-tab {
    background: #ffffff !important;
    color: #8092a5 !important;
}
.profile-tabs .profile-tab:hover {
    background: #f5f9fc !important;
    color: #175e8d !important;
}
.profile-tabs .profile-tab.active {
    background: #17618f !important;
    color: #ffffff !important;
}
.profile-tabs .profile-tab.active::before,
.profile-tabs .profile-tab.active::after {
    display: none !important;
    content: none !important;
}