/* =========================
   RESET & GLOBAL
========================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: #f8fafc;
  background:#ffffff; 
  color: #1f2937;
  padding-top: 0;
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: #2563eb;
}

a:hover {
  text-decoration: underline;
}

/* =========================
   PAGE HEADER
========================= */
.page-header {
  margin-bottom: 48px;
}

.page-header p {
  max-width: 760px;
  color: var(--text-muted);
}

/* =========================
   INFO BOX (DETAIL TES)
========================= */
.info-box {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 20px;
  text-align: center;
}

.info-box strong {
  display: block;
  margin-bottom: 6px;
}

/* =========================
   BADGE & LIST
========================= */
.badge {
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight:600;
  font-size:12px;
}

.list-clean li {
  margin-bottom:8px;
  color: var(--text-muted);
}

/* =========================
   GALLERY
========================= */
.gallery-item {
  height:180px;
  background:#e5e7eb;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#9ca3af;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px) {
  h1 { font-size: 28px; }
  h2 { font-size: 22px; }

  .grid-4 {
    grid-template-columns: 1fr 1fr;
  }

  .cta {
    padding: 40px 24px;
  }
}

@media (max-width: 600px) {
  header .container {
    flex-direction: column;
    gap: 12px;
  }

  nav {
    flex-wrap: wrap;
    gap: 8px;
  }

  .grid-4 {
    grid-template-columns: 1fr;
  }

  .section {
    margin-bottom: 56px;
  }
}

/* =========================
   NAVBAR
========================= */
header {
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  height: 80px ;
}

header strong {
  color: var(--primary);
}

nav a {
  color: var(--text-main);
  font-weight: 500;
}

nav a.active {
  background: var(--primary-soft);
  color: var(--primary);
}

/* =========================
   SPACING HELPERS
========================= */
.mt-24 { margin-top: 24px; }
.mb-24 { margin-bottom: 24px; }
.mb-48 { margin-bottom: 48px; }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  overflow: visible;

}

/* =========================
   TYPOGRAPHY TUNING
========================= */
h1, h2, h3 {
  color: var(--text-main);
  line-height: 1.25;
}

p, li {
  color: var(--text-muted);
}

ul {
  padding-left: 18px;
}

/* SECTION GENERIC */
.section {
  padding: 96px 0;
}

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 64px;
}

.section-head h2 {
  font-size: 36px;
  margin-bottom: 12px;
}

.section-head p {
  color: #6b7280;
  font-size: 18px;
}

/* WHY SISPOSE */
.why {
  background: #ffffff;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.why-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
  border: 1px solid #eef2f7;
}

.why-card h3 {
  font-size: 20px;
  margin-bottom: 8px;
}

.why-card p {
  color: #6b7280;
  font-size: 16px;
  line-height: 1.6;
}

/* ICON */
.why-card .icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #eff6ff;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
}

/* =========================
   FOOTER
========================= */
.footer {
  background: linear-gradient(180deg, #0b2557, #758db7);
  color: #dbeafe;
  padding-top: 64px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 48px;
  padding-bottom: 48px;
}

/* BRAND */
.footer-brand .brand {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}

.footer-brand strong {
  font-size: 20px;
  color: #ffffff;
}

.footer-brand span {
  font-size: 14px;
  color: #93c5fd;
}

.footer-brand p {
  font-size: 15px;
  line-height: 1.6;
  color: #c7d2fe;
}

.footer-contact p {
  color: #dbeafe;
}

.footer-cta p{
  color: #e0e7ff;
}

/* LINKS */
.footer h4 {
  color: #ffffff;
  margin-bottom: 12px;
  font-size: 16px;
}

.footer-links a {
  display: block;
  color: #c7d2fe;
  font-size: 14px;
  margin-bottom: 8px;
}

/* CONTACT */
.footer-contact p {
  font-size: 14px;
  margin-bottom: 8px;
}

/* SOCIAL */
.social-icons {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.social-icons a {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.footer-cta {
  background: rgba(255,255,255,0.08);
  padding: 14px;
  border-radius: 12px;
  font-size: 13px;
  color: #e0e7ff;
}

/* BOTTOM */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 16px 0;
  text-align: center;
  font-size: 13px;
  color: #93c5fd;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

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

/* =========================
   AUTH (REGISTER & LOGIN)
========================= */

.auth-section{
  min-height: calc(100vh - 72px); /* sesuaikan jika tinggi navbar beda */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 16px;
  background: #f8fafc; /* opsional */
}

.auth-wrap{
  width: min(460px, 100%);
  margin: 0 auto;
}

.auth-card{
  background: #ffffff;
  border: 1px solid rgba(226,232,240,.9);
  border-radius: 20px;
  width: 100%;
  padding: 15px 13px; /* sebelumnya 28px 26px */
  box-shadow: 0 26px 70px rgba(15,23,42,.10);
}

/* header */
.auth-header {
  text-align: center;
  margin-bottom: 22px;
}

.auth-logo {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 26px;
  margin: 0 auto 12px;
}

.auth-header h3 {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.auth-header p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* fields */
.auth-field {
  margin-top: 14px;
}

.auth-label {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #334155;
  margin-bottom: 8px;
}

/* input */
.auth-input {
  width: 100%;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;

  border: 1px solid rgba(148,163,184,.45);
  border-radius: 14px;
  padding: 14px 16px;
  background: #fff;
  outline: none;
}

.auth-input::placeholder {
  color: #94a3b8;
  font-weight: 500;
}

.auth-input:focus {
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}

/* submit */
.auth-submit {
  margin-top: 18px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 14px;
}

/* footer */
.auth-foot {
  text-align: center;
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-muted);
}

.auth-foot a {
  color: var(--primary);
  font-weight: 800;
}

/* =========================
   LOGIN PAGE (SISPOSE)
========================= */
.login-wrap {
  min-height: calc(100vh - 72px);
  background: #f8fafc;
}

.login-grid {
  min-height: calc(100vh - 72px);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}

/* LEFT */
.login-visual {
  background:
    radial-gradient(900px at 20% 20%, rgba(37,99,235,.18), transparent 60%),
    radial-gradient(900px at 80% 80%, rgba(34,197,94,.14), transparent 60%),
    linear-gradient(180deg, #f8fbff, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-visual-inner {
  text-align: center;
}

.login-visual-inner img {
  width: 320px;
  max-width: 90%;
  border-radius: 28px;
  box-shadow: 0 40px 80px rgba(0,0,0,.18);
}

.login-visual-text {
  margin-top: 22px;
}

.login-visual-text strong {
  display: block;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #0f172a;
}

.login-visual-text span {
  font-size: 14px;
  color: #64748b;
}

/* RIGHT */
.login-form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border-radius: 20px;
  padding: 36px 32px;
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 24px 70px rgba(15,23,42,.12);
}

.login-card h1 {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.login-sub {
  margin-top: 6px;
  font-size: 14px;
  color: var(--text-muted);
}

.login-card form {
  margin-top: 26px;
  display: grid;
  gap: 16px;
}

.login-field label {
  font-size: 13px;
  font-weight: 800;
  color: #334155;
  margin-bottom: 6px;
  display: block;
}

.login-field input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.45);
  font-size: 15px;
  font-weight: 600;
}

.login-field input:focus {
  outline: none;
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}

.login-btn {
  margin-top: 6px;
  padding: 14px;
  font-size: 15px;
}

.login-foot {
  margin-top: 18px;
  font-size: 13px;
  text-align: center;
  color: var(--text-muted);
}

.login-foot a {
  color: var(--primary);
  font-weight: 800;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .login-grid {
    grid-template-columns: 1fr;
  }

  .login-visual {
    display: none;
  }

  .login-form {
    padding: 24px;
  }
}


/* =========================
   NAVBAR
========================= */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #e5e7eb;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

/* BRAND */
.nav-brand {
  display: flex;
  flex-direction: column;
}

.nav-brand strong {
  color: #2563eb;
  font-size: 18px;
}

.nav-brand span {
  font-size: 12px;
  color: #6b7280;
}

/* MENU */
.nav-menu {
  display: flex;
  gap: 28px;
}

.nav-menu a {
  font-size: 15px;
  font-weight: 500;
  color: #374151;
  position: relative;
  padding: 6px 0;
}

/* ACTIVE */
.nav-menu a.active {
  color: #2563eb;
  font-weight: 600;
}

.nav-menu a.active::after {
  content: "";
  position: absolute;
  bottom: -18px;
  left: 0;
  width: 100%;
  height: 3px;
  background: #2563eb;
  border-radius: 2px;
}

/* =========================
   TYPOGRAPHY
========================= */
h1 {
  font-size: 36px;
  margin-bottom: 16px;
}

h2 {
  font-size: 26px;
  margin-bottom: 12px;
}

h3 {
  font-size: 20px;
  margin-bottom: 8px;
}

p {
  margin-bottom: 12px;
}

/* =========================
   BUTTON
========================= */
button,
.btn {
  cursor: pointer;
  transition: all 0.2s ease;
}

button:hover,
.btn:hover {
  opacity: 0.9;
}

/* =========================
   CARD
========================= */
.card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

/* =========================
   GRID
========================= */
.grid {
  display: grid;
  gap: 24px;
}

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* =========================
   TABLE
========================= */
table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #e5e7eb;
  padding: 12px;
  text-align: left;
}

thead {
  background: #f1f5f9;
}

/* =========================
   FORM
========================= */
input,
select,
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  margin-bottom: 12px;
}

input:focus,
textarea:focus {
  outline: none;
  border-color: #2563eb;
}

/* =========================
   SECTION HELPER
========================= */
.section {
  margin-bottom: 64px;
}

.container {
  width: 100%;
  max-width: 1400px; /* lebih lebar dari sebelumnya */
  margin: 0 auto;
  padding-left: 48px;
  padding-right: 48px;
}


/* =========================
   COLOR SYSTEM (SISPOSE)
========================= */
:root {
  --primary: #2563eb;
  --primary-soft: #eff6ff;
  --bg-soft: #f8fafc;
  --text-main: #1f2937;
  --text-muted: #6b7280;
}

/* =========================
   SECTION STYLE
========================= */
.section {
  margin-bottom: 80px;
}

.section-soft {
  background: var(--bg-soft);
  padding: 64px 0;
}

/* =========================
   HERO
========================= */

.hero .hero-title {
  font-size: clamp(40px, 3.4vw, 56px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* TEXT */

.hero-text {
  position: relative;
  overflow: visible;
}

.hero-text h1 {
  font-size: clamp(56px, 4.8vw, 72px);
  font-weight: 800; /* NAIKKAN */
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #0f172a;
}

.hero-text p {
  font-size: 18px;
  color: #6b7280;
  line-height: 1.7;
  margin-top: 12px;
  max-width: 560px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 32px;
}

/* =========================
   COLOR SYSTEM (SISPOSE)
========================= */
:root {
  --primary: #2563eb;
  --primary-soft: rgba(37, 99, 235, 0.12);
  --success: #16a34a;

  --bg-soft: #f8fafc;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --line: #e5e7eb;

  --shadow-sm: 0 8px 20px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 18px 40px rgba(15, 23, 42, 0.12);
  --shadow-lg: 0 40px 80px rgba(0, 0, 0, 0.16);

  --radius: 16px;
  --radius-lg: 28px;
}

/* =========================
   RESET & GLOBAL
========================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body { height: 100%; }

body {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg-soft);
  color: var(--text-main);
  line-height: 1.6;
  overflow-x: hidden; /* penting biar full-bleed gak bikin scroll-x */
}

a {
  text-decoration: none;
  color: inherit;
}

ul { padding-left: 18px; }
li, p { color: var(--text-muted); }

h1, h2, h3 {
  color: var(--text-main);
  line-height: 1.2;
}

/* =========================
   CONTAINER (SATU AJA)
========================= */
.container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding-left: 48px;
  padding-right: 48px;
}

/* =========================
   NAVBAR
========================= */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #e5e7eb;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
}

.nav-menu {
  display: flex;
  gap: 2px;
}

.nav-menu a {
  display: inline-flex;
  align-items: center;

  padding: 10px 18px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;

  color: #374151;
  border-radius: 12px;
  text-decoration: none !important;
}

.nav-menu a.active {
  background: #2563eb;
  color: #ffffff;
  font-weight: 600;
}

.nav-menu a::after {
  display: none !important;
}

/* =========================
   BUTTONS
========================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 14px 22px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;

  border: 1px solid transparent;
  transition: transform .08s ease, box-shadow .12s ease, background .18s ease;
  user-select: none;
}

.btn:active { transform: translateY(1px); }

.btn.primary {
  background: #2268ff;
  color: #fff;
  box-shadow: 0 18px 34px rgba(34, 104, 255, 0.22);
}

.btn.primary:hover { background: #1d57d8; }

.btn.outline {
  background: #fff;
  border-color: #2268ff;
  color: #2268ff;
}

.btn.outline:hover { background: rgba(34, 104, 255, 0.06); }

.btn-light {
  background: #ffffff;
  color: var(--primary);
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: 700;
}

.btn-outline-light {
  border: 2px solid rgba(255,255,255,0.55);
  color: #ffffff;
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: 700;
}

/* =========================
   HERO (FULL BLEED)
   - tetap full width walau dibungkus main.container
========================= */
.hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  min-height: min(720px, calc(100vh - 72px));
  padding: 44px 0 72px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(900px at 12% 30%, rgba(37,99,235,.14), transparent 60%),
    radial-gradient(760px at 90% 85%, rgba(34,197,94,.14), transparent 60%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 70%);
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}

.hero-pill {
  display: inline-block;
  background: rgba(127, 177, 252, 0.22);
  color: var(--primary);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.hero-title {
  margin-top: 14px;
  font-size: clamp(34px, 3.1vw, 48px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.hero-title span {
  display: inline-block;
  position: relative;
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-title span::after {
  content: "";
  display: block;
  margin-top: 10px;
  width: 56px;
  height: 4px;
  background: var(--primary);
  border-radius: 4px;
}

.hero-desc {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 560px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 26px;
  flex-wrap: wrap;
}

/* IMAGE */
.hero-visual {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: visible;
}

.hero-visual img {
  width: 100%;
  height: clamp(360px, 42vw, 520px);
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* FLOAT CARD */
.hero-badge-float {
  position: absolute;
  left: 18px;
  bottom: 18px;
  background: #ffffff;
  padding: 14px 18px;
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  display: inline-block;
}

.hero-badge-float strong {
  display: block;
  color: var(--success);
  font-size: 20px;
  font-weight: 900;
}

.hero-badge-float span {
  display: block;
  font-size: 13px;
  color: #6b7280;
}

/* =========================
   SECTION GENERIC
========================= */
.section {
  padding: 84px 0;
}

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}

.section-head h2 {
  font-size: 34px;
  font-weight: 900;
  margin-bottom: 12px;
}

.section-head p {
  color: #6b7280;
  font-size: 16px;
  line-height: 1.7;
}

/* =========================
   GRID + CARD (UMUM)
========================= */
.grid {
  display: grid;
  gap: 24px;
}

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.10);
}

/* =========================
   PAGE HEADER
========================= */
.page-header {
  margin-bottom: 48px;
}

.page-header p {
  max-width: 760px;
  color: var(--text-muted);
}

/* =========================
   INFO BOX (DETAIL TES)
========================= */
.info-box {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
}

.info-box strong {
  display: block;
  margin-bottom: 6px;
  color: var(--text-main);
}

/* =========================
   BADGE & LIST
========================= */
.badge {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
  font-size: 12px;
}

.list-clean li {
  margin-bottom: 8px;
  color: var(--text-muted);
}

/* =========================
   TABLE
========================= */
table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
}

th, td {
  border-bottom: 1px solid var(--line);
  padding: 12px;
  text-align: left;
}

thead {
  background: #f1f5f9;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

/* logo image */
.brand-logo {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  overflow: hidden;
  background: #f1f5f9;
  flex-shrink: 0;
}

.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* text */
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-title {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #0f172a;
}

.brand-sub {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}

/* =========================
   FORM
========================= */
input, select, textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  margin-bottom: 12px;
  background: #fff;
}

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

/* =========================
   GALLERY
========================= */
.gallery-item {
  height: 180px;
  background: #e5e7eb;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
}

/* =========================
   CTA (FULL BLEED)
========================= */
.cta {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  background: linear-gradient(135deg, #2563eb, #0dd2d8);
  padding: 84px 0;
  color: #ffffff;
}

.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.cta-text {
  max-width: 560px;
}

.cta-text h2 {
  font-size: 34px;
  font-weight: 900;
  margin-bottom: 12px;
  color: #ffffff;
}

.cta-text p {
  font-size: 16px;
  color: #dbeafe;
  line-height: 1.7;
}

.cta-action {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* =========================
   FOOTER
========================= */
.footer {
  background: linear-gradient(90deg, #0b2557, #19919a);
  color: #dbeafe;
  padding-top: 64px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 48px;
  padding-bottom: 48px;
}

.footer h4 {
  color: #ffffff;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 900;
}

.footer-links a {
  display: block;
  color: #c7d2fe;
  font-size: 14px;
  margin-bottom: 8px;
}

.footer-contact p {
  font-size: 14px;
  margin-bottom: 8px;
  color: #dbeafe;
}

.social-icons {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.social-icons a {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.footer-cta {
  background: rgba(255,255,255,0.08);
  padding: 14px;
  border-radius: 12px;
  font-size: 13px;
  color: #e0e7ff;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 16px 0;
  text-align: center;
  font-size: 13px;
  color: #93c5fd;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .container { padding-left: 20px; padding-right: 20px; }
  .nav-menu { gap: 14px; }
  .footer-grid { grid-template-columns: 1fr; }
}


.hero .container {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  padding: 56px 24px;
}

/* BADGE */
.hero-badge {
  display: inline-block;
  background: #e0ecff;
  color: #2563eb;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
}

/* IMAGE */
.hero-visual {
  position: relative;
  width: 100%;
  min-height: 460px;
  max-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: 460px;
  border-radius: 28px;
  box-shadow: 0 40px 80px rgba(0,0,0,.18);
}

.hero-badge-float {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: #ffffff;
  padding: 14px 18px;
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0,0,0,.15);
}

.hero-badge-float strong {
  font-size: 20px;
  font-weight: 800;
  color: #16a34a;
}

.hero-badge-float span {
  display: block;
  font-size: 13px;
  color: #6b7280;
}

.hero-pill {
  display: inline-block;
  background: #7fb1fc36;
  color: #2563eb;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
}

.hero-title {
  font-size: clamp(42px, 3.2vw, 56px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #0f172a;
}

.hero-title span {
  display: inline-block;
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-title span::after {
  content: "";
  position: absolute;
  left: 26px;
  bottom: -8px;
  width: 56px;
  height: 4px;
  background: #2563eb;
  border-radius: 4px;
}

.hero-desc {
  margin-top: 16px;
  font-size: 18px;
  line-height: 1.7;
  color: #64748b;
  max-width: 560px;
}


/* FLOAT CARD */
.hero-badge-float {
  position: absolute;
  bottom: -24px;
  left: -24px;
  background: #ffffff;
  padding: 14px 18px;
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.hero-badge-float strong {
  color: #16a34a;
  font-size: 20px;
}

.hero .container {
  max-width: 1320px; /* penting */
}

.hero-badge-float span {
  display: block;
  font-size: 13px;
  color: #6b7280;
}

/* =========================
   BUTTON
========================= */
.btn-primary {
  background: var(--primary);
  color: #fff;
  padding: 12px 22px;
  border-radius: 10px;
}

.btn-outline {
  border: 1px solid var(--primary);
  color: var(--primary);
  padding: 12px 22px;
  border-radius: 10px;
}

/* =========================
   CARD
========================= */
.card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 28px;
}

.card h3 {
  margin-bottom: 8px;
}

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

/* =========================
   CTA
========================= */

.cta {
  background: linear-gradient(135deg, #2563eb, #0dd2d8);
  padding: 96px 0;
  color: #ffffff;
}

.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.cta-text {
  max-width: 520px;
}

.cta-text h2 {
  font-size: 36px;
  margin-bottom: 12px;
  color: #ffffff;
}

.cta-text p {
  font-size: 18px;
  color: #dbeafe;
}

.cta-action {
  display: flex;
  gap: 16px;
}

/* CTA BUTTON */
.btn-light {
  background: #ffffff;
  color: #2563eb;
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: 600;
}

.btn-outline-light {
  border: 2px solid rgba(255,255,255,0.5);
  color: #ffffff;
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: 600;
}



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

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

@media (min-width: 1200px) {
  .hero-visual img {
    height: 620px;
  }
}

@media (min-width: 1400px) {
  .hero-text h1 {
    font-size: 72px;
  }
}

@media (min-width: 1600px) {
  .container {
    max-width: 1600px;
  }
}


/* =========================
   TES (INDEX + DETAIL) - REF UI
========================= */

/* INDEX */
.tes-top{padding:26px 0 70px}

.breadcrumbs{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:var(--muted);
}
.breadcrumbs a{color:var(--primary);font-weight:800}
.breadcrumbs .sep{opacity:.7}

.tes-hero{
  text-align:center;
  margin-top:18px;
  margin-bottom:32px;
}
.tes-pill{
  display:inline-flex;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(37,99,235,.10);
  color:var(--primary);
  font-weight:800;
  font-size:12px;
}
.tes-hero h1{
  margin-top:16px;
  font-size:44px;
  letter-spacing:-.03em;
  line-height:1.12;
}
.tes-hero p{
  margin:10px auto 0;
  max-width:760px;
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
}

.tes-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:28px;
}

/* CARD (warna per theme) */
.tes-card{
  display:flex;
  flex-direction:column;
  padding:22px;
  border-radius:18px;
  border:1px solid rgba(226,232,240,.9);
  box-shadow:0 18px 45px rgba(15,23,42,.06);
  text-decoration:none !important;
  color:inherit;
  min-height:390px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tes-card *{text-decoration:none !important}

.tes-card:hover{
  transform:scale(1.06);
  box-shadow:0 22px 60px rgba(15,23,42,.2);

  .tes-icon{
    transform:scale(1.09);
  }
}

.tes-card-head{display:flex;gap:14px;align-items:flex-start}
.tes-icon{
  width:60px;height:60px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;
  color:#fff;
  flex:0 0 auto;
}
.tes-head-text h3{font-size:32px;letter-spacing:-.02em; font-weight:900;}
.tes-sub{margin-top:2px;color:var(--muted);font-size:15px}

.tes-desc{
  margin-top:10px;
  color:#475569;
  font-size:18px;
  line-height:1.7;
}

.checklist{
  margin-top:12px;
  list-style:none;
  padding-left:0;
  color:#475569;
}
.checklist li{
  position:relative;
  padding-left:22px;
  margin:7px 0;
  font-size:15px;
  line-height:1.55;
}
.checklist li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:1px;
  width:16px;
  height:16px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:900;
  background:rgba(34,197,94,.18);
  color:#16a34a;
}

.tes-card-foot{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:12px;
  border-top:1px solid rgba(226,232,240,.9);
}
.tes-hint{font-size:11px;color:var(--muted)}
.tes-link{
  font-size:12px;
  font-weight:900;
  color:var(--primary);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.tes-link .arr{font-weight:900}

/* theme colors */
.tes-card[data-theme="yellow"]{
  border-color:rgba(250,204,21,.45);
  background:linear-gradient(180deg, rgba(250,204,21,.12) 0%, #ffffff 58%);
}
.tes-card[data-theme="yellow"] .tes-icon{background:#f59e0b}

.tes-card[data-theme="pink"]{
  border-color:rgba(236,72,153,.35);
  background:linear-gradient(180deg, rgba(236,72,153,.10) 0%, #ffffff 58%);
}
.tes-card[data-theme="pink"] .tes-icon{background:#ec4899}

.tes-card[data-theme="blue"]{
  border-color:rgba(59,130,246,.35);
  background:linear-gradient(180deg, rgba(59,130,246,.10) 0%, #ffffff 58%);
}
.tes-card[data-theme="blue"] .tes-icon{background:#2563eb}

.tes-card[data-theme="green"]{
  border-color:rgba(34,197,94,.35);
  background:linear-gradient(180deg, rgba(34,197,94,.10) 0%, #ffffff 58%);
}
.tes-card[data-theme="green"] .tes-icon{background:#16a34a}

/* PROSEDUR */
.tes-guide{
  margin-top:34px;
  border-radius:18px;
  padding:26px;
  background:linear-gradient(90deg, #1d4ed8, #0f766e, #16a34a);
  color:#fff;
  box-shadow:0 22px 60px rgba(15,23,42,.14);
}
.tes-guide-head{display:flex;align-items:center;gap:12px}
.tes-guide-badge{
  width:34px;height:34px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.20);
}
.tes-guide h2{font-size:25px;letter-spacing:-.02em; color: #ffffff;}

.tes-guide-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
}
.guide-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
}
.guide-num{
  width:26px;height:26px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.20);
  font-weight:900;
  font-size:12px;
}
.guide-text{font-size:15px;opacity:.95;color:#ffffff}

/* NOTICE */
.tes-notice{
  margin-top:28px;
  border-radius:18px;
  padding:22px;
  text-align:center;
  background:#fff7ed;
  border:1px solid rgba(251,146,60,.35);
}
.tes-notice h3{
  font-size:19px;
  font-weight:900;
  letter-spacing:-.02em;
}
.tes-notice p{
  margin:10px auto 0;
  max-width:820px;
  color:#6b7280;
  font-size:15px;
  line-height:1.7;
}

.notice-stats{
  margin-top:16px;
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}
.notice-stat{
  min-width:140px;
  background:#fff;
  border:1px solid rgba(226,232,240,.9);
  border-radius:14px;
  padding:12px 14px;
}
.notice-stat strong{
  display:block;
  font-weight:900;
  color:#f97316;
  letter-spacing:-.02em;
}
.notice-stat span{display:block;color:#6b7280;font-size:12px;margin-top:2px}

/* DETAIL (biar aman tetap kepake) */
.btn-sm{padding:10px 14px;border-radius:12px;font-size:13px}

.tes-detail-grid{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:22px;
  align-items:start;
}
.tes-summary-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.tes-h2{font-size:18px;letter-spacing:-.02em}

.tes-mini-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
}
.mini{
  background:#fff;
  border:1px solid rgba(226,232,240,.9);
  border-radius:16px;
  padding:14px 14px;
}
.mini-label{font-weight:800;font-size:13px;color:#334155}
.mini-value{margin-top:6px;color:var(--muted);font-size:14px}

.tes-2col{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.panel{
  background:#fff;
  border:1px solid rgba(226,232,240,.9);
  border-radius:16px;
  padding:16px;
}
.panel-title{font-size:15px;font-weight:900;letter-spacing:-.02em}
.list{margin-top:10px;padding-left:18px;color:var(--muted)}
.list li{margin-bottom:8px}
.tes-standar{margin-top:18px}
.td-strong{font-weight:800}

.tes-aside{position:sticky; top:92px}
.aside-title{font-size:16px;font-weight:900;letter-spacing:-.02em}
.aside-desc{margin-top:8px;color:var(--muted);font-size:14px}
.aside-media{margin-top:14px}
.aside-media img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:16px;
  border:1px solid rgba(226,232,240,.9);
}
.aside-actions{margin-top:14px;display:grid;gap:10px}
.aside-note{margin-top:12px;font-size:12px;color:var(--muted)}

/* RESPONSIVE */
@media (max-width: 1100px){
  .tes-grid{grid-template-columns:1fr}
  .tes-guide-grid{grid-template-columns:1fr}
  .tes-detail-grid{grid-template-columns:1fr}
  .tes-aside{position:static}
}
@media (max-width: 640px){
  .tes-hero h1{font-size:34px}
  .tes-top{padding:18px 0 60px}
  .tes-mini-grid{grid-template-columns:1fr}
  .tes-2col{grid-template-columns:1fr}
}

/* =========================
   TES DETAIL (REF STYLE)
========================= */
.tesd-top{
  padding:26px 0 84px;
  --accent:#2563eb;
  --accentSoft:rgba(37,99,235,.12);
}
.tesd-top[data-theme="yellow"]{--accent:#f59e0b;--accentSoft:rgba(245,158,11,.14)}
.tesd-top[data-theme="pink"]{--accent:#ec4899;--accentSoft:rgba(236,72,153,.12)}
.tesd-top[data-theme="blue"]{--accent:#2563eb;--accentSoft:rgba(37,99,235,.12)}
.tesd-top[data-theme="green"]{--accent:#16a34a;--accentSoft:rgba(22,163,74,.12)}

.tesd-hero{
  text-align:center;
  margin-top:18px;
  margin-bottom:26px;
}
.tesd-pill{
  display:inline-flex;
  padding:8px 14px;
  border-radius:999px;
  background:var(--accentSoft);
  color:var(--accent);
  font-weight:900;
  font-size:12px;
}
.tesd-hero h1{
  margin-top:16px;
  font-size:44px;
  letter-spacing:-.03em;
  line-height:1.12;
}
.tesd-hero p{
  margin:10px auto 0;
  max-width:820px;
  color:var(--muted);
  font-size:13px;
  line-height:1.75;
}

.tesd-meta{
  margin-top:14px;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.tesd-chip{
  font-size:12px;
  font-weight:900;
  color:#0f172a;
  background:rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.08);
  padding:8px 10px;
  border-radius:999px;
}

.tesd-grid{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:22px;
  align-items:start;
}

.tesd-left{display:grid;gap:14px}

.tesd-box{
  background:#fff;
  border:1px solid rgba(226,232,240,.9);
  border-radius:18px;
  padding:18px;
  box-shadow:0 16px 40px rgba(15,23,42,.04);
}

.tesd-box-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.tesd-back{
  font-size:12px;
  font-weight:900;
  color:var(--accent);
  padding:8px 10px;
  border-radius:12px;
  background:var(--accentSoft);
  text-decoration:none !important;
}
.tesd-back:hover{opacity:.95}

.tesd-h2{font-size:16px;font-weight:900;letter-spacing:-.02em}
.tesd-h3{font-size:14px;font-weight:900;letter-spacing:-.02em}

.tesd-steps{
  margin-top:8px;
  padding-left:18px;
  color:#475569;
}
.tesd-steps li{
  margin-bottom:10px;
  font-size:13px;
  line-height:1.7;
}

.tesd-2col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.tesd-list{
  margin-top:10px;
  padding-left:18px;
  color:#475569;
}
.tesd-list li{margin-bottom:8px;font-size:13px;line-height:1.65}

.tesd-aside{position:sticky; top:92px}
.tesd-aside-card{
  background:#fff;
  border:1px solid rgba(226,232,240,.9);
  border-radius:18px;
  padding:18px;
  box-shadow:0 22px 60px rgba(15,23,42,.08);
}

.tesd-aside-top{display:flex;gap:12px;align-items:center}
.tesd-mark{
  width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);
  color:#fff;
  font-weight:900;
}
.tesd-aside-title{font-weight:900;letter-spacing:-.02em}
.tesd-aside-sub{margin-top:2px;color:var(--muted);font-size:12px}

.tesd-aside-meta{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
}
.tesd-mi{
  background:rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.06);
  border-radius:14px;
  padding:10px 10px;
  text-align:center;
}
.tesd-mi span{display:block;color:var(--muted);font-size:11px;font-weight:800}
.tesd-mi strong{display:block;margin-top:4px;font-size:12px;font-weight:900;color:#0f172a}

.tesd-media{margin-top:14px}
.tesd-media img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:16px;
  border:1px solid rgba(226,232,240,.9);
}

.tesd-actions{margin-top:14px;display:grid;gap:10px}
.tesd-note{margin-top:12px;color:var(--muted);font-size:12px}

@media (max-width: 1100px){
  .tesd-grid{grid-template-columns:1fr}
  .tesd-aside{position:static}
}
@media (max-width: 640px){
  .tesd-hero h1{font-size:34px}
  .tesd-2col{grid-template-columns:1fr}
  .tesd-aside-meta{grid-template-columns:1fr}
}

/* =========================
   TENTANG (scale ikut TES)
========================= */
.about-top{
  padding:26px 0 40px;
  background:
    radial-gradient(900px at 14% 0%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(900px at 88% 40%, rgba(34,197,94,.10), transparent 58%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 70%);
  border-bottom:1px solid rgba(226,232,240,.8);
}

.about-hero{margin-bottom:22px}
.about-actions{
  margin-top:18px;
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

/* cards (feel “gede” kayak tes) */
.about-grid{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
.about-card{
  background:#fff;
  border:1px solid rgba(226,232,240,.9);
  border-radius:18px;
  padding:26px;
  box-shadow:0 18px 45px rgba(15,23,42,.06);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.about-card:hover{
  transform:scale(1.03);
  box-shadow:0 22px 60px rgba(15,23,42,.20);
  border-color:rgba(37,99,235,.25);
}
.about-ic{
  width:60px;height:60px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(37,99,235,.10);
  margin-bottom:14px;
  font-size:24px;
}
.about-card h3{font-size:22px;font-weight:900;letter-spacing:-.02em}
.about-card p{margin-top:10px;color:#475569;font-size:15px;line-height:1.75}

.about-section{padding:44px 0 64px}
.about-2col{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:22px;
  align-items:start;
}

.about-box{
  background:#fff;
  border:1px solid rgba(226,232,240,.9);
  border-radius:18px;
  padding:26px;
  box-shadow:0 18px 45px rgba(15,23,42,.06);
}
.about-box h2{font-size:22px;font-weight:900;letter-spacing:-.02em}
.about-muted{margin-top:10px;color:var(--muted);font-size:15px;line-height:1.75}

.steps{margin-top:14px;display:grid;gap:10px}
.step{
  display:flex;
  gap:12px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.06);
}
.step-num{
  width:30px;height:30px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(37,99,235,.14);
  color:var(--primary);
  font-weight:900;
  flex:0 0 auto;
  font-size:12px;
}
.step-title{font-weight:900;font-size:15px}
.step-desc{margin-top:4px;color:#475569;font-size:15px;line-height:1.65}

.about-aside{position:sticky; top:92px}
.about-aside-card{
  background:#fff;
  border:1px solid rgba(226,232,240,.9);
  border-radius:18px;
  padding:26px;
  box-shadow:0 22px 60px rgba(15,23,42,.12);
}

.aside-head{display:flex;gap:12px;align-items:center}
.aside-mark{
  width:52px;height:52px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, #2563eb, #10b981);
  color:#fff;font-weight:900;
}
.aside-title{font-weight:900;letter-spacing:-.02em;font-size:16px}
.aside-sub{margin-top:2px;color:var(--muted);font-size:13px}

.aside-stats{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
}
.aside-stat{
  text-align:center;
  background:rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.06);
  border-radius:16px;
  padding:14px 12px;
}
.aside-stat strong{display:block;font-weight:900;color:#0f172a;font-size:16px}
.aside-stat span{display:block;margin-top:2px;color:var(--muted);font-size:12px}

.aside-note{
  margin-top:12px;
  background:#fff7ed;
  border:1px solid rgba(251,146,60,.35);
  border-radius:16px;
  padding:14px 14px;
  color:#6b7280;
  font-size:13px;
  line-height:1.7;
}
.aside-actions{margin-top:14px;display:grid;gap:10px}

/* CTA */
.about-strip{padding:0 0 80px}
.about-strip-card{
  border-radius:18px;
  padding:26px;
  background:linear-gradient(90deg, #1d4ed8, #0f766e, #16a34a);
  color:#fff;
  box-shadow:0 22px 60px rgba(15,23,42,.14);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.about-strip-card h2{font-size:18px;font-weight:900;letter-spacing:-.02em; color: #ffffff;}
.about-strip-card p{margin-top:6px;opacity:.95;font-size:13px;line-height:1.7;max-width:680px; color: #ffffff;}
.about-strip-actions{display:flex;gap:12px;flex-wrap:wrap}

@media (max-width: 1100px){
  .about-grid{grid-template-columns:1fr}
  .about-2col{grid-template-columns:1fr}
  .about-aside{position:static}
  .about-strip-card{flex-direction:column;align-items:flex-start}
}
@media (max-width: 640px){
  .aside-stats{grid-template-columns:1fr}
}

/* =========================
   STANDAR
========================= */
.std-top{padding:26px 0 84px}

.std-hero{margin-bottom:18px}

/* Toggle Putra/Putri */
.std-switcher{margin-top:8px}
.std-switcher input{position:absolute;opacity:0;pointer-events:none}

.std-toggle{
  width:360px;
  max-width:100%;
  margin:0 auto 22px;
  padding:6px;
  border-radius:14px;
  background:rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.06);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}

.std-tab{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 12px;
  border-radius:12px;
  font-weight:900;
  font-size:14px;
  color:#334155;
  background:transparent;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
.std-tab-ic{opacity:.9}

/* active state */
#std-putra:checked ~ .std-toggle label[for="std-putra"]{
  background:#2563eb;
  color:#fff;
  box-shadow:0 16px 40px rgba(37,99,235,.35);
}
#std-putri:checked ~ .std-toggle label[for="std-putri"]{
  background:#db2777;
  color:#fff;
  box-shadow:0 16px 40px rgba(219,39,119,.35);
}

/* Panels toggle */
.std-panel{display:none}
#std-putra:checked ~ .std-panels .std-panel.putra{display:block}
#std-putri:checked ~ .std-panels .std-panel.putri{display:block}

/* Table Card */
.std-table-card{
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(226,232,240,.9);
  box-shadow:0 18px 55px rgba(15,23,42,.10);
}
.std-table-head{
  padding:18px 20px;
  font-weight:900;
  font-size:22px;
  color:#fff;
}
.std-table-head.putra{
  background:linear-gradient(90deg, #1d4ed8, #2563eb);
}
.std-table-head.putri{
  background:linear-gradient(90deg, #db2777, #c026d3);
}

.std-table-wrap{overflow-x:auto}
.std-table{
  width:100%;
  border-collapse:collapse;
}
.std-table th, .std-table td{
  padding:14px 14px;
  border-bottom:1px solid rgba(226,232,240,.9);
  font-size:13px;
  white-space:nowrap;
}
.std-table thead th{
  background:#f8fafc;
  font-weight:900;
  color:#0f172a;
}
.std-table tbody tr:last-child td{border-bottom:0}

/* Kategori */
.std-cat{
  margin-top:42px;
  text-align:center;
}
.std-cat h2{
  font-size:32px;
  font-weight:900;
  letter-spacing:-.02em;
}
.std-cat p{
  margin-top:10px;
  color:var(--muted);
  font-size:13px;
}
.std-cat-grid{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
}
.std-cat-card{
  text-align:left;
  background:#fff;
  border:1px solid rgba(226,232,240,.9);
  border-radius:16px;
  padding:18px;
  box-shadow:0 16px 40px rgba(15,23,42,.08);
}
.std-sq{
  width:34px;height:34px;border-radius:8px;
  margin-bottom:12px;
}
.std-sq.green{background:#00c853}
.std-sq.blue{background:#2979ff}
.std-sq.yellow{background:#f4b400}
.std-sq.orange{background:#ff6d00}

.std-cat-title{font-weight:900;font-size:16px}
.std-cat-sub{margin-top:8px;color:#475569;font-size:12px}

/* Interpretasi */
.std-interpret{margin-top:28px}
.std-interpret-card{
  border-radius:18px;
  padding:22px;
  background:linear-gradient(90deg, #1d4ed8, #0f766e, #16a34a);
  color:#fff;
  box-shadow:0 22px 60px rgba(15,23,42,.14);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:stretch;
}

.std-int-head{display:flex;align-items:center;gap:12px}
.std-int-ic{
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  font-weight:900;
}

.std-int-left h3{font-size:24px;font-weight:900;letter-spacing:-.02em; color: #ffffff;}

.std-int-desc{
  margin-top:12px;
  font-size:13px;
  line-height:1.8;
  color: #ffffff;
  opacity:.95;
  max-width:520px;
}
.std-int-list li{
  margin-top:12px;
  padding-left:18px;
  color: #ffffff;
  font-size:13px;
  line-height:1.9;
  opacity:.95;
}

.std-kpi-grid{
  height:100%;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
}
.std-kpi{
  border-radius:14px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  padding:16px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
}
.std-kpi strong{
  font-size:30px;
  font-weight:900;
}
.std-kpi span{
  margin-top:6px;
  font-size:12px;
  opacity:.95;
}

/* Responsive */
@media (max-width: 1100px){
  .std-cat-grid{grid-template-columns:repeat(2, 1fr)}
  .std-interpret-card{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .std-cat-grid{grid-template-columns:1fr}
}

/* =========================
   CABANG OLAHRAGA
========================= */
.cabang-top{padding:26px 0 84px}
.cabang-hero{margin-bottom:26px}

.cabang-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}

/* Card */
.cabang-card{
  background:#fff;
  border:1px solid rgba(226,232,240,.9);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 18px 45px rgba(15,23,42,.06);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.cabang-card:hover{
  transform:scale(1.03);
  box-shadow:0 22px 60px rgba(15,23,42,.20);
  border-color:rgba(37,99,235,.25);
}

.cabang-media{
  position:relative;
  height:150px;
  overflow:hidden;
}
.cabang-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.cabang-badge{
  position:absolute;
  top:12px;
  left:12px;
  width:42px;
  height:42px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:900;
  box-shadow:0 18px 40px rgba(15,23,42,.18);
  transition:transform .15s ease;
}
.cabang-card:hover .cabang-badge{transform:scale(1.08)}

.cabang-body{padding:16px 16px 18px}
.cabang-title{
  font-size:18px;
  font-weight:900;
  letter-spacing:-.02em;
}
.cabang-desc{
  margin-top:8px;
  color:var(--muted);
  font-size:12px;
  line-height:1.75;
}

.cabang-label{
  margin-top:10px;
  font-size:12px;
  font-weight:900;
  color:#0f172a;
}

.cabang-needs{
  margin-top:8px;
  padding-left:0;
  list-style:none;
  color:#475569;
}
.cabang-needs li{
  position:relative;
  padding-left:16px;
  margin:6px 0;
  font-size:12px;
  line-height:1.6;
}
.cabang-needs li::before{
  content:"";
  position:absolute;
  left:0;
  top:7px;
  width:6px;
  height:6px;
  border-radius:999px;
  background:var(--cabangAccent);
}

/* Theme accents */
.cabang-card{--cabangAccent:#2563eb}
.cabang-card[data-theme="orange"]{--cabangAccent:#f97316}
.cabang-card[data-theme="green"]{--cabangAccent:#16a34a}
.cabang-card[data-theme="blue"]{--cabangAccent:#2563eb}
.cabang-card[data-theme="amber"]{--cabangAccent:#f59e0b}
.cabang-card[data-theme="pink"]{--cabangAccent:#db2777}
.cabang-card[data-theme="sky"]{--cabangAccent:#0ea5e9}
.cabang-card[data-theme="purple"]{--cabangAccent:#7c3aed}
.cabang-card[data-theme="violet"]{--cabangAccent:#6d28d9}

.cabang-card[data-theme="orange"] .cabang-badge{background:#f97316}
.cabang-card[data-theme="green"] .cabang-badge{background:#16a34a}
.cabang-card[data-theme="blue"] .cabang-badge{background:#2563eb}
.cabang-card[data-theme="amber"] .cabang-badge{background:#f59e0b}
.cabang-card[data-theme="pink"] .cabang-badge{background:#db2777}
.cabang-card[data-theme="sky"] .cabang-badge{background:#0ea5e9}
.cabang-card[data-theme="purple"] .cabang-badge{background:#7c3aed}
.cabang-card[data-theme="violet"] .cabang-badge{background:#6d28d9}

/* CTA strip */
.cabang-cta{margin-top:28px}
.cabang-cta-card{
  border-radius:18px;
  padding:26px;
  background:linear-gradient(90deg, #1d4ed8, #0f766e, #16a34a);
  color:#fff;
  box-shadow:0 22px 60px rgba(15,23,42,.14);
  text-align:center;
}
.cabang-cta-card h2{
  font-size:20px;
  font-weight:900;
  letter-spacing:-.02em;
  color: #ffffff;
}
.cabang-cta-card p{
  margin:10px auto 0;
  max-width:820px;
  font-size:12.5px;
  line-height:1.8;
  opacity:.95;
  color: #ffffff;
}

.cabang-cta-stats{
  margin-top:18px;
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}
.cabang-stat{
  min-width:160px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  padding:14px 16px;
}
.cabang-stat strong{
  display:block;
  font-size:20px;
  font-weight:900;
}
.cabang-stat span{
  display:block;
  margin-top:4px;
  font-size:12px;
  opacity:.95;
}

/* Responsive */
@media (max-width: 1100px){
  .cabang-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width: 640px){
  .cabang-grid{grid-template-columns:1fr}
  .cabang-media{height:160px}
}

/* =========================
   ANALISIS
========================= */
.ana-top{padding:26px 0 90px}
.ana-hero{margin-bottom:24px}

/* stats */
.ana-stats{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  margin-top:8px;
}
.ana-stat{
  border-radius:16px;
  padding:16px;
  color:#fff;
  box-shadow:0 18px 45px rgba(15,23,42,.10);
}
.ana-stat-top{display:flex;gap:12px;align-items:flex-start}
.ana-ic{
  width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.20);
  font-weight:900;
}
.ana-k{font-size:11px;opacity:.95;font-weight:900}
.ana-v{margin-top:4px;font-size:20px;font-weight:900;letter-spacing:-.02em}
.ana-s{margin-top:6px;font-size:11px;opacity:.95}

.ana-stat[data-theme="green"]{background:linear-gradient(90deg,#16a34a,#059669)}
.ana-stat[data-theme="blue"]{background:linear-gradient(90deg,#2563eb,#1d4ed8)}
.ana-stat[data-theme="orange"]{background:linear-gradient(90deg,#f97316,#ea580c)}
.ana-stat[data-theme="purple"]{background:linear-gradient(90deg,#7c3aed,#6d28d9)}

/* charts */
.ana-charts{
  margin-top:18px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.ana-card{
  background:#fff;
  border:1px solid rgba(226,232,240,.9);
  border-radius:16px;
  padding:14px 14px 12px;
  box-shadow:0 18px 45px rgba(15,23,42,.06);
}
.ana-card-head h3{
  font-size:14px;
  font-weight:900;
  letter-spacing:-.02em;
}
.ana-chart{margin-top:10px}
.ana-svg{width:100%;height:auto;display:block}

/* svg styles */
.ana-svg .g{stroke:rgba(148,163,184,.55);stroke-width:1}
.ana-svg .t{font-size:10px;fill:#64748b;font-weight:800}
.ana-svg .lbl{font-size:10px;fill:#64748b;font-weight:800}
.ana-svg .leg{font-size:10px;fill:#64748b;font-weight:800}

.ana-svg .b1{fill:rgba(37,99,235,.95)}
.ana-svg .b2{fill:rgba(148,163,184,.65)}

.ana-svg .rg{fill:none;stroke:rgba(148,163,184,.35);stroke-width:1}
.ana-svg .ax{stroke:rgba(148,163,184,.35);stroke-width:1}
.ana-svg .polyStd{fill:rgba(148,163,184,.20);stroke:rgba(148,163,184,.55);stroke-width:2}
.ana-svg .poly{fill:rgba(37,99,235,.22);stroke:rgba(37,99,235,.80);stroke-width:2}
.ana-svg .rl{font-size:11px;fill:#64748b;font-weight:900}

.ana-radar-leg{
  margin-top:8px;
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:center;
  font-size:11px;
  color:#64748b;
  font-weight:900;
}
.ana-radar-leg .dot{
  width:10px;height:10px;border-radius:999px;
  display:inline-block;
  margin-right:6px;
}
.ana-radar-leg .dot.you{background:rgba(37,99,235,.85)}
.ana-radar-leg .dot.std{background:rgba(148,163,184,.75)}

/* sections */
.ana-sec{
  margin-top:26px;
  text-align:center;
}
.ana-sec h2{
  font-size:28px;
  font-weight:900;
  letter-spacing:-.02em;
}
.ana-sec p{
  margin-top:10px;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.7;
}

/* recommendations */
.ana-recs{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}

.ana-rec{
  background:#fff;
  border:1px solid rgba(226,232,240,.9);
  border-radius:18px;
  padding:18px;
  box-shadow:0 18px 45px rgba(15,23,42,.06);
  text-align:left;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ana-rec:hover{
  transform:scale(1.02);
  box-shadow:0 22px 60px rgba(15,23,42,.16);
  border-color:rgba(37,99,235,.22);
}

.ana-rec-top{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
}

.ana-rank{
  display:inline-flex;
  align-items:center;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(34,197,94,.14);
  color:#16a34a;
  font-weight:900;
  font-size:12px;
  width:max-content;
}

.ana-rec-title{
  margin-top:10px;
  font-size:16px;
  font-weight:900;
  letter-spacing:-.02em;
}
.ana-rec-sub{
  margin-top:6px;
  font-size:13px;
  color:#64748b;
}

.ana-rec-right{display:flex;justify-content:flex-end}

.ana-ring{position:relative;width:92px;height:92px}
.ana-ring svg{transform:rotate(-90deg)}
.ana-ring .ring-bg{
  fill:none;
  stroke:rgba(148,163,184,.32);
  stroke-width:12;
}
.ana-ring .ring-fg{
  fill:none;
  stroke:rgba(37,99,235,.95);
  stroke-width:12;
  stroke-linecap:round;
}
.ana-ring-text{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:#0f172a;
  font-size:16px;
}

.ana-rec-list{
  margin-top:14px;
  padding-left:0;
  list-style:none;
  color:#475569;
}
.ana-rec-list li{
  position:relative;
  padding-left:20px;
  margin:8px 0;
  font-size:13px;
  line-height:1.65;
}
.ana-rec-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:1px;
  width:15px;height:15px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(34,197,94,.18);
  color:#16a34a;
  font-size:10px;
  font-weight:900;
}

.ana-rec-right{display:flex;justify-content:flex-end}
.ana-ring{position:relative;width:90px;height:90px}
.ana-ring svg{transform:rotate(-90deg)}
.ana-ring .ring-bg{
  fill:none;
  stroke:rgba(148,163,184,.35);
  stroke-width:10;
}
.ana-ring .ring-fg{
  fill:none;
  stroke:rgba(37,99,235,.95);
  stroke-width:10;
  stroke-linecap:round;
}
.ana-ring-text{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:#0f172a;
  font-size:14px;
}

/* improve */
.ana-improve-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
  text-align:left;
}
.ana-imp{
  background:#fff;
  border:1px solid rgba(226,232,240,.9);
  border-radius:16px;
  padding:14px;
  box-shadow:0 18px 45px rgba(15,23,42,.06);
}
.ana-imp-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.ana-imp-title{font-size:13px;font-weight:900}
.ana-imp-meta{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:11px;
  color:#64748b;
  font-weight:800;
  text-align:right;
}

.ana-bar{
  margin-top:12px;
  height:8px;
  border-radius:999px;
  background:rgba(148,163,184,.30);
  overflow:hidden;
}
.ana-bar-fill{
  height:100%;
  border-radius:999px;
  background:#ef4444;
}

.ana-note{
  margin-top:12px;
  display:flex;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  background:#fff7ed;
  border:1px solid rgba(251,146,60,.35);
}
.ana-note-ic{width:22px;height:22px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.ana-note-k{font-size:11px;font-weight:900;color:#ea580c}
.ana-note-v{margin-top:2px;font-size:11.5px;color:#6b7280;line-height:1.6}

/* responsive */
@media (max-width: 1100px){
  .ana-stats{grid-template-columns:repeat(2, 1fr)}
  .ana-charts{grid-template-columns:1fr}
  .ana-rec{grid-template-columns:1fr}
  .ana-rec-right{justify-content:flex-start}
  .ana-improve-grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .ana-stats{grid-template-columns:1fr}
}

@media (max-width: 1100px){
  .ana-recs{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width: 640px){
  .ana-recs{grid-template-columns:1fr}
}

/* =========================
   GALERI
========================= */
.gal-top{padding:26px 0 86px}
.gal-hero{margin-bottom:22px}

.gal-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}

.gal-item{
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(226,232,240,.9);
  box-shadow:0 18px 45px rgba(15,23,42,.06);
  transition:transform .15s ease, box-shadow .15s ease;
}
.gal-item:hover{
  transform:scale(1.02);
  box-shadow:0 22px 60px rgba(15,23,42,.16);
}

.gal-item img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}

/* Achievements */
.gal-ach{margin-top:22px}
.gal-ach-card{
  border-radius:18px;
  padding:24px;
  background:linear-gradient(90deg, #1d4ed8, #0f766e, #16a34a);
  color:#fff;
  box-shadow:0 22px 60px rgba(15,23,42,.14);
  text-align:center;
}
.gal-ach-card h2{
  font-size:18px;
  font-weight:900;
  letter-spacing:-.02em;
}

.gal-ach-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}

.gal-ach-stat{
  border-radius:16px;
  padding:16px 14px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
}

.gal-ach-ic{
  width:46px;height:46px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  margin:0 auto 10px;
  font-size:18px;
}

.gal-ach-stat strong{
  display:block;
  font-size:18px;
  font-weight:900;
}
.gal-ach-stat span{
  display:block;
  margin-top:6px;
  font-size:12px;
  opacity:.95;
}

/* Responsive */
@media (max-width: 1100px){
  .gal-grid{grid-template-columns:repeat(2, 1fr)}
  .gal-ach-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width: 640px){
  .gal-grid{grid-template-columns:1fr}
  .gal-item img{height:240px}
  .gal-ach-grid{grid-template-columns:1fr}
}

/* =========================
   KONTAK (SCALE UP - mengikuti referensi)
========================= */
.kontak-top{padding:34px 0 110px}
.kontak-hero{margin-bottom:26px}
.kontak-hero .tes-pill{padding:10px 18px;font-size:13px}
.kontak-hero h1{
  margin-top:18px;
  font-size:clamp(46px, 4.2vw, 64px);
  letter-spacing:-.03em;
  line-height:1.05;
}
.kontak-hero p{
  margin:14px auto 0;
  max-width:860px;
  font-size:16px;
  line-height:1.85;
  color:var(--muted);
}

/* info cards */
.kontak-info{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:22px;
}
.kinfo{
  background:#fff;
  border:1px solid rgba(226,232,240,.9);
  border-radius:18px;
  padding:22px;
  box-shadow:0 22px 60px rgba(15,23,42,.10);
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.kic{
  width:54px;height:54px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:900;
  flex:0 0 auto;
  font-size:18px;
}
.kic-blue{background:#2563eb}
.kic-green{background:#16a34a}
.kic-orange{background:#f97316}
.kic-purple{background:#7c3aed}

.kinfo-title{font-size:16px;font-weight:900;letter-spacing:-.02em}
.kinfo-text{margin-top:10px;font-size:14px;color:#64748b;line-height:1.7}

/* main grid */
.kontak-grid{
  margin-top:22px;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:22px;
  align-items:start;
}

/* form */
.kform{
  background:#fff;
  border:1px solid rgba(226,232,240,.9);
  border-radius:18px;
  padding:24px;
  box-shadow:0 22px 60px rgba(15,23,42,.10);
}
.kform h3{font-size:22px;font-weight:900;letter-spacing:-.02em}

.kfield{margin-top:16px}
.klabel{
  display:block;
  font-size:13px;
  font: weight 800;;
  color:#334155;
  margin-bottom:10px;
}
.kinput{
  width:100%;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* paksa Inter */
  font-size:15px;
  font-weight:600;
  color:#0f172a;

  border:1px solid rgba(148,163,184,.45);
  border-radius:14px;
  padding:14px 16px;
  background:#fff;
  outline:none;

  line-height:1.2;
}
.kinput::placeholder{
  color:#94a3b8;
  font-weight:500;
  opacity:1;
}
.kinput:focus{
  border-color:rgba(37,99,235,.55);
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

.ktextarea{
  min-height:190px;
  resize:vertical;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* biar gak “aneh” */
  line-height:1.65;
}

.krow{
  margin-top:16px;
  display:grid;
  grid-template-columns:1.35fr .65fr; /* email lebih lebar */
  gap:14px;
}
.ksubmit{
  margin-top:18px;
  width:100%;
  padding:14px 16px;
  border-radius:14px;
  font-size:14px;
}

/* right side */
.kside{display:grid;gap:14px}

.ksocial{
  border-radius:18px;
  padding:24px;
  background:linear-gradient(90deg, #1d4ed8, #0f766e, #16a34a);
  color:#fff;
  box-shadow:0 26px 70px rgba(15,23,42,.16);
}
.ksocial h3{font-size:22px;font-weight:900;letter-spacing:-.02em; color: #ffffff;}
.ksocial p{margin-top:10px;font-size:14px;line-height:1.8;opacity:.95; color: #ffffff;}

.ksocial-icons{margin-top:14px;display:flex;gap:12px}
.ksocial-icons a{
  width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-size:16px;
}

.kjoin, .kfaq{
  background:#fff;
  border:1px solid rgba(226,232,240,.9);
  border-radius:18px;
  padding:24px;
  box-shadow:0 22px 60px rgba(15,23,42,.10);
}
.kjoin h3, .kfaq h3{font-size:18px;font-weight:900;letter-spacing:-.02em}
.kjoin p{margin-top:10px;color:#64748b;font-size:14px;line-height:1.8}

.kbullets{
  margin-top:12px;
  padding-left:0;
  list-style:none;
  color:#475569;
}
.kbullets li{
  position:relative;
  padding-left:18px;
  margin:9px 0;
  font-size:14px;
  line-height:1.75;
}
.kbullets li::before{
  content:"•";
  position:absolute;
  left:0;
  top:0;
  color:#2563eb;
  font-weight:900;
}

.kfaq-item{margin-top:14px}
.kfaq-q{font-size:14px;font-weight:900;color:#0f172a}
.kfaq-a{margin-top:8px;font-size:14px;color:#64748b;line-height:1.8}

/* responsive */
@media (max-width: 1100px){
  .kontak-info{grid-template-columns:repeat(2, 1fr)}
  .kontak-grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .kontak-info{grid-template-columns:1fr}
  .krow{grid-template-columns:1fr}
}

/* ===========================
   SISPOSE - tes & UI utilities
   Add/merge this block into public/css/app.css
   =========================== */

:root {
  --accent: #2563eb;
  --muted: #6b7280;
  --card-bg: #ffffff;
  --radius: 10px;
  --transition: 180ms cubic-bezier(.2,.9,.3,1);
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.06);
  --shadow-md: 0 6px 18px rgba(15,23,42,0.08);
}

/* Page container */
.page-container {
  max-width: 1080px;
  margin: 2rem auto;
  padding: 0 1rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #0f172a;
}

/* Header */
.page-header .page-title {
  font-size: 2rem;
  margin: 0 0 .25rem;
  letter-spacing: -0.02em;
}
.page-header .page-lead {
  color: var(--muted);
  margin: 0 0 1.25rem;
}

/* Tests grid */
.tests-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

/* Card */
.test-card {
  list-style: none;
}
.test-card-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none; /* no underline anywhere */
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 1rem;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  border: 1px solid rgba(15,23,42,0.04);
}
.test-card-link:focus,
.test-card-link:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-md);
  outline: none;
}
.test-card-body {
  display: block;
  min-width: 0;
}
.test-card-title {
  margin: 0 0 .25rem;
  font-size: 1.05rem;
  font-weight: 600;
}
.test-card-subtitle {
  margin: 0 0 .5rem;
  color: var(--muted);
  font-size: .92rem;
}
.test-card-excerpt {
  margin: 0;
  color: #374151;
  font-size: .92rem;
}

/* Meta / chevron */
.test-card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
  margin-left: 1rem;
  white-space: nowrap;
  color: var(--muted);
}
.icon-chevron, .breadcrumb-icon, .btn-icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  display: inline-block;
  color: inherit; /* lucide will pick currentColor */
}

/* Lucide icon sizing helpers */
.icon-small { width: 18px; height: 18px; display:inline-block; }
.icon-social { width: 20px; height: 20px; display:inline-block; }
.icon-brand { width: 24px; height: 24px; display:inline-block; }

/* Ensure lucide SVGs inherit color (currentColor) and scale */
i[data-lucide], i[data-lucide] svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

/* Keep Lucide SVGs as outline icons by default (stroke follows color).
   Do NOT force fill to currentColor to avoid solid/filled rendering. */
i[data-lucide] svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  vector-effect: non-scaling-stroke;
}

/* Default sizing for lucide <i> containers so icons always have sensible size
   Individual contexts may override with .icon-small / .icon-social / .icon-brand */
i[data-lucide] {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
}

/* Ensure icons inside colored containers remain visible (use currentColor -> white) */
.kic, .badge-icon, .brand-mark, .cabang-badge, .gal-ach-ic, .tesd-mark, .hero-badge-float .badge-icon {
  color: #fff;
}


/* Test detail */
.test-detail-header .test-detail-title {
  font-size: 1.6rem;
  margin: 0 0 .25rem;
}
.test-detail-subtitle {
  color: var(--muted);
  margin: 0 0 .5rem;
}
.test-detail-body {
  margin-top: 1.25rem;
  line-height: 1.65;
  color: #0f172a;
  font-size: 1rem;
}

/* Buttons */
.btn-primary, .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .85rem;
  border-radius: 8px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-weight: 600;
}
.btn-primary {
  background: var(--accent);
  color: white;
}
.btn-secondary {
  background: #f3f4f6;
  color: #0f172a;
}

/* Breadcrumb */
.breadcrumb {
  margin-bottom: .75rem;
}
.breadcrumb-link {
  color: var(--muted);
  text-decoration: none;
  display: inline-flex;
  gap:.5rem;
  align-items: center;
}

/* Contact form (global helpers) */
.contact-title {
  font-size: 1.5rem;
  margin-bottom: .5rem;
}
.contact-body {
  font-size: 1rem;
  color: var(--muted);
}

/* Inputs & textarea */
input[type="text"], input[type="email"], textarea, select {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size: 1rem;
  padding: .6rem .75rem;
  border-radius: 8px;
  border: 1px solid rgba(15,23,42,0.08);
  background: white;
  color: #0f172a;
  width: 100%;
  box-sizing: border-box;
}
textarea {
  min-height: 120px;
  font-family: inherit; /* ensure not monospace */
  line-height: 1.5;
  resize: vertical;
}
input::placeholder, textarea::placeholder {
  color: rgba(15,23,42,0.35);
}

/* Contact grid: Email wider than Telepon */
.contact-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: .75rem;
}

/* Accessibility & responsive tweaks */
@media (max-width:640px) {
  .tests-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

/* Small utilities */
.hidden { display: none !important; }
.text-muted { color: var(--muted); }

/* =========================
   GLOBAL PAGE FADE
========================= */
.page-fade {
  animation: pageFadeIn .45s ease-out both;
}

@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================
   STAGGER (DELAY ONLY - AMAN UNTUK HOVER TRANSFORM)
========================= */
.stagger > * {
  --delay: 0ms;
  transition-delay: var(--delay);
}

/* Anda bisa tambah sampai 12 kalau grid Anda banyak */
.stagger > *:nth-child(1)  { --delay: .06s; }
.stagger > *:nth-child(2)  { --delay: .12s; }
.stagger > *:nth-child(3)  { --delay: .18s; }
.stagger > *:nth-child(4)  { --delay: .24s; }
.stagger > *:nth-child(5)  { --delay: .30s; }
.stagger > *:nth-child(6)  { --delay: .36s; }
.stagger > *:nth-child(7)  { --delay: .42s; }
.stagger > *:nth-child(8)  { --delay: .48s; }

/* =========================
   GLOBAL SCROLL ANIMATION
========================= */

/* default state */
.fade-up,
.fade-down,
.fade-left,
.fade-right,
.fade-scale {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s ease,
    transform 0.6s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}

/* variations */
.fade-down  { transform: translateY(-18px); }
.fade-left  { transform: translateX(24px); }
.fade-right { transform: translateX(-24px); }
.fade-scale { transform: scale(.96); }

/* active state */
.in-view {
  opacity: 1;
  transform: none;
}

/* reduce motion (accessibility) */
@media (prefers-reduced-motion: reduce) {
  .fade-up,
  .fade-down,
  .fade-left,
  .fade-right,
  .fade-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================
   MOBILE NAV FIX (override)
   taruh PALING BAWAH app.css
========================= */

.nav-inner{ position:relative; }

/* toggle default hidden di desktop */
.nav-toggle{
  display:none;
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:12px;
  width:42px;
  height:42px;
  padding:0;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.nav-toggle-bar{
  display:block;
  width:18px;
  height:2px;
  background:#111827;
  border-radius:999px;
}

/* panel desktop tetap seperti biasa (pakai style kamu), jadi jangan diubah di sini */
.nav-panel{ display:flex; align-items:center; gap:14px; }
.nav-auth{ display:flex; align-items:center; }

/* backdrop default off */
.nav-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.35);
  z-index:90;
}

/* ===== MOBILE ===== */
@media (max-width: 768px){

  /* penting: jangan kunci tinggi header (punya kamu 72px) */
  .nav-inner{
    height:auto;           /* override height:72px */
    padding:10px 0;
    flex-wrap:nowrap;      /* biar toggle gak turun ke tengah */
    gap:10px;
  }

  /* brand jadi fleksibel, toggle selalu di kanan */
  .brand{ flex:1 1 auto; min-width:0; }
  .nav-toggle{
    display:inline-flex;
    flex:0 0 auto;
    margin-left:auto;
  }

  /* panel jadi dropdown card (ABSOLUTE) */
  .nav-panel{
    display:none;                 /* hidden default */
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    right:0;
    z-index:101;

    flex-direction:column;
    align-items:stretch;
    gap:10px;

    background:#fff;             /* solid (tidak tembus) */
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:12px;
    box-shadow:0 20px 45px rgba(2,6,23,.12);

    max-height: calc(100vh - 110px);
    overflow:auto;
  }

  /* kalau open */
  .navbar.nav-open .nav-panel{ display:flex; }
  .navbar.nav-open .nav-backdrop{ display:block; }

  /* menu jadi vertical */
  .nav-menu{
    flex-direction:column;
    gap:8px;
  }
  .nav-menu a{
    padding:10px 12px;
    border-radius:12px;
    background:rgba(17,24,39,.04);
  }

  /* active underline versi desktop itu ganggu di mobile */
  .nav-menu a.active::after{
    bottom:0;
    height:2px;
  }

  .nav-auth .btn{
    width:100%;
    display:inline-flex;
    justify-content:center;
  }

  /* optional: kecilkan sub title agar rapi */
  .brand-sub{ display:none; }
  
  /* Toggle titik tiga */
    .nav-toggle--dots{
      font-size: 22px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: 2px;
      color: #111827;
    }
    
    /* kalau sebelumnya pakai span bar, biar gak ganggu */
    .nav-toggle--dots .nav-toggle-bar{ display:none !important; }
    
    .navbar.nav-open .nav-toggle--dots{
      background: rgba(37,99,235,.08);
      border-color: rgba(37,99,235,.35);
      color: #2563eb;
}

}

@media (max-width: 768px){
  /* pastikan brand tetap rapih: logo + teks sejajar */
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
  }

  .brand-logo{
    flex:0 0 auto;
  }

  .brand-text{
    display:flex;
    flex-direction:column;
    justify-content:center;
    line-height:1.1;
  }

  /* JANGAN sembunyikan sub kalau bikin layout jelek */
  .brand-sub{ display:block; }  /* kalau kamu sebelumnya display:none */
}

@media (max-width: 768px){
  .nav-inner{
    position: relative;
    height: auto;          /* override height 72px jika ada */
    padding: 10px 0;
  }

  /* kasih ruang agar brand tidak ketimpa tombol */
  .brand{
    padding-right: 56px;   /* sesuaikan 56-70px kalau perlu */
    min-width: 0;
  }

  /* tombol ⋮ benar-benar nempel kanan atas */
  .nav-toggle.nav-toggle--dots{
    position: absolute;
    right: 9px;
    top: 10px;            /* naik-turun di sini */
    z-index: 9999;        /* biar pasti di atas logo */
    transform: none;      /* matikan translate lama kalau ada */
  }
}