* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* 1. Daftarkan Font Tebal (OTF) */
@font-face {
    font-family: 'MinecraftTen';
    src: url('MinecraftTen.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}
/* 2. Daftarkan Font Tipis (TTF) */
@font-face {
    font-family: 'MinecraftSeven';
    src: url('MinecraftSevenv4.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
/* 3. Daftarkan Font Body Text yang Baru (Noto Sans) */
@font-face {
    font-family: 'NotoSans';
    src: url('NotoSans.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
/* Mengatur container list launcher agar menumpuk rapi ke bawah */
.app-launcher-list {
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px; /* Jarak vertikal antar baris aplikasi */
    width: 100%;
}

/* Mengatur baris item agar teks dan tombol sejajar horizontal */
.app-launcher-list li {
    display: flex;
    align-items: center;
    gap: 10px; /* Jarak horizontal antara teks titik dua (:) dan tombol */
}

/* Mengatur teks nama aplikasi launcher */
.app-launcher-list .app-name {
    font-family: 'NotoSans', sans-serif !important;
    font-weight: 700 !important;
    color: #ffffff;
    font-size: 15px;
    min-width: 130px; /* Mengunci lebar teks agar posisi semua tombol di kanannya sejajar lurus vertikal */
    display: inline-block;
}

/* Mengatur ukuran proporsional tombol Google Play dan GitHub badge */
.app-launcher-list .badge-img {
    height: 35px; /* Mengunci tinggi tombol agar serasi dengan ukuran teks */
    width: auto;
    object-fit: contain;
    display: block;
    transition: transform 0.2s ease;
}
/* Mengunci ukuran badge GitHub secara langsung agar pas dan seimbang */
.github-badge {
    height: 48px !important;    /* Menaikkan tinggi gambar inti agar pas dengan Google Play */
    margin-top: -1px;           /* Penyesuaian posisi atas bawah */
    margin-left: -2px;          /* Penyesuaian posisi kiri kanan */
}


/* Animasi membesar halus saat tombol disorot kursor */
.app-launcher-list .badge-img:hover {
    transform: scale(1.05);
}

/* Mengatur ukuran logo Android dan Windows */
.os-icon {
    width: 35px;            /* Lebar ikon */
    height: 35px;           /* Tinggi ikon */
    object-fit: contain;
    margin-bottom: 8px;     /* Jarak antara logo dengan teks di bawahnya */
}
/* 2. Kurangi juga jarak atas pada pembungkus judul OS */
.os-title-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-top: 10px !important;    /* DIUBAH: Dikurangi dari 25px menjadi 10px agar lebih menempel ke atas */
    margin-bottom: 12px !important;
}

/* Memberi jarak dan pemisah visual antar blok panduan (Android/Windows) */
.os-guide-block {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 0, 0, 0.25);
}

.os-guide-block:first-of-type {
    margin-top: 25px;
}


/* Memastikan ukuran logo OS tetap konsisten dan rapi */
.os-title-wrapper .os-icon {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain;
    margin-bottom: 0 !important; /* Menghilangkan margin bawah lama agar lurus dengan teks */
}

/* Merapikan teks judul OS agar jaraknya pas */
.os-title-wrapper h2 {
    margin: 0 !important;    /* Menghilangkan margin bawaan agar tidak merusak posisi */
    line-height: 1;
    font-family: 'MinecraftSeven', sans-serif !important; /* Ganti dari MinecraftTen ke MinecraftSeven */
    font-size: 22px !important; /* Disesuaikan karena MinecraftSeven proporsinya beda dari MinecraftTen */
}

/* Terapkan font TEBAL ke Judul dan Sub-judul */
h1, h2, .desc-title-bold {
    font-size: 32px !important;    /* Diperbesar dari 24px */
    font-family: 'MinecraftTen', sans-serif !important;
}
/* Terapkan font TIPIS ke isi teks, deskripsi, dan list */
body, p, .desc-text-light, .desc-list li, .file-name, .file-size {
    font-family: 'NotoSans', sans-serif !important;
}
/* Mengatur sub-judul di kotak deskripsi bawah */
/* Cari kode .desc-title-bold di bagian bawah file style.css Anda */
.desc-title-bold {
    font-family: 'MinecraftTen', sans-serif !important;
    font-weight: 700 !important;
    color: #ff0000;
    font-size: 32px !important;
    
    /* UBAH BAGIAN INI: Tambahkan jarak atas agar tidak menempel */
    margin-top: 30px !important;    /* Diubah dari 25px menjadi 45px agar teks turun */
    margin-bottom: 15px !important; /* Jarak bawah ke arah teks Android */
    letter-spacing: 0.5px;
}

/* 2. Mengatur ISI TEKS (Font Tipis) agar LEBIH BESAR dan mudah dibaca */
.desc-text-light, .desc-list li {
    font-family: 'NotoSans', sans-serif !important;
    color: #ffffff; /* Mengubah teks judul menjadi putih bersih */
}
/* Mengatur kotak pembungkus video YouTube */
.video-container {
    width: 100%;
    max-width: 700px;
    height: auto;             /* Mengubah tinggi kaku menjadi otomatis */
    aspect-ratio: 16 / 9;     /* Mengunci aspek rasio asli YouTube */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    border: 1px solid #ff0000;
}
/* Mengatur Kotak Deskripsi Panjang yang Baru */
/* Cari kode ini di bagian bawah file style.css Anda */
.description-full-container {
    background-color: #181818;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    border: 1px solid #ff0000;
    width: 100%;
    max-width: 1340px; 
    
    /* UBAH BAGIAN INI: Kurangi nilainya agar kotaknya bergeser ke atas */
    margin-top: 0px;      /* DIUBAH: Dikurangi dari 30px menjadi 10px */
    margin-bottom: 40px; 
}

.description-full-container h2 {
    color: #ff0000;    /* Warna judul deskripsi merah khas Raiden */
    font-size: 20px;
    margin-bottom: 15px;
}
.description-full-container p {
    color: #ffffff;    /* Warna teks isi deskripsi putih bersih */
    font-size: 14px;
    line-height: 1.6;  /* Mengatur jarak antar baris agar nyaman dibaca */
    margin-bottom: 10px; /* Jarak antar paragraf agar tidak menempel */
}

/* Memastikan frame video di dalamnya mengisi penuh ruang pembungkus */
.video-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    object-fit: cover; /* KODE UTAMA: Memaksa video memotong sedikit bagian samping agar penuh tanpa garis hitam */
}
/* Mengatur kotak hitam sosmed agar selalu menempel mati di bawah layar */
.social-media-container {
    background-color: #181818; 
    padding: 12px 25px;
    border-radius: 12px;
    display: flex;
    justify-content: center;   
    align-items: center;
    gap: 20px;                 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    border: 1px solid #ff0000; /* Menambahkan garis tepi tipis agar kotak terlihat tegas */

    /* KODE UTAMA UNTUK MENEMPEL DI LAYAR */
    position: fixed;           /* Mengunci posisi elemen dari gulungan scroll */
    bottom: 20px;              /* Jarak konstan dari batas bawah layar browser */
    left: 50%;                 /* Geser posisi titik awal ke tengah */
    transform: translateX(-50%) translateY(0); /* Trik CSS agar kotak benar-benar berada pas di tengah layar */
    width: auto;               /* Lebar kotak otomatis mengikuti jumlah ikon di dalamnya */
    z-index: 9999;             /* Memastikan kotak sosmed selalu berada di lapisan paling depan */

    /* Animasi smooth saat muncul/menghilang ketika scroll */
    opacity: 1;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Kelas ini ditambahkan lewat JS saat user sedang scroll */
.social-media-container.is-hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(20px); /* Turun sedikit ke bawah sambil memudar */
    pointer-events: none; /* Mencegah ikon bisa diklik saat sedang tersembunyi */
}
/* Mengatur ukuran gambar ikon sosial media */
.social-link img {
    width: 32px;               /* Lebar ukuran ikon */
    height: 32px;              /* Tinggi ukuran ikon */
    object-fit: contain;
    transition: transform 0.2s ease; /* Menambahkan efek animasi halus saat disentuh */
}

/* Efek animasi interaktif saat kursor diarahkan ke ikon */
.social-link img:hover {
    transform: scale(1.5);    /* Ikon akan sedikit membesar/menonjol saat disentuh kursor */
}

/* Mengatur pembungkus logo agar berada di tengah halaman */
.top-banner-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 25px; /* Jarak antara logo Minecraft dengan kotak hitam di bawahnya */
}

/* Mengatur ukuran dan responsivitas logo Minecraft */
.minecraft-title-logo {
    max-width: 550px;    /* Batas lebar maksimal logo (bisa Anda sesuaikan) */
    width: 90%;          /* Agar logo otomatis mengecil secara rapi saat dibuka di HP */
    height: auto;        /* Menjaga proporsi gambar agar tidak gepeng */
    object-fit: contain;
}

/* Mengatur ukuran dan bentuk icon gambar PNG */
.file-icon-img {
    width: 32px;         /* Lebar gambar */
    height: 32px;        /* Tinggi gambar */
    object-fit: contain; /* Memastikan gambar tidak gepeng/terdistorsi */
}
/* Memaksa gambar ikon utama agar berukuran kecil dan rapi */
.main-page-icon {
    width: 120px !important;   /* Mengunci lebar gambar menjadi 120 pixel */
    height: 120px !important;  /* Mengunci tinggi gambar menjadi 120 pixel */
    object-fit: contain;
    border-radius: 12px;       /* Membuat sudut gambar sedikit melengkung halus */
    margin: 0 auto 15px auto;  /* Memposisikan otomatis di tengah dan memberi jarak bawah */
    display: block;            /* Memastikan gambar mengambil ruang terpisah */
}
/* Untuk browser modern seperti Chrome, Edge, Firefox, dan Safari */
html {
    scrollbar-color: #ff0000 #222222; /* Warna batang (merah) & warna latar (hitam/gelap) */
    scrollbar-width: smooth;           /* Membuat ukuran scrollbar menjadi proporsional */
}

/* Khusus untuk browser berbasis Webkit (Chrome, Safari, Edge versi lama) agar lebih detail */
::-webkit-scrollbar {
    width: 12px; /* Mengatur lebar scrollbar */
}

/* Mengatur warna latar belakang jalur scrollbar */
::-webkit-scrollbar-track {
    background: #1a1a1a; 
}

/* Mengatur warna batang scrollbar yang digeser */
::-webkit-scrollbar-thumb {
    background: #ff2222; 
    border-radius: 6px;  /* Membuat ujung batang scrollbar melengkung halus */
    border: 3px solid #1a1a1a; /* Memberi jarak aman antara batang dan jalur luar */
}
/* Efek saat batang scrollbar diarahkan oleh kursor (hover) */
::-webkit-scrollbar-thumb:hover {
    background: #cc1111; /* Warna merah akan sedikit lebih gelap saat disentuh */
}
body {
    /* Mengatur gambar sebagai background penuh */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    padding: 40px 20px 120px 20px;
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('img/background.jpg');
    background-size: cover;          /* Memastikan gambar menutup seluruh layar */
    background-position: center;     /* Posisi gambar selalu di tengah */
    background-attachment: fixed;    /* Gambar tetap diam saat halaman di-scroll */
    background-repeat: no-repeat;    /* Mencegah gambar berulang/pecah */
}
/* Mengatur tata letak video (kiri) dan download card (kanan) */
.main-content-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    width: 100%;
    max-width: 1400px; /* Diperbesar dari 1100px agar layout bisa melebar maksimal */
    margin-top: 10px;
}


/* Responsif: Jika dibuka di HP yang layarnya sempit, otomatis otomatis menumpuk ke bawah lagi */
@media (max-width: 900px) {
    .main-content-row {
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }
}
.container {
    background: #181818;
    padding: 31px; /* Ditambah sedikit agar ruang dalam kotak hitam lebih lega */
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    border: 1px solid #ff0000;
    width: 100%;
    max-width: 600px; /* Diperbesar dari 500px agar sejajar dengan video baru */
    height: auto;
}
h1 {
    color: #ffffff; /* Mengubah teks judul menjadi putih bersih */
    font-size: 24px;
    margin-bottom: 8px;
    text-align: center;
}
.subtitle {
    color: #bbb; /* Mengubah deskripsi menjadi abu-abu terang agar tidak silau */
    font-size: 12px;
    margin-bottom: 25px;
    text-align: center;
}
/* Mencegah nama file menabrak tombol download */
.download-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px; /* Memberi jarak aman antara teks dan tombol */
    width: 100%;
    margin-bottom: 18px; /* Jarak antar kartu download agar tidak berdempetan */
}

.download-card:last-child {
    margin-bottom: 0; /* Kartu terakhir tidak perlu jarak bawah */
}
.file-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1; /* Membuat teks mengambil ruang sisa secara fleksibel */
    min-width: 0; /* Mencegah teks meluap keluar */
}
/* Mengatur warna nama file menjadi putih bersih */
.file-name {
    font-weight: 600;
    color: #ffffff !important; 
    font-size: 14px;
    word-break: break-word; /* Otomatis membuat baris baru jika teks terlalu panjang */
    line-height: 1.4;
}
/* Mengatur warna ukuran file menjadi abu-abu terang */
.file-size {
    font-size: 11px;
    color: #cccccc !important; 
    margin-top: 4px;
}

/* Memastikan daftar download card turun ke bawah penuh setelah baris video-container */
.main-content-row {
    flex-wrap: wrap; /* Mengizinkan konten di bawahnya turun dengan rapi */
}
.file-icon {
    font-size: 28px;
}
.download-btn {
    background-color: #ff2222; /* Tombol merah */
    color: white;
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'MinecraftTen', sans-serif !important;
    letter-spacing: 0.5px;

    /* Stroke hitam ala tombol Mojang */
    border: 2px solid #000000;

    /* Highlight terang di atas, gelap di bawah (efek 3D/bevel) + bayangan luar */
    box-shadow:
        inset 0 3px 0 rgba(255, 255, 255, 0.35),
        inset 0 -4px 0 rgba(0, 0, 0, 0.35),
        0 3px 0 rgba(0, 0, 0, 0.6);

    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.1s ease;
}

.download-btn:hover {
    background-color: #ab2e2e; /* Sedikit lebih terang saat hover, ala Mojang */
}

.download-btn:active {
    /* Efek tombol "ditekan" ke dalam */
    transform: translateY(2px);
    box-shadow:
        inset 0 3px 0 rgba(255, 255, 255, 0.25),
        inset 0 -2px 0 rgba(0, 0, 0, 0.35),
        0 1px 0 rgba(0, 0, 0, 0.6);
}