/* =========================================
   MASTER STYLE - EVENT GACOR 2026 (FINAL)
   ========================================= */

/* --- 1. RESET & GLOBAL --- */
* { box-sizing: border-box; }

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px; 
    text-align: center;
    background-color: #FFF8E1; /* Krem Khas Brand */
    color: #333333; 
    margin: 0; padding: 0; padding-bottom: 80px; 
    line-height: 1.6;
}
a { text-decoration: none; color: inherit; }
h1, h2, h3, h4 { margin-top: 0; }

/* --- 2. HEADER & NAVBAR --- */
.navbar {
    display: flex; justify-content: space-between; align-items: center;
    background-color: #d32f2f; padding: 10px 15px;
    position: sticky; top: 0; z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.header-title { font-weight: 900; font-size: 1.2em; letter-spacing: 1px; color:white; margin: 0; }
.text-logo {
    font-family: 'Segoe UI', sans-serif; font-weight: 900; font-size: 1.4em;
    color: #FFD700; text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    text-transform: uppercase; letter-spacing: 1px;
}
.header-btns { display: flex; gap: 8px; }
.btn-sm {
    padding: 6px 14px; border-radius: 20px; font-size: 0.85em; font-weight: 800;
    color: white; text-transform: uppercase; transition: transform 0.2s;
}
.btn-sm:active { transform: scale(0.95); }
.btn-login-top { background: #1565c0; border: 1px solid #0d47a1; } 
.btn-reg-top { background: #2e7d32; border: 1px solid #1b5e20; }

/* --- 3. CONTAINER --- */
.container, .content-container, #game-container {
    max-width: 800px; margin: 20px auto; 
    background: #ffffff; padding: 25px; 
    border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
    border: 1px solid #eee; text-align: left;
}
#game-container { text-align: center; }

/* --- 4. TYPOGRAPHY --- */
h1 { color: #d32f2f; text-align: center; text-transform: uppercase; font-size: 1.6em; margin-bottom: 20px; line-height: 1.3; }
h2 { color: #d32f2f; font-size: 1.4em; margin-top: 30px; border-bottom: 2px solid #eee; padding-bottom: 10px; }
h3 { color: #d32f2f; font-size: 1.2em; margin-top: 25px; }
p, li { color: #444; margin-bottom: 15px; }
strong { color: #d32f2f; font-weight: 700; }

/* --- 5. KOMPONEN KHUSUS JAM GACOR (YANG HILANG TADI) --- */
.intro-box {
    background: linear-gradient(135deg, #d32f2f 0%, #c62828 100%);
    color: white; padding: 25px; border-radius: 10px;
    margin: 20px 0 30px 0; box-shadow: 0 4px 15px rgba(211, 47, 47, 0.3);
}
.intro-box p { color: white; margin-bottom: 15px; }
.intro-box strong { color: #ffd54f; }

.step-box {
    background: #f5f5f5; border-left: 4px solid #ff9800;
    padding: 20px; margin: 20px 0; border-radius: 5px;
}
.step-box h4 { color: #e65100; margin-bottom: 10px; }

.pro-tips {
    background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%);
    color: white; padding: 20px; border-radius: 10px; margin: 25px 0;
}
.pro-tips h4 { color: white; border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 10px; }
.pro-tips p, .pro-tips li { color: white; }

/* --- 6. BOX & ALERTS --- */
.success-box { background: #e8f5e9; border-left: 5px solid #4caf50; padding: 15px; margin: 20px 0; border-radius: 5px; text-align: center; }
.warning-box { background: #ffebee; border-left: 5px solid #d32f2f; padding: 15px; margin: 20px 0; border-radius: 5px; }
.info-box { background: #e3f2fd; border-left: 5px solid #2196f3; padding: 15px; margin: 20px 0; border-radius: 5px; }

/* --- 7. TABEL GACOR --- */
.gacor-table {
    width: 100%; border-collapse: collapse; margin: 20px 0;
    background: #2b0505; color: white; border-radius: 8px; overflow: hidden;
}
.gacor-table th { background: #d32f2f; padding: 12px; color: white; }
.gacor-table td { padding: 10px; border-bottom: 1px solid #444; text-align: center; color: white; }
.badge { padding: 4px 8px; border-radius: 4px; font-size: 0.8em; font-weight: bold; color: black; }
.green { background: #00e676; }
.yellow { background: #ffeb3b; }

/* --- 8. INTERNAL LINKS (SILO BOX) --- */
.internal-links, .silo-box {
    margin-top: 30px; background: #fff; border: 1px solid #eee;
    padding: 20px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.internal-links h3, .silo-box h4 { color: #d32f2f; border-bottom: 2px solid #eee; padding-bottom: 10px; }
.internal-links ul { list-style: none; padding: 0; }
.internal-links li { margin-bottom: 15px; border-bottom: 1px dashed #ddd; padding-bottom: 15px; }
.internal-links a { font-weight: bold; color: #d32f2f; font-size: 1.1em; }

/* --- 9. TOMBOL --- */
.btn-back, .cta-button { 
    display: inline-block; background: #d32f2f; color: white; padding: 12px 30px; 
    text-decoration: none; border-radius: 8px; font-weight: 700; 
    border: 2px solid #b71c1c; margin: 10px 0; width: 100%; text-align: center;
    box-shadow: 0 4px 10px rgba(211,47,47,0.3);
}
.btn-back:hover { background: #b71c1c; transform: translateY(-2px); }

/* --- 10. NAVIGASI BAWAH & BREADCRUMB --- */
.breadcrumb { font-size: 0.85em; color: #666; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #eee; }
.breadcrumb a { color: #d32f2f; font-weight: 600; }
.update-date { text-align: center; font-size: 0.85em; color: #999; font-style: italic; margin-bottom: 20px; }

.app-menu {
    position: fixed; bottom: 0; left: 0; width: 100%;
    background: #fff; border-top: 2px solid #eee;
    display: flex; justify-content: space-around; padding: 10px 0; z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}
.menu-item { flex: 1; text-align: center; color: #666; font-size: 0.8em; font-weight: 600; }
.menu-item span { display: block; font-size: 1.5em; margin-bottom: 3px; }
.menu-item:hover, .menu-item.active { color: #d32f2f; }

footer { text-align: center; padding: 20px; background: #f5f5f5; margin-top: 40px; }
footer a { color: #666; margin: 0 5px; }

/* --- 11. FAQ --- */
details { background: #fafafa; border-left: 4px solid #d32f2f; padding: 15px; border-radius: 5px; margin-bottom: 10px; }
summary { font-weight: 700; color: #d32f2f; cursor: pointer; }

/* =========================================
   TEMA KHUSUS: SWEET BONANZA (CANDY THEME)
   ========================================= */

/* 1. Intro Box Spesial Bonanza */
.intro-bonanza {
    background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%); /* Pink Gradasi */
    color: white; padding: 25px; border-radius: 10px;
    margin: 20px 0 30px 0; box-shadow: 0 4px 15px rgba(233, 30, 99, 0.3);
}
.intro-bonanza p { color: white; margin-bottom: 15px; }
.intro-bonanza strong { color: #ffeb3b; } /* Kuning highlight */

/* 2. Tombol Utama Bonanza */
.btn-bonanza {
    display: block; width: 100%; padding: 15px;
    background: linear-gradient(to bottom, #d81b60, #ad1457);
    color: white; text-align: center; text-decoration: none;
    font-weight: bold; font-size: 1.2em; border-radius: 8px;
    margin: 20px 0; border: 2px solid #880e4f;
    box-shadow: 0 4px 10px rgba(216, 27, 96, 0.3);
    animation: pulse 2s infinite;
}

/* 3. Step Box Variasi (Pola 1 & 2) */
.step-bonanza-1 {
    background: #fce4ec; /* Pink Sangat Muda */
    border-left: 5px solid #e91e63;
    padding: 20px; margin: 20px 0; border-radius: 5px;
}
.step-bonanza-1 h4 { color: #c2185b; margin-top: 0; margin-bottom: 10px; }

.step-bonanza-2 {
    background: #f3e5f5; /* Ungu Sangat Muda */
    border-left: 5px solid #9c27b0;
    padding: 20px; margin: 20px 0; border-radius: 5px;
}
.step-bonanza-2 h4 { color: #7b1fa2; margin-top: 0; margin-bottom: 10px; }

/* 4. Tips Box Bonanza */
.tips-bonanza {
    background: linear-gradient(135deg, #8e24aa 0%, #6a1b9a 100%); /* Ungu Gradasi */
    color: white; padding: 20px; border-radius: 10px; margin: 25px 0;
}
.tips-bonanza h4 { color: #fff; border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 10px; margin-top: 0; }
.tips-bonanza p { color: white; }

/* 5. Tabel Header Bonanza */
.table-bonanza th {
    background: #e91e63 !important; /* Timpa warna merah default */
    color: white; padding: 12px;
}