/* ===== RINGAN & DARK SOLID #000 ===== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;background:#000;color:#e0e0e0;line-height:1.4;padding:0 12px;font-weight:400}
a{text-decoration:none;color:#aaa;transition:color .2s}
a:hover{color:#fff}
img{max-width:100%;display:block;height:auto}
.container{max-width:1280px;margin:0 auto;padding:10px 0 30px}

/* HEADER RINGAN */
.site-header{background:#0a0a0a;padding:10px 14px;border-radius:8px;margin:8px 0 14px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;border:1px solid #161616}
.site-header .logo{font-size:1.2rem;font-weight:400;color:#fff;letter-spacing:-.2px}
.site-header .logo i{color:#ff6b6b;margin-right:5px}
.site-header nav{display:flex;gap:12px;font-size:.8rem}
.site-header nav a{color:#999;font-weight:400}
.site-header nav a:hover{color:#fff}

/* PAGE HEADING */
.page-heading{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px;margin-bottom:14px}
.page-heading h1,.page-heading h2{font-size:1.4rem;font-weight:400;color:#fff;letter-spacing:-.2px}
.page-heading .page-number{font-size:.75rem;color:#888;background:#111;padding:2px 10px;border-radius:20px;font-weight:400;border:1px solid #1a1a1a}

/* GRID RINGAN */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:4px}
.card{background:#0a0a0a;border-radius:8px;overflow:hidden;border:1px solid #141414;transition:border-color .2s;position:relative}
.card:hover{border-color:#2a2a2a}
.frame{position:relative;background:#0d0d0d;aspect-ratio:16/9;overflow:hidden}
.imgwrap{position:relative;width:100%;height:100%;background:#0d0d0d}
.imgwrap img{width:100%;height:100%;object-fit:cover}
.grad{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.5) 100%);pointer-events:none}
.badge{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.75);color:#ccc;font-size:.6rem;font-weight:400;padding:1px 7px;border-radius:20px;letter-spacing:.2px;z-index:2}
.meta{padding:8px 10px 10px}
.title{font-size:.82rem;font-weight:400;color:#ddd;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* PAGINATION RINGAN */
.pager{display:flex;align-items:center;justify-content:center;gap:10px;margin:28px 0 12px;flex-wrap:wrap}
.pager a,.pager .current{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:46px;padding:0 16px;border-radius:24px;background:#0a0a0a;color:#aaa;font-size:1rem;font-weight:400;border:1px solid #161616;transition:all .2s}
.pager a:hover{background:#141414;color:#fff;border-color:#2a2a2a}
.pager a.disabled{opacity:.2;pointer-events:none}
.pager .current{background:#141414;color:#fff;border-color:#2a2a2a;font-weight:400}
.pager .icon{padding:0 10px;font-size:1rem}

/* FOOTER RINGAN */
.site-footer{text-align:center;padding:20px 0 8px;color:#444;font-size:.7rem;border-top:1px solid #111;margin-top:12px;font-weight:400}
.site-footer a{color:#555}
.site-footer a:hover{color:#888}

/* SHIMMER RINGAN */
.image-placeholder{position:absolute;inset:0;background:#111;z-index:1}
.shimmer{background:linear-gradient(90deg,#111 25%,#1a1a1a 50%,#111 75%);background-size:200% 100%;animation:shimmer 1.6s infinite}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* BANNER */
.banner-area{margin-bottom:16px;display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:thin;scrollbar-color:#1a1a1a transparent}
.banner-area::-webkit-scrollbar{height:3px}
.banner-area::-webkit-scrollbar-thumb{background:#1a1a1a;border-radius:10px}
.banner-item{min-width:180px;background:#0a0a0a;border-radius:8px;padding:14px 10px;text-align:center;border:1px solid #141414;color:#444;font-weight:400;font-size:.75rem;flex-shrink:0}
.banner-item i{display:block;font-size:1.2rem;margin-bottom:3px;color:#222}

/* RESPONSIVE */
@media(max-width:640px){
  body{padding:0 6px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
  .site-header{flex-direction:column;align-items:stretch;text-align:center;padding:8px 10px}
  .site-header nav{justify-content:center;flex-wrap:wrap;gap:8px}
  .page-heading h1,.page-heading h2{font-size:1.1rem}
  .pager{gap:8px}
  .pager a,.pager .current{min-width:44px;height:44px;font-size:.9rem;padding:0 12px}
  .title{font-size:.72rem}
  .banner-item{min-width:140px;padding:10px 8px;font-size:.65rem}
}
@media(max-width:420px){
  .grid{grid-template-columns:repeat(2,1fr);gap:6px}
  .meta{padding:5px 6px 6px}
  .title{font-size:.65rem}
  .badge{font-size:.5rem;padding:1px 5px}
}

/* UTILITY */
.cover-link{position:absolute;inset:0;z-index:9;display:block;background:transparent}
.img-reveal{opacity:0;transform:translateY(-10px);animation:revealDown .6s ease-out forwards;display:block;width:100%;max-width:728px;height:auto;margin:0 auto 8px}
@keyframes revealDown{0%{opacity:0;transform:translateY(-10px)}100%{opacity:1;transform:translateY(0)}}
.shimmer-line{height:24px;border-radius:6px}

/* TEKS BERANDA */
.home-text{margin-top:24px;padding:14px 16px;background:#0a0a0a;border:1px solid #161616;border-radius:8px;color:#999;font-size:.85rem;line-height:1.6}
.home-text p{margin-bottom:10px}
.home-text ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:6px 16px}
.home-text li{position:relative;padding-left:22px;color:#bbb}
.home-text li::before{content:"✔";position:absolute;left:0;color:#4ade80}
@media(max-width:640px){.home-text{font-size:.78rem;padding:10px 12px}}
.grid + .page-heading{margin-top:28px}