/* =========================
   BODY
========================= */

body{

margin:0;
padding:15px;

font-family:'Segoe UI',Arial,sans-serif;

background:
linear-gradient(
rgba(255,255,255,.85),
rgba(255,255,255,.85)
),
url('bg-islami.png');

background-size:cover;
background-position:center;
background-attachment:fixed;

}


/* =========================
   CONTAINER
========================= */

.container{

max-width:700px;
margin:auto;

}


/* =========================
   FORM AWAL
========================= */

.card-awal{

background:white;

padding:30px;

border-radius:25px;

box-shadow:
0 10px 30px rgba(0,0,0,.12);

text-align:center;

}

.logo{

width:85px;

margin-bottom:15px;

}

h1{

margin:0;

color:#0A5C2F;

font-size:30px;

}

h2{

margin-top:10px;

color:#444;

font-size:22px;

}

.tahun{

color:#777;

margin-bottom:25px;

}

.form-group{

margin-bottom:18px;

text-align:left;

}

.form-group label{

display:block;

font-weight:600;

margin-bottom:8px;

}

.form-group input{

width:100%;

padding:14px;

border:1px solid #ccc;

border-radius:12px;

font-size:16px;

box-sizing:border-box;

}

.form-group small{

color:#888;

}

.btn-cek{

width:100%;

padding:15px;

background:#0A5C2F;

color:white;

border:none;

border-radius:12px;

font-size:18px;

font-weight:bold;

cursor:pointer;

}

.btn-cek:hover{

background:#0D7A40;

}


/* =========================
   HASIL
========================= */

#hasil{

margin-top:20px;

}


/* =========================
   KARTU LULUS
========================= */

.kartu-lulus{

background:
linear-gradient(
180deg,
#0B7A49,
#065E38
);

color:white;

padding:25px;

border-radius:28px;

box-shadow:
0 12px 35px rgba(0,0,0,.18);

}


/* =========================
   HEADER
========================= */

.header-lulus{

text-align:center;

}

.logo-hasil{

width:80px;

margin-bottom:12px;

}

.nama-sekolah{

font-size:24px;

font-weight:700;

}

.tahun-hasil{

margin-top:8px;

opacity:.9;

}


/* =========================
   STATUS
========================= */

.status-area{

text-align:center;

margin-top:25px;

margin-bottom:25px;

}

.status-kecil{

font-size:16px;

letter-spacing:4px;

}

.status-besar{

font-size:58px;

font-weight:800;

color:#FFD54F;

line-height:1.1;

}

.status-ditangguhkan{

color:#FFD54F;

}


/* =========================
   IDENTITAS
========================= */

.identitas{

background:white;

color:#333;

padding:22px;

border-radius:22px;

}

.row-data{

margin-bottom:18px;

}

.row-data span,
.dua-kolom span{

display:block;

font-size:13px;

color:#777;

margin-bottom:6px;

}

.row-data strong,
.dua-kolom strong{

font-size:18px;

display:block;

}

.dua-kolom{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

margin-bottom:18px;

}


/* =========================
   PESAN
========================= */

.pesan{

background:
rgba(255,255,255,.12);

padding:20px;

border-radius:18px;

margin-top:20px;

}

.pesan h3{

margin-top:0;

text-align:center;

}

.pesan p{

line-height:30px;

text-align:left;

}


/* =========================
   VERIFIKASI
========================= */

.verifikasi{

text-align:center;

margin-top:25px;

padding:18px;

background:
rgba(255,255,255,.10);

border-radius:15px;

font-size:14px;

line-height:26px;

}


/* =========================
   TOMBOL
========================= */

.btn-kembali{

margin-top:20px;

width:100%;

padding:15px;

border:none;

border-radius:12px;

background:white;

color:#0A5C2F;

font-size:16px;

font-weight:bold;

cursor:pointer;

}


/* =========================
   ERROR
========================= */

.hasil-error{

background:white;

padding:25px;

border-radius:20px;

text-align:center;

box-shadow:
0 5px 15px rgba(0,0,0,.12);

}

.hasil-error h3{

color:#c0392b;

}


/* =========================
   MOBILE
========================= */

@media(max-width:768px){

body{

padding:10px;

}

.card-awal{

padding:22px;

}

.logo{

width:70px;

}

h1{

font-size:24px;

}

h2{

font-size:18px;

}

.status-besar{

font-size:48px;

}

.nama-sekolah{

font-size:20px;

}

.kartu-lulus{

padding:20px;

}

.identitas{

padding:18px;

}

.dua-kolom{

grid-template-columns:1fr 1fr;

gap:12px;

}

.row-data strong,
.dua-kolom strong{

font-size:16px;

}

.pesan{

padding:18px;

}

.pesan p{

font-size:15px;

line-height:28px;

}

}

/* HALAMAN TERKUNCI */

.belum-buka{

max-width:500px;

margin:80px auto;

background:white;

padding:35px;

border-radius:25px;

text-align:center;

box-shadow:
0 10px 30px rgba(0,0,0,.12);

}

.logo-lock{

width:90px;

margin-bottom:20px;

}

.belum-buka h1{

color:#0A5C2F;

margin-bottom:10px;

}

.belum-buka h2{

color:#c0392b;

margin-bottom:20px;

}

.belum-buka p{

line-height:30px;

font-size:17px;

}

#countdown{

display:flex;
justify-content:center;
gap:10px;
margin:25px 0;
flex-wrap:wrap;

}

.count-box{

background:#0A5C2F;
color:white;

padding:15px 10px;

border-radius:15px;

min-width:70px;

}

.angka{

font-size:28px;
font-weight:bold;

}

.label{

font-size:12px;

}