/* NIGERIA — strip kain ankara, rata kiri */
.ng-page { --color-primary:#15803d; --color-accent:#facc15; --color-bg:#ffffff; --ng-merah:#dc2626; --ng-biru:#1d4ed8; --ng-ink:#1a2a1f; --ng-muted:#6d7a70;
  position:relative; background:var(--color-bg); color:var(--ng-ink); font-family:'Poppins',system-ui,sans-serif; margin:-1.5rem -12px 0; padding-bottom:52px; }
.ng-side { position:absolute; left:0; top:0; bottom:0; width:10px;
  background:repeating-linear-gradient(180deg,var(--color-primary) 0 14px,var(--color-accent) 14px 28px,var(--ng-merah) 28px 42px,var(--ng-biru) 42px 56px); }
.ng-container { width:100%; max-width:1020px; margin:0 auto; padding:0 16px 0 26px; }
.ng-breadcrumb { padding:14px 0 0; font-size:12px; color:var(--ng-muted); } .ng-breadcrumb a { color:var(--color-primary); }
.ng-strip { display:block; height:28px; margin:18px 0 16px; border-radius:4px;
  background-image:repeating-linear-gradient(90deg,var(--color-primary) 0 18px,var(--color-accent) 18px 36px,var(--ng-merah) 36px 54px,var(--ng-biru) 54px 72px),
    radial-gradient(circle at 9px 14px, rgba(255,255,255,.55) 3px, transparent 4px);
  background-size:72px 28px,36px 28px; }
.ng-hero { padding-bottom:6px; }
.ng-kicker { margin:0 0 8px; font-size:11px; font-weight:700; letter-spacing:.28em; color:var(--color-primary); }
.ng-h1 { font-weight:700; font-size:clamp(24px,5.6vw,40px); line-height:1.1; margin:0 0 8px; }
.ng-date { margin:0; font-size:12.5px; color:var(--ng-muted); }
.ng-cards { display:flex; flex-wrap:wrap; gap:12px; padding:24px 0 0; }
.ng-numcard { display:inline-flex; align-items:center; justify-content:center; width:clamp(66px,17vw,92px); height:clamp(78px,20vw,106px);
  border-radius:12px; background:#fff; border:4px solid var(--color-primary); color:var(--ng-ink); font-weight:700; font-size:clamp(30px,8vw,44px);
  box-shadow:0 0 0 3px #fff, 0 0 0 7px var(--color-accent); opacity:0; transform:translateY(12px); animation:ng-in .45s ease forwards; }
.ng-numcard-empty { border-color:#d7ded9; color:#b6c0b9; box-shadow:0 0 0 3px #fff,0 0 0 7px #eef2ef; }
@keyframes ng-in { to{opacity:1;transform:translateY(0);} }
.ng-meta { margin:20px 0 0; font-size:12.5px; color:var(--ng-muted); }
.ng-desc { margin:14px 0 0; font-size:14px; color:var(--ng-muted); }
.ng-section { margin-top:34px; }
.ng-h2 { font-weight:700; font-size:clamp(20px,4.6vw,27px); margin:0 0 16px; color:var(--color-primary); }
.ng-filter { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.ng-filter select { height:42px; padding:0 14px; border:2px solid var(--color-primary); border-radius:12px; background:#fff; font-family:inherit; font-size:13px; font-weight:600; }
.ng-btn { display:inline-flex; align-items:center; height:42px; padding:0 20px; border:2px solid var(--color-primary); border-radius:12px;
  background:var(--color-primary); color:#fff; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; }
.ng-btn:hover { background:#166534; color:#fff; } .ng-btn-ghost { background:var(--color-accent); color:var(--ng-ink); border-color:var(--color-accent); }
.ng-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:14px; }
.ng-item { position:relative; overflow:hidden; background:#eaf6ee; border:2px solid #cfe6d8; border-radius:12px; padding:16px 18px;
  display:flex; flex-direction:column; gap:2px; }
.ng-corner { position:absolute; top:0; right:0; width:0; height:0; border-style:solid; border-width:0 30px 30px 0; border-color:transparent var(--color-accent) transparent transparent; }
.ng-item-day { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ng-muted); }
.ng-item-date { font-size:13.5px; font-weight:700; }
.ng-item-num { margin-top:6px; font-size:30px; font-weight:700; letter-spacing:.12em; color:var(--color-primary); }
.ng-empty { background:#eaf6ee; border:2px dashed var(--color-primary); border-radius:12px; padding:38px 18px; text-align:center; }
.ng-empty h3 { font-weight:700; font-size:18px; margin:0 0 6px; } .ng-empty p { margin:0; font-size:13px; color:var(--ng-muted); }
.ng-pagination { margin-top:14px; font-size:13px; color:var(--ng-muted); }
.ng-pagination .page-link { border-radius:10px; border:2px solid var(--color-primary); color:var(--color-primary); font-weight:700; }
.ng-pagination .page-item.active .page-link { background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.ng-panels { display:grid; gap:12px; }
.ng-panel { background:#fff; border:2px solid #cfe6d8; border-left:10px solid var(--color-accent); border-radius:12px; padding:18px 16px; }
.ng-panel-label { display:block; font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ng-muted); }
.ng-panel-value { display:block; margin:6px 0 3px; font-size:19px; font-weight:700; color:var(--color-primary); }
.ng-panel-note { display:block; font-size:11.5px; color:var(--ng-muted); }
.ng-note { margin:18px 0 0; font-size:13px; color:var(--ng-muted); } .ng-note a { color:var(--color-primary); font-weight:700; }
@media (min-width:576px) { .ng-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:992px) { .ng-grid { grid-template-columns:repeat(3,1fr); } .ng-panels { grid-template-columns:repeat(3,1fr); } .ng-page { margin-left:-24px; margin-right:-24px; } }
@media (max-width:575.98px) { .ng-cards { gap:8px; } .ng-section { margin-top:26px; } }
@media (prefers-reduced-motion:reduce) { .ng-numcard { animation:none; opacity:1; transform:none; } }