@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500&display=swap');
/*('600;700;800;900&family=Red+Hat+Text:wght@400;600;700&display=swap');

/* Reset ringkas */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Red Hat Display', Arial, sans-serif;
  color: #fff;
  background: #111;
}

.hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: stretch;
}

/* Lapisan gelap halus biar teks kontras */
.hero::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.15));
  z-index: 0;
}

/* Panel kiri semi transparan */
.left-panel {
  position: relative;
  width: 30%;
  padding: 64px 48px;
  backdrop-filter: blur(1px);
  background: linear-gradient(90deg, rgba(0,0,0,.50), rgba(0,0,0,.40));
  z-index: 2;
}

/* Judul kanan atas */
.header {
  position: absolute;
  top: 24px; right: 28px;
  text-align: right;
  z-index: 3;
}
.header .java { color: #FF7A00; font-weight: 500; letter-spacing: .5px; }
.header .trip { font-weight: 500; margin-left: 6px; }
.header .year { opacity: .9; margin-left: 6px; font-weight: 500; }
.header .sub { font-size: 18px; opacity: .95; margin-top: 2px; }
.header .korea { font-weight: 500; font-style: italic; margin-left: 6px; }

.label { letter-spacing: 1px; opacity: .9; }
.value { font-size: 54px; font-weight: 400; line-height: .8; }

.row { 
    margin-top: 30px;
  margin-bottom: 25px; 
  text-align: center;
}

.logo { 
 size: 5cm;
}
.row.small { 
  margin-top: 48px; 
  display: flex; 
  gap: 28px; 
}
.col { 
  margin-top: 50px;
  flex: 1; 
  text-align: center;
}

.orange { color: #FF7A00; 
font-size: 35px}
.dim { opacity: .85; }

.waw { opacity: .85; 
color: #FBB040;}
.giant {
  font-size: clamp(120px, 15vw, 210px);
  font-weight: 500;
  line-height: .85;
  color: #FF7A00;
  text-shadow: 0 6px 30px rgba(0,0,0,.35);
  margin: 8px 0 0;
}

.footer-days {
  margin-top: 36px;
  margin-left: 110px;
  font-size: 60px;
  font-weight: 500;
  display: flex; text-align: center;

}


.geser {
  margin-bottom: 34px; 
  text-align: center;
  color: #FBB040;

}

.footer-days .tag { font-size: 28px; font-weight: 500; opacity: .9; }

.updated {
  position: absolute; bottom: 18px; left: 24px; font-size: 12px; opacity: .75;
  text-align: center;
}

/* Tombol admin */
.admin-link {
  position: absolute; top: 22px; left: 24px; z-index: 4;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25);
  padding: 8px 12px; border-radius: 10px; text-decoration: none; color: #fff;
  font-weight: 500; backdrop-filter: blur(2px);
}
.admin-link:hover { background: rgba(255,255,255,.22); }

/* Form admin */
.form-wrap { max-width: 520px; margin: 10vh auto; background: rgba(0,0,0,.55);
  padding: 28px; border-radius: 16px; border: 1px solid rgba(255,255,255,.18); }
.form-wrap h1 { margin-bottom: 14px; }
.input { width: 100%; padding: 12px 14px; margin-top: 8px; border-radius: 10px; border: 1px solid #444; background: #1a1a1a; color: #fff; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; }
.btn { margin-top: 14px; background: #FF7A00; color: #111; font-weight: 500; border: none; padding: 12px 16px; border-radius: 10px; cursor: pointer; }
.btn.outline { background: transparent; color:#fff; border:1px solid #777; margin-left: 8px; }
.notice { margin-top: 10px; font-size: 13px; opacity:.85; }
.center { text-align: center; }


/* Use Red Hat Display for headings & big numbers */
.header, .value, .giant { font-family: 'Red Hat Display', 'Red Hat Text', Arial, sans-serif; }

/* Force medium weight everywhere */
body, .header, .value, .giant, .footer-days, .admin-link, .btn, .label { font-weight: 500; font-family: 'Red Hat Display', Arial, sans-serif; }