.kartu-pelajar, .kartu-dispen {
    position: relative; /* Pastikan kontainer relatif terhadap posisioning absolut anak-anaknya */
    width: 100%; /* Atur lebar sesuai kebutuhan */
    height: auto; /* Sesuaikan tinggi otomatis sesuai konten */
}

.kartu-pelajar img.bg-kartu, .kotak-bantu {
    width: 100%; /* Mengatur gambar agar memenuhi lebar kontainer */
    height: auto; /* Sesuaikan tinggi gambar secara proporsional */
    display: block; /* Menghindari jarak bawah di bawah gambar */
}

.nama-siswa, .foto-siswa, .nis, .keterangan, .alamat, .ttd, .qr-dispensasi, .ket-atas, .status, .ket-identitas, .kelas, .kegiatan, .hari, .tanggalDispen, .pukul, .kotak-nis, .kotak-nisn, .kotak-nama{
    position: absolute; /* Posisi absolut untuk menempatkan elemen di atas gambar */
    padding: 5px 10px; /* Ruang di sekitar teks */
}

.nis {
    top: -23%;
    left: 0%;
    font-size: 66%;
    color: aliceblue;
}
.nama-siswa {
    top: 35%; /* Jarak dari atas */
    left: 33%; /* Jarak dari kiri */
    font-size: 150%;

}
.jurusan {
    font-size: 80%;

}
.foto-siswa {
    top: 18%; /* Jarak dari atas */
    left: 9%; /* Jarak dari kiri */
    max-width: 25%; /* Jarak dari atas */
}


.keterangan {
    top: 78%; /* Jarak dari atas */
    left: 9%; /* Jarak dari kiri */
    font-size: 90%; /* Ukuran font untuk jurusan */
}
.alamat {
    top: 78%; /* Jarak dari atas */
    left: 9%; /* Jarak dari kiri */
    font-size: 90%; /* Ukuran font untuk jurusan */
    width: 70%;
}

.kecil .nama-siswa {
    top: 35%; /* Jarak dari atas */
    left: 33%; /* Jarak dari kiri */
    font-size: 110%;
    width: 60%;

}
.kecil .nis {
    top: 26%;
    left: 33%;
    font-size: 66%;
    color: aliceblue;
}
.ttd{
    top: 55%; /* Jarak dari atas */
    left: 70%;
    width: 20%;
    height: 30%;
    float: right;
    font-size: 45%;
}
.kecil .jurusan {
    font-size: 70%;

}
.kecil  .foto-siswa {
    top: 18%; /* Jarak dari atas */
    left: 9%; /* Jarak dari kiri */
    max-width: 26%; /* Jarak dari atas */
}


.kecil .keterangan {
    top: 64%; /* Jarak dari atas */
    left: 9%; /* Jarak dari kiri */
    font-size: 80%; /* Ukuran font untuk jurusan */
}
.kecil .alamat {
    top: 75%; /* Jarak dari atas */
    left: 9%; /* Jarak dari kiri */
    font-size: 47%; /* Ukuran font untuk jurusan */
    width: 77%;
}

/* kotak bantu */
.kotak-bantu{
    opacity: 50%;
    z-index: 100;
}
.kotak-nisn{
   top: 24%;
    left: 34%;
    height: 4%;
    width: 32%;
    background-color: blue;
}
.kotak-nis{
    top: 29%;
    left: 34%;
    height: 5%;
    width: 43%;
    background-color: blue;
}
.kotak-nama{
    top: 38%;
    left: 34%;
    height: 8%;
    width: 56%;
    background-color: blue;
}
.watermark-cap {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -40%) rotate(-0deg);
    opacity: 0.50;
    width: 150%;
    z-index: 2;
    pointer-events: none;
}

.watermark-cap-text {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-20deg);
    font-size: 4rem;
    font-weight: bold;
    color: red;
    opacity: 0.1;
    z-index: 2;
    pointer-events: none;
}

@media (max-width: 480px) {

    .kecil .nama-siswa, h1 {
        font-size: 85%; /* Ukuran font untuk perangkat mobile */
    }

    .kecil .alamat{
        top: 73%;
        width: 80%;
        font-size: 50%;
    }
    .kecil .keterangan{
        top: 65%;
        font-size: 45%;
    }
    .kecil .kartu-pelajar{
        margin-bottom: 100px;
    }
    .kartu-pelajar {
       margin-bottom: 70px;
    }

}
@media print{
    .kotak-bantu{
        display: none;
    }
}



/* Gambar background utama */
.kartu-dispen img.bg-kartu {
  width: 100%;
  height: auto;
  max-height: 90vh;
  object-fit: contain;    /* menjaga proporsi gambar */
  display: block;
  margin: 0 auto;
}

/* QR Code di atas gambar */
.kartu-dispen img.qr-dispensasi {
    top: 4%;
    left: 22%;
    width: 25%;
    height: auto;
}

/* Keterangan di atas gambar */
.kartu-dispen .ket-atas {
    left: 46%;
    top: 7%;

}

.ket-atas .tanggal {
    font-size: 88%;
    width: 80%;
}
.ket-atas .status {
    top: 118%;
    left: 0%;

}

.kartu-dispen .ket-identitas {
    left: 23%;
    top: 45%;
    width: 77%;
}
.ket-identitas .nama-siswa {
    left: 0%;
    font-size: 96%;
    width: 70%;
    top: 249%;

}
.ket-identitas .kelas {
    left: 0%;
    font-size: 83%;
    top: 88%;
}
.ket-identitas .kegiatan {
    left: 0%;
    font-size: 83%;
    top: 800%;
}
.ket-identitas .hari {
    left: 0%;
    top: 1500%;
}
.ket-identitas .tanggalDispen {
    left: 0%;
    top: 2000%;
}
.ket-identitas .pukul {
    left: 0%;
    top: 2500%;
}