:root { --primary-color: #ffb80a; --background-color: #2b2922; --content-background: #1f1f1f; --text-color: #ebebeb; --text-color-secondary: #999; --border-color: #333; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Lexend", sans-serif; } body { min-height: 100vh; display: flex; flex-direction: column; background-color: var(--background-color); } a { text-decoration: none; color: var(--primary-color); } .wrapper { width: 100%; margin: 0 auto; display: flex; flex-direction: column; min-height: 100vh; flex-grow: 1; position: relative; /* Penting untuk positioning absolute jika digunakan */ } @media (min-width: 1080px) { .wrapper { width: 480px; } } .index-background { background-image: url('../img/bg.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: scroll; /* Atau 'fixed' jika Anda ingin background diam saat scroll */ /* Jika Anda menerapkan ini ke , pastikan body memiliki min-height: 100vh; */ } .container { width: 100%; max-width: 400px; min-height: 100vh; margin: 0 auto; display: flex; flex-direction: column; align-items: center; background-color: var(--secondary-color); border-radius: 8px; } .container-top { position: sticky; top: 0; z-index: 1; } .marquee-container { position: absolute; top: 0; left: 0; width: 100%; background-color: rgba(0, 0, 0, 0.5); color: white; padding: 10px; box-sizing: border-box; z-index: 1; } marquee { white-space: nowrap; } @supports (-webkit-marquee-increment: 0) { marquee { -webkit-marquee-increment: auto; } } .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .container-content { flex-grow: 1; padding-top: 20px; padding-left: 20px; padding-right: 20px; padding-bottom: 80px; background-color: transparent; z-index: 2; border-radius: 30px 30px 10px 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); color: var(--text-color); } h1, h2, h3 { text-align: center; margin-bottom: 0.1em; font-weight: normal; } h1 { font-size: 1.5em; } h2 { font-size: 1.1em; } h3 { color: var(--text-color-secondary); font-size: 1em; margin-bottom: 2em; } h4 { font-size: 0.9em; color: var(--primary-color); margin: 3em 0 1em 0; font-weight: bold; } p { font-size: 0.8em; line-height: 1.5; margin-bottom: 3em; font-weight: normal; } .no-margin-bottom { margin-bottom: 0 !important; } .site-info { display: grid; grid-template-columns: 2fr 3fr; gap: 10px; width: 100%; max-width: 720px; margin: 0 auto; background-color: var(--content-background); color: var(--text-color); font-size: 0.8em; } .site-info dt { font-weight: bold; padding: 8px; background-color: var(--border-color); border: 1px solid var(--border-color); border-radius: 5px; } .site-info dd { padding: 8px; border: 1px solid var(--border-color); background-color: #222; margin: 0; } .site-info ul { list-style: none; margin: 0; padding: 0; } .site-info ul ul { margin-left: 10px; } .site-info li { padding-bottom: 10px; } .site-info dt:first-child { grid-column: 1 / 3; text-align: center; background-color: var(--primary-color); color: var(--content-background); } .highlight-text { color: var(--primary-color); } .image-section { display: flex; justify-content: center; gap: 10px; margin-top: 20px; } #mainLogo { width: 100%; display: block; margin-left: auto; margin-right: auto; } .image-section > div { text-align: center; } .image-item { display: flex; flex-direction: column; align-items: center; text-align: center; width: 200px; } .image-item img { max-width: 100%; height: 125px; object-fit: cover; margin-bottom: 10px; border-radius: 8px; } .image-item p { font-size: 0.8em; color: var(--text-color); margin: 0; } /* === MODIFIKASI CONTAINER BOTTOM === */ .container-bottom { position: fixed; /* Ubah dari sticky ke fixed */ bottom: 0; /* Menempel persis di bagian bawah viewport */ left: 0; /* Pastikan menempel di kiri */ width: 100%; /* Lebar penuh viewport */ margin: 0; /* Hapus margin auto yang mungkin ada sebelumnya */ border-radius: 0; /* Hapus border-radius agar memenuhi lebar penuh */ z-index: 100; /* Beri nilai yang cukup tinggi agar selalu di atas konten */ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; overflow: hidden; background: linear-gradient(#4e4e4e 0%, #353535 100%); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); } /* === MODIFIKASI STICKY BUTTON CONTAINER === */ .sticky-button-container { position: fixed; /* Ubah dari absolute kembali ke fixed */ bottom: 80px; /* Sesuaikan nilai ini agar pas di atas container-bottom */ right: 5%; /* Menempel 5% dari kanan viewport */ left: auto; /* Pastikan tidak ada konflik dengan 'left: 50%' sebelumnya */ transform: none; /* Hapus transform: translateX(-50%) */ width: auto; /* Biarkan lebarnya sesuai konten (tombol) */ max-width: none; /* Hapus batasan max-width */ display: flex; justify-content: flex-end; /* Tombol tetap di kanan */ padding-right: 0; /* Hapus padding kanan */ z-index: 101; /* Beri nilai sedikit lebih tinggi dari container-bottom */ pointer-events: none; /* Kontainer non-interaktif */ } .sticky-button { background-color: #ed3a45; color: white; border: none; width: 50px; height: 50px; border-radius: 50%; font-size: 1.5em; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transition: background-color 0.3s ease; pointer-events: auto; text-decoration: none; overflow: hidden; } .sticky-button i { margin: 0; transform: translate(0px, 0px); } .sticky-button:hover { background-color: #ffb80a; } .auth-buttons-container { position: absolute; bottom: 200px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 15px; padding: 10px 15px; z-index: 4; } .auth-button { padding: 10px 25px; color: var(--background-color); background-color: var(--primary-color); text-decoration: none; border-radius: 8px; font-weight: bold; text-align: center; border: 1px solid var(--primary-color); transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.1); width: 120px; } .auth-button:hover { background-color: #e6a000; color: var(--background-color); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .bottom-section { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 10px 0; transition: background-color 0.3s ease, box-shadow 0.3s ease; } .bottom-section.active { background-color: var(--primary-color); box-shadow: 0 0 10px #111; } .bottom-section:not(.active) { background-color: transparent; } .bottom-section:not(.active):hover { background-color: rgba(0, 0, 0, 0.2); } .menu-item { display: flex; flex-direction: column; align-items: center; color: #fff; font-size: 1em; font-weight: 900; cursor: pointer; text-decoration: none; } .menu-logo { max-height: 30px; max-width: 100%; height: auto; display: block; margin-bottom: 5px; } .menu-item i { font-size: 1.2em; margin-bottom: 5px; } .menu-text { font-size: 0.7em; } @keyframes pulse-bottom-section { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.9; } 100% { transform: scale(1); opacity: 1; } } #tanggalLengkap { text-align: center; } .p-rtp { font-size: 0.8em; line-height: 1.5; margin-bottom: 1em; font-weight: normal; } .slot-container { display: flex; align-items: center; } .slot-container h4 { display: flex; align-items: center; } .slot-container h4 img { height: 2em; margin-right: 5.5px; vertical-align: middle; } .image-sections-container { display: flex; justify-content: space-around; padding: 20px 0; } .image-section-item { width: 30%; border-radius: 5px; overflow: hidden; } .image-section-item img { display: block; width: 100%; height: auto; } .image-section-item:has(.progress:has(.progress-bar.bg-danger)) img { filter: grayscale(100%); } .progress { margin-top: 15px; height: 20px; background-color: #e0e0e0; border-radius: 5px; overflow: hidden; } .progress-bar { height: 100%; width: 0%; background-color: #4caf50; text-align: center; line-height: 20px; color: white; font-size: 0.8em; border-radius: 5px; transition: width 2.5s ease; } .progress-bar.bg-danger { background-color: #dc3545; } .progress-bar.bg-warning { background-color: #ffc107; color: #333; } .progress-bar.bg-success { background-color: #28a745; } .progress-bar.animated-stripes { background-image: linear-gradient( 45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent ); background-size: 20px 20px; animation: progress-stripes 1s linear infinite; } @keyframes progress-stripes { 0% { background-position: 0 0; } 100% { background-position: 40px 0; } } .image-sections-container-pro { display: flex; justify-content: space-around; padding: 10px 0; } .image-section-item-pro { width: 100%; max-width: 1200px; margin: 20px auto; border-radius: 5px; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .image-section-item-pro img { display: block; width: 100%; height: auto; object-fit: cover; } .h1-pro { margin-bottom: 2em; } .h4-pro { font-size: 0.9em; color: var(--text-color); margin: 0; font-weight: bold; text-align: center; } .p-pro { font-size: 0.8em; line-height: 1.5; margin-bottom: 1em; font-weight: normal; } .p-pro-date { font-size: 0.8em; line-height: 1.5; margin-bottom: 1em; font-weight: normal; text-align: center; color: var(--text-color-secondary); } hr.tebal-tengah { border: none; height: 2px; background: linear-gradient(to right, #12121200, #121212 50%, #12121200); box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); } .page-main-title { color: #FFFFFF; margin-top: 0; } .page-main-subtitle { color: rgb(255, 255, 255); text-align: center; font-size: 1em; margin-top: 5px; margin-bottom: 280px; } /* === MEDIA QUERY UNTUK DESKTOP === */ @media (min-width: 1080px) { /* CONTAINER BOTTOM DI DESKTOP */ .container-bottom { width: 480px; /* Lebar sesuai wrapper */ left: 50%; transform: translateX(-50%); border-radius: 100px; /* Kembalikan border-radius */ margin-bottom: 30px; } /* STICKY BUTTON CONTAINER DI DESKTOP */ .sticky-button-container { width: 480px; /* Lebar sama dengan wrapper */ left: 50%; transform: translateX(-50%); /* Tengah kontainer di tengah viewport */ justify-content: flex-end; /* Tombol tetap di kanan dalam kontainer ini */ padding-right: 20px; /* Tambahkan padding agar ada jarak dari tepi kanan wrapper */ margin-bottom: 30px; } }