@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --muted: #b7b2c1; --line: #34313d; --lime: #d8ff58; }
* { box-sizing: border-box; }
body { margin: 0; background: #0e0d12; color: #f9f8fb; font: 15px/1.55 Manrope, Arial; }
.shell { max-width: 520px; margin: auto; padding: 34px 24px 48px; min-height: 100vh; background: radial-gradient(circle at 85% 2%, #382c61 0, transparent 34%), linear-gradient(155deg, #11101a, #0e0d12 55%); }
header { padding: 8px 3px 28px; }
.brand { font: 800 17px Manrope; letter-spacing: 0; word-spacing: 3px; }
.brand span { color: var(--lime); }

/* --- DESAIN HERO BANNER BARU --- */
.hero-banner {
    background: url('/poster.jpg') top center/cover no-repeat;
    border-radius: 24px;
    margin-bottom: 30px;
    min-height: 400px; /* Sedikit ditinggikan agar proporsional */
    display: flex;
    align-items: flex-end; /* Memaksa teks turun ke bagian paling bawah */
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,0.08);
}

/* Gradasi gelap keseluruhan gambar */
.hero-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Gradasi dibuat jauh lebih gelap di bagian bawah (warna #0e0d12 pekat) */
    background: linear-gradient(to bottom, rgba(14,13,18,0.1) 0%, rgba(14,13,18,0.5) 40%, #0e0d12 95%);
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
    padding: 60px 24px 28px;
    width: 100%;
    /* Tambahan gradasi ekstra khusus tepat di belakang teks agar 100% terbaca */
    background: linear-gradient(to top, #0e0d12 10%, rgba(14,13,18,0.85) 60%, transparent 100%);
}

.hero-content .badge {
    display: inline-block;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: #111;
    background: var(--lime);
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 700;
    margin-bottom: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5); /* Bayangan pada badge */
}

.hero-title {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.04em;
    margin: 0 0 10px 0;
    color: #ffffff;
    /* Efek bayangan teks agar kontras maksimal */
    text-shadow: 0 2px 14px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.8);
}

.hero-desc {
    font-size: 14px;
    line-height: 1.6;
    color: #e0dce8; /* Warna abu-abu terang agar lebih terbaca */
    margin: 0;
    /* Efek bayangan deskripsi */
    text-shadow: 0 2px 10px rgba(0,0,0,0.9);
}

/* --- BENEFITS & CHECKOUT --- */
.benefits { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; margin-bottom: 28px; }
.benefits div { display: flex; gap: 16px; align-items: center; padding: 11px 4px; color: var(--lime); font-size: 20px; }
.benefits span { color: var(--muted); font-size: 12px; line-height: 1.6; }
.benefits b { display: block; color: #fff; font-size: 13px; line-height: 1.5; }
.checkout { background: #191720; border: 1px solid #3a3546; border-radius: 22px; padding: 21px; }
.price { border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 18px; }
.price span, .price small { display: block; color: var(--muted); font-size: 12px; }
.price strong { display: block; font-size: 29px; letter-spacing: -.04em; margin: 5px 0; }
label { display: block; font-size: 12px; font-weight: 800; margin: 16px 0 6px; }
input { width: 100%; margin-top: 7px; border: 1px solid #403b4c; background: #121118; color: #fff; border-radius: 10px; padding: 14px; font: 14px Manrope; }
.note { font-size: 11px; line-height: 1.65; color: var(--muted); margin: 16px 0; }

/* Animasi klik pada tombol */
button { width: 100%; border: 0; border-radius: 11px; padding: 16px; background: var(--lime); color: #111; font: 800 14px Manrope; cursor: pointer; transition: transform 0.2s; }
button:active { transform: scale(0.98); }
button span { float: right; font-size: 19px; }

footer { text-align: center; margin-top: 28px; color: #8d8797; font: 10px/1.6 'DM Mono'; }

/* --- RESPONSIVITAS MOBILE --- */
@media(max-width:600px){
    .shell { padding-bottom: 118px; }
    header { padding-bottom: 16px; }
    
    /* Penyesuaian ukuran teks & banner di HP */
    .hero-banner { min-height: 340px; border-radius: 20px; }
    .hero-title { font-size: 26px; }
    
    .benefits div:nth-child(3) span { font-size: 0; }
    .benefits div:nth-child(3) span b { font-size: 0; }
    .benefits div:nth-child(3) span b:after { content: 'Akses Mudah'; display: block; color: #fff; font-size: 13px; line-height: 1.5; }
    .benefits div:nth-child(3) span:after { content: 'Akses langsung dari Telegram kapan saja'; display: block; color: var(--muted); font-size: 12px; line-height: 1.6; }
    
    form button { position: fixed; z-index: 20; bottom: 16px; left: 24px; width: calc(100% - 48px); box-shadow: 0 12px 32px #000b; }
}