/* style.css */
/* Pengaturan dasar untuk seluruh halaman web (body) */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #f0f2f5; /* Warna latar belakang abu-abu muda */
    display: flex; /* Mengatur tata letak flexbox untuk menengahkan konten */
    justify-content: center; /* Menengahkan konten secara horizontal */
    padding: 80px; /* Jarak padding di sekeliling halaman */
}

/* Wadah utama untuk seluruh konten di dalam halaman */
.container {
    max-width: 3600px; /* Lebar maksimum wadah */
    width: 100%;
    background-color: #fff; /* Warna latar belakang putih */
    padding: 120px; /* Jarak padding di dalam wadah */
    border-radius: 32px; /* Sudut membulat pada wadah */
    box-shadow: 0 16px 24px rgba(0, 0, 0, 0.1); /* Efek bayangan */
}

/* Pengaturan untuk judul halaman (h1) */
h1 {
    text-align: center; /* Teks rata tengah */
    color: #333; /* Warna teks gelap */
}

/* Wadah untuk formulir unggah file */
.form-container {
    margin-top: 80px; /* Jarak dari elemen di atasnya */
    border-bottom: 4px solid #ccc; /* Garis bawah pemisah */
    padding-bottom: 80px; /* Jarak padding di bawah garis */
}

/* Pengaturan untuk judul di dalam formulir (h2) */
h2 {
    text-align: center; /* Teks rata tengah */
}

/* Wadah untuk grup formulir (label dan input) */
.form-group {
    margin-bottom: 60px; /* Jarak bawah antar grup formulir */
    text-align: center; /* Konten rata tengah */
}

/* Pengaturan untuk label formulir */
label {
    display: block; /* Menjadikan label sebagai elemen blok */
    margin-bottom: 20px; /* Jarak di bawah label */
    font-weight: bold; /* Teks tebal */
}

/* Pengaturan untuk input file */
input[type="file"] {
    margin: 0 auto; /* Menengahkan input file */
    display: block;
}

/* Pengaturan untuk semua tombol */
button {
    background-color: #007bff; /* Warna latar belakang biru */
    color: white; /* Warna teks putih */
    padding: 40px 80px; /* Jarak padding di dalam tombol */
    border: none;
    border-radius: 16px; /* Sudut membulat pada tombol */
    cursor: pointer; /* Kursor berubah menjadi pointer saat diarahkan */
    display: block;
    margin: 40px auto; /* Menengahkan tombol */
    font-family: 'Poppins', sans-serif;
}

/* Efek hover saat kursor diarahkan ke tombol */
button:hover {
    background-color: #0056b3; /* Warna latar belakang biru lebih gelap */
}

/* Wadah untuk menampung semua pratinjau kartu */
.card-preview-container {
    margin-top: 70px; 
    display: flex; /* Mengatur tata letak flexbox */
    flex-wrap: wrap; /* Mengizinkan item untuk pindah ke baris baru */
    justify-content: center; /* Menengahkan item secara horizontal */
}

/* Styling untuk Kartu - diterapkan pada kedua sisi (depan dan belakang) */
.card {
    width: 1316px; /* Lebar kartu (329px * 4) */
    height: 860px; /* Tinggi kartu (215px * 4) */
    background-size: contain; /* Mengatur ukuran gambar latar belakang agar pas */
    background-repeat: no-repeat; /* Mencegah pengulangan gambar latar belakang */
    background-position: center top; /* Posisi gambar latar belakang */
    border: 4px solid #ccc; /* Garis tepi kartu */
    border-radius: 32px; /* Sudut membulat */
    position: relative;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2); /* Efek bayangan */
    margin: 40px; /* Jarak antar kartu */
    overflow: hidden; /* Menyembunyikan konten yang meluap */
    break-inside: avoid; /* Mencegah pemisahan kartu saat dicetak */
    box-sizing: border-box; /* Memastikan padding dan border termasuk dalam lebar/tinggi */
    flex-shrink: 0;
}

/* Styling khusus untuk bagian depan kartu */
.card-front {
    background-image: url('assets/bg_depan.png'); /* Gambar latar belakang depan */
    color: #800080; /* Warna teks */
    padding: 60px; /* Padding di dalam kartu */
    display: flex;
    justify-content: space-between; /* Menata item dengan jarak yang sama */
    align-items: flex-start; /* Meratakan item di bagian atas */
    padding-top: 300px; /* Padding atas khusus untuk data */
}

/* Styling khusus untuk bagian belakang kartu */
.card-back {
    background-image: url('assets/bg_belakang.png'); /* Gambar latar belakang belakang */
    color: #333;
    padding: 40px;
    display: grid; /* Mengatur tata letak grid */
    grid-template-rows: 57% 43%; /* Membagi tinggi menjadi dua baris */
    background-size: cover; /* Mengisi seluruh area dengan gambar latar */
}

/* Wadah atas pada kartu belakang */
.card-back .top-container {
    padding: 20px;
    text-align: center;
    height: 100%;
}

/* Judul "KARTU PERPUSTAKAAN" */
.card-back .header {
    font-weight: bold;
    font-size: 40px; /* Ukuran font judul */
    margin-bottom: 16px; /* Jarak bawah */
}

/* Poin-poin syarat dan ketentuan */
.card-back .terms {
    margin-top: 16px;
    font-size: 35px; /* Ukuran font poin-poin */
    line-height: 1.4; /* Jarak antar baris (tetap asli agar tidak terlalu renggang) */
    text-align: left;
    list-style: none;
    padding-left: 0;
}

/* Item dalam daftar poin-poin */
.card-back .term-item {
    display: grid;
    grid-template-columns: 60px auto; /* Mengatur kolom untuk nomor dan teks */
    margin-bottom: 12px;
    text-align: justify;
}

/* Nomor pada item poin-poin */
.card-back .term-item span {
    text-align: left;
    font-weight: normal; /* DIUBAH: Penomoran poin tidak tebal */
}

/* Teks pada item poin-poin */
.card-back .term-item p {
    margin: 0;
    text-align: justify;
}

/* Wadah data di bagian depan kartu */
.card-front .data-field-container {
    width: 75%;
}

/* Setiap baris data di bagian depan kartu */
.card-front .data-field {
    display: grid;
    grid-template-columns: 320px 20px auto; /* Kolom untuk label, titik dua, dan nilai */
    margin-bottom: 8px; /* Jarak bawah */
    font-size: 35px; /* Ukuran font data */
}

/* Label data (misal: "Nama") */
.card-front .label {
    font-weight: bold;
    text-align: left;
}

/* Titik dua (:) */
.card-front .colon {
    text-align: center;
}

/* Nilai data (misal: "Budi Santoso") */
.card-front .value {
    overflow: hidden; /* Menyembunyikan teks yang meluap */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* DIUBAH: Membatasi teks hingga 3 baris */
    -webkit-box-orient: vertical;
}

/* Wadah untuk foto dan tanggal pendaftaran */
.foto-container {
    text-align: center;
    width: 25%;
    margin-left: 40px;
}

/* Wadah bingkai foto */
.card-front .foto-placeholder {
    width: 280px; /* Lebar bingkai foto (70px * 4) */
    height: 360px; /* Tinggi bingkai foto (90px * 4) */
    border: 4px solid #ccc;
    background-color: #eee;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 40px;
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.3);
}

/* Gambar foto di dalam bingkai */
.card-front .foto-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Memastikan gambar memenuhi bingkai */
    border-radius: 40px;
}

/* Teks tanggal pendaftaran */
.tanggal-pendaftaran {
    font-size: 25px; /* Ukuran font tanggal */
    margin-top: 12px;
    font-weight: bold;
    color: #800080;
}

/* Penyesuaian tata letak bagian bawah kartu belakang */
.bottom-container {
    display: flex;
    justify-content: space-between;
    height: 100%;
    align-items: center;
}

/* Bagian untuk barcode */
.barcode-section {
    width: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 32px;
    padding: 20px;
    margin: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Bagian untuk alamat web */
.web-address-section {
    width: 50%;
    padding: 20px;
    margin: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px; /* Ukuran font alamat web */
}

/* Teks "Berlaku Hingga" */
.masa-berlaku-container {
    text-align: center;
    font-size: 25px; /* Ukuran font */
    font-weight: bold;
    margin: 0;
    color: #333;
}

/* Wadah untuk barcode */
.barcode-container {
    text-align: center;
    margin: 0;
}

.barcode-container svg {
    margin: 0;
}

/* Label nomor NPM di bawah barcode */
.card-back .barcode-label {
    font-size: 25px; /* Ukuran font NPM */
    margin: 0;
}

/* Teks footer (alamat web) */
.card-back .footer {
    text-align: right;
    font-size: 25px; /* Ukuran font footer */
    font-weight: bold;
    color: #333;
}

/* Wadah tombol aksi */
.action-buttons {
    text-align: center;
    margin-top: 80px;
}

/* Tombol aksi */
.action-buttons button {
    display: inline-block;
    margin: 0 20px;
}