/* REX — tema terinspirasi jurnal.id, diamati 24 September 2026.
   Inter; biru #1565c0; teks #2b2a35; latar putih/cyan; tombol radius 8px.
   Dimuat terakhir agar tema konsisten pada seluruh halaman dan template artikel. */
:root {
  --font-sans: "Inter", "Segoe UI", Arial, sans-serif;
  --font-serif: "Inter", "Segoe UI", Arial, sans-serif;
  --blue-900: #2b2a35;
  --blue-700: #1055a3;
  --blue-600: #1565c0;
  --blue-100: #d5e6ee;
  --blue-50: #edf9fd;
  --cloud: #f7fbfd;
  --navy-950: #2b2a35;
  --navy-900: #2b2a35;
  --navy-800: #1565c0;
  --navy-700: #1565c0;
  --ink: #2b2a35;
  --slate-700: #3f4650;
  --slate-600: #505966;
  --slate-500: #64707d;
  --gold-600: #1565c0;
  --gold-500: #28b3df;
  --gold-400: #b4eaf8;
  --radius: 16px;
  --shadow-card: 0 8px 24px rgba(21,101,192,.07);
  --shadow-photo: 0 16px 40px rgba(35,83,108,.12);
  --shadow-btn: none;
}
body { font-family: var(--font-sans); font-size: 16px; color: var(--ink); line-height: 1.65; }
h1,h2,h3,h4 { color: var(--ink); letter-spacing: -.025em; line-height: 1.25; font-weight: 600; text-wrap: pretty; }
h1 { font-size: clamp(2rem,3.3vw,2.5rem); font-weight: 700; }
h2,.pain-title { font-size: clamp(1.75rem,2.7vw,2rem); }
h3 { font-size: 1.25rem; }
p { color: var(--slate-600); }
a { color: var(--blue-600); }
a:hover { color: var(--blue-700); }
:focus-visible { outline: 3px solid #1565c0; outline-offset: 4px; }
.container { max-width: 1240px; padding-inline: 24px; }
.section { padding-block: 80px; }
.section--cloud { background: var(--cloud); }
.section-head { margin-bottom: 36px; max-width: 800px; }
.section-head p,.lead { font-size: 1rem; line-height: 1.75; }
.eyebrow,.eyebrow--gold { color: #1565c0; letter-spacing: .08em; font-size: .75rem; font-weight: 600; margin-bottom: 12px; }
.slogan,.footer-slogan { font-family: var(--font-sans); font-style: normal; }
.btn { border-radius: 8px; font-family: inherit; font-size: .95rem; font-weight: 600; min-height: 48px; padding: 13px 20px; box-shadow: none; }
.btn:hover { transform: none; }
.btn--blue,.main-nav .nav-cta { background: #1565c0; color: #fff; box-shadow: none; }
.btn--blue:hover,.main-nav .nav-cta:hover { background: #1055a3; color: #fff; }
.btn--outline,.hero .btn--outline { background: #fff; color: #1565c0; border: 1px solid #1565c0; }
.btn--outline:hover,.hero .btn--outline:hover { background: #edf9fd; color: #1055a3; border-color: #1055a3; }
.btn--white { color: #1565c0; background: #fff; }
.btn--white:hover { background: #edf9fd; color: #1055a3; }
.btn--light { border-color: #1565c0; color: #1565c0; background: #fff; }
.btn--light:hover { border-color: #1055a3; color: #1055a3; background: #edf9fd; }
.site-header { background: rgba(255,255,255,.98); border-bottom: 1px solid #e9f0f4; backdrop-filter: blur(12px); }
.site-header.scrolled { box-shadow: 0 4px 16px rgba(35,41,51,.06); }
.header-inner { min-height: 80px; gap: 28px; }
.brand img { width: 140px; height: auto; }
.main-nav a { font-size: .88rem; font-weight: 500; color: #3f4650; }
.main-nav a:hover { background: #edf9fd; color: #1565c0; }
.main-nav a[aria-current="page"] { color: #1565c0; box-shadow: inset 0 -2px 0 #1565c0; }
.main-nav .nav-cta { border-radius: 8px; font-weight: 600; }
.nav-toggle { border-radius: 8px; border-color: #d5e6ee; }
.nav-toggle span { background: #2b2a35; }
.main-nav .sub-menu { border-color: #d5e6ee; box-shadow: var(--shadow-card); }
.main-nav .sub-menu a:hover { background: #edf9fd; color: #1565c0; }
.hero { color: var(--ink); padding-block: 64px 80px; background: radial-gradient(ellipse at 88% 20%,#b7eff8 0,transparent 54%),linear-gradient(180deg,#edfcff 0%,#fff 100%); }
.hero::after { display: none; }
.hero-grid { grid-template-columns: 1.05fr .95fr; gap: 56px; }
.hero h1,.hero h1 span { color: #2b2a35; font-size: clamp(2rem,3.3vw,2.5rem); font-weight: 700; margin-bottom: 20px; }
.hero .lead { color: #505966; font-size: 1rem; max-width: 60ch; }
.hero .slogan { color: #1565c0; font-size: .88rem; margin: 18px 0 24px; }
.badge-pill { color: #205c79; background: #e1f4fc; border: 0; font-size: .78rem; font-weight: 600; padding: 6px 12px; border-radius: 6px; margin-bottom: 16px; }
.hero-actions { gap: 12px; }
.hero-media { position: relative; padding: 16px; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.9); border-radius: 28px; box-shadow: 0 12px 36px rgba(21,101,192,.06); }
.hero-media img { border-radius: 16px; box-shadow: none; aspect-ratio: 4/3; object-fit: cover; }
.hero .check-list li,.check-list li { color: #505966; font-size: .94rem; font-weight: 400; }
.hero .check-list li::before,.check-list li::before { background: transparent; color: #199ccd; border: 1px solid #199ccd; font-weight: 600; }
.grid { gap: 24px; }
.card { border: 1px solid #d5e6ee; border-radius: 18px; padding: 28px; box-shadow: inset 0 0 0 5px #f0faff; }
.card:hover { transform: none; box-shadow: inset 0 0 0 5px #e5f6fd,var(--shadow-card); }
.icon-tile { background: #e8f7fc; border: 1px solid #cfe9f5; color: #1565c0; width: 52px; height: 52px; border-radius: 12px; margin-bottom: 20px; }
.card h3 { font-weight: 600; font-size: 1.2rem; }
.card .ticks li { color: #505966; font-size: .92rem; }
.card .ticks li::before,.card .more,.card .more:hover { color: #1565c0; }
.card .more { font-weight: 600; }
.pain-wrap { gap: 56px; }
.pain-media img { min-height: 0; border-radius: 20px; box-shadow: var(--shadow-photo); }
.garis-emas { background: #28b3df; height: 3px; width: 52px; margin: 20px 0 28px; }
.pain-list li { border: 1px solid #d5e6ee; box-shadow: none; border-radius: 12px; padding: 18px; align-items: flex-start; gap: 16px; }
.pain-list .num { background: #e8f7fc; color: #1565c0; border-radius: 8px; font-weight: 600; width: 32px; height: 32px; }
.pain-list p { font-size: .95rem; color: #3f4650; }
.pain-question { color: #2b2a35; font-weight: 600; }
.pain-answer { color: #505966; font-size: .9rem; }
.step-card,.value-card { min-height: 0; }
.step-num { color: #28b3df; font-size: 2.5rem; font-weight: 600; }
.page-head { background: radial-gradient(ellipse at 88% 0,#c3f1fa,transparent 60%),linear-gradient(180deg,#edfcff,#fff); color: #2b2a35; padding-block: 64px; }
.page-head h1 { color: #2b2a35; }
.page-head .lead { color: #505966; }
.page-head .eyebrow { color: #1565c0; }
.anchor-chips a { border-radius: 8px; color: #1565c0; background: #fff; border-color: #c6dce9; font-weight: 500; }
.anchor-chips a:hover { background: #edf9fd; color: #1055a3; border-color: #1565c0; }
.service-media img,.about-gallery img { border-radius: 16px; box-shadow: var(--shadow-photo); }
.service-fit,.note-card { background: #eff9fd; border-color: #cfe9f5; }
.service-fit { border-left-color: #28b3df; }
.service-fit strong { color: #1565c0; }
.table-wrap { box-shadow: none; border-radius: 12px; }
.table-wrap table th,.prose table th { background: #edf9fd; color: #2b2a35; }
.table-wrap table td:last-child { background: #f7fbfd; color: #1565c0; }
.faq-item { border-radius: 10px; }
.faq-item summary { font-weight: 600; color: #2b2a35; }
.faq-item summary::after { color: #1565c0; }
.form-card,.info-card { border-radius: 16px; box-shadow: 0 8px 28px rgba(21,101,192,.05); }
.field input,.field select,.field textarea { border-radius: 8px; }
.field input:focus,.field select:focus,.field textarea:focus { border-color: #1565c0; box-shadow: 0 0 0 3px rgba(21,101,192,.12); }
.field label,.field-label,.form-section legend { font-weight: 600; color: #2b2a35; }
.form-step { background: #e1f4fc; color: #1565c0; border-radius: 8px; }
.choice-grid .choice:hover,.choice-grid .choice.checked { border-color: #1565c0; background: #edf9fd; color: #2b2a35; }
.choice-grid .choice input { accent-color: #1565c0; }
.contact-grid .info-card { background: #edf9fd; border-color: #d5e6ee; color: #2b2a35; }
.contact-grid .info-card h2,.contact-grid .info-card strong { color: #2b2a35; }
.contact-grid .info-card p,.contact-grid .info-card li { color: #505966; }
.contact-grid .info-card a,.contact-grid .info-card li svg { color: #1565c0; }
.article-card { padding: 0; box-shadow: none; border-radius: 16px; }
.article-card h3 a { color: #2b2a35; }
.article-card h3 a:hover { color: #1565c0; }
.cat-pill { background: #edf9fd; color: #1565c0; font-weight: 600; }
.filter-chips button { border-radius: 8px; font-weight: 500; }
.filter-chips button.active { background: #1565c0; border-color: #1565c0; }
.prose blockquote { background: #edf9fd; border-left-color: #28b3df; }
.quote-band { background: #f1faff; color: #2b2a35; }
.quote-band .mark { color: #28b3df; }
.quote-band p { color: #2b2a35; font-style: normal; font-weight: 500; }
.cta-band { background: radial-gradient(ellipse at 80% 0,#aeeaf8,transparent 60%),linear-gradient(135deg,#eafaff,#f8fdff); }
.cta-band h2 { color: #2b2a35; }
.cta-band p { color: #505966; }
.cta-band .inner { padding-block: 72px; }
.site-footer { background: #fbfbfd; color: #505966; border-top: 1px solid #e7edf2; }
.footer-brand strong,.site-footer h4 { color: #2b2a35; }
.footer-slogan { color: #1565c0; font-size: .85rem; }
.footer-links a,.footer-contact a { color: #505966; }
.footer-links a:hover,.footer-contact a:hover { color: #1565c0; }
.footer-contact svg { color: #1565c0; }
.footer-bottom { border-color: #e0e6ec; }
.wa-float { background: #25b86e; box-shadow: 0 6px 18px rgba(35,41,51,.15); }
.page-404 { background: #edf9fd; color: #505966; }
.page-404 h1 { color: #2b2a35; }
.page-404 .code { color: #1565c0; }
.pricing-copy h1 { font-size: clamp(2rem,3.3vw,2.5rem); }
.starting-price { border: 1px solid #c6dce9; border-top: 4px solid #28b3df; border-radius: 16px; box-shadow: 0 12px 40px rgba(21,101,192,.09); }
.starting-price h2 { font-weight: 600; color: #2b2a35; }
.starting-price-amount { color: #1565c0; }
.starting-price-amount strong { font-weight: 700; }
.starting-price-note { border-color: #d5e6ee; }
#form-harga { scroll-margin-top: 88px; }
@media(min-width:1024px) {
  .main-nav { gap: 14px; }
  .main-nav a { padding: 22px 6px; }
  .main-nav .nav-cta { border-radius: 8px; padding: 12px 18px; margin-left: 8px; }
  .main-nav .sub-menu a:hover { background: #edf9fd; color: #1565c0; }
}
@media(max-width:1023px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-media { max-width: 680px; }
  .main-nav a[aria-current="page"] { background: #edf9fd; box-shadow: none; }
  .main-nav.open .nav-item.open .sub-menu { border-color: #28b3df; }
  .main-nav.open .sub-toggle { color: #1565c0; }
  .main-nav.open .sub-menu a { color: #505966; }
}
@media(max-width:767px) {
  .container { padding-inline: 20px; }
  .header-inner { min-height: 72px; }
  .brand img { width: 126px; }
  .hero,.page-head { padding-block: 40px 48px; }
  .hero h1,.hero h1 span,.page-head h1 { font-size: 2rem; }
  .hero h1 span { display: inline; }
  .hero .lead { font-size: .96rem; }
  .hero-media { padding: 10px; border-radius: 20px; }
  .hero-media img { border-radius: 12px; }
  .section { padding-block: 56px; }
  .section-head { margin-bottom: 28px; }
  .pain-wrap { gap: 28px; }
  .pain-media img { min-height: 0; max-height: 360px; }
  .card { padding: 24px; }
  .article-card { padding: 0; }
  .form-card,.info-card { padding: 24px 20px; }
  .footer-grid { gap: 28px; }
  .starting-price { padding: 24px 20px; }
  .starting-price .btn { font-size: .88rem; }
  .wa-float { width: 48px; height: 48px; right: 12px; bottom: 12px; }
}