<!DOCTYPE html> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Voucher Ticket - Back</title>
<style type="text/css">
    :root {
        --skala: 0.42;

        /* Ukuran Voucher */
        --lebar-voucher: calc(450px * var(--skala));
        --tinggi-voucher: calc(140px * var(--skala));

        /* Font */
        --font-utama: 'Arial', sans-serif;
        --warna-font: #111;
        --ukuran-font-judul: calc(10px * var(--skala));
        --ukuran-font-isi: calc(9.5px * var(--skala));

        /* Logo */
        --logo-lebar: calc(45px * var(--skala));
        --logo-tinggi: auto;

        /* Serial */
        --ukuran-font-serial: calc(12px * var(--skala));
    }

    body { margin: 0; padding: 0; font-family: var(--font-utama); }
    .voucher-back {
        width: var(--lebar-voucher);
        height: var(--tinggi-voucher);
        background: [WARNA_BACKGROUND]; /* ✅ background merah */
        position: relative;
        overflow: hidden;
        color: var(--warna-font);
        padding: calc(2px * var(--skala));
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /* Background teks berulang */
    .pattern {
        position: absolute;
        inset: 0;
        font-size: calc(14px * var(--skala));
        font-weight: bold;
        color: rgba(255,255,255,0.15);
        line-height: 1.1;
        text-align: center;
        white-space: pre;
        user-select: none;
        pointer-events: none;
    }

    /* Judul */
    .judul {
        font-size: var(--ukuran-font-judul);
        font-weight: bold;
        text-align: center;
        margin: calc(1px * var(--skala)) 0;
        border-bottom: 1px solid #ccc;
        padding-bottom: calc(1px * var(--skala));
        position: relative;
        z-index: 2;
        background: rgba(255,255,255,0.7);
    }

    /* Isi */
    .aturan {
        font-size: var(--ukuran-font-isi);
        line-height: 1.3;
        text-align: center;  /* ✅ semua isi rata tengah */
        position: relative;
        z-index: 2;
        background: rgba(255,255,255,0.7);
        padding: calc(2px * var(--skala));
        border-radius: 3px;
    }

    /* Footer sejajar */
    .footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        z-index: 2;
        background: rgba(255,255,255,0.9);
        padding: calc(2px * var(--skala));
        border-radius: 3px;
    }

    .footer .logo {
        width: var(--logo-lebar);
        height: var(--logo-tinggi);
    }

    .footer .contact {
        font-size: calc(9px * var(--skala));
        font-weight: bold;
        text-align: center;
        flex: 1;
    }

    .footer .serial-number {
        font-size: var(--ukuran-font-serial);
        font-weight: bold;
        border: 1px solid #111;
        padding: 1px 3px;
        border-radius: 2px;
        background: #fff;
        white-space: nowrap;
    }
</style>
</head>
<body>
    <div class="voucher-back">
        <!-- Background teks -->
        <div class="pattern">
            indradius.net   INDRADIUS.NET   indradius.net   INDRADIUS.NET<br>
            INDRADIUS.NET   indradius.net   INDRADIUS.NET   indradius.net<br>
            indradius.net   INDRADIUS.NET   indradius.net   INDRADIUS.NET<br>
            INDRADIUS.NET   indradius.net   INDRADIUS.NET   indradius.net<br>
        </div>

        <div>
            <!-- Syarat & Ketentuan -->
            <div class="judul">Syarat & Ketentuan</div>
            <div class="aturan">
                Voucher hanya berlaku untuk 1 perangkat. Masa aktif dan harga sesuai yang tertera pada voucher. 
                Jika kode voucher bermasalah silakan hubungi penjual di tempat anda membeli voucher. 
                Satu akun tidak bisa digunakan di 2 perangkat bersamaan. 
                Hubungi admin bila ada masalah login.
            </div>

            <!-- Cara Menggunakan -->
            <div class="judul">Cara Menggunakan</div>
            <div class="aturan">
                Hubungkan perangkat Anda ke jaringan WiFi <b>INDRADIUS.NET</b>, 
                lalu buka browser dan masukkan <b>Kode Voucher</b>. 
                Setelah login berhasil, internet siap digunakan.
            </div>
        </div>

        <!-- Footer sejajar -->
        <div class="footer">
            <img src="https://indradius.net/logo.png" class="logo" alt="Logo">
            <div class="contact">CS/WA: 0823-4555-6666</div>
            <div class="serial-number">{$serial_number}</div>
        </div>
    </div>
</body>
</html>