/* ============================================================
   BENGKEL DIGITAL — variasi "RISO PRINT / ZINE"
   Konsep: cetak risograf — dot halftone, warna tumpang tindih
   ala salah-cetak, garis tebal, dan tempelan stiker miring.
   Sengaja jauh dari gaya cetak-biru versi sebelumnya.
   ============================================================ */

:root{
  --ink:      #eef5ff;
  --paper:    #030916;
  --paper-2:  #07172d;
  --pink:     #1478ff;
  --teal:     #65d8ff;
  --yellow:   #e4b64f;
  --muted:    #b8c9e2;
  --line:     #2a568f;

  --font-display: "Archivo Black", "Arial Black", sans-serif;
  --font-body:    "Work Sans", "Segoe UI", sans-serif;
  --font-mono:    "Space Mono", "Courier New", monospace;

  --maxw: 1180px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
section[id]{ scroll-margin-top: 90px; }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover{ color: var(--pink); }

.wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 400; /* Archivo Black is already heavy */
  line-height: 1.05;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.mono{ font-family: var(--font-mono); letter-spacing:.01em; }

.eyebrow{
  font-family: var(--font-mono);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--pink);
  font-weight: 700;
  display:flex; align-items:center; gap:8px;
  margin-bottom: 14px;
}
.eyebrow::before{ content:"◆"; font-size:9px; }

/* ---------- halftone dot texture (signature pattern) ---------- */
.grid-bg{
  background-image: radial-gradient(rgba(26,26,24,0.22) 1.4px, transparent 1.6px);
  background-size: 11px 11px;
}

/* ---------- diagonal stripe divider (signature pattern) ---------- */
.stripe-divider{
  height: 12px;
  background-image: repeating-linear-gradient(
    45deg, var(--ink), var(--ink) 8px, var(--pink) 8px, var(--pink) 16px
  );
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding: 16px 0; }
.brand{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink); text-decoration:none;
}
.brand:hover{ color: var(--ink); }
.brand .logo-mark{ width:34px; height:34px; flex:none; display:block; }

.nav-links{ display:flex; gap: 26px; list-style:none; margin:0; padding:0; align-items:center; }
.nav-links a{
  color: var(--ink); text-decoration:none;
  font-size: 13.5px; font-family: var(--font-mono); font-weight:700;
  text-transform: uppercase; letter-spacing:.04em;
  padding-bottom: 3px;
  background-image: linear-gradient(var(--yellow), var(--yellow));
  background-repeat: no-repeat;
  background-size: 0% 8px;
  background-position: 0 100%;
  transition: background-size .18s ease;
}
.nav-links a:hover, .nav-links a.active{ color: var(--ink); background-size: 100% 8px; }
.nav-cta{
  background: var(--ink) !important; color: var(--paper) !important;
  padding: 10px 18px !important;
  border: 2.5px solid var(--ink);
  box-shadow: 4px 4px 0 0 var(--pink);
}
.nav-cta:hover{ background: var(--pink) !important; border-color:var(--ink); color:var(--ink) !important; }

.nav-toggle{ display:none; }

/* ============================================================
   BUTTONS — tekan & lepas efek "cap stempel"
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-mono); font-weight:700;
  font-size: 13.5px; text-transform:uppercase; letter-spacing:.03em;
  padding: 13px 24px;
  border: 2.5px solid var(--ink);
  background: var(--paper-2);
  color: var(--ink);
  text-decoration:none; cursor:pointer;
  box-shadow: 5px 5px 0 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover{ transform: translate(3px,3px); box-shadow: 2px 2px 0 0 var(--ink); }
.btn-primary{ background: var(--pink); box-shadow: 5px 5px 0 0 var(--ink); }
.btn-primary:hover{ background: var(--yellow); }

/* ============================================================
   OFFSET / MISPRINT FRAME (signature element)
   Kartu dengan bayangan tebal bergeser, meniru salah-cetak riso.
   ============================================================ */
.spec-frame{
  position: relative;
  border: 2.5px solid var(--ink);
  background: var(--paper-2);
  padding: 28px;
  box-shadow: 8px 8px 0 0 var(--teal);
}
.spec-frame .c2{ display:none; }
.spec-tag{
  position:absolute; top:-16px; left:22px;
  background: var(--yellow);
  border: 2px solid var(--ink);
  padding: 3px 10px;
  font-family: var(--font-mono); font-size: 11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  transform: rotate(-2deg);
}

/* sticker/stamp badge */
.sticker{
  position:absolute;
  background: var(--pink);
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  width: 108px; height:108px;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  font-family: var(--font-mono); font-weight:700; font-size:11.5px;
  text-transform:uppercase; line-height:1.25;
  color: var(--ink);
  transform: rotate(-11deg);
  box-shadow: 5px 5px 0 0 var(--ink);
  z-index: 5;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding: 70px 0 56px; border-bottom: 3px solid var(--ink); position:relative; }
.hero-grid{ display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items:center; }
.hero h1{ font-size: clamp(32px, 4.2vw, 50px); max-width: 12ch; }
.hero .lede{ font-size: 17.5px; color: var(--muted); max-width: 46ch; margin: 18px 0 30px; font-family:var(--font-body); text-transform:none; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom: 32px; }

.hero-stats{ display:flex; gap: 26px; padding-top: 22px; border-top: 3px dashed var(--ink); flex-wrap:wrap; }
.hero-stats div{ font-family:var(--font-mono); }
.hero-stats b{ display:block; font-family:var(--font-display); font-size: 22px; color:var(--ink); }
.hero-stats span{ font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }

.hero-panel{ position:relative; }
.hero-banner{ border: 2.5px solid var(--ink); margin-bottom: 26px; overflow:hidden; line-height:0; box-shadow: 8px 8px 0 0 var(--pink); }
.hero-banner img{ width:100%; display:block; }

.hero-panel .spec-title{ font-family: var(--font-display); font-size: 17px; color: var(--ink); margin-bottom: 16px; text-transform:uppercase; }
.hero-panel .spec-row{
  display:flex; justify-content:space-between; padding: 10px 0;
  border-bottom: 2px dashed var(--ink); color: var(--muted);
  font-family: var(--font-mono); font-size:13px;
}
.hero-panel .spec-row:last-child{ border-bottom:none; }
.hero-panel .spec-row b{ color: var(--ink); font-weight:700; }

/* ============================================================
   SECTIONS
   ============================================================ */
section{ padding: 68px 0; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom: 36px; gap: 20px; flex-wrap:wrap;
  border-bottom: 3px solid var(--ink); padding-bottom: 18px;
}
.section-head h2{ font-size: clamp(24px,3vw,32px); margin:0; }
.section-head p{ margin:6px 0 0; color:var(--muted); max-width:50ch; font-family:var(--font-body); text-transform:none; }

/* ---------- product grid ---------- */
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.grid-2{ display:grid; grid-template-columns: repeat(2,1fr); gap: 28px; }

.card{
  border: 2.5px solid var(--ink);
  background: var(--paper-2);
  display:flex; flex-direction:column;
  box-shadow: 6px 6px 0 0 var(--ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:nth-child(3n+1):hover{ box-shadow: 8px 8px 0 0 var(--pink); }
.card:nth-child(3n+2):hover{ box-shadow: 8px 8px 0 0 var(--teal); }
.card:nth-child(3n+3):hover{ box-shadow: 8px 8px 0 0 var(--yellow); }
.card:hover{ transform: translate(-2px,-4px); }

.card-media{
  aspect-ratio: 16/10;
  border-bottom: 2.5px solid var(--ink);
  background-image: radial-gradient(rgba(26,26,24,0.16) 1.3px, transparent 1.5px);
  background-size: 9px 9px;
  background-color: var(--paper);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.card-media .idx{ font-family: var(--font-mono); font-weight:700; font-size:11.5px; color: var(--ink); position:absolute; top:10px; left:12px; background:var(--yellow); padding:1px 6px; border:1.5px solid var(--ink); }
.card-media svg{ width: 46%; }
.card-media svg *{ stroke: var(--ink) !important; }

.card-body{ padding: 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.card-kicker{ font-family: var(--font-mono); font-size:11px; font-weight:700; color: var(--pink); text-transform:uppercase; letter-spacing:.06em; }
.card-body h3{ font-size:18px; margin:0; }
.card-body p{ color:var(--muted); font-size:14.5px; margin:0; flex:1; font-family:var(--font-body); text-transform:none; }
.card-foot{ display:flex; justify-content:space-between; align-items:center; padding-top: 12px; margin-top:4px; border-top: 2px dashed var(--ink); }
.price{ font-family:var(--font-mono); font-weight:700; font-size:15px; }
.card-foot a{ font-family: var(--font-mono); font-weight:700; font-size: 13px; text-decoration:none; color:var(--ink); border-bottom: 2px solid var(--ink); }
.card-foot a:hover{ color:var(--pink); border-color:var(--pink); }

/* ---------- articles ---------- */
.article-row{ display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.article-card{
  border-left: 4px solid var(--ink);
  padding: 4px 0 4px 18px;
  display:flex; flex-direction:column; gap:10px;
}
.article-card:hover{ border-left-color: var(--pink); }
.article-meta{ font-family:var(--font-mono); font-size:11.5px; font-weight:700; color:var(--muted); display:flex; gap:10px; text-transform:uppercase; }
.article-card h1{ font-size:17px; margin:0; }
.article-card p{ color:var(--muted); font-size:14.5px; margin:0; font-family:var(--font-body); text-transform:none; }

.article-featured{
  display:grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 2.5px solid var(--ink);
  background: var(--paper-2);
  margin-bottom: 34px;
  box-shadow: 8px 8px 0 0 var(--yellow);
}
.article-featured .art-img{
  border-right: 2.5px solid var(--ink);
  background-image: radial-gradient(rgba(26,26,24,0.18) 1.4px, transparent 1.6px);
  background-size: 10px 10px; background-color: var(--paper);
  min-height: 240px; display:flex; align-items:center; justify-content:center;
}
.article-featured .art-img svg *{ stroke: var(--ink) !important; }
.article-featured .art-body{ padding: 32px; display:flex; flex-direction:column; }
.article-featured h1{ font-size: 25px; }

/* ---------- trust strip ---------- */
.trust-strip{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding: 24px 0; border-top:3px solid var(--ink); border-bottom:3px solid var(--ink);
  font-family: var(--font-mono); font-size:12px; font-weight:700; color:var(--ink);
  text-transform:uppercase;
}

/* ============================================================
   FORMS (kontak)
   ============================================================ */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.field.full{ grid-column: 1/-1; }
label{ font-family:var(--font-mono); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink); }
input, textarea, select{
  font-family: var(--font-body); font-size:15px;
  border: 2.5px solid var(--ink); background: var(--paper-2); padding: 12px 14px; color: var(--ink);
}
input:focus, textarea:focus, select:focus{ outline: none; box-shadow: 4px 4px 0 0 var(--teal); }
textarea{ resize:vertical; min-height:120px; }

.contact-info{ display:flex; flex-direction:column; gap:22px; }
.contact-info .item{ display:flex; gap:14px; }
.contact-info .item .lbl{ font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--pink); text-transform:uppercase; letter-spacing:.04em; width:90px; flex:none; padding-top:2px; }

/* ============================================================
   PAGE / PROSE
   ============================================================ */
.prose{ max-width: 74ch; }
.prose h2{ font-size: 21px; margin-top: 2.2em; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size: 19px; margin-top: 1.8em; }
.prose p{ margin: 0 0 1.2em; color: var(--ink); font-family:var(--font-body); text-transform:none; }
.prose p.lede{ font-size:17.5px; color:var(--muted); }
.prose ul{ padding-left: 1.2em; margin: 0 0 1.2em; }
.prose li{ margin-bottom:.5em; }
.prose blockquote{
  margin: 1.8em 0; padding: 14px 20px;
  border: 2.5px dashed var(--ink);
  background: var(--paper);
  color: var(--ink); font-style:normal; font-family:var(--font-mono); font-size:14.5px;
}

.values-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; margin: 30px 0 10px; }
.value-item{ padding: 20px 0; border-top: 3px solid var(--ink); }
.value-item .num{ font-family:var(--font-mono); color:var(--pink); font-weight:700; font-size:13px; }
.value-item h4{ font-size:16px; margin: 8px 0 6px; }
.value-item p{ color:var(--muted); font-size:14px; margin:0; font-family:var(--font-body); text-transform:none; }

.spec-table{ width:100%; border-collapse:collapse; font-size:14.5px; }
.spec-table tr{ border-bottom: 2px dashed var(--ink); }
.spec-table td{ padding: 12px 0; vertical-align:top; }
.spec-table td:first-child{ font-family:var(--font-mono); font-weight:700; color:var(--muted); width: 200px; text-transform:uppercase; font-size:12px; letter-spacing:.03em; }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ border-top: 3px solid var(--ink); padding: 48px 0 26px; background: var(--ink); color: var(--paper); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 36px; }
.footer-grid h5{ font-family: var(--font-mono); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--yellow); margin: 0 0 14px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-grid a{ color:var(--paper); text-decoration:none; font-size:14px; }
.footer-grid a:hover{ color:var(--pink); }
.footer-about p{ color:#C9C6BC; font-size:14px; max-width:32ch; font-family:var(--font-body); text-transform:none; }
.footer-about .brand{ color:var(--paper); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top: 22px; border-top: 2px solid #3A3A36;
  font-family: var(--font-mono); font-size:12px; color:#C9C6BC;
  flex-wrap:wrap; gap:10px; text-transform:uppercase;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px){
  .hero-grid{ grid-template-columns:1fr; }
  .grid-3, .article-row, .values-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .article-featured{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .nav-links{
    position:fixed; inset: 65px 0 0 0; background: var(--paper);
    flex-direction:column; padding: 26px 28px; gap:20px; align-items:flex-start;
    transform: translateX(100%); transition: transform .2s ease;
    border-top: 3px solid var(--ink);
  }
  .nav-links.open{ transform: translateX(0); }
  .nav-toggle{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:2.5px solid var(--ink); background:var(--yellow); font-family: var(--font-mono); font-weight:700; }
  .grid-3, .grid-2, .article-row, .values-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .hero-stats{ flex-wrap:wrap; row-gap:16px; }
  .sticker{ width:84px; height:84px; font-size:10px; }
}

@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ transition:none !important; } }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline: 3px solid var(--teal); outline-offset: 2px; }


/* GIGA88 APP OVERRIDES */
body{
  background:
    radial-gradient(circle at top, rgba(20,120,255,.18), transparent 30%),
    var(--paper);
}
.site-header{
  background:rgba(3,9,22,.95);
  backdrop-filter:blur(12px);
}
.brand,.brand:hover,.nav-links a,a{color:var(--ink)}
.nav-cta{
  color:#061a3a !important;
  background:#eaf2ff !important;
}
.nav-cta:hover{
  color:#fff !important;
  background:var(--pink) !important;
}
.btn{
  color:var(--ink);
  background:var(--paper-2);
  border-color:var(--teal);
  box-shadow:5px 5px 0 var(--pink);
}
.btn-primary{
  color:#061a3a;
  background:#eaf2ff;
}
.grid-bg{
  background-image:
    linear-gradient(rgba(101,216,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(101,216,255,.05) 1px,transparent 1px);
  background-size:28px 28px;
}
.stripe-divider{
  background-image:repeating-linear-gradient(
    45deg,#020713,#020713 8px,var(--pink) 8px,var(--pink) 16px
  );
}
.hero-banner img,.art-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.logo-mark{
  width:54px !important;
  height:34px !important;
  object-fit:contain;
}
.card,.article-card,.article-featured,.value-item,.prose,.spec-frame,.faq-list details{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)),var(--paper-2);
  color:var(--ink);
  border-color:var(--line);
}
.card p,.article-card p,.art-body p,.value-item p,.prose p,.section-head p{
  color:var(--muted);
}
.register-symbol{
  margin-top:26px;
  font-family:var(--font-mono);
  font-size:clamp(34px,5vw,58px);
  color:var(--teal);
  font-weight:700;
}
.registration-check{margin-top:48px}
.spec-row,.spec-table td{color:var(--muted)}
.spec-row b,.spec-table td:last-child{color:var(--ink)}
.faq-list{display:grid;gap:14px}
.faq-list details{padding:0 20px}
.faq-list summary{
  cursor:pointer;
  padding:18px 0;
  font-family:var(--font-display);
  text-transform:uppercase;
}
.faq-list details p{margin:0;padding:0 0 18px}
footer{background:#020713}
footer a,footer p,footer li{color:var(--muted)}
blockquote{
  background:rgba(228,182,79,.08);
  border-left-color:var(--yellow);
}
@media(max-width:900px){
  .hero h1{font-size:clamp(38px,11vw,58px)}
  .hero-actions{display:grid;grid-template-columns:1fr}
  .hero-actions .btn{width:100%;justify-content:center}
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .nav-links{background:#061329;border-color:var(--line)}
  .registration-check{grid-template-columns:1fr}
}
@media(max-width:520px){
  .hero-stats{grid-template-columns:1fr}
  .hero-stats>div{padding-bottom:14px;border-bottom:1px dashed var(--line)}
  .brand{font-size:16px}
  .logo-mark{width:40px !important;height:26px !important}
}


/* ===== PERBAIKAN VISIBILITAS DAN KOTAK LANGKAH 1:1 ===== */
footer,
footer .footer-grid,
footer .footer-about,
footer h5,
footer strong,
footer p,
footer li,
footer a,
footer a:link,
footer a:visited,
footer .brand,
footer .mono {
  opacity: 1 !important;
  visibility: visible !important;
}

footer h5,
footer strong {
  color: #e4b64f !important;
}

footer p,
footer li,
footer a,
footer a:link,
footer a:visited,
footer .mono {
  color: #dbe8ff !important;
}

footer a:hover {
  color: #65d8ff !important;
}

footer .brand {
  color: #ffffff !important;
}

.registration-steps .card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.square-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 0 !important;
  overflow: hidden;
  padding: 0 !important;
  background: #061329;
  border-bottom: 3px solid #dbe8ff;
}

.square-media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.square-media .idx {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: inline-block;
    width: auto;
    max-width: 180px;
    padding: 4px 8px;

    font-size: 7px;
    line-height: 1.1;
    letter-spacing: .5px;

    color: #061329;
    background: #e4b64f;
    border: 1px solid #fff;
}

.registration-steps .card-body {
  flex: 1;
}

.registration-steps .card-kicker,
.registration-steps h3,
.registration-steps p {
  opacity: 1 !important;
  visibility: visible !important;
}

.registration-steps .card-kicker {
  color: #65d8ff !important;
}

.registration-steps h3 {
  color: #ffffff !important;
}

.registration-steps p {
  color: #c7d7ee !important;
}

@media (max-width: 900px) {
  .registration-steps {
    grid-template-columns: 1fr !important;
  }

  .square-media {
    max-width: 620px;
    margin-inline: auto;
  }
}