: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="layout"] { stroke: #9333ea; }          /* Purple */
[data-lucide="file-text"] { stroke: #10b981; }       /* Emerald */
[data-lucide="book-open"] { 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="calendar"] { 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="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 */

.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: 24px;
    font-weight: 800;
    margin-bottom: 20px;
    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; }

@media (max-width: 768px) {
    .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: 5px;
        left: 50%;
        transform: translateX(-50%);
        width: 85%;
        height: 50px;
        padding: 0 15px;
        z-index: 1000;
        border-radius: 50px;
        background: rgba(10, 15, 30, 0.5);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        display: flex;
        align-items: center;
        overflow: visible; /*Ubah ke hidden jika mau semula kaya awal buat*/
    }

    .nav-menu {
        width: 100%;
        display: flex;
        justify-content: space-around;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        overflow-x: auto;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin: 0;
    }

    .nav-menu::-webkit-scrollbar {
        display: none;
    }

    .nav-item {
        margin: 0;
        padding: 7px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50px;
        transition: all 0.3s ease;
        color: rgba(255, 255, 255, 0.6);
    }

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

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

    .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: 20px;
    }
    
    .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;
    }

}