<style>
    .atm-card {
        position: relative;
        margin: auto;
        background-size: cover;
        background-position: center;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    }

    .text-block {
        position: absolute;
        color: white;
        font-family: Arial, sans-serif;
    }

    /* Dinamis berdasarkan orientasi */
    <?php if ($orientation == 'landscape'): ?>
    .atm-card {
        width: <?= $width ?>px;
        height: <?= $height ?>px;
    }
    .text-block {
        bottom: 40px;
        left: 50px;
    }
    .text-block h2 { font-size: 48px; margin: 0; }
    .text-block p { font-size: 30px; margin: 2px 0; }

    <?php else: // portrait ?>
    .atm-card {
        width: <?= $width ?>px;
        height: <?= $height ?>px;
    }
    .text-block {
        bottom: 30px;
        left: 40px;
    }
    .text-block h2 { font-size: 40px; margin: 0; }
    .text-block p { font-size: 26px; margin: 2px 0; }
    <?php endif; ?>

    .btn-area { 
        margin-top: 20px; 
        text-align: center;
    }
    .btn-print { 
        padding: 10px 25px; 
        background: #28a745; 
        color: white; 
        border: none; 
        border-radius: 7px; 
        cursor: pointer;
    }
</style>

<div class="atm-card" style="background-image: url('<?= $background ?>')">
    <div class="text-block">
        <h2><?= $nama ?></h2>
        <p>NIS: <?= $nis ?></p>
        <p>Kelas: <?= $kelas ?></p>
    </div>
</div>

<div class="btn-area">
    <button class="btn-print" onclick="window.print()">Print</button>
</div>
