:root {
    /* Light Theme - Terang dan bersih seperti CMS Banggai Old */
    --bg-light: #FDFBF8;
    --text-light: #4F4A45;
    --card-light: #FFFFFF;
    --border-light: #E0DACE;
    
    /* Dark Theme - Coklat gelap seperti CMS Banggai Old (bukan biru) */
    --bg-dark: #2D2A26;
    --bg-dark-gradient: linear-gradient(135deg, #2D2A26 0%, #38332F 100%);
    --text-dark: #E0DACE;
    --card-dark: #3A3631;
    --card-dark-hover: #4F4A45;
    --border-dark: #4F4A45;
    --border-dark-glow: #6B625B;
    
    /* Accent colors - Golden seperti CMS Banggai Old */
    --accent: #D1943A;
    --accent-h: #B47623;
    --accent-dark: #E9C893;
    --accent-glow: rgba(209, 148, 58, 0.4);
    --accent-gradient: linear-gradient(135deg, #E9C893 0%, #D1943A 100%);
    
    /* ===== TRANSPARENCY SETTINGS - Bisa disesuaikan ===== */
    /* Light Mode Transparency */
    --glass-opacity-light: 0.06;          /* Transparansi utama glass (0.05-0.5) */
    --glass-opacity-light-mid: calc(var(--glass-opacity-light) - 0.02);
    --glass-opacity-light-low: calc(var(--glass-opacity-light) - 0.04);
    --glass-blur-light: 32px;             /* Blur intensity (20px-60px) */
    --glass-border-opacity-light: 0.45;    /* Opacity border (0.3-0.8) */
    --card-opacity-light: 0.85;           /* Transparansi card (0.7-0.95) */
    --section-opacity-light: 0.82;        /* Transparansi section (0.7-0.9) */
    
    /* Dark Mode Transparency */
    --glass-opacity-dark: 0.80;           /* Transparansi glass dark (0.6-0.9) */
    --glass-blur-dark: 40px;              /* Blur intensity dark (20px-60px) */
    --card-opacity-dark: 0.85;            /* Transparansi card dark (0.7-0.95) */
}

body { 
    font-family: 'Inter', sans-serif; 
    background: linear-gradient(180deg, #FDFBF8 0%, #F3EDE4 50%, #FDFBF8 100%);
    background-attachment: fixed;
    background-color: #FDFBF8;
    color: var(--text-light);
    transition: all 0.5s ease;
    /* Padding top untuk kompensasi fixed header */
    padding-top: 4.5rem;
}

@media (max-width: 768px) {
    body {
        padding-top: 3.5rem; /* Mobile: header lebih kecil */
    }
}

/* Light mode background pattern */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(245, 158, 11, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(245, 158, 11, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

html[data-theme="dark"] body,
html:not([data-theme]) body { 
    background: linear-gradient(180deg, 
        #2D2A26 0%, 
        #38332F 25%,
        #2D2A26 50%,
        #38332F 75%,
        #2D2A26 100%);
    background-attachment: fixed;
    color: var(--text-dark);
}

/* Dark mode background pattern - Golden accent seperti CMS Banggai Old */
html[data-theme="dark"] body::before,
html:not([data-theme]) body::before {
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(209, 148, 58, 0.06) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(209, 148, 58, 0.06) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(233, 200, 147, 0.03) 0%, transparent 60%);
}

html[data-theme="dark"] html,
html:not([data-theme]) html {
    background: var(--bg-dark) !important;
    background-color: var(--bg-dark) !important;
}
/* ========================================
   GLOBAL ROUNDED CORNERS - NO SHARP EDGES!
   ======================================== */

/* Semua elemen box-like dijamin rounded */
.card, .box, .panel, .container-box,
[class*="card"], [class*="box"], [class*="panel"],
input, textarea, select, button,
.modal-content, .dropdown-menu,
.alert, .badge, .tag {
    border-radius: 1.5rem !important;
}

/* Tab Button Styling - ROUNDED */
.tab-btn.active { 
    border-color: var(--accent); 
    color: var(--accent); 
    background-color: var(--card-light);
    font-weight: 600;
    border-radius: 1rem !important;
}

html[data-theme="dark"] .tab-btn.active,
html:not([data-theme]) .tab-btn.active { 
    background: linear-gradient(135deg, 
        rgba(45, 42, 38, 0.9) 0%, 
        rgba(58, 54, 49, 0.7) 100%);
    border-color: var(--text-accent);
    color: var(--text-accent);
}

.tab-btn { 
    border-color: var(--border-light); 
    color: var(--text-light);
    transition: all 0.3s ease;
    border-radius: 1rem !important;
    padding: 0.5rem 1rem;
}

html[data-theme="dark"] .tab-btn { 
    border-color: var(--border-dark); 
    color: var(--text-dark);
}

/* Base Card Styling - MODERN GLASSMORPHISM & ELEGANT */
.card {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.95) 0%, 
        rgba(255, 255, 255, 0.9) 100%) !important;
    border: 1px solid rgba(224, 218, 206, 0.5) !important;
    border-radius: 1.5rem !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(0, 0, 0, 0.02) inset;
    color: var(--text-light) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(209, 148, 58, 0.1), 
        transparent);
    transition: left 0.5s ease;
}

.card:hover::before {
    left: 100%;
}

html[data-theme="dark"] .card,
html:not([data-theme]) .card {
    background: linear-gradient(135deg, 
        rgba(58, 54, 49, 0.95) 0%, 
        rgba(45, 42, 38, 0.9) 100%) !important;
    border-color: rgba(79, 74, 69, 0.6) !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    color: #f1f5f9 !important;
}

/* Modal card khusus di dark mode - kontras lebih kuat */
html[data-theme="dark"] #login-modal .card,
html[data-theme="dark"] .modal .card {
    background: linear-gradient(135deg, 
        rgba(45, 42, 38, 0.98) 0%, 
        rgba(58, 54, 49, 0.95) 100%) !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] #login-modal label,
html[data-theme="dark"] .modal label {
    color: #f8fafc !important;
    font-weight: 600;
}

/* Pastikan input di modal dark mode kontras maksimal */
html[data-theme="dark"] #login-modal input[type="text"],
html[data-theme="dark"] #login-modal input[type="password"],
html[data-theme="dark"] #login-modal input[type="email"],
html[data-theme="dark"] .modal input[type="text"],
html[data-theme="dark"] .modal input[type="password"],
html[data-theme="dark"] .modal input[type="email"],
html:not([data-theme]) #login-modal input[type="text"],
html:not([data-theme]) #login-modal input[type="password"],
html:not([data-theme]) #login-modal input[type="email"],
html:not([data-theme]) .modal input[type="text"],
html:not([data-theme]) .modal input[type="password"],
html:not([data-theme]) .modal input[type="email"] {
    background-color: rgba(58, 54, 49, 0.95) !important;
    border: 2px solid rgba(79, 74, 69, 0.9) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] #login-modal input[type="text"]:focus,
html[data-theme="dark"] #login-modal input[type="password"]:focus,
html:not([data-theme]) #login-modal input[type="text"]:focus,
html:not([data-theme]) #login-modal input[type="password"]:focus {
    background-color: rgba(58, 54, 49, 1) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(209, 148, 58, 0.2) !important;
}

/* Password dots di dark mode harus terlihat jelas */
html[data-theme="dark"] input[type="password"] {
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
}

html[data-theme="dark"] #login-modal p,
html[data-theme="dark"] .modal p {
    color: #e5e7eb !important;
}

.card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(209, 148, 58, 0.3) inset,
        0 0 30px rgba(209, 148, 58, 0.1);
    border-color: var(--accent);
}

html[data-theme="dark"] .card:hover,
html:not([data-theme]) .card:hover {
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(209, 148, 58, 0.4) inset,
        0 0 40px rgba(209, 148, 58, 0.2);
    border-color: var(--accent);
}
/* Chart Container */
.chart-container { 
    position: relative; 
    width: 100%; 
    max-width: 600px; 
    margin-left: auto; 
    margin-right: auto; 
    height: 300px; 
    max-height: 400px; 
}

/* Sticky Navigation */
.sticky-nav { 
    position: sticky; 
    top: 0; 
    z-index: 50; 
    background-color: rgba(255, 255, 255, 0.95); 
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

html[data-theme="dark"] .sticky-nav { 
    background-color: rgba(17, 24, 39, 0.95);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* Misc */
.pronoun-card { cursor: pointer; }
.modal-backdrop { background-color: rgba(0,0,0,0.5); }

/* Hero Background - Modern & Elegant */
.parallax-bg {
    min-height: 85vh;
    background-attachment: scroll; /* Scroll biasa, tidak fixed untuk performa lebih baik */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Margin top tidak perlu karena body sudah punya padding-top */
}

.parallax-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.4) 0%,
        rgba(0, 0, 0, 0.2) 50%,
        rgba(0, 0, 0, 0.4) 100%
    );
    z-index: 1;
}

/* Overlay untuk kontras teks */
.parallax-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 0;
}

html[data-theme="dark"] .parallax-bg::before,
html:not([data-theme]) .parallax-bg::before {
    background: rgba(45, 42, 38, 0.5) !important; /* Coklat gelap seperti CMS Banggai Old, bukan biru */
}

.parallax-bg > * {
    position: relative;
    z-index: 2;
    animation: fadeInUp 0.8s ease-out;
}

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

.hero-text-shadow {
    text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
}

.fade-in-section { 
    opacity: 0; 
    transform: translateY(20px); 
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; 
}

.fade-in-section.is-visible { 
    opacity: 1; 
    transform: translateY(0); 
}

.theme-toggle:hover svg { 
    transform: scale(1.1) rotate(15deg); 
    transition: transform 0.3s ease;
}

/* ========================================
   MOBILE STYLING - COMPACT & MODERN
   ======================================== */
@media (max-width: 768px) {
    /* Reduce overall size */
    html {
        font-size: 14px !important;
    }
    
    body {
        font-size: 0.875rem !important;
    }
    
    /* MOBILE: Header tetap FIXED (menggantung) */
    nav.site-header {
        padding: 0.5rem 0.75rem !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        border-bottom: 1px solid rgba(209, 148, 58, 0.2) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    }
    
    html[data-theme="dark"] nav.site-header,
    html:not([data-theme]) nav.site-header {
        background: rgba(45, 42, 38, 0.98) !important;
        border-bottom: 1px solid rgba(209, 148, 58, 0.3) !important;
    }
    
    /* MOBILE: Sections lebih simple */
    main.container > section {
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(224, 218, 206, 0.4) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
        border-radius: 1.5rem !important;
        padding: 1.5rem 1rem !important;
    }
    
    html[data-theme="dark"] main.container > section,
    html:not([data-theme]) main.container > section {
        background: rgba(58, 54, 49, 0.98) !important;
        border: 1px solid rgba(79, 74, 69, 0.5) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    }
    
    main.container > section::before {
        display: none !important; /* Disable gradient overlay di mobile */
    }
    
    /* Hero section lebih compact di mobile */
    .parallax-bg {
        min-height: 60vh !important;
        padding: 1.5rem 0.75rem !important;
        /* Margin top tidak perlu karena body sudah punya padding-top */
    }
    
    /* MOBILE: Welcome card lebih compact dan proporsional */
    .glass-card {
        padding: 1.25rem 1rem !important;
        border-radius: 1.25rem !important;
        margin: 0.5rem !important;
        max-width: calc(100% - 1rem) !important;
    }
    
    .glass-card h2 {
        font-size: 1.375rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.75rem !important;
        padding: 0 !important;
    }
    
    .glass-card p {
        font-size: 0.8125rem !important;
        line-height: 1.5 !important;
        margin-bottom: 0.875rem !important;
        padding: 0 !important;
    }
    
    /* Hero CTA button di mobile */
    .glass-card .hero-cta,
    .glass-card a[class*="hero-cta"] {
        padding: 0.625rem 1.25rem !important;
        font-size: 0.875rem !important;
        margin-top: 0.75rem !important;
    }
    
    /* Parallax bg lebih compact */
    .parallax-bg {
        padding: 1rem 0.5rem !important;
        min-height: 55vh !important;
    }
    
    /* Cards lebih compact */
    .card {
        border-radius: 1rem !important;
        padding: 1rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Headings lebih kecil */
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.25rem !important; }
    h3 { font-size: 1.125rem !important; }
    h4 { font-size: 1rem !important; }
    
    /* Buttons lebih compact tapi tetap touch-friendly */
    button, .btn {
        padding: 0.625rem 1.25rem !important;
        min-height: 40px !important;
        font-size: 0.875rem !important;
    }
    
    /* Hero CTA button */
    .hero-cta {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Container padding - SAMA KIRI DAN KANAN */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    main.container {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Section spacing lebih kecil - ALIGNED */
    section {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Cards aligned dengan container */
    .card {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Ensure text alignment */
    section h2,
    section h3,
    section p {
        text-align: left !important;
    }
    
    /* Center aligned text tetap center */
    section h2.text-center,
    section p.text-center {
        text-align: center !important;
    }
    
    /* Fix alignment untuk cards dan content */
    .max-w-4xl,
    .max-w-3xl,
    .max-w-2xl,
    .max-w-sm {
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Tab buttons alignment */
    .tab-btn {
        margin: 0.25rem !important;
    }
    
    /* Grid items alignment */
    .grid {
        gap: 0.75rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Contributor card alignment */
    #contributor-section .card {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Grammar section alignment */
    #gramatika-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Fix any overflow issues */
    body {
        overflow-x: hidden !important;
    }
    
    html {
        overflow-x: hidden !important;
    }
    
    /* Ensure consistent spacing - no extra margins */
    * {
        box-sizing: border-box !important;
    }
    
    /* Remove any negative margins that might cause shifting */
    .mx-auto {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Fix padding inconsistencies */
    .px-4,
    .px-6,
    .px-8 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Paragraph spacing */
    p {
        margin-bottom: 0.75rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Nav links lebih compact */
    nav.site-header .nav-link {
        padding: 0.375rem 0.625rem !important;
        font-size: 0.8125rem !important;
    }
    
    /* Brand text lebih kecil */
    nav.site-header a[href*="index.php"] {
        font-size: 1.125rem !important;
    }
    
    /* About page - Mobile optimizations */
    main.container > section .card {
        padding: 1rem !important;
    }
    
    main.container > section .card h3,
    main.container > section .card h4 {
        font-size: 1.125rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Avatar circles di about page - lebih kecil di mobile */
    main.container > section .card div[class*="rounded-full"] {
        width: 4rem !important;
        height: 4rem !important;
        font-size: 1.25rem !important;
    }
    
    /* Featured card (ketua) - lebih compact di mobile */
    main.container > section .card:first-of-type div[class*="rounded-full"] {
        width: 6rem !important;
        height: 6rem !important;
        font-size: 2rem !important;
    }
}

/* Gaya input adaptif - Light Mode - UPDATED v3 ROUNDED */
.glassy-input,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
#vocab-search,
#number-input {
    background-color: #ffffff !important;
    border: 2px solid #e5e7eb !important;
    color: #1f2937 !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    padding: 0.75rem 1rem;
    border-radius: 1rem !important;
}

/* Dark Mode untuk input fields - UPDATED v3 ROUNDED - KONTRAS LEBIH KUAT */
html[data-theme="dark"] .glassy-input,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] #vocab-search,
html[data-theme="dark"] #number-input,
html:not([data-theme]) input[type="text"],
html:not([data-theme]) input[type="number"],
html:not([data-theme]) input[type="email"],
html:not([data-theme]) input[type="password"],
html:not([data-theme]) input[type="search"],
html:not([data-theme]) textarea,
html:not([data-theme]) #vocab-search,
html:not([data-theme]) #number-input {
    background-color: rgba(58, 54, 49, 0.95) !important;
    border: 2px solid rgba(79, 74, 69, 0.9) !important;
    color: #E0DACE !important;
}

/* Select dropdown styling - ROUNDED */
select.glassy-input,
select {
    background-color: #ffffff !important;
    border: 2px solid #e5e7eb !important;
    color: #1f2937 !important;
    border-radius: 1rem !important;
    padding: 0.75rem 1rem;
}

html[data-theme="dark"] select.glassy-input,
html[data-theme="dark"] select,
html:not([data-theme]) select.glassy-input,
html:not([data-theme]) select {
    background-color: rgba(58, 54, 49, 0.95) !important;
    border: 2px solid rgba(79, 74, 69, 0.9) !important;
    color: #E0DACE !important;
}

/* Placeholder text */
.glassy-input::placeholder,
input::placeholder,
textarea::placeholder {
    color: #9ca3af !important;
}

html[data-theme="dark"] .glassy-input::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #cbd5e1 !important;
    opacity: 0.8 !important;
}

/* Focus state */
.glassy-input:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(209, 148, 58, 0.3) !important;
    outline: none;
}

html[data-theme="dark"] .glassy-input:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
    border-color: #fbbf24 !important;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.2) !important;
}

/* ========================================
   STYLING TITLE & HEADINGS - KONTRAS JELAS
   ======================================== */

/* Light Mode - Title dengan warna gelap */
h1, h2, h3, h4, h5, h6,
.text-2xl, .text-3xl, .text-4xl, .text-5xl {
    color: #111827 !important;
    font-weight: 700;
}

/* Dark Mode - Title dengan warna terang + glow effect */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .text-2xl,
html[data-theme="dark"] .text-3xl,
html[data-theme="dark"] .text-4xl,
html[data-theme="dark"] .text-5xl {
    color: #f1f5f9 !important;
    text-shadow: 0 0 20px rgba(241, 245, 249, 0.1);
}

/* Accent colored headings get special treatment in dark mode */
html[data-theme="dark"] h1[class*="accent"],
html[data-theme="dark"] h2[class*="accent"],
html[data-theme="dark"] h3[class*="accent"] {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========================================
   BACKGROUND SECTIONS - PISAHKAN JELAS
   ======================================== */

/* Light Mode - Background section terang */
section, .section {
    background-color: transparent;
    padding: 2rem 0;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* DESKTOP: Section dengan glassmorphism modern */
main.container > section {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.95) 0%, 
        rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 2px solid rgba(224, 218, 206, 0.5);
    box-shadow: 
        0 20px 60px rgba(15, 23, 42, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    border-radius: 2.5rem;
    padding: clamp(3rem, 5vw, 5rem);
    position: relative;
    overflow: hidden;
}

main.container > section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(209, 148, 58, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

/* Dark Mode - Background section dengan subtle gradient - Coklat seperti CMS Banggai Old */
html[data-theme="dark"] section,
html[data-theme="dark"] .section,
html:not([data-theme]) section,
html:not([data-theme]) .section {
   /* background: linear-gradient(180deg, 
        rgba(45, 42, 38, 0.5) 0%, 
        rgba(56, 51, 47, 0.3) 50%,
        rgba(45, 42, 38, 0.5) 100%);*/
    position: relative;
    border-radius: 2rem;
}

/* DESKTOP: Dark mode sections */
html[data-theme="dark"] main.container > section,
html:not([data-theme]) main.container > section {
    background: linear-gradient(135deg, 
        rgba(58, 54, 49, 0.95) 0%, 
        rgba(45, 42, 38, 0.9) 100%);
    border: 2px solid rgba(79, 74, 69, 0.6);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(209, 148, 58, 0.1) inset;
}

html[data-theme="dark"] main.container > section::before,
html:not([data-theme]) main.container > section::before {
    background: radial-gradient(circle, rgba(209, 148, 58, 0.08) 0%, transparent 70%);
}

/* Subtle pattern overlay untuk dark sections */
html[data-theme="dark"] section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
   /*  background-image: 
        radial-gradient(circle at 20% 50%, rgba(251, 191, 36, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(251, 191, 36, 0.03) 0%, transparent 50%);*/
    pointer-events: none;
    border-radius: inherit;
}

/* Section headers dan container boxes - EXTRA ROUNDED */
section > h2,
section > h3,
.section-header {
    border-radius: 1.5rem;
}

/* Any div that looks like a box */
div[class*="bg-"],
div[class*="border-"],
.container > div {
    border-radius: 1.5rem;
}

/* Modal dan popup - SUPER ROUNDED */
.modal, .modal-content, .modal-dialog,
.popup, .dialog, .overlay {
    border-radius: 2rem !important;
}

/* Form groups dan fieldsets */
.form-group, fieldset, .fieldset,
.input-group {
    border-radius: 1.5rem !important;
}

/* Badges, tags, pills */
.badge, .tag, .pill, .chip,
span[class*="badge"],
span[class*="tag"] {
    border-radius: 1.5rem !important;
}

/* Image containers */
.image-container, .img-wrapper,
img[class*="rounded"] {
    border-radius: 1.5rem !important;
    overflow: hidden;
}

/* Table cells dan rows dengan background */
th[class*="bg-"],
td[class*="bg-"],
tr[class*="bg-"] {
    border-radius: 1rem !important;
}

/* Dropdown menus */
.dropdown-menu, .menu, .context-menu {
    border-radius: 1.5rem !important;
    overflow: hidden;
}

/* ========================================
   CARD STYLING - KONTRAS LEBIH KUAT (OVERRIDDEN BY ABOVE)
   ======================================== */

/* Removed - sudah di-override oleh styling card di atas */

/* ========================================
   TEXT & PARAGRAPH - KONTRAS JELAS
   ======================================== */

/* Light Mode - Text gelap */
p, span, div, li, td, th, label {
    color: #374151;
}

/* Dark Mode - Text terang dengan kontras lebih kuat */
html[data-theme="dark"] p,
html[data-theme="dark"] span,
html[data-theme="dark"] div:not(.card):not(.glass-card),
html[data-theme="dark"] li,
html[data-theme="dark"] td,
html[data-theme="dark"] th {
    color: #e5e7eb !important;
}

html[data-theme="dark"] label {
    color: #f1f5f9 !important;
    font-weight: 500;
}

/* ========================================
   CONTAINER & BACKGROUND UTAMA
   ======================================== */

/* Light Mode - Background utama (sinkron dengan definisi global) - Cream seperti CMS Banggai Old */
html[data-theme="light"] body,
html[data-theme="light"] html {
    background: linear-gradient(180deg, #FDFBF8 0%, #F3EDE4 50%, #FDFBF8 100%) !important;
    background-attachment: fixed !important;
    background-color: #FDFBF8 !important;
}

/* Dark Mode - Background utama gelap (sinkron dengan definisi global) - Coklat seperti CMS Banggai Old */
html[data-theme="dark"] body,
html[data-theme="dark"] html,
html:not([data-theme]) body,
html:not([data-theme]) html {
    background: linear-gradient(180deg, 
        #2D2A26 0%, 
        #38332F 25%,
        #2D2A26 50%,
        #38332F 75%,
        #2D2A26 100%) !important;
    background-attachment: fixed !important;
    background-color: #2D2A26 !important;
}

/* Container dengan background berbeda */
.container {
    background-color: transparent;
}

/* ========================================
   BUTTON STYLING - ROUNDED & MODERN
   ======================================== */

/* Light Mode - Button - MODERN & ELEGANT */
button, .btn {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #111827;
    border: 2px solid #d1d5db;
    border-radius: 1rem !important;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

button::before, .btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

button:hover::before, .btn:hover::before {
    width: 300px;
    height: 300px;
}

button:hover, .btn:hover {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    border-color: var(--accent);
}

/* Dark Mode - Button - Coklat seperti CMS Banggai Old dengan efek modern */
html[data-theme="dark"] button,
html[data-theme="dark"] .btn,
html:not([data-theme]) button,
html:not([data-theme]) .btn {
    background: linear-gradient(135deg, 
        rgba(58, 54, 49, 0.95) 0%, 
        rgba(45, 42, 38, 0.9) 100%);
    color: #E0DACE;
    border: 2px solid rgba(79, 74, 69, 0.8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] button::before,
html:not([data-theme]) button::before,
html[data-theme="dark"] .btn::before,
html:not([data-theme]) .btn::before {
    background: rgba(209, 148, 58, 0.2);
}

/* Hero CTA special styling */
.hero-cta {
    background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%) !important;
    border: 0;
    border-radius: 999px !important;
    padding: 0.95rem 2.75rem !important;
    letter-spacing: 0.02em;
    box-shadow: 0 16px 35px rgba(249, 115, 22, 0.35), 0 2px 8px rgba(249, 115, 22, 0.45);
    position: relative;
    overflow: hidden;
    color: #ffffff !important;
}

.hero-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.45) 0%, transparent 55%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hero-cta:hover::after {
    opacity: 1;
}

.hero-cta:hover {
    box-shadow: 0 20px 45px rgba(249, 115, 22, 0.4), 0 4px 12px rgba(249, 115, 22, 0.45);
    transform: translateY(-3px) scale(1.04);
}

html[data-theme="dark"] .hero-cta,
html:not([data-theme]) .hero-cta {
    background: linear-gradient(135deg, #D1943A 0%, #B47623 100%) !important;
    box-shadow: 0 20px 45px rgba(209, 148, 58, 0.35), 0 4px 12px rgba(209, 148, 58, 0.45);
}

html[data-theme="dark"] button:hover,
html[data-theme="dark"] .btn:hover,
html:not([data-theme]) button:hover,
html:not([data-theme]) .btn:hover 
{
    background: linear-gradient(135deg, 
        rgba(79, 74, 69, 1) 0%, 
        rgba(58, 54, 49, 1) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(251, 191, 36, 0.2);
    border-color: rgba(251, 191, 36, 0.3);
}

/* ========================================
   GLASSMORPHISM EFFECT - WELCOME CARD - SUPER KEREN!
   ======================================== */

/* Welcome Card - Ultra Modern Glassmorphism dengan efek epic */
.glass-card {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.25) 0%, 
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 100%);
    backdrop-filter: blur(30px) saturate(200%);
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 2.5rem;
    padding: clamp(3rem, 5vw, 5rem);
    color: #ffffff;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset,
        0 8px 24px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode - Kurangi shadow yang aneh */
html[data-theme="dark"] .glass-card,
html:not([data-theme]) .glass-card {
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.15) inset,
        0 6px 20px rgba(0, 0, 0, 0.4);
}

.glass-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    animation: shimmer 4s ease-in-out infinite;
    pointer-events: none;
}

.glass-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(209, 148, 58, 0.1) 0%, 
        transparent 50%,
        rgba(233, 200, 147, 0.1) 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.glass-card:hover::after {
    opacity: 1;
}

@keyframes shimmer {
    0%, 100% { 
        transform: translate(-50%, -50%) rotate(0deg); 
        opacity: 0; 
    }
    50% { 
        transform: translate(-50%, -50%) rotate(180deg); 
        opacity: 1; 
    }
}

.glass-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.4),
        0 0 0 2px rgba(255, 255, 255, 0.3) inset,
        0 10px 30px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Dark mode hover - Kurangi shadow panjang */
html[data-theme="dark"] .glass-card:hover,
html:not([data-theme]) .glass-card:hover {
    box-shadow: 
        0 20px 45px rgba(0, 0, 0, 0.6),
        0 0 0 2px rgba(255, 255, 255, 0.2) inset,
        0 8px 25px rgba(0, 0, 0, 0.5);
}

.glass-card h2,
.glass-card h3 {
    color: inherit;
    text-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(255, 255, 255, 0.2),
        0 2px 10px rgba(0, 0, 0, 0.4);
    font-weight: 900;
    letter-spacing: -0.03em;
    position: relative;
    z-index: 2;
}

.glass-card p {
    color: rgba(255, 255, 255, 0.98);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    line-height: 1.8;
    position: relative;
    z-index: 2;
}

.glass-card a,
.glass-card strong {
    color: inherit;
    text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.6);
    position: relative;
    z-index: 2;
}

.glass-card a {
    font-weight: 700;
    transition: all 0.3s ease;
}

.glass-card a:hover {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    transform: scale(1.08);
}

/* ========================================
   HERO BACKGROUND - OPTIMIZED (NO PARALLAX)
   ======================================== */

/* Light Mode - Hero overlay */
.parallax-bg::before {
    background: rgba(0, 0, 0, 0.3) !important;
}

/* Dark Mode - Hero overlay */
html[data-theme="dark"] .parallax-bg::before {
    background: rgba(0, 0, 0, 0.7) !important;
}