/* =====================================================    ROOT VARIABLES    ===================================================== */ :root {     --primary: #0d5ca6;     --secondary: #083b6e;     --accent: #ffd43b;     --nav-bg: rgba(4, 32, 69, .80); } /* =====================================================    GLOBAL SETTINGS    ===================================================== */ html {     scroll-behavior: smooth;     scroll-padding-top: 90px; } body {     min-height: 100vh;     display: flex;     flex-direction: column;     font-family: "Segoe UI", sans-serif;     overflow-x: hidden; } .main-content {     flex: 1; } /* =====================================================    FOOTER    ===================================================== */ footer {     background: #06284f;     color: #ffffff;     padding: 30px 0;     margin-top: auto; } /* =====================================================    NAVBAR    ===================================================== */ .navbar {     background: linear-gradient(90deg, #082b5c 0%, #0b3a75 100%);     padding: 14px 0;     box-shadow: 0 4px 20px rgba(0, 0, 0, .15); } .brand-logo {     width: 150px;     height: 50px;     object-fit: contain; } .navbar-nav {     gap: 12px; } .nav-link {     display: flex;     align-items: center;     gap: .4rem;     color: #ffffff !important;     font-size: 1rem;     font-weight: 700;     padding: 12px 18px !important;     transition: all .3s ease; } .nav-link:hover, .nav-link:focus, .nav-link.show {     color: var(--accent) !important; } /* =====================================================    DROPDOWN MENU    ===================================================== */ .dropdown-menu {     min-width: 320px;     padding: .75rem;     background: rgba(4, 32, 69, .96);     border: 1px solid rgba(255, 255, 255, .08);     border-radius: 18px;     box-shadow: 0 15px 40px rgba(0, 0, 0, .18); } .dropdown-divider {     border-color: rgba(255, 255, 255, .12); } .dropdown-item {     display: flex;     align-items: center;     gap: .75rem;     padding: .85rem 1rem;     color: #ffd43b !important;     font-weight: 600;     font-size: 0.80rem;     border-radius: 8px;     white-space: normal;     transition: all .25s ease; } .dropdown-item i {     width: 20px;     text-align: center; } .dropdown-item:hover, .dropdown-item:focus {     background: rgba(255, 212, 59, .12);     color: #fff2a8 !important; } .dropdown-item:hover i, .dropdown-item:focus i {     color: #fff2a8 !important; } /* =====================================================    SUBMENU    ===================================================== */ .dropdown-submenu {     position: relative; } .dropdown-submenu > .dropdown-menu {     top: 0;     left: calc(100% + 8px);     margin-top: 0;     display: none; } .dropdown-submenu.show > .dropdown-menu {     display: block; } .submenu-toggle {     display: flex;     align-items: center;     justify-content: space-between; } .submenu-icon {     margin-left: auto;     font-size: .75rem; } /* =====================================================    HERO SECTION    ===================================================== */ .hero {     position: relative;     min-height: 100vh;     display: flex;     align-items: center;     overflow: hidden; } .hero::before {     content: "";     position: absolute;     inset: 0;     background:         linear-gradient(             90deg,             rgba(4, 52, 106, .96) 0%,             rgba(4, 52, 106, .92) 35%,             rgba(4, 52, 106, .70) 60%,             rgba(4, 52, 106, .20) 100%         ),         url('../images/wallpaper-sumsel.jpg')         center center / cover no-repeat; } .hero .container {     position: relative;     z-index: 2; } .hero-content {     color: #ffffff; } .hero-subtitle {     font-size: clamp(1.8rem, 3vw, 2.5rem);     font-weight: 300;     margin-bottom: 15px; } .hero-title {     font-size: clamp(3rem, 6vw, 5.5rem);     line-height: 1.05;     font-weight: 800;     margin-bottom: 25px; } .hero-line {     width: 90px;     height: 5px;     background: var(--accent);     border-radius: 30px;     margin-bottom: 30px; } .hero-text {     max-width: 650px;     font-size: 1.2rem;     line-height: 1.9;     color: rgba(255, 255, 255, .95); } .hero-image {     width: auto;     height: clamp(380px, 75vh, 820px);     max-width: 100%;     object-fit: contain;     display: block;     margin: 0 auto;     pointer-events: none; } /* =====================================================    SECTION UMUM    ===================================================== */ .content {     padding: 100px 0; } .section-title {     color: var(--secondary);     font-size: 2.3rem;     font-weight: 700;     margin-bottom: 15px; } .section-subtitle {     color: #6c757d;     margin-bottom: 50px; } /* =====================================================    FEATURE CARD    ===================================================== */ .feature-card {     height: 100%;     border: none;     border-radius: 24px;     padding: 35px;     box-shadow: 0 12px 30px rgba(0, 0, 0, .08);     transition: .3s; } .feature-card:hover {     transform: translateY(-8px); } .feature-card h4 {     font-weight: 700;     margin-bottom: 15px; } .feature-card a {     text-decoration: none;     font-weight: 600; } .feature-icon {     width: 70px;     height: 70px;     border-radius: 50%;     display: flex;     align-items: center;     justify-content: center;     color: #ffffff;     font-size: 1.8rem;     margin-bottom: 25px; } /* =====================================================    WARNA ICON    ===================================================== */ .bg-blue {     background: #1f6fd5; } .bg-green {     background: #28a745; } .bg-orange {     background: #fd7e14; } .bg-purple {     background: #7e3ace; } .bg-cyan {     background: #00a8cc; } /* =====================================================    ICON UMUM    ===================================================== */ .icon-circle {     width: 70px;     height: 70px;     border-radius: 50%;     display: inline-flex;     align-items: center;     justify-content: center; } /* =====================================================    LHKPN CARD    ===================================================== */ .lhkpn-card {     display: flex;     flex-direction: column;     align-items: center;     justify-content: center;     min-height: 320px;     padding: 2rem;     border-radius: 24px;     background: linear-gradient(135deg, #0d5ca6, #083b6e);     color: #ffffff;     text-align: center;     box-shadow: 0 12px 30px rgba(13, 92, 166, .25);     transition: all .3s ease; } .lhkpn-card:hover {     transform: translateY(-8px);     color: #ffffff;     box-shadow: 0 18px 40px rgba(13, 92, 166, .35); } .lhkpn-card-icon {     width: 90px;     height: 90px;     border-radius: 50%;     background: rgba(255, 255, 255, .15);     display: flex;     align-items: center;     justify-content: center;     font-size: 2.5rem;     margin-bottom: 1.5rem; } .lhkpn-card p {     color: rgba(255, 255, 255, .85); } /* =====================================================    CARD STATISTIK    ===================================================== */ .stats-section {     padding: 100px 0;     background: #f7f9fc; } .stats-title {     color: #082b5c;     font-size: clamp(2rem, 4vw, 3rem);     font-weight: 800;     line-height: 1.3; } .stats-card {     height: 100%;     padding: 40px 30px;     background: #ffffff;     border: 1px solid rgba(13, 92, 166, .08);     border-radius: 24px;     box-shadow: 0 12px 30px rgba(0, 0, 0, .08);     text-align: center;     transition: all .3s ease; } .stats-card:hover {     transform: translateY(-8px);     box-shadow: 0 18px 40px rgba(13, 92, 166, .18); } .stats-icon-card {     width: 90px;     height: 90px;     margin: 0 auto 25px;     display: flex;     align-items: center;     justify-content: center;     border-radius: 24px;     background: linear-gradient(135deg, #0d5ca6, #083b6e);     color: #ffffff;     font-size: 2.5rem; } .stats-card h3 {     margin-bottom: 10px;     color: #0f172a;     font-size: 3rem;     font-weight: 800; } .stats-card p {     margin: 0;     color: #475569;     font-size: 1.1rem;     font-weight: 500; } /* =====================================================    SOCIAL MEDIA    ===================================================== */ .social-card {     transition: all .3s ease; } .social-card:hover {     transform: translateY(-8px);     box-shadow: 0 1rem 2rem rgba(0, 0, 0, .12) !important; } .social-icon {     width: 90px;     height: 90px;     border-radius: 50%;     display: flex;     align-items: center;     justify-content: center;     font-size: 2.5rem; } .instagram-icon {     background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af);     color: #ffffff; } .facebook-icon {     background: #1877f2;     color: #ffffff; } .x-icon {     background: #000000;     color: #ffffff; } /* =====================================================    KONTAK    ===================================================== */ #kontak iframe {     display: block;     min-height: 450px; } #kontak .card {     border-radius: 24px; } #kontak .icon-box {     width: 52px;     height: 52px;     font-size: 1.2rem; } /* =====================================================    OFFCANVAS    ===================================================== */ .offcanvas {     width: 100%;     max-width: 500px; } .offcanvas-body {     overflow-y: auto;     -webkit-overflow-scrolling: touch; } /* =====================================================    RESPONSIVE TABLET    ===================================================== */ @media (max-width: 991px) {     .navbar-collapse {         background: rgba(4, 32, 69, .95);         padding: 20px;         margin-top: 15px;         border-radius: 16px;         max-height: calc(100vh - 100px);         overflow-y: auto;     }     .navbar-nav {         gap: 0;     }     .hero {         min-height: auto;         padding: 140px 0 70px;         text-align: center;     }     .hero-content {         margin-bottom: 40px;     }     .hero-line {         margin: 0 auto 30px;     }     .hero-text {         max-width: 100%;         font-size: 1.05rem;     }     .hero-image {         width: 100%;         height: auto;         max-width: 320px;     }     .lhkpn-card {         min-height: auto;         margin-top: 1rem;     }     .dropdown-menu {         min-width: 100%;     }     .dropdown-submenu > .dropdown-menu {         position: static;         display: none;         margin-top: .5rem;         margin-left: 1rem;         padding: .5rem 0;         background: transparent;         border: none;         box-shadow: none;     }     .dropdown-submenu.show > .dropdown-menu {         display: block;     } } /* =====================================================    RESPONSIVE MOBILE    ===================================================== */ @media (max-width: 576px) {     .brand-logo {         width: 120px;         height: 40px;     }     .hero-title {         font-size: 2.7rem;     }     .hero-text {         font-size: 1rem;         line-height: 1.7;     }     .hero-image {         max-width: 260px;     }     .offcanvas {         max-width: 100%;     } } #sarankritik .form-control {     border-radius: 20px;     padding: 16px 20px;     border: 1px solid #d8dde6; } #sarankritik textarea.form-control {     border-radius: 20px; } #sarankritik .btn-primary {     min-width: 220px; } /* =====================================================    INSATGRAM CARD    ===================================================== */ .instagram-promo-icon {     width: 110px;     height: 110px;     border-radius: 50%;     display: flex;     align-items: center;     justify-content: center;     background: linear-gradient(         135deg,         #f58529,         #dd2a7b,         #8134af,         #515bd4     );     color: #ffffff;     font-size: 3rem;     box-shadow: 0 15px 35px rgba(221, 42, 123, .25); } .btn-instagram {     background: linear-gradient(         135deg,         #f58529,         #dd2a7b,         #8134af     );     border: none;     color: #ffffff;     font-weight: 600;     transition: all .3s ease; } .btn-instagram:hover {     color: #ffffff;     transform: translateY(-3px);     box-shadow: 0 12px 25px rgba(221, 42, 123, .35); } .icon-box {     width: 52px;     height: 52px;     min-width: 52px;     border-radius: 14px;     display: flex;     align-items: center;     justify-content: center;     font-size: 1.3rem; } .card {     transition: all .3s ease; } .card:hover {     transform: translateY(-3px); } .undian-emas-section{     background: linear-gradient(135deg,#0b3b8c,#0f5bd3);     position: relative;     overflow: hidden; } .undian-emas-section::before{     content:'';     position:absolute;     top:-100px;     right:-100px;     width:300px;     height:300px;     background:rgba(255,215,0,.15);     border-radius:50%; } .gold-title{     background: linear-gradient(45deg,#FFD700,#FFF5B7,#FFC107);     -webkit-background-clip:text;     -webkit-text-fill-color:transparent;     font-weight:800; } .banner-undian{     transition: all .4s ease;     border-radius:20px; } .banner-undian:hover{     transform: scale(1.03); } .feature-box{     background:#fff;     border-radius:15px;     padding:15px;     height:100%;     box-shadow:0 5px 20px rgba(0,0,0,.08); } .feature-number{     width:40px;     height:40px;     background:#0d6efd;     color:white;     border-radius:50%;     display:flex;     align-items:center;     justify-content:center;     font-weight:bold; } .btn-gold{     background:linear-gradient(45deg,#FFD700,#FFC107);     border:none;     color:#000;     font-weight:700; } .btn-gold:hover{     transform:translateY(-2px);     color:#000; } .headline-card{     background:#fff;     border-radius:20px;     overflow:hidden;     box-shadow:0 10px 35px rgba(0,0,0,.08);     transition:.4s; } .headline-card:hover{     transform:translateY(-8px); } .headline-card img{     height:420px;     object-fit:cover; } .headline-content{     padding:30px; } .headline-content h3{     font-weight:700;     margin-top:10px; } .headline-content p{     color:#666;     line-height:1.8; } .mini-news{     display:flex;     gap:15px;     margin-bottom:20px;     background:#fff;     border-radius:15px;     padding:12px;     transition:.3s;     box-shadow:0 5px 20px rgba(0,0,0,.05); } .mini-news:hover{     transform:translateX(8px); } .mini-news img{     width:120px;     height:90px;     border-radius:12px;     object-fit:cover; } .mini-news h6{     margin-top:5px;     font-weight:600; } .mini-news a{     color:#222;     text-decoration:none; } .mini-news a:hover{     color:#198754; } .hr-gold{     border:0;     height:3px;     width:180px;     margin:35px auto;     opacity:1;     background:linear-gradient(         90deg,         transparent,         #b8860b,         #ffd700,         #fff8dc,         #ffd700,         #b8860b,         transparent     );     border-radius:50px;     box-shadow:         0 0 8px rgba(255,215,0,.35); }