/* RESET & BASE */
*{box-sizing:border-box;margin:0;padding:0}:focus{outline:0}
::-webkit-scrollbar{display:none}
a,a:after,a:hover,a:visited{text-decoration:none;color:#fff}

html {
    background-color: #000;
}

body {
    color: #fff;
    font-family: 'Noto Sans', arial, sans-serif;
    line-height: 1.6;
    /* BACKGROUND GIF TILED (Kecil-kecil) */
    background-image: url(https://residensial.ampspeedy.com/assets/asian-cute.gif);
    background-size: 120px; /* Atur ukuran kotak GIF di sini */
    background-repeat: repeat; 
    background-attachment: fixed;
}

article {
    padding-bottom: 150px; /* Memberi ruang lebih agar footer tidak tertutup tombol */
}

footer {
    padding-bottom: 120px; /* Tambahan ruang di bawah footer */
}

/* LOCK LAYOUT DI TENGAH */
main, header, footer {
    max-width: 480px; /* Ukuran standar layar HP */
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.6); /* Overlay hitam lebih solid agar teks jelas */
    box-shadow: 0 0 50px rgba(0,0,0,1);
}

header {
    border-bottom: 2px solid #01c407;
}

/* TOP BAR INFO */
.top-bar {
    background: #01c407;
    color: #fff;
    text-align: center;
    padding: 10px;
    font-weight: bold;
    font-size: 12px;
    letter-spacing: 1px;
}

/* LOGO */
nav {
    background: #111;
    padding: 15px;
    text-align: center;
}
.logo { font-weight: 800; font-size: 22px; color: #fff; letter-spacing: 2px; }
.logo span { color: #f18902; }

/* ISI BERITA */
article {
    padding: 20px;
    padding-bottom: 120px; /* Jarak agar konten tidak tertutup tombol bawah */
}

/* Merapikan teks Meta & News */
.meta {
    padding: 0 10px 10px 10px; /* Tambah padding kiri kanan */
    font-style: italic;
    color: #ccc;
}

.news-content {
    padding: 15px;
    text-align: left; /* Pastikan rata kiri agar mudah dibaca */
}

/* Mempertebal bayangan teks agar makin tajam */
h1, .news-content p, .meta {
    text-shadow: 2px 2px 3px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,0.5);
}

h1 {
    font-size: 22px;
    margin-bottom: 20px;
    line-height: 1.2;
    color: #ffdb3b;
    text-align: center;
    text-transform: uppercase;
}

/* IMAGE HERO (SANTA SEXY) */
.image-container {
    width: 100%;
    margin: 10px 0 25px 0;
}

.block1 {
    position: relative;
    border-radius: 12px;
}

.block1 img {
    width: 100%;
    border-radius: 10px;
    display: block;
    border: 1px solid #444;
}

.block1:after, .block1:before {
    content: '';
    position: absolute;
    right: -4px;
    bottom: -4px;
    background: linear-gradient(45deg, #fb0094, #fff, #490000, #c01d1d, red, #fb0094);
    background-size: 400%;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    z-index: -1;
    animation: steam 5s linear infinite;
    border-radius: 12px;
}

.meta {
    font-size: 12px;
    color: #888;
    margin-bottom: 20px;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
}

.news-content p {
    margin-bottom: 15px;
    font-size: 15px;
    color: #ddd;
}

.alert-box {
    background: #3a0000;
    border-left: 4px solid #ff0000;
    padding: 12px;
    margin: 20px 0;
    font-weight: bold;
    color: #ffcccc;
}

/* STICKY CTA AREA (Floating di bawah) */
.cta-area {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    background: #111;
    padding: 20px;
    text-align: center;
    border-top: 2px solid #f18902;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.8);
    z-index: 1000;
}

/* TOMBOL GLOWING */
.btn2 {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 4rem;
    background-size: 300% 300%;
    border-radius: .8rem;
    transition: .5s;
    animation: gradient_301 5s ease infinite;
    border: double 4px transparent;
    background-image: linear-gradient(#212121, #212121), linear-gradient(137.48deg, #ffdb3b 10%, #aa0000 45%, #8f51ea 67%, #04f 87%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    cursor: pointer;
    text-decoration: none;
}

strong { z-index: 2; font-size: 18px; color: #fff; text-shadow: 0 2px 4px #000; font-weight: 800; }
.guarantee { font-size: 11px; color: #777; margin-top: 8px; }

/* ANIMATIONS */
@keyframes steam { 0% { background-position: 0 0 } 50% { background-position: 400% 0 } 100% { background-position: 0 0 } }
@keyframes gradient_301 { 0% { background-position: 0 50% } 50% { background-position: 100% 50% } 100% { background-position: 0 50% } }

/* EFEK BINTANG DI TOMBOL */
#container-stars { position: absolute; z-index: -1; width: 100%; height: 100%; overflow: hidden; border-radius: .8rem; }
#stars { position: relative; background: transparent; width: 200rem; height: 200rem; }
#stars::after {
    content: ""; position: absolute; top: -10rem; left: -100rem; width: 100%; height: 100%;
    animation: animStarRotate 90s linear infinite;
    background-image: radial-gradient(#fff 1px, transparent 1%); background-size: 50px 50px;
}
@keyframes animStarRotate { from { transform: rotate(360deg) } to { transform: rotate(0) } }

#glow { position: absolute; display: flex; width: 12rem; }
.circle { width: 100%; height: 30px; filter: blur(2rem); animation: pulse_3011 4s infinite; z-index: -1; }
.circle:nth-of-type(1) { background: rgba(254, 83, 186, 0.6); }
.circle:nth-of-type(2) { background: rgba(142, 81, 234, 0.7); }
@keyframes pulse_3011 { 0% { transform: scale(0.75); } 70% { transform: scale(1); } 100% { transform: scale(0.75); } }

footer {
    padding: 20px;
    text-align: center;
    font-size: 11px;
    color: #555;
    background: #000;
}