:root{--bg:#0a0d11;--ink:#e9edf3;--dim:#8a95a5;--line:rgba(200,215,235,.16)}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);
  background-image:radial-gradient(rgba(200,215,235,.09) 1px,transparent 1.4px);
  background-size:22px 22px;
  color:var(--ink);
  font-family:"Segoe UI","Helvetica Neue",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  padding:max(18px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
}
#grid{
  width:min(100%,1120px);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:12px;
}
.g{
  --c:hsl(var(--h) 55% 66%);
  display:flex;flex-direction:column;
  background:rgba(200,215,235,.05);
  border:1px solid var(--line);
  color:inherit;
}
.g svg{display:block;width:100%;height:auto;aspect-ratio:5/3;color:var(--c);opacity:.7;border-bottom:1px solid var(--line)}
.g svg *{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.g svg .f{fill:currentColor;fill-opacity:.16}
.g img.th{display:block;width:100%;aspect-ratio:5/3;object-fit:cover;border-bottom:1px solid var(--line)}
/* batas usia */
.a{padding:0 16px 16px;font-size:.88rem;color:var(--dim)}
#pw{font-size:.85rem;color:var(--dim)}
.t{padding:14px 16px 4px;font-size:1.3rem;font-weight:700;line-height:1.15;letter-spacing:-.01em}
.d{padding:0 16px 8px;font-size:.92rem;line-height:1.4;color:#c3ccd8}
.g:hover,.g:focus-within{border-color:var(--c);background:rgba(200,215,235,.09)}
.g:hover svg,.g:focus-within svg{opacity:1}
.p{
  margin:auto 16px 16px;padding:12px 14px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  border:1px solid var(--c);color:var(--c);
  font-size:1rem;font-weight:700;text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.p svg{width:12px;height:12px;aspect-ratio:auto;border:0;opacity:1}
.p svg path{fill:currentColor;stroke:none}
.p:hover,.p:focus-visible{background:var(--c);color:#0a0d11}
.p:focus-visible{outline:2px solid var(--c);outline-offset:3px}
.p:active{filter:brightness(.85)}
@media (prefers-reduced-motion:no-preference){.g,.g svg,.p{transition:border-color .12s,background-color .12s,opacity .12s}}