/* =========================================================
   PKKMB UNSAP & STAI 2026
   QR ABSENSI PORTAL
   PREMIUM CAMPUS DIGITAL PORTAL
   ---------------------------------------------------------
   Compatible:
   - index.html
   - script.js
   - Existing class/id structure
   ========================================================= */


/* =========================================================
   01. DESIGN TOKENS
   ========================================================= */

:root {

  /* ---------- BRAND ---------- */

  --navy-950: #041226;
  --navy-925: #061a35;
  --navy-900: #08244a;
  --navy-850: #0b315f;
  --navy-800: #0e3d73;
  --navy-700: #15558f;
  --navy-600: #2375ad;

  --blue: #1976b9;
  --blue-soft: #eef7ff;
  --blue-softer: #f5faff;

  --gold-900: #765104;
  --gold-800: #916508;
  --gold-700: #ae7b0c;
  --gold: #d0a126;
  --gold-light: #e6c35c;
  --gold-soft: #fff9e9;

  --green-800: #0a4b2b;
  --green-700: #12663a;
  --green: #21834c;
  --green-soft: #eef9f2;

  --red-800: #97271f;
  --red-700: #b52b21;
  --red-soft: #fff3f1;


  /* ---------- SURFACE ---------- */

  --background: #f4f8fc;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --surface-blue: #f1f7fd;


  /* ---------- TEXT ---------- */

  --text-strong: #071a33;
  --text: #182d47;
  --text-muted: #687a8e;
  --text-light: #95a4b5;


  /* ---------- BORDER ---------- */

  --border: #e1e9f1;
  --border-strong: #d2deea;


  /* ---------- SHADOW ---------- */

  --shadow-xs:
    0 2px 7px rgba(4, 18, 38, .035);

  --shadow-sm:
    0 7px 22px rgba(4, 18, 38, .055);

  --shadow-md:
    0 18px 45px rgba(4, 18, 38, .075);

  --shadow-lg:
    0 28px 75px rgba(4, 18, 38, .105);

  --shadow-xl:
    0 35px 95px rgba(4, 18, 38, .13);


  /* ---------- RADIUS ---------- */

  --radius-xs: 8px;
  --radius-sm: 11px;
  --radius-md: 15px;
  --radius-lg: 21px;
  --radius-xl: 28px;
  --radius-2xl: 34px;
  --radius-pill: 999px;


  /* ---------- LAYOUT ---------- */

  --max-width: 1180px;


  /* ---------- MOTION ---------- */

  --ease:
    cubic-bezier(.22, .61, .36, 1);
}


/* =========================================================
   02. RESET
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}


html {
  width: 100%;
  min-height: 100%;

  scroll-behavior: smooth;
}


body {
  width: 100%;
  min-height: 100vh;

  margin: 0;

  font-family:
    "DM Sans",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color: var(--text);

  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(28, 111, 173, .075),
      transparent 31%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8fbfd 43%,
      #f1f6fa 100%
    );

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  text-rendering: optimizeLegibility;

  overflow-x: hidden;
}


button,
input {
  font: inherit;
}


button {
  border: 0;
}


img {
  display: block;
  max-width: 100%;
}


a {
  color: inherit;
  text-decoration: none;
}


svg {
  display: block;
}


/* =========================================================
   03. SELECTION
   ========================================================= */

::selection {
  color: #ffffff;
  background: var(--navy-800);
}


/* =========================================================
   04. BACKGROUND DECORATION
   ========================================================= */

.bg-decor {
  position: fixed;
  inset: 0;

  z-index: 0;

  pointer-events: none;

  overflow: hidden;
}


/* Fine technical grid */

.bg-decor::before {
  content: "";

  position: absolute;
  inset: 0;

  opacity: .48;

  background-image:
    linear-gradient(
      rgba(8, 36, 74, .025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(8, 36, 74, .025) 1px,
      transparent 1px
    );

  background-size: 54px 54px;

  mask-image:
    linear-gradient(
      to bottom,
      black 0%,
      rgba(0, 0, 0, .6) 35%,
      transparent 82%
    );

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      black 0%,
      rgba(0, 0, 0, .6) 35%,
      transparent 82%
    );
}


/* Blue atmosphere */

.bg-decor::after {
  content: "";

  position: absolute;

  width: 760px;
  height: 760px;

  top: -440px;
  right: -280px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(25, 118, 185, .12) 0%,
      rgba(25, 118, 185, .045) 38%,
      transparent 72%
    );

  filter: blur(6px);
}


/* =========================================================
   05. HEADER
   ========================================================= */

.site-header {
  position: relative;

  z-index: 20;

  width: 100%;

  padding:
    17px
    clamp(14px, 4vw, 58px)
    8px;
}


.header-inner {
  position: relative;

  width:
    min(100%, var(--max-width));

  min-height: 70px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding:
    9px
    14px
    9px
    16px;

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

  border:
    1px solid rgba(211, 223, 234, .9);

  border-radius: 20px;

  box-shadow:
    0 10px 35px rgba(4, 18, 38, .055),
    inset 0 1px 0 rgba(255, 255, 255, .9);

  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}



.header-left {
  display: flex;

  align-items: center;

  gap: 12px;

  min-width: 0;
}


.logo-left {
  width: auto;

  height: 49px;

  max-width: 92px;

  object-fit: contain;

  filter:
    drop-shadow(
      0 4px 8px rgba(4, 18, 38, .06)
    );
}


.brand-mark {
  display: flex;

  align-items: baseline;

  gap: 7px;

  min-width: 0;

  color: var(--navy-900);

  font-family:
    "Plus Jakarta Sans",
    sans-serif;

  line-height: 1;
}


.brand-mark span {
  font-size: 15px;

  font-weight: 800;

  letter-spacing: -.4px;
}


.brand-mark small {
  color: var(--gold-700);

  font-size: 14px;

  font-weight: 800;

  letter-spacing: 1px;
}


.header-right {
  display: flex;

  align-items: center;

  min-width: 0;

  flex-shrink: 0;
}


.header-right img {
  width: auto;
  height: auto;

  object-fit: contain;

  filter:
    drop-shadow(
      0 2px 5px rgba(4, 18, 38, .04)
    );
}


.logo-kanan {
  max-width: 100px;
  max-height: 36px;
}


.logo-kanan1 {
  max-width: 80px;
  max-height: 35px;
}


.logo-kanan2 {
  max-width: 66px;
  max-height: 32px;
}


.logo-divider {
  width: 1px;
  height: 25px;

  margin:
    0 13px;

  background:
    linear-gradient(
      180deg,
      transparent,
      var(--border-strong),
      transparent
    );

  opacity: .8;
}


/* =========================================================
   06. MAIN
   ========================================================= */

.main {
  position: relative;

  z-index: 2;

  width: 100%;
}


/* =========================================================
   07. SEARCH / HERO
   ========================================================= */

.search-section {
  position: relative;

  width:
    min(
      calc(100% - 32px),
      900px
    );

  min-height: 650px;

  margin:
    5px auto 0;

  padding:
    37px 30px 52px;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  isolation: isolate;
}


/* Main hero glow */

.search-section::before {
  content: "";

  position: absolute;

  z-index: -4;

  top: -55px;
  left: 50%;

  transform:
    translateX(-50%);

  width: 700px;
  height: 560px;

  background:
    radial-gradient(
      ellipse at center,
      rgba(25, 118, 185, .095) 0%,
      rgba(25, 118, 185, .045) 35%,
      rgba(25, 118, 185, .012) 55%,
      transparent 74%
    );

  filter: blur(5px);

  pointer-events: none;
}


/* Gold bottom separator */

.search-section::after {
  content: "";

  position: absolute;

  z-index: -2;

  bottom: 18px;
  left: 50%;

  transform:
    translateX(-50%);

  width: 105px;
  height: 2px;

  border-radius:
    var(--radius-pill);

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--gold),
      var(--gold-light),
      transparent
    );

  opacity: .8;
}


/* =========================================================
   08. ORBIT
   ========================================================= */

.hero-orbit {
  position: absolute;

  z-index: -1;

  border-radius: 50%;

  pointer-events: none;

  opacity: .95;
}


.orbit-one {
  width: 490px;
  height: 490px;

  top: -5px;
  left: 50%;

  transform:
    translateX(-50%)
    rotate(-18deg);

  border:
    1px solid rgba(25, 118, 185, .085);

  border-right-color:
    rgba(208, 161, 38, .30);

  border-bottom-color:
    transparent;

  box-shadow:
    0 0 45px rgba(25, 118, 185, .025);
}


.orbit-two {
  width: 395px;
  height: 395px;

  top: 43px;
  left: 50%;

  transform:
    translateX(-50%)
    rotate(29deg);

  border:
    1px solid rgba(33, 131, 76, .06);

  border-left-color:
    rgba(33, 131, 76, .20);

  border-top-color:
    transparent;
}


/* =========================================================
   09. HERO LOGO
   ========================================================= */

.hero-logo {
  position: relative;

  width: 224px;
  height: 224px;

  margin-bottom: 4px;

  display: flex;

  align-items: center;
  justify-content: center;
}


/* Halo behind logo */

.hero-logo::before {
  content: "";

  position: absolute;

  width: 185px;
  height: 185px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(25, 118, 185, .10),
      rgba(25, 118, 185, .028) 43%,
      transparent 72%
    );

  filter: blur(8px);
}


/* Gold ring */

.hero-logo::after {
  content: "";

  position: absolute;

  width: 196px;
  height: 196px;

  border-radius: 50%;

  border:
    1px solid rgba(208, 161, 38, .18);

  opacity: .75;
}


.hero-logo img {
  position: relative;

  z-index: 2;

  width: 210px;
  height: 210px;

  object-fit: contain;

  filter:
    drop-shadow(
      0 18px 28px rgba(4, 18, 38, .10)
    );

  animation:
    logoFloat 7s ease-in-out infinite;
}


@keyframes logoFloat {

  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-5px);
  }
}


/* =========================================================
   10. HERO HEADING
   ========================================================= */

.hero-heading {
  position: relative;

  z-index: 3;

  width: 100%;
  max-width: 650px;

  margin-bottom: 23px;
}


.eyebrow {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 9px;

  margin-bottom: 9px;

  color: var(--gold-700);

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 2.8px;

  line-height: 1;

  text-transform: uppercase;
}


.eyebrow::before,
.eyebrow::after {
  content: "";

  width: 25px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--gold)
    );

  opacity: .8;
}


.eyebrow::after {
  background:
    linear-gradient(
      90deg,
      var(--gold),
      transparent
    );
}


.title {
  margin: 0;

  color:
    var(--navy-950);

  font-family:
    "Plus Jakarta Sans",
    sans-serif;

  font-size:
    clamp(36px, 5vw, 52px);

  line-height: 1.05;

  font-weight: 850;

  letter-spacing: -2.3px;

  text-shadow:
    0 2px 12px rgba(4, 18, 38, .025);
}


.subtitle {
  max-width: 560px;

  margin:
    12px auto 0;

  color:
    var(--text-muted);

  font-size: 14px;

  line-height: 1.65;

  font-weight: 400;
}


.subtitle strong {
  color:
    var(--navy-800);

  font-weight: 800;
}


/* =========================================================
   11. SEARCH AREA
   ========================================================= */

.search-area {
  position: relative;

  z-index: 5;

  width:
    min(100%, 590px);

  margin:
    0 auto;
}


/* =========================================================
   12. SEARCH BOX
   ========================================================= */

.search-box {
  position: relative;

  display: flex;

  align-items: center;

  gap: 7px;

  width: 100%;

  padding: 6px;

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

  border:
    1px solid rgba(203, 216, 228, .95);

  border-radius:
    17px;

  box-shadow:
    0 18px 45px rgba(4, 18, 38, .075),
    0 3px 8px rgba(4, 18, 38, .035),
    inset 0 1px 0 rgba(255, 255, 255, .95);

  transition:
    border-color .25s var(--ease),
    box-shadow .25s var(--ease),
    transform .25s var(--ease);
}


.search-box:hover {
  border-color:
    #c2d2e0;

  box-shadow:
    0 20px 48px rgba(4, 18, 38, .085),
    0 3px 9px rgba(4, 18, 38, .035);
}


.search-box:focus-within {
  border-color:
    rgba(25, 118, 185, .45);

  box-shadow:
    0 22px 52px rgba(4, 18, 38, .10),
    0 0 0 4px rgba(25, 118, 185, .075);

  transform:
    translateY(-2px);
}


/* =========================================================
   13. INPUT
   ========================================================= */

.input-wrapper {
  position: relative;

  flex: 1;

  min-width: 0;

  display: flex;

  align-items: center;
}


.search-icon {
  position: absolute;

  left: 16px;

  width: 19px;
  height: 19px;

  color:
    #8a9aaa;

  pointer-events: none;

  transition:
    color .2s ease,
    transform .2s var(--ease);
}


.search-box:focus-within .search-icon {
  color:
    var(--blue);

  transform:
    scale(1.04);
}


#nrpInput {
  width: 100%;

  height: 52px;

  padding:
    0 16px 0 47px;

  border: 0;

  outline: 0;

  background:
    transparent;

  color:
    var(--text-strong);

  font-size: 14px;

  font-weight: 650;

  letter-spacing: .05px;
}


#nrpInput::placeholder {
  color:
    #9aa8b7;

  opacity: 1;

  font-weight: 400;
}


#nrpInput:focus::placeholder {
  opacity: .42;
}


/* =========================================================
   14. PRIMARY SEARCH BUTTON
   ========================================================= */

.btn-primary {
  position: relative;

  flex:
    0 0 auto;

  height: 52px;

  min-width: 116px;

  padding:
    0 21px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 9px;

  overflow: hidden;

  border-radius:
    13px;

  background:
    linear-gradient(
      135deg,
      #071e3d 0%,
      #0b376b 58%,
      #15578f 100%
    );

  color:
    #ffffff;

  font-size: 13px;

  font-weight: 800;

  cursor: pointer;

  box-shadow:
    0 9px 20px rgba(8, 36, 74, .20);

  transition:
    transform .2s var(--ease),
    box-shadow .2s var(--ease),
    background .2s ease,
    opacity .2s ease;
}


.btn-primary::before {
  content: "";

  position: absolute;

  top: 0;
  left: -100%;

  width: 70%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, .17),
      transparent
    );

  transform:
    skewX(-18deg);

  transition:
    left .55s ease;
}


.btn-primary:hover:not(:disabled) {
  background:
    linear-gradient(
      135deg,
      #09244a,
      #104579,
      #19679c
    );

  transform:
    translateY(-2px);

  box-shadow:
    0 14px 28px rgba(8, 36, 74, .25);
}


.btn-primary:hover:not(:disabled)::before {
  left: 135%;
}


.btn-primary:active:not(:disabled) {
  transform:
    translateY(0);

  box-shadow:
    0 6px 13px rgba(8, 36, 74, .17);
}


.btn-primary:disabled {
  cursor:
    wait;

  opacity:
    .68;

  transform:
    none;

  box-shadow:
    0 5px 12px rgba(8, 36, 74, .10);
}


.btn-primary svg {
  width: 17px;
  height: 17px;

  flex-shrink: 0;

  transition:
    transform .2s var(--ease);
}


.btn-primary:hover:not(:disabled) svg {
  transform:
    translateX(3px);
}


.btn-primary:focus-visible {
  outline:
    3px solid rgba(208, 161, 38, .34);

  outline-offset:
    3px;
}


/* =========================================================
   15. SEARCH HINT
   ========================================================= */

.search-hint {
  margin-top: 10px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 7px;

  color:
    var(--text-light);

  font-size: 11px;
}


.example-nrp {
  padding:
    4px 9px;

  border:
    1px solid #dce6ef;

  border-radius:
    7px;

  background:
    rgba(248, 250, 252, .9);

  color:
    var(--navy-800);

  font-size: 11px;

  font-weight: 800;

  cursor: pointer;

  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .2s ease;
}


.example-nrp:hover {
  background:
    var(--blue-soft);

  border-color:
    #cfe3f2;

  color:
    var(--blue);

  transform:
    translateY(-1px);
}


.example-nrp:focus-visible {
  outline:
    3px solid rgba(25, 118, 185, .16);

  outline-offset:
    2px;
}


/* =========================================================
   16. STATUS
   Compatible with script.js
   info / loading / success / warning / error
   ========================================================= */

.status {
  width:
    min(100%, 590px);

  min-height: 24px;

  margin-top: 12px;

  padding: 0;

  color:
    var(--text-muted);

  font-size: 12px;

  line-height: 1.5;

  text-align: center;

  transition:
    opacity .2s ease,
    transform .2s ease;
}


.status:empty {
  min-height: 0;

  margin-top: 0;
}


/* SUCCESS */

.status.success {
  padding:
    10px 14px;

  color:
    var(--green-800);

  background:
    linear-gradient(
      135deg,
      #f0faf4,
      #eaf7ef
    );

  border:
    1px solid #cfe8d8;

  border-radius:
    11px;

  box-shadow:
    0 5px 14px rgba(33, 131, 76, .045);
}


/* ERROR */

.status.error {
  padding:
    10px 14px;

  color:
    var(--red-700);

  background:
    linear-gradient(
      135deg,
      #fff5f3,
      #fff0ee
    );

  border:
    1px solid #efd0cb;

  border-radius:
    11px;
}


/* WARNING */

.status.warning {
  padding:
    10px 14px;

  color:
    var(--gold-900);

  background:
    linear-gradient(
      135deg,
      #fffaf0,
      #fff7e7
    );

  border:
    1px solid #eedfb8;

  border-radius:
    11px;
}


/* LOADING */

.status.loading {
  padding:
    10px 14px;

  color:
    var(--blue);

  background:
    linear-gradient(
      135deg,
      #f1f8ff,
      #edf6fd
    );

  border:
    1px solid #d1e5f3;

  border-radius:
    11px;
}


/* INFO */

.status.info {
  color:
    var(--text-muted);
}


/* =========================================================
   17. RESULT CONTAINER
   ========================================================= */

.hasil {
  width:
    min(100%, 760px);

  margin:
    24px auto 0;

  text-align:
    center;
}


/* =========================================================
   18. RESULT CARD
   ========================================================= */

.result-card {
  position: relative;

  width: 100%;

  overflow: hidden;

  padding:
    27px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .98),
      rgba(249, 252, 254, .98)
    );

  border:
    1px solid rgba(213, 225, 235, .95);

  border-radius:
    24px;

  box-shadow:
    var(--shadow-lg),
    0 1px 0 rgba(255, 255, 255, .9) inset;

  text-align:
    left;

  animation:
    resultReveal .45s var(--ease) both;
}


/* Decorative blue glow */

.result-card::before {
  content: "";

  position: absolute;

  top: -140px;
  right: -110px;

  width: 290px;
  height: 290px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(25, 118, 185, .11),
      rgba(25, 118, 185, .025) 45%,
      transparent 70%
    );

  pointer-events: none;
}


/* Gold identity line */

.result-card::after {
  content: "";

  position: absolute;

  top: 0;
  left: 28px;

  width: 78px;
  height: 3px;

  border-radius:
    0 0 6px 6px;

  background:
    linear-gradient(
      90deg,
      var(--gold),
      var(--gold-light)
    );

  box-shadow:
    0 2px 8px rgba(208, 161, 38, .18);
}


/* =========================================================
   19. RESULT HEADER
   ========================================================= */

.result-top {
  position: relative;

  z-index: 2;

  width: 100%;

  margin-bottom: 17px;
}


.result-heading {
  display: flex;

  align-items: center;

  gap: 10px;

  min-width: 0;
}


.result-name {
  margin: 0;

  min-width: 0;

  color:
    var(--navy-950);

  font-family:
    "Plus Jakarta Sans",
    sans-serif;

  font-size:
    clamp(22px, 3vw, 29px);

  line-height:
    1.15;

  font-weight:
    850;

  letter-spacing:
    -.95px;

  overflow-wrap:
    anywhere;
}


/* =========================================================
   20. PARTICIPANT INFO
   ========================================================= */

.participant-info {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 10px;

  width: 100%;

  margin-bottom: 21px;
}


.info-item {
  position: relative;

  min-width: 0;

  min-height: 65px;

  padding:
    12px 14px;

  display: flex;

  align-items: center;

  background:
    linear-gradient(
      145deg,
      #f9fbfd,
      #f5f8fb
    );

  border:
    1px solid #e0e8f0;

  border-radius:
    14px;

  overflow: hidden;

  box-shadow:
    0 3px 10px rgba(4, 18, 38, .025);
}


/* Small top shine */

.info-item::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 1px;

  background:
    rgba(255, 255, 255, .9);
}


.info-value {
  display: block;

  width: 100%;

  color:
    var(--text-strong);

  font-size:
    12px;

  line-height:
    1.45;

  font-weight:
    750;

  overflow-wrap:
    anywhere;
}


.info-item-group {
  background:
    linear-gradient(
      145deg,
      #f0f8ff,
      #eaf5fd
    );

  border-color:
    #cfe3f2;

  box-shadow:
    0 4px 14px rgba(25, 118, 185, .045);
}


.group-value {
  color:
    var(--navy-800);
}


/* =========================================================
   21. QR SECTION
   ========================================================= */

.qr-section {
  position: relative;

  z-index: 2;

  width: 100%;

  padding:
    22px 20px 21px;

  background:
    linear-gradient(
      145deg,
      #f7fbfe 0%,
      #ffffff 55%,
      #f8fbfd 100%
    );

  border:
    1px solid #dce7ef;

  border-radius:
    18px;

  text-align:
    center;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9);
}


/* Subtle QR section glow */

.qr-section::before {
  content: "";

  position: absolute;

  width: 250px;
  height: 180px;

  top: -100px;
  left: 50%;

  transform:
    translateX(-50%);

  background:
    radial-gradient(
      ellipse,
      rgba(25, 118, 185, .055),
      transparent 70%
    );

  pointer-events: none;
}


.qr-section-header {
  width: 100%;

  min-height: 2px;

  margin-bottom: 10px;
}


/* =========================================================
   22. QR FRAME
   ========================================================= */

.qr-frame {
  position: relative;

  width:
    min(100%, 335px);

  margin:
    0 auto;

  padding:
    13px;

  background:
    #ffffff;

  border:
    1px solid #d2dfe9;

  border-radius:
    19px;

  box-shadow:
    0 16px 38px rgba(4, 18, 38, .09),
    0 2px 5px rgba(4, 18, 38, .025);

  transition:
    transform .25s var(--ease),
    box-shadow .25s var(--ease);
}


.qr-frame:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 20px 45px rgba(4, 18, 38, .11),
    0 2px 6px rgba(4, 18, 38, .025);
}


.qr-image-wrap {
  position: relative;

  width: 100%;

  aspect-ratio:
    1 / 1;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  background:
    #ffffff;

  border-radius:
    11px;
}


.qr-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  opacity: 0;

  transform:
    scale(.975);

  transition:
    opacity .25s ease,
    transform .25s var(--ease);
}


.qr-image.is-loaded {
  opacity: 1;

  transform:
    scale(1);
}


/* =========================================================
   23. QR LOADING
   ========================================================= */

.qr-loading {
  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 7px;

  background:
    linear-gradient(
      135deg,
      #f5f9fc,
      #ffffff
    );

  z-index: 2;
}


.qr-loading span {
  width: 7px;
  height: 7px;

  border-radius:
    50%;

  background:
    var(--navy-700);

  animation:
    qrPulse 1.1s ease-in-out infinite;
}


.qr-loading span:nth-child(2) {
  animation-delay:
    .15s;
}


.qr-loading span:nth-child(3) {
  animation-delay:
    .3s;
}


@keyframes qrPulse {

  0%,
  80%,
  100% {
    opacity: .25;

    transform:
      translateY(0);
  }

  40% {
    opacity: 1;

    transform:
      translateY(-4px);
  }
}


/* =========================================================
   24. QR HELP
   ========================================================= */

.qr-help {
  max-width:
    470px;

  margin:
    13px auto 0;

  color:
    var(--text-muted);

  font-size:
    11px;

  line-height:
    1.6;

  text-align:
    center;
}


/* =========================================================
   25. QR ACTIONS
   ========================================================= */

.qr-actions {
  display: flex;

  align-items: center;
  justify-content: center;

  flex-wrap: wrap;

  gap: 9px;

  margin-top:
    16px;
}


.qr-download,
.qr-secondary {
  min-height: 41px;

  padding:
    0 16px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  border-radius:
    10px;

  font-size:
    12px;

  font-weight:
    800;

  cursor:
    pointer;

  transition:
    transform .2s var(--ease),
    box-shadow .2s var(--ease),
    background .2s ease,
    border-color .2s ease;
}


/* Download */

.qr-download {
  color:
    #ffffff;

  background:
    linear-gradient(
      135deg,
      #08244a,
      #0d477f
    );

  box-shadow:
    0 8px 18px rgba(8, 36, 74, .17);
}


.qr-download svg {
  width: 16px;
  height: 16px;

  flex-shrink: 0;
}


.qr-download:hover {
  transform:
    translateY(-2px);

  background:
    linear-gradient(
      135deg,
      #092a55,
      #12609a
    );

  box-shadow:
    0 12px 24px rgba(8, 36, 74, .22);
}


/* Secondary */

.qr-secondary {
  color:
    var(--navy-800);

  background:
    #ffffff;

  border:
    1px solid var(--border-strong);

  box-shadow:
    0 4px 12px rgba(4, 18, 38, .045);
}


.qr-secondary:hover {
  transform:
    translateY(-2px);

  background:
    #f8fafc;

  border-color:
    #c6d5e2;

  box-shadow:
    0 8px 18px rgba(4, 18, 38, .08);
}


.qr-download:focus-visible,
.qr-secondary:focus-visible {
  outline:
    3px solid rgba(25, 118, 185, .20);

  outline-offset:
    3px;
}


/* =========================================================
   26. QR ERROR
   ========================================================= */

.qr-error {
  width: 100%;

  min-height: 190px;

  padding:
    28px 20px;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 8px;

  color:
    var(--text-muted);

  background:
    linear-gradient(
      135deg,
      #fff6f4,
      #fff1ef
    );

  border:
    1px solid #efd1cc;

  border-radius:
    15px;

  text-align:
    center;
}


.qr-error-icon {
  width: 34px;
  height: 34px;

  display: flex;

  align-items: center;
  justify-content: center;

  margin-bottom: 2px;

  border-radius:
    50%;

  color:
    #ffffff;

  background:
    var(--red-700);

  font-size:
    18px;

  font-weight:
    800;

  line-height:
    1;
}


.qr-error strong {
  color:
    var(--red-800);

  font-size:
    14px;

  font-weight:
    800;
}


.qr-error span {
  max-width:
    390px;

  font-size:
    12px;

  line-height:
    1.55;
}


.qr-open-link {
  margin-top:
    4px;

  padding:
    7px 11px;

  color:
    var(--red-700);

  background:
    #ffffff;

  border:
    1px solid #eccbc6;

  border-radius:
    8px;

  font-size:
    12px;

  font-weight:
    800;

  transition:
    background .2s ease,
    transform .2s ease;
}


.qr-open-link:hover {
  background:
    #fffafa;

  transform:
    translateY(-1px);
}


/* =========================================================
   27. QR UNAVAILABLE
   ========================================================= */

.qr-unavailable {
  background:
    #ffffff;

  border:
    0;

  padding:
    0;
}


/* =========================================================
   28. RESULT LOADING
   ========================================================= */

.result-loading {
  min-height:
    440px;

  padding:
    26px;

  background:
    #ffffff;
}


.loading-header {
  width: 100%;

  display: flex;

  flex-direction: column;

  gap: 11px;

  margin-bottom:
    24px;
}


.loading-line {
  position: relative;

  height: 15px;

  overflow: hidden;

  border-radius:
    7px;

  background:
    #edf1f5;
}


.loading-line::after,
.loading-box::after,
.loading-qr::after {
  content: "";

  position: absolute;

  inset: 0;

  transform:
    translateX(-100%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, .75),
      transparent
    );

  animation:
    skeletonShimmer 1.3s ease-in-out infinite;
}


.loading-small {
  width: 26%;
}


.loading-large {
  width: 52%;

  height: 28px;
}


.loading-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 10px;

  margin-bottom:
    24px;
}


.loading-box {
  position: relative;

  height: 65px;

  overflow: hidden;

  border-radius:
    13px;

  background:
    #f0f3f7;
}


.loading-qr {
  position: relative;

  width:
    min(100%, 300px);

  aspect-ratio:
    1 / 1;

  margin:
    0 auto;

  overflow: hidden;

  border-radius:
    15px;

  background:
    #f0f3f7;
}


@keyframes skeletonShimmer {

  100% {
    transform:
      translateX(100%);
  }
}


/* =========================================================
   29. RESULT REVEAL
   ========================================================= */

@keyframes resultReveal {

  from {
    opacity: 0;

    transform:
      translateY(14px)
      scale(.985);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}


/* =========================================================
   30. FOOTER
   ========================================================= */

.site-footer {
  position: relative;

  z-index: 5;

  width:
    min(
      calc(100% - 40px),
      var(--max-width)
    );

  margin:
    0 auto;

  padding:
    0 0 27px;

  text-align:
    center;

  color:
    var(--text-light);

  font-size:
    10px;
}


.footer-line {
  width: 100%;

  height: 1px;

  margin-bottom: 16px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--border-strong),
      transparent
    );
}


.footer-content {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 9px;

  letter-spacing: .15px;
}


.footer-separator {
  color:
    var(--gold);

  font-size:
    11px;

  font-weight:
    700;
}


/* =========================================================
   31. TABLET
   ========================================================= */

@media (max-width: 820px) {

  .site-header {
    padding:
      12px
      16px
      5px;
  }


  .header-inner {
    min-height:
      64px;

    padding:
      8px
      12px;
  }


  .logo-left {
    height:
      44px;

    max-width:
      80px;
  }


  .brand-mark span {
    font-size:
      14px;
  }


  .logo-kanan {
    max-height:
      32px;
  }


  .logo-kanan1 {
    max-height:
      30px;
  }


  .logo-kanan2 {
    max-height:
      28px;
  }


  .logo-divider {
    margin:
      0 9px;
  }


  .search-section {
    min-height:
      600px;

    padding:
      34px
      20px
      45px;
  }


  .hero-logo {
    width:
      205px;

    height:
      205px;
  }


  .hero-logo img {
    width:
      193px;

    height:
      193px;
  }


  .hero-logo::after {
    width:
      181px;

    height:
      181px;
  }


  .orbit-one {
    width:
      410px;

    height:
      410px;
  }


  .orbit-two {
    width:
      330px;

    height:
      330px;
  }


  .result-card {
    padding:
      23px;
  }


  .qr-frame {
    width:
      min(100%, 305px);
  }
}


/* =========================================================
   32. MOBILE
   ========================================================= */

@media (max-width: 600px) {

  body {
    background:
      radial-gradient(
        circle at 50% 0%,
        rgba(25, 118, 185, .055),
        transparent 30%
      ),
      linear-gradient(
        180deg,
        #ffffff 0%,
        #f6f9fc 100%
      );
  }


  /* ---------- HEADER ---------- */

  .site-header {
    padding:
      8px
      10px
      3px;
  }


  .header-inner {
    min-height:
      58px;

    gap:
      8px;

    padding:
      7px
      9px;

    border-radius:
      15px;
  }


  .header-inner::before {
    left:
      20px;

    width:
      30px;
  }


  .header-left {
    gap:
      7px;
  }


  .logo-left {
    height:
      34px;

    max-width:
      62px;
  }


  .brand-mark {
    gap:
      4px;
  }


  .brand-mark span {
    font-size:
      11px;

    letter-spacing:
      -.2px;
  }


  .brand-mark small {
    font-size:
      10px;

    letter-spacing:
      .5px;
  }


  .header-right {
    flex-shrink:
      0;
  }


  .logo-kanan {
    max-width:
      62px;

    max-height:
      25px;
  }


  .logo-kanan1 {
    max-width:
      45px;

    max-height:
      24px;
  }


  .logo-kanan2 {
    max-width:
      40px;

    max-height:
      22px;
  }


  .logo-divider {
    height:
      17px;

    margin:
      0 5px;
  }


  /* ---------- MAIN ---------- */

  .search-section {
    width:
      calc(100% - 18px);

    min-height:
      0;

    margin-top:
      2px;

    padding:
      25px
      9px
      40px;
  }


  .search-section::before {
    width:
      370px;

    height:
      320px;
  }


  .search-section::after {
    bottom:
      9px;

    width:
      60px;
  }


  /* ---------- ORBIT ---------- */

  .orbit-one {
    width:
      325px;

    height:
      325px;

    top:
      2px;
  }


  .orbit-two {
    width:
      270px;

    height:
      270px;

    top:
      28px;
  }


  /* ---------- LOGO ---------- */

  .hero-logo {
    width:
      166px;

    height:
      166px;

    margin-bottom:
      3px;
  }


  .hero-logo::before {
    width:
      135px;

    height:
      135px;
  }


  .hero-logo::after {
    width:
      148px;

    height:
      148px;
  }


  .hero-logo img {
    width:
      158px;

    height:
      158px;
  }


  /* ---------- HEADING ---------- */

  .hero-heading {
    width:
      100%;

    margin-bottom:
      21px;
  }


  .eyebrow {
    margin-bottom:
      7px;

    font-size:
      7.5px;

    letter-spacing:
      2px;
  }


  .eyebrow::before,
  .eyebrow::after {
    width:
      13px;
  }


  .title {
    font-size:
      31px;

    letter-spacing:
      -1.45px;
  }


  .subtitle {
    margin-top:
      9px;

    padding:
      0 8px;

    font-size:
      12px;

    line-height:
      1.55;
  }


  /* ---------- SEARCH ---------- */

  .search-area {
    width:
      100%;
  }


  .search-box {
    gap:
      5px;

    padding:
      5px;

    border-radius:
      14px;
  }


  .search-icon {
    left:
      13px;

    width:
      18px;

    height:
      18px;
  }


  #nrpInput {
    height:
      48px;

    padding:
      0
      9px
      0
      40px;

    font-size:
      13px;
  }


  #nrpInput::placeholder {
    font-size:
      12px;
  }


  .btn-primary {
    height:
      48px;

    min-width:
      87px;

    padding:
      0 13px;

    gap:
      5px;

    border-radius:
      10px;

    font-size:
      12px;
  }


  .btn-primary svg {
    width:
      15px;

    height:
      15px;
  }


  .search-hint {
    margin-top:
      8px;

    font-size:
      10px;
  }


  .example-nrp {
    font-size:
      10px;
  }


  /* ---------- STATUS ---------- */

  .status {
    font-size:
      11px;
  }


  /* ---------- RESULT ---------- */

  .hasil {
    width:
      min(
        calc(100% - 12px),
        760px
      );

    margin-top:
      19px;
  }


  .result-card {
    padding:
      20px
      13px
      16px;

    border-radius:
      20px;
  }


  .result-card::after {
    left:
      50%;

    transform:
      translateX(-50%);

    width:
      54px;
  }


  .result-heading {
    justify-content:
      center;

    text-align:
      center;
  }


  .result-name {
    max-width:
      calc(100% - 20px);

    font-size:
      20px;

    text-align:
      center;
  }


  /* ---------- PARTICIPANT INFO ---------- */

  .participant-info {
    grid-template-columns:
      1fr;

    gap:
      7px;

    margin-bottom:
      17px;
  }


  .info-item {
    min-height:
      53px;

    justify-content:
      center;

    padding:
      10px
      12px;

    text-align:
      center;

    border-radius:
      12px;
  }


  .info-value {
    font-size:
      11.5px;
  }


  /* ---------- QR ---------- */

  .qr-section {
    padding:
      16px
      10px
      15px;

    border-radius:
      15px;
  }


  .qr-frame {
    width:
      min(100%, 270px);

    padding:
      9px;

    border-radius:
      15px;
  }


  .qr-image-wrap {
    border-radius:
      9px;
  }


  .qr-help {
    padding:
      0 7px;

    font-size:
      10.5px;
  }


  .qr-actions {
    flex-direction:
      column;

    width:
      100%;
  }


  .qr-download,
  .qr-secondary {
    width:
      100%;

    min-height:
      41px;

    font-size:
      11.5px;
  }


  /* ---------- QR ERROR ---------- */

  .qr-error {
    min-height:
      175px;

    padding:
      24px
      15px;
  }


  /* ---------- LOADING ---------- */

  .result-loading {
    min-height:
      405px;

    padding:
      20px
      15px;
  }


  .loading-grid {
    grid-template-columns:
      1fr;

    gap:
      8px;
  }


  .loading-box {
    height:
      53px;
  }


  .loading-qr {
    width:
      min(100%, 250px);
  }


  /* ---------- FOOTER ---------- */

  .site-footer {
    width:
      calc(100% - 28px);

    padding-bottom:
      18px;

    font-size:
      9.5px;
  }


  .footer-content {
    gap:
      6px;

    flex-wrap:
      wrap;
  }
}


/* =========================================================
   33. SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

  .header-inner {
    padding:
      6px
      7px;
  }


  .logo-left {
    height:
      31px;

    max-width:
      55px;
  }


  .brand-mark span {
    font-size:
      10px;
  }


.brand-mark small {
  display: inline;
  font-size: 8px;
  letter-spacing: .4px;
}


  .logo-kanan {
    max-width:
      52px;

    max-height:
      22px;
  }


  .logo-kanan1 {
    max-width:
      39px;

    max-height:
      21px;
  }


  .logo-kanan2 {
    max-width:
      34px;

    max-height:
      20px;
  }


  .logo-divider {
    margin:
      0 3px;

    height:
      15px;
  }


  .search-section {
    padding-top:
      21px;
  }


  .hero-logo {
    width:
      148px;

    height:
      148px;
  }


  .hero-logo img {
    width:
      141px;

    height:
      141px;
  }


  .hero-logo::after {
    width:
      132px;

    height:
      132px;
  }


  .orbit-one {
    width:
      286px;

    height:
      286px;
  }


  .orbit-two {
    width:
      235px;

    height:
      235px;
  }


  .title {
    font-size:
      28px;
  }


  .subtitle {
    font-size:
      11.5px;
  }


  .search-box {
    padding:
      4px;
  }


  #nrpInput {
    height:
      46px;

    padding-left:
      38px;
  }


  .btn-primary {
    height:
      46px;

    min-width:
      76px;

    padding:
      0 10px;
  }


  .btn-primary span {
    font-size:
      11px;
  }


  .btn-primary svg {
    display:
      none;
  }


  .result-card {
    padding:
      17px
      11px
      15px;
  }


  .result-name {
    font-size:
      19px;
  }


  .qr-frame {
    width:
      min(100%, 235px);
  }
}


/* =========================================================
   34. EXTRA SMALL DEVICES
   ========================================================= */

@media (max-width: 340px) {

  .header-right {
    transform:
      scale(.88);

    transform-origin:
      right center;
  }


  .brand-mark {
    display:
      none;
  }


  .title {
    font-size:
      26px;
  }


  .subtitle {
    padding:
      0 8px;
  }


  .search-box {
    gap:
      3px;
  }


  #nrpInput {
    padding-left:
      36px;
  }


  .btn-primary {
    min-width:
      70px;

    padding:
      0 8px;
  }


  .btn-primary .btn-text {
    font-size:
      11px;
  }


  .qr-frame {
    width:
      min(100%, 210px);
  }


  .qr-download,
  .qr-secondary {
    font-size:
      11px;
  }
}


/* =========================================================
   35. ACCESSIBILITY
   ========================================================= */

:focus-visible {
  outline:
    3px solid rgba(25, 118, 185, .24);

  outline-offset:
    3px;
}


button:disabled {
  cursor:
    not-allowed;
}


/* =========================================================
   36. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior:
      auto;
  }


  *,
  *::before,
  *::after {
    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;

    scroll-behavior:
      auto !important;
  }
}