style.css

/* Gaya Dasar untuk Body */
body {
    font-family: sans-serif;
    background-color: #f0f0f0;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    position: relative;
}

/* Gaya untuk Container Status Bar (Jam di kiri, Baterai di kanan) */
.status-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 25px;
    background-color: rgba(0, 0, 0, 0.8);;
    color: white;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 12px;
}

/* Gaya untuk teks waktu di status bar */
.status-text {
    color: white;
    font-family: sans-serif;
}

/* Gaya untuk container status baterai (di dalam status-bar) */
#battery-status {
    display: flex;
    align-items: center;
    color: white;
    font-family: sans-serif;
    font-size: 12px;
    position: relative;
}

/* Gaya untuk bingkai baterai */
.battery-outline {
    width: 24px;
    height: 12px;
    border: 1px solid white;
    border-radius: 2px;
    position: relative;
    margin-right: 4px;
    overflow: hidden;
}

/* Gaya untuk bagian kepala baterai (opsional) */
.battery-outline::after {
    content: '';
    width: 2px;
    height: 6px;
    background-color: white;
    position: absolute;
    top: 2px;
    right: -3px;
    border-radius: 0 1px 1px 0;
}

/* Gaya untuk isi level baterai */
.battery-fill {
    height: 100%;
    width: 0%;
    background-color: limegreen;
    border-radius: 1px;
    transition: width 0.5s ease;
}

/* Gaya untuk teks persentase baterai */
.battery-text {
    color: white;
}

/* Gaya warna isi baterai berdasarkan level (ditambahkan oleh JavaScript) */
.battery-fill.low {
    background-color: red;
}
.battery-fill.medium {
    background-color: orange;
}
.battery-fill.charging {
    background-color: #007bff;
}

/* Gaya untuk icon petir (charging indicator) */
.lightning-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: yellow;
    font-size: 8px;
    z-index: 1;
    display: none;
}


/* Gaya untuk Wrapper Konten Utama (membungkus container dan footer) */
.main-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    margin-top: 25px; /* Beri jarak dari atas agar tidak tertutup status bar */
}

/* Gaya untuk Container Utama */
.container {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 400px;
    width: 100%;
}

/* Wrapper untuk Gambar Profil dan Badge */
.profile-image-wrapper {
    position: relative;
    display: block;
    margin: 0 auto 30px auto;
    width: fit-content;
}

/* Gaya untuk gambar profil */
.profile-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #007bff;
}

/* Gaya untuk shield badge di bawah foto profil */
.profile-badge {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    color: #007bff;
    font-size: 20px;
    background-color: #fff;
    border-radius: 50%;
    padding: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

/* Gaya untuk judul utama */
h1 {
    color: #333;
    margin-bottom: 10px;
    font-size: 28;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Gaya untuk centang biru di samping nama */
.verified-icon {
    color: #1877F2; /* Warna biru Facebook */
    font-size: 15px;
    margin-left: 5px;
    vertical-align: middle;
}

/* Gaya untuk paragraf di bawah judul utama */
p {
    color: #555;
    margin-bottom: 20px;
}


/* Gaya untuk container link tombol */
.links {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Gaya umum untuk semua tombol link */
.link-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 20px;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    font-size: 16px;
    font-weight: bold;
    gap: 10px;
}

/* Gaya spesifik untuk tombol WhatsApp */
.whatsapp-button {
    background-color: #25D366;
}
.whatsapp-button:hover {
    background-color: #1DA851;
}

/* Gaya spesifik untuk tombol Facebook */
.facebook-button {
    background-color: #1877F2;
}
.facebook-button:hover {
    background-color: #145CB3;
}

/* Gaya spesifik untuk tombol Twitter/X */
.twitter-button {
    background-color: #000000;
    color: white;
}
.twitter-button:hover {
    background-color: #333333;
    color: white;
}

/* Gaya spesifik untuk tombol Instagram */
.instagram-button {
    background-color: #E1306C;
}
.instagram-button:hover {
    background-color: #C13584;
}

/* === Gaya Spesifik untuk Tombol Sosial Media Tambahan === */

/* Gaya spesifik untuk tombol TikTok */
.tiktok-button {
    background-color: #000000; /* Warna hitam TikTok */
    color: white;
}
.tiktok-button:hover {
    background-color: #333333; /* Warna hover */
}

/* Gaya spesifik untuk tombol Telegram */
.telegram-button {
    background-color: #229ED9; /* Warna biru Telegram */
    color: white;
}
.telegram-button:hover {
    background-color: #1a8ac1; /* Warna hover */
}

/* Gaya spesifik untuk tombol LinkedIn */
.linkedin-button {
    background-color: #0A66C2; /* Warna biru LinkedIn */
    color: white;
}
.linkedin-button:hover {
    background-color: #084c91; /* Warna hover */
}

/* Gaya spesifik untuk tombol YouTube */
.youtube-button {
    background-color: #FF0000; /* Warna merah YouTube */
    color: white;
}
.youtube-button:hover {
    background-color: #cc0000; /* Warna hover */
}

/* Contoh gaya untuk sosial media lain (opsional) */
/* Kalau kamu mau tambahkan tombol sosial media lain, bisa tambahkan di sini */
/* Misalnya untuk GitHub: */

.github-button {
    background-color: #181717;
    color: white;
}
.github-button:hover {
    background-color: #444444;
}

/* Misalnya untuk Discord: */

.discord-button {
    background-color: #5865F2;
    color: white;
}
.discord-button:hover {
    background-color: #454fbf;
}

/* === Gaya Spesifik untuk Tombol Sosial Media BARU === */
/* Tambahkan kode ini di file style.css */

/* Gaya spesifik untuk tombol Pinterest */
.pinterest-button {
    background-color: #E60023; /* Warna merah Pinterest */
    color: white;
}
.pinterest-button:hover {
    background-color: #B5001A; /* Warna hover */
}

/* Gaya spesifik untuk tombol Reddit */
.reddit-button {
    background-color: #FF4500; /* Warna oranye Reddit */
    color: white;
}
.reddit-button:hover {
    background-color: #CC3700; /* Warna hover */
}

/* Gaya spesifik untuk tombol Spotify */
.spotify-button {
    background-color: #1DB954; /* Warna hijau Spotify */
    color: white;
}
.spotify-button:hover {
    background-color: #178D41; /* Warna hover */
}

/* Gaya spesifik untuk tombol Tumblr */
.tumblr-button {
    background-color: #35465C; /* Warna biru tua Tumblr */
    color: white;
}
.tumblr-button:hover {
    background-color: #222D3C; /* Warna hover */
}

/* Gaya spesifik untuk tombol Steam */
.steam-button {
    background-color: #000000; /* Warna hitam Steam */
    color: white;
}
.steam-button:hover {
    background-color: #333333; /* Warna hover */
}

/* === Gaya untuk Tombol Netral (Bukan Media Sosial) === */
/* Tambahkan kode ini di file style.css */

.netral-button {
    background-color: #6c757d; /* Warna abu-abu netral, Producer-san bisa ganti desu! */
    color: white;
}

.netral-button:hover {
    background-color: #5a6268; /* Warna hover yang sedikit lebih gelap */
}

/* Jika kamu mau warna lain, contoh: Biru umum */
/*
.general-link-button {
    background-color: #007bff;
    color: white;
}
.general-link-button:hover {
    background-color: #0056b3;
}
*/

/* === Akhir Gaya untuk Tombol Netral === */


/* === Akhir Gaya Spesifik untuk Tombol Sosial Media BARU === */


/* Gaya untuk icon di dalam tombol */
.link-button i {
    font-size: 18px;
}

/* Gaya untuk Footer */
footer {
    margin-top: 40px;
    text-align: center;
    padding: 20px;
    color: #777;
    font-size: 14px;
    width: 100%;
}

/* Gaya untuk paragraf di dalam Footer (untuk dua baris) */
footer p {
    margin: 5px 0;
    padding: 0;
}