/* ======================================================
   ASTIPA DARK 2026 — DESIGN TOKENS
====================================================== */

:root{
  color-scheme: dark;

  /* ----- Surface ----- */
  --bg:        #0b1220;
  --surface:   #0f172a;
  --surface-2: #111c33;
  --surface-3: #162244;

  /* ----- Text ----- */
  --text:      #e6edf7;
  --muted:     #94a3b8;
  --faint:     #64748b;

  /* ----- Accent ----- */
  --accent:        #3b82f6;
  --accent-soft:   rgba(59,130,246,.16);

  /* ----- Border ----- */
  --border: rgba(255,255,255,.06);

  /* ----- Radius (SINGLE SYSTEM) ----- */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 14px;

  /* ----- Spacing ----- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;

  /* ----- Elevation (SUBTLE) ----- */
  --elev-1: 0 1px 2px rgba(0,0,0,.35);
  --elev-2: 0 10px 30px rgba(0,0,0,.55);

  /* ----- Typography ----- */
  --font-base: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ======================================================
   GLOBAL TYPOGRAPHY — ASTIPA 2026
====================================================== */

:root{
  --font-base: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Base text */
html, body{
  font-family: var(--font-base);
  font-size: 15px;              /* sedikit lebih modern */
  font-weight: 400;
  letter-spacing: 0.01em;       /* bikin lebih bersih */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5{
  font-family: var(--font-base);
  font-weight: 700;
  letter-spacing: -0.01em;      /* penting: hilangkan rasa kuno */
}

/* Specific hierarchy */
h1{
  font-size: clamp(32px, 4.8vw, 56px);
  font-weight: 800;
}

h2{
  font-size: 24px;
  font-weight: 700;
}

h3{
  font-size: 18px;
  font-weight: 600;
}

h4{
  font-size: 15px;
  font-weight: 600;
}

/* Paragraph */
p{
  font-size: 14.5px;
  line-height: 1.7;
  letter-spacing: 0.01em;
}

/* Small & muted */
.small{
  font-size: 12px;
}

.muted{
  color: var(--muted);
}

/* Buttons & inputs */
button,
input,
select,
textarea{
  font-family: var(--font-base);
  font-size: 14px;
  letter-spacing: 0.01em;
}

/* Navigation & labels */
.navlink,
label{
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Metric numbers (biar modern & tegas) */
.card.metric .title,
.stat,
.metric{
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Code / numeric */
.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

/* ======================================================
   BASE RESET
====================================================== */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-base);
  line-height:1.6;
}

img,svg,video{
  max-width:100%;
  height:auto;
  display:block;
}

a{
  color:var(--accent);
  text-decoration:none;
}
a:hover{ opacity:.9 }

.small{ font-size:12px }
.muted{ color:var(--muted) }
.faint{ color:var(--faint) }

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.nowrap{ white-space:nowrap }

.container{
  max-width:1200px;
  margin:0 auto;
  padding:var(--s-6) var(--s-4);
}

.grid{
  display:grid;
  gap:var(--s-4);
}

.card,
.chart-card,
.table-wrap,
.modal-content{
  background:var(--surface);
  border-radius:var(--r-lg);
  border:1px solid var(--border);
  box-shadow:var(--elev-1);
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:40px;
  padding:0 14px;
  border-radius:var(--r-sm);
  font-weight:600;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  cursor:pointer;
}

.btn:hover{
  background:var(--surface-2);
}

.btn.primary{
  background:var(--accent);
  color:#fff;
  border-color:transparent;
}
.btn.primary:hover{
  filter:brightness(.95);
}


.badge,
.chip-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  background:var(--surface-2);
  color:var(--text);
}

.toolbar{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:var(--s-4);
}

label{
  font-size:12px;
  color:var(--muted);
}

input,
select{
  height:40px;
  width:100%;
  padding:8px 10px;
  border-radius:var(--r-sm);
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
}

input:focus,
select:focus{
  outline:none;
  border-color:var(--accent);
}

.table{
  width:100%;
}

.thead,
.tr{
  display:grid;
  align-items:center;
}

.thead{
  font-weight:600;
  color:var(--muted);
  border-bottom:1px solid var(--border);
}

.tr{
  border-bottom:1px solid var(--border);
}

.tr:hover{
  background:var(--surface-2);
}

.thead > div,
.tr > div{
  padding:12px 14px;
}

.pager{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:var(--s-4);
}

@media (max-width:860px){
  .container{ padding:var(--s-4) }

  .thead{ display:none }

  .tr{
    display:block;
    border-radius:var(--r-md);
    margin-bottom:var(--s-3);
    background:var(--surface);
  }

  .tr > div{
    display:flex;
    justify-content:space-between;
    gap:12px;
  }

  .tr > div::before{
    content:attr(data-label);
    color:var(--muted);
    font-size:12px;
  }
}

/* ======================================================
   HEADER / TOPBAR — ASTIPA DARK 2026
====================================================== */

/* Topbar shell */
.topbar{
  position: sticky;
  top: 0;
  z-index: 1000;

  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

/* Wrapper */
.topbar .wrap{
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
}

/* ================= BRAND ================= */

.brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
}

.brand img{
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.brand-text .title{
  font-weight: 700;
  font-size: 15px;
  line-height: 1.1;
  letter-spacing: .3px;
}

.brand-text .sub{
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .4px;
}

/* ================= NAV ================= */

.nav{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline: auto;
}

.navlink{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;

  font-size: 14px;
  font-weight: 500;
  color: var(--muted);

  border-radius: var(--r-sm);
  transition: background .15s ease, color .15s ease;
}

.navlink i{
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.navlink:hover{
  color: var(--text);
  background: var(--surface-2);
}

/* ================= ACTIONS ================= */

.actions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* theme toggle & ghost buttons */
.actions .btn.ghost{
  height: 36px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  color: var(--muted);
}

.actions .btn.ghost:hover{
  background: var(--surface-2);
  color: var(--text);
}

/* ================= USER CHIP ================= */

.chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  height: 36px;
  padding: 0 12px;

  font-size: 13px;
  font-weight: 500;

  background: var(--surface-2);
  color: var(--text);

  border-radius: 999px;
  border: 1px solid var(--border);
}

.chip i{
  width: 16px;
  height: 16px;
}

/* ================= DROPDOWN ================= */

.dropdown{
  position: relative;
}

.dropdown-menu{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;

  min-width: 220px;
  padding: 6px;

  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-2);

  display: none;
}

.dropdown[data-open="1"] .dropdown-menu{
  display: block;
}

.dropdown-menu a{
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;
  font-size: 14px;
  color: var(--text);

  border-radius: var(--r-sm);
}

.dropdown-menu a i{
  width: 16px;
  height: 16px;
}

.dropdown-menu a:hover{
  background: var(--surface-2);
}

/* ================= HAMBURGER ================= */

.hamburger{
  display: none;
  height: 36px;
  width: 40px;

  align-items: center;
  justify-content: center;

  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
}

/* ================= MOBILE ================= */

@media (max-width: 860px){
  .nav{
    display: none;
  }

  .hamburger{
    display: inline-flex;
  }

  .brand-text .sub{
    display: none;
  }
}

/* ================= MOBILE PANEL ================= */

.mobile-panel{
  display: none;
  margin-top: 8px;

  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.mobile-panel[data-open="1"]{
  display: block;
}

.mobile-panel a{
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 12px 10px;
  font-size: 14px;
  color: var(--text);
  border-radius: var(--r-sm);
}

.mobile-panel a i{
  width: 16px;
  height: 16px;
}

.mobile-panel a:hover{
  background: var(--surface-2);
}

/* ======================================================
   FOOTER — ASTIPA DARK 2026
====================================================== */

.footer{
  margin-top: 48px;
  padding-top: 32px;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,.02),
    rgba(255,255,255,.00)
  );

  border-top: 1px solid var(--border);
}

/* Wrapper */
.footer .wrap{
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr;
  gap: 24px;
}

/* Section title */
.footer h4{
  display: flex;
  align-items: center;
  gap: 8px;

  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text);
}

.footer h4 i{
  width: 16px;
  height: 16px;
  stroke-width: 2;
  color: var(--muted);
}

/* Paragraph */
.footer p{
  margin: 6px 0;
  font-size: 14px;
  line-height: 1.6;
}

/* Links */
.footer a{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: var(--text);
  font-size: 14px;
}

.footer a i{
  width: 16px;
  height: 16px;
  stroke-width: 2;
  color: var(--muted);
  transition: color .15s ease;
}

.footer a:hover i{
  color: var(--accent);
}

/* Muted text */
.footer .muted{
  color: var(--muted);
}

.footer .small{
  font-size: 12px;
}

/* ================= FOOTER BOTTOM ================= */

.footer-bottom{
  margin-top: 24px;
  padding-top: 16px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;

  border-top: 1px dashed var(--border);
  font-size: 13px;
}

/* ================= SOCIAL ================= */

.footer-social{
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-social a{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);

  transition: background .15s ease, transform .15s ease;
}

.footer-social a i{
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.footer-social a:hover{
  background: var(--surface-3);
  transform: translateY(-1px);
}

.footer-social a:hover i{
  color: var(--accent);
}

/* ================= MOBILE ================= */

@media (max-width: 860px){
  .footer .wrap{
    grid-template-columns: 1fr;
  }

  .footer-bottom{
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-social{
    margin-top: 8px;
  }
}

/* ======================================================
   LANDING / INDEX — ASTIPA DARK 2026
====================================================== */

/* ---------- Global section rhythm ---------- */

main > section{
  margin-top: 64px;
}

main > section:first-of-type{
  margin-top: 32px;
}

/* ---------- Section heading ---------- */

section h2{
  font-size: 24px;
  font-weight: 600;
  letter-spacing: .3px;
  margin-bottom: 8px;
}

section h3{
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}

section .muted{
  max-width: 720px;
}

/* ---------- HERO ---------- */

.hero,
#index-hero,
.section-hero{
  position: relative;
  padding: 72px 0 56px;

  background:
    radial-gradient(
      800px 400px at 10% -20%,
      rgba(59,130,246,.18),
      transparent 60%
    );
}

.hero h1{
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: .4px;
  line-height: 1.1;
  margin-bottom: 12px;
}

.hero .lead,
.hero p{
  font-size: 16px;
  color: var(--muted);
  max-width: 640px;
}

/* ---------- Aggregate / Metrics ---------- */

section .grid.cards{
  margin-top: 16px;
}

.card.metric{
  padding: 18px;
}

.card.metric .title{
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .3px;
}

.card.metric .kicker{
  font-size: 12px;
  color: var(--muted);
}

/* ---------- Charts ---------- */

.charts{
  margin-top: 16px;
}

.chart-card h3{
  font-size: 15px;
  margin-bottom: 8px;
  color: var(--muted);
}

/* ---------- Fitur ---------- */

.features,
.feature-list{
  margin-top: 16px;
}

.feature,
.feature-item{
  display: flex;
  gap: 14px;
  align-items: flex-start;

  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
}

.feature i{
  width: 20px;
  height: 20px;
  color: var(--accent);
  margin-top: 2px;
}

.feature .head{
  font-weight: 600;
  margin-bottom: 4px;
}

/* ---------- Recent login / carousel ---------- */

.carousel{
  margin-top: 16px;
}

.carousel .card{
  min-width: 240px;
  padding: 14px;
}

/* ---------- Catatan data / info blocks ---------- */

.note,
.notice,
.alert{
  margin-top: 16px;
  padding: 16px;

  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.note strong{
  font-weight: 600;
}

/* ---------- Links ---------- */

section a{
  font-weight: 500;
}

section a:hover{
  text-decoration: underline;
}

/* ---------- Mobile ---------- */

@media (max-width: 860px){

  main > section{
    margin-top: 48px;
  }

  .hero{
    padding: 56px 0 40px;
  }

  .hero h1{
    font-size: 28px;
  }

  section h2{
    font-size: 20px;
  }

  .card.metric .title{
    font-size: 24px;
  }
}

/* ======================================================
   LANDING LAYOUT — MODE B (PRODUCT / TECH / 2026)
   Menggantikan index_style.php SEPENUHNYA
====================================================== */

/* ---------- LANDING CONTAINER ---------- */

body > main{
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 24px;
}

/* ---------- SECTION RHYTHM ---------- */

main > section{
  margin-top: 88px;
}

main > section:first-of-type{
  margin-top: 48px;
}

/* ---------- HERO (CENTERED PRODUCT STYLE) ---------- */

.hero{
  text-align: center;
  padding: 96px 16px 72px;

  background:
    radial-gradient(
      1000px 520px at 50% -20%,
      rgba(59,130,246,.22),
      transparent 60%
    );
}

/* Headline */
.hero h1{
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 800;
  letter-spacing: .4px;
  line-height: 1.05;
  margin-bottom: 14px;
}

/* Sub text */
.hero p,
.hero .lead{
  font-size: 17px;
  color: var(--muted);
  max-width: 720px;
  margin: 0 auto 28px;
}

/* Logo visual */
.hero img{
  display: block;
  margin: 40px auto 0;

  max-width: 360px;
  padding: 28px;

  background: #fff;
  border-radius: 24px;

  box-shadow:
    0 50px 140px rgba(0,0,0,.85),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

/* ---------- AKSES INSTANSI (PRIMARY ENTRY) ---------- */

section#instansi,
section.akses-instansi{
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

section#instansi .card,
section.akses-instansi .card{
  padding: 22px 24px;
  border-radius: 18px;
}

/* ---------- AGREGAT / INSIGHT ---------- */

section .grid.cards{
  margin-top: 28px;
}

.card.metric{
  padding: 24px;
}

.card.metric .title{
  font-size: 34px;
  font-weight: 800;
  letter-spacing: .3px;
}

.card.metric .kicker{
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--muted);
}

/* Insight block */
.chart-card,
.insight{
  padding: 22px;
}

/* ---------- FITUR (PRODUCT LIST STYLE) ---------- */

section.fitur,
section#fitur{
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.feature{
  background: transparent;
  border: none;
  padding: 14px 0;
}

.feature + .feature{
  border-top: 1px solid var(--border);
}

.feature i{
  color: var(--accent);
}

/* ---------- RECENT LOGIN / CAROUSEL ---------- */

.carousel{
  padding-top: 12px;
}

.carousel .card{
  min-width: 260px;
  padding: 16px;
}

/* ---------- VIDEO ---------- */

iframe,
.video,
.embed{
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--elev-2);
}

/* ---------- CATATAN DATA ---------- */

.note,
.notice{
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- MOBILE (FINAL) ---------- */

@media (max-width: 860px){

  body > main{
    padding-top: 8px;
  }

  main > section{
    margin-top: 64px;
  }

  .hero{
    padding: 72px 12px 48px;
  }

  .hero h1{
    font-size: 30px;
  }

  .hero p{
    font-size: 15px;
  }

  .hero img{
    max-width: 260px;
    padding: 20px;
  }

  .card.metric .title{
    font-size: 26px;
  }
}

/* ======================================================
   LANDING — OFFICIAL VIDEO ASTIPA
====================================================== */

.berita-wrapper{
  margin-top: 96px;
}

/* container khusus landing */
.berita-wrapper .container{
  max-width: 960px;
}

/* section title */
.berita-wrapper .section-title{
  text-align: center;
  margin-bottom: 24px;
}

.berita-wrapper .section-title h2{
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .3px;
}

/* grid (walau 1 item, tetap rapi) */
.berita-grid{
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
}

/* video card feel */
.berita-video{
  width: 100%;
}

/* video frame */
.video-wrap{
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */

  border-radius: 20px;
  overflow: hidden;

  background: var(--surface);
  border: 1px solid var(--border);

  box-shadow:
    0 40px 120px rgba(0,0,0,.85),
    inset 0 0 0 1px rgba(255,255,255,.04);
}

/* iframe full */
.video-wrap iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* subtle hover (desktop only) */
@media (hover:hover){
  .video-wrap{
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .video-wrap:hover{
    transform: translateY(-2px);
    box-shadow:
      0 50px 140px rgba(0,0,0,.9),
      inset 0 0 0 1px rgba(255,255,255,.06);
  }
}

/* mobile */
@media (max-width: 860px){
  .berita-wrapper{
    margin-top: 72px;
  }

  .berita-wrapper .section-title h2{
    font-size: 20px;
  }

  .video-wrap{
    border-radius: 16px;
  }
}

/* ======================================================
   LANDING — AGREGAT / PERBANDINGAN PERKARA
====================================================== */

/* Section wrapper */
#perbandingan{
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Title */
#perbandingan .section-title{
  text-align: center;
  margin-bottom: 28px;
}

#perbandingan .section-title h2{
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .3px;
}

#perbandingan .section-title .muted{
  display: block;
  margin-top: 6px;
  font-size: 14px;
}

/* Grid */
.ytd-grid{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 24px;
  align-items: stretch;
}

/* Card */
.ytd-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px 22px;

  box-shadow:
    0 30px 90px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.04);

  display: flex;
  flex-direction: column;
}

/* ================= FORM ================= */

.select-modern{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.select-modern label{
  font-size: 13px;
  color: var(--muted);
}

.select-modern select{
  min-width: 140px;
  height: 36px;

  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;

  font-size: 13px;
  color: var(--text);
}

/* ================= CHART ================= */

.ytd-chart-wrap{
  margin-top: 12px;
}

.legend-modern{
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--muted);
}

.chart-box{
  position: relative;
  width: 100%;
  height: 280px;

  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 12px;
}

/* ================= INSIGHT ================= */

.ytd-card h3{
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .3px;
}

.ytd-card p{
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

.ytd-card .muted{
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  font-size: 13px;
}

/* ================= MOBILE ================= */

@media (max-width: 860px){
  .ytd-grid{
    grid-template-columns: 1fr;
  }

  .chart-box{
    height: 240px;
  }

  #perbandingan .section-title h2{
    font-size: 20px;
  }
}

/* =========================================
   DATA LIMITATION NOTE — ASTIPA 2026
========================================= */

section .card:has(h3){
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.02),
      rgba(255,255,255,.01)
    );
  border: 1px dashed rgba(255,255,255,.08);
  box-shadow: none;
}

section .card h3{
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--text);
  margin-bottom: 10px;
}

section .card h3::before{
  content: "ℹ︎";
  margin-right: 8px;
  color: var(--accent);
  font-weight: 700;
}

section .card p{
  font-size: 13px;
  color: var(--muted);
  margin: 8px 0;
}

section .card ul{
  margin: 10px 0 10px 18px;
  padding: 0;
}

section .card li{
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

section .card strong{
  color: var(--text);
  font-weight: 600;
}

@media (max-width: 860px){
  section .card{
    padding: 14px;
  }
}

/* =========================================
   FEATURE GRID — ASTIPA DARK 2026
========================================= */

section#fitur{
  position: relative;
}

/* grid */
.features{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  margin-top: 18px;
}

/* feature card */
.feature{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:16px;
  border-radius: var(--r-md);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.03),
    rgba(255,255,255,.015)
  );
  border: 1px solid rgba(255,255,255,.06);
  transition: background .2s ease, transform .2s ease;
}

.feature:hover{
  background: rgba(255,255,255,.045);
  transform: translateY(-2px);
}

/* icon */
.icon-wrap{
  width:38px;
  height:38px;
  flex-shrink:0;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(59,130,246,.15);
  color: var(--accent);
}

.icon-wrap svg{
  width:18px;
  height:18px;
  stroke-width:2.2;
}

/* text */
.feature .head{
  font-size:14px;
  font-weight:600;
  margin-bottom:4px;
  color: var(--text);
}

.feature .desc{
  font-size:13px;
  line-height:1.55;
  color: var(--muted);
}

/* section title spacing */
#fitur .section-title h2{
  font-weight:600;
  letter-spacing:.2px;
}

/* responsive */
@media (max-width: 1100px){
  .features{
    grid-template-columns: repeat(3,1fr);
  }
}

@media (max-width: 860px){
  .features{
    grid-template-columns: repeat(2,1fr);
  }
}

@media (max-width: 520px){
  .features{
    grid-template-columns: 1fr;
  }
}

/* =========================================
   HERO — ASTIPA DARK 2026
========================================= */

.hero{
  position: relative;
  padding: 72px 0 64px;
  background:
    radial-gradient(
      1200px 500px at 20% -10%,
      rgba(59,130,246,.18),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.03),
      rgba(255,255,255,.01)
    );
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.hero .grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 32px;
  align-items: center;
}

/* heading */
.hero h1{
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -.3px;
  margin-bottom: 12px;
  color: var(--text);
}

/* lead */
.hero .lead{
  max-width: 520px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
}

/* visual */
.hero-visual{
  display:flex;
  justify-content: center;
}

.hero-visual img{
  max-width: 480px;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 30px 80px rgba(0,0,0,.65);
  background: rgba(255,255,255,.02);
}

/* subtle entrance */
.hero .reveal{
  animation: fadeUp .6s ease-out both;
}

/* mobile */
@media (max-width: 900px){
  .hero{
    padding: 56px 0 48px;
  }

  .hero .grid{
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: left;
  }

  .hero h1{
    font-size: 34px;
  }

  .hero .lead{
    font-size: 15px;
  }

  .hero-visual img{
    max-width: 360px;
  }
}

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(8px) }
  to{ opacity:1; transform:none }
}

/* =========================================
   INSTANSI ACCESS — ASTIPA DARK 2026
========================================= */

#instansi{
  margin-top: 48px;
}

/* grid override jika belum */
#instansi .grid{
  gap: 16px;
}

/* card instansi */
#instansi .card{
  padding: 18px 18px 20px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.025),
      rgba(255,255,255,.01)
    );
  border: 1px solid rgba(255,255,255,.07);
  transition: transform .2s ease, background .2s ease;
}

#instansi .card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.045);
}

/* instansi label */
#instansi .kicker{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 6px;
}

/* title */
#instansi .title{
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}

/* description */
#instansi p{
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

/* responsive */
@media (max-width: 1100px){
  #instansi .grid{
    grid-template-columns: repeat(3,1fr);
  }
}

@media (max-width: 860px){
  #instansi .grid{
    grid-template-columns: repeat(2,1fr);
  }
}

@media (max-width: 520px){
  #instansi .grid{
    grid-template-columns: 1fr;
  }
}

/* =========================================
   RECENT ACCESS — STATIC GRID (FINAL)
========================================= */

/* track */
.rl-track{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  overflow: visible;
  padding: 0;
}

/* card */
.rl-card{
  min-width: auto;                /* ⬅️ penting */
  padding: 18px 20px;
  border-radius: var(--r-md);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.03),
      rgba(255,255,255,.015)
    );

  border: 1px solid rgba(255,255,255,.07);
  transition: background .2s ease, transform .2s ease;
}

.rl-card:hover{
  background: rgba(255,255,255,.045);
  transform: translateY(-2px);
}

/* text */
.rl-kicker{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 6px;
}

.rl-title{
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

.rl-time{
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

/* ❌ dots TIDAK DIPAKAI */
.rl-dots{
  display: none;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 860px){
  .rl-track{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px){
  .rl-track{
    grid-template-columns: 1fr;
  }
}


/* =========================================
   SECTION TITLE — CENTERED (LANDING)
========================================= */

.section-title{
  text-align: center;
  margin-bottom: 28px;
}

.section-title h2{
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -.01em;
}

.section-title .muted{
  display: block;
  margin-top: 6px;
  font-size: .95rem;
}

/* =========================================
   AGREGAT LANDING — COMPOSITION BAR (FINAL)
========================================= */

.ytd-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
}

.ytd-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:18px;
}

/* --- Composition --- */

.comp-wrap{
  margin-top:14px;
}

.comp-bar{
  display:flex;
  height:16px;
  border-radius:999px;
  overflow:hidden;
  background:linear-gradient(
    to right,
    rgba(255,255,255,.04),
    rgba(255,255,255,.02)
  );
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.comp-bar span{
  height:100%;
}

.comp-perc{ background:var(--perc) }
.comp-its { background:var(--its) }
.comp-disp{ background:var(--disp) }

/* --- Legend --- */

.comp-legend{
  margin-top:16px;
  display:grid;
  gap:10px;
}

.comp-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.95rem;
}

.comp-item .label{
  display:flex;
  align-items:center;
  gap:8px;
}

.comp-item strong{
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.2px;
}

.comp-dot{
  width:8px;
  height:8px;
  border-radius:50%;
}

/* --- Delta --- */

.comp-delta{
  margin-left:8px;
  font-size:.85rem;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
}

.comp-delta.up{ color:#22c55e }
.comp-delta.down{ color:#ef4444 }

/* --- Insight text --- */

.ytd-card p{
  line-height:1.7;
  font-size:.95rem;
}

.ytd-card p strong{
  color:var(--text);
}

.ytd-card .muted{
  margin-top:14px;
  padding-top:10px;
  border-top:1px dashed rgba(255,255,255,.08);
}

/* =========================================
   INSIGHT — EXECUTIVE READABILITY
========================================= */

.insight-lead{
  font-size:1rem;
  font-weight:600;
  line-height:1.65;
  color:var(--text);
}

.insight-rest{
  margin-top:10px;
  font-size:.92rem;
  line-height:1.7;
  color:var(--muted);
}

/* =========================================
   SECTION TITLE — ANCHORED (2026)
========================================= */

.section-title{
  text-align:center;
  margin-bottom:28px;
}

.section-title h2{
  font-size:clamp(1.4rem,2.6vw,1.9rem);
  font-weight:700;
  letter-spacing:-.01em;
  position:relative;
}

.section-title h2::after{
  content:'';
  display:block;
  width:42px;
  height:3px;
  margin:10px auto 0;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    var(--accent),
    rgba(59,130,246,.45)
  );
}

.section-title .muted{
  display:block;
  margin-top:8px;
  font-size:.9rem;
  color:var(--muted);
}

#perbandingan .section-title .muted{
  display: block;
  text-align: center;
  margin: 6px auto 0;
  font-size: .9rem;
}

/* ======================================================
   DASHBOARD — ASTIPA (KASMAJA.CSS)
   Scope aman, tidak ganggu landing
====================================================== */

/* Wrapper */
.container.dashboard{
  padding-bottom: 28px;
}

/* ================= SECTION TITLE ================= */

.dashboard .section-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin:6px 0 12px;
}

.dashboard .section-title .badge{
  background: linear-gradient(90deg,var(--brand-900),var(--brand-600));
  color:#fff;
  padding:6px 12px;
  border-radius:999px;
  font-weight:700;
  letter-spacing:.2px;
}

/* ================= TOOLBAR ================= */

.dashboard .toolbar{
  position: sticky;
  top: 64px;
  z-index: 6;
  background: var(--card);
  padding: 14px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}

.dashboard .toolbar form{
  display:grid;
  grid-template-columns: repeat(8,minmax(140px,1fr));
  gap:12px;
  align-items:end;
}

.dashboard .toolbar label{
  font-size:12px;
  color:var(--muted-2);
}

.dashboard .toolbar select,
.dashboard .toolbar input{
  height:40px;
  padding:8px 10px;
  border-radius:var(--r-sm);
  border:1px solid var(--line-strong);
  background:var(--card);
  color:var(--fg);
}

/* ================= METRIC CARDS ================= */

.dashboard .grid.cards{
  display:grid;
  grid-template-columns: repeat(4,minmax(180px,1fr));
  gap:12px;
  margin-top:12px;
}

.dashboard .card.metric{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:14px;
  box-shadow:var(--shadow-md);
}

.dashboard .card.metric .title{
  font-size:30px;
  font-weight:900;
}

/* ================= CHARTS ================= */

.dashboard .charts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:12px;
}

.dashboard .chart-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:14px;
  box-shadow:var(--shadow-md);
}

/* ================= TABLE ================= */

.dashboard .table-wrap{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  margin-top:12px;
  overflow:auto;
}

.dashboard .table{
  min-width:900px;
}

.dashboard .table--perkara .thead,
.dashboard .table--perkara .tr{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr 0.9fr 1.5fr 2fr;
  align-items:center;
}

.dashboard .table--perkara .thead{
  position:sticky;
  top:0;
  background:var(--tbl-hd-bg);
  border-bottom:1px solid var(--line-strong);
}

/* ================= PAGER ================= */

.dashboard .pager{
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* ================= MOBILE ================= */

@media (max-width:860px){

  .dashboard .toolbar form{
    grid-template-columns: repeat(2,minmax(140px,1fr));
  }

  .dashboard .charts{
    grid-template-columns:1fr;
  }

  .dashboard .grid.cards{
    grid-template-columns: repeat(2,minmax(160px,1fr));
  }

  .dashboard .table{
    min-width:0;
  }

  .dashboard .table .thead{
    display:none;
  }

  .dashboard .table--perkara .tr{
    display:block;
    margin:10px;
    padding:10px;
    border:1px solid var(--line);
    border-radius:12px;
    box-shadow:var(--shadow-sm);
  }
}

/* ======================================================
   DASHBOARD — STAT / METRIC CARDS
====================================================== */

.dashboard .grid.cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap:16px;
  margin-top:16px;
}

.dashboard .card.metric{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:18px 20px;
  box-shadow:var(--shadow-md);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* label kecil */
.dashboard .card.metric .kicker{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted-2);
  margin-bottom:6px;
}

/* angka utama */
.dashboard .card.metric .title{
  font-size:32px;
  font-weight:900;
  letter-spacing:.3px;
  line-height:1.1;
}

/* warna per jenis (urutan aman) */
.dashboard .card.metric:nth-child(1) .title{ color:var(--perc); }
.dashboard .card.metric:nth-child(2) .title{ color:var(--its); }
.dashboard .card.metric:nth-child(3) .title{ color:var(--disp); }
.dashboard .card.metric:nth-child(4) .title{ color:var(--info); }

/* hover subtle (desktop) */
@media (hover:hover){
  .dashboard .card.metric{
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .dashboard .card.metric:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(0,0,0,.18);
  }
}

/* mobile */
@media (max-width:860px){
  .dashboard .card.metric .title{
    font-size:26px;
  }
}

/* ======================================================
   DASHBOARD — CHARTS (EXECUTIVE / 2026)
   HTML TIDAK DIUBAH
====================================================== */

/* grid charts */
.dashboard .charts{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px,1fr));
  gap:16px;
  margin-top:16px;
  align-items:start;
}

/* chart card */
.dashboard .chart-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:16px 18px 18px;
  box-shadow:var(--shadow-md);
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* judul chart */
.dashboard .chart-card .kicker{
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted-2);
  margin-bottom:4px;
}

/* badge info / warning (umur missing) */
.dashboard .chart-card .badge{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
}

.dashboard .badge.info{
  background:rgba(14,165,233,.15);
  color:#0ea5e9;
}

.dashboard .badge.warning{
  background:rgba(239,68,68,.15);
  color:#ef4444;
}

/* canvas wrapper */
.dashboard .chart-card canvas{
  width:100% !important;
  height:260px !important;
  max-height:300px;
  box-sizing:border-box;
}

/* empty state (Top 3 kosong) */
.dashboard .chart-card .muted{
  font-size:13px;
  line-height:1.6;
  color:var(--muted-2);
}

/* hover (desktop only) */
@media (hover:hover){
  .dashboard .chart-card{
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .dashboard .chart-card:hover{
    transform: translateY(-2px);
    box-shadow:0 16px 40px rgba(0,0,0,.18);
  }
}

/* tablet */
@media (max-width:1100px){
  .dashboard .charts{
    grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  }
}

/* mobile */
@media (max-width:860px){
  .dashboard .charts{
    grid-template-columns: 1fr;
  }

  .dashboard .chart-card canvas{
    height:220px !important;
  }
}

/* ======================================================
   DASHBOARD — SECTION TITLE (OVERRIDE LANDING)
====================================================== */

.dashboard .section-title{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;

  text-align:left;        /* ⬅️ override center landing */
  margin:6px 0 14px;
}

.dashboard .section-title h2,
.dashboard .section-title h3{
  margin:0;
}

/* badge Dashboard */
.dashboard .section-title .badge{
  font-size:12px;
  font-weight:700;
  padding:6px 12px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand-900),var(--brand-600));
  color:#fff;
}

/* meta text */
.dashboard .section-title .muted{
  font-size:13px;
  color:var(--muted-2);
  max-width:none;         /* ⬅️ matikan max-width landing */
}

/* info badge (Mode Ringkasan) */
.dashboard .section-title .badge.info{
  background:rgba(14,165,233,.14);
  color:#0ea5e9;
  font-weight:600;
}

/* mobile */
@media (max-width:860px){
  .dashboard .section-title{
    gap:6px;
  }

  .dashboard .section-title .muted{
    width:100%;
    font-size:12px;
  }
}

/* ======================================================
   DASHBOARD — TOOLBAR (KASMAJA 2026)
   Aman, tidak ganggu landing
====================================================== */

.dashboard .toolbar{
  position: sticky;
  top: 64px;
  z-index: 10;

  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;

  box-shadow: var(--elev-2);
}

/* FORM GRID */
.dashboard .toolbar form{
  display: grid;
  grid-template-columns: repeat(8, minmax(140px, 1fr));
  gap: 14px;
  align-items: end;
}

/* FIELD */
.dashboard .toolbar label{
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 4px;
  letter-spacing: .02em;
}

.dashboard .toolbar select,
.dashboard .toolbar input[type="month"],
.dashboard .toolbar input[type="number"],
.dashboard .toolbar input[type="text"]{
  width: 100%;
  height: 40px;
  padding: 8px 10px;

  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);

  font-size: 14px;
  color: var(--text);
}

.dashboard .toolbar select:focus,
.dashboard .toolbar input:focus{
  outline: none;
  border-color: var(--accent);
}

/* ACTION ROW */
.dashboard .toolbar .actions-row{
  grid-column: 1 / -1;

  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;

  margin-top: 4px;
}

/* BUTTONS */
.dashboard .toolbar .btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  height: 40px;
  padding: 0 14px;

  border-radius: var(--r-sm);
  font-weight: 600;
  cursor: pointer;
}

.dashboard .toolbar .btn:not(.ghost){
  background: var(--accent);
  color: #fff;
  border: none;
}

.dashboard .toolbar .btn:not(.ghost):hover{
  filter: brightness(.95);
}

.dashboard .toolbar .btn.ghost{
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

.dashboard .toolbar .btn.ghost:hover{
  background: var(--surface-2);
}

/* PER PAGE */
.dashboard .toolbar .perpage{
  display: flex;
  flex-direction: column;
  min-width: 120px;
}

/* SEARCH */
.dashboard .toolbar .field-search{
  min-width: 260px;
  flex: 1;
}

/* ================= MOBILE ================= */

@media (max-width: 1100px){
  .dashboard .toolbar form{
    grid-template-columns: repeat(4, minmax(140px, 1fr));
  }
}

@media (max-width: 860px){
  .dashboard .toolbar{
    padding: 14px;
  }

  .dashboard .toolbar form{
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }

  .dashboard .toolbar .field-search{
    grid-column: 1 / -1;
  }

  .dashboard .toolbar .actions-row{
    gap: 8px;
  }
}

/* ======================================================
   DASHBOARD — INSIGHT / NARRATIVE (KASMAJA 2026)
====================================================== */

/* Section wrapper */
.dashboard section:has(.badge + h3){
  margin-top: 24px;
}

/* Section title tweak */
.dashboard .section-title{
  align-items: center;
}

.dashboard .section-title h3{
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .2px;
}

.dashboard .section-title .muted{
  font-size: 13px;
}

/* Insight card (override metric feel) */
.dashboard .card.metric{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.02),
      rgba(255,255,255,.01)
    );
}

/* Main insight */
.dashboard .card.metric > p{
  font-size: 15px;
  line-height: 1.65;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}

/* Supporting points */
.dashboard .card.metric ul{
  margin: 0;
  padding-left: 18px;
}

.dashboard .card.metric li{
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 6px;
}

/* Policy direction */
.dashboard .card.metric strong{
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.dashboard .card.metric > div{
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

/* Mobile */
@media (max-width: 860px){
  .dashboard .card.metric > p{
    font-size: 14px;
  }

  .dashboard .card.metric li{
    font-size: 12.5px;
  }
}

/* ======================================================
   DASHBOARD — NARRATIVE ANALYSIS (KASMAJA 2026)
====================================================== */

/* Section spacing */
.dashboard section:has(.badge + h3){
  margin-top: 28px;
}

/* Narrative grid cards */
.dashboard .grid.cards{
  align-items: stretch;
}

/* Narrative card — override metric look */
.dashboard .grid.cards .card.metric{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.02),
      rgba(255,255,255,.008)
    );
  border: 1px solid var(--line);
}

/* Kicker */
.dashboard .grid.cards .card.metric .kicker{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 6px;
}

/* Narrative paragraph */
.dashboard .grid.cards .card.metric p{
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

/* Emphasized narrative */
.dashboard .grid.cards .card.metric p[style*="font-weight:600"],
.dashboard .grid.cards .card.metric p[style*="font-weight:700"]{
  font-weight: 700;
}

/* Warning list (wilayah prioritas) */
.dashboard .grid.cards .card.metric ul{
  margin-top: 10px;
  padding-left: 18px;
}

.dashboard .grid.cards .card.metric li{
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* Executive summary — visual emphasis */
.dashboard .grid.cards .card.metric[style*="grid-column"]{
  background:
    linear-gradient(
      180deg,
      rgba(59,130,246,.08),
      rgba(59,130,246,.02)
    );
  border-color: rgba(59,130,246,.35);
}

/* Executive summary text */
.dashboard .grid.cards .card.metric[style*="grid-column"] p{
  font-size: 15px;
  line-height: 1.8;
}

/* Mobile polish */
@media (max-width: 860px){
  .dashboard .grid.cards .card.metric p{
    font-size: 13.5px;
  }

  .dashboard .grid.cards .card.metric[style*="grid-column"] p{
    font-size: 14px;
  }
}

/* ======================================================
   DASHBOARD — DATA & METHODOLOGY NOTES (KASMAJA 2026)
====================================================== */

/* Notes section spacing */
.dashboard section:has(.badge + h3){
  scroll-margin-top: 96px; /* aman untuk sticky toolbar */
}

/* Notes container (override chart-card feel) */
.dashboard section .chart-card{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.018),
      rgba(255,255,255,.008)
    );
  border: 1px dashed var(--line);
  box-shadow: none;
}

/* Notes text */
.dashboard section .chart-card .muted{
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
}

/* Strong emphasis inside notes */
.dashboard section .chart-card strong{
  color: var(--text);
  font-weight: 600;
}

/* Inline emphasis */
.dashboard section .chart-card em{
  font-style: normal;
  color: var(--fg);
  font-weight: 500;
}

/* Methodology badge tone */
.dashboard .section-title .badge{
  background:
    linear-gradient(
      90deg,
      rgba(59,130,246,.85),
      rgba(59,130,246,.55)
    );
}

/* Mode "Semua Jenis" — lebih netral */
.dashboard section:has(.badge):has(strong){
  opacity: .98;
}

/* Mobile polish */
@media (max-width: 860px){
  .dashboard section .chart-card .muted{
    font-size: 13.5px;
    line-height: 1.7;
  }
}

/* =============================
   DASHBOARD — CLEAN CARD
============================= */

.container.dashboard .card,
.container.dashboard .chart-card,
.container.dashboard .table-wrap{
  border: none;                 /* 🔥 matikan garis */
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  background: var(--card);
}

/* hilangkan divider palsu */
.container.dashboard .table--perkara .tr::after{
  display:none;
}

/* =============================
   DASHBOARD — TOOLBAR FIX
============================= */

.container.dashboard .toolbar form{
  grid-template-columns: repeat(7, minmax(120px,1fr));
}

.container.dashboard .field-search{
  grid-column: span 2;
  max-width: 320px;   /* ⬅️ rem utama */
}

.container.dashboard .field-search input{
  width:100%;
}

/* =============================
   DASHBOARD — SECTION TITLE
============================= */

.container.dashboard .section-title{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:flex-start; /* ⬅️ bukan center */
  margin: 6px 0 14px;
}

.container.dashboard .section-title h3,
.container.dashboard .section-title h2{
  margin:0;
  font-size:16px;
  font-weight:700;
}

.container.dashboard .section-title .muted{
  font-size:13px;
  white-space:nowrap;
}

.container.dashboard .section-title h2::after{
  display:none;
}

/* =============================
   DASHBOARD — LOG TABLE
============================= */

.table--aktivitas .tr{
  padding: 10px 14px;
}

.table--aktivitas .tr + .tr{
  border-top:1px solid var(--line);
}

/* =====================================================
   DASHBOARD FINAL FIX — KASMAJA 2026
   ===================================================== */

/* === CARD: bersih, tanpa garis samar === */
.container.dashboard .card,
.container.dashboard .chart-card,
.container.dashboard .table-wrap{
  background: var(--card);
  border: none;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}

/* === HAPUS GARIS-GARIS HALUS === */
.container.dashboard .table--perkara .tr::after,
.container.dashboard .table--aktivitas .tr::after{
  display: none !important;
}

/* === TABLE AKTIVITAS: RAPI === */
.container.dashboard .table--aktivitas .thead{
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.container.dashboard .table--aktivitas .tr{
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* === MOBILE FIX: LOG AKTIVITAS === */
@media (max-width: 860px){
  .container.dashboard .table--aktivitas .thead{
    display:none;
  }

  .container.dashboard .table--aktivitas .tr{
    display:block !important;
    padding:12px;
    margin:10px 0;
    border-radius:14px;
    background:rgba(255,255,255,.03);
  }

  .container.dashboard .table--aktivitas .tr > div{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:6px 0;
  }

  .container.dashboard .table--aktivitas .tr > div::before{
    content: attr(data-label);
    color: var(--muted);
    font-size:12px;
  }
}

/* === CHART CARD: NO TEXTURE, NO GRADIENT === */
.container.dashboard .chart-card{
  background: var(--card);
}

/* === SECTION TITLE: STABIL & KONSISTEN === */
.container.dashboard .section-title{
  align-items:center;
  gap:10px;
}

/* === PAGER FIX (BIAR TIDAK PECAR) === */
.container.dashboard .pager{
  flex-wrap:wrap;
  gap:10px;
}

/* =====================================================
   DASHBOARD FINAL OVERRIDE — ASTIPA 2026
   ===================================================== */

/* ========== 1. HILANGKAN GARIS PUTUS / SAMAR ========== */
.container.dashboard .card,
.container.dashboard .chart-card,
.container.dashboard .table-wrap{
  border: none !important;
  background: var(--card);
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
}

/* pastikan tidak ada pseudo divider */
.container.dashboard .tr::after,
.container.dashboard .table--perkara .tr::after,
.container.dashboard .table--aktivitas .tr::after{
  display:none !important;
}

/* ========== 2. LOG AKTIVITAS: CLEAN TABLE ========== */
.container.dashboard .table--aktivitas .thead{
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.container.dashboard .table--aktivitas .tr{
  border-bottom: none !important;
  background: transparent;
}

.container.dashboard .table--aktivitas .tr + .tr{
  margin-top: 10px;
}

/* ========== 3. FIX WARNA CHART (GLOBAL) ========== */
html[data-theme="dark"]{
  --chart-text: #cbd5e1;
  --chart-grid: rgba(255,255,255,.08);
}

/* Chart.js global override */
html[data-theme="dark"] canvas{
  --chartjs-color: var(--chart-text);
}

/* ========== 4. TOOLBAR: JANGAN STICKY ========== */
.container.dashboard .toolbar{
  position: static !important;
  top: auto !important;
}

/* ========== 5. MOBILE LOG AKTIVITAS TETAP RAPI ========== */
@media (max-width: 860px){
  .container.dashboard .table--aktivitas .thead{
    display:none;
  }

  .container.dashboard .table--aktivitas .tr{
    display:block;
    padding:14px;
    border-radius:14px;
    background:rgba(255,255,255,.04);
  }

  .container.dashboard .table--aktivitas .tr > div{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:6px 0;
  }

  .container.dashboard .table--aktivitas .tr > div::before{
    content: attr(data-label);
    color: var(--muted);
    font-size:12px;
  }
}

/* ================================
   DASHBOARD — CLEAN CARD
================================ */
.container.dashboard .card,
.container.dashboard .chart-card{
  border-image: none !important;
}

.container.dashboard .card.metric,
.container.dashboard .chart-card{
  border-top: none !important;
}

.container.dashboard .card.metric .muted{
  border-top: none !important;
  padding-top: 0 !important;
}

/* ================================
   DASHBOARD — LOG AKTIVITAS
================================ */
.table--aktivitas .thead,
.table--aktivitas .tr{
  align-items: center;
}

.table--aktivitas .thead{
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 2;
}

.table--aktivitas .tr{
  border-bottom: 1px solid var(--line);
}

.table--aktivitas .tr:last-child{
  border-bottom: none;
}

.comp-delta.flat{
  background: rgba(148,163,184,.15);
  color: var(--muted);
}

/* ===============================
   PERBANDINGAN 2029
================================ */

.perbandingan-2029 .section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:24px;
}

.compare-grid{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:24px;
}

.compare-facts{
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.03),
    rgba(255,255,255,.01)
  );
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:20px;
}

.fact-total{
  text-align:center;
  margin-bottom:18px;
}

.fact-total .value{
  font-size:40px;
  font-weight:900;
  letter-spacing:.5px;
}

.fact-total.up .value{ color:#22c55e }
.fact-total.down .value{ color:#ef4444 }

.fact-total .meta{
  font-size:13px;
  color:var(--muted);
}

.fact-list{
  list-style:none;
  padding:0;
  margin:0;
}

.fact-list li{
  display:grid;
  grid-template-columns: 1fr auto auto;
  gap:10px;
  align-items:center;
  padding:8px 0;
  border-top:1px dashed rgba(255,255,255,.08);
  font-size:13px;
}

.fact-list li:first-child{ border-top:none }

.fact-list li em{
  font-style:normal;
  font-size:12px;
  color:var(--muted);
}

.fact-list li.up em{ color:#22c55e }
.fact-list li.down em{ color:#ef4444 }

.compare-insight{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  padding:24px;
}

.compare-insight h3{
  margin:0 0 12px;
  font-size:16px;
}

.insight-lead{
  font-size:15px;
  font-weight:700;
  line-height:1.6;
  margin-bottom:14px;
}

.insight-points{
  margin:0;
  padding-left:18px;
}

.insight-points li{
  font-size:14px;
  line-height:1.6;
  margin-bottom:8px;
}

.insight-foot{
  margin-top:16px;
  padding-top:10px;
  border-top:1px dashed rgba(255,255,255,.1);
  font-size:13px;
  color:var(--muted);
}

@media (max-width: 900px){
  .compare-grid{
    grid-template-columns: 1fr;
  }
}
.compare-insight.compact .insight-points{
  display:none;
}

/* ===============================
   PERBANDINGAN 2029
================================ */
.perbandingan-2029 .section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:24px;
}

.compare-grid{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:24px;
}

.compare-facts{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:20px;
}

.fact-total{
  text-align:center;
  margin-bottom:18px;
}

.fact-total .value{
  font-size:40px;
  font-weight:900;
}

.fact-total.up .value{color:#22c55e}
.fact-total.down .value{color:#ef4444}

.fact-total .meta{
  font-size:13px;
  color:var(--muted);
}

.fact-list{
  list-style:none;
  margin:0;
  padding:0;
}

.fact-list li{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:10px;
  padding:8px 0;
  border-top:1px dashed rgba(255,255,255,.08);
  font-size:13px;
}

.fact-list li:first-child{border-top:none}
.fact-list em{font-style:normal;color:var(--muted)}
.fact-list li.up em{color:#22c55e}
.fact-list li.down em{color:#ef4444}

.hint{
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
}

.compare-insight{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  padding:24px;
}

.compare-insight h3{
  margin:0 0 12px;
  font-size:16px;
}

.confidence{
  margin-left:8px;
  font-size:11px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(59,130,246,.15);
  color:var(--accent);
}

.insight-lead{
  font-size:15px;
  font-weight:700;
  line-height:1.6;
}

.insight-points{
  margin:12px 0;
  padding-left:18px;
}

.insight-points li{
  font-size:14px;
  line-height:1.6;
  margin-bottom:6px;
}

.watch-next{
  margin-top:12px;
  padding:12px;
  border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px dashed rgba(255,255,255,.08);
  font-size:13px;
}

.insight-foot{
  margin-top:14px;
  padding-top:10px;
  border-top:1px dashed rgba(255,255,255,.1);
  font-size:13px;
  color:var(--muted);
}

@media (max-width:900px){
  .compare-grid{grid-template-columns:1fr}
}
/* ===============================
   PERBANDINGAN — ELABORASI X
================================ */

.perbandingan-x .px-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:28px;
}

.px-head h2{
  font-size:clamp(1.6rem,2.8vw,2.1rem);
  font-weight:800;
  letter-spacing:-.01em;
}

.px-grid{
  display:grid;
  grid-template-columns:340px 1fr;
  gap:28px;
}

/* ===== KIRI ===== */
.px-kpi{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:22px;
}

.kpi-main{
  text-align:center;
  margin-bottom:18px;
}

.kpi-value{
  font-size:44px;
  font-weight:900;
}

.kpi-main.up .kpi-value{color:#22c55e}
.kpi-main.down .kpi-value{color:#ef4444}

.kpi-meta{
  font-size:13px;
  color:var(--muted);
}

.kpi-breakdown{
  list-style:none;
  margin:0;
  padding:0;
}

.kpi-breakdown li{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:10px;
  padding:10px 0;
  border-top:1px dashed rgba(255,255,255,.08);
  font-size:13px;
}

.kpi-breakdown li:first-child{border-top:none}
.kpi-breakdown em{font-style:normal;color:var(--muted)}
.kpi-breakdown li.up em{color:#22c55e}
.kpi-breakdown li.down em{color:#ef4444}

.px-note{
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
}

/* ===== KANAN ===== */
.px-insight{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  padding:26px;
}

.px-insight h3{
  font-size:16px;
  margin:0 0 12px;
}

.px-lead{
  font-size:15px;
  font-weight:700;
  line-height:1.6;
}

.px-points{
  margin:14px 0;
  padding-left:18px;
}

.px-points li{
  font-size:14px;
  line-height:1.65;
  margin-bottom:6px;
}

.px-watch{
  margin-top:14px;
  padding:14px;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px dashed rgba(255,255,255,.1);
  font-size:13px;
}

.px-foot{
  margin-top:16px;
  padding-top:12px;
  border-top:1px dashed rgba(255,255,255,.1);
  font-size:13px;
  color:var(--muted);
}

@media (max-width:900px){
  .px-grid{grid-template-columns:1fr}
}
/* ===============================
   PERBANDINGAN — FINAL
================================ */

.perbandingan-x .px-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:28px;
}

.px-head h2{
  font-size:clamp(1.6rem,2.8vw,2.1rem);
  font-weight:800;
  letter-spacing:-.01em;
}

.px-grid{
  display:grid;
  grid-template-columns:360px 1fr;
  gap:28px;
}

/* ===== KIRI ===== */
.px-kpi{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:22px;
}

.kpi-main{
  text-align:center;
  margin-bottom:18px;
}

.kpi-value{
  font-size:44px;
  font-weight:900;
}

.kpi-main.up .kpi-value{color:#22c55e}
.kpi-main.down .kpi-value{color:#ef4444}

.kpi-meta{
  font-size:13px;
  color:var(--muted);
}

.kpi-breakdown{
  list-style:none;
  margin:0;
  padding:0;
}

.kpi-breakdown li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:10px 0;
  border-top:1px dashed rgba(255,255,255,.08);
  font-size:13px;
}

.kpi-breakdown li:first-child{border-top:none}

.kpi-breakdown .left small{
  display:block;
  font-size:12px;
}

.kpi-breakdown .right{
  text-align:right;
}

.kpi-breakdown em{
  display:block;
  font-style:normal;
  color:var(--muted);
}

.kpi-breakdown li.up em{color:#22c55e}
.kpi-breakdown li.down em{color:#ef4444}

.px-note{
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
}

/* ===== KANAN ===== */
.px-insight{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  padding:26px;
}

.px-insight h3{
  font-size:16px;
  margin:0 0 12px;
}

.px-lead{
  font-size:15px;
  font-weight:700;
  line-height:1.6;
}

.px-points{
  margin:14px 0;
  padding-left:18px;
}

.px-points li{
  font-size:14px;
  line-height:1.65;
  margin-bottom:6px;
}

.px-watch{
  margin-top:14px;
  padding:14px;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px dashed rgba(255,255,255,.1);
  font-size:13px;
}

.px-foot{
  margin-top:16px;
  padding-top:12px;
  border-top:1px dashed rgba(255,255,255,.1);
  font-size:13px;
  color:var(--muted);
}

@media (max-width:900px){
  .px-grid{grid-template-columns:1fr}
}
/* =========================================
   PERBANDINGAN X — HEADER CENTER BERTINGKAT
   (Override FINAL — ASTIPA 2026)
========================================= */

.perbandingan-x .px-head{
  display: block;               /* ⬅️ matikan flex lama */
  text-align: center;
  margin-bottom: 32px;
}

/* inner wrapper */
.perbandingan-x .px-head-inner{
  max-width: 880px;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Judul utama */
.perbandingan-x .px-title{
  margin: 0;
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Tahun (level 2) */
.perbandingan-x .px-title span{
  display: block;
  margin-top: 4px;
  font-size: .9em;
  font-weight: 500;
  color: var(--muted);
}

/* Subtitle periode */
.perbandingan-x .px-subtitle{
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

/* Form compare */
.perbandingan-x .px-compare{
  margin-top: 14px;

  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Label kecil */
.perbandingan-x .px-compare label{
  font-size: 12px;
  color: var(--muted);
}

/* Select */
.perbandingan-x .px-compare select{
  min-width: 120px;
  height: 36px;

  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);

  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* Mobile polish */
@media (max-width: 860px){
  .perbandingan-x .px-head{
    margin-bottom: 24px;
  }

  .perbandingan-x .px-title{
    font-size: 1.5rem;
  }

  .perbandingan-x .px-subtitle{
    font-size: 13px;
  }
}
/* =========================================
   PERBANDINGAN X — EXECUTIVE HEADER POLISH
========================================= */

.perbandingan-x .px-head{
  padding: 48px 16px 40px;
  margin-bottom: 40px;

  background:
    radial-gradient(
      700px 280px at 50% -30%,
      rgba(59,130,246,.18),
      transparent 60%
    );

  border-bottom: 1px solid rgba(255,255,255,.06);
}
/* Judul utama */
.perbandingan-x .px-title{
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.015em;
}

/* Tahun — dibuat “secondary headline” */
.perbandingan-x .px-title span{
  margin-top: 6px;
  font-size: .88em;
  font-weight: 600;
  color: #c7d2fe; /* biru pucat, bukan muted abu */
}
.perbandingan-x .px-subtitle{
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--muted);
  max-width: 520px;
}
/* Compare control */
.perbandingan-x .px-compare{
  margin-top: 18px;
  padding: 6px 12px;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;

  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

/* Label kecil */
.perbandingan-x .px-compare label{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Select */
.perbandingan-x .px-compare select{
  background: transparent;
  border: none;
  height: 32px;
  padding: 0 6px;

  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

/* Focus */
.perbandingan-x .px-compare select:focus{
  outline: none;
}
@media (max-width: 860px){
  .perbandingan-x .px-head{
    padding: 36px 14px 32px;
  }

  .perbandingan-x .px-title{
    font-size: 1.6rem;
  }

  .perbandingan-x .px-compare{
    margin-top: 16px;
  }
}
/* =========================================
   PERBANDINGAN X — DARK DROPDOWN ONLY
========================================= */

/* Wrapper pill tetap gelap */
.perbandingan-x .px-compare{
  background: rgba(15,23,42,.9);          /* surface gelap solid */
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
}

/* Select utama */
.perbandingan-x .px-compare select{
  background: transparent;
  color: var(--text);

  font-weight: 700;
  letter-spacing: .02em;

  appearance: none;        /* hilangkan style OS */
  -webkit-appearance: none;
  -moz-appearance: none;

  cursor: pointer;
}

/* Option list (dropdown menu) */
.perbandingan-x .px-compare select option{
  background: var(--surface);             /* 🔥 gelap */
  color: var(--text);
}

/* Hover / selected option (browser support beda-beda, tapi aman) */
.perbandingan-x .px-compare select option:checked,
.perbandingan-x .px-compare select option:hover{
  background: var(--surface-3);
  color: var(--text);
}

/* Focus state */
.perbandingan-x .px-compare select:focus{
  outline: none;
  color: var(--text);
}
/* =========================================
   PERBANDINGAN X — DROPDOWN PILL REFINED
========================================= */

.perbandingan-x .px-compare{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 8px 14px 8px 16px;
  min-height: 42px;

  background: rgba(15,23,42,.95);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 8px 24px rgba(0,0,0,.35);
}

/* Label kecil — jangan vertikal, jadikan subtle */
.perbandingan-x .px-compare label{
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;

  color: var(--faint);
  line-height: 1;

  margin: 0;
  padding: 0;
}

/* Select — fokus utama */
.perbandingan-x .px-compare select{
  min-width: 76px;
  height: auto;

  padding: 2px 20px 2px 6px;

  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;

  color: var(--text);
  background: transparent;
  border: none;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  cursor: pointer;
}

/* Optional: chevron halus (pure CSS) */
.perbandingan-x .px-compare{
  position: relative;
}

.perbandingan-x .px-compare::after{
  content: "▾";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);

  font-size: 12px;
  color: var(--muted);
  pointer-events: none;
}

/* Focus tetap clean */
.perbandingan-x .px-compare select:focus{
  outline: none;
}
/* =========================================
   PERBANDINGAN X — DROPDOWN SCALE UP
========================================= */

/* Pill: lebih lebar & bernafas */
.perbandingan-x .px-compare{
  min-width: 220px;              /* ⬅️ ini kunci */
  padding: 10px 18px 10px 20px;
}

/* Tahun: benar-benar fokus */
.perbandingan-x .px-compare select{
  min-width: 96px;               /* ruang angka */
  font-size: 17px;               /* ⬅️ BESAR */
  font-weight: 900;
  letter-spacing: .04em;
}

/* Label tetap kecil, tidak ikut membesar */
.perbandingan-x .px-compare label{
  font-size: 10px;
}

/* Chevron ikut center */
.perbandingan-x .px-compare::after{
  right: 18px;
  font-size: 13px;
}
/* =========================================
   PERBANDINGAN X — DROPDOWN SCALE UP
========================================= */

/* Pill: lebih lebar & bernafas */
.perbandingan-x .px-compare{
  min-width: 220px;              /* ⬅️ ini kunci */
  padding: 10px 18px 10px 20px;
}

/* Tahun: benar-benar fokus */
.perbandingan-x .px-compare select{
  min-width: 96px;               /* ruang angka */
  font-size: 17px;               /* ⬅️ BESAR */
  font-weight: 900;
  letter-spacing: .04em;
}

/* Label tetap kecil, tidak ikut membesar */
.perbandingan-x .px-compare label{
  font-size: 10px;
}

/* Chevron ikut center */
.perbandingan-x .px-compare::after{
  right: 18px;
  font-size: 13px;
}
/* =========================================
   PERBANDINGAN X — DROPDOWN SCALE UP
========================================= */

/* Pill: lebih lebar & bernafas */
.perbandingan-x .px-compare{
  min-width: 220px;              /* ⬅️ ini kunci */
  padding: 10px 18px 10px 20px;
}

/* Tahun: benar-benar fokus */
.perbandingan-x .px-compare select{
  min-width: 96px;               /* ruang angka */
  font-size: 17px;               /* ⬅️ BESAR */
  font-weight: 900;
  letter-spacing: .04em;
}

/* Label tetap kecil, tidak ikut membesar */
.perbandingan-x .px-compare label{
  font-size: 10px;
}

/* Chevron ikut center */
.perbandingan-x .px-compare::after{
  right: 18px;
  font-size: 13px;
}
/* subtle emphasis */
.perbandingan-x .px-compare select{
  text-shadow: 0 0 12px rgba(59,130,246,.25);
}
/* =========================================
   PERBANDINGAN X — CENTER YEAR
========================================= */

.perbandingan-x .px-compare{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;

  min-width: 200px;
  padding: 10px 18px;
}

/* Label kecil di kiri, tapi tidak dorong layout */
.perbandingan-x .px-compare label{
  justify-self: start;
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--faint);
}

/* Tahun benar-benar di tengah pill */
.perbandingan-x .px-compare select{
  grid-column: 1 / -1;          /* ⬅️ kunci */
  justify-self: center;

  margin-top: 2px;

  font-size: 17px;
  font-weight: 900;
  letter-spacing: .04em;
  min-width: auto;
  text-align: center;
}

/* Chevron tetap di kanan */
.perbandingan-x .px-compare::after{
  right: 16px;
}
/* =========================================
   PERBANDINGAN X — NO ARROW, TRUE CENTER
========================================= */

/* Matikan chevron buatan CSS */
.perbandingan-x .px-compare::after{
  display: none !important;
}

/* Pastikan select tidak menyisakan ruang arrow */
.perbandingan-x .px-compare select{
  padding-right: 0;
}

/* Tetap clickable & rapi */
.perbandingan-x .px-compare select{
  cursor: pointer;
  text-align: center;
}

/* =========================================
   PERBANDINGAN X — CENTER LABEL FIX
========================================= */

/* Grid header tetap */
.perbandingan-x .px-compare{
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;   /* ⬅️ KUNCI */
  row-gap: 6px;
}

/* Label: center sejati */
.perbandingan-x .px-compare label{
  text-align: center;
  justify-self: center;
  width: 100%;

  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Tahun: tetap center */
.perbandingan-x .px-compare select{
  justify-self: center;
  text-align: center;

  font-size: 17px;
  font-weight: 900;
  letter-spacing: .04em;
}
/* ======================================================
   ASTIPA SPLIT LOGIN — EXECUTIVE POLISH (DARK ONLY)
====================================================== */

/* ---------- LEFT PANEL: lebih halus & mahal ---------- */
.astipa-split .left{
  background:
    radial-gradient(
      600px 300px at 50% -20%,
      rgba(255,255,255,.18),
      transparent 60%
    ),
    linear-gradient(
      160deg,
      var(--brand-700),
      var(--brand-600) 55%,
      var(--brand-900)
    );
}

/* Logo: jangan terlalu kontras */
.astipa-split .left .logo-large{
  filter:
    drop-shadow(0 18px 40px rgba(0,0,0,.35))
    brightness(.98);
}

/* ---------- CARD LOGIN: floating premium ---------- */
.astipa-split .card{
  box-shadow:
    0 40px 120px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(6px);
}

/* ---------- TITLE HIERARCHY ---------- */
.astipa-split .title{
  font-size: 26px;
  letter-spacing: -.01em;
}

.astipa-split .muted{
  font-size: 14px;
  max-width: 340px;
}

/* ---------- FORM LABELS ---------- */
.astipa-split label{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---------- INPUT FIELD POLISH ---------- */
.astipa-split .field{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.06),
    rgba(255,255,255,.02)
  );
}

.astipa-split .field input{
  font-size: 15px;
  font-weight: 500;
}

/* Focus lebih halus, tidak menyala */
.astipa-split .field:focus-within{
  box-shadow:
    0 0 0 3px rgba(59,130,246,.22);
}

/* ---------- CTA BUTTON: lebih percaya diri ---------- */
.astipa-split .login-btn{
  letter-spacing: .04em;
  font-size: 14px;
}

.astipa-split .login-btn:hover{
  box-shadow:
    0 14px 32px rgba(21,86,214,.35);
}

/* ---------- FOOT LINK ---------- */
.astipa-split .card a{
  font-size: 13px;
  opacity: .85;
}
.astipa-split .card a:hover{
  opacity: 1;
}

/* ---------- MOBILE POLISH ---------- */
@media (max-width: 980px){
  .astipa-split .card{
    box-shadow:
      0 30px 80px rgba(0,0,0,.55);
  }

  .astipa-split .title{
    font-size: 24px;
  }
}
/* ======================================================
   LOGIN MOBILE FIX — ASTIPA 2026 (SAFE OVERRIDE)
   ====================================================== */

@media (max-width: 860px){

  /* ===== ROOT LAYOUT ===== */
  .astipa-split{
    display: block !important;
    min-height: auto !important;
  }

  /* ===== LEFT PANEL: SEMBUNYIKAN ===== */
  .astipa-split .left{
    display: none !important;
  }

  /* ===== RIGHT PANEL ===== */
  .astipa-split .right{
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
  }

  /* ===== LOGIN CARD ===== */
  .astipa-split .card{
    width: 100%;
    max-width: 420px;       /* ⬅️ KUNCI */
    padding: 24px 20px;
    border-radius: 18px;

    box-shadow:
      0 24px 60px rgba(0,0,0,.55);
  }

  /* ===== TITLE ===== */
  .astipa-split .title{
    font-size: 22px;
    text-align: center;
  }

  .astipa-split .muted{
    text-align: center;
    margin: 0 auto 16px;
    font-size: 13.5px;
  }

  /* ===== FORM ===== */
  .astipa-split form{
    margin-top: 12px;
  }

  .astipa-split label{
    font-size: 10px;
  }

  .astipa-split .field{
    margin-bottom: 14px;
  }

  .astipa-split .field input{
    height: 42px;
    font-size: 15px;
  }

  /* ===== BUTTON ===== */
  .astipa-split .login-btn{
    height: 44px;
    font-size: 14px;
    width: 100%;
  }

  /* ===== FOOT LINKS ===== */
  .astipa-split .card .links,
  .astipa-split .card .footer{
    text-align: center;
    margin-top: 14px;
  }

  .astipa-split .card a{
    font-size: 12.5px;
  }
}

/* EXTRA SMALL DEVICES */
@media (max-width: 420px){
  .astipa-split .card{
    padding: 20px 16px;
    border-radius: 16px;
  }
}
/* ======================================================
   LOGIN MOBILE — STACKED (NO SIDE-BY-SIDE)
   ====================================================== */

@media (max-width: 860px){

  /* ===== ROOT: MATIKAN SPLIT ===== */
  .astipa-split{
    display: block !important;
    min-height: auto !important;
  }

  /* ===== LEFT PANEL → JADI HEADER ===== */
  .astipa-split .left{
    width: 100%;
    min-height: auto;
    padding: 48px 20px 32px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
  }

  /* Logo besar diperkecil */
  .astipa-split .left .logo-large{
    max-width: 140px;
    margin-bottom: 12px;
  }

  /* Jika ada judul / tagline */
  .astipa-split .left h1,
  .astipa-split .left h2{
    font-size: 22px;
    margin-bottom: 6px;
  }

  .astipa-split .left .muted{
    font-size: 13px;
    max-width: 320px;
    margin: 0 auto;
  }

  /* ===== RIGHT PANEL ===== */
  .astipa-split .right{
    width: 100%;
    padding: 24px 16px 40px;

    display: flex;
    justify-content: center;
  }

  /* ===== LOGIN CARD ===== */
  .astipa-split .card{
    width: 100%;
    max-width: 420px;
    padding: 24px 20px;
    border-radius: 18px;

    box-shadow:
      0 22px 56px rgba(0,0,0,.55);
  }

  /* ===== TITLE ===== */
  .astipa-split .title{
    font-size: 22px;
    text-align: center;
  }

  .astipa-split .card .muted{
    text-align: center;
    font-size: 13.5px;
    margin-bottom: 18px;
  }

  /* ===== FORM ===== */
  .astipa-split label{
    font-size: 10px;
    letter-spacing: .14em;
  }

  .astipa-split .field{
    margin-bottom: 14px;
  }

  .astipa-split .field input{
    height: 44px;
    font-size: 15px;
  }

  /* ===== BUTTON ===== */
  .astipa-split .login-btn{
    width: 100%;
    height: 44px;
    font-size: 14px;
  }

  /* ===== FOOT LINKS ===== */
  .astipa-split .card a{
    display: block;
    text-align: center;
    font-size: 12.5px;
    margin-top: 12px;
  }
}

/* EXTRA SMALL */
@media (max-width: 420px){
  .astipa-split .left{
    padding: 40px 16px 28px;
  }

  .astipa-split .card{
    padding: 20px 16px;
    border-radius: 16px;
  }
}
/* ======================================================
   LOGIN LAYOUT — RESPONSIVE STACK
====================================================== */

.login-grid{
  display: grid;
  grid-template-columns: 420px 460px;
  align-items: center;
  justify-content: center;
  min-height: 68vh;
  gap: 56px;
}

.login-brand{
  text-align: center;
}

.login-logo{
  width: 168px;
  display: block;
  margin: 0 auto 18px;
}

.login-title{
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 6px;
}

.login-subtitle{
  font-size: 13px;
}

.login-card{
  padding: 32px 32px 28px;
}

.login-actions{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

/* ================= MOBILE ================= */
@media (max-width: 860px){
  .login-grid{
    grid-template-columns: 1fr;
    gap: 28px;
    min-height: auto;
  }

  .login-card{
    max-width: 420px;
    margin: 0 auto;
  }

  .login-actions{
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .login-actions .btn{
    width: 100%;
  }
}

/* ======================================================
   LOGIN — BUTTON WIDTH POLISH (MOBILE)
====================================================== */

@media (max-width: 860px){

  .login-actions{
    align-items: center;   /* ⬅️ tengah */
  }

  .login-actions .btn{
    width: auto;           /* ⬅️ jangan full */
    min-width: 140px;      /* tap friendly */
    padding: 0 22px;
    height: 42px;
  }
}

/* EXTRA SMALL */
@media (max-width: 420px){
  .login-actions .btn{
    min-width: 132px;
    height: 40px;
    font-size: 13.5px;
  }
}
/* ======================================================
   LOGIN — CENTER BUTTON TEXT (MOBILE)
====================================================== */

@media (max-width: 860px){

  .login-actions .btn{
    display: inline-flex;        /* pastikan flex */
    justify-content: center;     /* ⬅️ center horizontal */
    align-items: center;         /* ⬅️ center vertical */
    text-align: center;
  }
}
/* ======================================================
   HEADER MOBILE FIX — ASTIPA 2026
   Fokus: kanan tidak kosong, actions nempel kanan
====================================================== */

@media (max-width: 860px){

  /* ===== WRAPPER ===== */
  .topbar .wrap{
    justify-content: space-between; /* ⬅️ KUNCI */
    padding-left: 16px;
    padding-right: 16px;
  }

  /* ===== BRAND ===== */
  .topbar .brand{
    flex-shrink: 0;
  }

  /* ===== ACTIONS (LOGIN / USER / DROPDOWN) ===== */
  .topbar .actions{
    margin-left: auto;            /* ⬅️ dorong ke kanan */
    justify-content: flex-end;
    gap: 6px;
  }

  /* Tombol login / chip user */
  .topbar .actions .btn,
  .topbar .actions .chip{
    padding: 0 10px;
    height: 36px;
  }

  /* ===== DROPDOWN ===== */
  .topbar .dropdown{
    position: relative;
  }

  .topbar .dropdown-menu{
    right: 0;                     /* ⬅️ pastikan nempel kanan */
    left: auto;
  }

  /* ===== HAMBURGER ===== */
  .topbar .hamburger{
    margin-left: 6px;             /* ⬅️ rapat ke kanan */
  }

  /* ===== NAV DIMATIKAN (SUDAH ADA, DIKUNCI ULANG) ===== */
  .topbar .nav{
    display: none !important;
  }
}
/* ======================================================
   HEADER MOBILE — TIGHT ACTION SPACING
====================================================== */

@media (max-width: 860px){

  /* actions lebih rapat */
  .topbar .actions{
    gap: 4px;                 /* ⬅️ sebelumnya 6–8px */
  }

  /* tombol Masuk */
  .topbar .actions .btn{
    margin-right: -2px;       /* ⬅️ rapat halus ke dropdown */
    padding: 0 10px;
  }

  /* dropdown chip / user */
  .topbar .actions .chip{
    padding: 0 10px;
  }
}
/* ======================================================
   HEADER MOBILE — ACTIONS SUPER TIGHT
====================================================== */

@media (max-width: 860px){

  /* container actions: matikan gap */
  .topbar .actions{
    gap: 0 !important;          /* ⬅️ KUNCI UTAMA */
  }

  /* tombol Masuk */
  .topbar .actions .btn{
    margin-right: -6px;         /* ⬅️ tarik benar-benar dekat */
    padding: 0 10px;
    height: 36px;
    border-top-right-radius: 0; /* ⬅️ efek menyatu */
    border-bottom-right-radius: 0;
  }

  /* dropdown chip / user */
  .topbar .actions .chip{
    padding: 0 10px;
    height: 36px;
    border-top-left-radius: 0;  /* ⬅️ efek menyatu */
    border-bottom-left-radius: 0;
  }
}
/* ======================================================
   HEADER MOBILE — TIGHT LOGIN & DROPDOWN (REAL FIX)
====================================================== */

@media (max-width: 860px){

  /* Pastikan wrapper full control */
  .topbar .wrap{
    justify-content: space-between;
  }

  /* Tombol Masuk (guest) */
  .topbar > .wrap > .btn.ghost{
    margin-left: auto;          /* dorong ke kanan */
    margin-right: -8px;         /* ⬅️ RAPAT ke dropdown */
    padding: 0 10px;
    height: 36px;
  }

  /* Dropdown user (logged in) */
  .topbar > .wrap > .dropdown{
    margin-left: auto;          /* tetap kanan */
  }

  /* Dropdown button (chip) */
  .topbar > .wrap > .dropdown .chip{
    height: 36px;
    padding: 0 10px;
  }

  /* Hamburger selalu paling kanan */
  .topbar > .wrap > .hamburger{
    margin-left: 0;
  }
}

/* =========================================
   PROFILE — MAHADEWA POLISH (ASTIPA 2026)
========================================= */

.profile .card{
  padding: 22px 24px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.025),
      rgba(255,255,255,.01)
    );
  box-shadow:
    0 18px 48px rgba(0,0,0,.45);
}

/* ---------- Kicker ---------- */
.profile .kicker{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 4px;
}

/* ---------- Judul Card ---------- */
.profile h3{
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .2px;
  margin-bottom: 14px;
}

/* ---------- Form Spacing ---------- */
.profile .form{
  display: grid;
  gap: 14px;
}

/* ---------- Input Wrapper ---------- */
.profile .input-icon{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.06),
    rgba(255,255,255,.02)
  );
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 10px 12px;
  transition: border .15s ease, box-shadow .15s ease;
}

/* Focus state: calm but confident */
.profile .input-icon:focus-within{
  border-color: rgba(59,130,246,.55);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}

/* ---------- Input ---------- */
.profile .input-icon input{
  font-size: 14.5px;
  font-weight: 500;
}

/* ---------- Icon ---------- */
.profile .input-icon i{
  width: 16px;
  height: 16px;
  color: var(--muted);
}

/* ---------- Readonly Field ---------- */
.profile .input-icon input[readonly]{
  opacity: .85;
}

/* ---------- Hint Text ---------- */
.profile .small.muted{
  font-size: 12.5px;
  line-height: 1.6;
  max-width: 420px;
}

/* ---------- Action Row ---------- */
.profile .form-actions,
.profile form > div[style*="justify-content:flex-end"]{
  margin-top: 18px;
}

/* ---------- Button ---------- */
.profile .btn.primary{
  height: 42px;
  padding: 0 22px;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow:
    0 12px 32px rgba(59,130,246,.35);
}

.profile .btn.primary:hover{
  filter: brightness(1.05);
}

/* ---------- Card Hover (Desktop only) ---------- */
@media (hover:hover){
  .profile .card{
    transition: transform .2s ease, box-shadow .2s ease;
  }

  .profile .card:hover{
    transform: translateY(-2px);
    box-shadow:
      0 22px 60px rgba(0,0,0,.55);
  }
}

/* ---------- Mobile Polish ---------- */
@media (max-width: 860px){
  .profile .card{
    padding: 18px 18px;
  }

  .profile h3{
    font-size: 15px;
  }
}

/* =========================================
   PASSWORD — MAHADEWA ULTIMATE
========================================= */

/* --- Secure Field Wrapper --- */
.profile .input-icon{
  position: relative;
  padding: 12px 44px 12px 14px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.07),
      rgba(255,255,255,.02)
    );

  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 12px 28px rgba(0,0,0,.45);

  transition: border .2s ease, box-shadow .2s ease;
}

/* Focus = secure activation */
.profile .input-icon:focus-within{
  border-color: rgba(59,130,246,.6);
  box-shadow:
    0 0 0 3px rgba(59,130,246,.22),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* --- Input --- */
.profile .input-icon input{
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
}

/* --- Left Icon (Lock) --- */
.profile .input-icon > i{
  color: var(--accent);
  opacity: .9;
}

/* =========================================
   MODERN EYE TOGGLE (NO BUTTON LOOK)
========================================= */

.profile .icon-btn{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);

  width: 32px;
  height: 32px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,.06);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);

  color: var(--muted);
  cursor: pointer;

  transition:
    background .15s ease,
    color .15s ease,
    transform .15s ease;
}

/* Hover = intent */
.profile .icon-btn:hover{
  background: rgba(255,255,255,.12);
  color: var(--text);
  transform: translateY(-50%) scale(1.05);
}

/* Active = clarity */
.profile .icon-btn.active{
  background: rgba(59,130,246,.22);
  color: var(--accent);
  border-color: rgba(59,130,246,.45);
}

/* Eye icon size */
.profile .icon-btn i{
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}

/* =========================================
   SECURITY HINT — EXECUTIVE
========================================= */

.profile .form-hint,
.profile .small.muted{
  position: relative;
  padding-left: 22px;
}

.profile .form-hint::before,
.profile .small.muted::before{
  content: "🔐";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 13px;
  opacity: .85;
}
/* =========================================
   PROFILE — HEADER COMPOSITION (MAHADEWA)
========================================= */

/* Section spacing: naikkan konten */
.profile{
  margin-top: 16px;
}

/* Header block */
.profile .section-title{
  position: relative;
  padding: 28px 24px 26px;
  margin-bottom: 24px;

  text-align: center;

  background:
    radial-gradient(
      700px 240px at 50% -40%,
      rgba(59,130,246,.22),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.03),
      rgba(255,255,255,.01)
    );

  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,.06);
}

/* Badge jadi anchor */
.profile .section-title .badge{
  display: inline-block;
  padding: 6px 14px;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;

  background:
    linear-gradient(
      90deg,
      rgba(59,130,246,.9),
      rgba(59,130,246,.6)
    );

  box-shadow: 0 10px 28px rgba(59,130,246,.45);
}

/* Subtitle */
.profile .section-title .muted{
  display: block;
  margin-top: 8px;

  font-size: 13.5px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;

  color: var(--muted);
}
/* =========================================
   PROFILE — INPUT ICON REFINEMENT
========================================= */

/* Wrapper tetap */
.profile .input-icon{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Icon slot */
.profile .input-icon > i{
  width: 32px;
  height: 32px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 8px;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);

  color: var(--accent);

  flex-shrink: 0;
}

/* Saat focus, icon ikut “hidup” */
.profile .input-icon:focus-within > i{
  background: rgba(59,130,246,.22);
  border-color: rgba(59,130,246,.45);
  color: #fff;
}

/* Input tidak terlalu ke kiri */
.profile .input-icon input{
  padding-left: 2px;
}
/* Card separation lebih jelas */
.profile .card + .card{
  margin-top: 20px;
}

/* Security section sedikit lebih berat */
.profile .card:has(.kicker:contains("Keamanan")){
  box-shadow: 0 26px 70px rgba(0,0,0,.55);
}
/* =========================================
   PROFILE — HEADER FINAL COMPOSITION
========================================= */

.profile .section-title{
  padding: 22px 20px 20px;       /* ⬅️ lebih padat */
  margin-bottom: 18px;

  background:
    radial-gradient(
      600px 180px at 50% -45%,
      rgba(59,130,246,.18),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.025),
      rgba(255,255,255,.01)
    );
}

/* Badge jangan terlalu "terbang" */
.profile .section-title .badge{
  margin-bottom: 4px;
  box-shadow: 0 6px 18px rgba(59,130,246,.35);
}

/* Subtitle: lebih dekat ke badge */
.profile .section-title .muted{
  margin-top: 4px;
  font-size: 13px;
}
/* =========================================
   PROFILE — INPUT SURFACE UNIFICATION
========================================= */

.profile .input-icon{
  gap: 12px;
  padding: 12px 14px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.065),
      rgba(255,255,255,.02)
    );
}

/* Icon slot lebih halus */
.profile .input-icon > i{
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.06);
  color: #c7d2fe; /* biru pucat, mahal */
}

/* Focus = seluruh surface aktif */
.profile .input-icon:focus-within{
  box-shadow:
    0 0 0 3px rgba(59,130,246,.18),
    0 18px 40px rgba(0,0,0,.45);
}
/* =========================================
   PROFILE — SECURITY SECTION EMPHASIS
========================================= */

/* Card Keamanan: lebih dalam */
.profile .card:has(.kicker){
  position: relative;
}

/* Khusus Keamanan */
.profile .card:has(.kicker):has(.form-hint),
.profile .card:has(.kicker):has([data-toggle]){
  box-shadow:
    0 28px 80px rgba(0,0,0,.6);
}

/* Garis halus sebagai "secure boundary" */
.profile .card:has(.form-hint)::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;

  box-shadow:
    inset 0 0 0 1px rgba(59,130,246,.12);
}
/* =========================================
   PROFILE — ACTION ANCHOR
========================================= */

.profile .btn.primary{
  min-width: 160px;
}

/* Sedikit visual anchor di kanan bawah */
.profile .form-actions{
  padding-top: 12px;
  border-top: 1px dashed rgba(255,255,255,.08);
}
/* =========================================
   PROFILE — FIELD COLOR BALANCE
========================================= */

/* Default field: lebih netral, nyatu card */
.profile .input-icon{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.015)
    );

  border-color: rgba(255,255,255,.06);
}

/* Readonly: makin tenang */
.profile .input-icon input[readonly]{
  color: rgba(226,232,240,.85);
}

/* Focus baru "naik" */
.profile .input-icon:focus-within{
  background:
    linear-gradient(
      180deg,
      rgba(59,130,246,.16),
      rgba(59,130,246,.06)
    );
}
/* =========================================
   PROFILE — HEADER TITLE AUTHORITY
========================================= */

.profile .section-title{
  padding: 28px 24px 26px;
}

/* Badge → Title block */
.profile .section-title .badge{
  font-size: 14px;
  padding: 8px 18px;
  border-radius: 999px;
}

/* Subtitle tetap tenang */
.profile .section-title .muted{
  font-size: 14px;
  margin-top: 6px;
}
.profile .input-icon{
  transition:
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}
/* =========================================
   PROFILE — INPUT COLOR NORMALIZATION
========================================= */

/* wrapper input */
.profile .input-icon{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.015)
    );

  border: 1px solid rgba(255,255,255,.06);
}

/* input field */
.profile .input-icon input{
  color: var(--text);
}

/* readonly → paling tenang */
.profile .input-icon input[readonly]{
  color: rgba(226,232,240,.8);
}

/* focus → baru naik sedikit */
.profile .input-icon:focus-within{
  background:
    linear-gradient(
      180deg,
      rgba(59,130,246,.12),
      rgba(59,130,246,.04)
    );

  border-color: rgba(59,130,246,.45);
}
/* =========================================
   PROFILE — EYE ICON ALIGNMENT
========================================= */

/* wrapper */
.profile .input-icon{
  position: relative;
  padding-right: 42px; /* ruang khusus icon kanan */
}

/* tombol mata */
.profile .input-icon .icon-btn{
  position: absolute;
  right: 8px;              /* ⬅️ KUNCI */
  top: 50%;
  transform: translateY(-50%);

  width: 32px;
  height: 32px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 8px;
  color: var(--muted);
}

/* hover halus */
.profile .input-icon .icon-btn:hover{
  background: rgba(255,255,255,.06);
  color: var(--text);
}

/* pastikan input tidak ketimpa */
.profile .input-icon input{
  padding-right: 48px;
}
.profile .input-icon svg{
  width: 18px;
  height: 18px;
  stroke-width: 2;
}
/* ======================================================
   ADMIN LOG AKTIVITAS — ASTIPA DARK 2026
   Aman, scoped, mobile-safe
====================================================== */

.admin-logs{
  --col-waktu: 140px;
  --col-aksi: 1.2fr;
  --col-user: 1.4fr;
  --col-instansi: 1.2fr;
  --col-ip: 120px;
}

/* ===== TABLE GRID ===== */

.admin-logs .table--logs .thead,
.admin-logs .table--logs .tr{
  display:grid;
  grid-template-columns:
    var(--col-waktu)
    var(--col-aksi)
    var(--col-user)
    var(--col-instansi)
    var(--col-ip);
  align-items:start;
}

/* ===== HEADER ===== */

.admin-logs .table--logs .thead{
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  letter-spacing:.04em;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}

/* ===== ROW ===== */

.admin-logs .table--logs .tr{
  border-bottom:1px solid rgba(255,255,255,.06);
}

.admin-logs .table--logs .tr:hover{
  background:var(--surface-2);
}

/* ===== CELL ===== */

.admin-logs .table--logs .thead > div,
.admin-logs .table--logs .tr > div{
  padding:12px 14px;
  min-width:0;               /* ⬅️ KUNCI anti overflow */
}

/* ===== TEXT BEHAVIOR ===== */

.admin-logs .nowrap{
  white-space:nowrap;
}

.admin-logs .mono{
  font-size:12.5px;
}

/* ===== DETAIL TEXT (AMAN & TENANG) ===== */

.admin-logs .table--logs .muted{
  display:block;
  margin-top:4px;
  font-size:12.5px;
  line-height:1.5;

  color:var(--muted);

  /* ⬅️ JANGAN chip, JANGAN nowrap */
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
}

/* ======================================================
   MOBILE — STACK MODE (NO OVERFLOW)
====================================================== */

@media (max-width:860px){

  .admin-logs .table--logs .thead{
    display:none;
  }

  .admin-logs .table--logs .tr{
    display:block;
    margin-bottom:12px;
    padding:12px 14px;

    background:var(--surface);
    border-radius:var(--r-md);
    border:1px solid var(--border);
  }

  .admin-logs .table--logs .tr > div{
    display:flex;
    justify-content:space-between;
    gap:12px;

    padding:6px 0;
    min-width:0;
  }

  .admin-logs .table--logs .tr > div::before{
    content:attr(data-label);
    flex-shrink:0;

    font-size:11px;
    letter-spacing:.04em;
    color:var(--muted);
  }

  /* ===== MOBILE DETAIL TEXT ===== */
  .admin-logs .table--logs .muted{
    margin-top:2px;
    font-size:12px;
    text-align:left;

    /* ⬅️ ini yang mencegah keluar tabel */
    max-width:100%;
  }
}

/* ======================================================
   PAGER POLISH (KONSISTEN ASTIPA)
====================================================== */

.admin-logs .pager{
  margin-top:16px;
  gap:12px;
  flex-wrap:wrap;
}

.admin-logs .pager .chip{
  background:var(--surface-2);
  border:1px solid var(--border);
  font-size:12px;
}
/* ======================================================
   ADMIN LOG AKTIVITAS — FINAL POLISH (ASTIPA 2026)
====================================================== */

/* ================= HEADER ================= */

.admin-logs .section-title{
  margin: 0 0 14px;              /* ⬅️ hilangkan rasa kosong */
  padding-top: 8px;
}

.admin-logs .section-title h2{
  font-size: 20px;
  margin-bottom: 4px;
}

.admin-logs .section-title .muted{
  font-size: 13px;
  margin-top: 0;
  opacity: .9;
}

/* ================= TOOLBAR ================= */

.admin-logs .toolbar{
  margin-bottom: 14px;           /* ⬅️ rapatkan ke tabel */
  padding: 12px 14px;
}

/* ================= TABLE GRID ================= */

.admin-logs .table--logs .thead,
.admin-logs .table--logs .tr{
  display:grid;
  grid-template-columns:
    150px        /* waktu */
    1.4fr        /* aksi */
    1.6fr        /* user */
    1.4fr        /* instansi */
    120px;       /* IP */
  align-items:flex-start;
}

/* ================= HEADER TABLE ================= */

.admin-logs .table--logs .thead{
  font-size:12px;
  letter-spacing:.05em;
  color:var(--muted);
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* ================= ROW ================= */

.admin-logs .table--logs .tr{
  padding: 4px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.admin-logs .table--logs .tr:hover{
  background:linear-gradient(
    90deg,
    rgba(255,255,255,.03),
    rgba(255,255,255,.015)
  );
}

/* ================= CELL ================= */

.admin-logs .table--logs .thead > div,
.admin-logs .table--logs .tr > div{
  padding:10px 14px;
  min-width:0;
}

/* ================= AKSI (FIX TABRAKAN) ================= */

.admin-logs .log-action{
  font-weight:700;
  font-size:13.5px;
  letter-spacing:.02em;
}

.admin-logs .log-resource{
  display:block;
  margin-top:3px;

  font-size:12px;
  color:var(--muted);

  white-space:normal;
  word-break:break-word;
}

/* ================= USER ================= */

.admin-logs .log-user{
  font-weight:600;
  font-size:13px;
}

.admin-logs .log-detail{
  display:block;
  margin-top:3px;

  font-size:12px;
  color:var(--muted);

  white-space:normal;
  word-break:break-word;
}

/* ================= IP ================= */

.admin-logs .mono{
  font-size:12.5px;
  opacity:.9;
}

/* ======================================================
   MOBILE — STACK RAPI (ANTI KELUAR LAYAR)
====================================================== */

@media (max-width:860px){

  .admin-logs .table--logs .thead{
    display:none;
  }

  .admin-logs .table--logs .tr{
    display:block;
    margin-bottom:12px;
    padding:12px 14px;

    border-radius:var(--r-md);
    background:var(--surface);
    border:1px solid var(--border);
  }

  .admin-logs .table--logs .tr > div{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:6px 0;
  }

  .admin-logs .table--logs .tr > div::before{
    content:attr(data-label);
    font-size:11px;
    letter-spacing:.04em;
    color:var(--muted);
    flex-shrink:0;
  }
}
/* ===== ADMIN LOG: KILL LANDING FEEL ===== */

.admin-logs .section-title{
  text-align:left;
  padding:0;
  margin: 0 0 10px;
}

.admin-logs .section-title h2{
  font-size:18px;
  font-weight:700;
}

.admin-logs .section-title .muted{
  font-size:12.5px;
  margin-top:2px;
}
.admin-logs .toolbar{
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.02);
  box-shadow:none;
}
/* ===== WAKTU ===== */
.admin-logs .log-time{
  font-size:12.5px;
  color:var(--muted);
  white-space:nowrap;
}

/* ===== AKSI ===== */
.admin-logs .log-action{
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
}

.admin-logs .log-action.logout{ color:#ef4444 }
.admin-logs .log-action.login{ color:#22c55e }

.admin-logs .log-resource{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}
.admin-logs .table--logs .tr:nth-child(odd){
  background:rgba(255,255,255,.015);
}

.admin-logs .table--logs .tr:hover{
  background:rgba(59,130,246,.06);
}
.admin-logs .log-user{
  font-size:13px;
  font-weight:600;
}

.admin-logs .log-detail{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}
/* ======================================================
   ADMIN LOG AKTIVITAS — FINAL POLISH (ASTIPA 2026)
   Scope: .admin-logs (AMAN)
====================================================== */

/* ===== SECTION SPACING (KILL EMPTY TOP) ===== */
.admin-logs{
  padding-top: 8px;
}

.admin-logs .section-title{
  margin: 0 0 12px;
  text-align: left;
}

.admin-logs .section-title h2{
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .2px;
}

.admin-logs .section-title .muted{
  font-size: 12.5px;
  margin-top: 2px;
}

/* ===== TOOLBAR: COMPACT & FUNCTIONAL ===== */
.admin-logs .toolbar{
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  box-shadow: none;
  display: grid;
  grid-template-columns: 1fr 140px auto auto;
  gap: 10px;
  align-items: center;
}

@media (max-width:860px){
  .admin-logs .toolbar{
    grid-template-columns: 1fr;
  }
}

/* ===== TABLE WRAPPER ===== */
.admin-logs .table--logs{
  margin-top: 12px;
  border-radius: 14px;
  overflow: hidden;
}

/* ===== HEADER TABLE ===== */
.admin-logs .thead{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(255,255,255,.03);
}

/* ===== ROW BASE ===== */
.admin-logs .tr{
  align-items: start;
  line-height: 1.4;
}

/* subtle striping */
.admin-logs .tr:nth-child(odd){
  background: rgba(255,255,255,.015);
}

.admin-logs .tr:hover{
  background: rgba(59,130,246,.06);
}

/* ===== WAKTU ===== */
.admin-logs .tr > div[data-label="Waktu"]{
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}

/* ===== AKSI (HIERARCHY FIX) ===== */
.admin-logs .tr > div[data-label="Aksi"]{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
}

/* resource */
.admin-logs .tr > div[data-label="Aksi"] .muted{
  display: block;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  margin-top: 2px;
}

/* ===== USER ===== */
.admin-logs .tr > div[data-label="User"]{
  font-size: 13px;
  font-weight: 600;
}

.admin-logs .tr > div[data-label="User"] .muted{
  display: block;
  font-size: 12px;
  font-weight: 400;
  margin-top: 2px;
}

/* ===== INSTANSI ===== */
.admin-logs .tr > div[data-label="Instansi"]{
  font-size: 13px;
}

/* ===== IP ===== */
.admin-logs .tr > div[data-label="IP"]{
  font-size: 12.5px;
  opacity: .85;
}

/* ===== MOBILE POLISH ===== */
@media (max-width:860px){

  .admin-logs .tr{
    margin: 8px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.03);
  }

  .admin-logs .tr > div{
    padding: 6px 0;
  }

  .admin-logs .tr > div::before{
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
}
/* ======================================================
   ADMIN LOG — HEADER COMPACT FIX (FINAL)
====================================================== */

.admin-logs{
  padding-top: 0;            /* ⬅️ matikan jarak atas section */
}

.admin-logs .section-title{
  margin-top: 0;
  padding: 12px 0 10px;      /* ⬅️ padat, admin-style */
  background: none;          /* ⬅️ bunuh rasa hero */
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.admin-logs .section-title h2{
  font-size: 17px;           /* ⬅️ bukan headline landing */
  font-weight: 700;
}

.admin-logs .section-title .muted{
  font-size: 12px;
  margin-top: 2px;
}
/* ======================================================
   ADMIN LOG — TITLE + BLUE ANCHOR (MEANINGFUL)
====================================================== */

.admin-logs .section-title{
  text-align: center;
  padding: 16px 0 18px;
  margin: 0 0 14px;
  background: none;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Judul */
.admin-logs .section-title h2{
  font-size: 18.5px;
  font-weight: 800;
  letter-spacing: .02em;
  margin: 0;
}

/* Subjudul */
.admin-logs .section-title .muted{
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--muted);
}

/* ===== GARIS BIRU = ANCHOR MAKNA ===== */
.admin-logs .section-title h2::after{
  content: '';
  display: block;
  width: 56px;              /* ⬅️ lebih panjang */
  height: 3px;              /* ⬅️ lebih tebal */
  margin: 10px auto 0;      /* ⬅️ CENTER SEJATI */
  border-radius: 999px;

  background: linear-gradient(
    90deg,
    var(--accent),
    rgba(59,130,246,.45)
  );

  box-shadow:
    0 0 0 1px rgba(59,130,246,.25),
    0 6px 18px rgba(59,130,246,.45);
}
/* ======================================================
   ADMIN LOG — CENTERED HEADER (FINAL POLISH)
====================================================== */

.admin-logs .section-title{
  text-align: center;
  padding: 22px 0 20px;
  margin: 0 0 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* JUDUL UTAMA */
.admin-logs .section-title h2{
  font-size: 22px;          /* ⬅️ LEBIH BESAR */
  font-weight: 900;
  letter-spacing: .03em;
  margin: 0;
}

/* SUBTITLE */
.admin-logs .section-title .muted{
  display: block;
  margin-top: 6px;
  font-size: 13px;
  text-align: center;      /* ⬅️ PASTI CENTER */
  color: var(--muted);
}

/* GARIS BIRU — ANCHOR MAKNA */
.admin-logs .section-title h2::after{
  content: '';
  display: block;
  width: 64px;             /* ⬅️ sedikit lebih panjang */
  height: 3px;
  margin: 12px auto 0;     /* ⬅️ center absolut */
  border-radius: 999px;

  background: linear-gradient(
    90deg,
    var(--accent),
    rgba(59,130,246,.45)
  );

  box-shadow:
    0 0 0 1px rgba(59,130,246,.25),
    0 6px 18px rgba(59,130,246,.45);
}
/* ======================================================
   ADMIN LOG — HARD OVERRIDE (FINAL)
====================================================== */

.admin-logs .section-title{
  display: flex;
  flex-direction: column;
  align-items: center;     /* ⬅️ PAKSA CENTER */
  justify-content: center;
  text-align: center;
  padding: 28px 12px 22px;
  margin: 0 0 18px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* JUDUL UTAMA */
.admin-logs .section-title h2{
  font-size: 28px;         /* ⬅️ JELAS LEBIH BESAR */
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.15;
  margin: 0;
  text-align: center;
}

/* SUBTITLE */
.admin-logs .section-title .muted{
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  max-width: 520px;
  text-align: center;     /* ⬅️ DIPAKSA */
  margin-left: auto;
  margin-right: auto;
  color: var(--muted);
}

/* GARIS BIRU (MAKNA / ANCHOR) */
.admin-logs .section-title h2::after{
  content: '';
  display: block;
  width: 88px;             /* ⬅️ LEBIH PANJANG */
  height: 4px;             /* ⬅️ LEBIH TEBAL */
  margin: 14px auto 0;
  border-radius: 999px;

  background: linear-gradient(
    90deg,
    var(--accent),
    rgba(59,130,246,.35)
  );

  box-shadow:
    0 0 0 1px rgba(59,130,246,.3),
    0 10px 26px rgba(59,130,246,.45);
}
.page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  padding:20px 0 12px;
  margin-bottom:8px;
}

.page-title h1{
  margin:6px 0 4px;
  font-size:28px;
  line-height:1.2;
}

.page-title .subtitle{
  max-width:520px;
}
.stepper{
  display:flex;
  gap:10px;
}

.step{
  padding:6px 12px;
  border-radius:999px;
  background:var(--surface);
  border:1px solid var(--line);
  font-size:13px;
  color:var(--muted);
}

.step.active{
  color:#fff;
  border-color:var(--brand-600);
  background:linear-gradient(180deg,var(--brand-600),var(--brand-700));
}
.panel.header form{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr auto auto;
  gap:12px;
  align-items:end;
}

.panel.header .actions-row{
  margin:0;
}

.panel.header .btn.primary{
  height:42px;
  padding:0 18px;
}
@media (max-width: 900px){
  .panel.header form{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width: 600px){
  .panel.header form{
    grid-template-columns:1fr;
  }
}
.grid.two{
  align-items:start;
}

.panel.body{
  padding:18px;
}

.panel.body h3{
  margin-bottom:6px;
}
.kv{
  display:grid;
  grid-template-columns:120px 1fr;
  row-gap:6px;
}

.kv dt{
  color:var(--muted);
  font-size:13px;
}

.kv dd{
  margin:0;
  font-weight:600;
}
.dashboard{
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 48px;
}
.page-head{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:24px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
  margin-bottom:20px;
}

.page-title h1{
  font-size:28px;
  margin:6px 0 4px;
}

.page-title .subtitle{
  max-width:560px;
  color:var(--muted);
}
.stepper{
  display:flex;
  gap:8px;
  align-items:center;
}

.step{
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--muted);
}

.step.active{
  background:linear-gradient(180deg,var(--brand-600),var(--brand-700));
  color:#fff;
  border-color:transparent;
}
.panel.header{
  margin-top:20px;
}

.panel.header form{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr auto auto;
  gap:12px;
  align-items:end;
}

.panel.header .checkbox{
  align-self:center;
}

.panel.header .btn.primary{
  height:42px;
  padding:0 20px;
  white-space:nowrap;
}
@media (max-width: 900px){
  .panel.header form{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width: 600px){
  .panel.header form{
    grid-template-columns:1fr;
  }
}
.grid.two{
  margin-top:24px;
  align-items:start;
}

.panel.body{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:20px;
}
.kv{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:6px 12px;
}

.kv dt{
  font-size:12px;
  color:var(--muted);
}

.kv dd{
  margin:0;
  font-weight:600;
}
.ac-body pre{
  background:#0f1a2e;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  font-size:12px;
  overflow:auto;
}
/* ================== MODERN FORM CONTROLS ================== */
input,
select,
textarea{
  height:44px;
  border-radius:14px;
  padding:0 14px;
  background:linear-gradient(180deg,#111c33,#0c1529);
  border:1px solid rgba(255,255,255,.06);
  color:#e6edf7;
  font-size:14px;
  transition:border-color .2s, box-shadow .2s;
}

input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:var(--brand-600);
  box-shadow:0 0 0 3px rgba(42,115,255,.25);
}

/* date input — bunuh rasa OS */
input[type="date"]{
  appearance:none;
  -webkit-appearance:none;
  position:relative;
  color:#e6edf7;
}

/* sembunyikan icon default */
input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:0;
  position:absolute;
  right:10px;
  width:24px;
  height:24px;
  cursor:pointer;
}

/* icon custom */
input[type="date"]::after{
  content:"📅";
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  font-size:14px;
  opacity:.6;
  pointer-events:none;
}
.panel.header{
  padding:16px 18px;
  border-radius:18px;
  background:linear-gradient(180deg,#0f172a,#0b1220);
  border:1px solid rgba(255,255,255,.06);
}

.panel.header form{
  display:grid;
  grid-template-columns:2.2fr 1fr 1fr auto auto;
  gap:14px;
  align-items:end;
}

.panel.header label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}
.btn.primary{
  height:44px;
  padding:0 22px;
  border-radius:16px;
  font-weight:800;
  letter-spacing:.02em;
  background:linear-gradient(180deg,#3b82f6,#2563eb);
  box-shadow:0 10px 30px rgba(37,99,235,.35);
}

.btn.primary:hover{
  filter:brightness(1.08);
}

.btn.primary.loading{
  pointer-events:none;
  opacity:.75;
}
.stepper{
  display:flex;
  gap:8px;
}

.step{
  padding:6px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  background:#0e1627;
  border:1px solid rgba(255,255,255,.06);
  color:var(--muted);
}

.step.active{
  background:linear-gradient(180deg,#1d4ed8,#2563eb);
  color:#fff;
  border-color:transparent;
}
.panel.body{
  background:linear-gradient(180deg,#0f172a,#0b1220);
  border-radius:20px;
  border:1px solid rgba(255,255,255,.06);
  padding:20px;
}
.ac-body pre{
  background:#0a1020;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  padding:14px;
  font-size:12px;
  line-height:1.5;
}
.page-title h1{
  font-size:26px;
  font-weight:800;
  letter-spacing:-0.02em;
  margin:4px 0 6px;
}

.page-title .subtitle{
  font-size:13px;
  color:var(--muted);
  max-width:520px;
}
.page-title .badge{
  font-size:11px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(59,130,246,.15);
  color:#93c5fd;
}
.panel.header{
  padding:14px 16px;
  border-radius:20px;
  background:
    linear-gradient(180deg,#0f172a,#0b1220);
  border:1px solid rgba(255,255,255,.06);
}

.panel.header label{
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.panel.header form{
  display:grid;
  grid-template-columns: 2.2fr 1fr 1fr auto auto;
  gap:12px;
  align-items:end;
}
input,
select{
  height:42px;
  border-radius:14px;
  background:linear-gradient(180deg,#111c33,#0c1529);
  border:1px solid rgba(255,255,255,.06);
  color:#e6edf7;
  font-size:13px;
}

input::placeholder{
  color:rgba(255,255,255,.35);
}
input[type="date"]{
  color:#e6edf7;
}

input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(1);
  opacity:.6;
}
.btn.primary{
  height:42px;
  padding:0 20px;
  border-radius:14px;
  font-weight:700;
  background:linear-gradient(180deg,#3b82f6,#2563eb);
  box-shadow:0 8px 24px rgba(37,99,235,.35);
}
.grid.two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  align-items:start;
}
@media (max-width: 900px){
  .grid.two{
    grid-template-columns:1fr;
  }
}
.panel.body{
  padding:20px;
  border-radius:22px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(59,130,246,.08), transparent 40%),
    linear-gradient(180deg,#0f172a,#0b1220);
  border:1px solid rgba(255,255,255,.06);
}
.panel.body h3{
  font-size:15px;
  font-weight:700;
  margin-bottom:10px;
}
.panel.body ul{
  padding-left:18px;
  line-height:1.7;
}

.panel.body li{
  font-size:13px;
}
.ac-body pre{
  background:#0a1020;
  border-radius:14px;
  padding:14px;
  font-size:12px;
  border:1px solid rgba(255,255,255,.08);
}
/* ================= PAGE HEADER ================= */
.page-head{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  margin-bottom:22px;
  position:relative;
}

.page-title{
  max-width:720px;
}

.page-title h1{
  text-align:left;
}

@media (min-width: 900px){
  .page-head{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
  }

  .page-title h1,
  .page-title .subtitle{
    text-align:center;
  }
}

/* accent line biru (reuse token) */
.page-head::after{
  content:'';
  display:block;
  height:3px;
  width:64px;
  border-radius:999px;
  background:linear-gradient(90deg,
    var(--accent, #3b82f6),
    rgba(59,130,246,.3)
  );
  margin:14px auto 0;
}
/* ================= PROGRESS CORE ================= */
.progress{
  margin-top:16px;
}

.progress progress{
  width:100%;
  height:10px;
  border-radius:999px;
  overflow:hidden;
  appearance:none;
}

/* track */
.progress progress::-webkit-progress-bar{
  background:#0a1020;
  border-radius:999px;
}

/* value */
.progress progress::-webkit-progress-value{
  background:linear-gradient(
    90deg,
    #3b82f6,
    #60a5fa
  );
  border-radius:999px;
  transition:width .35s ease;
}

.progress progress::-moz-progress-bar{
  background:linear-gradient(90deg,#3b82f6,#60a5fa);
}
#progText{
  margin-top:8px;
  font-size:12px;
  letter-spacing:.02em;
  color:#93c5fd;
}
/* saat sync berjalan */
.is-running .panel.header{
  box-shadow:
    0 0 0 1px rgba(59,130,246,.25),
    0 20px 60px rgba(37,99,235,.35);
}

/* progress terasa aktif */
.is-running .progress progress::-webkit-progress-value{
  animation:pulseBlue 1.2s ease-in-out infinite alternate;
}

@keyframes pulseBlue{
  from{ filter:brightness(1); }
  to{ filter:brightness(1.25); }
}
.stepper .step{
  font-size:11px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
}

.stepper .step.active{
  background:rgba(59,130,246,.15);
  color:#93c5fd;
  box-shadow:0 0 0 1px rgba(59,130,246,.35);
}
/* ================= DATE INPUT RESET ================= */
input[type="date"]{
  appearance:none;
  -webkit-appearance:none;
  background:linear-gradient(180deg,#0f172a,#0b1220);
  color:#e5e7eb;
  padding-right:12px;   /* hilangkan ruang icon */
}

/* HILANGKAN ICON KALENDER TOTAL */
input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:0;
  display:none;
}

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button{
  display:none;
}
/* ================= TOGGLE DRY-RUN ================= */
.field.checkbox label{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
  font-size:12px;
  color:var(--muted);
}

/* sembunyikan checkbox asli */
.field.checkbox input{
  appearance:none;
  width:42px;
  height:22px;
  border-radius:999px;
  background:#1f2937;
  position:relative;
  cursor:pointer;
  transition:.25s;
  border:1px solid rgba(255,255,255,.08);
}

/* knob */
.field.checkbox input::after{
  content:'';
  position:absolute;
  top:2px;
  left:2px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#9ca3af;
  transition:.25s;
}

/* ON */
.field.checkbox input:checked{
  background:linear-gradient(90deg,#3b82f6,#2563eb);
}

.field.checkbox input:checked::after{
  transform:translateX(20px);
  background:white;
}
/* ================= FIX GRID BEHAVIOR ================= */
.grid.two{
  align-items:stretch;
}

.grid.two > *{
  min-width:0; /* PENTING: cegah overflow */
}
/* ================= ACCORDION FIX ================= */
.ac-body{
  overflow:hidden;
}

.ac-body table{
  width:100%;
  table-layout:fixed;
}

.ac-body th,
.ac-body td{
  word-wrap:break-word;
  white-space:normal;
}
.ac-body pre{
  max-width:100%;
  overflow:auto;
  white-space:pre-wrap;
  word-break:break-word;
}
.panel.header{
  padding:16px 18px;
}

.panel.header .form-row{
  align-items:flex-end;
}
.stepper{
  flex-shrink:0;
}

.stepper .step{
  white-space:nowrap;
}
/* ===== DETAIL PROSES CARD ===== */
.panel.body{
  position:relative;
}

.panel.body::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:22px;
  pointer-events:none;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(59,130,246,.10), transparent 40%);
}
.panel.body h3{
  font-size:15px;
  font-weight:700;
  margin-bottom:14px;
}
.panel.body h4,
.panel.body .section-title{
  margin-top:18px;
  margin-bottom:8px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#93c5fd;
}
.panel.body ul{
  margin:6px 0 14px;
  padding-left:0;
  list-style:none;
}

.panel.body ul li{
  display:flex;
  gap:10px;
  padding:6px 0;
  font-size:13px;
  line-height:1.6;
}

.panel.body ul li::before{
  content:'•';
  color:#60a5fa;
  font-size:16px;
  line-height:1;
}
.panel.body table thead th{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  padding:8px 10px;
}
.panel.body table tbody tr{
  background:rgba(255,255,255,.03);
  border-radius:12px;
}

.panel.body table tbody td{
  padding:10px;
  font-size:13px;
}
.panel.body table td{
  font-variant-numeric: tabular-nums;
}
.panel.body table tbody tr:first-child td:first-child{
  font-weight:700;
  color:#e5e7eb;
}
.panel.body table td.pos{ color:#22c55e; font-weight:700; }
.panel.body table td.neg{ color:#ef4444; font-weight:700; }
.panel.body table td.zero{ color:#9ca3af; }
.panel.body ul li strong{
  color:#e5e7eb;
}
.panel.body .audit,
.panel.body ul:last-of-type{
  margin-top:14px;
  padding-top:14px;
  border-top:1px dashed rgba(255,255,255,.08);
}
/* ================= HERO HEADER ================= */
.page-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  padding:12px 0 24px;
  position:relative;
}

.page-title .badge{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:4px 12px;
  border-radius:999px;
  background:rgba(59,130,246,.15);
  color:#93c5fd;
}

.page-title h1{
  font-size:28px;
  font-weight:800;
  letter-spacing:-0.02em;
  margin:6px 0 2px;
}

.page-title .subtitle{
  font-size:13px;
  color:#94a3b8;
  max-width:520px;
}
.page-head::after{
  content:'';
  width:72px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    rgba(59,130,246,.9),
    rgba(59,130,246,.25)
  );
  margin-top:10px;
}
.stepper{
  display:flex;
  gap:10px;
  margin-top:6px;
}

.stepper .step{
  font-size:11px;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:#94a3b8;
  border:1px solid rgba(255,255,255,.06);
}

.stepper .step.active{
  background:rgba(59,130,246,.18);
  color:#bfdbfe;
  border-color:rgba(59,130,246,.45);
}
.panel.header{
  margin-top:18px;
  padding:16px 18px;
  border-radius:24px;
  background:
    linear-gradient(180deg,#0f172a,#0b1220);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 20px 60px rgba(2,6,23,.6),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.panel.header form{
  display:grid;
  grid-template-columns: 2.2fr 1fr 1fr auto auto;
  gap:14px;
  align-items:end;
}
.panel.header label{
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#64748b;
}
.panel.header select,
.panel.header input{
  height:42px;
  border-radius:16px;
  background:linear-gradient(180deg,#111c33,#0c1529);
  border:1px solid rgba(255,255,255,.08);
  color:#e5e7eb;
  font-size:13px;
  padding:0 14px;
}

.panel.header select:focus,
.panel.header input:focus{
  outline:none;
  border-color:rgba(59,130,246,.6);
  box-shadow:0 0 0 3px rgba(59,130,246,.15);
}
input[type="date"]{
  appearance:none;
  -webkit-appearance:none;
  padding-right:12px;
}

input[type="date"]::-webkit-calendar-picker-indicator{
  display:none;
}
.field.checkbox{
  display:flex;
  align-items:center;
  gap:10px;
}

.field.checkbox label{
  font-size:11px;
  color:#94a3b8;
}

.field.checkbox input{
  appearance:none;
  width:42px;
  height:22px;
  border-radius:999px;
  background:#1f2937;
  border:1px solid rgba(255,255,255,.1);
  position:relative;
  cursor:pointer;
}

.field.checkbox input::after{
  content:'';
  position:absolute;
  top:2px;
  left:2px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#9ca3af;
  transition:.25s;
}

.field.checkbox input:checked{
  background:linear-gradient(90deg,#3b82f6,#2563eb);
}

.field.checkbox input:checked::after{
  transform:translateX(20px);
  background:white;
}
.btn.primary{
  height:42px;
  padding:0 22px;
  border-radius:16px;
  font-weight:700;
  background:linear-gradient(180deg,#3b82f6,#2563eb);
  box-shadow:
    0 10px 30px rgba(37,99,235,.45);
}
/* ===== FIX DATE INPUT DESKTOP ===== */
input[type="date"]{
  appearance:auto;
  -webkit-appearance:auto;
  color-scheme: dark;
}

/* TAMPILKAN KEMBALI ICON DI DESKTOP */
input[type="date"]::-webkit-calendar-picker-indicator{
  display:block;
  filter:invert(1);
  opacity:.85;
  cursor:pointer;
}

/* Mobile tetap aman */
@media (max-width:640px){
  input[type="date"]::-webkit-calendar-picker-indicator{
    opacity:.9;
  }
}
/* ===== HEADER MOBILE FIX ===== */
@media (max-width:768px){
  .page-head{
    padding:8px 0 18px;
  }

  .page-title h1{
    font-size:22px;
    line-height:1.25;
  }

  .page-title .subtitle{
    font-size:12px;
    max-width:90%;
    margin:0 auto;
  }

  .stepper{
    flex-wrap:wrap;
    justify-content:center;
    gap:6px;
  }

  .stepper .step{
    font-size:10px;
    padding:5px 10px;
  }
}
/* ===== TOOLBAR RESPONSIVE ===== */
@media (max-width:1024px){
  .panel.header form{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width:640px){
  .panel.header form{
    grid-template-columns: 1fr;
    gap:12px;
  }

  .panel.header .actions-row{
    justify-content:flex-start;
  }

  .panel.header button{
    width:100%;
  }
}
/* ===== SAFETY NET ===== */
body{
  overflow-x:hidden;
}
/* ===== REMOVE NATIVE DATE ICON (ALL DEVICES) ===== */
input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:0;
  pointer-events:none;
}

input[type="date"]{
  appearance:auto;
  -webkit-appearance:auto;
  color-scheme: dark;
}
/* ===== HEADER MOBILE REFINEMENT ===== */
@media (max-width:768px){

  .page-head{
    align-items:center;
    text-align:center;
    padding:10px 0 18px;
  }

  .page-title{
    align-items:center;
    text-align:center;
  }

  .page-title h1{
    font-size:22px;
    line-height:1.3;
    margin:6px 0 4px;
  }

  .page-title .subtitle{
    font-size:12px;
    max-width:90%;
    margin:0 auto;
  }

  /* stepper rapi di mobile */
  .stepper{
    justify-content:center;
    flex-wrap:wrap;
    gap:6px;
    margin-top:8px;
  }

  .stepper .step{
    font-size:10px;
    padding:5px 10px;
  }
}
/* ===== FORCE CENTER HEADER ON MOBILE ===== */
@media (max-width: 768px) {

  .dashboard .page-head{
    display:flex;
    align-items:center;
    text-align:center;
  }

  .dashboard .page-title{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  .dashboard .page-title h1{
    text-align:center;
    width:100%;
    font-size:22px;
    line-height:1.25;
  }

  .dashboard .page-title .subtitle{
    text-align:center;
    margin:0 auto;
    max-width:90%;
    font-size:12px;
  }
}
/* ===== DATE INPUT: CLEAN & CLICKABLE ===== */
input[type="date"]{
  appearance:auto;
  -webkit-appearance:auto;
  color-scheme: dark;

  /* penting */
  padding-right: 42px; /* ruang untuk icon custom */
}

/* HILANGKAN ICON MERAH-PUTIH (OS GLYPH DEPAN) */
input[type="date"]::-webkit-datetime-edit-fields-wrapper{
  color:#e5e7eb;
}

/* BIARKAN ICON PICKER BELAKANG HIDUP */
input[type="date"]::-webkit-calendar-picker-indicator{
  display:block;
  opacity:0;              /* sembunyikan visual */
  pointer-events:auto;    /* TETAP BISA DIKLIK */
  cursor:pointer;
}

/* ======================================================
   IAM / USER MANAGEMENT — ASTIPA DARK 2026
   Scoped: .iam (AMAN)
====================================================== */

.iam{
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 48px;
}

/* ================= HEADER ================= */

.iam .page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}

.iam .page-title h1{
  font-size:26px;
  font-weight:800;
  letter-spacing:-.02em;
  margin:4px 0 6px;
}

.iam .page-title .subtitle{
  font-size:13px;
  color:var(--muted);
  max-width:520px;
}

/* ================= TOOLBAR ================= */

.iam .toolbar{
  margin-top:14px;
  padding:14px 16px;

  background: var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);

  box-shadow:var(--elev-1);
}

.iam .toolbar .actions-row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* ================= USER TABLE ================= */

.iam .table-wrap{
  margin-top:16px;
  overflow:auto;
}

/* grid kolom IAM */
.iam .table--users .thead,
.iam .table--users .tr{
  display:grid;
  grid-template-columns:
    2fr     /* user */
    1.2fr   /* role */
    1.4fr   /* instansi */
    120px   /* aksi */
  ;
  align-items:center;
}

.iam .table--users .thead{
  font-size:12px;
  letter-spacing:.06em;
  color:var(--muted);
  border-bottom:1px solid var(--border);
}

.iam .table--users .tr{
  border-bottom:1px solid rgba(255,255,255,.05);
}

.iam .table--users .tr:hover{
  background:var(--surface-2);
}

/* cell padding */
.iam .table--users .thead > div,
.iam .table--users .tr > div{
  padding:12px 14px;
  min-width:0;
}

/* ================= USER CELL ================= */

.iam .user-cell strong{
  display:block;
  font-size:14px;
  font-weight:700;
}

.iam .user-cell small{
  display:block;
  margin-top:2px;
  font-size:12.5px;
  color:var(--muted);

  word-break:break-word;
}

/* ================= ROLE BADGE ================= */

.iam .role{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;

  font-size:12px;
  font-weight:700;
  border-radius:999px;

  background:rgba(255,255,255,.06);
}

.iam .role.admin{
  background:rgba(239,68,68,.18);
  color:#fecaca;
}

.iam .role.user{
  background:rgba(59,130,246,.18);
  color:#bfdbfe;
}

/* ================= ACTIONS ================= */

.iam .actions{
  display:flex;
  justify-content:flex-end;
  gap:6px;
}

.iam .actions .btn{
  height:34px;
  padding:0 10px;
  font-size:13px;
}

/* ================= INLINE EDITOR ================= */

.iam-editor{
  margin:12px 0 18px;
  padding:16px 18px;

  background:linear-gradient(
    180deg,
    rgba(255,255,255,.025),
    rgba(255,255,255,.01)
  );

  border:1px solid var(--border);
  border-radius:var(--r-lg);
}

.iam-editor.hidden{
  display:none;
}

.iam-editor h4{
  font-size:14px;
  font-weight:700;
  margin-bottom:12px;
}

/* ================= FORM GRID ================= */

.iam-editor .form-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}

/* ================= FOOT ACTIONS ================= */

.iam-editor .form-actions{
  margin-top:14px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
}

/* ================= MODAL ================= */

.iam .modal{
  position:fixed;
  inset:0;
  z-index:2000;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(2,6,23,.65);
  backdrop-filter: blur(6px);

  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}

.iam .modal.show{
  opacity:1;
  pointer-events:auto;
}

.iam .modal-content{
  width:100%;
  max-width:520px;
  padding:20px 22px;

  background:var(--surface);
  border-radius:var(--r-lg);
  border:1px solid var(--border);

  box-shadow:var(--elev-2);
}

.iam .modal-content h3{
  font-size:16px;
  font-weight:700;
  margin-bottom:12px;
}

/* ================= MOBILE ================= */

@media (max-width: 860px){

  .iam{
    padding:16px 14px 36px;
  }

  .iam .page-head{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  .iam .table--users .thead{
    display:none;
  }

  .iam .table--users .tr{
    display:block;
    margin-bottom:12px;
    border-radius:var(--r-md);
    background:var(--surface);
  }

  .iam .table--users .tr > div{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:8px 12px;
  }

  .iam .table--users .tr > div::before{
    content:attr(data-label);
    font-size:11px;
    color:var(--muted);
  }

  .iam .actions{
    justify-content:flex-start;
  }

  .iam-editor .form-grid{
    grid-template-columns:1fr;
  }
}
/* ======================================================
   ADMIN IAM — ASTIPA DARK (FINAL FIX)
   Scope: .admin-iam
   Drop-in | Safe | Future-proof
====================================================== */

/* ---------- BASE WRAPPER ---------- */

.admin-iam{
  margin-top: 20px;
  padding-bottom: 48px;
}

/* ---------- HEADER ---------- */

.admin-iam .iam-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}

.admin-iam .iam-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:26px;
  font-weight:800;
  letter-spacing:-.02em;
}

.admin-iam .iam-header-text .muted{
  margin-top:4px;
  font-size:13px;
  max-width:560px;
}

/* ---------- SURFACE ---------- */

.admin-iam .iam-surface{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--elev-1);
  overflow:hidden;
}

/* ---------- TABLE GRID ---------- */

.admin-iam .iam-table{
  display:block;
  width:100%;
}

.admin-iam .iam-head,
.admin-iam .iam-row{
  display:grid;
  grid-template-columns:
    2.2fr   /* user */
    2fr     /* email */
    1.8fr   /* instansi */
    1.4fr   /* status */
    1.2fr   /* role */
    1.6fr   /* last login */
  ;
  align-items:center;
}

.admin-iam .iam-head{
  padding:14px 18px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--muted);
  text-transform:uppercase;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.04),
    rgba(255,255,255,.015)
  );
  border-bottom:1px solid var(--border);
}

.admin-iam .iam-row{
  padding:14px 18px;
  cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:background .15s ease;
}

.admin-iam .iam-row:hover{
  background: var(--surface-2);
}

/* ---------- CELLS ---------- */

.admin-iam .user-cell strong{
  display:block;
  font-size:14px;
  font-weight:700;
}

.admin-iam .user-cell small{
  display:block;
  margin-top:2px;
  font-size:12.5px;
  color:var(--muted);
  word-break:break-word;
}

.admin-iam .role-cell{
  font-weight:700;
  text-transform:capitalize;
}

.admin-iam .status-cell{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

/* ---------- STATUS PILLS ---------- */

.admin-iam .pill{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  font-size:12px;
  font-weight:700;
  border-radius:999px;
  background: rgba(255,255,255,.08);
}

.admin-iam .pill.success{
  background: rgba(34,197,94,.18);
  color:#bbf7d0;
}

.admin-iam .pill.warn{
  background: rgba(245,158,11,.22);
  color:#fde68a;
}

/* ---------- INLINE EDITOR ---------- */

.admin-iam .iam-editor{
  padding:18px 20px 20px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.03),
    rgba(255,255,255,.01)
  );
  border-top:1px solid var(--border);
}

.admin-iam .iam-editor.hidden{
  display:none;
}

.admin-iam .iam-form .grid{
  gap:14px;
}

.admin-iam .iam-flags{
  margin-top:14px;
  display:flex;
  gap:18px;
}

.admin-iam .iam-flags label{
  display:flex;
  gap:8px;
  align-items:center;
  font-size:13px;
}

/* ---------- FORM ACTIONS ---------- */

.admin-iam .iam-actions{
  margin-top:18px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

/* ---------- MODAL (IAM ONLY) ---------- */

.modal#modalCreate,
.modal#modalReset{
  position:fixed;
  inset:0;
  z-index:3000;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(2,6,23,.65);
  backdrop-filter: blur(6px);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}

.modal#modalCreate.show,
.modal#modalReset.show{
  opacity:1;
  pointer-events:auto;
}

.modal#modalCreate .modal-glass,
.modal#modalReset .modal-glass{
  width:100%;
  max-width:560px;
  padding:22px 24px;
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--elev-2);
}

.modal#modalCreate .modal-header h3,
.modal#modalReset .modal-header h3{
  font-size:18px;
  font-weight:800;
  margin-bottom:4px;
}

/* ---------- MOBILE ---------- */

@media (max-width: 960px){

  .admin-iam .iam-head{
    display:none;
  }

  .admin-iam .iam-row{
    grid-template-columns:1fr;
    gap:8px;
  }

  .admin-iam .iam-row > div{
    display:flex;
    justify-content:space-between;
    gap:10px;
  }

  .admin-iam .iam-row > div::before{
    content:attr(data-label);
    font-size:11px;
    color:var(--muted);
  }

  .admin-iam .iam-header{
    flex-direction:column;
    align-items:flex-start;
  }

  .admin-iam .iam-actions{
    justify-content:flex-start;
  }
}
/* ======================================================
   FIX DROPDOWN — DARK MODE SOLID
   (GLOBAL, AMAN, TIDAK TRANSPARAN)
====================================================== */

/* dropdown container */
.dropdown-menu{
  background: var(--surface) !important;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);

  box-shadow: var(--elev-2);
  backdrop-filter: none !important;

  padding: 8px;
  min-width: 220px;
  z-index: 4000;
}

/* dropdown item */
.dropdown-menu a{
  display:flex;
  align-items:center;
  gap:10px;

  padding:8px 12px;
  font-size:14px;
  border-radius: var(--r-md);

  color: var(--text);
  background: transparent;

  transition: background .15s ease, color .15s ease;
}

/* hover */
.dropdown-menu a:hover{
  background: var(--surface-2);
  color: var(--text);
}

/* icon */
.dropdown-menu i{
  width:16px;
  height:16px;
  opacity:.9;
}

/* divider (jika ada <hr>) */
.dropdown-menu hr{
  border:0;
  height:1px;
  background: var(--border);
  margin:6px 0;
}
/* ======================================================
   FIX NATIVE SELECT — DARK MODE
   (Chrome / Edge / Firefox safe)
====================================================== */

.admin-iam select{
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border);
}

/* dropdown list background (best effort) */
.admin-iam select option{
  background-color: #0f172a !important; /* surface solid */
  color: #e5e7eb !important;
}

/* selected option */
.admin-iam select option:checked{
  background-color: #1e293b !important;
  color: #ffffff !important;
}

/* hover (Firefox mostly) */
.admin-iam select option:hover{
  background-color: #1e293b !important;
  color: #ffffff !important;
}

/* disabled */
.admin-iam select:disabled{
  opacity: .6;
  cursor: not-allowed;
}

/* remove ugly focus glow */
.admin-iam select:focus{
  outline: none;
  box-shadow: 0 0 0 2px rgba(59,130,246,.35);
}
/* ======================================================
   TYPOGRAPHY POLISH — ADMIN IAM (LEVEL DEWA)
   Dark-only | Inter | Zero layout change
====================================================== */

/* ---------- BASE FONT TUNING ---------- */

.admin-iam{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-feature-settings: "cv02","cv03","cv04","cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- PAGE TITLE ---------- */

.admin-iam .iam-title{
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.admin-iam .iam-header-text .muted{
  font-size: 13.5px;
  letter-spacing: 0.01em;
  color: rgba(203,213,225,.85);
}

/* ---------- TABLE HEADER ---------- */

.admin-iam .iam-head{
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(148,163,184,.85);
}

/* ---------- USER CELL ---------- */

.admin-iam .user-cell strong{
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.admin-iam .user-cell small{
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ---------- TABLE BODY ---------- */

.admin-iam .iam-row{
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* ---------- ROLE TEXT ---------- */

.admin-iam .role-cell{
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ---------- STATUS PILL ---------- */

.admin-iam .pill{
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- FORM LABEL ---------- */

.admin-iam label{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(148,163,184,.9);
}

/* ---------- FORM INPUT ---------- */

.admin-iam input,
.admin-iam select{
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
}

/* ---------- CHECKBOX LABEL ---------- */

.admin-iam .iam-flags label{
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ---------- BUTTON ---------- */

.admin-iam .btn{
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.admin-iam .btn.primary{
  letter-spacing: 0.025em;
}

/* ---------- MODAL TITLE ---------- */

.modal#modalCreate .modal-header h3,
.modal#modalReset .modal-header h3{
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ---------- SMALL META ---------- */

.admin-iam .muted{
  font-weight: 500;
}
/* ================= ROW DEPTH & INTERACTION ================= */

.admin-iam .iam-row{
  position: relative;
  border-radius: 12px;
  margin: 0 8px;
}

.admin-iam .iam-row:hover{
  background:
    linear-gradient(
      180deg,
      rgba(59,130,246,.06),
      rgba(59,130,246,.02)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 8px 20px rgba(0,0,0,.25);
}
/* ================= USER CELL EMPHASIS ================= */

.admin-iam .user-cell strong{
  font-size: 15px;
  font-weight: 750;
}

.admin-iam .user-cell small{
  opacity: .75;
}
/* ================= METADATA SOFTEN ================= */

.admin-iam .iam-row > div:nth-child(2),
.admin-iam .iam-row > div:nth-child(6){
  font-size: 13px;
  color: rgba(148,163,184,.75);
}
/* ================= ROLE SEMANTIC ================= */

.admin-iam .role-cell{
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
}

.admin-iam .role-cell:contains("Admin"){
  background: rgba(239,68,68,.18);
  color: #fecaca;
}

.admin-iam .role-cell:contains("Operator"){
  background: rgba(59,130,246,.18);
  color: #bfdbfe;
}

.admin-iam .role-cell:contains("Viewer"){
  background: rgba(148,163,184,.18);
  color: #e5e7eb;
}
/* ================= STATUS POLISH ================= */

.admin-iam .pill{
  padding: 4px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}

.admin-iam .pill.success{
  background: linear-gradient(
    180deg,
    #16a34a,
    #15803d
  );
  color: #ecfdf5;
}
/* ================= STATUS POLISH ================= */

.admin-iam .pill{
  padding: 4px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}

.admin-iam .pill.success{
  background: linear-gradient(
    180deg,
    #16a34a,
    #15803d
  );
  color: #ecfdf5;
}
/* ================= HEADER POLISH ================= */

.admin-iam .iam-header{
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.admin-iam .iam-header-actions .btn{
  height: 40px;
  padding: 0 18px;
}
/* ================= MODAL SURFACE POLISH ================= */

.modal .modal-glass{
  background:
    radial-gradient(
      120% 120% at 20% 0%,
      rgba(255,255,255,.06),
      rgba(255,255,255,0)
    ),
    var(--surface);
}
/* ================= FORM SECTION ================= */

.modal .form-block h4{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(203,213,225,.9);
  margin-bottom: 10px;
}

.modal .form-block{
  margin-bottom: 22px;
}
/* ================= INPUT / SELECT ================= */

.modal input,
.modal select{
  height: 44px;
  padding: 0 14px;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,.04),
    rgba(255,255,255,.015)
  );

  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;

  font-size: 14px;
  font-weight: 500;
}

.modal input::placeholder{
  color: rgba(148,163,184,.6);
}
/* ================= SELECT DARK MODE ================= */

.modal select{
  color-scheme: dark;
  background-color: #0f172a !important;
  color: #e5e7eb !important;
}

.modal select option{
  background-color: #0f172a !important;
  color: #e5e7eb !important;
}

.modal select option:checked{
  background-color: #1e293b !important;
  color: #ffffff !important;
}
/* ================= FOCUS ================= */

.modal input:focus,
.modal select:focus{
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.25);
}
/* ================= MODAL ACTIONS ================= */

.modal .modal-actions{
  margin-top: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal .btn.primary{
  height: 44px;
  padding: 0 22px;
  font-weight: 700;
}
/* ======================================================
   FONT FALLBACK FIX — ANTI DIAMOND / GLYPH ERROR
====================================================== */

body,
button,
input,
select,
textarea{
  font-family:
    Inter,
    system-ui,
    -apple-system,
    "Segoe UI",
    "Segoe UI Symbol",
    "Apple Color Emoji",
    "Noto Sans Symbols",
    sans-serif;
}
/* ======================================================
   IAM — SAFE GLYPH MODE
====================================================== */

.admin-iam{
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0;
}
/* ===============================
   TYPOGRAPHY HIERARCHY UPGRADE
================================ */

.iam-title{
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.iam-header p{
  font-size: 14px;
  color: var(--muted);
}

.iam-head span{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.iam-row strong{
  font-size: 15px;
  font-weight: 600;
}

.iam-row small{
  font-size: 12px;
  color: var(--muted);
}
/* ===============================
   ROW AS INTERACTIVE CARD
================================ */

.iam-row{
  border-radius: 14px;
  margin: 6px 0;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.02),
      rgba(255,255,255,0)
    );
  transition: 
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.iam-row:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
  background:
    linear-gradient(
      180deg,
      rgba(59,130,246,.08),
      rgba(255,255,255,0)
    );
}
/* ===============================
   STATUS PILL UPGRADE
================================ */

.pill{
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: .08em;
}

.pill.success{
  background: linear-gradient(135deg,#16a34a,#22c55e);
  color: #052e16;
}
/* ===============================
   INLINE EDITOR REFINED
================================ */

.iam-editor{
  background:
    radial-gradient(
      1200px 400px at top,
      rgba(59,130,246,.06),
      transparent
    );
  border-radius: 18px;
  margin: 12px 0 24px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.06);
}
/* ===============================
   BUTTON REBALANCE
================================ */

.btn.primary{
  background: linear-gradient(135deg,#2563eb,#3b82f6);
  box-shadow: 0 8px 24px rgba(37,99,235,.35);
}

.btn.ghost{
  border-color: rgba(255,255,255,.12);
  color: var(--muted);
}

.btn.ghost:hover{
  background: rgba(255,255,255,.06);
  color: var(--text);
}
/* ===============================
   MICRO INTERACTIONS
================================ */

select, input{
  transition: border .15s ease, box-shadow .15s ease;
}

select:focus, input:focus{
  box-shadow: 0 0 0 3px rgba(59,130,246,.25);
}
/* ======================================================
   IAM — MOBILE REFINEMENT (<= 768px)
====================================================== */

@media (max-width: 768px){

  /* ===============================
     HEADER
  ============================== */

  .iam-header{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .iam-header-actions{
    width: 100%;
  }

  .iam-header-actions .btn{
    width: 100%;
    justify-content: center;
  }

  /* ===============================
     TABLE → CARD MODE
  ============================== */

  .iam-head{
    display: none;
  }

  .iam-row{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px;
  }

  .iam-row > div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
  }

  .iam-row > div::before{
    content: attr(data-label);
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
  }

  /* khusus kolom user */
  .user-cell{
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .user-cell::before{
    display: none;
  }

  /* ===============================
     INLINE EDITOR — STACK MODE
  ============================== */

  .iam-editor{
    padding: 16px;
  }

  .iam-editor .grid{
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* ===============================
     CHECKBOX & ACTIONS
  ============================== */

  .iam-flags{
    display: flex;
    gap: 16px;
    margin-top: 8px;
  }

  .iam-actions{
    flex-direction: column;
    gap: 10px;
  }

  .iam-actions .btn{
    width: 100%;
    justify-content: center;
  }

  /* ===============================
     MODAL — FULL WIDTH
  ============================== */

  .modal-glass{
    width: calc(100% - 24px);
    margin: 12px;
    padding: 18px;
    border-radius: 16px;
  }

  .modal-header h3{
    font-size: 18px;
  }

  .modal-body .grid{
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .modal-actions{
    flex-direction: column;
    gap: 10px;
  }

  .modal-actions .btn{
    width: 100%;
    justify-content: center;
  }
}
/* ======================================================
   ADMIN USERS — MOBILE REBUILD
====================================================== */

@media (max-width: 768px){

  /* ===============================
     PAGE SPACING
  ============================== */

  .admin-iam{
    padding-left: 12px;
    padding-right: 12px;
  }

  /* ===============================
     HEADER
  ============================== */

  .iam-header{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .iam-header-actions .btn{
    width: 100%;
    justify-content: center;
  }

  /* ===============================
     TABLE → CARD LIST
  ============================== */

  .iam-head{
    display: none !important;
  }

  .iam-table{
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .iam-row{
    display: block;
    padding: 14px;
    border-radius: 16px;
    cursor: pointer;
  }

  /* ===============================
     USER CARD CONTENT
  ============================== */

  .iam-row > div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 6px 0;
    font-size: 13px;
  }

  .iam-row > div::before{
    content: attr(data-label);
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
  }

  .user-cell{
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .user-cell::before{
    display: none;
  }

  /* ===============================
     EDITOR — FULL STACK
  ============================== */

  .iam-editor{
    margin-top: 8px;
    padding: 14px;
  }

  .iam-editor .grid{
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .iam-flags{
    display: flex;
    gap: 16px;
    margin-top: 8px;
  }

  .iam-actions{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
  }

  .iam-actions .btn{
    width: 100%;
    justify-content: center;
  }

  /* ===============================
     MODAL — MOBILE FRIENDLY
  ============================== */

  .modal-glass{
    width: calc(100% - 20px);
    margin: 10px;
    padding: 16px;
    border-radius: 16px;
  }

  .modal-header h3{
    font-size: 18px;
  }

  .modal-body .grid{
    grid-template-columns: 1fr !important;
  }

  .modal-actions{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .modal-actions .btn{
    width: 100%;
  }
}