/*
Theme Name: SansDomain Theme v2 – Top3 (Child)
Template: sansdomain-theme-v2
Version: 1.6.0
Description: Child theme with slim header + mega dropdown, polished filters, animations, and a custom "Top 3 Domain Minggu Ini" section.
*/

/* ---------- Base/Typography ---------- */
:root{--accent: var(--gold)}
*{box-sizing:border-box}
h1,h2,h3,h4{letter-spacing:.2px}
.hero{padding-top:28px}
.hero h2{font-size:40px;line-height:1.15;margin:8px 0 6px}
.hero p.lead{color:var(--silver);font-size:18px;max-width:820px;margin:0 0 12px}

/* ---------- Header & Navigation ---------- */
.header{position:sticky;top:0;z-index:1000}
.header-inner{gap:16px;min-height:64px}
.brand-logo-img{max-height:50px;width:auto;display:block}
.nav-wrap{display:flex;align-items:center;gap:12px}
.menu-toggle{display:none;border:1px solid var(--border);background:#14151c;border-radius:12px;padding:8px 12px;color:var(--silver);font-weight:700;cursor:pointer}

/* Desktop nav */
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:18px;align-items:center}
.nav > ul > li > a{color:var(--silver);font-weight:600;padding:10px 0;display:inline-block;transition:color .2s ease}
.nav > ul > li > a:hover{color:var(--gold)}
.nav li{position:relative}
.nav li.menu-item-has-children > a::after{content:"▾";margin-left:6px;font-size:12px;opacity:.8}

/* Slim header + Mega dropdown */
@media (min-width: 901px){
  .nav > ul > li.menu-item-has-children{position:static}
  .nav > ul > li.menu-item-has-children > .sub-menu{
    position:absolute; left:0; right:0; top:100%;
    min-width:unset; max-width:unset; margin:0 auto; padding:18px;
    border-radius:16px; border:1px solid var(--border);
    background:linear-gradient(180deg,#0f0f14,#0b0d13);
    box-shadow:0 10px 30px rgba(0,0,0,.35);
    display:block; visibility:hidden; opacity:0; pointer-events:none;
    transform:translateY(8px);
    transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    z-index:999;
  }
  .nav > ul > li.menu-item-has-children:hover > .sub-menu{
    visibility:visible; opacity:1; pointer-events:auto; transform:translateY(0); transition-delay:0s;
  }
  .nav > ul > li.menu-item-has-children > .sub-menu > li{
    display:inline-block; vertical-align:top; width:calc(100%/3 - 12px); margin:6px;
  }
  .nav > ul > li.menu-item-has-children > .sub-menu > li > a{
    display:block; padding:10px 12px; color:var(--silver); font-weight:700;
    border-bottom:1px dashed rgba(255,255,255,.06); border-radius:8px 8px 0 0;
  }
  .nav > ul > li.menu-item-has-children > .sub-menu > li > a:hover{color:var(--gold)}
  .nav > ul > li.menu-item-has-children > .sub-menu .sub-menu{
    position:relative; top:auto; left:auto;
    border:1px solid var(--border); border-radius:12px; padding:8px; margin:10px 0; display:block; box-shadow:none;
  }
  .nav > ul > li.menu-item-has-children > .sub-menu .sub-menu li a{
    padding:8px 10px; color:var(--silver); border-radius:8px;
  }
  .nav > ul > li.menu-item-has-children > .sub-menu .sub-menu li a:hover{
    background:rgba(255,255,255,.05);
  }
}

/* Mobile nav */
@media (max-width: 900px){
  .menu-toggle{display:inline-flex;align-items:center;gap:8px}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:#0f0f14;border-bottom:1px solid var(--border)}
  .nav.open{display:block}
  .nav ul{flex-direction:column;gap:0;padding:8px}
  .nav li{width:100%}
  .nav > ul > li > a{padding:12px;border-radius:8px}
  .sub-menu{position:relative;top:0;left:0;border:1px solid var(--border);margin:6px 8px;border-radius:10px;display:none}
  .nav li.open > .sub-menu{display:block}
  .nav li.menu-item-has-children > a::after{content:"▸";float:right}
  .nav li.open > a::after{content:"▾"}
}

/* ---------- CTA & KPI chips ---------- */
.hero .ctas{display:flex;gap:12px;margin:14px 0 12px;flex-wrap:wrap}
.hero .button.outline{background:transparent;border:1px solid var(--border);color:var(--silver)}

/* ---------- Domain Catalog Filters Polish ---------- */
.table-head{display:flex;gap:10px;align-items:center;justify-content:space-between;background:#0f0f14;border-bottom:1px solid var(--border);padding:12px}
.filters{display:grid;grid-template-columns:1.4fr repeat(2,1fr) repeat(2,1fr) 1fr 1fr auto;gap:8px;align-items:center}
@media(max-width:1100px){.filters{grid-template-columns:1fr 1fr 1fr 1fr;grid-auto-rows:auto}}
@media(max-width:600px){.filters{grid-template-columns:1fr 1fr}}
.filters input[type="text"], .filters input[type="number"], .filters select{
  background:#0f1015;color:var(--text);border:1px solid var(--ring);border-radius:12px;padding:10px 12px;outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, transform .08s ease; box-shadow:0 2px 12px rgba(0,0,0,.12) inset;
}
.filters input:focus, .filters select:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(212,175,55,.25)}
.filters .button{padding:12px 16px;border-radius:12px;font-weight:800;box-shadow:0 6px 18px rgba(0,0,0,.25);transition:transform .08s ease, box-shadow .2s ease}
.filters .button:active{ transform: translateY(1px); }

/* ---------- Top 3 Domain Cards ---------- */
.top3{margin-top:16px}
.top3-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.top3-grid{grid-template-columns:1fr}}
.top3 .card{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--border);border-radius:16px;
  background:linear-gradient(180deg,#111218,#0c0d12);box-shadow:0 10px 26px rgba(0,0,0,.32);
  transition:transform .12s ease, box-shadow .2s ease}
.top3 .card:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(0,0,0,.38)}
.top3 .domain{
  font-size:24px;font-weight:900;line-height:1.1;
  background:linear-gradient(135deg,#d4af37,#f3e6a5);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#d4af37;
}
.top3 .aged,.top3 .metrics,.top3 .registrar{color:var(--silver);font-size:14px}
.top3 .metrics{display:flex;gap:12px;flex-wrap:wrap}
.top3 .price-row{display:flex;justify-content:space-between;align-items:end;margin-top:auto}
.top3 .price{font-size:18px;font-weight:800}
.top3 .buy{display:inline-block;margin-top:10px;width:100%;text-align:center}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0; transform: translateY(10px); transition: opacity .4s ease, transform .4s ease}
.reveal.visible{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1; transform:none; transition:none}.card{transition:none}}