/* Import font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

:root {
    --overlay-color: rgba(25, 25, 40, 0.8);
    --text-color: #fff;
    --text-secondary-color: #eee;
    --footer-color: #ccc;
    --spinner-color: #4dabf7;
    /* Warna Spesifik Butang */
    --telegram-blue: #0088cc;
    --telegram-blue-hover: #0077b3;
    --instagram-pink: #E1306C;
    --instagram-pink-hover: #C13584;
    --whatsapp-green: #25D366;
    --whatsapp-green-hover: #1DA851;
    /* Warna Widget */
    --widget-bg-color: #f8f9fa; /* Off-white / Light Grey */
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    color: var(--text-color);
    background-color: #191928; /* Fallback */
    overflow-x: hidden;
    line-height: 1.6;
}

/* --- Loading Spinner --- */
#loader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #191928; z-index: 1000; display: flex;
    flex-direction: column; justify-content: center; align-items: center;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out; /* Tiada delay */
    opacity: 1; visibility: visible;
}
.spinner {
    border: 5px solid rgba(255, 255, 255, 0.2); border-left-color: var(--spinner-color);
    border-radius: 50%; width: 45px; height: 45px; animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader-text { text-align: center; margin-top: 20px; color: var(--footer-color); }
.loader-text .name-line {
    margin: 4px 0; padding: 0; font-size: 1.1em; font-weight: 600;
    line-height: 1.3; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.8;
}
#loader.hidden { opacity: 0; visibility: hidden; }
/* --- Tamat Spinner --- */

/* Kontainer chart background */
#chart-background {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: -2; pointer-events: none;
}
#chart-background iframe { width: 100%; height: 100%; border: none; }

/* Overlay Gradient */
.background-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(25, 25, 40, 0.85) 0%, rgba(25, 25, 40, 0.70) 40%, rgba(25, 25, 40, 0.85) 100%);
    z-index: -1;
}

/* Container utama */
.container {
    position: relative; z-index: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; min-height: 100vh;
    padding: 40px 20px; text-align: center; box-sizing: border-box;
}

/* Elemen Content dengan Animasi (Delay diawalkan) */
.animate-on-load { opacity: 0; animation: fadeInUp 0.7s ease-out forwards; }
.profile-pic.animate-on-load { animation-delay: 0.3s; }
.profile-name.animate-on-load { animation-delay: 0.4s; }
.profile-bio.animate-on-load { animation-delay: 0.5s; }
.links-container.animate-on-load { animation-delay: 0.6s; }
.ticker-tape.animate-on-load { animation-delay: 0.8s; }
.footer.animate-on-load { animation-delay: 0.9s; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

/* Widget Ticker Tape (Styling Dikemaskini) */
.tradingview-widget-container.ticker-tape {
    width: 100%; max-width: 800px; margin-top: 30px; margin-bottom: 0;
    background-color: var(--widget-bg-color);
    padding: 10px 15px; /* Padding lebih sikit */
    border-radius: 12px; /* Lebih bulat sikit lagi */
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); /* Shadow lebih halus */
}
.tradingview-widget-container.ticker-tape .tradingview-widget-copyright { display: none; }

/* Gambar profil */
.profile-pic {
    width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 15px;
    border: 4px solid rgba(255, 255, 255, 0.9); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
}

/* Nama Profil */
.profile-name {
    font-size: 2em; font-weight: 700; margin-top: 0; margin-bottom: 8px;
    color: var(--text-color); text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
}

/* Bio Profil */
.profile-bio {
    font-size: 1em; color: var(--text-secondary-color); margin-bottom: 25px; max-width: 85%;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

/* Container Butang */
.links-container {
    width: 100%; display: flex; flex-direction: column; align-items: center; margin-bottom: 0;
}

/* Styling Asas Butang */
.link-button {
    color: white; padding: 15px 25px; margin: 10px 0; width: 90%; max-width: 480px;
    text-decoration: none; border-radius: 10px; font-size: 1.05em; font-weight: 600;
    text-align: center; display: flex; justify-content: center; align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); transition: all 0.25s ease; border: none;
}
.link-button i { margin-right: 10px; font-size: 1.1em; }
.link-button:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 7px 18px rgba(0, 0, 0, 0.35); }

/* Styling Spesifik Untuk Butang */
.links-container .link-button:nth-of-type(1) {
    background-color: var(--telegram-blue); box-shadow: 0 4px 12px rgba(0, 136, 204, 0.3);
}
.links-container .link-button:nth-of-type(1):hover {
    background-color: var(--telegram-blue-hover); box-shadow: 0 7px 18px rgba(0, 119, 179, 0.4);
}
.links-container .link-button:nth-of-type(2) {
    background-color: var(--instagram-pink); box-shadow: 0 4px 12px rgba(225, 48, 108, 0.3);
}
.links-container .link-button:nth-of-type(2):hover {
    background-color: var(--instagram-pink-hover); box-shadow: 0 7px 18px rgba(193, 53, 132, 0.4);
}
.links-container .link-button:nth-of-type(3) {
    background-color: var(--whatsapp-green); box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}
.links-container .link-button:nth-of-type(3):hover {
    background-color: var(--whatsapp-green-hover); box-shadow: 0 7px 18px rgba(29, 168, 81, 0.4);
}

/* Footer */
.footer {
    margin-top: 30px; font-size: 0.85em; color: var(--footer-color);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

/* Mobile Adjustments */
@media (max-width: 767px) {
    .container { padding: 30px 15px; justify-content: center; }
    .tradingview-widget-container.ticker-tape { margin-top: 25px; padding: 8px 12px; border-radius: 10px;} /* Adjust padding mobile */
    .profile-pic { width: 100px; height: 100px; margin-bottom: 12px; }
    .profile-name { font-size: 1.7em; margin-bottom: 6px; }
    .profile-bio { font-size: 0.9em; margin-bottom: 20px; }
    .link-button { padding: 14px 20px; margin: 8px 0; font-size: 1em; width: 95%; }
    .link-button i { margin-right: 8px; font-size: 1em; }
    .footer { margin-top: 25px; font-size: 0.8em; }
    .loader-text .name-line { font-size: 1em; letter-spacing: 1px; }
}