/* =========================================================
   LIBA Science Club — Pengumuman Hasil Seleksi
   style.css
   ========================================================= */

:root{
  --navy-900:#0a1f3d;
  --navy-800:#0f2a52;
  --navy-700:#163a6e;
  --blue:#93BFCF;
  --gold-500:#1e3a8a;
  --gold-400:#2f55b3;
  --gold-100:#e3e9f7;
  --white:#ffffff;
  --gray-50:#f7f8fa;
  --gray-100:#eef1f5;
  --gray-300:#d3d9e1;
  --gray-500:#7c8798;
  --gray-700:#445166;
  --success-600:#1f7a4d;
  --success-100:#e6f5ec;
  --danger-600:#a13a3a;
  --danger-100:#f7e9e9;
  --radius-lg:18px;
  --radius-md:12px;
  --radius-sm:8px;
  --shadow-soft:0 4px 24px rgba(10,31,61,0.08), 0 1px 2px rgba(10,31,61,0.04);
  --shadow-card:0 10px 40px rgba(10,31,61,0.10), 0 2px 8px rgba(10,31,61,0.06);
  --font-display:'Poppins', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

body{
  font-family:var(--font-body);
  background:var(--gray-50);
  color:var(--navy-900);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}

/* Background ornament: faint topographic line motif, evokes "seleksi/skor" charts */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 8% 0%, rgba(30,58,138,0.07), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(10,31,61,0.06), transparent 45%),
    var(--gray-50);
}

.bg-grid{
  position:fixed;
  inset:0;
  z-index:-1;
  background-image:
    linear-gradient(rgba(10,31,61,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,31,61,0.035) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,0.55), transparent 70%);
}

a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* ============ Layout shell ============ */
.page-shell{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.container{
  width:100%;
  max-width:880px;
  margin:0 auto;
  padding:0 20px;
}

/* ============ Top bar / header ============ */
.site-header{
  padding:34px 0 18px;
  text-align:center;
  animation:fadeDown .6s ease both;
}

.brand-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-bottom:22px;
}

.brand-logo{
  width:54px;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gold-400);
  font-family:var(--font-display);
  font-weight:700;
  font-size:18px;
  letter-spacing:0.5px;
  flex-shrink:0;
}
.brand-logo img{width:100%;height:100%;object-fit:cover;border-radius:14px;}

.brand-name{
  text-align:left;
  line-height:1.25;
}
.brand-name .name-main{
  font-family:var(--font-display);
  font-weight:700;
  font-size:16px;
  color:var(--navy-900);
  letter-spacing:0.2px;
}
.brand-name .name-sub{
  font-size:12px;
  color:var(--gray-500);
  letter-spacing:0.6px;
  text-transform:uppercase;
}

.page-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(28px,4.5vw,40px);
  color:var(--navy-900);
  margin:0 0 8px;
  letter-spacing:-0.3px;
}

.page-subtitle{
  font-size:15px;
  color:var(--gray-500);
  margin:0;
  font-weight:500;
}

.title-divider{
  width:64px;
  height:3px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-400));
  margin:18px auto 0;
}

/* ============ Card ============ */
.main-content{
  flex:1;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:18px 0 60px;
}

.card{
  width:100%;
  background:var(--white);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  border:1px solid var(--gray-100);
  padding:38px;
  animation:fadeUp .7s ease both;
  animation-delay:.1s;
}

@media (max-width:560px){
  .card{padding:26px 20px;border-radius:14px;}
}

/* ============ Form ============ */
.form-intro{
  margin-bottom:26px;
}
.form-intro h2{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:600;
  color:var(--navy-900);
  margin:0 0 6px;
}
.form-intro p{
  font-size:13.5px;
  color:var(--gray-500);
  margin:0;
  line-height:1.6;
}

.field{
  margin-bottom:18px;
}
.field label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--navy-800);
  margin-bottom:7px;
  letter-spacing:0.1px;
}
.field input{
  width:100%;
  padding:13px 16px;
  border-radius:var(--radius-sm);
  border:1.5px solid var(--gray-300);
  background:var(--gray-50);
  font-size:14.5px;
  font-family:var(--font-body);
  color:var(--navy-900);
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.field input::placeholder{color:#a6aebb;}
.field input:focus{
  outline:none;
  border-color:var(--gold-500);
  background:var(--white);
  box-shadow:0 0 0 3px rgba(30,58,138,0.15);
}
.field .field-error{
  display:none;
  font-size:12.5px;
  color:var(--danger-600);
  margin-top:6px;
  font-weight:500;
}
.field.has-error input{border-color:var(--danger-600);background:var(--danger-100);}
.field.has-error .field-error{display:block;}

/* ============ Buttons ============ */
.btn{
  appearance:none;
  border:none;
  cursor:pointer;
  font-family:var(--font-body);
  font-weight:600;
  font-size:15px;
  border-radius:var(--radius-sm);
  padding:15px 24px;
  transition:transform .15s ease, box-shadow .2s ease, opacity .2s;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.btn:active{transform:translateY(1px);}
.btn-primary{
  width:100%;
  background:linear-gradient(135deg,var(--navy-800),var(--navy-900));
  color:var(--white);
  box-shadow:0 8px 20px rgba(10,31,61,0.25);
}
.btn-primary:hover{box-shadow:0 10px 26px rgba(10,31,61,0.32);}
.btn-primary:disabled{opacity:.7;cursor:not-allowed;}

.btn-gold{
  background:linear-gradient(135deg,var(--gold-500),var(--gold-400));
  color:var(--navy-900);
  box-shadow:0 8px 18px rgba(30,58,138,0.28);
}
.btn-outline{
  background:var(--white);
  color:var(--navy-800);
  border:1.5px solid var(--gray-300);
}
.btn-outline-print{
  background:linear-gradient(135deg,var(--blue),var(--blue));
  color:var(--gold-400);
  box-shadow:0 8px 18px rgba(30,58,138,0.28);
}
.btn-outline:hover{border-color:var(--navy-700);}

.action-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}
.action-row .btn{flex:1 1 180px;}

/* ============ Loading overlay ============ */
.loading-overlay{
  position:fixed;
  inset:0;
  background:rgba(10,20,40,0.55);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.loading-overlay.show{opacity:1;pointer-events:all;}

.loading-box{
  background:var(--white);
  border-radius:var(--radius-lg);
  padding:36px 32px;
  width:90%;
  max-width:340px;
  text-align:center;
  box-shadow:var(--shadow-card);
  animation:popIn .35s ease both;
}

.spinner{
  width:46px;
  height:46px;
  margin:0 auto 18px;
  border-radius:50%;
  border:4px solid var(--gray-100);
  border-top-color:var(--gold-500);
  border-right-color:var(--navy-800);
  animation:spin .85s linear infinite;
}

.loading-text{
  font-size:14px;
  font-weight:600;
  color:var(--navy-900);
  margin-bottom:14px;
}

.progress-track{
  width:100%;
  height:6px;
  background:var(--gray-100);
  border-radius:4px;
  overflow:hidden;
}
.progress-fill{
  height:100%;
  width:0%;
  border-radius:4px;
  background:linear-gradient(90deg,var(--navy-800),var(--gold-500));
  transition:width .25s linear;
}

/* ============ Footer ============ */
.site-footer{
  text-align:center;
  padding:24px 0 36px;
  font-size:12.5px;
  color:var(--gray-500);
}

/* ============ Result page specific ============ */
.status-banner{
  text-align:center;
  margin-bottom:8px;
}
.status-banner .status-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(22px,4vw,30px);
  letter-spacing:1px;
  margin:0 0 10px;
}
.status-banner.lolos .status-title{color:var(--success-600);}
.status-banner.gagal .status-title{color:var(--navy-800);}

.status-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 20px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
  letter-spacing:2px;
  margin:6px 0 18px;
}
.status-pill.lolos{background:var(--success-100);color:var(--success-600);}
.status-pill.gagal{background:var(--danger-100);color:var(--danger-600);}

.result-desc{
  text-align:center;
  font-size:14.5px;
  color:var(--gray-700);
  line-height:1.75;
  max-width:560px;
  margin:0 auto 28px;
}
.result-desc b{color:var(--navy-900);}

.divider{
  height:1px;
  background:var(--gray-100);
  margin:26px 0;
}

.data-table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:8px;
}
.data-table tr td{
  padding:11px 6px;
  font-size:14px;
  vertical-align:top;
  border-bottom:1px solid var(--gray-100);
}
.data-table tr:last-child td{border-bottom:none;}
.data-table td.label{
  color:var(--gray-500);
  width:42%;
  font-weight:500;
}
.data-table td.value{
  color:var(--navy-900);
  font-weight:600;
}
.data-table td.value.status-lolos{color:var(--success-600);}
.data-table td.value.status-gagal{color:var(--danger-600);}

.qr-section{
  text-align:center;
  margin:30px 0 10px;
  animation:fadeUp .6s ease both;
  animation-delay:.3s;
}
.qr-box{
  display:inline-block;
  padding:16px;
  background:var(--white);
  border:1.5px solid var(--gray-100);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft);
}
.qr-caption{
  max-width:420px;
  margin:16px auto 0;
  font-size:12.5px;
  color:var(--gray-500);
  line-height:1.6;
}

.motivation-box{
  background:var(--gold-100);
  border-radius:var(--radius-md);
  padding:18px 20px;
  margin-top:24px;
  font-size:13.5px;
  color:var(--navy-800);
  line-height:1.7;
  border-left:4px solid var(--gold-500);
}

.reg-number{
  text-align:center;
  font-family:'Inter',monospace;
  letter-spacing:2px;
  font-size:13px;
  color:var(--gray-500);
  margin-top:4px;
}

/* skeleton loading on hasil.html before data is shown */
.skeleton{
  background:linear-gradient(90deg,var(--gray-100) 25%, var(--gray-300) 37%, var(--gray-100) 63%);
  background-size:400% 100%;
  animation:shimmer 1.4s ease infinite;
  border-radius:6px;
}

/* ============ Animations ============ */
@keyframes fadeDown{from{opacity:0;transform:translateY(-14px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}
@keyframes popIn{from{opacity:0;transform:scale(.92);}to{opacity:1;transform:scale(1);}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes shimmer{0%{background-position:100% 0;}100%{background-position:-100% 0;}}

.result-card-enter{
  animation:resultEnter .8s cubic-bezier(.22,1,.36,1) both;
}
@keyframes resultEnter{
  0%{opacity:0;transform:translateY(40px) scale(.96);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

@media print{
  .no-print{display:none !important;}
  body::before,.bg-grid{display:none;}
  .card{box-shadow:none;border:1px solid #ccc;}
}

/* =========================================================
   VERIFY PAGE — dark hero style (index.html)
   Terinspirasi dari portal hasil seleksi UM UGM: foto gedung
   grayscale gelap di belakang, kartu kaca gelap di tengah,
   judul besar putih, emblem lingkaran di pojok kiri atas card.
   Warna tetap memakai identitas LIBA (navy + emas).
   ========================================================= */

body.verify-page{
  background:var(--navy-900);
  min-height:100vh;
  margin:0;
}

/* Lapisan tekstur: simulasi foto gedung grayscale gelap.
   Ganti dengan background-image: url('assets/hero-gedung.jpg')
   jika sudah punya foto gedung/markas LIBA. */
.verify-hero-bg{
  position:fixed;
  inset:0;
  z-index:-2;
  background-image:url('oprec_bg.png');
  background-size:cover;
  background-position:center;
  filter:grayscale(1) contrast(1.05) brightness(0.8);
}

/* Vignette + darkening overlay agar kartu tetap kontras & mudah dibaca */
.verify-hero-overlay{
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.72) 100%);
}

.verify-shell{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:48px 20px 32px;
}

.verify-card{
  width:100%;
  max-width:460px;
  background:rgba(22,24,28,0.82);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:18px;
  padding:38px 34px 34px;
  box-shadow:
    0 30px 60px -10px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.03) inset;
  backdrop-filter:blur(10px);
  animation:fadeUp .7s ease both;
}

@media (max-width:480px){
  .verify-card{padding:30px 22px 28px;border-radius:16px;}
}

.verify-card-top{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  margin-bottom:26px;
}

.verify-logo{
  width:56px;
  height:56px;
  color:rgba(255,255,255,0.85);
  flex-shrink:0;
}
.verify-logo svg{width:100%;height:100%;}
.verify-logo img{width:100%;height:100%;object-fit:contain;}

.verify-eyebrow{
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0.5px;
  color:var(--gold-400);
  text-transform:none;
}

.verify-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(30px,6vw,38px);
  letter-spacing:0.5px;
  color:#ffffff;
  margin:0 0 12px;
  line-height:1.1;
}

.verify-subtitle{
  font-size:13.5px;
  color:rgba(255,255,255,0.55);
  line-height:1.65;
  margin:0 0 28px;
  max-width:380px;
}

.verify-field{
  margin-bottom:18px;
}
.verify-field label{
  display:block;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.3px;
  color:var(--gold-400);
  margin-bottom:8px;
}
.verify-field input{
  width:100%;
  padding:14px 16px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.06);
  font-size:14.5px;
  font-family:var(--font-body);
  color:#ffffff;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.verify-field input::placeholder{color:rgba(255,255,255,0.32);}
.verify-field input:focus{
  outline:none;
  border-color:var(--gold-500);
  background:rgba(255,255,255,0.09);
  box-shadow:0 0 0 3px rgba(30,58,138,0.18);
}
.verify-field-error{
  display:none;
  font-size:12px;
  color:#e08484;
  margin-top:6px;
  font-weight:500;
}
.verify-field.has-error input{border-color:#b85555;background:rgba(184,85,85,0.12);}
.verify-field.has-error .verify-field-error{display:block;}

.verify-submit{
  width:100%;
  appearance:none;
  border:none;
  cursor:pointer;
  margin-top:6px;
  padding:16px 24px;
  border-radius:999px;
  font-family:var(--font-body);
  font-weight:700;
  font-size:14.5px;
  letter-spacing:0.3px;
  color:var(--navy-900);
  background:linear-gradient(135deg,var(--gold-400),var(--gold-500));
  box-shadow:0 10px 26px rgba(30,58,138,0.32);
  transition:transform .15s ease, box-shadow .2s ease, opacity .2s;
}
.verify-submit:hover{box-shadow:0 12px 30px rgba(30,58,138,0.4);}
.verify-submit:active{transform:translateY(1px);}
.verify-submit:disabled{opacity:.7;cursor:not-allowed;}

.verify-help{
  text-align:center;
  font-size:12px;
  color:rgba(255,255,255,0.38);
  margin:22px 0 0;
}

.verify-footer{
  margin-top:28px;
  text-align:center;
  font-size:12px;
  color:rgba(255,255,255,0.32);
}