/* Layout, font, and spacing tuned to the supplied 1584 x 773 reference. */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');
:root {
  --navy: #0b174d;
  --page: #f4f5fa;
  --text: #373943;
  --muted: #6b7185;
  --line: #dfe5ef;
  --green: #83c63e;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: 'Lato', Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}
.site-header {
  height: 79px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(110deg, #10245f, #09113f);
  color: #fff;
}
.brand { display:flex; align-items:center; justify-content:center; gap:8px; font-weight:700; letter-spacing:.1px; font-size:17px; }
.logo { width:21px; height:21px; object-fit:contain; }
.container { width: calc(100% - 56px); max-width:none; margin: 35px 28px 0; }
.status { padding: 0 0 8px; text-align:center; }
.status h1 { margin: 0 0 5px; color:#626573; font-size:20px; font-weight:300; line-height:1.5; }
.result { margin: 4px 0 6px; color:var(--green); font-size:21px; font-weight:700; line-height:1.35; }
.note { display:block; margin: 7px 0 8px; color:#a000a8; font-size:18px; font-weight:400; }
.demo-note { display:none; }
.validity { margin: 8px 0 0; color:#626573; font-size:20px; font-weight:300; }
.validity strong { font-weight:400; }
.panel { margin: 0 0 14px; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible; }
.panel h2 { margin:0 0 13px; padding:0; border:0; color:#6b7187; font-size:14px; font-weight:900; letter-spacing:.5px; text-transform:uppercase; }
.details { padding:0; background:#fff; }
.detail { min-height:43px; display:grid; grid-template-columns: 1fr 1fr; align-items:center; gap:18px; padding:10px 21px; border-bottom:1px solid var(--line); }
.detail:last-child { border-bottom:0; }
.detail span { color:#3f3f42; font-weight:400; }
.detail strong { min-width:0; overflow-wrap:anywhere; color:#3f3f42; font-weight:400; }
.detail strong::before { content:": "; }
.photos { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:start; gap:28px; }
.photo-card { min-width:0; padding:15px 12px 14px; text-align:center; background:#fff; border:1px solid #e0e3e9; border-radius:8px; box-shadow:0 1px 4px rgb(0 0 0 / 18%); }
.photo-card h2 { margin:0 0 7px; color:#505361; font-size:15px; line-height:1.5; font-weight:900; text-transform:uppercase; }
.photo-card img { display:block; width:auto; max-width:100%; height:184px; margin:0 auto; object-fit:contain; background:#fff; border:3px solid #fff; box-shadow:0 1px 4px rgb(0 0 0 / 28%); border-radius:0; }
.photo-card:nth-child(2) img { height:168px; }
.photo-card:nth-child(3) img, .photo-card:nth-child(4) img { width:100%; height:210px; object-fit:cover; }
@media (max-width: 1000px) {
  .container { width:calc(100% - 32px); margin:26px 16px 0; }
  .photos { gap:16px; }
  .photo-card:nth-child(3) img, .photo-card:nth-child(4) img { height:170px; }
}
@media (max-width: 700px) {
  .site-header { height:68px; }
  .brand { font-size:14px; }
  .container { width:calc(100% - 24px); margin:22px 12px 0; }
  .status h1 { font-size:17px; }
  .result { font-size:19px; }
  .note { font-size:16px; }
  .validity { font-size:16px; }
  .detail { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; padding:11px 12px; font-size:12px; }
  .photos { grid-template-columns:minmax(0,1fr); gap:24px; }
  .photo-card { width:100%; padding:15px 12px 14px; }
  .photo-card h2 { font-size:15px; }
  .photo-card img, .photo-card:nth-child(2) img,
  .photo-card:nth-child(3) img, .photo-card:nth-child(4) img {
    width:auto; max-width:100%; height:184px; object-fit:contain;
  }
}
@media (max-width: 380px) {
  .detail { grid-template-columns:1fr; gap:3px; }
  .detail strong::before { content:""; }
}
/* Full-width hover effect: the entire information row changes color, not just the text. */
.brand, .status h1, .status .result, .status .note, .status .validity,
.panel h2, .detail, .photo-card h2 {
  -webkit-tap-highlight-color: transparent;
  transition: background-color 90ms ease, box-shadow 90ms ease;
  cursor: pointer;
}
.detail span, .detail strong {
  background: transparent;
  transition: none;
}
@media (hover: hover) and (pointer: fine) {
  .brand:hover, .status h1:hover, .status .result:hover, .status .note:hover,
  .status .validity:hover, .panel h2:hover, .photo-card h2:hover {
    background-color: #eceef2;
    box-shadow: 0 0 0 5px #eceef2;
  }
  .detail:hover {
    background-color: #eceef2;
    box-shadow: 0 0 0 0 #eceef2;
  }
}
.brand:active, .status h1:active, .status .result:active, .status .note:active,
.status .validity:active, .panel h2:active, .detail:active,
.photo-card h2:active {
  background-color: #eceef2;
}

/* Status kedaluwarsa untuk halaman DEMO. */
.result.expired { color: #d62828; }
.demo-note { display:block; margin:10px auto 0; max-width:900px; color:#6b7187; font-size:11px; text-align:center; }