/* ── Font: Roboto only ── */
:root {
    --font-geist-sans: 'Roboto', -apple-system, ui-sans-serif, system-ui, sans-serif;
    --font-body:       'Roboto', -apple-system, ui-sans-serif, system-ui, sans-serif;
    --font-mono:       'Roboto Mono', ui-monospace, 'Courier New', monospace;
    --font-bjcredits:  'Roboto', sans-serif;
    --font-chakra:     'Roboto', sans-serif;
    /* Admin panel border-radius tokens */
    --r-xs:   4px;
    --r-sm:   8px;
    --r-md:   12px;
    --r-lg:   16px;
    --r-xl:   24px;
    --r-pill: 500px;
    --transition: .2s cubic-bezier(.4,0,.2,1);
}

/* Satu jenis font di seluruh halaman — Roboto */
html, body, *, *::before, *::after {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, ui-sans-serif, system-ui, sans-serif !important;
}
/* Monospace hanya untuk kode */
code, kbd, pre, samp, .font-mono, .tx-id {
    font-family: 'Roboto Mono', ui-monospace, 'Courier New', monospace !important;
}

/* Anti-shake SweetAlert2 */
body.swal2-shown:not(.swal2-no-backdrop) { overflow: auto !important; padding-right: 0 !important; }
html.swal2-shown:not(.swal2-no-backdrop) { overflow: auto !important; }
.swal2-container { overflow-y: auto !important; }

/* ── Layout: footer selalu di bawah — flex column ── */
html { height: 100%; }
body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100dvh !important;
}
.content { flex: 1 0 auto; }
.sf-footer { flex-shrink: 0; }

/* ── Consistent public section spacing ── */
:root {
  --pub-section-gap:  20px;   /* jarak antar section desktop */
  --pub-section-gap-sm: 14px; /* jarak antar section mobile */
  --pub-px:           16px;   /* horizontal padding mobile */
  --pub-px-lg:        0px;    /* horizontal padding desktop (diatur container) */
}
/* Pastikan semua section langsung di dalam .content berjaraj seragam */
.content > section,
.content > div > section,
.content > div > div > section {
  margin-bottom: var(--pub-section-gap);
}
@media (max-width: 768px) {
  :root {
    --pub-section-gap: var(--pub-section-gap-sm);
  }
}

/* ── Sinkron warna header & footer dengan admin panel ── */
/* Dark mode: identik admin panel #111111 */
html.dark header {
    background-color: var(--pub-header-bg, rgba(17,17,17,0.96)) !important;
}
html.dark .sf-footer {
    --sf-bg: var(--pub-footer-bg, #111111) !important;
    --sf-border: var(--pub-footer-border, rgba(45,45,45,0.5)) !important;
}
/* Light mode: identik admin panel #ffffff */
html:not(.dark) header {
    background-color: var(--pub-header-bg, rgba(255,255,255,0.96)) !important;
}
html:not(.dark) .sf-footer {
    --sf-bg: var(--pub-footer-bg, #ffffff) !important;
    --sf-border: var(--pub-footer-border, rgba(218,220,224,0.5)) !important;
}

/* Fix 4: Header full width desktop */
header.sticky {
    max-width: 100% !important;
    width: 100% !important;
}

/* Fix 1+7: Dark mode — abu gelap sinkron warna card admin panel */
html.dark .article-outer-border,
html.dark .news-card-wrapper {
    background: var(--hs-99-hero-bg, var(--pub-card-bg, #181a1b)) !important;
    border-color: rgba(45,48,52,0.8) !important;
}
html.dark .seagm-card {
    background: var(--hs-99-hero-bg, var(--pub-card-bg, #181a1b)) !important;
    border-color: rgba(45,48,52,0.8) !important;
}
/* Light mode — warna hero/flashsale */
html:not(.dark) .article-outer-border,
html:not(.dark) .news-card-wrapper {
    background: var(--hs-99-hero-bg, var(--pub-card-bg, #ffffff)) !important;
    border-color: rgba(218,220,224,0.5) !important;
}
html:not(.dark) .seagm-card {
    background: var(--hs-99-hero-bg, var(--pub-card-bg, #ffffff)) !important;
    border-color: rgba(218,220,224,0.5) !important;
}

/* ── Locale Modal redesign — pisah Lokasi & Bahasa ── */
.lm-section-label {
    font-size: 11px; font-weight: 700;
    color: hsl(var(--muted-foreground));
    text-transform: uppercase; letter-spacing: .08em;
    margin: 0 0 8px; padding: 0 2px;
    display: block;
}
.lm-lang-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}
.lm-lang-card {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: 1.5px solid hsl(var(--border)/.5);
    border-radius: 12px;
    cursor: pointer;
    background: hsl(var(--background));
    transition: border-color .15s, background .15s;
    color: hsl(var(--foreground));
    font-size: inherit; text-align: left; width: 100%;
}
.lm-lang-card:hover { border-color: hsl(var(--primary)/.5); background: hsl(var(--muted)/.4); }
.lm-lang-card.active { border-color: hsl(var(--primary)); background: hsl(var(--primary)/.08); box-shadow: 0 0 0 1px hsl(var(--primary)/.25); }
.lm-lang-card img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.lm-lang-card-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm-lang-card-check { color: hsl(var(--primary)); margin-left: auto; flex-shrink: 0; }

/* Save button */
.lm-save-btn {
    width: 100%;
    padding: 11px 0;
    border-radius: 12px;
    border: none;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    font-family: 'Roboto', sans-serif;
    font-size: 14px; font-weight: 700;
    cursor: pointer;
    margin-top: 4px;
    transition: opacity .15s, transform .12s;
}
.lm-save-btn:hover { opacity: .9; }
.lm-save-btn:active { transform: scale(.98); }

/* Fix 4: mobile padding — identik popup beranda (align flex-end + 12px sisi) */
@media (max-width: 520px) {
    #locale-modal-overlay.is-open {
        padding: 0 12px 12px !important;
        align-items: flex-end !important;
    }
    #locale-modal {
        border-radius: 16px !important;
        max-width: 100% !important;
        max-height: 95dvh !important;
        padding: 22px 18px 32px !important;
        margin: 0 !important;
        width: 100% !important;
    }
}

/* ════════════════════════════════════════════════════
     ML TOOLS MODAL CSS
════════════════════════════════════════════════════ */
#mlt-overlay {
  display:none; position:fixed; inset:0; z-index:99990;
  background:rgba(0,0,0,.55); backdrop-filter:blur(4px);
  align-items:flex-end; justify-content:center;
  padding:0;
  contain: content;
}
@media (max-width: 767px) {
  #mlt-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
#mlt-overlay.is-open { display:flex; }
@media(min-width:640px){
  #mlt-overlay { align-items:center; padding:16px; }
  #mlt-modal  { border-radius:20px !important; max-height:88vh; }
}
#mlt-modal {
  position:relative; width:100%; max-width:480px;
  background:hsl(var(--background)); color:hsl(var(--foreground));
  border-radius:20px 20px 0 0; overflow:hidden;
  box-shadow:0 -8px 40px rgba(0,0,0,.25);
  max-height:92vh; display:flex; flex-direction:column;
  animation:mltSlideUp .28s cubic-bezier(.16,1,.3,1);
}
#mlt-overlay:not(.is-open) #mlt-modal {
  box-shadow: none !important;
}
@keyframes mltSlideUp{from{transform:translateY(60px);opacity:0;}to{transform:translateY(0);opacity:1;}}
#mlt-close {
  position:absolute; top:14px; right:14px; z-index:10;
  width:30px; height:30px; border-radius:50%; border:none;
  background:hsl(var(--muted)); color:hsl(var(--muted-foreground));
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s;
}
#mlt-close:hover { background:hsl(var(--accent)); }
/* Header */
.mlt-header {
  padding:20px 20px 0;
  display:flex; align-items:center; gap:10px; flex-shrink:0;
}
.mlt-logo {
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg,#1a73e8,#6c63ff);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.mlt-logo svg { width:20px; height:20px; stroke:#fff; fill:none; stroke-width:2; }
.mlt-title { font-size:15px; font-weight:700; color:hsl(var(--foreground)); }
.mlt-sub   { font-size:11px; color:hsl(var(--muted-foreground)); margin-top:1px; }
/* Tabs */
.mlt-tabs {
  display:flex; gap:4px; padding:14px 20px 0; flex-shrink:0; overflow-x:auto;
  scrollbar-width:none;
}
.mlt-tabs::-webkit-scrollbar { display:none; }
.mlt-tab {
  flex-shrink:0; padding:6px 13px; border-radius:100px; border:none;
  font-size:12px; font-weight:600; cursor:pointer;
  background:hsl(var(--muted)); color:hsl(var(--muted-foreground));
  transition:all .15s; white-space:nowrap;
}
.mlt-tab.active {
  background:hsl(var(--primary)); color:hsl(var(--primary-foreground));
}
/* Body */
.mlt-body { padding:16px 20px 24px; overflow-y:auto; flex:1; }
/* Panel */
.mlt-panel { display:none; }
.mlt-panel.active { display:block; }
/* Form elements */
.mlt-label {
  display:block; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; color:hsl(var(--muted-foreground)); margin-bottom:5px;
}
.mlt-input {
  width:100%; padding:10px 12px; border-radius:10px; box-sizing:border-box;
  border:1px solid hsl(var(--border)); font-size:13px;
  background:hsl(var(--input)); color:hsl(var(--foreground));
  transition:border-color .15s; outline:none;
}
.mlt-input:focus { border-color:hsl(var(--primary)); box-shadow:0 0 0 3px hsl(var(--primary)/.15); }
.mlt-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.mlt-group { margin-bottom:12px; }
.mlt-btn {
  width:100%; padding:10px; border-radius:10px; border:none;
  background:hsl(var(--primary)); color:hsl(var(--primary-foreground));
  font-size:13px; font-weight:700; cursor:pointer; transition:opacity .15s;
  margin-top:4px;
}
.mlt-btn:hover { opacity:.88; }
.mlt-btn:disabled { opacity:.5; cursor:not-allowed; }
/* Result card */
.mlt-result {
  margin-top:14px; padding:14px 16px; border-radius:12px;
  border:1px solid hsl(var(--border)); background:hsl(var(--muted)/.5);
  display:none;
}
.mlt-result.show { display:block; }
.mlt-result-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:hsl(var(--muted-foreground)); margin-bottom:8px; }
.mlt-stat { display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:1px solid hsl(var(--border)/.5); }
.mlt-stat:last-child { border-bottom:none; }
.mlt-stat-lbl { font-size:12px; color:hsl(var(--muted-foreground)); }
.mlt-stat-val { font-size:13px; font-weight:700; color:hsl(var(--foreground)); }
.mlt-stat-val.green { color:#f59e0b; }
.mlt-stat-val.blue  { color:#1a73e8; }
.mlt-stat-val.amber { color:#f59e0b; }
.mlt-stat-val.red   { color:#ea4335; }
/* Zodiac grid */
.mlt-zodiac-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px; }
.mlt-z-btn {
  padding:8px 4px; border-radius:10px; border:1.5px solid hsl(var(--border));
  background:hsl(var(--muted)/.4); cursor:pointer; text-align:center;
  transition:all .15s; font-size:11px; color:hsl(var(--foreground));
}
.mlt-z-btn:hover, .mlt-z-btn.active { border-color:hsl(var(--primary)); background:hsl(var(--primary)/.08); }
.mlt-z-btn .mlt-z-icon { font-size:20px; display:block; margin-bottom:2px; }
/* Region loading */
.mlt-spin { display:inline-block; width:16px; height:16px; border:2px solid hsl(var(--border)); border-top-color:hsl(var(--primary)); border-radius:50%; animation:mlt-rot .7s linear infinite; vertical-align:middle; margin-right:6px; }
@keyframes mlt-rot { to { transform:rotate(360deg); } }