<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Voucher Ticket</title>
<style type="text/css">
    :root {
        /* --- SKALA UTAMA --- */
        --skala: 0.3; /* Ubah ini saja untuk perbesar/perkecil semua ukuran */
        
        /* --- PENGATURAN UTAMA --- */
        --lebar-voucher: calc(450px * var(--skala));
        --tinggi-voucher: calc(140px * var(--skala));
        --warna-latar: [WARNA_BACKGROUND];
        
        /* --- PENGATURAN FONT --- */
        --font-utama: 'Arial Black', Gadget, sans-serif;
        --warna-font-utama: #000000;

        /* --- PENGATURAN LOGO --- */
        --logo-atas: calc(2px * var(--skala));
        --logo-kiri: calc(20px * var(--skala));
        --lebar-logo: calc(150px * var(--skala));
        --tinggi-logo: calc(48px * var(--skala));

        /* --- PENGATURAN TELEPON --- */
        --telepon-atas: calc(31.6px * var(--skala));
        --telepon-kanan: calc(270px * var(--skala));
        --ukuran-font-telepon: calc(11px * var(--skala));

        /* --- PENGATURAN KODE VOUCHER --- */
        --kode-atas: calc(75px * var(--skala));
        --kode-kiri: calc(140px * var(--skala));
        --ukuran-font-kode: calc(25px * var(--skala));
        --warna-font-kode: #000000;

        /* --- PENGATURAN VALIDITAS --- */
        --validitas-atas: calc(10px * var(--skala));
        --validitas-kanan: calc(125px * var(--skala));
        --ukuran-font-validitas: calc(12px * var(--skala));

        /* --- PENGATURAN HARGA --- */
        --harga-atas: calc(3px * var(--skala));
        --harga-kanan: calc(18px * var(--skala));
        --ukuran-font-harga: calc(14px * var(--skala));

        /* --- PENGATURAN NOMOR URUT --- */
        --serial-atas: calc(5px * var(--skala));
        --serial-kiri: calc(210px * var(--skala));
        --ukuran-font-serial: calc(30px * var(--skala));
    }

    body { margin: 0; padding: 0; font-family: var(--font-utama); }
    .voucher-ticket {
        width: var(--lebar-voucher);
        height: var(--tinggi-voucher);
        background-image: url('https://indradius.net/voucher.png');
        background-color: var(--warna-latar);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        position: relative;
        overflow: hidden;
        color: var(--warna-font-utama);
    }
    .logo, .telepon, .kode-voucher, .validitas, .harga, .serial-number { position: absolute; }
    .logo { top: var(--logo-atas); left: var(--logo-kiri); width: var(--lebar-logo); height: var(--tinggi-logo); }
    .telepon { top: var(--telepon-atas); right: var(--telepon-kanan); font-size: var(--ukuran-font-telepon); font-weight: bold; }
    .kode-voucher { top: var(--kode-atas); left: var(--kode-kiri); font-size: var(--ukuran-font-kode); color: var(--warna-font-kode); text-align: center; font-weight: bold; }
    .validitas { top: var(--validitas-atas); right: var(--validitas-kanan); font-size: var(--ukuran-font-validitas); writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-weight: bold; }
    .harga { top: var(--harga-atas); right: var(--harga-kanan); font-size: var(--ukuran-font-harga); writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-weight: bold; }
    .serial-number { top: var(--serial-atas); left: var(--serial-kiri); font-size: var(--ukuran-font-serial); font-weight: bold; }
</style>
</head>
<body>
    <div class="voucher-ticket">
        <img src="https://indradius.net/logo.png" class="logo" alt="Logo">
        <div class="telepon">{$c['phone']}</div>
        <div class="kode-voucher">{$vs['code']}</div>
        <div class="validitas">Masa Aktif {$vs['validprint']}</div>
        <div class="harga">Harga {$vs['price']}</div>
        <div class="serial-number">{$serial_number}</div>
    </div>
</body>
</html>