/* ===========================================================
   Employee Gathering LPPOM Yogyakarta 2026 - Custom Styles
   Tailwind (CDN) handles most utility classes; this file only
   contains things Tailwind can't express out of the box:
   brand gradients, glass effect, animations, boarding pass card,
   Islamic geometric pattern, scroll reveal, etc.
   =========================================================== */

:root{
  --primary-green:   #0B3D2E;
  --secondary-green: #137A5A;
  --accent-gold:     #C9A24E;
  --bg:              #F7F8F5;
  --text:            #1F2937;
}

*{ scroll-behavior:smooth; }

body{
  font-family:'Inter', sans-serif;
  background:var(--bg);
  color:var(--text);
}
h1,h2,h3,h4,.font-heading{ font-family:'Poppins', sans-serif; }

/* -----------------------------------------------------------
   Scroll progress bar
----------------------------------------------------------- */
#scrollProgress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--accent-gold), var(--secondary-green));
  z-index:9999; transition:width .1s linear;
}

/* -----------------------------------------------------------
   Splash screen
----------------------------------------------------------- */
#splash{
  position:fixed; inset:0; z-index:9998;
  background:white;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s ease, visibility .5s ease;
  animation:splashAutoHide 0s 5s forwards; /* pure-CSS safety net if JS never runs */
}
@keyframes splashAutoHide{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
#splash.hide{ opacity:0; visibility:hidden; pointer-events:none; }
#splash img{ width:320px; animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:1;} 50%{ transform:scale(1.08); opacity:.8;} }

/* -----------------------------------------------------------
   Islamic geometric pattern (subtle, used behind hero/sections)
----------------------------------------------------------- */
.geo-pattern{
  background-image:
    radial-gradient(circle at 10px 10px, rgba(201,162,78,0.15) 1.5px, transparent 1.5px);
  background-size:28px 28px;
}

/* -----------------------------------------------------------
   Glassmorphism (subtle, per spec)
----------------------------------------------------------- */
.glass{
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.6);
}
.glass-dark{
  background:rgba(11,61,46,0.55);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.08);
}

/* -----------------------------------------------------------
   Scroll reveal
----------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* -----------------------------------------------------------
   Hero wave divider
----------------------------------------------------------- */
.wave-divider{ display:block; width:100%; line-height:0; }

/* -----------------------------------------------------------
   Sticky nav shadow on scroll
----------------------------------------------------------- */
#navbar{ transition:box-shadow .3s ease, background .3s ease; }
#navbar.scrolled{ box-shadow:0 8px 24px rgba(11,61,46,0.08); background:rgba(255,255,255,0.9); }

/* -----------------------------------------------------------
   Boarding pass card - flat card, dark green header bar,
   2-column x 3-row field grid, QR + barcode stub after a
   perforated divider. Mirrors the PDF/JPEG generated by the backend.
----------------------------------------------------------- */
.boarding-pass{
  background:#ffffff;
  border-radius:20px;
  box-shadow:0 24px 50px -18px rgba(11,61,46,0.3), 0 8px 20px -10px rgba(11,61,46,0.18);
  overflow:hidden;
  position:relative;
}
.bp-header{
  background:var(--primary-green);
  color:white;
  padding:14px 22px;
  display:flex; align-items:center; justify-content:space-between;
}
.bp-header .event-tag{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.bp-header img{ height:20px; filter:brightness(0) invert(1); }

.bp-body{ display:flex; align-items:stretch; }
.bp-fields{
  flex:1 1 66%;
  padding:22px 24px;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-auto-rows:min-content;
  row-gap:20px; column-gap:16px;
}
.bp-field-label{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-gold); font-weight:700; margin-bottom:4px; }
.bp-field-value{ font-weight:700; font-size:16px; color:var(--text); line-height:1.3; }
.bp-field-value.big{ font-size:19px; }

.bp-perforation{ position:relative; width:0; flex:0 0 auto; }
.bp-perforation .line{ position:absolute; top:14px; bottom:14px; left:50%; transform:translateX(-50%); border-left:2px dashed rgba(11,61,46,0.22); }
.bp-hole{ position:absolute; left:50%; transform:translateX(-50%); width:22px; height:22px; border-radius:50%; background:var(--bg); z-index:2; }
.bp-hole.top{ top:-11px; } .bp-hole.bottom{ bottom:-11px; }

.bp-stub{
  flex:1 1 34%; padding:22px 18px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
}
.bp-qr-box{ background:white; padding:6px; border-radius:10px; border:1px solid rgba(11,61,46,0.08); }
.bp-barcode{
  width:120px; height:26px;
  background:repeating-linear-gradient(90deg, var(--text) 0px, var(--text) 2px, transparent 2px, transparent 4px, var(--text) 4px, var(--text) 5px, transparent 5px, transparent 8px);
  opacity:.75;
}

@media (max-width: 640px){
  .bp-fields{ grid-template-columns:1fr; padding:20px; row-gap:16px; }
  .bp-body{ flex-direction:column; }
  .bp-perforation{ width:100%; height:0; }
  .bp-perforation .line{ top:0; bottom:0; left:14px; right:14px; border-left:none; border-top:2px dashed rgba(11,61,46,0.22); }
  .bp-hole.top{ top:auto; left:-11px; }
  .bp-hole.bottom{ bottom:auto; right:-11px; left:auto; }
}

/* -----------------------------------------------------------
   Numbered two-column section layout (label+desc left, card right)
----------------------------------------------------------- */
.num-section{ display:grid; grid-template-columns:1fr; gap:28px; }
@media (min-width: 900px){ .num-section{ grid-template-columns:280px 1fr; gap:48px; } }
.num-badge{
  width:32px; height:32px; border-radius:10px; background:var(--primary-green); color:white;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; margin-bottom:14px;
}
.num-title{ font-family:'Poppins',sans-serif; font-weight:700; font-size:22px; color:var(--primary-green); position:relative; padding-bottom:10px; margin-bottom:10px; }
.num-title::after{ content:""; position:absolute; left:0; bottom:0; width:40px; height:3px; background:var(--accent-gold); border-radius:2px; }
.num-desc{ font-size:14px; color:#6B7280; line-height:1.7; }

/* -----------------------------------------------------------
   Bottom utility row: countdown / weather / info
----------------------------------------------------------- */
.util-card{ border-radius:22px; padding:22px; }
.util-card.dark{ background:var(--primary-green); color:white; }
.util-card.light{ background:white; box-shadow:0 10px 30px rgba(11,61,46,0.06); }
.util-card h4{ font-family:'Poppins',sans-serif; font-weight:700; font-size:15px; display:flex; align-items:center; gap:8px; margin-bottom:16px; }

.countdown-box{
  background:rgba(255,255,255,0.1); border-radius:14px; padding:12px 6px; text-align:center;
}
.countdown-box .num{ font-family:'Poppins',sans-serif; font-weight:700; font-size:24px; color:var(--accent-gold); }
.countdown-box .label{ font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:#cfe3da; margin-top:2px; }

.info-item{ display:flex; align-items:flex-start; gap:10px; }
.info-item .icon-wrap{ width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.info-item h5{ font-weight:700; font-size:13px; }
.info-item p{ font-size:11.5px; color:#cfe3da; margin-top:1px; line-height:1.4; }

/* -----------------------------------------------------------
   Toast notifications
----------------------------------------------------------- */
#toastContainer{ position:fixed; bottom:20px; right:20px; z-index:9997; display:flex; flex-direction:column; gap:10px; }
.toast{
  background:var(--primary-green); color:white; padding:14px 18px; border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.25); font-size:14px; display:flex; align-items:center; gap:10px;
  animation:toastIn .3s ease;
  max-width:320px;
}
.toast.error{ background:#7A1E1E; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }

/* -----------------------------------------------------------
   PDF flipbook viewer
----------------------------------------------------------- */
#pdfViewer canvas{ margin:0 auto; box-shadow:0 20px 40px rgba(0,0,0,0.15); border-radius:6px; max-width:100%; height:auto; }

/* -----------------------------------------------------------
   Buttons
----------------------------------------------------------- */
.btn-primary{
  background:var(--primary-green); color:white; border-radius:100px; padding:12px 24px;
  font-weight:600; transition:transform .15s ease, background .2s ease; display:inline-flex; align-items:center; gap:8px;
}
.btn-primary:hover{ background:var(--secondary-green); transform:translateY(-1px); }
.btn-outline{
  border:1.5px solid var(--primary-green); color:var(--primary-green); border-radius:100px; padding:12px 24px;
  font-weight:600; transition:all .2s ease; display:inline-flex; align-items:center; gap:8px; background:transparent;
}
.btn-outline:hover{ background:var(--primary-green); color:white; }

/* Empty state illustration container */
.empty-state{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:40px 20px; }

.bp-fields-3col {
  grid-template-columns: repeat(3, 1fr);
}