/* =========================================================
   Legalitas Prima — Design System
   Typhography : Playfair Display (heading) / Inter (body)
   Palette     : Navy #0A1F44 / Gold #C9A05C
   ========================================================= */

:root{
  --primary:#0A1F44;
  --primary-dark:#071630;
  --bg:#FFFFFF;
  --text:#1A1A1A;
  --accent:#C9A05C;
  --accent-dark:#AD8542;
  --accent-light:#E8D3AC;
  --highlight:#14A876;
  --highlight-dark:#0E7A57;
  --highlight-alt:#6D5DFC;
  --highlight-warm:#FF7A45;
  --neutral-light:#F5F6F8;
  --neutral-text:#6B7280;

  --font-heading:'Playfair Display', serif;
  --font-body:'Inter', sans-serif;

  --radius-card:14px;
  --radius-btn:8px;
  --shadow-card:0 4px 12px rgba(10,31,68,0.08);
  --shadow-card-hover:0 12px 28px rgba(10,31,68,0.14);

  --space-1:4px;
  --space-2:8px;
  --space-3:16px;
  --space-4:24px;
  --space-5:32px;
  --space-6:48px;
  --space-7:64px;
  --space-8:96px;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  color:var(--primary);
  font-weight:600;
  letter-spacing:-0.01em;
}

h1{font-size:clamp(2rem,4vw,3rem);}
h2{font-size:clamp(1.6rem,3vw,2.25rem);}
h3{font-size:1.5rem;}

.text-accent{color:var(--accent-dark);}
.text-muted-custom{color:var(--neutral-text);}
.bg-neutral{background:var(--neutral-light);}
.bg-primary-custom{background:var(--primary);}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-body);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-dark);
  background:rgba(201,160,92,.14);
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:var(--space-3);
}

.eyebrow::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  display:inline-block;
}

.section{padding:var(--space-8) 0;}
.section-sm{padding:var(--space-7) 0;}

/* ---------- Navbar ---------- */
.navbar-legalitas{
  padding:14px 0;
  background:rgba(7,22,48,.45);
  transition:background .3s ease, box-shadow .25s ease, padding .25s ease;
  border-bottom:1px solid transparent;
}
.navbar-legalitas.scrolled{
  background:rgba(7,22,48,.96);
  box-shadow:0 2px 18px rgba(10,31,68,.25);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:8px 0;
}
.navbar-legalitas .navbar-brand{
  font-family:var(--font-heading);
  font-weight:700;
  color:#fff;
  font-size:1.25rem;
  display:flex;align-items:center;gap:10px;
  text-shadow:0 1px 6px rgba(0,0,0,.55);
}
.navbar-legalitas .navbar-brand .brand-mark{
  width:38px;height:38px;border-radius:10px;
  background:transparent;
  border:1.5px solid var(--accent);
  display:flex;align-items:center;justify-content:center;
  color:var(--accent);
  font-size:1.1rem;
}
.navbar-legalitas .nav-link{
  font-weight:500;
  color:rgba(255,255,255,.9);
  margin:0 6px;
  position:relative;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.navbar-legalitas .nav-link.active,
.navbar-legalitas .nav-link:hover{color:#fff;}
.navbar-legalitas .nav-link.active::after{
  content:"";
  position:absolute;left:8px;right:8px;bottom:-2px;height:2px;
  background:var(--accent);
  border-radius:2px;
}

/* Offcanvas mobile menu — dark panel so the white nav-link text above stays readable */
.navbar-legalitas .offcanvas{
  background:var(--primary-dark);
  color:#fff;
}
.navbar-legalitas .offcanvas-header{
  border-bottom:1px solid rgba(255,255,255,.1);
}
.navbar-legalitas .offcanvas-title{
  color:#fff;
  font-family:var(--font-heading);
}
.navbar-legalitas .offcanvas .btn-close{
  filter:invert(1) grayscale(100%) brightness(200%);
  opacity:.85;
}
.navbar-legalitas .offcanvas .nav-link{
  text-shadow:none;
  padding:12px 4px;
  border-bottom:1px solid rgba(255,255,255,.06);
  margin:0;
}
.navbar-legalitas .offcanvas .nav-link.active,
.navbar-legalitas .offcanvas .nav-link:hover{color:var(--accent);}
.navbar-legalitas .offcanvas .nav-link.active::after{display:none;}

.navbar-legalitas .navbar-toggler{
  border:none;
  box-shadow:none !important;
}
.navbar-legalitas .navbar-toggler i{
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}

/* ---------- Buttons ---------- */
.btn-accent{
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  color:var(--primary);
  border:none;
  font-weight:600;
  border-radius:var(--radius-btn);
  padding:12px 26px;
  transition:all .2s ease;
}
.btn-accent:hover{background:linear-gradient(135deg, var(--accent-dark) 0%, var(--accent-dark) 100%);color:#fff;transform:translateY(-1px);}

.btn-outline-navy{
  background:transparent;
  color:var(--primary);
  border:1.5px solid var(--primary);
  font-weight:600;
  border-radius:var(--radius-btn);
  padding:11px 26px;
  transition:all .2s ease;
}
.btn-outline-navy:hover{background:var(--primary);color:#fff;}

.btn-ghost{
  background:none;border:none;color:var(--primary);
  font-weight:600;padding:0;
  border-bottom:1px solid transparent;
}
.btn-ghost:hover{border-bottom-color:var(--primary);}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:calc(var(--space-8) + 40px) 0 var(--space-7);
  background:
    linear-gradient(120deg, rgba(7,22,48,.92) 0%, rgba(10,31,68,.75) 55%, rgba(10,31,68,.55) 100%),
    url('https://images.unsplash.com/photo-1449824913935-59a10b8d2000?auto=format&fit=crop&w=1600&q=60') center/cover no-repeat;
  color:#fff;
  overflow:hidden;
}
.hero h1{color:#fff;}
.hero p{color:rgba(255,255,255,.78);}

.hero .stamp{
  position:absolute;
  width:230px;height:230px;
  right:-40px;top:60px;
  border:none;
  display:flex;align-items:center;justify-content:center;
  gap:14px;
}
.hero .stamp-inner{
  width:64px;height:64px;border-radius:14px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;
  backdrop-filter:blur(6px);
  box-shadow:0 20px 40px rgba(0,0,0,.25);
}
.hero .stamp-inner.is-accent{
  background:var(--accent);
  color:var(--primary);
  border:none;
  transform:translateY(-14px);
}
.hero .stamp-inner span{font-size:.62rem;letter-spacing:.12em;opacity:.75;}

.hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--space-4);}
.hero-badge{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.15);
  border-radius:10px;
  padding:8px 14px;font-size:.85rem;color:rgba(255,255,255,.85);
  display:flex;align-items:center;gap:8px;
}
.hero-badge i{color:var(--accent);}

.hero-icons-row{
  display:flex;
  gap:18px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:var(--space-6);
}

/* ---------- Cards ---------- */
.card-custom{
  background:#fff;
  border:1px solid #eef0f3;
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  padding:var(--space-4);
  transition:transform .25s ease, box-shadow .25s ease;
  height:100%;
}
.card-custom:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);}

.icon-tile{
  width:52px;height:52px;border-radius:12px;
  background:rgba(201,160,92,.16);
  color:var(--accent-dark);
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;
  margin-bottom:var(--space-3);
}

/* Image-based solution cards, icon badge overlaps the photo */
.solution-card{
  background:#fff;
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
  height:100%;
}
.solution-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);}
.solution-card .solution-media{
  position:relative;
  height:180px;
  background-size:cover;
  background-position:center;
}
.solution-card .solution-icon{
  position:absolute;
  right:16px;bottom:-22px;
  width:48px;height:48px;border-radius:50%;
  background:var(--primary);
  color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;
  box-shadow:0 8px 18px rgba(10,31,68,.35);
}
.solution-card .solution-icon.is-accent{background:var(--accent);color:var(--primary);}
.solution-card .solution-body{padding:var(--space-4);padding-top:calc(var(--space-4) + 8px);}

.service-card .badge-popular{
  position:absolute;top:16px;right:16px;
  background:var(--accent);color:var(--primary);
  font-size:.7rem;font-weight:700;letter-spacing:.03em;
  padding:5px 12px;border-radius:999px;
}
.service-card{position:relative;}
.service-price{
  font-family:var(--font-heading);
  color:var(--primary);
  font-size:1.4rem;font-weight:700;
}
.service-price small{
  font-family:var(--font-body);font-weight:400;
  font-size:.8rem;color:var(--neutral-text);
}

/* ---------- Stats ---------- */
.stat-block{text-align:center;}
.stat-number{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:clamp(2rem,4vw,2.75rem);
  color:var(--primary);
}
.stat-number .plus{color:var(--accent-dark);}
.stat-label{color:var(--neutral-text);font-size:.9rem;}

/* ---------- Cara Kerja (process – order matters, numbering justified) ---------- */
.process-track{
  position:relative;
}
.process-track::before{
  content:"";
  position:absolute;top:26px;left:0;right:0;height:2px;
  background:repeating-linear-gradient(90deg,#dfe3ea 0 8px, transparent 8px 16px);
  z-index:0;
}
.process-step{position:relative;z-index:1;text-align:center;}
.process-step .step-num{
  width:52px;height:52px;border-radius:50%;
  background:var(--neutral-light);
  color:var(--primary);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);font-weight:700;
  margin:0 auto var(--space-3);
  border:4px solid #fff;
  box-shadow:0 0 0 2px #dfe3ea;
}
.process-step:nth-child(4n+1) .step-num,
.process-step:last-child .step-num{background:var(--accent);color:var(--primary);}

/* ---------- Testimonials ---------- */
.testimonial-card{
  background:var(--neutral-light);
  border-radius:var(--radius-card);
  padding:var(--space-5);
  height:100%;
}
.testimonial-card .quote-mark{
  font-family:var(--font-heading);
  font-size:3rem;color:var(--accent);
  line-height:1;display:block;margin-bottom:8px;
}
.testimonial-stars i{color:var(--accent-dark);font-size:.85rem;}

/* ---------- Accordion (FAQ) ---------- */
.accordion-custom .accordion-item{
  border:none;border-bottom:1px solid #e8eaee;
  background:transparent;
}
.accordion-custom .accordion-button{
  font-family:var(--font-heading);font-weight:600;
  color:var(--primary);background:transparent;
  padding:var(--space-4) 0;box-shadow:none;
}
.accordion-custom .accordion-button:not(.collapsed){color:var(--accent-dark);}
.accordion-custom .accordion-button::after{filter:none;}
.accordion-custom .accordion-body{padding:0 0 var(--space-4);color:var(--neutral-text);}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius:24px;
  padding:var(--space-6) var(--space-5);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.cta-band::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 100% 0%, rgba(201,160,92,.22), transparent 55%);
  pointer-events:none;   /* biar nggak nge-block klik ke konten di atasnya */
  z-index:0;
}
.cta-band h2{color:#fff;}
.cta-band p{color:rgba(255,255,255,.75);}
.cta-band > *{position:relative;z-index:1;}

/* ---------- Consultation form panel (dark navy, matches reference) ---------- */
.consult-panel{
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius:var(--radius-card);
  padding:var(--space-5);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.consult-panel::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 100% 0%, rgba(201,160,92,.2), transparent 55%);
  pointer-events:none;
}
.consult-panel h2, .consult-panel h3{color:#fff;position:relative;z-index:1;}
.consult-panel form{position:relative;z-index:1;}
.consult-panel .form-control-custom{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
}
.consult-panel .form-control-custom::placeholder{color:rgba(255,255,255,.55);}
.consult-panel .form-control-custom:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(201,160,92,.25);
}

/* ---------- Footer ---------- */
footer.site-footer{
  background:var(--primary-dark);
  color:rgba(255,255,255,.75);
  padding:var(--space-7) 0 var(--space-4);
}
footer.site-footer h6{color:#fff;font-family:var(--font-heading);margin-bottom:var(--space-3);}
footer.site-footer a{color:rgba(255,255,255,.65);text-decoration:none;}
footer.site-footer a:hover{color:var(--accent);}
footer.site-footer .social-icon{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  color:#fff;transition:.2s;
}
footer.site-footer .social-icon:hover{background:var(--accent);color:var(--primary);}
footer.site-footer .footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:var(--space-6);padding-top:var(--space-4);
  font-size:.85rem;
}

/* ---------- Floating WhatsApp ---------- */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:1050;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;box-shadow:0 8px 24px rgba(37,211,102,.45);
  transition:transform .2s ease;
}
.wa-float:hover{transform:scale(1.08);color:#fff;}
.wa-float .wa-ping{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid #25D366;
  animation:ping 2.4s ease-out infinite;
}
@keyframes ping{
  0%{transform:scale(1);opacity:.7;}
  100%{transform:scale(1.7);opacity:0;}
}

/* ---------- Scroll to top ---------- */
.scrolltop-btn{
  position:fixed;right:22px;bottom:90px;z-index:1050;
  width:42px;height:42px;border-radius:50%;
  background:var(--primary);color:#fff;border:none;
  display:none;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(10,31,68,.3);
}
.scrolltop-btn.show{display:flex;}

/* ---------- Page header (inner pages) ---------- */
.page-header{
  background:var(--neutral-light);
  padding:calc(var(--space-7) + 20px) 0 var(--space-6);
}
.breadcrumb-custom{font-size:.9rem;color:var(--neutral-text);}
.breadcrumb-custom a{color:var(--neutral-text);text-decoration:none;}
.breadcrumb-custom a:hover{color:var(--primary);}
.breadcrumb-custom .current{color:var(--primary);font-weight:600;}

/* ---------- Content banner (Artikel / Edukasi header) ---------- */
.content-banner{
  background:var(--neutral-light);
  padding:calc(var(--space-7) + 20px) 0 var(--space-6);
}

/* ---------- Search box ---------- */
.search-box{
  position:relative;
  max-width:520px;
}
.search-box i{
  position:absolute;left:18px;top:50%;transform:translateY(-50%);
  color:var(--neutral-text);
}
.search-box input{
  width:100%;
  border:1.5px solid #e0e3e8;
  border-radius:999px;
  padding:13px 20px 13px 46px;
  font-size:.95rem;
  background:#fff;
  box-shadow:var(--shadow-card);
}
.search-box input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(201,160,92,.18);
}

/* ---------- Category filter pills (horizontal scroll) ---------- */
.category-scroll{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-bottom:6px;
  scrollbar-width:thin;
}
.category-scroll::-webkit-scrollbar{height:5px;}
.category-scroll::-webkit-scrollbar-thumb{background:#dfe3ea;border-radius:10px;}
.category-pill{
  white-space:nowrap;
  border-radius:999px;
  padding:9px 20px;
  font-weight:500;
  font-size:.9rem;
  border:1px solid #e0e3e8;
  color:var(--neutral-text);
  background:#fff;
  transition:all .2s ease;
}
.category-pill:hover{border-color:var(--accent);color:var(--accent-dark);}
.category-pill.active{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}

/* ---------- Article cards ---------- */
.article-card{
  background:#fff;
  border:1px solid #eef0f3;
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  height:100%;
  transition:transform .25s ease, box-shadow .25s ease;
}
.article-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);}
.article-thumb{
  position:relative;
  height:160px;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  display:flex;align-items:center;justify-content:center;
  font-size:2.2rem;
  color:rgba(255,255,255,.35);
}
.article-thumb .cat-badge{
  position:absolute;top:14px;left:14px;
  background:var(--accent);
  color:var(--primary);
  font-size:.7rem;font-weight:700;letter-spacing:.02em;
  padding:5px 12px;border-radius:999px;
}

/* ---------- Article thumb dengan foto (has-photo) ---------- */
.article-thumb.has-photo{
  background-size:cover;
  background-position:center;
  color:transparent; /* sembunyikan icon besar transparan bawaan .article-thumb */
}
.article-thumb.has-photo::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(10,31,68,.05) 0%, rgba(7,15,32,.55) 100%);
}
.article-thumb.has-photo .cat-badge{
  z-index:1; /* tetap di atas overlay gradient */
}
.article-thumb.has-photo i{
  position:absolute;
  right:14px;bottom:14px;top:auto;left:auto;
  width:38px;height:38px;border-radius:50%;
  background:var(--accent);
  color:var(--primary);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;
  box-shadow:0 6px 16px rgba(10,31,68,.35);
  z-index:1;
}

.article-body{padding:var(--space-4);}
.article-body h5{font-size:1.08rem;margin-bottom:10px;line-height:1.35;}
.article-meta{
  display:flex;flex-wrap:wrap;gap:12px;
  margin-top:var(--space-3);
  padding-top:var(--space-3);
  border-top:1px solid #eef0f3;
  font-size:.78rem;
  color:var(--neutral-text);
}
.article-meta span{display:flex;align-items:center;gap:5px;}
.article-meta i{color:var(--accent-dark);}

.btn-load-more{min-width:220px;}

/* ---------- Edukasi cards ---------- */
.edu-card{
  background:#fff;
  border:1px solid #eef0f3;
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  padding:var(--space-4);
  height:100%;
  transition:transform .25s ease, box-shadow .25s ease;
}
.edu-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);}
.edu-icon-tile{
  width:52px;height:52px;border-radius:12px;
  background:var(--primary);
  color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:1.35rem;
  margin-bottom:var(--space-3);
}
.edu-card h6{margin-bottom:8px;font-size:1.05rem;}

.badge-level{
  display:inline-block;
  font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:4px 11px;border-radius:999px;
}
.badge-level.dasar{background:rgba(141,198,63,.14);color:#5c8f22;}
.badge-level.menengah{background:rgba(201,160,92,.16);color:var(--accent-dark);}
.badge-level.lanjutan{background:rgba(10,31,68,.1);color:var(--primary);}

/* ---------- Article detail content typography ---------- */
.article-content{
  color:var(--text);
  font-size:1.02rem;
}
.article-content > p{margin-bottom:1.3em;color:var(--text);}
.article-content h2{
  margin-top:2.2em;
  margin-bottom:.7em;
  font-size:1.4rem;
  padding-bottom:10px;
  border-bottom:2px solid var(--neutral-light);
  position:relative;
}
.article-content h2::before{
  content:"";
  position:absolute;left:0;bottom:-2px;
  width:52px;height:2px;
  background:var(--accent);
}
.article-content ul, .article-content ol{
  margin-bottom:1.3em;
  padding-left:1.3em;
}
.article-content ul li, .article-content ol li{
  margin-bottom:.55em;
  padding-left:4px;
}
.article-content ul{list-style:none;padding-left:.2em;}
.article-content ul li{position:relative;padding-left:26px;}
.article-content ul li::before{
  content:"\f26b";
  font-family:"bootstrap-icons";
  position:absolute;left:0;top:1px;
  color:var(--accent-dark);
  font-size:.9rem;
}
.article-content ol{counter-reset:step;}
.article-content ol li{
  list-style:none;
  position:relative;
  padding-left:34px;
}
.article-content ol li::before{
  counter-increment:step;
  content:counter(step);
  position:absolute;left:0;top:-1px;
  width:24px;height:24px;border-radius:50%;
  background:var(--primary);color:var(--accent);
  font-size:.72rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.article-content strong{color:var(--primary);}

/* Cover image for article detail */
.article-cover{
  position:relative;
  height:280px;
  border-radius:var(--radius-card);
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.article-cover::after{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(circle at 85% 15%, rgba(201,160,92,.28), transparent 55%);
}
.article-cover i{font-size:3.5rem;color:rgba(255,255,255,.3);position:relative;z-index:1;}

/* Cover artikel dengan foto */
.article-cover.has-photo{
  background-size:cover;
  background-position:center;
}
.article-cover.has-photo::after{
  background:linear-gradient(180deg, rgba(10,31,68,.1) 0%, rgba(7,15,32,.6) 100%);
}
.article-cover.has-photo i{display:none;}

/* Share links row */
.share-links .social-icon{
  background:var(--neutral-light);
  color:var(--primary);
}
.share-links .social-icon:hover{background:var(--accent);color:var(--primary);}

/* Table of contents sidebar */
.toc-card{
  background:var(--neutral-light);
  border-radius:var(--radius-card);
  padding:var(--space-4);
  position:sticky;
  top:110px;
}
.toc-card h6{
  font-family:var(--font-heading);
  color:var(--primary);
  margin-bottom:var(--space-3);
}
.toc-card a{
  color:var(--neutral-text);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 0;
  font-size:.9rem;
  border-bottom:1px solid #e8eaee;
  transition:color .15s ease, padding-left .15s ease;
}
.toc-card a:last-child{border-bottom:none;}
.toc-card a::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  flex-shrink:0;
}
.toc-card a:hover{color:var(--primary);padding-left:4px;}

/* ---------- Konsistensi warna heading di halaman selain Home ---------- */
/* Warna dasar heading di banner tiap halaman = putih. Kata/frasa tertentu
   (mis. nama brand) di-highlight emas lewat <span class="text-accent"> di HTML.
   Background/transparansi banner (.page-header / .content-banner) TIDAK diubah. */
.page-header h1, .page-header h2, .page-header h3,
.content-banner h1, .content-banner h2, .content-banner h3{
  color:#fff;
}
.page-header h1 .text-accent, .page-header h2 .text-accent, .page-header h3 .text-accent,
.content-banner h1 .text-accent, .content-banner h2 .text-accent, .content-banner h3 .text-accent{
  color:var(--accent-dark);
}

/* Judul di dalam kartu/komponen lain (card, artikel, edukasi, dst.) tetap
   navy seperti biasa, tidak diubah. */
.card-custom h1, .card-custom h2, .card-custom h3, .card-custom h4, .card-custom h5, .card-custom h6,
.solution-card h1, .solution-card h2, .solution-card h3, .solution-card h4, .solution-card h5,
.article-card h1, .article-card h2, .article-card h3, .article-card h4, .article-card h5,
.edu-card h1, .edu-card h2, .edu-card h3, .edu-card h4, .edu-card h5, .edu-card h6,
.toc-card h1, .toc-card h2, .toc-card h3, .toc-card h4, .toc-card h5, .toc-card h6,
.value-tile h1, .value-tile h2, .value-tile h3, .value-tile h4, .value-tile h5, .value-tile h6,
.package-card h1, .package-card h2, .package-card h3, .package-card h4, .package-card h5,
.article-content h1, .article-content h2, .article-content h3{
  color:var(--primary);
}

/* Pengecualian yang MEMANG harus putih karena latar gelap
   (pola yang sama juga dipakai di Home: .hero, .cta-band) */
.hero h1, .hero h2, .hero h3,
.cta-band h1, .cta-band h2, .cta-band h3,
.consult-panel h1, .consult-panel h2, .consult-panel h3,
footer.site-footer h1, footer.site-footer h2, footer.site-footer h3,
footer.site-footer h4, footer.site-footer h5, footer.site-footer h6{
  color:#fff;
}

/* ---------- Values grid (Tentang Kami) ---------- */
.value-tile{text-align:center;padding:var(--space-4);}
.value-tile .icon-tile{margin:0 auto var(--space-3);}

/* ---------- Package comparison ---------- */
.package-card{
  border-radius:var(--radius-card);
  border:1px solid #eef0f3;
  overflow:hidden;
  height:100%;
  background:#fff;
  position:relative;
  transition:transform .25s ease, box-shadow .25s ease;
}
.package-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-card-hover);}
.package-card.highlighted{
  border:2px solid var(--accent);
  box-shadow:var(--shadow-card-hover);
}
.package-card .badge-popular{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:var(--primary);
  font-size:.72rem;font-weight:700;padding:5px 16px;border-radius:999px;
  white-space:nowrap;
  z-index:2;
}
.package-card-media{
  position:relative;
  height:160px;
  background-size:cover;
  background-position:center;
}
.package-card-media::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(10,31,68,.1) 0%, rgba(7,15,32,.85) 100%);
}
.package-card-media .package-media-label{
  position:absolute;left:20px;right:20px;bottom:14px;z-index:1;
  color:#fff;
  font-family:var(--font-heading);font-weight:700;font-size:1.25rem;
}
.package-card-body{padding:var(--space-5);}
.package-card ul{list-style:none;padding:0;margin:var(--space-4) 0;}
.package-card ul li{
  padding:7px 0;color:var(--text);font-size:.94rem;
  display:flex;gap:10px;align-items:flex-start;
}
.package-card ul li i{color:var(--accent-dark);margin-top:3px;}

/* ---------- Fix: tombol "Konsultasi Sekarang" solid di bawah, tidak ikut isi ---------- */
.package-card{
  display:flex;
  flex-direction:column;
}
.package-card-body{
  display:flex;
  flex-direction:column;
  flex:1;
}
.package-card-body ul{
  flex:1; /* daftar fitur mengisi ruang kosong, tombol otomatis terdorong ke bawah */
}
.package-card-body > a.btn{
  margin-top:auto; /* tombol selalu nempel di baris paling bawah card */
}

/* ---------- Gradient frame border (kayak referensi: MOST POPULAR / BEST CHOICE) ---------- */
.package-wrap{position:relative;height:100%;}
.package-wrap.grad-frame{
  padding:3px;
  border-radius:calc(var(--radius-card) + 3px);
  height:100%;
}
.package-wrap.grad-frame .package-card{
  height:100%;
  box-shadow:none !important;
  border:none !important;
}
.package-wrap.grad-frame.frame-emerald{
  background:linear-gradient(135deg, var(--highlight) 0%, var(--accent) 100%);
}
.package-wrap.grad-frame.frame-violet{
  background:linear-gradient(135deg, var(--highlight-alt) 0%, var(--accent) 100%);
}
.package-wrap.grad-frame.frame-gold{
  background:linear-gradient(135deg, var(--highlight-warm) 0%, var(--accent) 100%);
}
.package-wrap.grad-frame .package-crown{
  top:-74px;
}

.package-frame-badge{
  position:absolute;
  top:-15px;
  left:50%;
  transform:translateX(-50%);
  z-index:6;
  padding:7px 20px;
  border-radius:999px;
  color:#fff;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
  box-shadow:0 8px 16px rgba(0,0,0,.2);
}
.package-frame-badge.badge-emerald{background:linear-gradient(90deg, var(--highlight) 0%, var(--accent) 100%);}
.package-frame-badge.badge-violet{background:linear-gradient(90deg, var(--highlight-alt) 0%, var(--accent) 100%);}
.package-frame-badge.badge-gold{background:linear-gradient(90deg, var(--highlight-warm) 0%, var(--accent) 100%);}

/* ---------- Variant: Paket premium/gelap (mis. "Paling Lengkap") ---------- */
.package-card.variant-navy{
  background:linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%);
}
.package-card.variant-navy .package-card-media::after{
  background:linear-gradient(180deg, rgba(10,31,68,0) 0%, rgba(7,15,32,.95) 100%);
}
.package-card.variant-navy .service-price{color:#fff;}
.package-card.variant-navy .service-price small{color:rgba(255,255,255,.55);}
.package-card.variant-navy .text-muted-custom{color:rgba(255,255,255,.65);}
.package-card.variant-navy ul li{color:rgba(255,255,255,.9);}
.package-card.variant-navy ul li i{color:var(--highlight);}
.package-card.variant-navy .btn-outline-navy{
  border-color:rgba(255,255,255,.5);
  color:#fff;
}
.package-card.variant-navy .btn-outline-navy:hover{background:#fff;color:var(--primary);}

/* ---------- Variant: Paket ringan/tint (mis. add-on seperti "Website Saja") ---------- */
.package-card.variant-tint{
  background:linear-gradient(165deg, #ffffff 0%, rgba(201,160,92,.07) 100%);
}
.package-card.variant-tint .service-price{color:var(--primary);}

/* ---------- Crown icon untuk Paket Eksklusif ---------- */
.package-wrap{
  position:relative;
}
.package-crown{
  position:absolute;
  top:-26px;
  left:50%;
  transform:translateX(-50%);
  width:52px;height:52px;
  border-radius:50%;
  background:linear-gradient(145deg, #E4C583 0%, var(--accent) 45%, var(--accent-dark) 100%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px rgba(201,160,92,.55), inset 0 1px 2px rgba(255,255,255,.4);
  z-index:4;
  border:3px solid #fff;
}
.package-crown svg{
  width:26px;height:26px;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.15));
}

/* Pindahkan ribbon "Rekomendasi" ke pojok agar tidak tabrakan dengan crown yang di tengah-atas */
.package-card.highlighted .badge-popular{
  left:auto;
  right:16px;
  top:16px;
  transform:none;
}

/* ---------- Filter tabs (Layanan) ---------- */
.filter-tabs .btn{
  border-radius:999px;padding:8px 20px;font-weight:500;
  border:1px solid #e0e3e8;color:var(--neutral-text);background:#fff;
  margin:0 6px 10px 0;
}
.filter-tabs .btn.active{
  background:var(--primary);color:#fff;border-color:var(--primary);
}

/* ---------- Form ---------- */
.form-control-custom{
  border-radius:10px;border:1.5px solid #e0e3e8;
  padding:12px 16px;font-size:.95rem;
}
.form-control-custom:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(201,160,92,.18);
}
.form-label-custom{font-weight:600;color:var(--primary);font-size:.9rem;margin-bottom:6px;}
#formAlert{display:none;}

/* ---------- Contact info list ---------- */
.contact-info-item{
  display:flex;gap:14px;align-items:flex-start;
  padding:var(--space-3) 0;border-bottom:1px solid #eef0f3;
}
.contact-info-item:last-child{border-bottom:none;}
.contact-info-item .icon-tile{margin-bottom:0;flex-shrink:0;width:44px;height:44px;font-size:1.1rem;}

/* ---------- Utility ---------- */
.map-embed{border-radius:var(--radius-card);overflow:hidden;border:1px solid #eef0f3;}
.card-custom .map-embed{border-radius:10px;}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

@media (max-width:767px){
  .hero .stamp{display:none;}
  .cta-band{padding:var(--space-5) var(--space-4);border-radius:18px;}
  .consult-panel{padding:var(--space-4);}
}

/* ---------- Service detail panel (dengan foto background) ---------- */
.service-detail-panel{
  position:relative;
  border-radius:24px;
  padding:var(--space-6) var(--space-5);
  overflow:hidden;
  background-size:cover;
  background-position:center;
  color:#fff;
}
.service-detail-panel::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(120deg, rgba(7,22,48,.92) 0%, rgba(10,31,68,.8) 55%, rgba(10,31,68,.55) 100%);
  z-index:0;
}
.service-detail-panel > .row{position:relative;z-index:1;}
.service-detail-panel h2{color:#fff;}
.service-detail-panel .text-muted-custom{color:rgba(255,255,255,.72);}
.service-detail-panel .eyebrow{
  background:rgba(201,160,92,.18);
  color:var(--accent);
}
.service-detail-panel .hero-badge{
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  color:rgba(255,255,255,.85) !important;
}
.service-detail-panel .hero-badge i{color:var(--accent);}

/* Icon badge besar di atas judul */
.service-icon-badge{
  width:64px;height:64px;border-radius:16px;
  background:var(--accent);
  color:var(--primary);
  display:flex;align-items:center;justify-content:center;
  font-size:1.7rem;
  margin-bottom:var(--space-3);
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}

/* Stat item di dalam panel gelap (dipakai di section Keunggulan) */
.service-detail-panel .stat-icon{
  width:56px;height:56px;border-radius:50%;
  background:rgba(201,160,92,.16);
  border:1.5px solid rgba(201,160,92,.4);
  color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;
  margin:0 auto var(--space-3);
}
.service-detail-panel .stat-number{color:#fff;}
.service-detail-panel .stat-label{color:rgba(255,255,255,.65);}

/* ---------- Sejarah — layout dua kolom dengan foto ---------- */
.story-photo{
  border-radius:var(--radius-card);
  overflow:hidden;
  box-shadow:var(--shadow-card-hover);
  height:340px;
  background-size:cover;
  background-position:center;
  position:relative;
}
.story-photo::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(10,31,68,.55) 100%);
}
.story-badge{
  position:absolute;left:20px;bottom:20px;z-index:1;
  background:rgba(255,255,255,.95);
  border-radius:14px;
  padding:14px 18px;
  display:flex;align-items:center;gap:12px;
  box-shadow:0 10px 24px rgba(10,31,68,.2);
}
.story-badge .stat-number{font-size:1.6rem;}

/* ---------- Frame baru: Paket Extra Website (teal -> rose, garis tipis) ---------- */
.package-wrap.frame-teal-rose{
  position:relative;
}
.frame-teal-rose .package-card{
  position:relative;
}
.frame-teal-rose .package-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--radius-card);
  padding:1.5px;
  background:linear-gradient(135deg, #14B8A6 0%, #FB7185 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  z-index:3;
}
.package-frame-badge.badge-teal-rose{
  background:linear-gradient(90deg, #14B8A6 0%, #FB7185 100%);
}

/* ---------- Modal pilihan WhatsApp (Paket Extra: Website + Legalitas) ---------- */
.wa-modal-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(7,15,32,.6);
  z-index:2000;
  align-items:center;justify-content:center;
  padding:var(--space-3);
}
.wa-modal-overlay.active{display:flex;}
.wa-modal{
  background:#fff;
  border-radius:var(--radius-card);
  padding:var(--space-5);
  max-width:400px;width:100%;
  position:relative;
  box-shadow:var(--shadow-card-hover);
}
.wa-modal-close{
  position:absolute;top:14px;right:16px;
  background:none;border:none;
  font-size:1.6rem;line-height:1;
  color:var(--neutral-text);
  cursor:pointer;
}
.wa-modal-close:hover{color:var(--primary);}
.wa-modal-title{
  font-family:var(--font-heading);
  color:var(--primary);
  margin-bottom:4px;
}
.wa-modal-service{
  color:var(--neutral-text);
  font-size:.88rem;
  margin-bottom:var(--space-4);
}
.wa-modal-options{display:flex;flex-direction:column;gap:12px;}
.wa-option{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;
  border:1.5px solid #e8eaee;
  border-radius:12px;
  text-decoration:none;
  color:var(--text);
  transition:.2s ease;
}
.wa-option:hover{border-color:var(--accent);background:rgba(201,160,92,.06);}
.wa-option i{font-size:1.5rem;color:#25D366;flex-shrink:0;}
.wa-option strong{display:block;font-size:.95rem;color:var(--primary);}
.wa-option span{display:block;font-size:.8rem;color:var(--neutral-text);margin-top:2px;}