:root{
  --bg:#000000;
  --fg:#EDEDED;
  --muted:#A9A9A9;
  --red:#E00000;
  --container: 560px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: "Courier New", Courier, monospace;
}

.wrap{
  min-height:100%;
  width: min(var(--container), calc(100% - 48px));
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding: 44px 0;
  gap: 28px;
}

.top,.nav,.footer{
  width: 100%;
  max-width: 360px;
  text-align:left;
}

.top{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
}
.logo{ text-decoration:none; display:inline-block; }
.logo-box{
  display:inline-block;
  background:var(--red);
  color:#fff;
  font-weight:800;
  padding:11px 20px;
  letter-spacing:0.2px;
  font-style: oblique;
}
.stamp{ font-size:13px; color:var(--muted); }

.nav{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top: 10px;
}

/* ==== DROPDOWN ARROW (FINAL) ==== */
/* hilangkan marker default */
.nav-dd > summary::marker,
.nav-dd > summary::-webkit-details-marker{
  display:none;
}

/* summary jadi flex supaya panah ada di kanan */
.nav-dd-title{
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding: 6px 10px;
  border-radius: 2px;
  font-size:15px;
  color:var(--fg);
  list-style:none;
}

/* panah custom */
.nav-dd-title::after{
  content:"›"; /* alternatif: "▸" atau "→" */
  display:inline-block;
  color: rgba(237,237,237,0.80);
  font-size:16px;
  line-height:1;
  transform: rotate(0deg);
  transition: transform 180ms ease, color 180ms ease;
}

/* saat open, panah muter ke bawah */
.nav-dd[open] > .nav-dd-title::after{
  transform: rotate(90deg);
  color: rgba(237,237,237,1);
}

.nav-dd-title:hover{
  background:#fff;
  color:#000;
}
.nav-dd-title:hover::after{
  color:#000;
}
/* ==== END DROPDOWN ARROW ==== */

.nav-dd-panel{
  margin-top: 8px;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-left: 10px;
}

.nav-item{
  color:var(--fg);
  text-decoration:none;
  font-size:15px;
  line-height:1.2;
  display:inline-block;
  padding: 6px 10px;
  border-radius: 2px;
}

.nav-item:hover{ background:#fff; color:#000; text-decoration:none; }
.nav-item.is-disabled{ color: rgba(237,237,237,0.55); }

.nav-divider{
  color: rgba(237,237,237,0.5);
  font-size: 14px;
  padding: 2px 10px;
}

.nav-item:focus-visible,
.nav-dd-title:focus-visible{
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.footer{
  display:flex;
  gap:16px;
  justify-content:flex-start;
  opacity:0.9;
  margin-top: 6px;
}
.social{
  color:var(--fg);
  text-decoration:none;
  font-size:13px;
  padding: 4px 6px;
  border-radius: 2px;
}
.social:hover{ background:#fff; color:#000; text-decoration:none; }

@media (max-width: 420px){
  :root{ --container: 520px; }
  .wrap{ width: calc(100% - 32px); padding: 36px 0; }
  .top,.nav,.footer{ max-width: 100%; }
  .nav-item,.nav-dd-title{ font-size:14px; }
  .stamp{ font-size:12px; }
}