/* ============================================================
   pages.css — Shared CSS untuk halaman static (tentang, faq,
   kebijakan privasi, syarat ketentuan)
============================================================ */
.page-main{ padding: calc(var(--nav-h) + 28px) 0 80px; overflow-x:hidden; }
.page-content{ max-width: 860px; margin:0 auto; }

.page-hero{
  padding: 40px 48px; border-radius: var(--radius-lg); margin-bottom:40px; text-align:center;
}
.page-hero h1{ font-size: clamp(1.6rem,3vw,2.4rem); margin-bottom:12px; }
.page-hero p{ color: var(--muted); font-size:1rem; }

.page-stats{
  display:flex; align-items:center; justify-content:center;
  gap:0; padding:28px 32px; border-radius: var(--radius-md); margin-bottom:40px;
  flex-wrap:wrap;
}
.stat-item{ flex:1; min-width:120px; text-align:center; padding:12px; }
.stat-num{ font-family: var(--ff-display); font-weight:700; font-size:1.6rem; color: var(--cyan); }
.stat-label{ font-size:0.8rem; color: var(--muted); margin-top:4px; }
.stat-divider{ width:1px; height:50px; background: rgba(255,255,255,0.08); flex-shrink:0; }

/* Prose content */
.page-body{ line-height:1.8; }
.page-body h2{
  font-size:1.3rem; margin:40px 0 16px; color: var(--frost);
  padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,0.08);
}
.page-body p{ color: var(--frost-dim); margin-bottom:16px; font-size:0.95rem; }
.page-body ul{ padding-left:20px; color: var(--frost-dim); font-size:0.95rem; }
.page-body ul li{ margin-bottom:10px; line-height:1.7; }
.page-body strong{ color: var(--frost); }
.page-body em{ color: var(--ice); font-style:normal; }

/* Legal pages */
.legal-body h2{ font-size:1.1rem; }

/* Cards grid */
.page-cards{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(min(240px,100%),1fr));
  gap:16px; margin:24px 0;
}
.page-card{
  padding:24px; border-radius: var(--radius-md); display:flex; flex-direction:column; gap:10px;
}
.page-card-icon{ font-size:2rem; }
.page-card h4{ font-size:1rem; margin:0; }
.page-card p{ font-size:0.84rem; color: var(--muted); margin:0; line-height:1.5; }

/* FAQ group */
.faq-group{ padding:8px; border-radius: var(--radius-md); margin-bottom:32px; }
.faq-item{
  border-bottom:1px solid rgba(255,255,255,0.06); padding:18px 20px;
}
.faq-item:last-child{ border-bottom:none; }
.faq-item summary{
  font-weight:600; font-size:0.95rem; cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  color: var(--frost);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:""; width:10px; height:10px; border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted); transform:rotate(45deg); flex-shrink:0;
  transition: transform .2s ease;
}
.faq-item[open] summary::after{ transform:rotate(-135deg); }
.faq-item p{
  margin-top:12px; font-size:0.88rem; color: var(--frost-dim); line-height:1.7;
}

/* Contact CTA */
.page-contact{
  text-align:center; padding:40px; border-radius: var(--radius-lg); margin-top:48px;
}
.page-contact h3{ font-size:1.4rem; margin-bottom:10px; }
.page-contact p{ color: var(--muted); margin-bottom:24px; }
.page-contact-btns{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }

@media (max-width: 600px){
  .page-hero{ padding:28px 22px; }
  .stat-divider{ display:none; }
  .stat-item{ min-width:45%; }
}

/* ============================================================
   Promo Entry Cards (homepage)
============================================================ */
.promo-entry-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px,100%),1fr));
  gap:16px;
}
.promo-entry-card{
  display:flex; align-items:center; gap:16px; padding:20px 24px;
  border-radius:var(--radius-md); text-decoration:none;
  transition: transform .2s ease, box-shadow .2s ease;
  min-width:0;
}
.promo-entry-card:hover{
  transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,229,255,0.12);
}
.promo-entry-icon{
  width:52px; height:52px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
}
.promo-entry-body{ flex:1; min-width:0; }
.promo-entry-body h4{ font-size:0.95rem; margin:0 0 4px; color:var(--frost); }
.promo-entry-body p{ font-size:0.78rem; color:var(--muted); line-height:1.5; margin:0; }
.promo-entry-arrow{
  flex-shrink:0; font-size:1.1rem; color:var(--muted);
  transition: transform .2s ease, color .2s ease;
}
.promo-entry-card:hover .promo-entry-arrow{ transform:translateX(4px); color:var(--cyan); }

/* ============================================================
   Leaderboard Podium
============================================================ */
.lb-podium{ padding:32px; border-radius:var(--radius-lg); }
.lb-podium-wrap{
  display:flex; align-items:flex-end; justify-content:center; gap:16px;
}
.lb-podium-item{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  flex:1; max-width:160px; text-align:center;
}
.lb-podium-avatar{
  width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
}
.lb-podium-rank{ font-size:1.8rem; }
.lb-podium-name{ font-weight:700; font-size:0.9rem; color:var(--frost); }
.lb-podium-amount{ font-size:0.78rem; color:var(--cyan); font-weight:600; }
.lb-podium-block{ width:100%; border-radius:6px 6px 0 0; }

/* Leaderboard rows dengan kolom game */
.lb-row{
  display:grid; grid-template-columns: 40px 1fr 120px 140px;
  align-items:center; gap:12px; padding:14px 20px;
  border-bottom:1px solid rgba(255,255,255,0.05);
  font-size:0.88rem;
}
.lb-row:last-child{ border-bottom:none; }
.lb-rank{ font-weight:700; text-align:center; }
.lb-name{ font-weight:600; color:var(--frost); }
.lb-game{ color:var(--muted); font-size:0.8rem; }
.lb-amount{ text-align:right; font-weight:700; color:var(--cyan); }

/* Affiliate link card */
.aff-link-card{ padding:24px; border-radius:var(--radius-md); }

@media(max-width:600px){
  .lb-row{ grid-template-columns: 32px 1fr 100px; }
  .lb-game{ display:none; }
  .lb-podium-wrap{ gap:8px; }
  .lb-podium-item{ max-width:110px; }
}

/* ---- Pages mobile compact ---- */
@media (max-width: 480px){
  .page-main{ padding-top: calc(52px + 14px); }
  .page-hero{ padding: 20px 18px; }
  .page-hero h1{ font-size: 1.2rem; }
  .page-hero p{ font-size: 0.82rem; }
  .page-stats{ padding: 16px 12px; gap: 0; }
  .stat-item{ padding: 8px 6px; }
  .stat-num{ font-size: 1.2rem; }
  .stat-label{ font-size: 0.66rem; }
  .stat-divider{ height: 30px; }
  .page-body h2{ font-size: 1rem; margin: 24px 0 12px; }
  .page-body p{ font-size: 0.85rem; }
  .page-body ul li{ font-size: 0.82rem; margin-bottom: 7px; }
  .page-cards{ grid-template-columns: 1fr 1fr; gap: 10px; }
  .page-card{ padding: 14px 12px; }
  .page-card-icon{ font-size: 1.4rem; }
  .page-card h4{ font-size: 0.82rem; }
  .page-card p{ font-size: 0.74rem; }
  .faq-group{ padding: 4px; }
  .faq-item{ padding: 12px 14px; }
  .faq-item summary{ font-size: 0.85rem; }
  .faq-item p{ font-size: 0.8rem; }
  .page-contact{ padding: 22px 18px; }
  .page-contact h3{ font-size: 1rem; }
  .page-contact p{ font-size: 0.82rem; }
  .page-contact-btns{ flex-direction: column; }
  .page-contact-btns .btn{ width: 100%; justify-content: center; }

  /* Leaderboard compact */
  .lb-podium{ padding: 18px 12px; }
  .lb-podium-wrap{ gap: 8px; }
  .lb-podium-avatar{ width: 40px; height: 40px; font-size: 1.1rem; }
  .lb-podium-name{ font-size: 0.78rem; }
  .lb-podium-amount{ font-size: 0.7rem; }
  .lb-podium-rank{ font-size: 1.4rem; }
  .lb-row{ grid-template-columns: 28px 1fr 100px; padding: 10px 12px; font-size: 0.8rem; }
  .lb-game{ display: none; }
}