:root{
    /* =============================
       THEME COLOR CONTROL
       Ganti warna website cukup dari sini
    ============================= */

    /* Background */
    --blue-bg:#1b0627;
    --blue-bg-2:#2c0735;
    --blue-card:#471135;

    /* Main Color */
    --blue-main:#da1eff;
    --blue-main-2:#da1eff;

    /* Text */
    --blue-text:#ffffff;
    --blue-soft:#ffffff;
    --blue-muted:#ffb0b0;

    /* Accent */
    --blue-accent:#cd61ff;
    --blue-accent-2:#b13bff;
    --blue-accent-3:#ff00ea;
    --blue-accent-soft:#df61ff;
    --blue-accent-orange:#f261ff;

    /* Border */
    --blue-border:rgba(229, 97, 255, 0.28);
    --blue-border-soft:rgba(255, 97, 255, 0.35);
    --blue-border-light:rgba(255, 255, 255, 0.1);
    --blue-border-lighter:rgba(255, 255, 255, 0.16);
    --blue-border-hover:rgba(205, 97, 255, 0.75);

    /* Glass / Overlay */
    --blue-glass:rgba(49, 11, 71, 0.72);
    --blue-glass-nav:rgba(40, 5, 44, 0.82);
    --blue-footer:rgba(41, 5, 44, 0.8);
    --blue-white-glass:rgba(255, 255, 255, 0.06);
    --blue-white-glass-2:rgba(255, 255, 255, 0.08);
    --blue-white-glass-3:rgba(255, 255, 255, 0.12);

    /* Effects */
    --blue-glow:rgba(203, 30, 255, 0.9);
    --blue-body-radial-left:rgba(203, 30, 255, 0.25);
    --blue-body-radial-right:rgba(247, 0, 255, 0.16);
    --blue-hero-gradient-1:rgba(210, 30, 255, 0.23);
    --blue-hero-gradient-2:rgba(153, 0, 255, 0.14);
    --blue-hero-pill-bg:rgba(218, 30, 255, 0.18);

    /* Loader */
    --blue-loader-1:#15041f;
    --blue-loader-2:#43084f;

    /* Bootstrap Button Primary */
    --blue-btn-primary-bg:var(--blue-main);
    --blue-btn-primary-border:var(--blue-main);
    --blue-btn-primary-hover-bg:#872dbb;
    --blue-btn-primary-hover-border:#912ab0;
    --blue-btn-primary-active-bg:#8a2ab0;
    --blue-btn-primary-active-border:#9028a5;
    --blue-btn-primary-disabled-bg:#d635dc;
    --blue-btn-primary-disabled-border:#ad35dc;
    --blue-btn-primary-focus-rgb:38,255,30;

    /* Bootstrap Button Outline */
    --blue-btn-outline-color:var(--blue-accent-2);
    --blue-btn-outline-border:var(--blue-accent-2);
    --blue-btn-outline-hover-bg:var(--blue-accent-2);
    --blue-btn-outline-hover-border:var(--blue-accent-2);
    --blue-btn-outline-active-bg:#bd00d6;
    --blue-btn-outline-active-border:#bd00d6;
    --blue-btn-outline-disabled-color:#fb8aff;
    --blue-btn-outline-focus-rgb:255,203,59;

    /* Badge Type */
    --blue-type-jackpot-1:var(--blue-main);
    --blue-type-jackpot-2:var(--blue-accent-3);
    --blue-type-event-1:#ac42c1;
    --blue-type-event-2:var(--blue-main);
    --blue-type-info-1:#8a41ff;
    --blue-type-info-2:#422baa;
    --blue-type-post:#5a1e8b;

    /* Other Blocks */
    --blue-date-card-bg:rgba(71, 57, 11, 0.7);
    --blue-post-text:#ffe1e1;
    --blue-post-link:#61ff61;
    --blue-power-bg-1:rgba(255,30,30,.20);
    --blue-power-bg-2:rgba(255,72,0,.10);
    --blue-power-border:rgba(213, 255, 97, 0.32);
    --blue-related-bg:rgba(71,11,11,.45);
    --blue-related-border:rgba(255,97,97,.18);
    --blue-slide-overlay-1:rgba(31,4,4,.1);
    --blue-slide-overlay-2:rgba(31,4,4,.92);
}

body{
    background:
        radial-gradient(circle at top left, var(--blue-body-radial-left), transparent 32%),
        radial-gradient(circle at top right, var(--blue-body-radial-right), transparent 26%),
        var(--blue-bg);
    color:var(--blue-text);
    min-height:100vh;
}

#page-loader{
    position:fixed;
    inset:0;
    background:linear-gradient(135deg,var(--blue-loader-1),var(--blue-loader-2));
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:99999;
    transition:.45s ease;
}

.btn-primary{
    --bs-btn-color:var(--blue-text);
    --bs-btn-bg:var(--blue-btn-primary-bg);
    --bs-btn-border-color:var(--blue-btn-primary-border);
    --bs-btn-hover-color:var(--blue-text);
    --bs-btn-hover-bg:var(--blue-btn-primary-hover-bg);
    --bs-btn-hover-border-color:var(--blue-btn-primary-hover-border);
    --bs-btn-focus-shadow-rgb:var(--blue-btn-primary-focus-rgb);
    --bs-btn-active-color:var(--blue-text);
    --bs-btn-active-bg:var(--blue-btn-primary-active-bg);
    --bs-btn-active-border-color:var(--blue-btn-primary-active-border);
    --bs-btn-active-shadow:inset 0 3px 5px rgba(0,0,0,.125);
    --bs-btn-disabled-color:var(--blue-text);
    --bs-btn-disabled-bg:var(--blue-btn-primary-disabled-bg);
    --bs-btn-disabled-border-color:var(--blue-btn-primary-disabled-border);
}

.btn-outline-primary{
    --bs-btn-color:var(--blue-btn-outline-color);
    --bs-btn-border-color:var(--blue-btn-outline-border);
    --bs-btn-hover-color:var(--blue-text);
    --bs-btn-hover-bg:var(--blue-btn-outline-hover-bg);
    --bs-btn-hover-border-color:var(--blue-btn-outline-hover-border);
    --bs-btn-focus-shadow-rgb:var(--blue-btn-outline-focus-rgb);
    --bs-btn-active-color:var(--blue-text);
    --bs-btn-active-bg:var(--blue-btn-outline-active-bg);
    --bs-btn-active-border-color:var(--blue-btn-outline-active-border);
    --bs-btn-active-shadow:inset 0 3px 5px rgba(0,0,0,.125);
    --bs-btn-disabled-color:var(--blue-btn-outline-disabled-color);
    --bs-btn-disabled-bg:transparent;
    --bs-btn-disabled-border-color:var(--blue-btn-outline-disabled-color);
    --bs-gradient:none;
}

#page-loader.loaded{
    opacity:0;
    visibility:hidden;
}

.text-bg-primary{
    color:var(--blue-text)!important;
    background-color:var(--blue-accent-2)!important;
}

.loader-card{
    background:var(--blue-white-glass-2);
    border:1px solid var(--blue-border-lighter);
    backdrop-filter:blur(18px);
    border-radius:24px;
    padding:32px;
    min-width:260px;
    text-align:center;
    display:flex;
    flex-direction:column;
    gap:12px;
    align-items:center;
}

.loader-card small,
.text-blue-soft{
    color:var(--blue-soft)!important;
}

.app-hidden{
    opacity:0;
    transform:translateY(12px);
}

.app-ready{
    opacity:1;
    transform:none;
    transition:.45s ease;
}

.glass-nav{
    background:var(--blue-glass-nav)!important;
    backdrop-filter:blur(18px);
    border-bottom:1px solid var(--blue-border);
}

.brand-dot{
    width:12px;
    height:12px;
    display:inline-block;
    border-radius:99px;
    background:linear-gradient(135deg,var(--blue-main),var(--blue-main-2));
    box-shadow:0 0 20px var(--blue-glow);
    margin-right:10px;
}

.hero-blue{
    background:
        linear-gradient(135deg, var(--blue-hero-gradient-1), transparent 55%),
        linear-gradient(45deg, var(--blue-hero-gradient-2), transparent 40%);
    border-bottom:1px solid var(--blue-border);
}

.hero-pill{
    display:inline-block;
    padding:8px 16px;
    border-radius:99px;
    color:var(--blue-text);
    background:var(--blue-hero-pill-bg);
    border:1px solid var(--blue-border-soft);
    font-weight:700;
}

.hero-panel,
.post-card,
.detail-card,
.stat-blue,
.date-card-modern,
.empty-modern{
    background:var(--blue-glass)!important;
    border:1px solid var(--blue-border)!important;
    backdrop-filter:blur(16px);
    border-radius:24px;
}

.hero-panel-top{
    height:44px;
    border-bottom:1px solid var(--blue-border);
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 18px;
}

.hero-panel-top span{
    width:11px;
    height:11px;
    background:var(--blue-main);
    display:block;
    border-radius:50%;
}

.hero-panel-top strong{
    color:var(--blue-main);
    font-size:13px;
}

.summary-line{
    display:flex;
    justify-content:space-between;
    border-bottom:1px solid rgba(255, 255, 255, 0.09);
    padding:13px 0;
}

.summary-line:last-child{border-bottom:0}
.summary-line b{color:var(--blue-accent-soft)}

.mt-n4{margin-top:-2rem}

.stat-blue{
    padding:22px;
    min-height:112px;
}

.stat-blue small{
    color:var(--blue-soft);
    display:block;
    margin-bottom:8px;
}

.stat-blue strong{
    font-size:22px;
    color:var(--blue-accent);
}

.section-heading span{
    color:var(--blue-main);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:12px;
}

.section-heading h1,
.section-heading h2{
    font-weight:800;
}

.post-card{
    color:var(--blue-text);
}

.thumb-wrap{
    height:100%;
    min-height:220px;
    display:block;
    position:relative;
    overflow:hidden;
}

.post-thumb{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.35s ease;
}

.post-card:hover .post-thumb{
    transform:scale(1.06);
}

.badge-type{
    position:absolute;
    top:14px;
    left:14px;
    padding:8px 12px;
    border-radius:99px;
    font-size:11px;
    letter-spacing:.04em;
}

.type-jackpot{
    background:linear-gradient(135deg,var(--blue-type-jackpot-1),var(--blue-type-jackpot-2))!important;
}

.type-event{
    background:linear-gradient(135deg,var(--blue-type-event-1),var(--blue-type-event-2))!important;
}

.type-info{
    background:linear-gradient(135deg,var(--blue-type-info-1),var(--blue-type-info-2))!important;
}

.type-post{
    background:var(--blue-type-post)!important;
}

.post-title-link{
    color:var(--blue-text);
    text-decoration:none;
}

.post-title-link:hover{
    color:var(--blue-accent);
}

.mini-box,
.detail-stat{
    background:var(--blue-white-glass);
    border:1px solid var(--blue-border-light);
    padding:14px;
    border-radius:18px;
}

.mini-box small,
.detail-stat small{
    display:block;
    color:var(--blue-soft);
    margin-bottom:4px;
}

.mini-box b,
.detail-stat b{
    color:var(--blue-accent-orange);
}

.date-card-modern{
    display:block;
    background:var(--blue-date-card-bg);
    padding:22px;
    color:var(--blue-text);
    text-decoration:none;
    transition:.25s ease;
}

.date-card-modern:hover{
    transform:translateY(-4px);
    border-color:var(--blue-border-hover)!important;
}

.date-card-modern strong{
    display:block;
    color:var(--blue-text);
}

.date-card-modern small{
    color:var(--blue-soft);
}

.detail-cover-wrap{
    position:relative;
    max-height:600px;
    overflow:hidden;
}

.detail-cover{
    width:100%;
    max-height:600px;
    object-fit:cover;
    display:block;
}

.detail-badge{
    top:22px;
    left:22px;
}

.post-text-box{
    background:rgba(255, 255, 255, 0.055);
    border:1px solid var(--blue-border-light);
    padding:24px;
    border-radius:20px;
    color:var(--blue-post-text);
    line-height:1.8;
}

.post-text-box a{
    word-break:break-word;
    color:var(--blue-post-link);
}

.empty-modern{
    padding:40px;
}

.footer-blue{
    background:var(--blue-footer);
    border-top:1px solid var(--blue-border);
}

.homepage-power-box{
    background:linear-gradient(135deg, var(--blue-power-bg-1), var(--blue-power-bg-2));
    border:1px solid var(--blue-power-border);
    border-radius:22px;
    padding:22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}

.homepage-power-box small{
    color:var(--blue-accent);
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:800;
}

.homepage-power-box h3{
    font-size:22px;
    margin:6px 0;
    color:var(--blue-text);
}

.homepage-power-box p{
    color:var(--blue-soft);
    margin:0;
}

.related-home-link{
    background:var(--blue-related-bg);
    border:1px solid var(--blue-related-border);
    border-radius:18px;
    padding:18px;
}

.site-logo{
    height:42px;
    width:auto;
    display:block;
}

.hero-slider-panel{
    overflow:hidden;
}

.hero-proof-slide{
    position:relative;
    display:block;
    min-height:430px;
    color:var(--blue-text);
    text-decoration:none;
    overflow:hidden;
}

.hero-proof-slide img{
    width:100%;
    height:430px;
    object-fit:cover;
    display:block;
    transition:.45s ease;
}

.hero-proof-slide:hover img{
    transform:scale(1.06);
}

.hero-proof-slide::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, var(--blue-slide-overlay-1), var(--blue-slide-overlay-2));
}

.hero-proof-overlay{
    position:absolute;
    z-index:2;
    left:0;
    right:0;
    bottom:0;
    padding:26px;
}

.hero-proof-overlay h3{
    font-size:25px;
    font-weight:800;
    margin-bottom:16px;
}

.hero-proof-meta{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.hero-proof-meta div{
    background:var(--blue-white-glass-3);
    border:1px solid var(--blue-border-lighter);
    backdrop-filter:blur(10px);
    border-radius:16px;
    padding:13px;
}

.hero-proof-meta small{
    display:block;
    color:var(--blue-muted);
    font-size:12px;
    margin-bottom:3px;
}

.hero-proof-meta b{
    color:var(--blue-accent);
    font-size:15px;
}

#jackpotHeroCarousel .carousel-control-prev,
#jackpotHeroCarousel .carousel-control-next{
    width:12%;
    opacity:.8;
}

#jackpotHeroCarousel .carousel-control-prev:hover,
#jackpotHeroCarousel .carousel-control-next:hover{
    opacity:1;
}

#jackpotHeroCarousel .carousel-indicators{
    margin-bottom:14px;
}

#jackpotHeroCarousel .carousel-indicators [data-bs-target]{
    width:9px;
    height:9px;
    border-radius:50%;
    border:0;
    background-color:var(--blue-accent);
    opacity:.45;
}

#jackpotHeroCarousel .carousel-indicators .active{
    opacity:1;
}

@media(max-width:768px){
    .hero-blue .display-4{
        font-size:2.2rem;
    }

    .thumb-wrap{
        height:230px;
    }

    .mt-n4{
        margin-top:1rem;
    }

    .site-logo{
        height:36px;
    }

    .homepage-power-box{
        flex-direction:column;
        align-items:flex-start;
    }

    .hero-proof-slide,
    .hero-proof-slide img{
        min-height:340px;
        height:340px;
    }

    .hero-proof-overlay h3{
        font-size:21px;
    }

    .hero-proof-meta{
        grid-template-columns:1fr;
    }
}