/* ===== Global mobile padding & media ===== */
img,svg,video{max-width:100%;height:auto}
.container, .inner, .content, main{max-width:100%}
@media (max-width: 640px){
  .container, .inner, .content, main, section, .section { padding-left:12px !important; padding-right:12px !important; }
  h1{ font-size:26px !important; line-height:1.25 }
  h2{ font-size:20px !important; line-height:1.3 }
  h3{ font-size:18px !important; line-height:1.3 }
  .lead, .subtitle{ font-size:14px }
  .btn{ font-size:14px }
}

/* ===== Header & Logo ===== */
header .brand, .site-header .brand, header .logo, .site-header .logo{ display:flex; align-items:center; gap:10px; min-height:48px }
header .brand img, .site-header .brand img, header .logo img, .site-header .logo img, img[alt*="SansDomain" i]{
  display:block !important; max-height:36px !important; width:auto !important; height:auto !important; object-fit:contain; opacity:1 !important;
}
.sd-nav-toggle{ display:none }
@media (max-width: 768px){
  .sd-nav-toggle{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid #2a2f36; border-radius:10px; background:#0f1116; color:#eaeaea }
  header .nav, .site-header .nav, header nav{ display:none; position:absolute; top:100%; right:12px; left:12px; background:#0b0f14; border:1px solid #232831; border-radius:14px; padding:10px }
  body.nav-open header .nav, body.nav-open .site-header .nav, body.nav-open header nav{ display:block }
  header, .site-header{ padding:10px 12px }
}

/* ===== Hero/Headline above Marketplace ===== */
.hero, .page-hero, .heading, .headline{ word-break:break-word; overflow-wrap:anywhere }
@media (max-width:640px){
  .hero-title, .page-hero h1, .heading h1{ font-size:24px !important }
  .hero-subtitle, .page-hero .subtitle{ font-size:14px !important }
}

/* ===== Marketplace (ring 175x175 + layout) ===== */
.ring3d{
  --size: 175px !important; --th: 18px !important;
  width: var(--size) !important; height: var(--size) !important; aspect-ratio:1/1 !important; border-radius:50% !important; flex:0 0 auto !important;
  animation: ringPulse 2.4s ease-in-out infinite;
  box-shadow: inset 0 10px 18px rgba(0,0,0,.45), 0 14px 32px rgba(212,175,55,.12);
}
@keyframes ringPulse{ 0%,100%{ box-shadow: inset 0 10px 18px rgba(0,0,0,.45), 0 14px 32px rgba(212,175,55,.12) } 50%{ box-shadow: inset 0 10px 18px rgba(0,0,0,.45), 0 16px 36px rgba(246,226,122,.22) } }
.marketplace .section-title, .insight .section-title, .marketplace h2, [data-section="marketplace"] h2{ text-transform:uppercase }
.ring-wrap, .ring{ display:flex; flex-direction:column; align-items:center; gap:8px }
.r-legend{ width:100%; max-width: 280px; display:grid; grid-template-columns:1fr 1fr; gap:8px }
@media (max-width: 640px){
  .marketplace, .insight, .availability, .stats-block{ display:flex; flex-direction:column; align-items:center; gap:10px }
  .r-legend{ grid-template-columns:1fr; max-width:260px }
}

/* ===== Top 3 Domain Minggu Ini ===== */
.top3, #top3, .top3-section, .top3-block{ width:100% }
.top3 .cards, #top3 .cards, .top3-section .cards, .top3-block .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
@media (max-width: 900px){
  .top3 .cards, #top3 .cards, .top3-section .cards, .top3-block .cards{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width: 640px){
  .top3 .cards, #top3 .cards, .top3-section .cards, .top3-block .cards{ grid-template-columns:1fr }
}
.top3 .card, #top3 .card, .top3-section .card, .top3-block .card{ border:1px solid #2a2f36; border-radius:12px; background:#0f1116; padding:12px }

/* ===== Domain Catalog (table + pagination) ===== */
.catalog, .catalog-wrap, .table-wrap, .domain-list{ width:100% }
.catalog table, .domain-list table, table{ width:100%; border-collapse:collapse }
.catalog thead th, .domain-list thead th{ position:sticky; top:0; background:#0f1116; z-index:1 }
.catalog td, .catalog th, .domain-list td, .domain-list th{ padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.06) }
.catalog .btn, .domain-list .btn{ white-space:nowrap }
@media (max-width: 768px){
  .catalog table, .domain-list table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch }
  .catalog thead, .domain-list thead{ display:table; width:100% }
  .catalog tbody, .domain-list tbody{ display:table; width:100% }
  .catalog .btn.lg.buy{ padding:10px 28px }
  .catalog .btn.sm.view, .catalog .btn.sm.add{ padding:6px 10px }
}
/* Pagination — responsive & scrollable */
.pagination, .pager, .nav-links, .page-numbers{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center; }
@media (max-width: 640px){
  .pagination, .pager, .nav-links, .page-numbers{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding:8px }
  .pagination a, .pager a, .nav-links a, .page-numbers a,
  .pagination span, .pager span, .nav-links span, .page-numbers span{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:36px; height:36px; border:1px solid #2a2f36; border-radius:10px; padding:0 10px;
  }
}

/* ===== Footer ===== */
footer, .site-footer, .footer{ padding:18px 12px }
.footer-cols, .footer-columns, .footer-widgets, .widgets-footer, .footer .cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
@media (max-width: 900px){ .footer-cols, .footer-columns, .footer-widgets, .widgets-footer, .footer .cols{ grid-template-columns:repeat(2,1fr) } }
@media (max-width: 640px){ .footer-cols, .footer-columns, .footer-widgets, .widgets-footer, .footer .cols{ grid-template-columns:1fr } }
footer .logo img, .site-footer .logo img{ max-height:32px; display:block }