/* 
===========================================================
PROGRAM PARTNERSHIP STYLESHEET - DESKTOP VERSION (REVISED)
Warung Sambal Bakar Sampurasun
===========================================================
⚡ Clean Code | Minimal !important | Optimal Performance ⚡
===========================================================
*/

/* ======================
   1. VARIABLES & RESET
======================= */
:root {
    /* Primary Colors - Coklat Tua Premium */
    --primary-dark: #3A1A04;
    --primary-base: #5D2906;
    --primary-light: #8B4513;
    --primary-lighter: #A0522D;
    
    /* Secondary Colors - Orange & Gold */
    --secondary-dark: #B3540C;
    --secondary-base: #D2691E;
    --secondary-light: #E67E22;
    --secondary-lighter: #FF8C00;
    --gold: #FFD700;
    --orange-gradient: linear-gradient(135deg, #FF8C00, #FF6347);
    
    /* Background & Cards */
    --bg-dark: #1A0F0A;
    --bg-card: rgba(90, 40, 6, 0.25);
    --bg-card-hover: rgba(139, 69, 19, 0.4);
    
    /* Text Colors */
    --text-white: #FFFFFF;
    --text-muted: rgba(255, 255, 255, 0.85);
    --text-gold: #FFD700;
    --text-orange: #FFA726;
    
    /* Social Colors */
    --wa-green: #25D366;
    --tiktok-gradient: linear-gradient(135deg, #000000, #25F4EE, #FE2C55);
    --instagram-gradient: linear-gradient(45deg, #F09433, #E6683C, #DC2743, #CC2366, #BC1888);
    
    /* Shadows */
    --shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 10px 25px rgba(210, 105, 30, 0.2);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 20px rgba(255, 140, 0, 0.5);
    --shadow-wa: 0 0 20px rgba(37, 211, 102, 0.3);
    
    /* Spacing */
    --space-xs: 5px;
    --space-sm: 10px;
    --space-md: 20px;
    --space-lg: 30px;
    --space-xl: 50px;
    --space-xxl: 80px;
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 30px;
    --radius-circle: 50%;
    
    /* Transitions */
    --transition-fast: 0.3s ease;
    --transition-medium: 0.5s ease;
    --transition-slow: 0.8s ease;
}

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background: var(--primary-dark);
    color: var(--text-white);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}


/* ======================
   2. NAVIGATION BAR
======================= */
/* ======================
   2. NAVIGATION BAR (REVISED)
   - Teks PUTIH TEBAL semua state
   - Active state dengan background tapi teks tetap putih
======================= */
.navbar {
    background: linear-gradient(135deg, var(--primary-base), var(--primary-dark));
    height: 80px;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    border-bottom: 3px solid var(--secondary-base);
}

.navbar .container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
.navbar-brand {
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

.navbar-brand img {
    height: 50px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    transition: transform var(--transition-fast);
}

.navbar-brand img:hover {
    transform: scale(1.05);
}

/* Desktop Navigation */
.navbar-collapse {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
}

.navbar-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}

/* ===== NAV LINKS - TEKS PUTIH TEBAL UNTUK SEMUA STATE ===== */
.nav-link {
    color: #FFFFFF !important;  /* PUTIH MURNI, paksa dengan important */
    font-weight: 700 !important; /* TEBAL (700) */
    font-size: 0.95rem;
    padding: 12px 18px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Shadow lebih gelap biar kontras */
    letter-spacing: 0.3px;
    opacity: 1 !important;
}

/* Hover State - Tetap Putih */
.nav-link:hover {
    background: linear-gradient(135deg, var(--secondary-light), var(--secondary-base));
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(210, 105, 30, 0.4);
    color: #FFFFFF !important;  /* Tetap putih saat hover */
}

/* Active State - Background Gradient Lebih Gelap, Teks Tetap Putih */
.nav-link.active {
    background: linear-gradient(135deg, #B3540C, #8B4513); /* Warna lebih gelap dari sebelumnya */
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.2), 0 4px 8px rgba(210, 105, 30, 0.5);
    color: #FFFFFF !important;  /* PUTIH TERANG */
    font-weight: 700 !important; /* Pastikan tebal */
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7); /* Shadow lebih kuat */
}

/* Dropdown Toggle - Panah Putih */
.dropdown-toggle::after {
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
    content: "";
    border-top: 0.35em solid #FFFFFF; /* PUTIH */
    border-right: 0.35em solid transparent;
    border-left: 0.35em solid transparent;
    transition: transform var(--transition-fast);
}

.dropdown.show .dropdown-toggle::after {
    transform: rotate(180deg);
    border-top-color: #FFFFFF; /* Tetap putih */
}

/* Dropdown Menu */
.dropdown-menu {
    background: linear-gradient(135deg, var(--primary-light), var(--primary-base));
    border: 2px solid rgba(255, 140, 0, 0.3);
    border-radius: var(--radius-md);
    padding: 10px 0;
    box-shadow: var(--shadow-lg), 0 5px 20px rgba(255, 140, 0, 0.3) inset;
    min-width: 250px;
    margin-top: 12px;
    animation: fadeIn 0.3s ease-out;
    backdrop-filter: blur(10px);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-15px) scale(0.95);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* Dropdown Items */
.dropdown-item {
    color: #FFFFFF !important; /* PUTIH untuk semua dropdown item */
    padding: 12px 24px;
    font-weight: 500;
    font-size: 0.95rem;
    white-space: nowrap;
    transition: all var(--transition-fast);
    border-left: 4px solid transparent;
    display: flex;
    align-items: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    background: transparent;
    margin: 3px 10px;
    border-radius: var(--radius-sm);
}

/* Ikon Dropdown dengan Warna Cerah */
.dropdown-item i {
    font-size: 1.3rem;
    margin-right: 15px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-circle);
    transition: all var(--transition-fast);
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);
}

/* Warna Ikon Spesifik */
.dropdown-item i.bi-calendar-event { color: #00FF7F; }
.dropdown-item i.bi-envelope { color: #00CED1; }
.dropdown-item i.bi-briefcase { color: #FFD700; }
.dropdown-item i.bi-graph-up { color: #32CD32; }
.dropdown-item i.bi-newspaper { color: #FF6347; }

/* Hover Dropdown Item */
.dropdown-item:hover {
    background: rgba(255, 140, 0, 0.15);
    padding-left: 30px;
    border-left: 4px solid var(--secondary-lighter);
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(255, 140, 0, 0.2) inset;
    color: #FFFFFF !important; /* Tetap putih */
}

.dropdown-item:hover i {
    transform: scale(1.2);
    box-shadow: 0 0 15px currentColor;
}

/* Hover Warna Ikon Lebih Intens */
.dropdown-item:hover i.bi-calendar-event { 
    color: #00FF00; 
    text-shadow: 0 0 12px #00FF00;
}
.dropdown-item:hover i.bi-envelope { 
    color: #00BFFF; 
    text-shadow: 0 0 12px #00BFFF;
}
.dropdown-item:hover i.bi-briefcase { 
    color: #FFA500; 
    text-shadow: 0 0 12px #FFA500;
}
.dropdown-item:hover i.bi-graph-up { 
    color: #7FFF00; 
    text-shadow: 0 0 12px #7FFF00;
}
.dropdown-item:hover i.bi-newspaper { 
    color: #FF4500; 
    text-shadow: 0 0 12px #FF4500;
}

/* Dropdown Divider */
.dropdown-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 140, 0, 0.6), transparent);
    margin: 10px 20px;
    box-shadow: 0 0 5px rgba(255, 140, 0, 0.4);
}

/* Navbar Scroll Effect */
.navbar-scrolled {
    height: 70px;
    background: linear-gradient(135deg, rgba(93, 41, 6, 0.98), rgba(139, 69, 19, 0.95));
    backdrop-filter: blur(15px);
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.7), 0 2px 10px rgba(255, 140, 0, 0.2) inset;
}

.navbar-scrolled .navbar-brand img {
    height: 45px;
}

.navbar-scrolled .nav-link {
    padding: 10px 16px;
    height: 42px;
    font-size: 0.92rem;
}

/* Hide Toggler on Desktop */
.navbar-toggler {
    display: none;
}

/* Active Dropdown Indicator */
.dropdown.show .nav-link {
    background: linear-gradient(135deg, #B3540C, #8B4513); /* Warna lebih gelap */
    box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.3), 0 6px 12px rgba(255, 140, 0, 0.7);
    color: #FFFFFF !important; /* Putih */
}


/* Dropdown Toggle */
.dropdown-toggle::after {
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
    content: "";
    border-top: 0.35em solid var(--secondary-lighter);
    border-right: 0.35em solid transparent;
    border-left: 0.35em solid transparent;
    transition: transform var(--transition-fast);
}

.dropdown.show .dropdown-toggle::after {
    transform: rotate(180deg);
    border-top-color: var(--gold);
}

/* Dropdown Menu */
.dropdown-menu {
    background: linear-gradient(135deg, var(--primary-light), var(--primary-base));
    border: 2px solid rgba(255, 140, 0, 0.3);
    border-radius: var(--radius-md);
    padding: 10px 0;
    box-shadow: var(--shadow-lg), 0 5px 20px rgba(255, 140, 0, 0.3) inset;
    min-width: 250px;
    margin-top: 12px;
    animation: fadeIn 0.3s ease-out;
    backdrop-filter: blur(10px);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-15px) scale(0.95);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* Dropdown Items */
.dropdown-item {
    color: var(--text-white);
    padding: 12px 24px;
    font-weight: 500;
    font-size: 0.95rem;
    white-space: nowrap;
    transition: all var(--transition-fast);
    border-left: 4px solid transparent;
    display: flex;
    align-items: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    background: transparent;
    margin: 3px 10px;
    border-radius: var(--radius-sm);
}

/* Ikon Dropdown dengan Warna Cerah */
.dropdown-item i {
    font-size: 1.3rem;
    margin-right: 15px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-circle);
    transition: all var(--transition-fast);
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);
}

/* Warna Ikon Spesifik */
.dropdown-item i.bi-calendar-event { color: #00FF7F; }  /* Hijau Neon */
.dropdown-item i.bi-envelope { color: #00CED1; }        /* Biru Cyan */
.dropdown-item i.bi-briefcase { color: #FFD700; }       /* Emas */
.dropdown-item i.bi-graph-up { color: #32CD32; }        /* Hijau Limau */
.dropdown-item i.bi-newspaper { color: #FF6347; }       /* Merah Tomat */

/* Hover Dropdown Item */
.dropdown-item:hover {
    background: rgba(255, 140, 0, 0.15);
    padding-left: 30px;
    border-left: 4px solid var(--secondary-lighter);
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(255, 140, 0, 0.2) inset;
}

.dropdown-item:hover i {
    transform: scale(1.2);
    box-shadow: 0 0 15px currentColor;
}

/* Hover Warna Ikon Lebih Intens */
.dropdown-item:hover i.bi-calendar-event { 
    color: #00FF00; 
    text-shadow: 0 0 12px #00FF00;
}
.dropdown-item:hover i.bi-envelope { 
    color: #00BFFF; 
    text-shadow: 0 0 12px #00BFFF;
}
.dropdown-item:hover i.bi-briefcase { 
    color: #FFA500; 
    text-shadow: 0 0 12px #FFA500;
}
.dropdown-item:hover i.bi-graph-up { 
    color: #7FFF00; 
    text-shadow: 0 0 12px #7FFF00;
}
.dropdown-item:hover i.bi-newspaper { 
    color: #FF4500; 
    text-shadow: 0 0 12px #FF4500;
}

/* Dropdown Divider */
.dropdown-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 140, 0, 0.6), transparent);
    margin: 10px 20px;
    box-shadow: 0 0 5px rgba(255, 140, 0, 0.4);
}

/* Navbar Scroll Effect */
.navbar-scrolled {
    height: 70px;
    background: linear-gradient(135deg, rgba(93, 41, 6, 0.98), rgba(139, 69, 19, 0.95));
    backdrop-filter: blur(15px);
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.7), 0 2px 10px rgba(255, 140, 0, 0.2) inset;
}

.navbar-scrolled .navbar-brand img {
    height: 45px;
}

.navbar-scrolled .nav-link {
    padding: 10px 16px;
    height: 42px;
    font-size: 0.92rem;
}

/* Hide Toggler on Desktop */
.navbar-toggler {
    display: none;
}


/* ======================
   3. HERO SECTION
======================= */
.program-hero-section {
    position: relative;
    min-height: 95vh;
    display: flex;
    align-items: center;
    background: var(--bg-dark);
    overflow: hidden;
    margin-top: 70px;
}

.hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-video-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
}

.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(56, 53, 51, 0.096), rgba(54, 44, 37, 0));
}

.program-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 60px 0;
}

.program-hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 30px;
    background: linear-gradient(135deg, var(--gold), var(--text-orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.program-hero-subtitle {
    font-size: 1.2rem;
    color: var(--text-muted);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.8;
}


/* ======================
   4. STATISTICS COUNTER
======================= */
.creator-stats-counter {
    border-radius: var(--radius-lg);
    padding: 50px 20px;
    margin: 60px auto;
    max-width: 1100px;
}

.creator-stat-item {
    padding: 30px 15px;
    border-radius: var(--radius-md);
    background: var(--primary-base);
    border: 2px solid transparent;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

/* Border Warna per Item */
.creator-stat-item[data-item="1"] { border-color: #FF8C00; }
.creator-stat-item[data-item="2"] { border-color: #FFA500; }
.creator-stat-item[data-item="3"] { border-color: #D2691E; }
.creator-stat-item[data-item="4"] { border-color: #FFD700; }

.creator-stat-item:hover {
    transform: translateY(-10px);
    background: var(--secondary-light);
}

.creator-stat-number {
    font-size: 3rem;
    font-weight: 800;
    color: var(--text-white);
    margin-bottom: var(--space-xs);
}

.rating-number {
    color: var(--gold);
}

.rating-stars-small {
    margin: 5px 0 15px;
    color: var(--gold);
    display: flex;
    gap: 3px;
}

.creator-stat-label {
    color: var(--text-white);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    font-weight: 600;
    text-align: center;
}


/* ======================
   5. COUNTDOWN TIMER
======================= */
.promo-warning-box {
    background: linear-gradient(135deg, var(--primary-base), var(--primary-dark));
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    border: 2px solid var(--secondary-base);
    box-shadow: var(--shadow-glow);
    position: relative;
    overflow: hidden;
}

.promo-warning-box::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 215, 0, 0.1), transparent);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.warning-title {
    color: var(--gold);
    font-size: 1.3rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: var(--space-md);
}

.countdown-timer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
}

.countdown-item {
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-md);
    padding: 20px 30px;
    min-width: 120px;
    text-align: center;
    border: 2px solid var(--secondary-base);
}

.countdown-number {
    font-size: 3rem;
    font-weight: 800;
    color: var(--text-white);
    display: block;
    line-height: 1;
    text-shadow: 0 0 10px rgba(255, 140, 0, 0.5);
}

.countdown-label {
    color: var(--text-muted);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-top: var(--space-xs);
}

.countdown-separator {
    font-size: 2rem;
    color: var(--gold);
    font-weight: bold;
}

.kuota-sisa {
    font-size: 1.1rem;
}

.text-warning {
    color: var(--gold) !important; /* 1 !important untuk override Bootstrap */
    font-weight: 700;
}


/* ======================
   6. GOOGLE FORM REGISTRATION
======================= */
.program-registration-section {
    margin: var(--space-xxl) 0;
}

.registration-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: var(--space-md);
}

.registration-subtitle {
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* Button Style - Reuse untuk tombol utama */
.btn-warning {
    background: var(--orange-gradient);
    border: none;
    color: var(--text-white);
    font-weight: 600;
    padding: 20px 50px;
    font-size: 1.2rem;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-warning:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-glow);
}

.btn-warning i {
    font-size: 1.3rem;
}


/* ======================
   7. WHATSAPP ADMIN MODAL
   (NEW - SEMENARIK MUNGKIN!)
======================= */
/* Tombol Utama WhatsApp */
/* ======================
   7. WHATSAPP ADMIN MODAL
   (REVISED - RAPIH & PADAT)
======================= */
/* Tombol Utama WhatsApp */
.admin-wa-section {
    margin: var(--space-xl) 0;
}

.wa-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: var(--space-xs);
}

.wa-subtitle {
    color: var(--text-muted);
    font-size: 1rem;
    margin-bottom: var(--space-lg);
}

.btn-success {
    background: linear-gradient(135deg, #25D366, #128C7E);
    border: none;
    color: var(--text-white);
    font-weight: 600;
    padding: 18px 20px;
    font-size: 1.1rem;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-wa);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.btn-success:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(37, 211, 102, 0.4);
}

.btn-success i {
    font-size: 1.5rem;
    margin-right: 5px;
}

.btn-success small {
    font-size: 0.85rem;
    opacity: 0.9;
}

/* MODAL WHATSAPP ADMIN - VERSI RAPIH */
#waAdminModal .modal-content {
    background: linear-gradient(145deg, var(--primary-base), var(--primary-dark));
    border: 2px solid var(--secondary-base);
    border-radius: 20px;
    box-shadow: var(--shadow-lg), 0 0 30px rgba(210, 105, 30, 0.3);
}

/* Header Modal - Lebih Kompak */
#waAdminModal .modal-header {
    background: linear-gradient(135deg, var(--primary-light), var(--primary-base));
    border-bottom: 2px solid var(--secondary-base);
    border-radius: 20px 20px 0 0;
    padding: 15px 20px;
}

#waAdminModal .modal-title {
    color: var(--gold);
    font-weight: 700;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#waAdminModal .modal-title i {
    color: #25D366;
    font-size: 1.5rem;
    filter: drop-shadow(0 0 8px rgba(37, 211, 102, 0.5));
}

#waAdminModal .btn-close {
    filter: invert(1) brightness(0.8);
    transition: all var(--transition-fast);
    padding: 8px;
}

#waAdminModal .btn-close:hover {
    transform: rotate(90deg);
    filter: invert(1) brightness(1.2);
}

/* Body Modal - Padding Lebih Rapat */
#waAdminModal .modal-body {
    padding: 20px;
}

/* Teks Petunjuk */
#waAdminModal .text-center.mb-4 {
    margin-bottom: 15px !important;
}

#waAdminModal .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.85rem;
    margin-bottom: 5px;
}

/* Admin Cards Container */
#waAdminModal .admin-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Admin Item */
#waAdminModal .admin-item {
    margin-bottom: 0;
}

/* Admin Card - Desain Baru Tanpa Background Lingkaran */
#waAdminModal .admin-card {
    background: rgba(139, 69, 19, 0.25);
    border: 1.5px solid rgba(210, 105, 30, 0.4);
    border-radius: 16px;
    transition: all var(--transition-fast);
    overflow: hidden;
}

#waAdminModal .admin-card:hover {
    background: rgba(139, 69, 19, 0.4);
    border-color: var(--secondary-base);
    transform: translateX(5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Card Body */
#waAdminModal .card-body {
    padding: 15px !important;
}

/* Container Avatar - TANPA LINGKARAN! */
#waAdminModal .admin-avatar {
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Avatar Coklat-Orange Tanpa Background Bulat */
#waAdminModal .admin-avatar i {
    font-size: 2.5rem;
    color: #D2691E; /* Coklat orange */
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
    transition: all var(--transition-fast);
}

#waAdminModal .admin-card:hover .admin-avatar i {
    color: #FF8C00; /* Lebih terang saat hover */
    transform: scale(1.05);
    filter: drop-shadow(0 0 10px #FF8C00);
}

/* Info Admin - Semua Elemen Berdekatan */
#waAdminModal .flex-grow-1 {
    line-height: 1.3;
}

#waAdminModal .admin-card h5 {
    color: var(--gold);
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 2px;
}

#waAdminModal .admin-card p.text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.8rem;
    margin-bottom: 2px;
}

#waAdminModal .admin-card .text-success {
    color: #25D366 !important;
    font-weight: 600;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

#waAdminModal .admin-card .text-success i {
    font-size: 0.9rem;
}

/* Icon Panah */
#waAdminModal .bi-box-arrow-up-right {
    color: #25D366;
    font-size: 1.2rem;
    opacity: 0.7;
    transition: all var(--transition-fast);
}

#waAdminModal .admin-card:hover .bi-box-arrow-up-right {
    opacity: 1;
    transform: translate(3px, -3px);
    filter: drop-shadow(0 0 5px #25D366);
}

/* Info Tambahan - Alert */
#waAdminModal .alert-light {
    background: rgba(0, 0, 0, 0.2);
    border: 1px dashed rgba(255, 215, 0, 0.2);
    color: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    font-size: 0.8rem;
    padding: 10px !important;
    margin-top: 15px !important;
    margin-bottom: 5px !important;
}

#waAdminModal .alert-light i {
    color: var(--gold);
    font-size: 0.9rem;
}

/* Modal Footer */
#waAdminModal .modal-footer {
    border-top: 1px solid rgba(210, 105, 30, 0.3);
    padding: 15px;
}

#waAdminModal .btn-light {
    background: transparent;
    border: 1.5px solid var(--secondary-base);
    color: var(--text-white);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 10px;
    border-radius: 10px;
    transition: all var(--transition-fast);
}

#waAdminModal .btn-light:hover {
    background: rgba(210, 105, 30, 0.2);
    border-color: var(--secondary-lighter);
}


/* ======================
   8. BENEFITS SECTION
======================= */
.creator-benefits {
    padding: var(--space-xxl) 0;
}

.benefits-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--text-white);
    text-align: center;
    margin-bottom: var(--space-xxl);
    letter-spacing: 1px;
}

.creator-benefit-card {
    background: #2D1B0E;
    border: 1px solid var(--secondary-base);
    border-radius: var(--radius-lg);
    padding: 35px 20px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.creator-benefit-card:hover {
    transform: translateY(-10px);
    border-color: var(--secondary-lighter);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}

.creator-benefit-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, var(--secondary-base), var(--primary-light));
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-sm);
}

.benefit-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 15px;
    line-height: 1.3;
}

.benefit-description {
    color: #E0E0E0;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: auto;
    padding-bottom: 20px;
}

.promo-code-box {
    background: rgba(210, 105, 30, 0.15);
    border: 1px solid rgba(210, 105, 30, 0.3);
    border-radius: var(--radius-sm);
    padding: 12px;
}

.code-label {
    color: #BBBBBB;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.code-value {
    color: var(--secondary-lighter);
    font-weight: 700;
    font-size: 1rem;
}


/* ======================
   9. HOW IT WORKS
======================= */
.how-it-works {
    margin: var(--space-xxl) 0;
}

.works-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-white);
    text-align: center;
    margin-bottom: var(--space-xl);
    position: relative;
}

.works-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: var(--orange-gradient);
}

.step-card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    border: 1px solid rgba(139, 69, 19, 0.2);
    transition: all var(--transition-medium);
    height: 100%;
    overflow: hidden;
}

.step-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--secondary-base);
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.step-number {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    background: var(--orange-gradient);
    color: var(--text-white);
    font-size: 1.5rem;
    font-weight: bold;
    box-shadow: var(--shadow-sm);
}

.step-card h5 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-white);
    text-align: center;
    margin-bottom: 15px;
}

.step-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: center;
}


/* ======================
   10. PLATFORM SUPPORT
======================= */
.platform-support {
    margin: var(--space-xxl) 0;
    text-align: center;
    padding: 40px;
    background: linear-gradient(135deg, var(--primary-base), var(--primary-dark));
    border-radius: var(--radius-lg);
    border: 2px solid rgba(255, 140, 0, 0.3);
}

.platform-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 40px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.platform-icons {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.platform-icon {
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.platform-icon:hover {
    transform: translateY(-5px);
}

.platform-icon div {
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
    border: 2px solid rgba(255, 255, 255, 0.5);
    min-width: 180px;
    justify-content: center;
}

/* TikTok Gradient */
.platform-icon:first-child div {
    background: linear-gradient(135deg, #000000, #25F4EE, #FE2C55, #000000);
}

/* Instagram Gradient */
.platform-icon:last-child div {
    background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D, #F56040, #FCAF45);
}

/* Ikon & Teks Putih */
.platform-icon i,
.platform-icon span {
    color: var(--text-white);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.platform-icon:hover div {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    transform: scale(1.05);
    border-color: rgba(255, 255, 255, 0.8);
}

.platform-follow-text {
    color: var(--text-white);
    font-size: 1rem;
    margin-top: 30px;
    font-weight: 500;
}

.platform-follow-text i {
    color: var(--gold);
}


/* ======================
   11. TERMS & CONDITIONS
======================= */
.quick-terms {
    margin: var(--space-xxl) 0;
}

.terms-note {
    background: var(--primary-base);
    border-radius: var(--radius-md);
    padding: 35px;
    border-left: 5px solid var(--secondary-base);
    box-shadow: var(--shadow-sm);
}

.terms-note h6 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-white);
    margin-bottom: var(--space-md);
}

.terms-note i {
    color: var(--secondary-base);
    font-size: 2.5rem;
}

.terms-note ul {
    list-style-type: none;
}

.terms-note li {
    color: var(--text-muted);
    margin-bottom: 12px;
    padding-left: 25px;
    position: relative;
    line-height: 1.5;
}

.terms-note li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--secondary-base);
    font-weight: bold;
}


/* ======================
   12. FOOTER
======================= */
.footer-modern {
    background: var(--primary-dark);
    color: var(--text-white);
    padding: 40px 0 20px;
    margin-top: 20px;
    border-top: 3px solid var(--secondary-base);
}

.footer-logo {
    height: 60px;
    object-fit: contain;
}

.footer-modern p,
.footer-modern span,
.footer-modern a {
    color: var(--text-white);
    font-size: 0.95rem;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.footer-modern h5 {
    color: var(--text-white);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 1.1rem;
}

.footer-links a:hover {
    color: var(--secondary-lighter);
    padding-left: 8px;
}

/* Ikon Kontak dengan Warna */
.footer-contact li {
    display: flex;
    align-items: center;
}

.footer-contact i {
    font-size: 1.2rem;
    min-width: 28px;
}

.icon-email { color: #ff4d4d; }
.icon-phone { color: #00d4ff; }
.icon-whatsapp { color: var(--wa-green); }
.icon-clock { color: var(--gold); }

.social-links a {
    display: inline-block;
    transition: var(--transition-fast);
}

.social-links a:hover {
    transform: translateY(-5px) scale(1.1);
    color: var(--secondary-lighter);
}

.footer-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 1;
}

.footer-modern .text-center p {
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}


/* ======================
   13. UTILITY CLASSES
======================= */
.text-gradient {
    background: linear-gradient(135deg, var(--gold), var(--secondary-lighter));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.glow-effect {
    transition: all var(--transition-fast);
}

.glow-effect:hover {
    filter: drop-shadow(0 0 10px currentColor);
}

/* Animasi */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.pulse-hover:hover {
    animation: pulse 0.5s ease infinite;
}

/* ======================
   END OF STYLESHEET
======================= */