:root {
    --vip-gold: #f59e0b;
    --reg-green: #10b981;
    --danger: #ef4444;
    --bg-dark: #0f111a;
    --glass: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --blue-btn: #0078ff;
    --text-dim: #8e919e;
    --primary-gradient: linear-gradient(90deg, #3b82f6, #9333ea, #ec4899, #3b82f6);
    --popup-border: rgba(56, 189, 248, 0.3);
    --neon-blue: #38bdf8;
    --vip-goldd: #fbbf24;
    --vvip-cyan: #00f2fe;
    --vvip-blue: #4facfe;
    --vvip-glow: rgba(0, 242, 254, 0.4);
    --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    background: linear-gradient(135deg, #000000 0%, #02050f 25%, #0a2e3d 50%,#050a1d 75%, #000000 100%);
    background-size: 400% 400%;
    animation: deepLightFlow 18s ease infinite;
    background-attachment: fixed;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: white;
    min-height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
    position: relative;
}

@keyframes deepLightFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0.5px, transparent 0.5px),radial-gradient(circle, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
    background-size: 40px 40px, 80px 80px;
    z-index: -1;
    animation: starsTwinkle 4s infinite ease-in-out;
}

.blob-bg {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: 
        radial-gradient(circle at 80% 20%, rgba(0, 210, 255, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 20% 80%, rgba(26, 42, 108, 0.1) 0%, transparent 50%);
    z-index: -1;
    pointer-events: none;
    animation: blobBreathe 12s ease-in-out infinite alternate;
}

@keyframes blobBreathe {
    from { opacity: 0.3; transform: scale(1); }
    to { opacity: 0.6; transform: scale(1.1); }
}

.main-layout {
    display: flex;
    width: 95%;
    max-width: 1300px;
    height: 90vh;
    gap: 15px;
}

.sidebar-panel {
    width: 240px;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 20px;
    box-shadow: #000 0px 4px 8px;
    z-index: 2000 !important;
    display: flex;
    flex-direction: column;
    max-height: 90vh; 
    overflow: visible; 
}

.nav-menu {
    display: flex;
    flex-direction: column;
    
    /* Aktifkan scroll vertikal */
    overflow-y: auto;
    overflow-x: visible; /* Biarkan shadow keluar ke arah samping */
    
    /* Sembunyikan Scrollbar (Firefox) */
    scrollbar-width: none; 
    
    /* Tambahkan padding samping agar shadow nav-item punya ruang */
    padding: 10px; 
    margin: -10px; /* Offset kembali agar posisi tetap presisi */
}

/* Sembunyikan Scrollbar (Chrome, Safari, Edge) */
.nav-menu::-webkit-scrollbar {
    display: none;
}

.nav-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.nav-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

.dot-group {
    display: flex;
    gap: 8px;
    margin-bottom: 30px;
    flex-shrink: 0; /* Mencegah header mengecil saat di-scroll */
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.red {
    background: #ff5f56;
}

.yellow {
    background: #ffbd2e;
}

.green {
    background: #27c93f;
}

.nav-title {
    font-size: 11px;
    color: var(--text-dim);
    text-transform: uppercase;
    margin: 20px 0 10px 10px;
    letter-spacing: 1px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    border-radius: 50px;
    color: var(--text-dim);
    cursor: pointer;
    margin-bottom: 4px;
    transition: 0.2s;
    position: relative;
    z-index: 1;
}

[data-lucide="user"] { stroke: #3b82f6; }            /* Blue */
[data-lucide="home"] { stroke: #3b82f6; }            /* Blue */
[data-lucide="layout"] { stroke: #9333ea; }          /* Purple */
[data-lucide="flame"] { stroke: #fb7185; }       /* Emerald */
[data-lucide="book-open"] { stroke: #06b6d4; }       /* Cyan */
[data-lucide="gift"] { stroke: #06b6d4; }       /* Cyan */
[data-lucide="megaphone"] { stroke: #ec4899; }       /* Pink */
[data-lucide="contact"] { stroke: #f97316; }         /* Orange */
[data-lucide="briefcase"] { stroke: #a855f7; }       /* Violet */
[data-lucide="coins"] { stroke: #eab308; }           /* Yellow */
[data-lucide="bell"] { stroke: #f43f5e; }            /* Rose */
[data-lucide="server"] { stroke: #6366f1; }          /* Indigo */
[data-lucide="banknote"] { stroke: #14b8a6; }        /* Teal */
[data-lucide="message-circle"] { stroke: #22c55e; }  /* Green */
[data-lucide="send"] { stroke: #0ea5e9; }            /* Sky Blue */
[data-lucide="shield-check"] { stroke: #4ade80; }    /* Light Green */
[data-lucide="graduation-cap"] { stroke: #fb923c; }  /* Light Orange */
[data-lucide="layers"] { stroke: #8b5cf6; }          /* Deep Purple */
[data-lucide="trophy"] { stroke: #8b5cf6; }          /* Deep Purple */
[data-lucide="wrench"] { stroke: #94a3b8; }          /* Slate/Silver */
[data-lucide="newspaper"] { stroke: #d946ef; }       /* Fuchsia */
[data-lucide="search"] { stroke: #60a5fa; }          /* Soft Blue */
[data-lucide="x"] { stroke: #fff; }               /* White */
[data-lucide="key-round"] { stroke: #fbbf24; }       /* Amber */
[data-lucide="eye"] { stroke: #2dd4bf; }             /* Aquamarine */
[data-lucide="unlock"] { stroke: #fb7185; }          /* Soft Red */
[data-lucide="user-plus"] { stroke: #4f46e5; }       /* Royal Blue */
[data-lucide="contact-2"] { stroke: #f59e0b; }       /* Golden Orange */
[data-lucide="lock"] { stroke: #f87171; }            /* Coral */
[data-lucide="mail"] { stroke: #cbd5e1; }            /* Platinum */
[data-lucide="plus-circle"] { stroke: #34d399; }     /* Mint */
[data-lucide="eye-off"] { stroke: #6b7280; }         /* Muted Gray */
[data-lucide="log-out"] { stroke: #6b7280; }         /* Muted Gray */
[data-lucide="layout-template"] { stroke: #FBBF24; }         /* Yellow */
[data-lucide="smartphone"] { stroke: #3B82F6; }         /* Blue */
[data-lucide="camera"] { stroke: #EF4444; }         /* Red */
[data-lucide="code-2"] { stroke: #10B981; }         /* Green */
[data-lucide="cpu"] { stroke: #10B981; }         /* Green */

.nav-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    text-decoration: none;
    transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.6);
}

.nav-item i {
    width: 18px;
    height: 18px;
    display: inline-block;
    transition: all 0.3s ease;
    opacity: 0.5;
    vertical-align: middle;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
}

.nav-item:hover i {
    opacity: 1;
}

.nav-item.active {
    color: white !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: #000 0px 4px 8px;
}

.nav-item.active svg,
.nav-item.active i {
    opacity: 1 !important;
    animation: pulseIcon 2s ease-in-out infinite !important; 
}

@keyframes pulseIcon {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.announcement-box {
    display: flex;
    align-items: center;
    position: relative;
    border-radius: 8px;
    padding: 0 12px;
    height: 32px;
    overflow: hidden;
    box-shadow: #000 0px 4px 8px;
    z-index: 1;
}

.announcement-box::before {
    content: '';
    position: absolute;
    width: 150%;
    height: 500%;
    background: conic-gradient(transparent, #3b82f6, #9333ea, #ec4899, transparent 30%);
    animation: rotateBorder 4s linear infinite;
    z-index: -2;
    top: -200%;
    left: -25%;
}

.announcement-box::after {
    content: '';
    position: absolute;
    inset: 1px;
    background: linear-gradient(0deg, #0a2e3d, #02050f);
    border-radius: 7px;
    z-index: -1;
}

@keyframes rotateBorder {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.announcement-icon, .system-marquee-bar {
    position: relative;
    z-index: 2;
}

.announcement-icon {
    display: flex;
    align-items: center;
    color: #3b82f6;
    margin-right: 10px;
    opacity: 0.8;
}

.announcement-icon svg, 
.announcement-icon i {
    width: 14px !important;
    height: 14px !important;
}

.system-marquee-bar {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.marquee-inner {
    display: flex;
    width: max-content;
}

.marquee-content {
    display: flex;
    align-items: center;
    white-space: nowrap;
    animation: marqueeSmooth 35s linear infinite;
    will-change: transform;
}

.marquee-content span {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 11px;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.7);
    padding: 0 5px;
}

.welcome-text b {
    color: #fff;
    font-weight: 600;
    background: var(--primary-gradient);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientText 3s linear infinite;
}

@keyframes marqueeSmooth {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

@keyframes gradientText {
    to { background-position: 200% center; }
}

@keyframes blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.9); }
}

.announcement-box:hover .marquee-content {
    animation-play-state: paused;
}

.content-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: #000 0px 4px 8px;
}

.fixed-header-group {
    flex-shrink: 0;
    width: 100%;
}

.fixed-top-content {
    flex-shrink: 0;
    padding: 0 30px;
    z-index: 5;
}

.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 30px;
}

.header-icons {
    display: flex;
    gap: 20px;
    color: var(--text-dim);
    margin-left: 20px;
    flex-shrink: 0;
}

.header-icons i {
    width: 18px;
    height: 18px;
    cursor: pointer;
    transition: 0.3s;
}

.header-icons i:hover {
    color: white;
    transform: translateY(-2px);
}

.slider-wrapper {
    padding: 10px 30px 20px 30px;
}

.scrollable-area {
    flex: 1;
    overflow-y: auto;
    padding: 20px 30px;
    scrollbar-width: none;
}

.scrollable-area::-webkit-scrollbar {
    display: none;
}

.hero-slider {
    position: relative;
    width: 100%;
    height: 200px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: #000 0px 4px 8px;
}

.slide-track {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 1;
}

.slide-track.active {
    opacity: 1;
    z-index: 2;
}

.scrollable-content-area {
    flex-grow: 1;
    overflow-y: auto;
    padding: 25px 30px 100px 30px;
    scrollbar-width: none;
}

.scrollable-content-area::-webkit-scrollbar {
    display: none;
}

.scrollable-content-area::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.slide-track img {
    width: 100%;
    height: 100%;
    object-fit: inherit; 
    object-position: center;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    transform: translateZ(0); 
    backface-visibility: hidden;
    animation: slowZoom 10s infinite alternate;
}

@keyframes slowZoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .slide-track img {
        image-rendering: auto;
    }
}

.slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7), transparent);
    display: flex;
    align-items: center;
    padding: 30px;
}

.app-icon {
    width: 35px;
    height: 35px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-weight: bold;
    font-size: 12px;
}

.content-section {
    display: none;
}

.content-section.active {
    display: block;
    animation: fadeInUp 0.4s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
}

.category-tag.api-neon {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 4px 12px;
    background: #0f111a;
    color: #00f2ff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px;
    overflow: hidden;
    z-index: 1;
}

.category-tag.api-neon::before {
    content: '';
    position: absolute;
    inset: -200%;
    background: conic-gradient(transparent, transparent, transparent, #00f2ff);
    animation: rotateBorder 3s linear infinite;
    z-index: -2;
}

.category-tag.api-neon::after {
    content: '';
    position: absolute;
    inset: 1px;
    background: #0f111a;
    border-radius: 50px;
    z-index: -1;
}

.category-tag.api-neon i {
    width: 12px;
    height: 12px;
}

.slide-title {
    font-size: 22px;
    font-weight: 800;
    color: white;
    margin: 2px 0;
    letter-spacing: -0.5px;
}

.slide-description {
    font-size: 12px;
    color: #fff;
    max-width: 320px;
    line-height: 1.4;
}

.date-info {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    color: #fff;
    font-size: 11px;
}

.date-info i {
    width: 12px;
    height: 12px;
    color: #ec4899;
}

@keyframes rotateBorder {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.neon-title {
    font-size: 18px;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(to right, #fbbf24, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.lead-text {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
    text-align: -webkit-auto; /*gunakan justify untuk menjadi seperti awal*/
    font-size: 14px;
    margin-bottom: 15px;
}

.lead-text strong {
    color: #fff;
    font-weight: 600;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.service-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 15px;
    gap: 15px;
    transition: all 0.3s ease;
    box-shadow: #000 0px 4px 8px;
}

.service-card:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.2);
}

.service-icon-wrapper {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
}

.service-icon-wrapper svg {
    width: 100%;
    height: 100%;
}

.service-icon-wrapper i {
    width: 40px;  /* Sesuaikan ukuran */
    height: 40px;
    stroke-width: 2px;
}

.icon-yellow { stroke: #FBBF24; }
.icon-blue   { stroke: #3B82F6; }
.icon-red    { stroke: #EF4444; }
.icon-green  { stroke: #10B981; }

.service-details h3 {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}

.service-details p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    line-height: 1.4;
    text-align: left;
}

.content.page {
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px); /* Efek muncul dari bawah */
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.content.page.active {
    height: auto;
    opacity: 1;
    pointer-events: auto;
    overflow: visible;
    transform: translateY(0);
}

@keyframes colorShift {
    0%, 100% { color: #fbbf24; background-color: #fbbf24; border-color: #fbbf24; box-shadow: 0 0 10px rgba(251, 191, 36, 0.5); }
    33% { color: #ec4899; background-color: #ec4899; border-color: #ec4899; box-shadow: 0 0 10px rgba(236, 72, 153, 0.5); }
    66% { color: #00f2ff; background-color: #00f2ff; border-color: #00f2ff; box-shadow: 0 0 10px rgba(0, 242, 255, 0.5); }
}

@keyframes lineShift {
    0%, 100% { border-color: rgba(251, 191, 36, 0.2); }
    33% { border-color: rgba(236, 72, 153, 0.2); }
    66% { border-color: rgba(0, 242, 255, 0.2); }
}

.resume-block { margin-bottom: 25px; }
.block-header { 
    display: flex; align-items: center; gap: 8px; margin-bottom: 15px; 
}
.block-header i { 
    width: 18px; height: 18px; 
    animation: colorShift 6s infinite alternate;
    background: none !important; -webkit-background-clip: initial;
}
.resume-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #fff; }

.timeline {
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    margin-left: 10px;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    animation: lineShift 6s infinite alternate;
}

.timeline-item { position: relative; }

.timeline-dot {
    position: absolute;
    left: -26px;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    z-index: 2;
    animation: colorShift 6s infinite alternate;
}

.resume-block .card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 12px;
    box-shadow: #000 0px 4px 8px;
    transition: 0.3s;
}

.resume-block .card h3 { font-size: 13px; color: #fff; margin-bottom: 4px; }
.time-tag {
    display: inline-block;
    font-size: 9px;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    animation: colorShift 6s infinite alternate;
    -webkit-background-clip: initial;
    color: #fff !important;
}

.company { font-size: 11px; font-weight: 600; margin-bottom: 8px; opacity: 0.8; }

.resume-list li {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 4px;
    list-style: none;
}

.skill-item {
    margin-bottom: 12px;
}

.skill-info {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #fff;
}

.skill-bar {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.skill-bar-fill {
    height: 100%;
    width: 0;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    transition: width 1.5s cubic-bezier(0.1, 0.5, 0.5, 1);
    animation: colorShift 6s infinite alternate;
}

.skill-bar-fill::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: cahayaJalan 2s infinite;
}

.skill-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
    box-shadow: #000 0px 4px 8px;
}

@keyframes progressMaju {
    from { width: 0; }
}

@keyframes cahayaJalan {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 10px;
}

.tool-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(255, 255, 255, 0.02);
    box-shadow: #000 0px 4px 8px;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    padding: 10px 5px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    animation: lineShift 6s infinite alternate; 
    transition: transform 0.3s ease, background 0.3s ease;
    cursor: default;
}

.tool-tag:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.gradient-title {
    background: linear-gradient(90deg, #fff, #00d2ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

.blog-controls-wrapper { display: flex; flex-direction: column; gap: 15px; margin-bottom: 25px; }
.tab-switcher { 
    display: flex; 
    background: var(--glass); 
    border: 1px solid var(--glass-border); 
    padding: 5px; 
    border-radius: 12px; 
    position: relative; 
    width: fit-content; 
    box-shadow: #000 0px 4px 8px;
}
.tab-btn { 
    background: none; border: none; color: var(--text-dim); 
    padding: 10px 20px; cursor: pointer; z-index: 2; 
    font-size: 13px; display: flex; align-items: center; gap: 8px; 
}
.tab-btn.active { color: white; }
.tab-indicator { 
    position: absolute; height: calc(100% - 10px); 
    width: calc(50% - 5px); background: #00d2ff; 
    left: 5px; top: 5px; border-radius: 8px; 
    transition: 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28); z-index: 1; 
}

.blog-search { 
    background: var(--glass); border: 1px solid var(--glass-border); 
    border-radius: 12px; padding: 12px 15px; display: flex; 
    align-items: center; gap: 10px;
    box-shadow: #000 0px 4px 8px;
}
.blog-search input { background: none; border: none; color: white; width: 100%; outline: none; }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }

.blog-card {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: 0.3s ease;
    box-shadow: #000 0px 4px 8px;
}
.blog-card:hover { 
    transform: translateY(-5px);
    border-color: #00b8ff4a;
    box-shadow: #000 0px 4px 8px;
}

.blog-thumb { position: relative; height: 140px; }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-category { 
    position: absolute; top: 10px; right: 10px; 
    background: #00d2ff; color: #000; padding: 3px 8px; 
    border-radius: 6px; font-size: 9px; font-weight: 700; 
    box-shadow: #000 0px 4px 8px;
}
.blog-info { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; }
.blog-date { font-size: 10px; color: var(--text-dim); }
.description { font-size: 12px; color: var(--text-dim); margin-top: 5px; }

.tab-pane { display: none; }
.tab-pane.active { display: block; animation: fadeIn 0.4s ease; }
.pane-header { display: flex; align-items: center; gap: 12px; margin: 10px 0 25px 5px; }
.pane-accent { width: 4px; height: 18px; background: #00d2ff; border-radius: 10px; box-shadow: #000 0px 4px 8px; }
.blog-subtitle { font-size: 13px; color: var(--text-dim); margin: 0; }
.blog-subtitle .highlight { color: #fff; font-weight: 600; }

.blog-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,0.85);
    backdrop-filter: blur(10px); display: none; z-index: 99999;
    justify-content: center; align-items: center; padding: 20px;
}
.modal-content {
    background: #12141c47; border: 1px solid var(--glass-border);
    width: 100%; max-width: 500px; border-radius: 20px;
    padding: 25px; display: flex; flex-direction: column;
    box-shadow: #000 0px 4px 8px;
}

.modal-body-scroll {
    overflow-y: auto;
    max-height: 45vh;
    margin: 15px 0;
    padding-right: 5px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.modal-body-scroll::-webkit-scrollbar {
    display: none;
}

.modal-desc-full {
    font-size: 14px;
    color: #d1d1d1;
    line-height: 1.8;
    display: block;
    white-space: pre-wrap !important; 
    text-align: left;
    word-wrap: break-word;
}

.modal-divider { height: 1px; background: var(--glass-border); margin: 15px 0; }
.modal-close-btn { 
    background: #ff4b4b; color: white; border: none; width: 100%; 
    padding: 12px; border-radius: 10px; font-weight: 700; cursor: pointer;
    box-shadow: #000 0px 4px 8px;
}

.btn-selengkapnya, .project-link {
    background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border);
    color: white; padding: 10px; border-radius: 10px; font-size: 11px;
    cursor: pointer; margin-top: auto; text-align: center; text-decoration: none; width: 100%;
}
.btn-selengkapnya:hover { background: #00d2ff; color: #000; }

.dot-group { display: flex; gap: 6px; }
.dot { width: 10px; height: 10px; border-radius: 50%;  animation: dotBounce 2s infinite ease-in-out; }
.red { background: #ff5f56; cursor: pointer; } .yellow { background: #ffbd2e; } .green { background: #27c93f; }
.modal-badge { background: #00d2ff; color: #000; font-size: 10px; padding: 3px 10px; border-radius: 4px; font-weight: bold;}

.dot.red { animation-delay: 0s; }
.dot.yellow { animation-delay: 0.2s; }
.dot.green { animation-delay: 0.4s; }

.dot-group:hover .dot {
    animation-play-state: paused;
}

@keyframes dotBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px); /* Melompat ke atas sedikit */
        filter: brightness(1.2);      /* Sedikit lebih terang saat di atas */
    }
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    
.card-buttons {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.card-buttons .btn-selengkapnya, 
.card-buttons .project-link {
    flex: 1;
    padding: 10px 5px;
    font-size: 11px;
    text-align: center;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: #000 0px 4px 8px;
}


.modal-body-scroll {
    overflow-y: auto;
    max-height: 45vh;
    scrollbar-width: none;
}
.modal-body-scroll::-webkit-scrollbar {
    display: none;
}

.modal-desc-full {
    white-space: pre-wrap !important; 
}

.ripple-effect {
    position: fixed;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 75%);
    pointer-events: none;
    transform: scale(0);
    animation: waterRipple 0.6s ease-out forwards;
    z-index: 10; 
}

.splash-dot {
    position: fixed;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9; 
    animation: splashOut 0.5s ease-out forwards;
}

@keyframes waterRipple {
    to {
        transform: scale(3.5);
        opacity: 0;
    }
}

@keyframes splashOut {
    to {
        transform: translate(var(--dx), var(--dy)) scale(0);
        opacity: 0;
    }
}

.contact-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 40px;
    align-items: stretch;
}

.contact-wrap .card {
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 30px;
    box-shadow: #000 0px 4px 8px;
    display: flex;
    flex-direction: column;
}

.contact-map {
    display: flex;
    flex-direction: column;
}

.map-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: white;
    font-size: 1.2rem;
}

.map-wrap {
    width: 100%;
    height: 100%;
    min-height: 400px; 
    border-radius: 15px;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.map-wrap iframe {
    width: 100%;
    height: 100%;
    border: none;
    filter: grayscale(1) invert(0.9) contrast(1.2);
}

.beautiful-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.beautiful-form p {
    margin: 5px 0;
    color: rgba(255, 255, 255, 0.6) !important;
}

.input-wrap input:focus ~ .focus-border,
.input-wrap textarea:focus ~ .focus-border {
    width: 100%;
}

.map-wrap {
    width: 100%;
    height: 100%;
    min-height: 400px; 
    border-radius: 15px;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.map-wrap iframe {
    width: 100%;
    height: 100%;
    border: none;
    filter: grayscale(1) invert(0.9) contrast(1.2);
}

.input-wrap {
    position: relative;
    width: 100%;
}

.input-wrap input, 
.input-wrap textarea {
    width: 100%;
    padding: 15px 15px 15px 45px;
    background: rgba(255, 255, 255, 0.05) !important;
    border: none;
    border-radius: 12px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1rem;
    transition: 0.3s;
    box-shadow: #000 0px 4px 8px;
}

.input-wrap textarea {
    min-height: 120px;
    resize: none;
}

.input-wrap input:focus, 
.input-wrap textarea:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    border-bottom-color: #3B82F6;
    outline: none;
}

.input-icon {
    position: absolute;
    left: 15px;
    top: 15px;
    width: 20px;
    z-index: 2;
}

.input-wrap label {
    position: absolute;
    left: 45px;
    top: 15px;
    color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
    transition: 0.3s ease all;
}

.input-wrap input:focus ~ label,
.input-wrap input:valid ~ label,
.input-wrap textarea:focus ~ label,
.input-wrap textarea:valid ~ label {
    top: -20px;
    left: 5px;
    font-size: 0.8rem;
    color: #3B82F6;
}

.send-btn {
    background: linear-gradient(135deg, #3B82F6, #10B981);
    color: white;
    border: none;
    padding: 16px;
    border-radius: 12px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: 0.3s;
    margin-top: 10px;
    box-shadow: #000 0px 4px 8px;
}

.send-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.lead {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
    margin-bottom: 40px;
    max-width: 700px;
    font-weight: 400;
    letter-spacing: 0.2px;
    border-left: none;
    padding-left: 0;
}

/*FORM REGIST*/
.glass-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    z-index: 99999; display: none; justify-content: center; align-items: center; padding: 15px;
}
.glass-modal-overlay.active { display: flex; }

.glass-modal-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    width: 100%;
    max-width: 380px;
    padding: 25px;
    position: relative;
    box-shadow: #000 0px 4px 8px;
    transform: translateY(15px);
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
.glass-modal-overlay.active .glass-modal-card { transform: translateY(0); }

/* --- ELEMENTS --- */
.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: red;
    border-radius: 50px;
    color: #fff;
    cursor: pointer;
    z-index: 10;
}

.modal-close svg { width: 20px; height: 20px; }

.icon-box-modal {
    width: 52px; height: 52px; background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-radius: 14px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; color: white; box-shadow: #000 0px 4px 8px;
}
.icon-box-modal svg { width: 26px; height: 26px; }

.neon-text { color: #fff; font-size: 20px; font-weight: 800; text-align: center; letter-spacing: 1px; margin-bottom: 4px; }
.header-desc { color: #94a3b8; font-size: 11px; text-align: center; margin-bottom: 12px; line-height: 1.4; }

.status-badge-modal {
    display: flex; align-items: center; justify-content: center;
    background: rgba(59, 130, 246, 0.1); color: #3b82f6; font-size: 9px; padding: 4px 12px;
    border-radius: 20px; border: 1px solid rgba(59, 130, 246, 0.2); width: fit-content; margin: 0 auto 10px; box-shadow: #000 0px 4px 8px;
}

.modal-body {
    overflow-y: auto;
    padding-right: 5px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.modal-body::-webkit-scrollbar {
    width: 4px;
}
.modal-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}
.modal-body::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.5); /* Warna hijau emerald sesuai tema */
    border-radius: 10px;
}

.auth-content { 
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.auth-content.active { display: block; opacity: 1; }

.input-group-modal { position: relative; margin-bottom: 12px; }
.input-group-modal > svg {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: #3b82f6; pointer-events: none;
}
.modal-form input, .modal-form select {
    width: 100%; background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 45px 12px 42px; border-radius: 12px;
    color: #fff; font-size: 13px; outline: none; transition: 0.3s;
    box-shadow: #000 0px 4px 8px;
}

.modal-form select:hover {
    color: #000;
}

.modal-form input:focus { border-color: #3b82f6; background: rgba(255, 255, 255, 0.08); }

.toggle-pass {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    cursor: pointer; opacity: 0.5; transition: 0.2s;
}
.toggle-pass:hover { opacity: 1; }
.toggle-pass svg { width: 16px; height: 16px; color: #fff; }

.input-label-modal { display: block; font-size: 10px; color: #64748b; margin: 0 0 6px 4px; font-weight: 700; }

.submit-glass {
    width: 100%; padding: 13px; border-radius: 12px; border: none;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #fff; font-weight: 700; font-size: 13px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px;
    box-shadow: #000 0px 4px 8px;
}
.submit-glass svg { width: 16px; height: 16px; }

.switch-text { color: #94a3b8; font-size: 12px; text-align: center; margin-top: 15px; }
.switch-text a { color: #3b82f6; text-decoration: none; font-weight: 700; }

.dotdot { height: 5px; width: 5px; background: #3b82f6; border-radius: 50%; margin-right: 7px; }
.pulse { animation: pulse-blue 2s infinite; }
@keyframes pulse-blue {
    0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

.input-prefix {
    position: absolute;
    left: 42px;
    top: 50%;
    transform: translateY(-50%);
    color: #3b82f6;
    font-size: 13px;
    font-weight: 700;
    pointer-events: none;
    z-index: 5;
}

#wa_input { padding-left: 65px !important; }
#tg_input { padding-left: 55px !important; }

#otp-fields {
    animation: fadeIn 0.5s ease;
}

#login-otp-fields {
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.swal2-container {
    z-index: 1000000 !important;
}

/* Styling input OTP agar besar di tengah */
#otp_code {
    text-align: center;
    font-size: 1.5rem;
    letter-spacing: 10px;
    font-weight: bold;
    color: #fbbf24 !important;
}

#login_otp_code {
    text-align: center;
    font-size: 1.5rem;
    letter-spacing: 10px;
    font-weight: bold;
    color: #fbbf24 !important;
}

/* Animasi Pulse Memproses */
.dot.pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    margin-right: 5px;
    animation: pulse 1s infinite;
}
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-alert-box {
    width: 100%;
    box-sizing: border-box;
}

.user-profile-floating {
    margin-top: auto;
    padding: 15px 0;
    width: 100%;
    position: relative;
}

.profile-content {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.08);
    padding: 12px 15px;
    border-radius: 16px;
    transition: all 0.3s ease;
    box-shadow: #000 0px 4px 8px;
}

.user-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #10b981;
}

.online-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background: #10b981;
    border-radius: 50%;
    border: 2px solid #161b22;
    box-shadow: 0 0 5px rgba(16, 185, 129, 0.5);
}

.user-details {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.u-name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.u-status {
    font-size: 10px;
    color: #10b981;
    font-weight: 600;
    text-transform: uppercase;
}

@keyframes premiumFadeUp {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes premiumPulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* 2. Container Modal Utama */
.premium-glass-popup {
    width: 300px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    box-shadow: #000 0px 4px 8px !important; /* Shadow wajib */
    padding: 15px !important;
    background: transparent !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    
    /* Memanggil Animasi */
    animation: premiumFadeUp 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

/* 3. Modal Saat Loading Spinner */
.premium-glass-popup-loading {
    width: 280px !important;
    border-radius: 15px !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    box-shadow: #000 0px 4px 8px !important;
    animation: premiumPulse 2s infinite; /* Efek berdenyut lembut */
}

/* 4. Text & Title Styling */
.premium-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: -0.5px;
}

.premium-text {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    line-height: 1.5;
}

/* 5. Icon & Spinner Adjustment */
.swal2-icon {
    transform: scale(0.7) !important;
    border-width: 2px !important;
}

.swal2-loader {
    border-color: #10b981 transparent #10b981 transparent !important;
    border-width: 3px !important;
}

/* 6. Button Styling Premium */
.premium-btn-confirm {
    padding: 10px 24px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.premium-btn-confirm:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.premium-btn-cancel {
    padding: 10px 24px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
    color: #fff !important;
    background: #F44336 !important;
    transition: all 0.3s ease !important;
}

.premium-btn-cancel:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* Memberi jarak pada tombol */
.swal2-actions {
    gap: 8px !important;
    margin-top: 20px !important;
}

/* Container Utama Konfirmasi */
#projectpaymentConfirm {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: #000 0px 4px 8px; /* Shadow wajib Anda */
    position: relative;
    overflow: hidden;
}

/* Judul Neon */
.neon {
    font-size: 16px;
    color: #10b981;
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
    text-align: center;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Countdown Box */
.countdown-box {
    background: rgba(16, 185, 129, 0.1);
    border: 1px dashed #10b981;
    color: #fff;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    font-size: 13px;
    margin-bottom: 20px;
}

#projectCountdown {
    font-weight: bold;
    color: #10b981;
    font-family: 'Courier New', Courier, monospace;
}

/* Row Detail Pembayaran */
.pay-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.pay-row span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}

.pay-row strong {
    color: #fff;
    font-size: 13px;
}

#ProjectTotal {
    color: #10b981;
    font-size: 16px;
}

/* Box QRIS & Rekening */
.rekening-box, .qris-box {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 15px;
    margin-top: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.qris-img {
    width: 100%;
    max-width: 180px;
    display: block;
    margin: 0 auto 15px;
    border-radius: 8px;
    filter: brightness(0.9);
}

.button-container {
    display: flex;
    justify-content: center; /* Menengahkan secara horizontal */
    width: 100%;
}

.neon-btn-small {
    background: transparent;
    border: 1px solid #10b981;
    color: #10b981;
    padding: 6px 15px;
    border-radius: 8px;
    font-size: 11px;
    cursor: pointer;
    transition: 0.3s;
    display: inline-block;
    text-decoration: none;
    /* Hapus margin-left: 50px; karena akan merusak posisi tengah */
}

.neon-btn-small:hover {
    background: #10b981;
    color: #000;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
}

/* Animasi Slide */
.animate-slide-down {
    animation: slideDown 0.5s ease forwards;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.expired-note {
    font-size: 10px;
    color: #ff4d4d;
    text-align: center;
    margin-top: 15px;
    font-style: italic;
}

/* Membuat Form bisa di-scroll agar tidak tabrak atas-bawah */
#formproject {
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 10px;
}

/* Custom Scrollbar */
#formproject::-webkit-scrollbar {
    width: 4px;
}
#formproject::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.5);
    border-radius: 10px;
}

#dynamic-keterangan-container {
    display: flex;
    flex-wrap: nowrap; /* Mencegah baris baru, paksa sejajar samping */
    gap: 12px;
    overflow-x: auto;
    width: 100%;
    padding-bottom: 5px;
    scrollbar-width: thin; /* Untuk Firefox */
    scrollbar-color: #10b981 transparent;
}

#dynamic-keterangan-container::-webkit-scrollbar {
    height: 4px;
}
#dynamic-keterangan-container::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.5);
    border-radius: 10px;
}

/* Memastikan input di dalam container tetap lebar yang pas */
#dynamic-keterangan-container .input-group-modal {
    flex: 1 1 100%; /* Default: Full width jika cuma satu */
    min-width: 100%; 
    transition: all 0.3s ease;
}

#dynamic-keterangan-container.multi-columns .input-group-modal {
    flex: 0 0 250px; /* Ukuran tetap 250px per kolom agar bisa di-scroll */
    min-width: 250px;
}

/* Payment Confirm Box Premium */
#projectpaymentConfirm {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 20px;
    margin: 15px 0;
    box-shadow: #000 0px 4px 8px !important;
}

.countdown-box {
    background: rgba(255, 77, 77, 0.1);
    border: 1px dashed #ff4d4d;
    padding: 8px;
    border-radius: 12px;
    text-align: center;
    font-size: 13px;
    margin-bottom: 15px;
    color: #fff;
}

#projectCountdown.expired {
    color: #ff4d4d;
    font-weight: bold;
}

#alert-place-addproject {
    margin-bottom: 15px;
}

.alert-premium {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border-radius: 12px;
    font-size: 12px;
    color: #fff;
    backdrop-filter: blur(10px);
    box-shadow: #000 0px 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.alert-premium.success {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
}

.alert-premium.error {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
}

.alert-premium i {
    width: 18px;
    height: 18px;
}

#projectModal, #authModal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    display: none; /* Modal tidak ada di layar sama sekali saat off */
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#projectModal.active, #authModal.active {
    display: flex; /* Aktifkan flex saat class active ada */
    opacity: 1;
}

@keyframes glassShine {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.ds-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    z-index: 99999;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.ds-modal-glass {
    width: 100%; max-width: 500px; max-height: 90vh; 
    border-radius: 30px; border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex; flex-direction: column; box-shadow: 0 40px 80px rgba(0,0,0,0.9);
}

.ds-modal-header { 
    padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; 
    border-bottom: 1px solid rgba(255,255,255,0.05); flex-shrink: 0;
}

.ds-close-btn { 
    width: 32px; height: 32px; border-radius: 50%; border: none; 
    background: rgba(255,255,255,0.05); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: 0.3s;
    box-shadow: #000 0px 4px 8px;
}

.ds-static-section { flex-shrink: 0; }
.ds-profile-area { padding: 15px 20px; }
.ds-profile-mini { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }

.ds-avatar-small {
    width: 40px; height: 40px; border-radius: 10px; position: relative;
    display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 18px;
}

.ds-data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.ds-data-item { 
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: #000 0px 4px 8px;
}

.ds-vip-theme .ds-avatar-small { border: 2px solid var(--vip-gold); color: var(--vip-gold); background: rgba(245,158,11,0.15); box-shadow: 0 0 15px rgba(245,158,11,0.3); }
.ds-vvip-theme .ds-avatar-small { border: 2px solid var(--vvip-cyan); color: var(--vvip-cyan); background: rgba(0, 242, 254, 0.15); box-shadow: 0 0 15px var(--vvip-glow), inset 0 0 10px var(--vvip-glow); }
.ds-reg-theme .ds-avatar-small { border: 2px solid var(--reg-green); color: var(--reg-green); background: rgba(16,185,129,0.15); }

.ds-vip-theme .ds-data-item, 
.ds-vip-theme .ds-btn {
    background-size: 200% 100%;
    animation: glassShine 4s linear infinite;
    box-shadow: #000 0px 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ds-vvip-theme .ds-data-item, 
.ds-vvip-theme .ds-btn {
    background-size: 200% 100%;
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.1) 0%, rgba(79, 172, 254, 0.05) 100%);
    animation: glassShineVVIP 3s linear infinite; /* Animasi sedikit lebih cepat agar terlihat dinamis */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 5px rgba(0, 242, 254, 0.2);
    border: 1px solid rgba(0, 242, 254, 0.3) !important;
    position: relative;
    overflow: hidden;
}

.vip-gold {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.1) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(245, 158, 11, 0.1) 100%);
}

/* Variasi Warna: BLUE */
.vip-blue {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.1) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(59, 130, 246, 0.1) 100%);
}

/* Variasi Warna: ORANGE */
.vip-orange {
    background: linear-gradient(90deg, rgba(243, 114, 44, 0.1) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(243, 114, 44, 0.1) 100%);
}

/* Variasi Warna: GREEN */
.vip-green {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.1) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(16, 185, 129, 0.1) 100%);
}

.ds-data-item label { display: block; font-size: 8px; color: #64748b; font-weight: 800; text-transform: uppercase; margin-bottom: 2px; }
.ds-data-item span { color: #fff; font-size: 11px; font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ds-action-row { display: flex; gap: 8px; padding: 0 20px 15px; }
.ds-btn {
    flex: 1; padding: 8px; border-radius: 10px; border: none; font-size: 10px;
    font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-edit { background: rgba(59, 130, 246, 0.1); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.2); box-shadow: #000 0px 4px 8px; }

.ds-vip-theme .btn-edit {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.1) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(59, 130, 246, 0.1) 100%);
    color: #3b82f6;
    box-shadow: #000 0px 4px 8px;
    animation: glassShine 4s linear infinite;
    background-size: 200% 100%;
}

.ds-vvip-theme .btn-edit {
    background: linear-gradient(90deg, rgba(0, 242, 254, 0.1) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(0, 242, 254, 0.1) 100%);
    color: var(--vvip-cyan);
    border: 1px solid rgba(0, 242, 254, 0.4);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), 0 0 8px rgba(0, 242, 254, 0.2);
    animation: glassShineVVIP 3s linear infinite;
    background-size: 200% 100%;
    font-weight: 700;
    transition: all 0.3s ease;
}

.ds-vip-theme .btn-logout {
    background: linear-gradient(90deg, rgba(243, 114, 44, 0.1) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(243, 114, 44, 0.1) 100%);
    animation: glassShine 4s linear infinite;
    background-size: 200% 100%;
    color: var(--danger);
    box-shadow: #000 0px 4px 8px;
}

.ds-vvip-theme .btn-logout {
    background: linear-gradient(90deg, 
        rgba(239, 68, 68, 0.1) 0%, 
        rgba(255, 255, 255, 0.25) 50%, 
        rgba(239, 68, 68, 0.1) 100%
    );
    animation: glassShineVVIP 3s linear infinite;
    background-size: 200% 100%;
    color: #ff4d4d; /* Merah yang lebih terang/neon */
    border: 1px solid rgba(239, 68, 68, 0.4);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), 0 0 8px rgba(239, 68, 68, 0.2);
    font-weight: 700;
    transition: all 0.3s ease;
}

.btn-logout { background: rgba(239, 68, 68, 0.1); color: var(--danger); border: 1px solid rgba(239, 68, 68, 0.2); box-shadow: #000 0px 4px 8px; }

@keyframes glassShineVVIP {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

#editProfilePanel { max-height: 0; opacity: 0; overflow: hidden; transition: all 0.4s ease; }
#editProfilePanel.active {
    max-height: 800px; opacity: 1; margin: 0 20px 15px; padding: 15px;
    background: rgba(255,255,255,0.02); border-radius: 15px; border: 1px solid rgba(255,255,255,0.1);
    box-shadow: #000 0px 4px 8px;
}

.ds-history-container { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ds-search-area { padding: 10px 20px; }
.ds-search-box { 
    box-shadow: #000 0px 4px 8px; border-radius: 10px; padding: 8px 12px; 
    display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,0.1);
}
.ds-search-box input { background: none; border: none; color: #fff; font-size: 11px; width: 100%; outline: none; }

.ds-table-scroll { flex: 1; overflow-y: auto; padding: 0 20px 10px; }
.ds-table-scroll::-webkit-scrollbar { width: 0px; }

.ds-table { width: 100%; min-width: 400px; border-collapse: collapse; }
.ds-table th {
    position: sticky; top: 0; z-index: 5;
    padding: 10px; font-size: 9px; color: #64748b; text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Ukuran font tabel diperkecil agar tidak terlalu besar */
.ds-row-item td { padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.02); font-size: 10px; }

.ds-modal-footer {
    padding: 10px; text-align: center; background: rgba(0,0,0,0.3); 
    font-size: 9px; color: #64748b; flex-shrink: 0;
}

.ds-input-group { margin-bottom: 10px; box-shadow: #000 0px 4px 8px; }
.ds-input-group label { display: block; font-size: 9px; color: #64748b; margin-bottom: 4px; font-weight: 700; }
.ds-input-group input { 
    width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    padding: 8px; border-radius: 8px; color: #fff; font-size: 11px; outline: none;
}

.popup-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    padding: 15px;
}

.popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

.popup-box {
    position: relative;
    width: 100%;
    max-width: 850px;
    border-radius: 20px;
    border: 1px solid var(--popup-border);
    overflow: hidden;
    box-shadow: #000 0px 4px 8px;
    transform: scale(0.9) translateY(30px);
    transition: var(--transition);
}

.popup-overlay.active .popup-box {
    transform: scale(1) translateY(0);
}

.popup-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* Grid 2 Kolom */
}

.popup-close {
    position: absolute;
    top: 15px; right: 15px;
    width: 30px; height: 30px;
    background: rgba(255,255,255,0.1);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    transition: 0.3s;
    box-shadow: #000 0px 4px 8px;
}
.popup-close:hover { background: #ef4444; transform: rotate(90deg); }

.popup-image {
    width: 100%;
    height: 100%;
    background: #0f172a;
    display: flex;
    align-items: center;
}
.popup-image img {
    width: 100%; height: 100%;
    object-fit: inherit;
    box-shadow: #000 0px 4px 8px;
}

.popup-content {
    padding: 40px;
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.popup-title {
    font-size: 24px;
    font-weight: 800;
    color: white;
    margin-bottom: 15px;
}

.neon-text {
    color: var(--neon-blue);
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}

.popup-desc {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
}

.vip-requirement {
    background: rgba(56, 189, 248, 0.1);
    border-left: 3px solid var(--neon-blue);
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: #000 0px 4px 8px;
}
.req-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.8; }
.req-value { font-size: 22px; font-weight: 800; color: var(--vip-goldd); }

.popup-list {
    list-style: none;
    padding: 0; margin: 0 0 25px 0;
}
.popup-list li {
    font-size: 13px;
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}
.popup-list li::before {
    content: '→';
    position: absolute; left: 0;
    color: var(--neon-blue);
}

.popup-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
    border: none;
    border-radius: 10px;
    color: white;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: #000 0px 4px 8px;
}
.popup-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(99, 102, 241, 0.4); }

.gold-gradient-text {
    background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
    text-shadow: 0px 5px 15px rgba(184, 134, 11, 0.4);
}

.diamond-gradient-text {
    background: linear-gradient(to right, #ffffff, #a5f3fc, #00f2fe, #4facfe, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
    filter: drop-shadow(0px 5px 15px rgba(0, 242, 254, 0.4));
    letter-spacing: 1px;
}

.neon-text-vvip {
    color: #00f2fe;
    text-shadow: 0 0 10px rgba(0, 242, 245, 0.8), 
                 0 0 20px rgba(0, 242, 254, 0.5);
    font-weight: 800;
}

.vvip-bg {
    background: rgba(0, 242, 254, 0.1) !important;
    border: 1px dashed #00f2fe !important;
}

.vvip-btn {
    background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%) !important;
    box-shadow: 0 4px 15px rgba(0, 242, 254, 0.4) !important;
    color: #fff !important;
    transition: all 0.3s ease;
}

.vvip-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 242, 254, 0.6) !important;
}

.floating-vip {
    display: inline-block;
    animation: floatVip 3s ease-in-out infinite;
}

@keyframes floatVip {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-15px) scale(1.05); }
}

.popup-box.vip-mode {
    border: 2px solid #fbbf24 !important;
    box-shadow: 0 0 50px rgba(251, 191, 36, 0.6) !important;
}

.popup-box.vvip-mode {
    border: 2px solid #00f2fe !important;
    box-shadow: 0 0 60px rgba(0, 242, 254, 0.5) !important;
}

.lucky-wheel-floating {
    position: fixed !important;
    z-index: 9999 !important;
    display: flex;
    justify-content: flex-end;
    width: auto;
    bottom: 120px !important;
    right: 35px !important;
    left: auto !important;
    top: auto !important;
}

.wheel-link-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 15px;
    border-radius: 50px 0 0 50px;
    border-right: none;
    box-shadow: #000 0px 4px 8px;
    transition: 0.3s;
    }

.wheel-link-box:hover {
    padding-right: 25px;
}

.spin-icon {
    animation: spin-slow 4s linear infinite;
}

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.modal-lucky { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; backdrop-filter: blur(10px); font-family: sans-serif; }
.modal-lucky-content { box-shadow: #000 0px 4px 8px; margin: 8vh auto; padding: 20px; width: 85%; max-width: 320px; border-radius: 20px; border: 1px solid rgb(59 130 246 / 54%); text-align: center; position: relative; }
.neon-text { color: #5595ff; font-size: 1.4rem; margin-bottom: 10px; text-shadow: 0 0 10px rgb(59 130 246 / 54%); }
.lucky-close { position: absolute; right: 5px; top: 5px; border: none; font-size: 24px; cursor: pointer; background: #ff4b4b; color: white; border-radius: 50%; width: 30px; height: 30px; box-shadow: #000 0px 4px 8px; }
#alert-place-luckywheel { /*min-height: 50px;*/ margin-bottom: 10px; display: flex; align-items: center; justify-content: center; }
.wheel-main-container { position: relative; width: 240px; height: 240px; margin: 10px auto; }
.the-wheel { width: 100%; height: 100%; transition: transform 5s cubic-bezier(0.1, 0, 0.1, 1); }
.segment-text { fill: white; font-size: 5px; font-weight: bold; text-anchor: middle; font-family: Arial; }
.wheel-pointer { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); width: 25px; height: 35px; background: #ef4444; clip-path: polygon(50% 100%, 0 0, 100% 0); z-index: 100; border: 1px solid white; }
.wheel-center-decoration { position: absolute; width: 35px; height: 35px; background: #0f172a; border: 2px solid #f59e0b; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 50; }
.inner-dot { width: 8px; height: 8px; background: #f59e0b; border-radius: 50%; margin: 12px auto; box-shadow: 0 0 5px #f59e0b; }
.input-group { display: flex; flex-direction: column; gap: 10px; }
#voucherCode { box-shadow: #000 0px 4px 8px; background: transparent; border: 1px solid #334155; color: #fff; padding: 12px; border-radius: 10px; text-align: center; font-size: 16px; outline: none; }
.btn-spin-gold { background: linear-gradient(90deg, rgb(59 130 246 / 54%) 0%, rgb(255 255 255 / 19%) 50%, rgb(59 130 246 / 60%) 100%); color: white; border: none; padding: 14px; border-radius: 10px; font-size: 14px; font-weight: bold; cursor: pointer; box-shadow: 0 4px 0 #92400e; transition: 0.2s; }
.btn-spin-gold:active { transform: translateY(2px); box-shadow: 0 2px 0 #92400e; }
.btn-spin-gold:disabled { opacity: 0.5; cursor: not-allowed; }

.payment-scroll-wrapper {
    height: 150px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 10px;
    padding-bottom: 5px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}

.payment-scroll-wrapper::-webkit-scrollbar {
    display: none;
}

.payment-grid-clean {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.pay-item-clean {
    background: #0f0f0f;
    border: 1px solid #222;
    height: 45px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    transition: all 0.3s ease;
}

.pay-item-clean:hover {
    border-color: #f9f295;
    background: rgba(249, 242, 149, 0.05);
    transform: translateY(-2px);
}

.pay-item-clean img {
    max-height: 24px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: brightness(0.9);
}

.card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #222;
    padding-bottom: 10px;
    margin-bottom: 12px;
}

.server-status {
    font-size: 10px;
    color: #2ecc71;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(46, 204, 113, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
}

.ping-dot {
    width: 6px; height: 6px;
    background: #2ecc71;
    border-radius: 50%;
    box-shadow: 0 0 5px #2ecc71;
    animation: pingPulse 1s infinite;
}
@keyframes pingPulse { 0% {opacity: 1} 50% {opacity: 0.3} 100% {opacity: 1} }

.compact-body { padding: 0 5px; }
.service-row-compact { margin-bottom: 15px; }

.service-info-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    color: #ddd;
    margin-bottom: 6px;
}

.label-group { display: flex; align-items: center; gap: 6px; }
.text-green { color: #2ecc71; }
.text-gold { color: #f1c40f; }

.time-val-neon {
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    letter-spacing: 0.5px;
    text-shadow: 0 0 5px rgba(255,255,255,0.1);
}

.progress-track {
    height: 6px;
    background: #1a1a1a;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #252525;
    position: relative;
}

.progress-fill {
    height: 100%;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.progress-fill::after {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background-image: linear-gradient(
        -45deg, 
        rgba(255, 255, 255, 0.0) 25%, 
        rgba(255, 255, 255, 0.4) 50%, 
        rgba(255, 255, 255, 0.0) 75%
    );
    background-size: 20px 20px;
    animation: shimmerMove 1s linear infinite;
}

@keyframes shimmerMove {
    0% { background-position: 0 0; }
    100% { background-position: 20px 20px; }
}

.green-shimmer { background: #2ecc71; box-shadow: 0 0 10px rgba(46, 204, 113, 0.3); }
.gold-shimmer { background: #f1c40f; box-shadow: 0 0 10px rgba(241, 196, 15, 0.3); }

.compact-footer {
    padding-top: 10px !important;
    margin-top: 5px !important;
    border-top: 1px solid #222;
}
.browser-icons-wrap img {
    height: 14px !important;
    opacity: 0.7;
    transition: 0.3s;
}
.browser-icons-wrap img:hover { opacity: 1; transform: scale(1.1); }

.sultan-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
    margin-top: 20px;
}

.dark-vip {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 15px 18px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px;
    box-shadow: #000 0px 4px 8px;
}

.card-title-vip {
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    color: #555;
    margin-bottom: 15px;
    border-bottom: 1px solid #151515;
    padding-bottom: 8px;
}

.live-indicator {
    position: absolute;
    top: 15px; right: 18px;
    font-size: 9px; font-weight: 900; color: #444;
    display: flex; align-items: center; gap: 5px;
}
.dot-pulse {
    width: 6px; height: 6px; background: #ff0000; border-radius: 50%;
    box-shadow: 0 0 8px #ff0000; animation: pulseRed 1.5s infinite;
}
@keyframes pulseRed { 0% {opacity: 1} 50% {opacity: 0.3} 100% {opacity: 1} }

.service-row { margin-bottom: 12px; }
.service-info-vip { display: flex; justify-content: space-between; font-size: 11px; color: #eee; font-weight: 700; }
.time-vip { color: #f9f295; font-family: 'Orbitron'; }
.progress-bar-slim { height: 4px; background: #151515; border-radius: 10px; margin-top: 6px; overflow: hidden; }
.fill-slim { height: 100%; border-radius: 10px; transition: width 2s ease; }
.green-glow { background: #2ecc71; box-shadow: 0 0 10px rgba(46,204,113,0.3); }
.gold-glow { background: #f1c40f; box-shadow: 0 0 10px rgba(241,196,15,0.3); }
.payment-grid-clean { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pay-item-clean { background: #111; border: 1px solid #1a1a1a; height: 35px; border-radius: 6px; display: flex; align-items: center; justify-content: center; padding: 5px; }
.pay-item-clean img { max-height: 14px; width: auto; filter: grayscale(1) brightness(0.8); }
.browser-icons-wrap { display: flex; gap: 8px; align-items: center; }
.browser-icons-wrap img { height: 16px !important; width: auto !important; opacity: 0.6; }
.ticker-viewport { height: 130px; overflow: hidden; mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent); }
.ticker-canvas { display: flex; flex-direction: column; gap: 6px; animation: scrollTicker 30s linear infinite; }
.ticker-row { display: flex; justify-content: space-between; padding: 8px 12px; background: #111; border-radius: 6px; font-size: 10px; border-left: 2px solid #222; }
.wd-display { text-align: center; padding: 5px 0; }
.wd-label { font-size: 9px; font-weight: 800; color: #444; letter-spacing: 1px; }
.wd-amount-gold { font-family: 'Orbitron', sans-serif; font-size: 22px; color: #f9f295; margin: 8px 0; text-shadow: 0 0 15px rgba(249,242,149,0.2); }
.wd-winner-box { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: #eee; background: #111; padding: 4px 12px; border-radius: 50px; border: 1px solid #1a1a1a; }
.card-footer-vip { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #151515; padding-top: 10px; margin-top: 10px; }
.card-footer-vip p { font-size: 9px; color: #333; font-weight: 800; text-transform: uppercase; }
.status-icon { font-size: 11px; color: #222; }

@keyframes scrollTicker { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }

/* --- HEADER LAYOUT (RAIH DI SEMUA DEVICE) --- */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Sejajar Vertikal */
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 15px;
    gap: 10px;
}

.header-left { flex: 1; min-width: 0; /* Mencegah overflow text */ }
.section-desc { font-size: 11px; color: #888; margin-top: 3px; line-height: 1.3; }
.section-desc strong { color: #f1c40f; font-weight: normal; }

/* ANIMASI API */
.text-danger { color: #ff4757; }
.animate-burn { animation: burn 1s infinite alternate; }
@keyframes burn { from { opacity: 0.8; text-shadow: 0 0 5px #ff4757; } to { opacity: 1; text-shadow: 0 0 15px #ff4757; } }

/* SEARCH BAR */
.search-wrap {
    display: flex;
    background: #0a0a0a;
    border: 1px solid #333;
    border-radius: 50px;
    padding: 2px;
    width: 200px; /* Lebar default */
    transition: 0.3s;
}
.search-wrap:focus-within { border-color: #f1c40f; box-shadow: 0 0 10px rgba(241, 196, 15, 0.2); }
.search-wrap input { border: none; background: transparent; padding: 6px 12px; color: #fff; font-size: 11px; width: 100%; outline: none; }
.search-wrap button { background: #222; border: none; color: #fff; width: 30px; border-radius: 50%; cursor: pointer; transition: 0.3s; }
.search-wrap button:hover { background: #f1c40f; color: #000; }

/* --- GRID SYSTEM --- */
.game-grid-static {
    display: grid;
    /* DESKTOP 8 GRID */
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
}

/* --- GAME CARD --- */
.game-card {
    background: #0a0a0a;
    border: 1px solid #222;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.game-card:hover { transform: translateY(-5px); border-color: #f1c40f; box-shadow: 0 5px 15px rgba(0,0,0,0.5); z-index: 5; }

/* GAMBAR WRAPPER */
.img-wrap { width: 100%; aspect-ratio: 1/1; position: relative; overflow: hidden; background: #111; }

/* SKELETON LOADING (Animasi Kilat Loading) */
.skeleton { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background: linear-gradient(90deg, #111 25%, #1a1a1a 50%, #111 75%); 
    background-size: 200% 100%; 
    animation: shimmer 1.5s infinite; 
    z-index: 1; 
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* GAMBAR ASLI (SMOOTH TRANSITION) */
.game-thumb { 
    width: 100%; height: 100%; object-fit: cover; 
    opacity: 0; /* Hidden awal */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease; 
    position: relative; z-index: 2;
}
.game-thumb.loaded { opacity: 1; /* Muncul halus saat loaded */ }
.game-card:hover .game-thumb { transform: scale(1.1); filter: brightness(0.4); }

/* BADGES STATUS */
.badge-status { position: absolute; top: 0; left: 0; color: #fff; font-size: 8px; font-weight: 900; padding: 3px 8px; border-bottom-right-radius: 8px; z-index: 4; letter-spacing: 0.5px; }
.bg-hot { background: linear-gradient(45deg, #ff416c, #ff4b2b); box-shadow: 0 0 10px rgba(255, 65, 108, 0.4); }
.bg-new { background: linear-gradient(45deg, #2193b0, #6dd5ed); }

/* PLAY BUTTON (PULSE ANIMATION) */
.play-pop { 
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); 
    width: 40px; height: 40px; 
    background: #f1c40f; border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; 
    color: #000; z-index: 5; 
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    opacity: 0; 
}
.game-card:hover .play-pop { transform: translate(-50%, -50%) scale(1); opacity: 1; }

.play-pulse {
    position: absolute; width: 100%; height: 100%; border-radius: 50%;
    border: 2px solid #f1c40f; opacity: 0;
    animation: pulseBtn 1.5s infinite;
}
@keyframes pulseBtn { 0% {transform: scale(1); opacity: 0.8;} 100% {transform: scale(1.5); opacity: 0;} }

/* --- CARD INFO --- */
.card-info { padding: 8px 6px; text-align: center; }

/* PROVIDER TEXT (PENGGANTI LOGO) */
.provider-text {
    font-size: 7px; color: #888; font-weight: 800; letter-spacing: 1px;
    margin-bottom: 3px; display: block; text-transform: uppercase;
}

/* NAMA GAME */
.card-info h4 { font-size: 9px; color: #eee; margin: 0 0 6px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* RTP BOX */
.rtp-box { background: #151515; border: 1px solid #222; padding: 2px; border-radius: 4px; }
.rtp-num { display: block; font-size: 9px; font-weight: 900; font-family: 'Orbitron', sans-serif; margin-bottom: 2px; }
.progress-track { height: 4px; background: #222; border-radius: 10px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 10px; transition: width 0.5s; }

/* COLORS */
.c-green { color: #2ecc71; } .bg-green { background: #2ecc71; box-shadow: 0 0 4px #2ecc71; }
.c-yellow { color: #f1c40f; } .bg-yellow { background: #f1c40f; box-shadow: 0 0 4px #f1c40f; }
.c-red { color: #e74c3c; } .bg-red { background: #e74c3c; }

/* --- EMPTY STATE (NOT FOUND) --- */
.empty-state-box {
    grid-column: 1 / -1; /* Melebar ke semua kolom grid */
    text-align: center;
    padding: 50px 20px;
    background: rgba(255, 255, 255, 0.02); /* Glass effect tipis */
    border: 1px dashed rgba(255, 255, 255, 0.1); /* Border putus-putus estetik */
    border-radius: 15px;
    margin-top: 20px;
    animation: fadeIn 0.5s ease;
}

/* Icon Wrapper */
.empty-icon-glow {
    width: 60px; height: 60px;
    background: rgba(20, 20, 20, 0.8);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 15px auto;
    border: 1px solid #333;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    position: relative;
}

/* Icon Lucide Style */
.empty-icon-glow i {
    color: #666;
    width: 28px; height: 28px;
    transition: 0.3s;
}

/* Efek Hover di Box Kosong */
.empty-state-box:hover .empty-icon-glow i {
    color: #ff4757; /* Merah saat hover */
    transform: scale(1.1) rotate(-10deg);
}
.empty-state-box:hover .empty-icon-glow {
    border-color: #ff4757;
    box-shadow: 0 0 15px rgba(255, 71, 87, 0.3);
}

/* Typography */
.empty-title {
    font-size: 14px; color: #eee; margin: 0 0 5px 0; font-weight: 700;
}
.empty-desc {
    font-size: 11px; color: #888; margin: 0;
}

/* Animasi Muncul */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.logo-wrapper {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
}

.sidebar-logo {
    max-width: 80%;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2)); 
    transition: all 0.3s ease;
}

.sidebar-logo:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 10px rgba(241, 196, 15, 0.5));
}

/* Info Data Kosong */
.no-data {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    background: rgba(255,255,255,0.05);
    border-radius: 15px;
    color: #888;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Penataan Tombol */
.card-buttons {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.project-link {
    flex: 1;
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
}

/* Warna Tombol Read */
.btn-read {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
}

/* Warna Tombol Claim */
.btn-claim {
    background: #f1c40f;
    color: #000;
}

.project-link:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

/* CSS Handle Maintenance */
.prov-card-item.prov-maint .img-wrap img {
    filter: grayscale(1) opacity(0.5);
}
.prov-card-item.prov-maint {
    border: 1px solid rgba(255, 0, 0, 0.2) !important;
    pointer-events: none;
}

/* Badge & Status */
.badge-status.bg-maint { background: #e74c3c; color: #fff; font-size: 8px; font-weight: 900; }
.badge-status.bg-online { background: #2ecc71; color: #fff; font-size: 8px; font-weight: 900; }

.status-box-prov {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.txt-ready { color: #2ecc71; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.txt-maint { color: #888; font-size: 9px; font-weight: 800; text-transform: uppercase; }

.provider-title {
    font-size: 13px !important;
    margin: 5px 0 !important;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Not Found Style */
.empty-state-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    width: 100%;
}
.lucide-big {
    width: 60px;
    height: 60px;
    color: #f1c40f;
    margin-bottom: 20px;
    stroke-width: 1.5;
}

.reset-search-btn {
    margin-top: 20px;
    background: #f1c40f;
    border: none;
    padding: 10px 25px;
    border-radius: 8px;
    font-weight: 800;
    cursor: pointer;
}

/* --- MODAL STRUCTURE ANTI-OFFSET --- */
.pv-fixed-modal {
    max-width: 900px !important;
    width: 95% !important;
    height: 80vh !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    position: relative;
    box-sizing: border-box !important;
}

.pv-main-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* --- HEADER BAR --- */
.pv-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    flex-shrink: 0;
}

.pv-bar-left { display: flex; align-items: center; gap: 10px; }
.pv-icon-box { 
    width: 32px; height: 32px;
    border-radius: 6px; display: flex; align-items: center; justify-content: center;
}
.pv-neon-title { font-size: 14px; font-weight: 900; color: #fff; margin: 0; }
.pv-mini-desc { font-size: 9px; color: #555; margin: 0; }

.pv-search-box {
    position: relative; border: 1px solid #444; border-radius: 6px;
    display: flex; align-items: center; padding: 0 10px; width: 180px; transition: 0.3s;
}
.pv-search-box i { width: 14px; color: #f1c40f; margin-right: 8px; }
.pv-search-box input {
    background: transparent; border: none; color: #fff; padding: 8px 0; font-size: 12px; outline: none; width: 100%;
}

/* --- SCROLL AREA & GRID --- */
.pv-content-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    scrollbar-width: none;
}
.pv-content-scroll::-webkit-scrollbar { display: none; }

.pv-grid-layout {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    width: 100%;
}

/* --- CARD DESIGN --- */
.pv-card-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 15px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 135px;
    position: relative;
    transition: 0.3s;
}
.pv-card-item:hover:not(.is-maint) {
    background: rgba(255, 255, 255, 0.08);
    border-color: #f1c40f;
    transform: translateY(-3px);
}

.pv-logo-container {
    height: 50px; width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
}
.pv-logo-container img { max-width: 80%; max-height: 100%; object-fit: contain; }

.pv-card-info { text-align: center; width: 100%; }
.pv-label-name { display: block; font-size: 10px; font-weight: 800; color: #fff; margin-bottom: 2px; }
.pv-label-type { display: block; font-size: 7px; color: #f1c40f; font-weight: 700; text-transform: uppercase; }

/* BADGE */
.pv-status-tag {
    position: absolute; top: 6px; right: 6px; font-size: 6px; font-weight: 900; padding: 2px 5px; border-radius: 4px;
}
.tag-on { background: #2ecc71; color: #000; }
.tag-maint { background: #e74c3c; color: #fff; }
.is-maint { opacity: 0.4; filter: grayscale(1); cursor: not-allowed; }

.pv-empty-state { 
    display: none;
    width: 100%;
    height: 100%;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    box-sizing: border-box;
    animation: pvFadeIn 0.4s ease-out;
}

.pv-nf-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    
    border: 1px dashed rgba(241, 196, 15, 0.3);
    position: relative;
}

.pv-nf-icon::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(241, 196, 15, 0.1);
    filter: blur(20px);
    border-radius: 50%;
}

.pv-nf-icon i { 
    width: 40px; 
    height: 40px; 
    color: #f1c40f;
    z-index: 2;
}

.pv-empty-state p {
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    margin: 0 0 8px 0;
    letter-spacing: 1px;
    text-transform: uppercase;
    width: 100%;
}

/* Subtitle Styling */
.pv-empty-subtitle {
    display: block;
    color: #555;
    font-size: 11px;
    margin-bottom: 25px;
    width: 100%;
}

.pv-reset-btn {
    background: #f1c40f; 
    border: none; 
    padding: 12px 30px; 
    border-radius: 8px; 
    font-weight: 900; 
    font-size: 11px; 
    cursor: pointer; 
    color: #000;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(241, 196, 15, 0.2);
    display: flex;
    align-items: center;
    justify-content: center; /* Center konten tombol */
    gap: 8px;
    margin: 0 auto; /* Pastikan tombol di tengah */
}

.pv-reset-btn:hover {
    background: #fff;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
}

/* Animasi Muncul */
@keyframes pvFadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

.pv-empty-state-php {
    grid-column: span 6; /* Biar dia makan semua kolom (Desktop) */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    width: 100%;
}

.pv-empty-state-php .pv-nf-icon {
    margin-bottom: 15px;
    background: rgba(255,255,255,0.03);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #444;
}

.pv-empty-state-php p {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    margin: 0;
}

/* Sembunyikan bener-bener dari render tree */
.glass-modal-overlay:not(.active) {
    pointer-events: none;
    visibility: hidden;
    display: none !important;
    will-change: auto; /* Matikan akselerasi GPU saat tidak aktif */
}

.glass-modal-overlay.active {
    visibility: visible;
    display: flex !important;
    will-change: transform, opacity; /* Aktifkan GPU hanya saat dibuka */
}

.pv-rtp-section {
    width: 100%;
    margin: 10px 0 5px 0;
    padding: 0 8px;
    box-sizing: border-box;
}

.rtp-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.rtp-number {
    color: #f1c40f;
}

.rtp-progress-bg {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.rtp-progress-bar {
    height: 100%;
    width: 0%;
    border-radius: 50px;
    transition: width 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: width;
    position: relative;
}

.rtp-progress-bar::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
    animation: barShine 2s infinite;
}

@keyframes barShine {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

.badge-gacor {
    background: linear-gradient(135deg, #ff4d4d 0%, #f1c40f 100%);
    color: #000;
    font-size: 8px;
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    box-shadow: 0 0 15px rgba(255, 77, 77, 0.4);
    will-change: transform, filter;
    animation: hotPulse 0.8s infinite alternate cubic-bezier(0.4, 0, 0.6, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes hotPulse {
    from { 
        transform: scale(1); 
        filter: brightness(1) drop-shadow(0 0 2px #ff4d4d); 
    }
    to { 
        transform: scale(1.15); 
        filter: brightness(1.4) drop-shadow(0 0 8px #f1c40f); 
    }
}

.pv-logo-container { 
    height: 55px !important; 
    margin-bottom: 8px; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

.pv-logo-container img {
    max-width: 90%;
    max-height: 100%;
    object-fit: contain;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.ripple-effect {
    width: 2px;
    height: 2px;
    border: 2px solid rgba(241, 196, 15, 0.5);
    border-radius: 50%;
    animation: rippleAnim 0.6s ease-out forwards;
    will-change: transform, opacity;
}

.splash-dot {
    width: 4px;
    height: 4px;
    background: #f1c40f;
    border-radius: 50%;
    animation: dotAnim 0.6s ease-out forwards;
    will-change: transform, opacity;
}

@keyframes rippleAnim {
    to { width: 60px; height: 60px; opacity: 0; }
}

@keyframes dotAnim {
    to { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}

.input-info {
    display: block;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    margin: -8px 0 12px 10px;
    font-style: italic;
    letter-spacing: 0.3px;
}
.input-group-modal {
    margin-bottom: 10px !important;
}
.checkbox-container {
    margin: 15px 5px;
    display: flex;
    align-items: flex-start;
}
.glass-check {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    user-select: none;
}
.glass-check input { display: none; }
.checkmark {
    height: 18px;
    width: 18px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    margin-right: 10px;
    position: relative;
    transition: 0.3s;
}
.glass-check input:checked ~ .checkmark {
    background: #10b981;
    border-color: #10b981;
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px; top: 2px;
    width: 4px; height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.glass-check input:checked ~ .checkmark:after { display: block; }
.label-text a { color: #10b981; text-decoration: none; font-weight: bold; }
.submit-glass.active-btn {
    background: linear-gradient(135deg, #10b981, #047857) !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.glass-popup {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: #000 0px 4px 8px !important;
    border-radius: 15px !important;
}
.glass-mini {
    width: 300px !important;
    padding: 15px !important;
}
.glass-title {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}
.glass-content {
    color: #cccccc !important;
    font-size: 13px !important;
}
.swal2-loader {
    border-color: #10b981 transparent #10b981 transparent !important;
}
.glass-mini-info {
    width: auto !important;
    min-width: 250px !important;
    max-width: 300px !important;
    padding: 10px 15px !important;
    border-radius: 12px !important;
}
.swal2-icon.swal2-info {
    transform: scale(0.6);
    margin: 5px auto -5px !important;
}
.glass-title-mini {
    color: #fff !important;
    font-size: 14px !important;
    margin: 5px 0 !important;
}

@media (max-width: 768px) {
    .pv-empty-state-php {
        grid-column: span 4;
        padding: 50px 10px;
    }
    .pv-fixed-modal { width: 96% !important; height: 85vh !important; }
    .pv-search-box { width: 120px; }
    .pv-mini-desc { display: none; }
    .pv-grid-layout {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .pv-card-item { min-height: 105px; padding: 10px 5px; }
    .pv-logo-container { height: 35px; }
    .pv-empty-state { padding: 30px 15px; }
    .pv-nf-icon { width: 60px; height: 60px; }
    .pv-nf-icon i { width: 30px; height: 30px; }
    .pv-empty-state p { font-size: 14px; }
    
    #provGridContainer {
        display: grid;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 8px !important;
    }
    .provider-title { font-size: 9px !important; }
    
    .sidebar-logo {
        max-height: 45px;
    }
    
    /* HEADER SEJAJAR */
    .header-container {
        flex-direction: row; /* Tetap satu baris */
        align-items: center;
        gap: 8px;
    }

    .header-left { flex: 1; overflow: hidden; }
    
    /* Deskripsi Muncul Tapi Kecil */
    .section-desc { display: block; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0; }

    /* SEARCH BAR COMPACT DI SAMPING */
    .search-wrap { width: 130px; } 
    .search-wrap input { padding: 5px 8px; font-size: 10px; }
    .search-wrap button { width: 25px; }

    /* GRID 5 KOLOM DI MOBILE */
    .game-grid-static {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 5px;
    }

    /* FONT SIZE MOBILE */
    .provider-text { font-size: 6px; }
    .card-info h4 { font-size: 7px; margin-bottom: 3px; }
    .rtp-num { font-size: 7px; }
    .play-pop { width: 28px; height: 28px; font-size: 10px; }
    .card-info { padding: 4px; }
    
    .sultan-grid-wrapper { 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 8px;
    }
    
    .dark-vip { 
        min-height: 160px;
        padding: 10px 12px;
    }

    .wd-amount-gold {
        font-size: 16px;
    }
    
    .card-title-vip {
        font-size: 9px;
    }
    
    .browser-icons-wrap img {
        height: 12px !important;
    }
    
    .content-header {
        padding: 15px 20px;
    }

    .slider-wrapper {
        padding: 1px 15px 15px 15px;
    }

    .hero-slider {
        height: 150px;
    }

    .scrollable-content-area {
        padding: 20px 15px 120px 15px;
    }

    body {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }

    .scrollable-content-area {
        padding: 15px 15px 120px 15px;
    }

    .fixed-top-content {
        padding: 0 15px;
    }

    .main-layout {
        flex-direction: column;
        width: 100%;
        height: 100vh;
        gap: 0;
    }
    
    .sidebar-panel {
        position: fixed;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 95%;
        max-width: 360px;
        height: 50px;
        padding: 0 10px;
        z-index: 9999;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        display: flex;
        align-items: center;
        overflow: visible !important; 
    }
    
    .nav-menu {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0;
        margin: 0;
        list-style: none;
        overflow: visible;
    }

    .nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        min-width: 45px;
        position: relative;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        color: rgba(255, 255, 255, 0.4);
    }

    .nav-item i {
        font-size: 20px;
        margin-bottom: 2px;
        transition: 0.3s;
    }
    
    .nav-label {
        display: block !important;
        font-size: 9px;
        font-weight: 500;
        line-height: 1;
        opacity: 1;
        transition: 0.2s;
    }

    .nav-item.active {
        height: 40px;
        border-radius: 20px;
        flex: 1;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: none;
        transform: none;
        overflow: hidden;
    }
    
    .nav-item.active i,
    .nav-item.active svg {
        font-size: 22px !important;
        width: 22px !important;
        height: 22px !important;
        margin: 0 !important;
        display: block !important;
    }
    
    .nav-item.active .nav-label {
        display: none !important;
    }

    .sidebar-header, 
    .nav-title {
        display: none !important;
    }

    .content-panel {
        height: 100%;
        border-radius: 0;
    }

    .content-header {
        padding: 15px 20px;
    }

    .scrollable-area {
        padding: 15px 15px 100px;
    }

    .grid-container {
        grid-template-columns: 1fr;
    }
    
    .slide-title {
        font-size: 18px;
    }
    .slide-description {
        font-size: 11px; max-width: 250px;
    }
    .category-tag.api-neon {
        padding: 3px 10px; font-size: 9px;
    }
    
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .service-card {
        flex-direction: column;
        text-align: center;
        padding: 12px 10px;
        gap: 10px;
    }

    .service-details p {
        text-align: center;
        font-size: 10px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .service-icon-wrapper {
        width: 35px;
        height: 35px;
    }

    .service-details h3 {
        font-size: 12px;
    }
    
    .neon-title {
        font-size: 13px;
    }
    
    .timeline {
        padding-left: 15px;
    }
    .timeline-dot {
        left: -21px;
    }
    .resume-block .card {
        padding: 10px;
    }
    
    .tools-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .tool-tag {
        padding: 8px 5px;
        font-size: 9px;
    }
    
    .blog-grid {
        gap: 10px;
        
    }
    
    .blog-info {
        padding: 12px !important;
    }
    
    .blog-info h3 {
        font-size: 13px !important;
        margin: 5px 0 !important;
    }
    
    .blog-thumb { 
        height: 100px !important; 
    }
    
    .blog-modal { 
        align-items: flex-start !important; 
        padding-top: 70px !important; 
    }
    
    .modal-content {
        max-height: 85vh; 
        width: 92%; 
        margin-top: -25px; 
    }
    
    .contact-wrap {
        grid-template-columns: 1fr; 
        gap: 20px;
    }

    .contact-wrap .card {
        width: 100%;
        padding: 20px;
        border-radius: 20px;
    }

     .map-wrap {
        min-height: 250px;
        height: 250px;
    }
    
    .lead {
        font-size: 0.95rem;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.5;
        margin-bottom: 30px;
    }

    .beautiful-form {
        gap: 15px;
    }

    .beautiful-form p {
        font-size: 0.85rem !important;
        color: rgba(255, 255, 255, 0.6) !important;
    }

    .send-btn {
        width: 100%;
        margin-bottom: 30px;
        padding: 14px;
    }
    
    .user-profile-floating {
        position: fixed !important;
        top: -60px !important;
        right: 0px !important;
        left: auto !important;
        bottom: auto !important;
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
    }

    .profile-content {
        backdrop-filter: blur(10px);
        border: 1.5px solid rgba(16, 185, 129, 0.6) !important;
        padding: 6px !important;
        border-radius: 50px !important;
        gap: 8px !important;
    }

    .user-details {
        display: none !important;
    }

    .user-avatar {
        width: 35px;
        height: 35px;
    }
    
    .popup-grid {
        grid-template-columns: 1fr; /* Balik ke 1 kolom */
    }
    .popup-box {
        max-width: 380px;
    }
    .popup-image {
        order: -1; /* Gambar pindah ke atas */
    }
    .popup-content {
        padding: 25px;
        text-align: center;
    }
    .popup-title { font-size: 20px; }
    .popup-desc { font-size: 13px; margin-bottom: 15px; }
    .req-value { font-size: 18px; }
    .popup-list { display: none; } /* Sembunyikan list di mobile agar tidak kepanjangan */
    .popup-list li { text-align: left;
    }
    
    .lucky-wheel-floating {
        top: -120px !important;
        right: 0px !important;
        left: auto !important;
        bottom: auto !important;
    }
    
    .payment-scroll-wrapper {
        height: 140px;
    }

    .payment-grid-clean {
        grid-template-columns: repeat(3, 1fr); 
        gap: 6px;
    }

    .pay-item-clean {
        height: 40px;
    }
    
    .pay-item-clean img {
        max-height: 18px;
    }
    
    .pv-rtp-section { padding: 0 4px; }
    .rtp-progress-bg { height: 6px; }
    .pv-logo-container { height: 45px !important; }

}