.btn-gold,.footer-brand{font-family:Manrope,sans-serif}.dropdown-header,.mobile-menu-title{text-transform:uppercase;letter-spacing:1px}.features-section,.glass-card,.hero-content,.hero-section,.nav-link{position:relative}@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;src:url('/fonts/manrope/manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--primary-color:#041329;--primary-light:#0a2142;--secondary-color:#F2CA50;--secondary-light:#f6d976;--bg-light:#fefaf2;--text-dark:#041329;--text-muted-dark:rgba(4, 19, 41, 0.7);--bg-dark:#020a16;--text-light:#ffffff;--font-headline:"Manrope",sans-serif;--font-body:"Manrope",sans-serif;--font-label:"Manrope",sans-serif}.container{max-width:1200px}body{font-family:var(--font-body);background-color:var(--bg-light);color:var(--text-dark);overflow-x:hidden}.section-title h2 span,.text-gold{color:var(--secondary-color)}.bg-gold{background-color:var(--secondary-color)}.bg-gold-light{background-color:rgba(204,167,53,.1)}h1,h2,h3,h4,h5,h6{font-family:var(--font-headline);font-weight:700}.navbar-custom{background:rgba(4,19,41,.96);border-bottom:1px solid rgba(204,167,53,.15);transition:background-color .3s}.nav-link{color:var(--text-light)!important;font-weight:500;font-size:.9rem;padding:.4rem .6rem;transition:color .3s;margin:0 .2rem}.dropdown-item{padding:.5rem 1.5rem;font-weight:500;color:var(--text-dark);transition:.2s}.dropdown-item:focus,.dropdown-item:hover{background-color:rgba(204,167,53,.08);color:var(--secondary-color)}.dropdown-header{padding:.5rem 1.5rem;font-size:.8rem}.navbar-toggler{border-color:rgba(255,255,255,.1)}.navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}.hero-section{padding:100px 0 32px;display:flex;align-items:center;background:var(--primary-color);color:var(--bg-light)}.hero-content {
    z-index: 1;
    position: relative;
}.hero-title{font-size:2.2rem;line-height:1.2;margin-bottom:1rem;color:var(--secondary-color);text-shadow:none}.hero-subtitle,.hero-title span{color:var(--text-light)}.hero-subtitle{font-size:.95rem;margin-bottom:1.5rem;font-weight:400}.btn-gold,.btn-outline-gold{font-weight:600;transition:transform .3s,box-shadow .3s}.btn-gold{background:linear-gradient(135deg,var(--secondary-color) 0,#b38f29 100%);color:#fff;border:none;box-shadow:0 4px 15px rgba(204,167,53,.3)}.btn-outline-gold,.card-icon{color:var(--secondary-color)}.card-home-woton,.glass-card{box-shadow:0 4px 20px rgba(4,19,41,.03)}.btn-gold:hover{transform:translate3d(0,-3px,0);box-shadow:0 8px 25px rgba(204,167,53,.4);color:#fff}.btn-outline-gold{background:0 0;border:2px solid var(--secondary-color);border-radius:50px;font-size:.9rem}.btn-outline-gold:hover{background:var(--secondary-color);color:#fff;transform:translateY(-3px);box-shadow:0 4px 15px rgba(204,167,53,.3)}.glass-card{background:#fff;border:1px solid rgba(204,167,53,.2);border-radius:8px;padding:1.5rem 1.2rem;transition:.4s;height:100%}.card-icon{width:45px;height:45px;background:rgba(204,167,53,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:1rem;transition:.4s}.glass-card:hover .card-icon{background:var(--secondary-color);color:#fff;transform:scale(1.1) rotate(5deg)}.card-title{font-size:1.1rem;margin-bottom:.5rem;color:var(--primary-color)}.card-text{color:var(--text-muted-dark);font-size:.85rem;line-height:1.5}.features-section{padding:60px 0;background-color:#fff}.section-title{text-align:center;margin-bottom:2.5rem}.section-title h2{font-size:1.8rem;color:var(--primary-color);margin-bottom:.5rem}.section-title p{color:var(--text-muted-dark);font-size:.9rem;max-width:600px;margin:0 auto}.form-control,.form-select{background-color:var(--bg-light);border:1px solid rgba(204,167,53,.2);border-radius:8px;padding:12px 8px;color:var(--primary-color);cursor:pointer;font-weight:700;font-size:.9rem}.btn{padding:16px 20px}.card-home-woton{padding:30px;border-radius:8px;background:#1f2b40;border:1px solid rgba(204,167,53,.2)}.footer{background-color:var(--primary-color);padding:50px 0 20px;border-top:5px solid var(--secondary-color)}.footer-brand{font-size:1.4rem;color:var(--secondary-color);font-weight:800;margin-bottom:1rem;display:inline-block;text-decoration:none}.footer-text,.mobile-menu-section{margin-bottom:1.5rem}.footer-text{color:rgba(255,255,255,.7);font-size:.85rem;line-height:1.6}.footer-links{list-style:none;padding:0;font-size:.85rem}.footer-links li{margin-bottom:.6rem}.footer-links a{color:rgba(255,255,255,.7);text-decoration:none;transition:transform .3s,box-shadow .3s}.footer-links a:hover{color:var(--secondary-color);padding-left:5px}.footer-bottom{margin-top:40px;padding-top:15px;border-top:1px solid rgba(255,255,255,.05);text-align:center;color:rgba(255,255,255,.4);font-size:.8rem}@media (max-width:991px){.hero-title{font-size:2rem}}@media (max-width:768px){.abstract-symbol{max-width:200px;margin-top:2rem}}.article-img-container{height:100%;min-height:110px}@media (min-width:768px){.article-img-container{height:180px}}.article-card{border:none;height:100%;border-radius:8px;overflow:hidden;background-color:#fff}.mobile-nav-container{padding-top:.5rem}.mobile-menu-title{color:var(--secondary-color);font-size:.8rem;font-weight:800;padding:.5rem 1rem;margin-bottom:.2rem;background:rgba(255,255,255,.05);border-radius:4px}.mobile-menu-link{color:rgba(255,255,255,.85);padding:.6rem 1rem .6rem 1.5rem;display:block;text-decoration:none;font-size:.95rem;border-bottom:1px solid rgba(255,255,255,.05);transition:.2s}.mobile-menu-link:active,.mobile-menu-link:hover{color:#fff;background:rgba(255,255,255,.08)}.mystic-spinner-container{position:relative;width:80px;height:80px;margin:0 auto}.mystic-spinner{position:absolute;width:100%;height:100%;border:3px solid transparent;border-top-color:var(--secondary-color);border-radius:50%;animation:1.5s linear infinite spin}.mystic-spinner-inner{position:absolute;top:10px;left:10px;right:10px;bottom:10px;border:3px solid transparent;border-bottom-color:var(--secondary-color);border-radius:50%;animation:1s linear infinite spin-reverse;opacity:.7}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-reverse{from{transform:rotate(0)}to{transform:rotate(-360deg)}}.custom-progress{width:100%;appearance:none;-webkit-appearance:none;border:none;background-color:rgba(255,255,255,.1);border-radius:10px;overflow:hidden}.custom-progress::-webkit-progress-bar{background-color:rgba(255,255,255,.1)}.custom-progress::-webkit-progress-value{background:linear-gradient(90deg,var(--secondary-color),#f1c40f)}.custom-progress::-moz-progress-bar{background:linear-gradient(90deg,var(--secondary-color),#f1c40f)}.modal.fade .modal-dialog{transform:translateY(30px) scale(.95);opacity:0;transition:.4s cubic-bezier(.34, 1.56, .64, 1)}.modal.show .modal-dialog{transform:translateY(0) scale(1);opacity:1}.modal-content-premium{background:rgba(13,27,42,.98)!important;border:1px solid rgba(204,167,53,.4)!important;box-shadow:0 0 50px rgba(0,0,0,.5),0 0 20px rgba(204,167,53,.15)!important}.card-accent-gold{border-left:4px solid #cca735!important}.card-accent-success{border-left:4px solid #198754!important}.card-accent-danger{border-left:4px solid #dc3545!important}.card-accent-info{border-left:4px solid #0dcaf0!important}.card-accent-bali-red{border-left:4px solid #c62828!important}.hero-subtitle-caps{letter-spacing:2px;font-size:.8rem;color:#b19130}.date-box-number,.text-primary-dark{color:var(--primary-color)}.ls-1{letter-spacing:1px}.date-box-number{font-size:1.4rem;line-height:1}.badge-rerainan,.date-box-month{font-size:.65rem}.badge-rerainan{background-color:rgba(204,167,53,.1);color:var(--secondary-color);border:1px solid rgba(204,167,53,.3)}.progress-premium{height:6px;width:80%;max-width:300px}/* Premium accordion (shared) */
.premium-accordion .accordion-button:not(.collapsed) {
    background-color: var(--primary-color) !important;
    color: #fff !important;
    box-shadow: none;
}
.premium-accordion .accordion-button:not(.collapsed) .text-gold {
    color: var(--secondary-color) !important;
}
.premium-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0, 0, 0, 0.125);
}
.premium-accordion .accordion-button::after {
    background-size: 1rem;
}

/* Mobile spacing — tighter rhythm, less wasted space */
@media (max-width: 767.98px) {
    .hero-section {
        padding: 4.5rem 0 1.25rem;
    }

    .hero-title {
        font-size: 1.5rem;
        line-height: 1.25;
        margin-bottom: 0.5rem;
    }

    .hero-subtitle {
        font-size: 0.875rem;
        margin-bottom: 0.75rem;
    }

    .hero-subtitle-caps {
        font-size: 0.68rem;
        letter-spacing: 1.5px;
        margin-bottom: 0.35rem !important;
    }

    .card-home-woton {
        padding: 1rem;
        margin-top: 0.75rem;
    }

    .card-home-woton h3 {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }

    .glass-card {
        padding: 0.875rem;
    }

    .features-section {
        padding: 2rem 0;
    }

    .footer {
        padding: 2rem 0 1rem;
    }

    .footer-bottom {
        margin-top: 1.25rem;
        padding-top: 0.75rem;
    }

    .footer-brand {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
    }

    .footer-text {
        margin-bottom: 1rem;
        font-size: 0.8rem;
    }

    .btn {
        padding: 0.65rem 1rem;
        font-size: 0.9rem;
    }

    .form-control,
    .form-select {
        padding: 0.5rem 0.5rem;
        font-size: 0.875rem;
    }

    .container {
        padding-left: max(0.75rem, env(safe-area-inset-left));
        padding-right: max(0.75rem, env(safe-area-inset-right));
    }

    main .py-4 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    main .py-5 {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
    }

    main .mb-5 {
        margin-bottom: 1.25rem !important;
    }

    main .mb-4 {
        margin-bottom: 0.875rem !important;
    }

    main .p-4 {
        padding: 0.875rem !important;
    }

    main .p-5 {
        padding: 1.125rem !important;
    }

    main .px-4 {
        padding-left: 0.875rem !important;
        padding-right: 0.875rem !important;
    }

    main .g-4 {
        --bs-gutter-y: 0.75rem;
        --bs-gutter-x: 0.75rem;
    }

    .card-body.p-4,
    .card-body.p-5 {
        padding: 0.875rem !important;
    }

    .section-title {
        margin-bottom: 1rem;
    }

    .section-title h2,
    .section-title h3 {
        font-size: 1.25rem;
    }

    .premium-accordion .accordion-button {
        padding: 0.7rem 0.875rem !important;
        font-size: 0.9rem;
    }

    .premium-accordion .accordion-body {
        padding: 0.75rem 0.875rem !important;
        font-size: 0.875rem;
        line-height: 1.65 !important;
    }

    .modal-body.py-5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}

/* ===== Premium Design System v2 ===== */

body .navbar-custom {
    background: rgba(4, 19, 41, 0.82) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(242, 202, 80, 0.12);
}

body .hero-section {
    background: linear-gradient(145deg, #020a16 0%, var(--primary-color) 35%, #0a2142 70%, #0d2847 100%);
    overflow: hidden;
    isolation: isolate;
}

.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 10% 20%, rgba(242, 202, 80, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 90% 80%, rgba(242, 202, 80, 0.06) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
    z-index: 0;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), transparent 88%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), transparent 88%);
}

body .hero-content {
    position: relative;
    z-index: 1;
}

body .glass-card {
    background: rgba(255, 255, 255, 0.88); 
    border: 1px solid rgba(204, 167, 53, 0.18);
    box-shadow: 0 4px 24px rgba(4, 19, 41, 0.06);
}

.card-premium {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(204, 167, 53, 0.15) !important;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(4, 19, 41, 0.06);
}

.card-premium .card-body {
    padding: 1.25rem;
}

.card-article {
    border-radius: 12px;
    overflow: hidden;
}

body .card-home-woton {
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
}

body .form-control,
body .form-select {
    border-radius: 10px;
}

.dropdown-menu-premium {
    border-radius: 12px !important;
    border: 1px solid rgba(204, 167, 53, 0.12) !important;
    box-shadow: 0 8px 32px rgba(4, 19, 41, 0.12) !important;
}

.offcanvas-premium {
    background-color: var(--primary-color) !important;
}

.section-heading {
    font-size: 1.5rem;
    color: var(--primary-color);
    font-weight: 800;
    margin: 0;
}

.section-link {
    color: var(--secondary-color);
    font-size: 0.9rem;
}

.article-meta {
    font-size: 0.8rem;
}

.article-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-color);
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.faq-section-title {
    color: var(--primary-color);
}

.faq-answer-text {
    text-align: justify;
    line-height: 1.7;
}

.sidebar-sticky {
    top: 100px;
}

.sidebar-heading {
    font-size: 1.2rem;
}

.sidebar-thumb {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
}

.sidebar-meta {
    font-size: 0.7rem;
}

.article-hero-img {
    max-height: 500px;
}

.card-glass-light {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.icon-circle-lg {
    width: 64px;
    height: 64px;
}

.batu-icon-lg {
    font-size: 2rem;
    line-height: 1;
}

.batu-thumb-sm {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 50%;
}

.batu-label-sm {
    font-size: 0.7rem;
    line-height: 1.2;
}

.form-text-sm {
    font-size: 0.75rem;
}

.text-justify-premium {
    text-align: justify;
    line-height: 1.8;
}

.navbar-nav .nav-dropdown-btn {
    border: 0;
    background: transparent;
    color: var(--text-light) !important;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.4rem 0.6rem;
    margin: 0 0.2rem;
}

.navbar-nav .nav-dropdown-btn:hover,
.navbar-nav .nav-dropdown-btn:focus,
.navbar-nav .nav-dropdown-btn.show {
    color: var(--secondary-color) !important;
    box-shadow: none;
}

.btn.section-link {
    color: var(--secondary-color);
    font-size: 0.9rem;
}

.btn.section-link:hover {
    color: var(--secondary-light);
}

/* Home page section color hierarchy */
.home-popular-section {
    background: linear-gradient(180deg, #fffdf7 0%, #f9f4e8 100%);
    border-top: 1px solid rgba(204, 167, 53, 0.12);
    border-bottom: 1px solid rgba(204, 167, 53, 0.12);
}

.home-popular-section .section-heading {
    color: #0a2142;
}

.home-popular-section .mobile-feat-card {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(204, 167, 53, 0.24);
}

.home-popular-section .mobile-feat-card .card-icon {
    background: rgba(4, 19, 41, 0.1);
    color: #0a2142;
    border: 1px solid rgba(4, 19, 41, 0.14);
}

.home-popular-section .mobile-feat-card:hover .card-icon {
    background: #0a2142;
    color: #f2ca50;
    border-color: #0a2142;
}

.home-popular-section .mobile-feat-card .card-title {
    color: #0a2142;
}

.home-popular-section .mobile-feat-card .card-text {
    color: #4f5d73;
}

.home-articles-section {
    background: #ffffff;
}

.home-articles-section .section-heading {
    color: #041329;
}

.home-articles-section .article-card {
    border: 1px solid rgba(4, 19, 41, 0.08);
    box-shadow: 0 6px 18px rgba(4, 19, 41, 0.05);
}

/* Improve small-text contrast against dark backgrounds */
body .footer-text,
body .footer-links a {
    color: rgba(255, 255, 255, 0.82);
}

body .footer-bottom {
    color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 768px) {
    .mobile-feat-card {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        grid-template-areas:
            "icon title"
            "icon desc";
        column-gap: 10px;
        row-gap: 2px;
        align-items: center;
        text-align: left !important;
        padding: 10px 12px !important;
    }

    .mobile-feat-icon {
        grid-area: icon;
        width: 44px !important;
        height: 44px !important;
        font-size: 1.3rem !important;
        margin: 0 !important;
    }

    .mobile-feat-title {
        grid-area: title;
        font-size: 1rem !important; 
        margin: 0 !important;
        font-weight: 700;
        white-space: normal;
    }

    .mobile-feat-card .card-text.d-none.d-lg-block {
        grid-area: desc;
        display: block !important;
        margin: 0 !important;
        font-size: 0.7rem;
        line-height: 1.3;
    }

    .section-heading {
        font-size: 1.25rem;
    }
}