:root {
    --bg-color: #f0f2f5;
    --text-color: #2c3e50;
    --text-color-light: #6c757d;
    --card-bg: #ffffff;
    --header-bg: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.08);
    --border-color: #e9e9e9;
    --green-color: #28a745;
    --blue-color: #007bff;
    --red-color: #dc3545;
    --purple-color: #6f42c1;
    --yellow-color: #ffc107;
    --teal-color: #20c997;
    --orange-color: #fd7e14;
    --transition-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body.dark-mode {
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --text-color-light: #a0a0a0;
    --card-bg: #1e1e1e;
    --header-bg: #1e1e1e;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --border-color: #333;
}

html { scroll-behavior: smooth; }
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.7;
}

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

/* Header & Overlay Styles */
header { background-color: var(--header-bg); box-shadow: 0 2px 4px var(--shadow-color); padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: var(--anchor-ad-top-offset, 0px); z-index: 998; }
.header-left { display: flex; align-items: center; gap: 15px; }
.header-logo img { height: 30px; display: block; }
.header-btn { background: none; border: none; font-size: 1.4em; color: var(--text-color-light); cursor: pointer; padding: 5px; }
.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: var(--bg-color); z-index: 1000; opacity: 0; visibility: hidden; transition: var(--transition-smooth); overflow-y: auto; }
.overlay.active { opacity: 1; visibility: visible; }
#menu-overlay { transform: translateX(-100%); }
#menu-overlay.active { transform: translateX(0); }
.overlay-header { display: flex; align-items: center; padding: 15px; border-bottom: 1px solid var(--border-color); }
.overlay-header .logo-full { height: 35px; display: block; margin-left: 5px; }
.overlay-close-btn { font-size: 1.8em; margin-left: auto; color: var(--text-color-light); background: none; border: none; cursor: pointer; padding: 5px; }
.menu-search-box { padding: 15px; }
.menu-search-box input { width: 100%; padding: 12px 15px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 1em; background-color: var(--card-bg); color: var(--text-color); }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 15px; margin-top: 15px; }
.menu-grid-item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; border-radius: 12px; text-decoration: none; color: white; font-weight: 600; gap: 10px; cursor: pointer; border: none; font-size: 1em; transition: transform 0.2s; }
.menu-grid-item:hover { transform: translateY(-3px); }
.menu-grid-item i { font-size: 2em; }
.menu-grid-item.home { background-color: var(--blue-color); }
.menu-grid-item.games { background-color: var(--red-color); }
.menu-grid-item.apps { background-color: var(--purple-color); }
.menu-grid-item.blog { background-color: var(--yellow-color); color: white; }
.menu-grid-item.faq { background-color: var(--teal-color); }
.menu-grid-item.dark-mode { background-color: var(--orange-color); }
.menu-grid-item.telegram-bg { background-color: #0088cc; }
.menu-grid-item.whatsapp-bg { background-color: #25D366; }

/* Breadcrumb, Download, Article, Footer Styles */
.breadcrumb { margin-bottom: 20px; font-size: 0.9em; color: var(--text-color-light); }
.breadcrumb a { color: var(--blue-color); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.download-wrapper, .article-content { background-color: var(--card-bg); border-radius: 16px; padding: 25px; margin-top: 20px; box-shadow: 0 4px 12px var(--shadow-color); }

.app-header { display: flex; align-items: center; gap: 25px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); }
.app-icon img { width: 90px; height: 90px; border-radius: 20px; box-shadow: 0 4px 10px var(--shadow-color); display: block; }
.app-title { display: flex; flex-direction: column; justify-content: center; }
.app-title h1 { font-size: 1.7em; margin: 0; color: var(--text-color); line-height: 1.3; }
.app-title p { color: var(--text-color-light); font-size: 1em; margin: 4px 0 0 0; }
.download-details h2 { font-size: 1.4em; margin-bottom: 15px; color: var(--text-color); }

.details-list { padding-top: 10px; }
.detail-item { padding: 12px 5px; border-bottom: 1px solid var(--border-color); }
.detail-item:last-child { border-bottom: none; }
.detail-label { font-size: 0.9em; font-weight: 600; color: var(--text-color); }
.detail-value { font-size: 1.05em; font-weight: normal; color: var(--text-color-light); line-height: 1.4; }

.article-content { margin-top: 25px; }
.article-content h2 { font-size: 1.4em; margin-bottom: 15px; }
.article-content p { color: var(--text-color-light); margin-bottom: 15px; }

.footer-container { background-color: var(--card-bg); border-radius: 16px; padding: 20px; box-shadow: 0 4px 12px var(--shadow-color); margin-top: 50px; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding: 0; }
.section-title-group { display: flex; align-items: center; gap: 10px; }
.section-icon { width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; background-color: #e9ecef; border-radius: 50%; color: #6c757d; font-size: 1.2em; }
.section-header h2 { font-size: 1.4em; color: var(--text-color); }
.footer-links-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
.footer-link { background-color: var(--bg-color); color: var(--text-color); padding: 8px; border-radius: 8px; text-align: center; text-decoration: none; font-size: 0.8em; font-weight: 500; transition: all 0.3s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.footer-link:hover { background-color: var(--blue-color); color: white; }
.footer-social-icons { display: flex; justify-content: center; gap: 25px; padding: 20px 0; border-top: 1px solid var(--border-color); }
.footer-social-icons a { color: var(--text-color-light); font-size: 1.5em; transition: all 0.3s ease; }
.footer-social-icons a:hover { color: var(--blue-color); transform: scale(1.1); }
.footer-copyright { text-align: center; font-size: 0.8em; color: var(--text-color-light); padding-top: 15px; border-top: 1px solid var(--border-color); }

/* --- GAYA BARU UNTUK DETAIL LIST YANG LEBIH RAPIH --- */
:root {
    --orange-light-bg: #fef4e8;
    --gray-light-bg: #f1f3f5;
    --red-light-bg: #fdeeee;
    --green-light-bg: #eaf7ee;
    --blue-light-bg: #e6f2ff;
}
body.dark-mode {
    --orange-light-bg: #4d321e;
    --gray-light-bg: #343a40;
    --red-light-bg: #4f2d2f;
    --green-light-bg: #23422c;
    --blue-light-bg: #21354d;
}
.detail-header i { display: none; }
.detail-value { padding-left: 0; }
.detail-header { margin-bottom: 2px; }
.detail-item { display: flex; align-items: center; gap: 15px; }
.detail-icon-wrapper { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.detail-icon-wrapper i { font-size: 1.1em; display: block; }
.detail-text-content { display: flex; flex-direction: column; }
.icon-bg-orange { background-color: var(--orange-light-bg); }
.icon-orange { color: var(--orange-color); }
.icon-bg-gray { background-color: var(--gray-light-bg); }
.icon-gray { color: var(--text-color-light); }
.icon-bg-red { background-color: var(--red-light-bg); }
.icon-red { color: var(--red-color); }
.icon-bg-green { background-color: var(--green-light-bg); }
.icon-green { color: var(--green-color); }
.icon-bg-blue { background-color: var(--blue-light-bg); }
.icon-blue { color: var(--blue-color); }

/* GAYA BARU UNTUK TOMBOL DOWNLOAD DI DALAM LIST */
.download-button-new {
    background-color: var(--blue-color);
    color: white;
    text-decoration: none;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9em;
    transition: background-color 0.2s;
}
.download-button-new:hover { background-color: #0056b3; }

/* --- GAYA BARU UNTUK BAGIAN CARA INSTALL (ACCORDION MODERN) --- */
.modern-accordion { margin-top: 25px; }
.modern-accordion details {
    background-color: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 4px 12px var(--shadow-color);
    margin-bottom: 15px;
    overflow: hidden; /* Penting untuk animasi */
    transition: background-color 0.3s ease;
}
.modern-accordion details[open] {
    background-color: var(--card-bg); /* Tetap sama atau sedikit lebih terang saat terbuka */
}
.modern-accordion summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 25px;
    font-size: 1.25em; /* Ukuran teks lebih besar */
    font-weight: 700;
    color: var(--text-color);
    cursor: pointer;
    list-style: none; /* Menghilangkan marker default */
    outline: none;
    position: relative;
    z-index: 1; /* Agar bayangan tidak menimpa teks */
}
.modern-accordion summary::-webkit-details-marker { display: none; }
.modern-accordion summary::after {
    content: '\f078'; /* Ikon panah bawah */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-left: 15px;
    transition: transform 0.3s ease;
    color: var(--text-color-light);
    font-size: 0.8em; /* Ukuran ikon panah */
}
.modern-accordion details[open] summary::after {
    transform: rotate(180deg);
}

.modern-accordion .accordion-content {
    padding: 0 25px 20px 25px; /* Padding di bagian bawah dan samping */
    color: var(--text-color-light);
    line-height: 1.8;
    opacity: 0;
    max-height: 0;
    transition: opacity 0.4s ease-out, max-height 0.4s ease-out; /* Animasi saat buka/tutup */
    overflow: hidden;
}

.modern-accordion details[open] .accordion-content {
    opacity: 1;
    max-height: 500px; /* Cukup besar untuk menampung konten */
    padding-top: 15px; /* Tambahkan padding atas saat terbuka */
    border-top: 1px solid var(--border-color); /* Garis pemisah */
}

.modern-accordion ol { padding-left: 20px; }
.modern-accordion li { margin-bottom: 12px; }

.modern-accordion li strong { color: var(--text-color); } /* Teks penting tetap tebal */
}
/* --- GAYA DESKRIPSI ARTIKEL V5 (UKURAN FONT TETAP & DIJAMIN) --- */
.article-content .section-header {
    margin-bottom: 15px;
    padding-bottom: 0;
    border-bottom: none;
}

.article-content .section-header .section-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.article-content .section-header h2 {
    line-height: 1;
    margin: 0;
}

.article-body {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    padding: 20px;
    border-radius: 12px;
}

.article-body p {
    /* MENGGUNAKAN UKURAN FONT TETAP (PIXEL) UNTUK KONSISTENSI TOTAL */
    font-size: 13px; /* Ukuran font diatur ke 13px agar TIDAK PERNAH berubah atau terasa membesar */
    color: var(--text-color-light);
    line-height: 1.6; /* Jarak baris disesuaikan untuk font kecil */
    letter-spacing: 0.2px; /* Sedikit spasi antar huruf agar lebih mudah dibaca */
    margin: 0;
}

/* --- TATA LETAK ARTIKEL BARU --- */

/* Wrapper utama untuk bagian artikel */
.article-content {
    background-color: var(--card-bg);
    border-radius: 16px;
    padding: 20px;
    margin-top: 25px;
    box-shadow: 0 4px 12px var(--shadow-color);
    border: 1px solid var(--border-color);
}

/* Kontainer isi artikel, untuk membatasi lebar teks */
.article-body {
    max-width: 75ch; /* Membatasi lebar teks agar tidak lebih dari ~75 karakter per baris */
    margin: 0 auto;  /* Membuat teks berada di tengah jika layar lebar */
}

/* Tipografi & Keterbacaan */
.article-body p,
.article-body li {
    font-size: 1.05em;      /* Sedikit memperbesar teks artikel agar lebih nyaman dibaca */
    line-height: 1.8;       /* Menambah jarak antar baris untuk sirkulasi udara */
    color: var(--text-color);
    margin-bottom: 1.2em;   /* Jarak antar paragraf */
}

.article-body h2 {
    font-size: 1.6em;
    margin-top: 2em;        /* Jarak lebih besar di atas judul bagian */
    margin-bottom: 0.8em;
    line-height: 1.3;
    color: var(--text-color);
    padding-bottom: 0.3em;
    border-bottom: 2px solid var(--border-color); /* Garis bawah subtil untuk H2 */
}

.article-body h3 {
    font-size: 1.3em;
    margin-top: 1.8em;
    margin-bottom: 0.6em;
    line-height: 1.4;
    color: var(--text-color);
}

/* Styling untuk elemen-elemen keren */
.article-body a {
    color: var(--blue-color);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.article-body a:hover {
    text-decoration: underline;
    opacity: 0.8;
}

.article-body hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 2.5em 0;
}

/* Styling untuk Daftar Isi (Table of Contents) */
.table-of-contents {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    padding: 15px 20px;
    border-radius: 12px;
    margin: 20px 0;
}

.table-of-contents strong {
    display: block;
    margin-bottom: 10px;
    font-size: 1.1em;
}

.table-of-contents ol {
    padding-left: 20px;
    margin: 0;
}

.table-of-contents li {
    margin-bottom: 8px;
    font-size: 1em;
}

.table-of-contents li a {
    font-weight: 500;
}