/* =========================
   THEME VARIABLES
========================= */
:root{
  /* LIGHT (default) */
  --bg: #f7f9fc;
  --bg-2: #ffffff;
  --surface: #ffffff;
  --card: #ffffff;
  --border: #e2e8f0;
  --text: #0f172a;        /* slate-900 */
  --muted: #475569;       /* slate-600 */
  --primary: #2563eb;     /* blue-600 */
  --primary-2: #7c3aed;   /* violet-600 */
  --accent: #06b6d4;      /* cyan-500 */
  --success: #16a34a;     /* green-600 */
  --warning: #f59e0b;     /* amber-500 */
  --shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
html[data-theme="dark"]{
  /* DARK */
  --bg: #0b0f1a;
  --bg-2: #0f1424;
  --surface: rgba(255,255,255,0.04);
  --card: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.12);
  --text: #e8eefc;
  --muted: #b6c1dd;
  --primary: #5b8cff;
  --primary-2: #8a5bff;
  --accent: #21e1ff;
  --success: #35d49a;
  --warning: #ffd166;
  --shadow: 0 8px 24px rgba(0,0,0,0.35);
}

/* =========================
   BASE
========================= */
* { box-sizing: border-box; }
html, body { height: 100%; }
body.hm-body{
  background:
    radial-gradient(900px 450px at 80% -10%, color-mix(in oklab, var(--accent) 12%, transparent) , transparent 60%),
    radial-gradient(900px 450px at 10% 0%, color-mix(in oklab, var(--primary) 12%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Links & Buttons */
a { color: var(--primary); }
a:hover { color: color-mix(in oklab, var(--primary) 85%, black); }
.btn { border-radius: 10px; }
.btn-outline-secondary { border-color: var(--border); color: var(--text); }
.btn-outline-secondary:hover { background: var(--bg); }
.btn-outline-primary { border-color: var(--primary); color: var(--primary); }
.btn-outline-primary:hover { background: color-mix(in oklab, var(--primary) 12%, white); color: var(--primary); }
.gradient-btn{
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
  border: 0; color: #fff;
}
.gradient-btn:hover{ opacity: .95; }

/* =========================
   TOPBAR & NAVBAR
========================= */
.hm-topbar{
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
  font-size: 0.95rem; padding:.35rem 0;
}
.hm-topbar a{ color: var(--muted); text-decoration: none; }
.hm-topbar a:hover{ color: var(--text); }

.hm-nav{
  position: sticky; top: 0; z-index: 1040;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.navbar .navbar-brand { color: var(--text); }
.navbar .nav-link { color: var(--text); }
.navbar .nav-link:hover { color: color-mix(in oklab, var(--text) 85%, var(--primary)); }
.navbar .dropdown-menu{
  background: var(--bg-2); border:1px solid var(--border);
}
.navbar .dropdown-item{ color: var(--text); }
.navbar .dropdown-item:hover{ background: color-mix(in oklab, var(--bg) 60%, var(--bg-2)); }

/* Brand dot & gradient text */
.navbar-brand .brand-dot{
  display:inline-block;width:.8rem;height:.8rem;border-radius:50%;
  background: linear-gradient(135deg, var(--accent), var(--primary));
  margin-right:.35rem; transform: translateY(-2px);
}
.text-gradient{
  background: linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* =========================
   HERO
========================= */
.hm-hero{ position: relative; padding: 5rem 0 4rem; }
.hero-badge{
  display:inline-block; font-weight:600; letter-spacing:.5px;
  color: var(--text); background: var(--bg-2);
  border:1px solid var(--border); padding:.4rem .7rem; border-radius:999px; margin-bottom:.8rem;
}
.hero-card.glass{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.hero-grid{
  position:absolute; inset:0; pointer-events:none; opacity:.12;
  background-image: linear-gradient(var(--border) 1px, transparent 1px),
                    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* =========================
   FORMS
========================= */
.domain-form .form-control{
  background: #fff; border:1px solid var(--border); color: var(--text);
}
html[data-theme="dark"] .domain-form .form-control{
  background: rgba(255,255,255,0.06);
}
.domain-form .form-control::placeholder{ color: color-mix(in oklab, var(--muted) 80%, white); }
.domain-form .btn{ padding: 0 1.2rem; }
.tld-suggestions .btn{ border-color: var(--border); }

/* =========================
   CARDS
========================= */
.hm-card, .hm-price, .product-card{
  border:1px solid var(--border); border-radius:16px; padding:1.25rem;
  background: var(--card);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
  position: relative; box-shadow: var(--shadow);
}
html[data-theme="dark"] .hm-card,
html[data-theme="dark"] .hm-price,
html[data-theme="dark"] .product-card{
  background: var(--card); /* transparan di dark */
  box-shadow: none;
}
.hm-card:hover, .hm-price:hover, .product-card:hover{
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--border) 70%, var(--primary));
}
.hm-card .icon-wrap{
  width:44px; height:44px; display:grid; place-items:center; border-radius:10px;
  background: radial-gradient(circle at 30% 20%, color-mix(in oklab, var(--accent) 25%, transparent), transparent 60%),
              var(--surface);
  margin-bottom: .75rem; font-size: 1.25rem;
}

/* Pricing */
.bg-dim{ background: color-mix(in oklab, var(--bg) 70%, var(--bg-2)); }
.product-card .display-6{ line-height: 1.1; }
.product-card .badge{
  border: 1px solid var(--border);
  background: #fff; color:#0f172a;
}
html[data-theme="dark"] .product-card .badge{
  background: rgba(255,255,255,.85); color:#0b0f1a;
}

/* CTA */
.hm-cta{
  background: linear-gradient(90deg, color-mix(in oklab, var(--primary) 12%, white), color-mix(in oklab, var(--accent) 12%, white));
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}

/* Footer */
.hm-footer{
  background: var(--bg-2);
  border-top:1px solid var(--border);
}
.hm-footer a{ color: var(--muted); text-decoration: none; }
.hm-footer a:hover{ color: var(--text); }
.logo{ max-height:48px; opacity:.9; filter: grayscale(10%); }

/* Modal */
.hm-modal{
  background: var(--bg-2); border:1px solid var(--border);
  color: var(--text); border-radius:16px;
}
html[data-theme="dark"] .hm-modal{
  background: rgba(18,24,40,.9);
}

/* Currency switch active state */
.btn-group .btn.active{
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff; border: 0;
}