/*
 * SUPERERR — tema website publik + panel internal.
 * Navy gelap + electric blue (baris 130 spesifikasi). Bootstrap 5 dipakai untuk
 * grid & komponen dasar; file ini hanya menimpa warna/tipografi supaya tampilan
 * tetap konsisten dan cepat dimuat (vendor lokal, tanpa CDN).
 */

:root {
  --navy-900: #060c17;
  --navy-800: #0b1220;
  --navy-700: #101b2d;
  --navy-600: #17253c;
  --line:     rgba(148, 182, 235, .16);
  --blue:     #2f6bff;
  --blue-2:   #38bdf8;
  --ink:      #e8f0ff;
  --ink-soft: #a8bad6;
  --paper:    #f6f8fc;
  --ok:       #22c55e;
  --warn:     #f59e0b;
  --bad:      #ef4444;
}

html { scroll-behavior: smooth; }

body {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  background: var(--paper);
  color: #16233a;
  -webkit-font-smoothing: antialiased;
}

/* ---------- header publik ---------- */
.su-top {
  background: rgba(6, 12, 23, .92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.su-top .navbar-brand { color: #fff; font-weight: 800; letter-spacing: -.02em; font-size: 1.15rem; }
.su-top .navbar-brand span { color: var(--blue-2); }
.su-top .nav-link { color: #cfdcf5; font-weight: 500; padding: .45rem .85rem; }
.su-top .nav-link:hover, .su-top .nav-link.active { color: #fff; }

/* ---------- hero ---------- */
.su-hero {
  position: relative;
  color: #fff;
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(47, 107, 255, .55), transparent 60%),
    radial-gradient(900px 480px at 95% 10%, rgba(56, 189, 248, .35), transparent 60%),
    linear-gradient(180deg, var(--navy-900), var(--navy-800) 60%, var(--navy-700));
  padding: 6.5rem 0 5.5rem;
  overflow: hidden;
}
.su-hero h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; }
.su-hero p.lead { color: #c9d8f2; font-size: 1.06rem; max-width: 34rem; }
.su-hero .eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue-2); background: rgba(56, 189, 248, .1);
  border: 1px solid rgba(56, 189, 248, .3); border-radius: 999px; padding: .35rem .8rem;
}
.su-hero-mesh {
  position: absolute; inset: auto -10% -45% auto; width: 620px; height: 620px; border-radius: 50%;
  background: conic-gradient(from 180deg, rgba(47,107,255,.25), rgba(56,189,248,.12), transparent 70%);
  filter: blur(8px); opacity: .8;
}

/* ---------- tombol ---------- */
.btn-su {
  background: linear-gradient(180deg, var(--blue), #1d4ed8);
  color: #fff; border: 1px solid rgba(255, 255, 255, .12);
  font-weight: 700; border-radius: .7rem; padding: .68rem 1.25rem;
  box-shadow: 0 10px 24px -12px rgba(47, 107, 255, .9);
}
.btn-su:hover { color: #fff; filter: brightness(1.08); }
.btn-su-ghost {
  color: #eaf1ff; border: 1px solid rgba(174, 205, 255, .35); background: rgba(255, 255, 255, .04);
  font-weight: 600; border-radius: .7rem; padding: .68rem 1.2rem;
}
.btn-su-ghost:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.btn-wa { background: #128c7d; color: #fff; font-weight: 700; border-radius: .7rem; }
.btn-wa:hover { background: #0f7265; color: #fff; }

/* ---------- kartu ---------- */
.su-section { padding: 4.5rem 0; }
.su-section-tight { padding: 3rem 0; }
.su-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; }
.su-kicker { color: var(--blue); font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.su-card {
  background: #fff; border: 1px solid var(--line); border-radius: 1rem; padding: 1.4rem;
  height: 100%; box-shadow: 0 1px 2px rgba(16, 33, 63, .05);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.su-card:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -22px rgba(16, 33, 63, .45); border-color: rgba(47, 107, 255, .35); }
.su-card .ico {
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: .8rem;
  background: rgba(47, 107, 255, .1); color: var(--blue); font-size: 1.2rem; margin-bottom: .9rem;
}
.su-muted { color: #5b6f8c; }
.su-price { font-size: 1.35rem; font-weight: 800; color: #0f1f38; }
.su-price small { font-size: .8rem; font-weight: 600; color: #64769a; }
.su-badge {
  display: inline-block; font-size: .72rem; font-weight: 700; padding: .22rem .55rem;
  border-radius: 999px; background: rgba(47, 107, 255, .1); color: var(--blue);
}

/* ---------- strip statistik & footer ---------- */
.su-stats { background: var(--navy-800); color: #fff; }
.su-stats b { font-size: 1.7rem; font-weight: 800; color: var(--blue-2); display: block; }
.su-footer { background: var(--navy-900); color: #b7c7e2; padding: 3.5rem 0 2rem; }
.su-footer a { color: #cfdcf5; text-decoration: none; }
.su-footer a:hover { color: #fff; }
.su-footer h6 { color: #fff; font-weight: 700; letter-spacing: .02em; }

/* ---------- pengumuman maintenance ---------- */
.su-announce {
  background: linear-gradient(90deg, rgba(245, 158, 11, .16), rgba(245, 158, 11, .05));
  border-bottom: 1px solid rgba(245, 158, 11, .35); color: #7c4a02; font-weight: 600;
  padding: .55rem 0; font-size: .92rem;
}

/* ---------- panel admin ---------- */
.su-admin { background: #f2f5fb; min-height: 100vh; }
.su-side {
  background: var(--navy-800); color: #cfddf5; width: 248px; min-height: 100vh;
  position: sticky; top: 0; padding: 1.2rem .9rem; flex: 0 0 248px;
}
.su-side a {
  display: flex; align-items: center; gap: .7rem; color: #b9c9e6; text-decoration: none;
  padding: .6rem .75rem; border-radius: .6rem; font-weight: 600; font-size: .93rem;
}
.su-side a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.su-side a.active { background: linear-gradient(90deg, rgba(47,107,255,.9), rgba(56,189,248,.5)); color: #fff; }
.su-side .brand { color: #fff; font-weight: 800; letter-spacing: -.02em; margin-bottom: 1rem; display: block; }
/* Judul seksi di sidebar: penanda kelompok, bukan item yang bisa diklik. */
.su-side .su-side-group { margin: .85rem .75rem .15rem; }
.su-side .su-side-group:first-child { margin-top: 0; }
.su-main { flex: 1 1 auto; min-width: 0; }
.su-panel { background: #fff; border: 1px solid var(--line); border-radius: .9rem; }
.su-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: #6c7f9c; }
.su-kpi { background: linear-gradient(160deg, #fff, #f6f9ff); border: 1px solid var(--line); border-radius: .9rem; }
.su-kpi b { font-size: 1.6rem; font-weight: 800; color: #0f1f38; display: block; }
.su-label { font-size: .78rem; font-weight: 700; color: #63769a; text-transform: uppercase; letter-spacing: .05em; }
/* Blok perintah perangkat / balasan: harus terbaca persis seperti yang dikirim. */
.su-commands {
  background: #0b1a2b;
  color: #d7e6ff;
  border-radius: .65rem;
  padding: .85rem 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
  max-height: 22rem;
  overflow: auto;
}

/* ---------- halaman konten CMS ---------- */
.su-prose { max-width: 46rem; }
.su-prose h2 { font-size: 1.4rem; font-weight: 800; margin-top: 1.8rem; }
.su-prose h3 { font-size: 1.12rem; font-weight: 700; margin-top: 1.4rem; }
.su-prose p, .su-prose li { line-height: 1.75; color: #33456a; }
.su-prose a { color: var(--blue); }

/* ---------- catatan di balik ikon tanda seru ---------- */
/* Penjelasan panjang tidak dibuang, hanya dilipat. <details> membuka kotaknya
   saat ikon diklik dan menutupnya saat diklik lagi, jadi tidak perlu JavaScript.
   Kotaknya melayang di atas konten: z-index di atas dropdown Bootstrap (1000)
   tapi di bawah modal (1055) supaya tidak menutupi jendela konfirmasi. */
.su-note { position: relative; display: inline-block; vertical-align: middle; }
.su-note-tombol {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  color: #7b8db0;
  font-size: .95rem;
  line-height: 1;
}
.su-note-tombol::-webkit-details-marker { display: none; }
.su-note-tombol:hover, .su-note[open] > .su-note-tombol { color: var(--blue); background: #eaf1ff; }
.su-note-tombol:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.su-note-kotak {
  position: absolute;
  z-index: 1040;
  top: calc(100% + .4rem);
  left: 0;
  width: min(34rem, 86vw);
  background: #fff;
  border: 1px solid #d9e2f0;
  border-radius: .8rem;
  box-shadow: 0 18px 40px rgba(15, 31, 56, .18);
  padding: .9rem 1rem;
  font-size: .82rem;
  line-height: 1.65;
  color: #33456a;
  text-align: left;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}
.su-note-kanan .su-note-kotak { left: auto; right: 0; }
.su-note-judul { font-weight: 700; color: #0f1f38; margin-bottom: .4rem; }
.su-note-kotak p { margin: 0 0 .5rem; }
.su-note-kotak p:last-child { margin-bottom: 0; }
.su-note-kotak code { font-size: .95em; color: #0f1f38; }

@media (max-width: 575px) {
  /* Layar sempit: kotak ikut aliran dokumen supaya tidak terpotong tepi layar. */
  .su-note { display: block; }
  .su-note-kotak { position: static; width: auto; box-shadow: none; margin-top: .4rem; }
}

@media (max-width: 991px) {
  /* Panel: sidebar turun ke atas, konten jadi kolom penuh. */
  body.su-admin > .d-flex { flex-direction: column; }
  .su-side { width: 100%; min-height: auto; position: static; flex: none; }
  .su-side .d-flex.flex-column { flex-direction: row !important; flex-wrap: wrap; gap: .35rem !important; }
  /* Judul seksi tetap satu baris penuh supaya menu tidak menumpuk di sampingnya. */
  .su-side .su-side-group { width: 100%; margin: .6rem 0 0; }
  .su-main { width: 100%; }
  .su-hero { padding-top: 4rem; }
}