@import url('https://fonts.googleapis.com/css2?family=Scheherazade+New:wght@400;500;600;700&display=swap');

:root{
  --brand-primary:#0F7B45;
  --brand-secondary:#D4AF37;
  --brand-primary-dark:color-mix(in srgb,var(--brand-primary) 82%,#000 18%);
  --brand-primary-deep:color-mix(in srgb,var(--brand-primary) 72%,#000 28%);
  --brand-primary-light:color-mix(in srgb,var(--brand-primary) 84%,#fff 16%);
  --brand-primary-soft:color-mix(in srgb,var(--brand-primary) 10%,#fff 90%);
  --brand-secondary-dark:color-mix(in srgb,var(--brand-secondary) 72%,#000 28%);
  --brand-secondary-light:color-mix(in srgb,var(--brand-secondary) 60%,#fff 40%);
  --brand-secondary-soft:color-mix(in srgb,var(--brand-secondary) 14%,#fff 86%);
  --surface:#fff;
  --surface-soft:#f8fafc;
  --text:#172033;
  --text-soft:#64748b;
  --border:#e2e8f0;
  --container:1180px;
  --radius:22px;
  --shadow:0 18px 45px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:var(--surface);
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.public-app{min-height:100vh;display:flex;flex-direction:column}
.public-main{flex:1}
.public-container{width:min(calc(100% - 32px),var(--container));margin-inline:auto}

.public-header{
  position:sticky;
  top:0;
  z-index:1000;
  color:#fff;
  background:var(--brand-primary);
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 30px color-mix(in srgb,var(--brand-primary-dark) 12%,transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.navbar-inner{
  position:relative;
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.navbar-brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.navbar-logo-wrap{
  width:48px;
  height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border-radius:15px;
  background:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.12);
}
.navbar-logo{
  width:42px;
  height:42px;
  border-radius:12px;
  background:#fff;
  object-fit:contain;
  padding:4px;
}
.navbar-logo-fallback{
  width:48px;
  height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border-radius:15px;
  background:#fff;
  color:var(--brand-primary);
  font-weight:900;
  box-shadow:0 8px 22px rgba(0,0,0,.12);
}
.navbar-brand-copy{
  min-width:0;
}
.navbar-brand strong{
  display:block;
  font-size:1rem;
  line-height:1.25;
  letter-spacing:-.01em;
}
.navbar-brand small{
  display:block;
  max-width:260px;
  margin-top:3px;
  overflow:hidden;
  color:rgba(255,255,255,.72);
  font-size:.76rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.public-nav{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:650;
}
.public-nav > a{
  position:relative;
  padding:10px 12px;
  border-radius:10px;
  color:rgba(255,255,255,.82);
  font-size:.92rem;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.public-nav > a:not(.nav-consult):hover{
  background:rgba(255,255,255,.09);
  color:#fff;
}
.public-nav .nav-consult{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-left:6px;
  padding:11px 16px;
  border:1px solid rgba(255,255,255,.25);
  background:#fff;
  color:var(--brand-primary);
  box-shadow:0 8px 22px rgba(0,0,0,.10);
  font-weight:800;
}
.public-nav .nav-consult:hover{
  background:#f8fafc;
  color:var(--brand-primary-dark);
  transform:translateY(-1px);
}
.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid rgba(255,255,255,.22);
  border-radius:12px;
  background:rgba(255,255,255,.08);
  color:#fff;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
}
.nav-toggle-line{
  display:block;
  width:19px;
  height:2px;
  border-radius:999px;
  background:#fff;
}

.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:78px 0 68px;
  background:
    radial-gradient(circle at 82% 18%,color-mix(in srgb,var(--brand-secondary) 16%,transparent),transparent 26%),
    radial-gradient(circle at 12% 8%,color-mix(in srgb,var(--brand-primary) 8%,transparent),transparent 26%),
    linear-gradient(180deg,#ffffff 0%,#fbfdfc 55%,#f5faf7 100%);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  opacity:0;
  background-image:var(--hero-background-image);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center right;
  transition:opacity .2s ease;
}
.hero.hero-with-background::before{
  opacity:.18;
}
.hero.hero-with-background{
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.94) 38%,
      rgba(250,253,251,.82) 62%,
      rgba(245,250,247,.72) 100%
    ),
    radial-gradient(circle at 82% 18%,color-mix(in srgb,var(--brand-secondary) 14%,transparent),transparent 26%),
    linear-gradient(180deg,#ffffff 0%,#f5faf7 100%);
}
.hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--brand-primary) 16%,transparent),transparent);
}
.hero-decoration{
  position:absolute;
  z-index:-1;
  border-radius:50%;
  pointer-events:none;
  filter:blur(2px);
}
.hero-decoration-one{
  width:420px;
  height:420px;
  right:-180px;
  top:-160px;
  background:color-mix(in srgb,var(--brand-secondary) 8%,transparent);
}
.hero-decoration-two{
  width:260px;
  height:260px;
  left:-120px;
  bottom:-130px;
  background:color-mix(in srgb,var(--brand-primary) 6%,transparent);
}
.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(370px,.92fr);
  gap:54px;
  align-items:center;
}
.hero-copy{
  position:relative;
  z-index:2;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:18px;
  padding:8px 12px;
  border:1px solid color-mix(in srgb,var(--brand-primary) 14%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,var(--brand-primary) 5.5%,transparent);
  color:var(--brand-primary);
  font-size:.75rem;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.eyebrow-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--brand-secondary);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-secondary) 12%,transparent);
}
.hero h1{
  max-width:760px;
  margin:0 0 22px;
  color:#13211a;
  font-size:clamp(2.48rem,4.75vw,4.28rem);
  font-weight:850;
  line-height:1.02;
  letter-spacing:-.052em;
}
.hero-text{
  max-width:660px;
  margin:0 0 30px;
  color:#596779;
  font-size:1.12rem;
  line-height:1.76;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.btn-primary,.btn-secondary{
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 20px;
  border-radius:14px;
  font-weight:780;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.btn-primary{
  background:linear-gradient(135deg,var(--brand-primary),var(--brand-primary-light));
  color:#fff;
  box-shadow:0 12px 26px color-mix(in srgb,var(--brand-primary) 23%,transparent);
}
.btn-primary:hover{
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 16px 32px color-mix(in srgb,var(--brand-primary) 28%,transparent);
}
.btn-secondary{
  border:1px solid #d8e2dc;
  background:#fff;
  color:#24332b;
  box-shadow:0 8px 20px rgba(15,23,42,.04);
}
.btn-secondary:hover{
  border-color:color-mix(in srgb,var(--brand-primary) 28%,transparent);
  color:var(--brand-primary);
  transform:translateY(-2px);
}
.hero-trust-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  max-width:690px;
  margin-top:28px;
}
.hero-trust-item{
  min-width:0;
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:11px 12px;
  border:1px solid color-mix(in srgb,var(--brand-primary) 10%,transparent);
  border-radius:14px;
  background:rgba(255,255,255,.78);
}
.hero-trust-icon{
  width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border-radius:50%;
  background:#e8f7ee;
  color:var(--brand-primary);
  font-size:.76rem;
  font-weight:900;
}
.hero-trust-item strong{
  display:block;
  margin-bottom:2px;
  color:#1d2d24;
  font-size:.82rem;
}
.hero-trust-item small{
  display:block;
  color:#758277;
  font-size:.7rem;
  line-height:1.35;
}

.hero-showcase{
  position:relative;
  min-width:0;
  padding:18px 8px 22px 18px;
}
.hero-showcase-glow{
  position:absolute;
  inset:10% -4% -2% 12%;
  z-index:-1;
  border-radius:34px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand-primary) 13%,transparent),color-mix(in srgb,var(--brand-secondary) 10%,transparent));
  filter:blur(2px);
}
.hero-brand-card{
  position:relative;
  overflow:hidden;
  padding:28px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:28px;
  background:
    radial-gradient(circle at top right,rgba(255,255,255,.12),transparent 30%),
    linear-gradient(145deg,var(--brand-primary-dark) 0%,var(--brand-primary) 50%,var(--brand-primary-light) 100%);
  color:#fff;
  box-shadow:0 28px 60px color-mix(in srgb,var(--brand-primary-dark) 22%,transparent);
}
.hero-brand-card::before{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-70px;
  bottom:-90px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
}
.hero-card-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:24px;
  color:rgba(255,255,255,.70);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
}
.hero-card-status{
  padding:7px 9px;
  border:1px solid rgba(255,255,255,.17);
  border-radius:999px;
  background:rgba(255,255,255,.09);
  color:#fff;
  font-size:.67rem;
  letter-spacing:0;
}
.hero-brand-inner{
  display:flex;
  align-items:center;
  gap:18px;
}
.hero-logo-wrap{
  width:88px;
  height:88px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.22);
  border-radius:24px;
  background:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
}
.hero-logo{
  width:78px;
  height:78px;
  border-radius:20px;
  background:#fff;
  object-fit:contain;
  padding:7px;
}
.hero-logo-fallback{
  width:88px;
  height:88px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border-radius:24px;
  background:#fff;
  color:var(--brand-primary);
  font-size:1.55rem;
  font-weight:900;
}
.hero-brand-copy{
  min-width:0;
}
.hero-brand-kicker{
  display:block;
  margin-bottom:5px;
  color:var(--brand-secondary-light);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.hero-brand-card h2{
  margin:0 0 7px;
  font-size:1.72rem;
  line-height:1.18;
  letter-spacing:-.02em;
}
.hero-brand-card p{
  margin:0;
  color:rgba(255,255,255,.74);
  font-size:.88rem;
  line-height:1.55;
}
.hero-card-divider{
  height:1px;
  margin:25px 0 22px;
  background:rgba(255,255,255,.14);
}
.hero-service-list{
  display:grid;
  gap:12px;
}
.hero-service-list > div{
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.89);
  font-size:.89rem;
}
.hero-service-check{
  width:23px;
  height:23px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:var(--brand-secondary-light);
  font-size:.72rem;
  font-weight:900;
}
.brand-meta{
  display:flex;
  flex-wrap:wrap;
  gap:9px 16px;
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.72);
  font-size:.8rem;
}
.brand-meta span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.hero-floating-note{
  position:relative;
  right:auto;
  bottom:auto;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  width:calc(100% - 48px);
  min-width:0;
  margin:-14px auto 0;
  padding:12px 15px;
  border:1px solid #e7ece9;
  border-radius:16px;
  background:rgba(255,255,255,.98);
  color:#1b2b22;
  box-shadow:0 15px 34px rgba(15,23,42,.10);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.hero-floating-note:hover{
  color:#1b2b22;
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--brand-primary) 22%,transparent);
  box-shadow:0 18px 38px rgba(15,23,42,.13);
}
.hero-floating-icon{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border-radius:11px;
  background:var(--brand-secondary-soft);
  color:var(--brand-secondary-dark);
}
.hero-floating-note strong{
  display:block;
  font-size:.82rem;
}
.hero-floating-note small{
  display:block;
  margin-top:2px;
  color:#6d7a72;
  font-size:.72rem;
}
.hero-floating-arrow{
  color:var(--brand-primary);
  font-size:1.05rem;
  font-weight:900;
}

.foundation-section{padding:76px 0}
.section-heading{max-width:800px;margin-bottom:34px}
.section-heading h2{margin:0 0 14px;font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.035em}
.section-heading p{margin:0;color:var(--text-soft);font-size:1.08rem;line-height:1.75}
.foundation-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.foundation-card{
  padding:26px;border:1px solid var(--border);border-radius:18px;background:var(--surface);
  box-shadow:0 8px 24px rgba(15,23,42,.04)
}
.foundation-card strong{display:block;margin-bottom:10px;font-size:1.08rem}
.foundation-card p{margin:0;color:var(--text-soft);line-height:1.7}

.public-footer{margin-top:auto;padding:46px 0 20px;background:#0f172a;color:#fff}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:34px}
.footer-brand{display:block;margin-bottom:10px;font-size:1.2rem}
.public-footer p{margin:8px 0;color:rgba(255,255,255,.68);line-height:1.6}
.footer-muted{font-size:.92rem}
.footer-bottom{
  display:flex;justify-content:space-between;gap:20px;margin-top:34px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.55);font-size:.9rem
}

@media(max-width:980px){
  .hero-grid,.foundation-grid,.footer-grid{grid-template-columns:1fr}
  .hero-grid{gap:42px}
  .hero-copy{max-width:780px}
  .hero-showcase{max-width:680px;width:100%;margin-inline:auto}
  .nav-toggle{display:inline-flex}
  .public-nav{
    position:absolute;
    left:0;
    right:0;
    top:calc(100% + 10px);
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    padding:10px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    background:var(--brand-primary-dark);
    box-shadow:0 20px 45px rgba(15,23,42,.18);
  }
  .public-nav.is-open{display:flex}
  .public-nav > a{padding:12px 14px;border-radius:10px}
  .public-nav .nav-consult{margin-left:0;margin-top:3px;justify-content:space-between}
  .navbar-brand small{max-width:210px}
}

@media(max-width:680px){
  .public-container{width:min(calc(100% - 24px),var(--container))}
  .navbar-inner{min-height:70px;gap:14px}
  .navbar-logo-wrap,.navbar-logo-fallback{width:43px;height:43px;border-radius:13px}
  .navbar-logo{width:38px;height:38px}
  .navbar-brand strong{font-size:.91rem}
  .navbar-brand small{display:none}
  .hero{padding:48px 0 46px}
  .hero.hero-with-background::before{
    opacity:.14;
    background-position:68% center;
  }
  .hero.hero-with-background{
    background:
      linear-gradient(180deg,
        rgba(255,255,255,.96) 0%,
        rgba(255,255,255,.91) 55%,
        rgba(247,251,249,.88) 100%
      ),
      linear-gradient(180deg,#ffffff,#f5faf7);
  }
  .hero-grid{gap:34px}
  .eyebrow{margin-bottom:14px;padding:7px 10px;font-size:.68rem}
  .hero h1{margin-bottom:17px;font-size:clamp(2.08rem,10.8vw,3.05rem);line-height:1.04}
  .hero-text{margin-bottom:24px;font-size:1rem;line-height:1.7}
  .hero-actions{display:grid;grid-template-columns:1fr}
  .hero-actions .btn-primary,.hero-actions .btn-secondary{width:100%}
  .hero-trust-list{grid-template-columns:1fr;margin-top:26px}
  .hero-trust-item{padding:11px 12px}
  .hero-showcase{padding:8px 0 18px}
  .hero-brand-card{padding:22px;border-radius:22px}
  .hero-card-topline{margin-bottom:22px}
  .hero-card-status{display:none}
  .hero-brand-inner{align-items:flex-start}
  .hero-logo-wrap,.hero-logo-fallback{width:68px;height:68px;border-radius:18px}
  .hero-logo{width:60px;height:60px;border-radius:15px}
  .hero-brand-card h2{font-size:1.35rem}
  .hero-brand-card p{font-size:.8rem}
  .hero-floating-note{
    width:calc(100% - 24px);
    margin:-8px auto 0;
    padding:11px 13px;
  }
  .footer-bottom{flex-direction:column}
}

/* ============================================================
   FOUNDATION 04 - PACKAGE MODULE
   ============================================================ */

.package-section {
    padding: 76px 0;
    background: var(--surface-soft);
}

.package-heading {
    margin-bottom: 32px;
}

.package-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.package-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: 0 10px 30px rgba(15,23,42,.05);
    transition: transform .2s ease, box-shadow .2s ease;
}

.package-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 42px rgba(15,23,42,.10);
}

.package-image-wrap {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background:
        color-mix(
            in srgb,
            var(--brand-primary) 10%,
            white
        );
}

.package-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.package-card:hover .package-image {
    transform: scale(1.035);
}

.package-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary);
    font-size: 3rem;
}

.package-type {
    position: absolute;
    left: 16px;
    top: 16px;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    color: var(--text);
    font-size: .78rem;
    font-weight: 800;
    box-shadow: 0 5px 15px rgba(15,23,42,.10);
}

.package-body {
    padding: 22px;
}

.package-code {
    margin-bottom: 7px;
    color: var(--brand-primary);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    overflow-wrap: anywhere;
}

.package-body h3 {
    margin: 0 0 10px;
    font-size: 1.32rem;
    line-height: 1.28;
    letter-spacing: -.02em;
}

.package-body h3 a:hover {
    color: var(--brand-primary);
}

.package-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 30px;
    margin-bottom: 18px;
}

.package-meta span {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-soft);
    background: #fff;
    font-size: .76rem;
}

.package-price-block {
    margin-top: 4px;
}

.package-price-block small {
    display: block;
    margin-bottom: 4px;
    color: var(--text-soft);
}

.package-price-block strong {
    color: var(--brand-primary);
    font-size: 1.45rem;
}

.room-prices {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.room-prices span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--surface-soft);
    color: var(--text-soft);
    font-size: .82rem;
}

.room-prices strong {
    color: var(--text);
    font-size: .85rem;
}

.package-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 20px;
}

.package-detail-btn,
.package-wa-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border-radius: 12px;
    font-size: .88rem;
    font-weight: 750;
    text-align: center;
}

.package-detail-btn {
    border: 1px solid var(--border);
    background: #fff;
}

.package-wa-btn {
    background: var(--brand-primary);
    color: #fff;
}

.package-empty {
    padding: 46px 24px;
    border: 1px dashed var(--border);
    border-radius: 20px;
    text-align: center;
    background: #fff;
}

.package-empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background:
        color-mix(
            in srgb,
            var(--brand-primary) 10%,
            white
        );
    color: var(--brand-primary);
    font-size: 1.6rem;
}

.package-empty strong {
    display: block;
    margin-bottom: 7px;
}

.package-empty p {
    max-width: 520px;
    margin: 0 auto;
    color: var(--text-soft);
    line-height: 1.65;
}


/* ============================================================
   PUBLIC REVAMP P2 - PREMIUM PACKAGE CARDS
   ============================================================ */

.package-section{
    position:relative;
    overflow:hidden;
    padding:82px 0;
    background:
        radial-gradient(circle at 88% 10%, color-mix(in srgb,var(--brand-secondary) 8%,transparent), transparent 24%),
        linear-gradient(180deg,#f8fbf9 0%,#f4f8f6 100%);
}

.package-section::before{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    left:-160px;
    top:90px;
    border-radius:50%;
    background:color-mix(in srgb,var(--brand-primary) 4.5%,transparent);
    pointer-events:none;
}

.package-heading-wrap{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:32px;
    margin-bottom:34px;
}

.package-heading{
    max-width:760px;
    margin-bottom:0;
}

.package-heading h2{
    margin:0 0 14px;
    font-size:clamp(2rem,3.8vw,3.05rem);
    line-height:1.08;
    letter-spacing:-.035em;
}

.package-heading p{
    max-width:680px;
    color:var(--text-soft);
    font-size:1.05rem;
    line-height:1.72;
}

.package-heading-note{
    width:min(100%,340px);
    display:flex;
    align-items:flex-start;
    gap:11px;
    padding:15px 16px;
    border:1px solid color-mix(in srgb,var(--brand-primary) 12%,transparent);
    border-radius:16px;
    background:rgba(255,255,255,.82);
    box-shadow:0 12px 28px rgba(15,23,42,.04);
}

.package-heading-note-icon{
    width:30px;
    height:30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    border-radius:10px;
    background:#e9f7ef;
    color:var(--brand-primary);
    font-weight:900;
}

.package-heading-note strong{
    display:block;
    margin-bottom:2px;
    color:#213127;
    font-size:.9rem;
}

.package-heading-note small{
    display:block;
    color:#738078;
    font-size:.76rem;
    line-height:1.45;
}

.package-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    align-items:stretch !important;
    gap:24px !important;
    width:100% !important;
}

.package-card{
    position:relative;
    width:100% !important;
    max-width:none !important;
    min-width:0;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden;
    border:1px solid #e1e8e4;
    border-radius:24px;
    background:#fff;
    box-shadow:0 14px 36px rgba(15,23,42,.055);
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.package-card:hover{
    transform:translateY(-5px);
    border-color:color-mix(in srgb,var(--brand-primary) 18%,transparent);
    box-shadow:0 24px 48px rgba(15,23,42,.10);
}

.package-image-wrap{
    position:relative;
    width:100% !important;
    aspect-ratio:16/10 !important;
    overflow:hidden;
    background:#edf6f1;
}

.package-image-gradient{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(180deg,rgba(0,0,0,.02) 45%,rgba(7,65,38,.20) 100%);
}

.package-type{
    z-index:2;
    left:15px;
    top:15px;
    min-height:29px;
    padding:0 11px;
    border:1px solid rgba(255,255,255,.45);
    background:rgba(255,255,255,.94);
    color:#173226;
    font-size:.74rem;
    letter-spacing:.01em;
    backdrop-filter:blur(8px);
}

.package-body{
    flex:1 1 auto !important;
    display:flex !important;
    flex-direction:column !important;
    padding:22px;
}

.package-topline{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:7px;
}

.package-code{
    margin-bottom:0;
    color:var(--brand-primary);
    font-size:.72rem;
    font-weight:850;
    letter-spacing:.055em;
}

.package-availability{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:0 9px;
    border-radius:999px;
    background:#ecfdf3;
    color:#177245;
    font-size:.68rem;
    font-weight:800;
}

.package-body h3{
    min-height:auto;
    margin:0 0 13px;
    font-size:1.28rem;
    line-height:1.3;
    letter-spacing:-.025em;
}

.package-body h3 a{
    transition:color .18s ease;
}

.package-meta{
    min-height:0;
    margin-bottom:16px;
    gap:7px;
}

.package-meta span{
    gap:6px;
    padding:6px 9px;
    border-color:#e5ebe7;
    background:#fbfcfb;
    color:#607067;
    font-size:.74rem;
}

.package-meta-icon{
    color:var(--brand-primary);
    font-weight:800;
}

.package-next-departure{
    margin:2px 0 16px;
    padding:12px 13px;
    border:1px solid color-mix(in srgb,var(--brand-primary) 10%,transparent);
    border-radius:14px;
    background:linear-gradient(135deg,#f4fbf7,#f8fbf9);
}

.package-next-departure > span{
    display:block;
    margin-bottom:4px;
    color:#6f7c74;
    font-size:.7rem;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.package-next-departure strong{
    display:block;
    color:#173226;
    font-size:.95rem;
}

.package-next-departure small{
    display:block;
    margin-top:3px;
    color:#768279;
    font-size:.74rem;
}

.package-price-block{
    margin-top:auto;
    padding-top:17px;
    border-top:1px solid #edf0ee;
}

.package-price-block small{
    margin-bottom:5px;
    font-size:.76rem;
}

.package-price-row{
    display:flex;
    align-items:end;
    flex-wrap:wrap;
    gap:7px;
}

.package-price-block strong{
    color:var(--brand-primary);
    font-size:1.55rem;
    line-height:1.1;
    letter-spacing:-.025em;
}

.package-price-caption{
    padding-bottom:2px;
    color:#87928b;
    font-size:.72rem;
}

.room-prices{
    gap:7px;
    margin-top:13px;
}

.room-prices span{
    padding:8px 10px;
    border:1px solid #edf0ee;
    background:#fafcfb;
}

.package-actions{
    margin-top:auto !important;
    padding-top:18px !important;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
}

.package-detail-btn,
.package-wa-btn{
    min-height:46px;
    gap:7px;
    border-radius:12px;
    font-size:.83rem;
    font-weight:800;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.package-detail-btn{
    border:1px solid #dce4df;
    background:#fff;
    color:#23332a;
}

.package-detail-btn:hover{
    color:var(--brand-primary);
    border-color:color-mix(in srgb,var(--brand-primary) 28%,transparent);
    transform:translateY(-1px);
}

.package-wa-btn{
    background:linear-gradient(135deg,var(--brand-primary),var(--brand-primary-light));
    color:#fff;
    box-shadow:0 9px 20px color-mix(in srgb,var(--brand-primary) 18%,transparent);
}

.package-wa-btn:hover{
    color:#fff;
    transform:translateY(-1px);
    box-shadow:0 12px 24px color-mix(in srgb,var(--brand-primary) 24%,transparent);
}

.package-wa-icon{
    font-size:.95rem;
}

@media(max-width:1000px){
    .package-heading-wrap{
        align-items:flex-start;
        flex-direction:column;
        gap:18px;
    }

    .package-heading-note{
        width:100%;
        max-width:560px;
    }

    .package-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}

@media(max-width:650px){
    .package-section{
        padding:58px 0;
    }

    .package-heading-wrap{
        margin-bottom:26px;
    }

    .package-heading h2{
        font-size:clamp(1.9rem,9vw,2.55rem);
    }

    .package-heading p{
        font-size:.96rem;
    }

    .package-grid{
        grid-template-columns:1fr !important;
        gap:18px !important;
    }

    .package-card{
        border-radius:20px;
    }

    .package-body{
        padding:18px;
    }

    .package-actions{
        grid-template-columns:1fr;
    }

    .package-detail-btn,
    .package-wa-btn{
        width:100%;
    }
}



/* PACKAGE DETAIL */

.detail-page {
    padding: 56px 0 80px;
}

.detail-back {
    display: inline-flex;
    align-items: center;
    margin-bottom: 24px;
    color: var(--text-soft);
    font-weight: 700;
}

.detail-back:hover {
    color: var(--brand-primary);
}

.detail-grid {
    display: grid;
    grid-template-columns:
        minmax(0, .92fr)
        minmax(0, 1.08fr);
    gap: 44px;
    align-items: start;
}

.detail-media {
    overflow: hidden;
    border-radius: 24px;
    background: var(--surface-soft);
    box-shadow: 0 14px 36px rgba(15,23,42,.07);
}

.detail-media img,
.detail-image-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.detail-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary);
    font-size: 4rem;
}

.detail-content {
    padding: 4px 0;
}

.detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.detail-badges span {
    padding: 6px 10px;
    border-radius: 999px;
    background:
        color-mix(
            in srgb,
            var(--brand-primary) 10%,
            white
        );
    color: var(--brand-primary);
    font-size: .78rem;
    font-weight: 800;
}

.detail-content h1 {
    margin: 0 0 6px;
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1.04;
    letter-spacing: -.04em;
}

.detail-code {
    margin-bottom: 26px;
    color: var(--text-soft);
    font-weight: 700;
}

.detail-price {
    padding: 20px;
    border-radius: 18px;
    background: var(--surface-soft);
}

.detail-price small {
    display: block;
    margin-bottom: 4px;
    color: var(--text-soft);
}

.detail-price strong {
    color: var(--brand-primary);
    font-size: 1.8rem;
}

.detail-room-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 12px;
}

.detail-room-grid div {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
}

.detail-room-grid span,
.detail-info-grid span {
    display: block;
    margin-bottom: 4px;
    color: var(--text-soft);
    font-size: .78rem;
}

.detail-room-grid strong {
    font-size: .9rem;
}

.detail-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 22px;
}

.detail-info-grid div {
    padding: 15px 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
}

.detail-description {
    margin-top: 22px;
    color: var(--text-soft);
    line-height: 1.75;
}

.detail-wa {
    margin-top: 24px;
}

.detail-not-found {
    max-width: 640px;
    margin: 60px auto;
    text-align: center;
}

.detail-not-found > span {
    display: block;
    color: var(--brand-primary);
    font-size: 4rem;
    font-weight: 900;
}

.detail-not-found h1 {
    margin: 0 0 12px;
}

.detail-not-found p {
    margin: 0 0 24px;
    color: var(--text-soft);
}

@media (max-width: 1000px) {
    .package-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

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

    .detail-media {
        max-width: 720px;
    }
}

@media (max-width: 650px) {
    .package-section {
        padding: 54px 0;
    }

    .package-grid,
    .package-actions,
    .detail-room-grid,
    .detail-info-grid {
        grid-template-columns: 1fr;
    }

    .detail-page {
        padding: 36px 0 60px;
    }
}

/* ============================================================
   FOUNDATION 04.1 - GLOBAL PACKAGE UI LOCK
   Satu aturan untuk seluruh card paket public.
   ============================================================ */

#paket {
    scroll-margin-top: 104px;
}

.package-grid {
    display: grid !important;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(280px, 360px)
        ) !important;

    justify-content: center !important;
    align-items: stretch !important;

    gap: 24px !important;

    width: 100% !important;
}

.package-card {
    width: 100% !important;
    max-width: 360px !important;

    display: flex !important;
    flex-direction: column !important;

    margin: 0 !important;
}

.package-image-wrap {
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;

    display: block !important;

    overflow: hidden !important;
}

.package-image {
    width: 100% !important;
    height: 100% !important;

    display: block !important;

    object-fit: cover !important;
    object-position: center !important;
}

.package-body {
    flex: 1 1 auto !important;

    display: flex !important;
    flex-direction: column !important;
}

.package-body h3 {
    min-height: 3.35rem;
}

.package-actions {
    margin-top: auto !important;
    padding-top: 20px;
}

@media (min-width: 701px) and (max-width: 1000px) {

    .package-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(280px, 360px)
            ) !important;
    }

}

@media (max-width: 700px) {

    #paket {
        scroll-margin-top: 92px;
    }

    .package-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px !important;
    }

    .package-card {
        max-width: 100% !important;
    }

    .package-image-wrap {
        aspect-ratio: 16 / 10 !important;
    }

    .package-body h3 {
        min-height: auto;
    }

}

/* ============================================================
   FOUNDATION 04.2 - GLOBAL PACKAGE IMAGE MODE
   Default: Brosur penuh selebar kartu, tinggi menyesuaikan gambar.
   Bisa diubah dari Admin.
   ============================================================ */

.package-image-mode-contain .package-image-wrap {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

.package-image-mode-contain .package-image {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center top !important;
    background: #ffffff !important;
}

.package-image-mode-cover .package-image-wrap {
    aspect-ratio: 16 / 10 !important;
}

.package-image-mode-cover .package-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

.package-card .package-meta:empty {
    display: none !important;
}

@media (max-width: 700px) {

    .package-image-mode-contain .package-image-wrap {
        aspect-ratio: auto !important;
        height: auto !important;
    }

    .package-image-mode-cover .package-image-wrap {
        aspect-ratio: 16 / 10 !important;
    }

}

/* ============================================================
   FOUNDATION 05 - JADWAL KEBERANGKATAN
   Global public section
   ============================================================ */

#keberangkatan {
    scroll-margin-top: 104px;
}

.departure-section {
    padding: 76px 0;
    background: #ffffff;
}

.departure-heading {
    margin-bottom: 32px;
}

.departure-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(290px, 360px)
        );

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

    gap: 24px;
}

.departure-card {
    width: 100%;
    max-width: 360px;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    border: 1px solid var(--border);
    border-radius: 22px;

    background: var(--surface);

    box-shadow:
        0 10px 30px
        rgba(15,23,42,.05);

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

.departure-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 18px 42px
        rgba(15,23,42,.10);
}

.departure-card-top {
    padding: 18px 20px;

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

    background:
        color-mix(
            in srgb,
            var(--brand-primary) 7%,
            white
        );

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

.departure-date-box {
    min-width: 0;
}

.departure-date-label {
    display: block;

    margin-bottom: 4px;

    color: var(--text-soft);

    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.departure-date-box strong {
    display: block;

    color: var(--brand-primary);

    font-size: 1.05rem;
    line-height: 1.3;
}

.departure-status {
    flex: 0 0 auto;

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

    min-height: 28px;

    padding: 0 10px;

    border-radius: 999px;

    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
}

.departure-status-ready {
    background:
        color-mix(
            in srgb,
            var(--brand-primary) 12%,
            white
        );

    color: var(--brand-primary);
}

.departure-status-process {
    background: #fff7ed;
    color: #c2410c;
}

.departure-status-plan {
    background: var(--surface-soft);
    color: var(--text-soft);
}

.departure-card-body {
    flex: 1 1 auto;

    display: flex;
    flex-direction: column;

    padding: 22px;
}

.departure-package-name {
    margin-bottom: 7px;

    color: var(--brand-primary);

    font-size: .78rem;
    font-weight: 800;

    letter-spacing: .04em;
}

.departure-card h3 {
    margin: 0 0 6px;

    color: var(--text);

    font-size: 1.25rem;
    line-height: 1.3;

    letter-spacing: -.02em;
}

.departure-code {
    margin-bottom: 18px;

    color: var(--text-soft);

    font-size: .78rem;
    font-weight: 700;

    overflow-wrap: anywhere;
}

.departure-info-list {
    display: grid;
    gap: 0;

    margin-top: 6px;

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

.departure-info-row {
    display: grid;
    grid-template-columns:
        minmax(96px, .85fr)
        minmax(0, 1.15fr);

    gap: 14px;

    padding: 11px 0;

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

.departure-info-row span {
    color: var(--text-soft);

    font-size: .78rem;
}

.departure-info-row strong {
    min-width: 0;

    color: var(--text);

    font-size: .84rem;
    font-weight: 750;

    text-align: right;

    overflow-wrap: anywhere;
}

.departure-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;

    margin-top: auto;
    padding-top: 20px;
}

.departure-package-btn,
.departure-wa-btn {
    min-height: 44px;

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

    padding: 0 13px;

    border-radius: 12px;

    font-size: .88rem;
    font-weight: 750;

    text-align: center;
}

.departure-package-btn {
    border: 1px solid var(--border);
    background: #ffffff;
    color: var(--text);
}

.departure-package-btn:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.departure-wa-btn {
    background: var(--brand-primary);
    color: #ffffff;
}

.departure-wa-btn:hover {
    filter: brightness(.96);
}

.departure-empty {
    padding: 46px 24px;

    border: 1px dashed var(--border);
    border-radius: 20px;

    text-align: center;

    background: var(--surface-soft);
}

.departure-empty-icon {
    width: 56px;
    height: 56px;

    margin: 0 auto 14px;

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

    border-radius: 16px;

    background:
        color-mix(
            in srgb,
            var(--brand-primary) 10%,
            white
        );

    color: var(--brand-primary);

    font-size: 1.5rem;
}

.departure-empty strong {
    display: block;

    margin-bottom: 7px;

    color: var(--text);
}

.departure-empty p {
    max-width: 520px;

    margin: 0 auto;

    color: var(--text-soft);

    line-height: 1.65;
}

@media (min-width: 701px) and (max-width: 1000px) {

    .departure-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(280px, 360px)
            );
    }

}

@media (max-width: 700px) {

    #keberangkatan {
        scroll-margin-top: 92px;
    }

    .departure-section {
        padding: 54px 0;
    }

    .departure-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .departure-card {
        max-width: 100%;
    }

    .departure-info-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .departure-info-row strong {
        text-align: left;
    }

    .departure-actions {
        grid-template-columns: 1fr;
    }

}

/* ============================================================
   FOUNDATION 05.2 - PAKET ↔ KEBERANGKATAN
   ============================================================ */

.package-next-departure {
    margin: 16px 0 2px;

    padding: 13px 14px;

    border: 1px solid var(--border);
    border-radius: 14px;

    background:
        color-mix(
            in srgb,
            var(--brand-primary) 6%,
            white
        );
}

.package-next-departure span,
.package-next-departure small {
    display: block;

    color: var(--text-soft);

    font-size: .76rem;
}

.package-next-departure strong {
    display: block;

    margin: 3px 0;

    color: var(--brand-primary);

    font-size: .98rem;
}

.detail-departure-card {
    margin-top: 22px;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 18px;

    background: #ffffff;
}

.detail-departure-head {
    padding: 16px 18px;

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

    background:
        color-mix(
            in srgb,
            var(--brand-primary) 7%,
            white
        );

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

.detail-departure-head > div > span {
    display: block;

    margin-bottom: 4px;

    color: var(--text-soft);

    font-size: .72rem;
    font-weight: 800;

    letter-spacing: .06em;
}

.detail-departure-head > div > strong {
    display: block;

    color: var(--brand-primary);

    font-size: 1.06rem;
}

.detail-departure-status {
    flex: 0 0 auto;

    padding: 6px 10px;

    border-radius: 999px;

    background: #ffffff;

    color: var(--brand-primary);

    font-size: .74rem;
    font-weight: 800;
}

.detail-departure-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;

    padding: 4px 18px;
}

.detail-departure-grid > div {
    padding: 12px 0;

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

.detail-departure-grid > div:nth-child(odd) {
    padding-right: 14px;
}

.detail-departure-grid > div:nth-child(even) {
    padding-left: 14px;
}

.detail-departure-grid span {
    display: block;

    margin-bottom: 4px;

    color: var(--text-soft);

    font-size: .76rem;
}

.detail-departure-grid strong {
    display: block;

    color: var(--text);

    font-size: .86rem;
}

.detail-departure-link {
    display: inline-flex;

    margin: 14px 18px 18px;

    color: var(--brand-primary);

    font-size: .88rem;
    font-weight: 800;
}

.detail-departure-link:hover {
    text-decoration: underline;
}

@media (max-width: 700px) {

    .detail-departure-grid {
        grid-template-columns: 1fr;
    }

    .detail-departure-grid > div:nth-child(odd),
    .detail-departure-grid > div:nth-child(even) {
        padding-left: 0;
        padding-right: 0;
    }

}

/* ============================================================
   FOUNDATION 06 - TENTANG & KEUNGGULAN
   ============================================================ */

#tentang {
    scroll-margin-top: 104px;
}

.about-section {
    padding: 76px 0;
    background: var(--surface-soft);
}

.about-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(320px, .92fr);

    gap: 42px;

    align-items: center;
}

.about-copy h2 {
    max-width: 760px;

    margin:
        14px 0 20px;

    color: var(--text);

    font-size:
        clamp(
            2.2rem,
            4.8vw,
            4rem
        );

    line-height: 1.06;
    letter-spacing: -.04em;
}

.about-description {
    max-width: 760px;

    margin: 0;

    color: var(--text-soft);

    font-size: 1.04rem;
    line-height: 1.8;
}

.about-brand-panel {
    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 12px 34px
        rgba(15,23,42,.06);
}

.about-brand-head {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 22px;

    background:
        color-mix(
            in srgb,
            var(--brand-primary) 7%,
            white
        );

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

.about-brand-head img {
    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    object-fit: contain;

    border-radius: 16px;

    background: #ffffff;

    padding: 7px;

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

.about-brand-head strong {
    display: block;

    color: var(--text);

    font-size: 1.08rem;
}

.about-brand-head span {
    display: block;

    margin-top: 3px;

    color: var(--text-soft);

    font-size: .86rem;
}

.about-meta {
    padding: 6px 22px 14px;
}

.about-meta > div {
    display: grid;
    grid-template-columns:
        105px
        minmax(0, 1fr);

    gap: 14px;

    padding: 13px 0;

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

.about-meta > div:last-child {
    border-bottom: 0;
}

.about-meta span {
    color: var(--text-soft);

    font-size: .8rem;
}

.about-meta strong {
    min-width: 0;

    color: var(--text);

    font-size: .88rem;

    overflow-wrap: anywhere;
}


/* KEUNGGULAN */

.advantages-section {
    padding: 76px 0;
    background: #ffffff;
}

.advantages-heading {
    margin-bottom: 32px;
}

.advantages-grid {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 22px;
}

.advantage-card {
    min-width: 0;

    padding: 26px;

    border: 1px solid var(--border);
    border-radius: 20px;

    background: var(--surface);

    box-shadow:
        0 10px 28px
        rgba(15,23,42,.04);

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

.advantage-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 18px 40px
        rgba(15,23,42,.08);
}

.advantage-number {
    width: 44px;
    height: 44px;

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

    margin-bottom: 20px;

    border-radius: 13px;

    background:
        color-mix(
            in srgb,
            var(--brand-primary) 9%,
            white
        );

    color: var(--brand-primary);

    font-size: .82rem;
    font-weight: 900;

    letter-spacing: .04em;
}

.advantage-card h3 {
    margin: 0 0 10px;

    color: var(--text);

    font-size: 1.22rem;
    line-height: 1.3;
}

.advantage-card p {
    margin: 0;

    color: var(--text-soft);

    line-height: 1.7;
}


/* ============================================================
   FOUNDATION 06 - RESPONSIVE
   ============================================================ */

@media (max-width: 1000px) {

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

    .advantages-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}

@media (max-width: 700px) {

    #tentang {
        scroll-margin-top: 92px;
    }

    .about-section,
    .advantages-section {
        padding: 54px 0;
    }

    .about-grid {
        gap: 26px;
    }

    .about-brand-head {
        align-items: flex-start;
    }

    .about-meta > div {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .advantages-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

}

/* ============================================================
   FOUNDATION 07 - GALERI JAMAAH
   ============================================================ */

#galeri,
#testimoni {
    scroll-margin-top: 104px;
}

.gallery-section {
    padding: 76px 0;
    background: var(--surface-soft);
}

.gallery-heading,
.testimonial-heading {
    margin-bottom: 32px;
}

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

.gallery-item {
    position: relative;

    min-width: 0;
    aspect-ratio: 4 / 3;

    padding: 0;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 18px;

    background: #ffffff;

    cursor: pointer;

    box-shadow:
        0 8px 24px
        rgba(15,23,42,.05);

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

.gallery-item:hover {
    transform: translateY(-3px);

    box-shadow:
        0 16px 36px
        rgba(15,23,42,.10);
}

.gallery-item img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .35s ease;
}

.gallery-item:hover img {
    transform: scale(1.035);
}

.gallery-item span {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;

    display: block;

    padding: 9px 11px;

    border-radius: 12px;

    background: rgba(15,23,42,.76);
    color: #ffffff;

    font-size: .78rem;
    font-weight: 700;

    text-align: left;

    backdrop-filter: blur(8px);
}

.gallery-empty,
.testimonial-empty {
    padding: 44px 24px;

    border: 1px dashed var(--border);
    border-radius: 20px;

    background: #ffffff;

    text-align: center;
}

.gallery-empty strong,
.testimonial-empty strong {
    display: block;
    margin-bottom: 8px;
}

.gallery-empty p,
.testimonial-empty p {
    max-width: 560px;

    margin: 0 auto;

    color: var(--text-soft);
    line-height: 1.65;
}


/* GALERI LIGHTBOX */

.gallery-lightbox[hidden] {
    display: none !important;
}

.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;

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

    padding: 30px 74px;

    background: rgba(2,6,23,.88);

    backdrop-filter: blur(7px);
}

.gallery-lightbox figure {
    width: min(100%, 980px);
    max-height: calc(100vh - 80px);

    margin: 0;

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

.gallery-lightbox figure img {
    display: block;

    max-width: 100%;
    max-height: calc(100vh - 140px);

    object-fit: contain;

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 24px 70px
        rgba(0,0,0,.35);
}

.gallery-lightbox figcaption {
    min-height: 24px;

    margin-top: 12px;

    color: rgba(255,255,255,.84);

    font-size: .92rem;

    text-align: center;
}

.gallery-lightbox-close,
.gallery-lightbox-nav {
    position: absolute;

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

    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;

    background: rgba(255,255,255,.12);
    color: #ffffff;

    cursor: pointer;

    backdrop-filter: blur(8px);
}

.gallery-lightbox-close {
    top: 20px;
    right: 20px;

    width: 44px;
    height: 44px;

    font-size: 1.7rem;
}

.gallery-lightbox-nav {
    top: 50%;

    width: 48px;
    height: 48px;

    transform: translateY(-50%);

    font-size: 2rem;
}

.gallery-lightbox-prev {
    left: 18px;
}

.gallery-lightbox-next {
    right: 18px;
}


/* ============================================================
   FOUNDATION 07 - TESTIMONI
   ============================================================ */

.testimonial-section {
    padding: 76px 0;
    background: #ffffff;
}

.testimonial-grid {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
    gap: 22px;
}

.testimonial-card {
    min-width: 0;

    display: flex;
    flex-direction: column;

    padding: 26px;

    border: 1px solid var(--border);
    border-radius: 20px;

    background: var(--surface);

    box-shadow:
        0 10px 28px
        rgba(15,23,42,.05);
}

.testimonial-quote {
    height: 42px;

    margin-bottom: 8px;

    color: var(--brand-primary);

    font-family: Georgia, serif;
    font-size: 3.5rem;
    line-height: 1;
}

.testimonial-message {
    flex: 1 1 auto;

    margin: 0 0 24px;

    color: var(--text-soft);

    line-height: 1.75;
}

.testimonial-person {
    display: flex;
    align-items: center;
    gap: 12px;

    padding-top: 18px;

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

.testimonial-person img,
.testimonial-avatar {
    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    border-radius: 50%;

    object-fit: cover;
}

.testimonial-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    background:
        color-mix(
            in srgb,
            var(--brand-primary) 10%,
            white
        );

    color: var(--brand-primary);

    font-weight: 900;
}

.testimonial-person strong {
    display: block;

    color: var(--text);
}

.testimonial-person span {
    display: block;

    margin-top: 2px;

    color: var(--text-soft);

    font-size: .82rem;
}


/* ============================================================
   FOUNDATION 07 - RESPONSIVE
   ============================================================ */

@media (max-width: 1000px) {

    .gallery-grid,
    .testimonial-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}

@media (max-width: 700px) {

    #galeri,
    #testimoni {
        scroll-margin-top: 92px;
    }

    .gallery-section,
    .testimonial-section {
        padding: 54px 0;
    }

    .gallery-grid,
    .testimonial-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .gallery-lightbox {
        padding: 64px 12px 22px;
    }

    .gallery-lightbox figure img {
        max-height: calc(100vh - 160px);
    }

    .gallery-lightbox-nav {
        top: auto;
        bottom: 18px;

        width: 44px;
        height: 44px;

        transform: none;
    }

    .gallery-lightbox-prev {
        left: calc(50% - 54px);
    }

    .gallery-lightbox-next {
        right: calc(50% - 54px);
    }

}

/* ============================================================
   FOUNDATION 07.2 - LIGHTBOX TANPA JAVASCRIPT
   Menggunakan :target agar lightbox selalu berfungsi.
   ============================================================ */

.gallery-lightbox-css {
    position: fixed;
    inset: 0;
    z-index: 5000;

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

    padding: 32px 78px;
}

.gallery-lightbox-css:target {
    display: flex;
}

.gallery-lightbox-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(2,6,23,.9);

    backdrop-filter: blur(8px);
}

.gallery-lightbox-dialog {
    position: relative;
    z-index: 2;

    width: min(100%, 1040px);
    max-height: calc(100vh - 64px);

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

.gallery-lightbox-dialog figure {
    width: 100%;
    max-height: calc(100vh - 80px);

    margin: 0;

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

.gallery-lightbox-dialog figure img {
    display: block;

    max-width: 100%;
    max-height: calc(100vh - 140px);

    object-fit: contain;

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 24px 80px
        rgba(0,0,0,.42);
}

.gallery-lightbox-dialog figcaption {
    margin-top: 12px;

    color: rgba(255,255,255,.88);

    font-size: .92rem;
    text-align: center;
}

.gallery-lightbox-css .gallery-lightbox-close,
.gallery-lightbox-css .gallery-lightbox-nav {
    position: absolute;
    z-index: 3;

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

    border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px;

    background: rgba(255,255,255,.14);
    color: #ffffff;

    text-decoration: none;

    backdrop-filter: blur(8px);
}

.gallery-lightbox-css .gallery-lightbox-close {
    top: -4px;
    right: -58px;

    width: 44px;
    height: 44px;

    font-size: 1.7rem;
}

.gallery-lightbox-css .gallery-lightbox-nav {
    top: 50%;

    width: 50px;
    height: 50px;

    transform: translateY(-50%);

    font-size: 2rem;
}

.gallery-lightbox-css .gallery-lightbox-prev {
    left: -64px;
}

.gallery-lightbox-css .gallery-lightbox-next {
    right: -64px;
}

@media (max-width: 700px) {

    .gallery-lightbox-css {
        padding: 62px 12px 76px;
    }

    .gallery-lightbox-dialog {
        max-height: calc(100vh - 120px);
    }

    .gallery-lightbox-dialog figure img {
        max-height: calc(100vh - 190px);
    }

    .gallery-lightbox-css .gallery-lightbox-close {
        top: -50px;
        right: 0;
    }

    .gallery-lightbox-css .gallery-lightbox-nav {
        top: auto;
        bottom: -58px;

        width: 44px;
        height: 44px;

        transform: none;
    }

    .gallery-lightbox-css .gallery-lightbox-prev {
        left: calc(50% - 52px);
    }

    .gallery-lightbox-css .gallery-lightbox-next {
        right: calc(50% - 52px);
    }

}

/* ============================================================
   FOUNDATION 08 - FAQ
   ============================================================ */

#faq,
#konsultasi {
    scroll-margin-top: 104px;
}

.faq-section {
    padding: 76px 0;
    background: var(--surface-soft);
}

.faq-heading {
    margin-bottom: 32px;
}

.faq-list {
    display: grid;
    gap: 14px;

    max-width: 920px;
}

.faq-item {
    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 7px 22px
        rgba(15,23,42,.04);
}

.faq-item summary {
    list-style: none;

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

    padding: 18px 20px;

    cursor: pointer;

    color: var(--text);

    font-size: 1rem;
    font-weight: 800;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-icon {
    width: 32px;
    height: 32px;

    flex: 0 0 32px;

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

    border-radius: 50%;

    background:
        color-mix(
            in srgb,
            var(--brand-primary) 9%,
            white
        );

    color: var(--brand-primary);

    font-size: 1.25rem;
    font-weight: 500;

    transition:
        transform .2s ease;
}

.faq-item[open] .faq-icon {
    transform: rotate(45deg);
}

.faq-answer {
    padding:
        0 20px 20px;

    color: var(--text-soft);

    line-height: 1.75;
}

.faq-empty {
    padding: 44px 24px;

    border: 1px dashed var(--border);
    border-radius: 20px;

    background: #ffffff;

    text-align: center;
}

.faq-empty strong {
    display: block;

    margin-bottom: 8px;
}

.faq-empty p {
    max-width: 560px;

    margin: 0 auto;

    color: var(--text-soft);

    line-height: 1.65;
}


/* ============================================================
   FOUNDATION 08 - CTA WHATSAPP FINAL
   ============================================================ */

.final-cta-section {
    padding: 72px 0;

    background: #ffffff;
}

.final-cta-card {
    position: relative;

    overflow: hidden;

    display: grid;
    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(260px, .65fr);

    align-items: center;
    gap: 34px;

    padding: 38px 42px;

    border-radius: 24px;

    background:
        radial-gradient(
            circle at top right,
            color-mix(in srgb,var(--brand-secondary) 22%,transparent),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            var(--brand-primary),
            color-mix(
                in srgb,
                var(--brand-primary) 82%,
                #000000
            )
        );

    color: #ffffff;

    box-shadow:
        0 18px 46px
        rgba(15,23,42,.12);
}

.final-cta-card::after {
    content: "";

    position: absolute;
    right: -90px;
    bottom: -120px;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.06);

    pointer-events: none;
}

.final-cta-copy {
    position: relative;
    z-index: 1;
}

.final-cta-badge {
    display: inline-flex;

    margin-bottom: 12px;

    color:
        color-mix(
            in srgb,
            var(--brand-secondary) 82%,
            white
        );

    font-size: .78rem;
    font-weight: 900;

    letter-spacing: .08em;
}

.final-cta-copy h2 {
    max-width: 760px;

    margin: 0 0 14px;

    font-size:
        clamp(
            2rem,
            4.5vw,
            3.7rem
        );

    line-height: 1.05;
    letter-spacing: -.035em;
}

.final-cta-copy p {
    max-width: 720px;

    margin: 0;

    color:
        rgba(255,255,255,.78);

    font-size: 1.02rem;
    line-height: 1.75;
}

.final-cta-action {
    position: relative;
    z-index: 1;

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

.final-cta-button {
    min-height: 54px;

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

    padding: 0 22px;

    border-radius: 14px;

    background: #ffffff;
    color: var(--brand-primary);

    font-weight: 850;

    text-align: center;

    box-shadow:
        0 12px 28px
        rgba(0,0,0,.14);

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

.final-cta-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 16px 32px
        rgba(0,0,0,.18);
}

.final-cta-action small {
    color:
        rgba(255,255,255,.68);

    text-align: center;
}


/* ============================================================
   FOUNDATION 08 - RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    .final-cta-card {
        grid-template-columns: 1fr;
    }

    .final-cta-action {
        max-width: 360px;
    }

}

@media (max-width: 700px) {

    #faq,
    #konsultasi {
        scroll-margin-top: 92px;
    }

    .faq-section,
    .final-cta-section {
        padding: 54px 0;
    }

    .faq-item summary {
        padding: 16px;
    }

    .faq-answer {
        padding:
            0 16px 16px;
    }

    .final-cta-card {
        padding: 28px 22px;

        border-radius: 20px;
    }

    .final-cta-action {
        max-width: none;
    }

}

/* ============================================================
   FOUNDATION 09 - KONTAK PRODUKSI
   ============================================================ */

#kontak {
    scroll-margin-top: 104px;
}

.contact-section {
    padding: 76px 0;
    background: var(--surface-soft);
}

.contact-heading {
    margin-bottom: 32px;
}

.contact-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(300px, .7fr);

    gap: 28px;

    align-items: stretch;
}

.contact-cards {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 16px;
}

.contact-card {
    min-width: 0;

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

    min-height: 142px;

    padding: 22px;

    border: 1px solid var(--border);
    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 8px 24px
        rgba(15,23,42,.04);

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

.contact-card:hover {
    transform: translateY(-3px);

    border-color:
        color-mix(
            in srgb,
            var(--brand-primary) 35%,
            var(--border)
        );

    box-shadow:
        0 16px 34px
        rgba(15,23,42,.08);
}

.contact-card-label {
    margin-bottom: 7px;

    color: var(--brand-primary);

    font-size: .76rem;
    font-weight: 900;

    letter-spacing: .06em;
}

.contact-card strong {
    color: var(--text);

    font-size: 1rem;

    overflow-wrap: anywhere;
}

.contact-card small {
    margin-top: 8px;

    color: var(--text-soft);
}

.contact-location {
    padding: 28px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            var(--brand-primary),
            color-mix(
                in srgb,
                var(--brand-primary) 84%,
                #000000
            )
        );

    color: #ffffff;

    box-shadow:
        0 16px 38px
        rgba(15,23,42,.12);
}

.contact-location-label {
    display: inline-block;

    margin-bottom: 12px;

    color:
        color-mix(
            in srgb,
            var(--brand-secondary) 82%,
            white
        );

    font-size: .76rem;
    font-weight: 900;

    letter-spacing: .08em;
}

.contact-location h3 {
    margin: 0 0 16px;

    font-size: 1.45rem;
}

.contact-location p {
    margin: 0 0 24px;

    color: rgba(255,255,255,.8);

    line-height: 1.75;
}

.contact-city {
    padding-top: 18px;

    border-top:
        1px solid
        rgba(255,255,255,.16);
}

.contact-city strong,
.contact-city span {
    display: block;
}

.contact-city span {
    margin-top: 4px;

    color: rgba(255,255,255,.72);
}


/* ============================================================
   FOUNDATION 09 - FOOTER PRODUKSI
   ============================================================ */

.public-footer {
    margin-top: auto;

    padding:
        54px 0 22px;

    background: #0f172a;
    color: #ffffff;
}

.footer-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(150px, .6fr)
        minmax(220px, 1fr)
        minmax(200px, .8fr);

    gap: 34px;
}

.footer-brand-row {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 14px;
}

.footer-logo {
    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    border-radius: 50%;

    object-fit: contain;

    padding: 6px;

    background: #ffffff;
}

.footer-brand {
    display: block;

    margin: 0;

    font-size: 1.18rem;
}

.footer-company-name {
    display: block;

    margin-top: 3px;

    color:
        rgba(255,255,255,.58);

    font-size: .82rem;
}

.footer-title {
    display: block;

    margin-bottom: 14px;

    color: #ffffff;

    font-size: .94rem;
}

.footer-nav,
.footer-contact-list {
    display: grid;
    gap: 9px;
}

.footer-nav a,
.footer-contact-list a {
    color:
        rgba(255,255,255,.68);

    font-size: .9rem;

    line-height: 1.55;

    overflow-wrap: anywhere;
}

.footer-nav a:hover,
.footer-contact-list a:hover {
    color: #ffffff;
}

.public-footer p {
    margin: 8px 0;

    color:
        rgba(255,255,255,.68);

    line-height: 1.65;
}

.footer-muted {
    font-size: .92rem;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    margin-top: 38px;
    padding-top: 20px;

    border-top:
        1px solid
        rgba(255,255,255,.12);

    color:
        rgba(255,255,255,.52);

    font-size: .86rem;
}


/* ============================================================
   FOUNDATION 09 - RESPONSIVE
   ============================================================ */

@media (max-width: 1000px) {

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

    .footer-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}

@media (max-width: 700px) {

    #kontak {
        scroll-margin-top: 92px;
    }

    .contact-section {
        padding: 54px 0;
    }

    .contact-cards {
        grid-template-columns: 1fr;
    }

    .contact-card {
        min-height: 116px;
    }

    .contact-location {
        padding: 24px 20px;
    }

    .footer-grid {
        grid-template-columns: 1fr;

        gap: 28px;
    }

    .footer-bottom {
        flex-direction: column;

        gap: 8px;
    }

}

/* ============================================================
   FOUNDATION 09.1 - FINAL POLISH
   ============================================================ */

.contact-card strong {
    overflow-wrap: break-word;
    word-break: normal;
}

.contact-card[href^="mailto:"] strong,
.contact-card[href^="http"] strong {
    font-size: .94rem;
    line-height: 1.45;
}

@media (min-width: 701px) and (max-width: 1180px) {

    .contact-card strong {
        font-size: .94rem;
    }

    .contact-card[href^="mailto:"] strong,
    .contact-card[href^="http"] strong {
        font-size: .88rem;
    }

}

@media (max-width: 700px) {

    .contact-card strong,
    .contact-card[href^="mailto:"] strong,
    .contact-card[href^="http"] strong {
        font-size: .98rem;
    }

}

/* ============================================================
   FOUNDATION 11.2B - AGENT REFERRAL CARD
   ============================================================ */

.agent-referral-section {
    padding: 0 0 34px;
    background: #ffffff;
}

.agent-referral-card {
    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;
    gap: 18px;

    padding: 20px 22px;

    border: 1px solid
        color-mix(
            in srgb,
            var(--brand-primary) 18%,
            var(--border)
        );

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--brand-primary) 6%,
                white
            ),
            #ffffff
        );

    box-shadow:
        0 8px 24px
        rgba(15,23,42,.05);
}

.agent-referral-icon {
    width: 56px;
    height: 56px;

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

    border-radius: 50%;

    background:
        color-mix(
            in srgb,
            var(--brand-primary) 12%,
            white
        );

    font-size: 1.45rem;
}

.agent-referral-copy {
    min-width: 0;
}

.agent-referral-label {
    display: block;

    margin-bottom: 3px;

    color: var(--brand-primary);

    font-size: .72rem;
    font-weight: 900;

    letter-spacing: .08em;
}

.agent-referral-copy h2 {
    margin: 0;

    color: var(--text);

    font-size: 1.3rem;
}

.agent-referral-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 6px;
}

.agent-referral-meta span {
    display: inline-flex;

    padding: 4px 8px;

    border-radius: 999px;

    background:
        color-mix(
            in srgb,
            var(--brand-primary) 8%,
            white
        );

    color: var(--brand-primary);

    font-size: .76rem;
    font-weight: 800;
}

.agent-referral-copy p {
    margin: 8px 0 0;

    color: var(--text-soft);

    font-size: .9rem;
    line-height: 1.55;
}

.agent-referral-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;

    min-width: 190px;
}

.agent-referral-status,
.agent-referral-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 0 16px;

    border-radius: 12px;

    font-weight: 800;
}

.agent-referral-status {
    background:
        color-mix(
            in srgb,
            var(--brand-primary) 10%,
            white
        );

    color: var(--brand-primary);
}

.agent-referral-button {
    background: var(--brand-primary);
    color: #ffffff;
}

.agent-referral-action small {
    max-width: 240px;

    color: var(--text-soft);

    font-size: .76rem;
    text-align: right;
    line-height: 1.4;
}

@media (max-width: 780px) {

    .agent-referral-section {
        padding-bottom: 24px;
    }

    .agent-referral-card {
        grid-template-columns:
            auto
            minmax(0, 1fr);
    }

    .agent-referral-action {
        grid-column: 1 / -1;

        width: 100%;

        align-items: stretch;

        min-width: 0;
    }

    .agent-referral-action small {
        max-width: none;
        text-align: left;
    }

}

@media (max-width: 520px) {

    .agent-referral-card {
        grid-template-columns: 1fr;

        padding: 18px;
    }

    .agent-referral-icon {
        width: 48px;
        height: 48px;
    }

}

/* ============================================================
   FOUNDATION 11.3A - GLOBAL LEAD FORM
   ============================================================ */

.lead-page {
    padding: 68px 0 82px;
    background: var(--surface-soft);
}

.lead-layout {
    display: grid;
    grid-template-columns:
        minmax(0, .9fr)
        minmax(360px, 1.1fr);

    gap: 52px;
    align-items: start;
}

.lead-intro {
    padding-top: 18px;
}

.lead-intro h1 {
    max-width: 680px;

    margin: 12px 0 20px;

    color: var(--text);

    font-size:
        clamp(
            2.5rem,
            5vw,
            4.5rem
        );

    line-height: 1.02;
    letter-spacing: -.045em;
}

.lead-intro > p {
    max-width: 660px;

    margin: 0;

    color: var(--text-soft);

    font-size: 1.06rem;
    line-height: 1.8;
}

.lead-referral-info {
    margin-top: 28px;
    padding: 18px 20px;

    border: 1px solid
        color-mix(
            in srgb,
            var(--brand-primary) 20%,
            var(--border)
        );

    border-radius: 16px;

    background: #ffffff;
}

.lead-referral-info span,
.lead-referral-info small {
    display: block;
}

.lead-referral-info span {
    color: var(--brand-primary);

    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .06em;
}

.lead-referral-info strong {
    display: block;

    margin-top: 5px;

    color: var(--text);
    font-size: 1.16rem;
}

.lead-referral-info small {
    margin-top: 3px;

    color: var(--text-soft);
}

.lead-form-card {
    padding: 30px;

    border: 1px solid var(--border);
    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 16px 42px
        rgba(15,23,42,.07);
}

.lead-alert {
    margin-bottom: 14px;
    padding: 12px 14px;

    border: 1px solid #fecaca;
    border-radius: 12px;

    background: #fef2f2;
    color: #991b1b;

    font-size: .92rem;
}

.lead-field {
    margin-bottom: 18px;
}

.lead-field label {
    display: block;

    margin-bottom: 7px;

    color: var(--text);
    font-size: .9rem;
    font-weight: 800;
}

.lead-field label span {
    color: #dc2626;
}

.lead-field input,
.lead-field select,
.lead-field textarea {
    width: 100%;

    padding: 13px 14px;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: #ffffff;
    color: var(--text);

    font: inherit;
}

.lead-field input:focus,
.lead-field select:focus,
.lead-field textarea:focus {
    outline: 0;

    border-color:
        color-mix(
            in srgb,
            var(--brand-primary) 55%,
            var(--border)
        );

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--brand-primary) 10%,
            transparent
        );
}

.lead-field textarea {
    resize: vertical;
}

.lead-submit {
    width: 100%;

    border: 0;
    cursor: pointer;
}

.lead-privacy {
    margin: 12px 0 0;

    color: var(--text-soft);

    font-size: .78rem;
    line-height: 1.55;
    text-align: center;
}

.lead-honeypot {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;
}

.lead-success {
    padding: 20px 4px;

    text-align: center;
}

.lead-success-icon {
    width: 64px;
    height: 64px;

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

    margin: 0 auto 18px;

    border-radius: 50%;

    background:
        color-mix(
            in srgb,
            var(--brand-primary) 12%,
            white
        );

    color: var(--brand-primary);

    font-size: 1.7rem;
    font-weight: 900;
}

.lead-success h2 {
    margin: 0 0 10px;

    color: var(--text);
}

.lead-success p {
    margin: 0;

    color: var(--text-soft);
}

.lead-code {
    margin: 22px 0;

    padding: 12px;

    border-radius: 12px;

    background: var(--surface-soft);
    color: var(--text-soft);
}

.lead-code strong {
    color: var(--brand-primary);
}

@media (max-width: 900px) {

    .lead-layout {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .lead-intro {
        padding-top: 0;
    }

}

@media (max-width: 600px) {

    .lead-page {
        padding: 46px 0 60px;
    }

    .lead-form-card {
        padding: 22px 18px;
        border-radius: 18px;
    }

}



/* ============================================================
   PUBLIC REVAMP P2A - BROCHURE FULL WIDTH
   Brosur paket tampil penuh selebar kartu, tinggi menyesuaikan.
   ============================================================ */

.package-image-mode-contain .package-image-wrap .package-image-gradient {
    display: none !important;
}

.package-image-mode-contain .package-type {
    top: 12px;
    left: 12px;
    z-index: 3;
}

.package-image-mode-contain .package-card {
    overflow: hidden;
}



/* ============================================================
   PUBLIC REVAMP P2A.1 - PACKAGE LIST IMAGE CROPPED
   Halaman daftar paket: brosur tampil selebar kartu dengan
   tinggi ringkas. Halaman detail paket tetap menampilkan gambar utuh.
   ============================================================ */

#paket .package-image-mode-contain .package-image-wrap,
.package-section .package-image-mode-contain .package-image-wrap {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    overflow: hidden !important;
    background: #f4f7f5 !important;
}

#paket .package-image-mode-contain .package-image,
.package-section .package-image-mode-contain .package-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    background: transparent !important;
}

/* Detail paket tidak ikut aturan crop daftar paket. */
.detail-page .detail-media img,
.detail-page .detail-image-placeholder {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center top !important;
    background: #fff !important;
}

@media (max-width: 700px) {
    #paket .package-image-mode-contain .package-image-wrap,
    .package-section .package-image-mode-contain .package-image-wrap {
        aspect-ratio: 16 / 10 !important;
    }
}


/* ============================================================
   PUBLIC REVAMP P2A.2 - BROSUR DAFTAR PAKET LEBIH PENDEK
   Permintaan revisi:
   - daftar paket: gambar brosur cukup tampil bagian atas saja
   - bagian bawah dipotong
   - lebar tetap penuh mengikuti kartu
   - detail paket tetap utuh penuh
   ============================================================ */

/* Halaman daftar paket */
#paket .package-image-mode-contain .package-image-wrap,
.package-section .package-image-mode-contain .package-image-wrap {
    width: 100% !important;
    height: clamp(260px, 28vw, 380px) !important;
    min-height: 260px !important;
    max-height: 380px !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    background: #f4f7f5 !important;
    border-radius: 1.5rem 1.5rem 0 0 !important;
}

#paket .package-image-mode-contain .package-image,
.package-section .package-image-mode-contain .package-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important; /* fokus ke separuh atas */
    display: block !important;
    background: transparent !important;
}

/* Sedikit perkuat proporsi kartu daftar paket */
#paket .package-card,
.package-section .package-card {
    overflow: hidden !important;
}

/* Mode mobile: tetap ringkas, tidak terlalu tinggi */
@media (max-width: 991.98px) {
    #paket .package-image-mode-contain .package-image-wrap,
    .package-section .package-image-mode-contain .package-image-wrap {
        height: clamp(240px, 52vw, 340px) !important;
        min-height: 240px !important;
        max-height: 340px !important;
    }
}

/* Halaman detail paket tetap utuh penuh */
.package-detail-page .detail-media img,
.package-detail-page .detail-image-placeholder,
.detail-page .detail-media img,
.detail-page .detail-image-placeholder {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center top !important;
    background: #fff !important;
}


/* ============================================================
   PUBLIC REVAMP P2A.3 - PACKAGE COMPACT + TYPOGRAPHY CONSISTENT
   - Brosur daftar paket dibuat jauh lebih pendek
   - Fokus hanya bagian atas brosur
   - Font mengikuti sistem global website
   - Ukuran font disamakan dengan section lain
   - Detail paket tetap menampilkan gambar utuh
   ============================================================ */

/* ------------------------------------------------------------
   TYPOGRAPHY: gunakan font global website, jangan beda sendiri
   ------------------------------------------------------------ */
.package-section,
.package-section * {
    font-family: inherit !important;
}

.package-heading h2 {
    margin: 0 0 14px !important;
    font-size: clamp(2rem, 4vw, 3.2rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -.035em !important;
    font-weight: 800 !important;
}

.package-heading p {
    margin: 0 !important;
    color: var(--text-soft) !important;
    font-size: 1.08rem !important;
    line-height: 1.75 !important;
    font-weight: 400 !important;
}

.package-heading .eyebrow {
    font-size: .82rem !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
}

.package-body h3 {
    min-height: auto !important;
    margin: 0 0 10px !important;
    font-size: 1.22rem !important;
    line-height: 1.3 !important;
    font-weight: 750 !important;
    letter-spacing: -.02em !important;
}

.package-code {
    font-size: .76rem !important;
    font-weight: 800 !important;
}

.package-meta span,
.package-next-departure small,
.package-price-block small,
.package-price-caption {
    font-size: .76rem !important;
}

.package-next-departure strong {
    font-size: .92rem !important;
}

.package-price-block strong {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
}

.package-detail-btn,
.package-wa-btn {
    font-size: .86rem !important;
    font-weight: 750 !important;
}

/* ------------------------------------------------------------
   BROSUR DAFTAR PAKET: pendek, lebar tetap penuh kartu
   ------------------------------------------------------------ */
#paket .package-image-mode-contain .package-image-wrap,
.package-section .package-image-mode-contain .package-image-wrap {
    width: 100% !important;
    height: 210px !important;
    min-height: 210px !important;
    max-height: 210px !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    background: #f4f7f5 !important;
}

#paket .package-image-mode-contain .package-image,
.package-section .package-image-mode-contain .package-image {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center top !important;
    background: transparent !important;
}

/* badge tidak terlalu besar di atas brosur */
.package-section .package-type {
    top: 11px !important;
    left: 11px !important;
    min-height: 27px !important;
    padding: 0 10px !important;
    font-size: .72rem !important;
}

/* ------------------------------------------------------------
   MOBILE: tetap pendek dan proporsional
   ------------------------------------------------------------ */
@media (max-width: 700px) {

    .package-heading h2 {
        font-size: clamp(1.9rem, 9vw, 2.55rem) !important;
    }

    .package-heading p {
        font-size: 1rem !important;
    }

    #paket .package-image-mode-contain .package-image-wrap,
    .package-section .package-image-mode-contain .package-image-wrap {
        height: 190px !important;
        min-height: 190px !important;
        max-height: 190px !important;
    }

    .package-body h3 {
        font-size: 1.15rem !important;
    }
}

/* ------------------------------------------------------------
   DETAIL PAKET: gambar tetap utuh penuh
   ------------------------------------------------------------ */
.detail-page .detail-media img,
.detail-page .detail-image-placeholder {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center top !important;
    background: #fff !important;
}


/* ============================================================
   PUBLIC REVAMP P2A.4 - PACKAGE IMAGE SQUARE TOP CROP
   - Khusus section daftar paket
   - Gambar dibuat kotak: tinggi = lebar
   - Crop dari bagian atas gambar
   - Area bawah brosur dipotong
   - Detail paket tetap utuh
   ============================================================ */

/* LISTING PAKET: gambar kotak / square */
#paket .package-image-mode-contain .package-image-wrap,
.package-section .package-image-mode-contain .package-image-wrap {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    background: #f4f7f5 !important;
    display: block !important;
}

#paket .package-image-mode-contain .package-image,
.package-section .package-image-mode-contain .package-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
}

/* Jaga proporsi dan jarak konten kartu */
.package-section .package-card {
    overflow: hidden !important;
}

.package-section .package-body {
    padding-top: 18px !important;
}

/* Badge kategori tetap rapi di atas gambar */
.package-section .package-type {
    top: 12px !important;
    left: 12px !important;
    z-index: 3 !important;
}

/* Mobile tetap kotak */
@media (max-width: 700px) {
    #paket .package-image-mode-contain .package-image-wrap,
    .package-section .package-image-mode-contain .package-image-wrap {
        aspect-ratio: 1 / 1 !important;
    }
}

/* DETAIL PAKET: tetap utuh, jangan ikut terpotong */
.detail-page .detail-media img,
.detail-page .detail-image-placeholder {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center top !important;
    background: #fff !important;
}


/* ============================================================
   FIX P2A.4 - SELECTOR PACKAGE IMAGE MODE
   Class package-image-mode-contain berada pada elemen section #paket
   yang sama, bukan pada elemen anak.
   ============================================================ */

#paket.package-image-mode-contain .package-image-wrap {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    background: #f4f7f5 !important;
    display: block !important;
}

#paket.package-image-mode-contain .package-image {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center top !important;
    background: transparent !important;
}

#paket.package-image-mode-contain .package-image-gradient {
    display: none !important;
}

/* Mode cover tetap seperti semula */
#paket.package-image-mode-cover .package-image-wrap {
    aspect-ratio: 16 / 10 !important;
}

#paket.package-image-mode-cover .package-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Detail paket tidak ikut aturan crop listing */
.detail-page .detail-media img,
.detail-page .detail-image-placeholder {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center top !important;
    background: #fff !important;
}


/* ============================================================
   PUBLIC REVAMP P2B - KEBERANGKATAN PREMIUM
   UI only. Data tetap memakai helper/global departure system.
   ============================================================ */

.departure-section,
.departure-section *{
    font-family:inherit !important;
}

.departure-section{
    position:relative;
    overflow:hidden;
    padding:82px 0;
    background:
        radial-gradient(circle at 10% 12%,color-mix(in srgb,var(--brand-primary) 5.5%,transparent),transparent 24%),
        linear-gradient(180deg,#ffffff 0%,#fbfdfc 100%);
}

.departure-section::before{
    content:"";
    position:absolute;
    right:-130px;
    bottom:-160px;
    width:320px;
    height:320px;
    border-radius:50%;
    background:color-mix(in srgb,var(--brand-secondary) 5.5%,transparent);
    pointer-events:none;
}

.departure-heading-wrap{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:32px;
    margin-bottom:34px;
}

.departure-heading{
    max-width:760px;
    margin-bottom:0 !important;
}

.departure-heading h2{
    margin:0 0 14px !important;
    font-size:clamp(2rem,4vw,3.2rem) !important;
    line-height:1.1 !important;
    letter-spacing:-.035em !important;
    font-weight:800 !important;
}

.departure-heading p{
    margin:0 !important;
    max-width:680px;
    color:var(--text-soft) !important;
    font-size:1.08rem !important;
    line-height:1.75 !important;
}

.departure-heading-note{
    width:min(100%,340px);
    display:flex;
    align-items:flex-start;
    gap:11px;
    padding:15px 16px;
    border:1px solid color-mix(in srgb,var(--brand-primary) 12%,transparent);
    border-radius:16px;
    background:rgba(255,255,255,.88);
    box-shadow:0 12px 28px rgba(15,23,42,.04);
}

.departure-heading-note-icon{
    width:32px;
    height:32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    border-radius:10px;
    background:#eaf7f0;
    color:var(--brand-primary);
    font-size:.9rem;
}

.departure-heading-note strong{
    display:block;
    margin-bottom:2px;
    color:#213127;
    font-size:.9rem;
}

.departure-heading-note small{
    display:block;
    color:#738078;
    font-size:.76rem;
    line-height:1.45;
}

.departure-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    justify-content:stretch !important;
    align-items:stretch !important;
    gap:22px !important;
}

.departure-card{
    position:relative;
    width:100% !important;
    max-width:none !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden;
    border:1px solid #e1e8e4;
    border-radius:22px;
    background:#fff;
    box-shadow:0 14px 34px rgba(15,23,42,.05);
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}

.departure-card:hover{
    transform:translateY(-4px);
    border-color:color-mix(in srgb,var(--brand-primary) 18%,transparent);
    box-shadow:0 22px 44px rgba(15,23,42,.09);
}

.departure-card-top{
    position:relative;
    padding:18px 20px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    border-bottom:1px solid color-mix(in srgb,var(--brand-primary) 10%,transparent);
    background:
        linear-gradient(135deg,#edf8f2 0%,#f8fcfa 100%);
}

.departure-card-top::after{
    content:"";
    position:absolute;
    left:20px;
    right:20px;
    bottom:-1px;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--brand-primary),transparent 72%);
    opacity:.7;
}

.departure-date-label{
    display:flex !important;
    align-items:center;
    gap:6px;
    margin-bottom:5px !important;
    color:#6b7a71 !important;
    font-size:.7rem !important;
    font-weight:800 !important;
    letter-spacing:.07em !important;
}

.departure-date-label > span{
    color:var(--brand-secondary);
}

.departure-date-box strong{
    color:#173226 !important;
    font-size:1.05rem !important;
    font-weight:800 !important;
}

.departure-status{
    min-height:27px !important;
    padding:0 9px !important;
    font-size:.7rem !important;
    font-weight:800 !important;
}

.departure-card-body{
    flex:1 1 auto;
    padding:21px !important;
}

.departure-package-name{
    margin-bottom:7px !important;
    color:var(--brand-primary) !important;
    font-size:.76rem !important;
    font-weight:800 !important;
    letter-spacing:.035em !important;
}

.departure-card h3{
    margin:0 0 6px !important;
    color:#1e2d25 !important;
    font-size:1.18rem !important;
    line-height:1.32 !important;
    font-weight:780 !important;
    letter-spacing:-.02em !important;
}

.departure-code{
    margin-bottom:15px !important;
    color:#88928c !important;
    font-size:.73rem !important;
    font-weight:650 !important;
}

.departure-info-list{
    margin-top:4px !important;
    border-top:1px solid #edf0ee !important;
}

.departure-info-row{
    grid-template-columns:minmax(95px,.85fr) minmax(0,1.15fr) !important;
    gap:12px !important;
    padding:10px 0 !important;
    border-bottom:1px solid #edf0ee !important;
}

.departure-info-row span{
    color:#7a867f !important;
    font-size:.76rem !important;
}

.departure-info-row strong{
    color:#26362d !important;
    font-size:.8rem !important;
    font-weight:720 !important;
}

.departure-actions{
    margin-top:auto !important;
    padding-top:18px !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:9px !important;
}

.departure-package-btn,
.departure-wa-btn{
    min-height:45px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    padding:0 12px !important;
    border-radius:12px !important;
    font-size:.84rem !important;
    font-weight:780 !important;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.departure-package-btn{
    border:1px solid #dce4df !important;
    background:#fff !important;
    color:#26362d !important;
}

.departure-package-btn:hover{
    color:var(--brand-primary) !important;
    border-color:color-mix(in srgb,var(--brand-primary) 28%,transparent) !important;
    transform:translateY(-1px);
}

.departure-wa-btn{
    background:linear-gradient(135deg,var(--brand-primary),var(--brand-primary-light)) !important;
    color:#fff !important;
    box-shadow:0 9px 20px color-mix(in srgb,var(--brand-primary) 18%,transparent);
}

.departure-wa-btn:hover{
    color:#fff !important;
    transform:translateY(-1px);
    box-shadow:0 12px 24px color-mix(in srgb,var(--brand-primary) 23%,transparent);
}

@media(max-width:1000px){
    .departure-heading-wrap{
        align-items:flex-start;
        flex-direction:column;
        gap:18px;
    }

    .departure-heading-note{
        width:100%;
        max-width:560px;
    }

    .departure-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}

@media(max-width:700px){
    .departure-section{
        padding:58px 0 !important;
    }

    .departure-heading-wrap{
        margin-bottom:26px;
    }

    .departure-heading h2{
        font-size:clamp(1.9rem,9vw,2.55rem) !important;
    }

    .departure-heading p{
        font-size:1rem !important;
    }

    .departure-grid{
        grid-template-columns:1fr !important;
        gap:18px !important;
    }

    .departure-info-row{
        grid-template-columns:1fr !important;
        gap:3px !important;
    }

    .departure-info-row strong{
        text-align:left !important;
    }

    .departure-actions{
        grid-template-columns:1fr !important;
    }
}


/* ============================================================
   PUBLIC REVAMP P3 - TENTANG & TRUST
   UI only. Semua konten utama tetap berasal dari setting global.
   ============================================================ */

.about-section,
.about-section *,
.advantages-section,
.advantages-section *{
    font-family:inherit !important;
}

.about-section{
    position:relative;
    overflow:hidden;
    padding:82px 0;
    background:
        radial-gradient(circle at 88% 18%,color-mix(in srgb,var(--brand-secondary) 7%,transparent),transparent 24%),
        linear-gradient(180deg,#f7faf8 0%,#f4f8f6 100%);
}

.about-section::before{
    content:"";
    position:absolute;
    left:-150px;
    bottom:-150px;
    width:300px;
    height:300px;
    border-radius:50%;
    background:color-mix(in srgb,var(--brand-primary) 4.5%,transparent);
    pointer-events:none;
}

.about-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr) !important;
    gap:52px !important;
    align-items:center !important;
}

.about-copy h2{
    max-width:760px !important;
    margin:14px 0 20px !important;
    color:#17231c !important;
    font-size:clamp(2.05rem,4vw,3.2rem) !important;
    line-height:1.08 !important;
    letter-spacing:-.035em !important;
    font-weight:800 !important;
}

.about-description{
    max-width:760px !important;
    margin:0 !important;
    color:var(--text-soft) !important;
    font-size:1.05rem !important;
    line-height:1.82 !important;
}

.about-trust-row{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    max-width:720px;
    margin-top:28px;
}

.about-trust-item{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:14px;
    border:1px solid color-mix(in srgb,var(--brand-primary) 11%,transparent);
    border-radius:15px;
    background:rgba(255,255,255,.78);
}

.about-trust-icon{
    width:27px;
    height:27px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    border-radius:9px;
    background:#e9f7ef;
    color:var(--brand-primary);
    font-size:.75rem;
    font-weight:900;
}

.about-trust-item strong{
    display:block;
    margin-bottom:3px;
    color:#223128;
    font-size:.84rem;
}

.about-trust-item small{
    display:block;
    color:#77827b;
    font-size:.73rem;
    line-height:1.42;
}

.about-brand-panel{
    position:relative;
    overflow:hidden !important;
    border:1px solid color-mix(in srgb,var(--brand-primary) 13%,transparent) !important;
    border-radius:24px !important;
    background:#fff !important;
    box-shadow:0 18px 42px rgba(15,23,42,.07) !important;
}

.about-panel-label{
    padding:13px 22px 0;
    color:var(--brand-primary);
    font-size:.7rem;
    font-weight:850;
    letter-spacing:.09em;
}

.about-brand-head{
    padding:17px 22px 20px !important;
    background:transparent !important;
    border-bottom:1px solid #edf0ee !important;
}

.about-brand-head img{
    width:64px !important;
    height:64px !important;
    flex:0 0 64px !important;
    border-radius:18px !important;
    border:1px solid #e4e9e6 !important;
    box-shadow:0 8px 20px rgba(15,23,42,.05);
}

.about-brand-head strong{
    font-size:1.12rem !important;
    font-weight:800 !important;
}

.about-brand-head span{
    font-size:.82rem !important;
}

.about-meta{
    padding:4px 22px 8px !important;
}

.about-meta > div{
    grid-template-columns:90px minmax(0,1fr) !important;
    gap:14px !important;
    padding:12px 0 !important;
    border-bottom:1px solid #edf0ee !important;
}

.about-meta span{
    color:#7b867f !important;
    font-size:.76rem !important;
}

.about-meta strong{
    color:#29382f !important;
    font-size:.83rem !important;
    font-weight:700 !important;
}

.about-panel-actions{
    padding:8px 22px 22px;
}

.about-contact-btn{
    width:100%;
    min-height:46px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:0 15px;
    border-radius:12px;
    background:linear-gradient(135deg,var(--brand-primary),var(--brand-primary-light));
    color:#fff;
    font-size:.84rem;
    font-weight:800;
    box-shadow:0 10px 22px color-mix(in srgb,var(--brand-primary) 18%,transparent);
    transition:transform .18s ease,box-shadow .18s ease;
}

.about-contact-btn:hover{
    color:#fff;
    transform:translateY(-1px);
    box-shadow:0 13px 26px color-mix(in srgb,var(--brand-primary) 23%,transparent);
}

/* KEUNGGULAN / TRUST CARDS */

.advantages-section{
    position:relative;
    padding:82px 0 !important;
    background:#fff !important;
}

.advantages-heading{
    max-width:780px;
    margin-bottom:34px !important;
}

.advantages-heading h2{
    margin:0 0 14px !important;
    font-size:clamp(2rem,4vw,3.2rem) !important;
    line-height:1.1 !important;
    letter-spacing:-.035em !important;
    font-weight:800 !important;
}

.advantages-heading p{
    margin:0 !important;
    color:var(--text-soft) !important;
    font-size:1.05rem !important;
    line-height:1.75 !important;
}

.advantages-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:20px !important;
}

.advantage-card{
    position:relative;
    min-width:0;
    padding:24px !important;
    overflow:hidden;
    border:1px solid #e3e9e5 !important;
    border-radius:20px !important;
    background:linear-gradient(180deg,#ffffff,#fbfdfc) !important;
    box-shadow:0 12px 30px rgba(15,23,42,.045) !important;
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease !important;
}

.advantage-card::after{
    content:"";
    position:absolute;
    width:100px;
    height:100px;
    right:-55px;
    bottom:-55px;
    border-radius:50%;
    background:color-mix(in srgb,var(--brand-primary) 4.5%,transparent);
}

.advantage-card:hover{
    transform:translateY(-4px) !important;
    border-color:color-mix(in srgb,var(--brand-primary) 18%,transparent) !important;
    box-shadow:0 18px 40px rgba(15,23,42,.08) !important;
}

.advantage-icon-wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:20px;
}

.advantage-icon{
    width:42px;
    height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:13px;
    background:#eaf7f0;
    color:var(--brand-primary);
    font-size:.9rem;
    font-weight:900;
}

.advantage-number{
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:#b0bab4 !important;
    font-size:.72rem !important;
    font-weight:850 !important;
    letter-spacing:.06em !important;
}

.advantage-card h3{
    margin:0 0 9px !important;
    color:#213128 !important;
    font-size:1.14rem !important;
    line-height:1.32 !important;
    font-weight:780 !important;
}

.advantage-card p{
    margin:0 !important;
    color:#6e7a73 !important;
    font-size:.91rem !important;
    line-height:1.7 !important;
}

@media(max-width:1000px){
    .about-grid{
        grid-template-columns:1fr !important;
        gap:34px !important;
    }

    .about-brand-panel{
        max-width:680px;
    }

    .advantages-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}

@media(max-width:700px){
    .about-section,
    .advantages-section{
        padding:58px 0 !important;
    }

    .about-copy h2,
    .advantages-heading h2{
        font-size:clamp(1.9rem,9vw,2.55rem) !important;
    }

    .about-description,
    .advantages-heading p{
        font-size:1rem !important;
    }

    .about-trust-row{
        grid-template-columns:1fr;
        margin-top:22px;
    }

    .about-meta > div{
        grid-template-columns:1fr !important;
        gap:4px !important;
    }

    .advantages-grid{
        grid-template-columns:1fr !important;
        gap:16px !important;
    }
}


/* ============================================================
   PUBLIC REVAMP P4A - GALERI SOCIAL PROOF
   UI only. Sumber gambar/caption dan lightbox tetap global.
   ============================================================ */

.gallery-section,
.gallery-section *{
    font-family:inherit !important;
}

.gallery-section{
    position:relative;
    overflow:hidden;
    padding:82px 0 !important;
    background:
        radial-gradient(circle at 90% 12%,color-mix(in srgb,var(--brand-secondary) 6%,transparent),transparent 24%),
        linear-gradient(180deg,#f5f9f7 0%,#f8fbf9 100%) !important;
}

.gallery-section::before{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    left:-160px;
    bottom:-150px;
    border-radius:50%;
    background:color-mix(in srgb,var(--brand-primary) 4%,transparent);
    pointer-events:none;
}

.gallery-heading{
    max-width:760px;
    margin-bottom:18px !important;
}

.gallery-heading h2{
    margin:0 0 14px !important;
    color:#17231c !important;
    font-size:clamp(2rem,4vw,3.2rem) !important;
    line-height:1.1 !important;
    letter-spacing:-.035em !important;
    font-weight:800 !important;
}

.gallery-heading p{
    margin:0 !important;
    max-width:680px;
    color:var(--text-soft) !important;
    font-size:1.05rem !important;
    line-height:1.75 !important;
}

.gallery-summary{
    width:max-content;
    max-width:100%;
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 28px;
    padding:11px 13px;
    border:1px solid color-mix(in srgb,var(--brand-primary) 11%,transparent);
    border-radius:14px;
    background:rgba(255,255,255,.82);
    box-shadow:0 10px 24px rgba(15,23,42,.035);
}

.gallery-summary-icon{
    width:29px;
    height:29px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    border-radius:9px;
    background:#eaf7f0;
    color:var(--brand-primary);
    font-size:.78rem;
}

.gallery-summary strong{
    display:block;
    margin-bottom:1px;
    color:#26362d;
    font-size:.83rem;
}

.gallery-summary small{
    display:block;
    color:#7b867f;
    font-size:.72rem;
}

.gallery-grid{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    grid-auto-rows:150px !important;
    gap:16px !important;
}

.gallery-item{
    position:relative;
    min-width:0;
    aspect-ratio:auto !important;
    height:auto !important;
    padding:0 !important;
    overflow:hidden;
    border:1px solid color-mix(in srgb,var(--brand-primary) 10%,transparent) !important;
    border-radius:20px !important;
    background:#fff !important;
    cursor:zoom-in;
    box-shadow:0 12px 28px rgba(15,23,42,.055) !important;
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease !important;
}

.gallery-item-featured{
    grid-column:span 2;
    grid-row:span 2;
}

.gallery-item-tall{
    grid-row:span 2;
}

.gallery-item-wide{
    grid-column:span 2;
}

.gallery-item:hover{
    transform:translateY(-3px) !important;
    border-color:color-mix(in srgb,var(--brand-primary) 20%,transparent) !important;
    box-shadow:0 18px 38px rgba(15,23,42,.10) !important;
}

.gallery-item::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 52%,rgba(9,35,23,.46) 100%);
    pointer-events:none;
    opacity:.78;
    transition:opacity .25s ease;
}

.gallery-item:hover::after{
    opacity:.9;
}

.gallery-item img{
    width:100% !important;
    height:100% !important;
    display:block !important;
    object-fit:cover !important;
    transition:transform .4s ease !important;
}

.gallery-item:hover img{
    transform:scale(1.045) !important;
}

.gallery-caption{
    position:absolute !important;
    left:12px !important;
    right:54px !important;
    bottom:12px !important;
    z-index:2;
    display:block !important;
    padding:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:#fff !important;
    font-size:.78rem !important;
    font-weight:750 !important;
    line-height:1.35 !important;
    text-align:left !important;
    text-shadow:0 2px 8px rgba(0,0,0,.22);
    backdrop-filter:none !important;
}

.gallery-zoom-indicator{
    position:absolute !important;
    right:12px !important;
    bottom:12px !important;
    z-index:3;
    width:34px;
    height:34px;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    padding:0 !important;
    border:1px solid rgba(255,255,255,.35);
    border-radius:11px !important;
    background:rgba(255,255,255,.90) !important;
    color:var(--brand-primary) !important;
    font-size:1.1rem !important;
    font-weight:500 !important;
    line-height:1 !important;
    backdrop-filter:blur(8px);
    box-shadow:0 8px 18px rgba(0,0,0,.10);
}

.gallery-empty{
    padding:48px 24px !important;
    border:1px dashed color-mix(in srgb,var(--brand-primary) 22%,transparent) !important;
    border-radius:20px !important;
    background:rgba(255,255,255,.85) !important;
}

/* Lightbox tetap mekanisme :target lama, hanya finishing visual */
.gallery-lightbox-backdrop{
    background:rgba(2,12,8,.92) !important;
    backdrop-filter:blur(10px) !important;
}

.gallery-lightbox-dialog figure img{
    border-radius:18px !important;
    box-shadow:0 28px 70px rgba(0,0,0,.32);
}

.gallery-lightbox-close,
.gallery-lightbox-prev,
.gallery-lightbox-next{
    border:1px solid rgba(255,255,255,.22) !important;
    background:rgba(255,255,255,.12) !important;
    color:#fff !important;
    backdrop-filter:blur(8px);
}

@media(max-width:1000px){
    .gallery-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        grid-auto-rows:180px !important;
    }

    .gallery-item-featured{
        grid-column:span 2;
    }

    .gallery-item-wide{
        grid-column:span 1;
    }
}

@media(max-width:700px){
    .gallery-section{
        padding:58px 0 !important;
    }

    .gallery-heading h2{
        font-size:clamp(1.9rem,9vw,2.55rem) !important;
    }

    .gallery-heading p{
        font-size:1rem !important;
    }

    .gallery-summary{
        width:100%;
        margin-bottom:22px;
    }

    .gallery-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        grid-auto-rows:145px !important;
        gap:10px !important;
    }

    .gallery-item{
        border-radius:15px !important;
    }

    .gallery-item-featured{
        grid-column:span 2;
        grid-row:span 2;
    }

    .gallery-item-tall{
        grid-row:span 1;
    }

    .gallery-item-wide{
        grid-column:span 2;
    }

    .gallery-caption{
        right:45px !important;
        left:10px !important;
        bottom:10px !important;
        font-size:.7rem !important;
    }

    .gallery-zoom-indicator{
        width:30px;
        height:30px;
        right:10px !important;
        bottom:10px !important;
    }
}


/* ============================================================
   PUBLIC REVAMP P4B - TESTIMONI PREMIUM
   UI only. Data nama/foto/kota/pesan tetap dari setting global.
   ============================================================ */

.testimonial-section,
.testimonial-section *{
    font-family:inherit !important;
}

.testimonial-section{
    position:relative;
    overflow:hidden;
    padding:82px 0 !important;
    background:#fff !important;
}

.testimonial-section::before{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    right:-150px;
    top:80px;
    border-radius:50%;
    background:color-mix(in srgb,var(--brand-primary) 4%,transparent);
    pointer-events:none;
}

.testimonial-heading{
    max-width:760px;
    margin-bottom:32px !important;
}

.testimonial-heading h2{
    margin:0 0 14px !important;
    color:#17231c !important;
    font-size:clamp(2rem,4vw,3.2rem) !important;
    line-height:1.1 !important;
    letter-spacing:-.035em !important;
    font-weight:800 !important;
}

.testimonial-heading p{
    margin:0 !important;
    max-width:680px;
    color:var(--text-soft) !important;
    font-size:1.05rem !important;
    line-height:1.75 !important;
}

.testimonial-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:20px !important;
}

.testimonial-card{
    position:relative;
    min-width:0;
    display:flex !important;
    flex-direction:column !important;
    padding:24px !important;
    overflow:hidden;
    border:1px solid #e2e8e4 !important;
    border-radius:20px !important;
    background:
        linear-gradient(180deg,#ffffff 0%,#fbfdfc 100%) !important;
    box-shadow:0 12px 30px rgba(15,23,42,.05) !important;
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}

.testimonial-card::after{
    content:"";
    position:absolute;
    width:110px;
    height:110px;
    right:-60px;
    bottom:-60px;
    border-radius:50%;
    background:color-mix(in srgb,var(--brand-secondary) 5.5%,transparent);
    pointer-events:none;
}

.testimonial-card:hover{
    transform:translateY(-4px);
    border-color:color-mix(in srgb,var(--brand-primary) 18%,transparent) !important;
    box-shadow:0 18px 40px rgba(15,23,42,.09) !important;
}

.testimonial-card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
}

.testimonial-stars{
    color:var(--brand-secondary-dark);
    font-size:.78rem;
    letter-spacing:.11em;
    line-height:1;
}

.testimonial-quote{
    height:auto !important;
    margin:0 !important;
    color:color-mix(in srgb,var(--brand-primary) 20%,transparent) !important;
    font-family:Georgia,serif !important;
    font-size:3.2rem !important;
    line-height:.72 !important;
}

.testimonial-message{
    flex:1 1 auto;
    margin:0 0 22px !important;
    color:#5f6d64 !important;
    font-size:.94rem !important;
    line-height:1.78 !important;
}

.testimonial-person{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    padding-top:17px !important;
    border-top:1px solid #edf0ee !important;
}

.testimonial-person img,
.testimonial-avatar{
    width:52px !important;
    height:52px !important;
    flex:0 0 52px !important;
    border-radius:50% !important;
    border:3px solid #fff;
    box-shadow:0 0 0 1px #e2e8e4,0 6px 16px rgba(15,23,42,.07);
}

.testimonial-person img{
    object-fit:cover !important;
}

.testimonial-avatar{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#eaf7f0 !important;
    color:var(--brand-primary) !important;
    font-weight:900 !important;
}

.testimonial-person-copy{
    min-width:0;
}

.testimonial-person strong{
    display:block !important;
    color:#233229 !important;
    font-size:.9rem !important;
    font-weight:800 !important;
}

.testimonial-person span{
    display:block !important;
    margin-top:2px !important;
    color:#7b867f !important;
    font-size:.76rem !important;
}

.testimonial-empty{
    padding:48px 24px !important;
    border:1px dashed color-mix(in srgb,var(--brand-primary) 22%,transparent) !important;
    border-radius:20px !important;
    background:#fbfdfc !important;
}

/* Anchor safety untuk sticky navbar */
#galeri,
#testimoni{
    scroll-margin-top:128px !important;
}

@media(max-width:1000px){
    .testimonial-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}

@media(max-width:700px){
    .testimonial-section{
        padding:58px 0 !important;
    }

    .testimonial-heading h2{
        font-size:clamp(1.9rem,9vw,2.55rem) !important;
    }

    .testimonial-heading p{
        font-size:1rem !important;
    }

    .testimonial-grid{
        grid-template-columns:1fr !important;
        gap:16px !important;
    }

    .testimonial-card{
        padding:20px !important;
    }

    #galeri,
    #testimoni{
        scroll-margin-top:108px !important;
    }
}


/* ============================================================
   PUBLIC REVAMP P5A - FAQ + KONTAK
   UI only. Data FAQ/kontak tetap dari setting global.
   Referral tracking tetap memakai le_form_url() pada WhatsApp.
   ============================================================ */

.faq-section,
.faq-section *,
.contact-section,
.contact-section *{
    font-family:inherit !important;
}

.faq-section{
    position:relative;
    overflow:hidden;
    padding:82px 0 !important;
    background:#fff !important;
}

.faq-section::before{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    right:-150px;
    bottom:-150px;
    border-radius:50%;
    background:color-mix(in srgb,var(--brand-primary) 4%,transparent);
    pointer-events:none;
}

.faq-heading{
    max-width:760px;
    margin-bottom:18px !important;
}

.faq-heading h2{
    margin:0 0 14px !important;
    color:#17231c !important;
    font-size:clamp(2rem,4vw,3.2rem) !important;
    line-height:1.1 !important;
    letter-spacing:-.035em !important;
    font-weight:800 !important;
}

.faq-heading p{
    margin:0 !important;
    max-width:680px;
    color:var(--text-soft) !important;
    font-size:1.05rem !important;
    line-height:1.75 !important;
}

.faq-summary{
    width:max-content;
    max-width:100%;
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 26px;
    padding:11px 13px;
    border:1px solid color-mix(in srgb,var(--brand-primary) 11%,transparent);
    border-radius:14px;
    background:#fbfdfc;
    box-shadow:0 10px 24px rgba(15,23,42,.03);
}

.faq-summary-icon{
    width:29px;
    height:29px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    border-radius:9px;
    background:#eaf7f0;
    color:var(--brand-primary);
    font-size:.82rem;
    font-weight:900;
}

.faq-summary strong{
    display:block;
    margin-bottom:1px;
    color:#26362d;
    font-size:.83rem;
}

.faq-summary small{
    display:block;
    color:#7b867f;
    font-size:.72rem;
}

.faq-list{
    display:grid !important;
    gap:12px !important;
    max-width:980px;
}

.faq-item{
    overflow:hidden;
    border:1px solid #e2e8e4 !important;
    border-radius:16px !important;
    background:#fff !important;
    box-shadow:0 8px 22px rgba(15,23,42,.035);
    transition:border-color .18s ease,box-shadow .18s ease;
}

.faq-item[open]{
    border-color:color-mix(in srgb,var(--brand-primary) 18%,transparent) !important;
    box-shadow:0 12px 28px rgba(15,23,42,.05);
}

.faq-item summary{
    min-height:62px;
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:17px 19px !important;
    cursor:pointer;
    list-style:none;
    color:#233229 !important;
    font-size:.94rem !important;
    font-weight:760 !important;
}

.faq-item summary::-webkit-details-marker{ display:none; }

.faq-icon{
    width:31px;
    height:31px;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    border-radius:10px;
    background:#eaf7f0;
    color:var(--brand-primary);
    font-size:1.05rem;
    line-height:1;
    transition:transform .18s ease,background .18s ease;
}

.faq-item[open] .faq-icon{
    transform:rotate(45deg);
    background:#dcf2e5;
}

.faq-answer{
    padding:0 19px 18px !important;
    color:#657169 !important;
    font-size:.9rem !important;
    line-height:1.75 !important;
}

.contact-section{
    position:relative;
    overflow:hidden;
    padding:82px 0 !important;
    background:
        radial-gradient(circle at 12% 12%,color-mix(in srgb,var(--brand-primary) 4.5%,transparent),transparent 22%),
        linear-gradient(180deg,#f6faf8 0%,#f4f8f6 100%) !important;
}

.contact-heading{
    max-width:760px;
    margin-bottom:32px !important;
}

.contact-heading h2{
    margin:0 0 14px !important;
    color:#17231c !important;
    font-size:clamp(2rem,4vw,3.2rem) !important;
    line-height:1.1 !important;
    letter-spacing:-.035em !important;
    font-weight:800 !important;
}

.contact-heading p{
    margin:0 !important;
    max-width:680px;
    color:var(--text-soft) !important;
    font-size:1.05rem !important;
    line-height:1.75 !important;
}

.contact-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr) !important;
    gap:24px !important;
    align-items:stretch !important;
}

.contact-cards{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px !important;
}

.contact-card{
    min-width:0;
    min-height:138px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    padding:20px !important;
    border:1px solid #e2e8e4 !important;
    border-radius:18px !important;
    background:#fff !important;
    box-shadow:0 10px 26px rgba(15,23,42,.04) !important;
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease !important;
}

.contact-card:hover{
    transform:translateY(-3px) !important;
    border-color:color-mix(in srgb,var(--brand-primary) 22%,transparent) !important;
    box-shadow:0 16px 34px rgba(15,23,42,.08) !important;
}

.contact-card-topline{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:9px;
}

.contact-card-icon{
    width:28px;
    height:28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    border-radius:9px;
    background:#eaf7f0;
    color:var(--brand-primary);
    font-size:.76rem;
    font-weight:850;
}

.contact-card-label{
    margin:0 !important;
    color:var(--brand-primary) !important;
    font-size:.72rem !important;
    font-weight:850 !important;
    letter-spacing:.06em !important;
}

.contact-card strong{
    color:#24342b !important;
    font-size:.93rem !important;
    font-weight:760 !important;
    overflow-wrap:anywhere;
}

.contact-card small{
    margin-top:6px !important;
    color:#7a867f !important;
    font-size:.75rem !important;
}

.contact-location{
    position:relative;
    overflow:hidden;
    padding:26px !important;
    border-radius:22px !important;
    background:
        radial-gradient(circle at top right,rgba(255,255,255,.12),transparent 34%),
        linear-gradient(145deg,var(--brand-primary),var(--brand-primary-dark)) !important;
    color:#fff !important;
    box-shadow:0 18px 40px color-mix(in srgb,var(--brand-primary-dark) 18%,transparent) !important;
}

.contact-location::after{
    content:"";
    position:absolute;
    width:150px;
    height:150px;
    right:-75px;
    bottom:-75px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.13);
}

.contact-location-label{
    position:relative;
    z-index:1;
    margin-bottom:12px !important;
    color:rgba(255,255,255,.72) !important;
    font-size:.7rem !important;
    font-weight:850 !important;
    letter-spacing:.08em !important;
}

#faq,
#kontak{
    scroll-margin-top:128px !important;
}

@media(max-width:1000px){
    .contact-grid{ grid-template-columns:1fr !important; }
    .contact-location{ max-width:680px; }
}

@media(max-width:700px){
    .faq-section,
    .contact-section{ padding:58px 0 !important; }

    .faq-heading h2,
    .contact-heading h2{
        font-size:clamp(1.9rem,9vw,2.55rem) !important;
    }

    .faq-heading p,
    .contact-heading p{ font-size:1rem !important; }

    .faq-summary{
        width:100%;
        margin-bottom:22px;
    }

    .contact-cards{ grid-template-columns:1fr !important; }

    #faq,
    #kontak{ scroll-margin-top:108px !important; }
}


/* ============================================================
   PUBLIC REVAMP P5B - FINAL CTA + FOOTER + FINAL POLISH
   UI only. Branding/kontak tetap dari setting global.
   CTA tetap memakai le_form_url() agar alur lead/referral terjaga.
   ============================================================ */

.final-cta-section,
.final-cta-section *,
.public-footer,
.public-footer *{
    font-family:inherit !important;
}

/* FINAL CTA */

.final-cta-section{
    padding:68px 0 72px !important;
    background:
        linear-gradient(180deg,#ffffff 0%,#fbfcfb 100%) !important;
}

.final-cta-card{
    position:relative;
    overflow:hidden;
    display:grid !important;
    grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr) !important;
    align-items:center !important;
    gap:38px !important;
    padding:42px 46px !important;
    border:1px solid rgba(255,255,255,.12);
    border-radius:26px !important;
    background:
        radial-gradient(circle at 88% 18%,color-mix(in srgb,var(--brand-secondary) 18%,transparent),transparent 24%),
        radial-gradient(circle at 6% 90%,rgba(255,255,255,.08),transparent 24%),
        linear-gradient(135deg,var(--brand-primary) 0%,var(--brand-primary-dark) 70%,var(--brand-primary-deep) 100%) !important;
    color:#fff !important;
    box-shadow:0 22px 52px color-mix(in srgb,var(--brand-primary-dark) 16%,transparent) !important;
}

.final-cta-card::before{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    right:-82px;
    bottom:-105px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
    pointer-events:none;
}

.final-cta-card::after{
    width:120px !important;
    height:120px !important;
    right:36px !important;
    top:-60px !important;
    bottom:auto !important;
    background:rgba(255,255,255,.045) !important;
}

.final-cta-copy,
.final-cta-action{
    position:relative;
    z-index:2;
}

.final-cta-badge{
    display:inline-flex !important;
    align-items:center;
    gap:8px;
    margin-bottom:14px !important;
    color:var(--brand-secondary-light) !important;
    font-size:.76rem !important;
    font-weight:850 !important;
    letter-spacing:.09em !important;
}

.final-cta-badge-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--brand-secondary-light);
    box-shadow:0 0 0 4px rgba(239,210,109,.12);
}

.final-cta-copy h2{
    max-width:700px !important;
    margin:0 0 14px !important;
    font-size:clamp(2rem,4vw,3.35rem) !important;
    line-height:1.06 !important;
    letter-spacing:-.04em !important;
    font-weight:800 !important;
}

.final-cta-copy p{
    max-width:680px !important;
    margin:0 !important;
    color:rgba(255,255,255,.78) !important;
    font-size:1rem !important;
    line-height:1.75 !important;
}

.final-cta-points{
    display:flex;
    flex-wrap:wrap;
    gap:8px 16px;
    margin-top:20px;
    color:rgba(255,255,255,.80);
    font-size:.78rem;
    font-weight:650;
}

.final-cta-points span{
    display:inline-flex;
    align-items:center;
    gap:4px;
}

.final-cta-action{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
}

.final-cta-button{
    min-height:56px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:14px !important;
    padding:0 20px !important;
    border:1px solid rgba(255,255,255,.70) !important;
    border-radius:14px !important;
    background:#fff !important;
    color:var(--brand-primary) !important;
    font-size:.92rem !important;
    font-weight:850 !important;
    box-shadow:0 12px 28px rgba(0,0,0,.12) !important;
    transition:transform .18s ease,box-shadow .18s ease !important;
}

.final-cta-button:hover{
    color:var(--brand-primary-dark) !important;
    transform:translateY(-2px) !important;
    box-shadow:0 16px 34px rgba(0,0,0,.17) !important;
}

.final-cta-action small{
    color:rgba(255,255,255,.70) !important;
    font-size:.74rem !important;
    text-align:center !important;
}

#konsultasi{
    scroll-margin-top:128px !important;
}

/* FOOTER */

.public-footer{
    margin-top:0 !important;
    padding:58px 0 22px !important;
    background:
        radial-gradient(circle at 12% 0%,color-mix(in srgb,var(--brand-primary) 22%,transparent),transparent 25%),
        linear-gradient(180deg,#101c16 0%,#0b1510 100%) !important;
    color:#fff !important;
    border-top:1px solid rgba(255,255,255,.06);
}

.footer-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1.35fr) minmax(140px,.55fr) minmax(210px,.9fr) minmax(190px,.75fr) !important;
    gap:38px !important;
}

.footer-company{
    max-width:430px;
}

.footer-brand-row{
    margin-bottom:16px !important;
}

.footer-logo{
    width:56px !important;
    height:56px !important;
    flex:0 0 56px !important;
    border-radius:16px !important;
    padding:6px !important;
    background:#fff !important;
    box-shadow:0 8px 22px rgba(0,0,0,.13);
}

.footer-brand{
    font-size:1.12rem !important;
    font-weight:800 !important;
}

.footer-company-name{
    margin-top:4px !important;
    color:rgba(255,255,255,.58) !important;
    font-size:.78rem !important;
}

.public-footer p{
    margin:8px 0 !important;
    color:rgba(255,255,255,.66) !important;
    font-size:.86rem !important;
    line-height:1.68 !important;
}

.footer-muted{
    max-width:400px;
    font-size:.84rem !important;
}

.footer-title{
    position:relative;
    display:block !important;
    margin-bottom:15px !important;
    padding-bottom:9px;
    color:#fff !important;
    font-size:.87rem !important;
    font-weight:800 !important;
}

.footer-title::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:28px;
    height:2px;
    border-radius:999px;
    background:color-mix(in srgb,var(--brand-secondary) 78%,transparent);
}

.footer-nav,
.footer-contact-list{
    gap:8px !important;
}

.footer-nav a,
.footer-contact-list a{
    color:rgba(255,255,255,.65) !important;
    font-size:.82rem !important;
    line-height:1.55 !important;
    transition:color .18s ease,transform .18s ease;
}

.footer-nav a:hover,
.footer-contact-list a:hover{
    color:#fff !important;
    transform:translateX(2px);
}

.footer-consult-link{
    width:max-content;
    max-width:100%;
    min-height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-top:12px;
    padding:0 13px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:11px;
    background:rgba(255,255,255,.06);
    color:#fff;
    font-size:.78rem;
    font-weight:750;
}

.footer-consult-link:hover{
    color:#fff;
    background:rgba(255,255,255,.10);
}

.footer-trust-strip{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-top:34px;
    padding:14px 0;
    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.08);
    color:rgba(255,255,255,.48);
    font-size:.74rem;
}

.footer-trust-strip a{
    color:rgba(255,255,255,.72);
    font-weight:700;
}

.footer-trust-strip a:hover{
    color:#fff;
}

.footer-bottom{
    margin-top:0 !important;
    padding-top:18px !important;
    border-top:0 !important;
    color:rgba(255,255,255,.44) !important;
    font-size:.75rem !important;
}

/* FINAL SPACING CONSISTENCY */

.package-section,
.departure-section,
.about-section,
.advantages-section,
.gallery-section,
.testimonial-section,
.faq-section,
.contact-section{
    scroll-margin-top:128px;
}

/* MOBILE / TABLET */

@media(max-width:1000px){
    .final-cta-card{
        grid-template-columns:1fr !important;
        gap:28px !important;
    }

    .final-cta-action{
        max-width:390px !important;
    }

    .footer-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}

@media(max-width:700px){
    .final-cta-section{
        padding:54px 0 58px !important;
    }

    .final-cta-card{
        padding:28px 22px !important;
        border-radius:20px !important;
    }

    .final-cta-copy h2{
        font-size:clamp(1.9rem,9vw,2.6rem) !important;
    }

    .final-cta-points{
        display:grid;
        gap:7px;
    }

    .final-cta-action{
        max-width:none !important;
    }

    .public-footer{
        padding:46px 0 20px !important;
    }

    .footer-grid{
        grid-template-columns:1fr !important;
        gap:28px !important;
    }

    .footer-company{
        max-width:none;
    }

    .footer-trust-strip{
        align-items:flex-start;
        flex-direction:column;
        gap:7px;
        margin-top:28px;
    }

    .footer-bottom{
        flex-direction:column !important;
        gap:6px !important;
    }

    #konsultasi,
    .package-section,
    .departure-section,
    .about-section,
    .advantages-section,
    .gallery-section,
    .testimonial-section,
    .faq-section,
    .contact-section{
        scroll-margin-top:108px !important;
    }
}


/* ============================================================
   M1 - MANASIK LANDING / MOBILE FIRST
   Terintegrasi dengan public.css dan global brand variables.
   ============================================================ */

.manasik-page{
    background:#fff;
}

.manasik-hero{
    position:relative;
    overflow:hidden;
    padding:54px 0 48px;
    background:
        radial-gradient(circle at 88% 10%,color-mix(in srgb,var(--brand-secondary) 10%,transparent),transparent 23%),
        radial-gradient(circle at 8% 90%,color-mix(in srgb,var(--brand-primary) 7%,transparent),transparent 25%),
        linear-gradient(180deg,#ffffff 0%,#f7faf8 100%);
}

.manasik-hero::after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    right:-110px;
    bottom:-100px;
    border:1px solid color-mix(in srgb,var(--brand-primary) 8%,transparent);
    border-radius:50%;
    pointer-events:none;
}

.manasik-hero-grid{
    display:grid;
    gap:28px;
}

.manasik-hero-copy h1{
    max-width:780px;
    margin:14px 0 18px;
    color:#132219;
    font-size:clamp(2.25rem,11vw,3.25rem);
    line-height:1.02;
    letter-spacing:-.045em;
    font-weight:850;
}

.manasik-hero-copy h1 span{
    display:block;
    color:var(--brand-primary);
}

.manasik-hero-copy > p{
    max-width:680px;
    margin:0;
    color:var(--text-soft);
    font-size:1rem;
    line-height:1.72;
}

.manasik-hero-actions{
    display:grid;
    gap:10px;
    margin-top:24px;
}

.manasik-btn{
    min-height:50px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:0 18px;
    border-radius:13px;
    font-size:.9rem;
    font-weight:800;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.manasik-btn-primary{
    justify-content:space-between;
    background:linear-gradient(135deg,var(--brand-primary),var(--brand-primary-light));
    color:#fff;
    box-shadow:0 10px 22px color-mix(in srgb,var(--brand-primary) 17%,transparent);
}

.manasik-btn-primary:hover{
    color:#fff;
    transform:translateY(-1px);
    box-shadow:0 13px 27px color-mix(in srgb,var(--brand-primary) 23%,transparent);
}

.manasik-btn-light{
    border:1px solid #dde5e0;
    background:#fff;
    color:#223129;
}

.manasik-btn-light:hover{
    color:var(--brand-primary);
    border-color:color-mix(in srgb,var(--brand-primary) 25%,transparent);
}

.manasik-hero-trust{
    display:flex;
    flex-wrap:wrap;
    gap:8px 14px;
    margin-top:18px;
    color:#647168;
    font-size:.76rem;
    font-weight:650;
}

.manasik-journey-card{
    position:relative;
    overflow:hidden;
    padding:22px;
    border:1px solid color-mix(in srgb,var(--brand-primary) 13%,transparent);
    border-radius:22px;
    background:linear-gradient(180deg,#ffffff,#f8fbf9);
    box-shadow:0 18px 42px rgba(15,23,42,.07);
}

.manasik-journey-card::after{
    content:"";
    position:absolute;
    width:140px;
    height:140px;
    right:-75px;
    top:-70px;
    border-radius:50%;
    background:color-mix(in srgb,var(--brand-secondary) 8%,transparent);
}

.manasik-journey-head{
    position:relative;
    z-index:1;
    padding-bottom:16px;
    border-bottom:1px solid #e9eeeb;
}

.manasik-journey-head span{
    display:block;
    margin-bottom:5px;
    color:var(--brand-primary);
    font-size:.68rem;
    font-weight:850;
    letter-spacing:.09em;
}

.manasik-journey-head strong{
    display:block;
    color:#223129;
    font-size:1rem;
    line-height:1.45;
}

.manasik-mini-pipeline{
    margin-top:18px;
}

.manasik-mini-step{
    display:grid;
    grid-template-columns:34px 1fr;
    align-items:center;
    gap:10px;
}

.manasik-mini-step > span{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    background:#f1f4f2;
    color:#8c9890;
    font-size:.78rem;
    font-weight:900;
}

.manasik-mini-step.is-done > span{
    background:#e7f6ed;
    color:var(--brand-primary);
}

.manasik-mini-step.is-active > span{
    background:var(--brand-primary);
    color:#fff;
    box-shadow:0 7px 17px color-mix(in srgb,var(--brand-primary) 20%,transparent);
}

.manasik-mini-step strong{
    display:block;
    color:#29382f;
    font-size:.86rem;
}

.manasik-mini-step small{
    display:block;
    margin-top:2px;
    color:#7b867f;
    font-size:.72rem;
    line-height:1.4;
}

.manasik-mini-line{
    width:2px;
    height:18px;
    margin:4px 0 4px 16px;
    background:#e0e6e2;
}

.manasik-brand-note{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:20px;
    padding-top:16px;
    border-top:1px solid #e9eeeb;
}

.manasik-brand-note-logo{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    overflow:hidden;
    border-radius:12px;
    background:#fff;
    color:var(--brand-primary);
    font-weight:900;
    box-shadow:0 0 0 1px #e2e8e4;
}

.manasik-brand-note-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:4px;
}

.manasik-brand-note strong{
    display:block;
    color:#24342b;
    font-size:.82rem;
}

.manasik-brand-note small{
    display:block;
    margin-top:2px;
    color:#7b867f;
    font-size:.7rem;
}

/* PILIH JALUR */

.manasik-choice-section{
    padding:58px 0;
    background:#fff;
    scroll-margin-top:108px;
}

.manasik-section-heading{
    max-width:760px;
    margin-bottom:28px;
}

.manasik-section-heading h2{
    margin:14px 0 12px;
    color:#17231c;
    font-size:clamp(1.9rem,9vw,2.6rem);
    line-height:1.08;
    letter-spacing:-.035em;
    font-weight:820;
}

.manasik-section-heading p{
    max-width:680px;
    margin:0;
    color:var(--text-soft);
    font-size:1rem;
    line-height:1.72;
}

.manasik-choice-grid{
    display:grid;
    gap:16px;
}

.manasik-choice-card{
    position:relative;
    overflow:hidden;
    padding:22px;
    border:1px solid #e2e8e4;
    border-radius:20px;
    background:linear-gradient(180deg,#fff,#fbfdfc);
    box-shadow:0 12px 30px rgba(15,23,42,.045);
}

.manasik-choice-card::after{
    content:"";
    position:absolute;
    width:120px;
    height:120px;
    right:-65px;
    bottom:-65px;
    border-radius:50%;
    background:color-mix(in srgb,var(--brand-primary) 4%,transparent);
    pointer-events:none;
}

.manasik-choice-card-haji::after{
    background:color-mix(in srgb,var(--brand-secondary) 6.5%,transparent);
}

.manasik-choice-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.manasik-choice-icon{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:13px;
    background:#eaf7f0;
    color:var(--brand-primary);
    font-size:1rem;
    font-weight:900;
}

.manasik-choice-badge{
    padding:6px 9px;
    border-radius:999px;
    background:#f5f7f6;
    color:#728078;
    font-size:.68rem;
    font-weight:850;
    letter-spacing:.08em;
}

.manasik-choice-card h3{
    margin:20px 0 8px;
    color:#213128;
    font-size:1.3rem;
    font-weight:800;
}

.manasik-choice-card > p{
    margin:0;
    color:#69756e;
    font-size:.9rem;
    line-height:1.68;
}

.manasik-preview-list{
    display:grid;
    gap:8px;
    margin-top:18px;
}

.manasik-preview-item{
    display:grid;
    grid-template-columns:30px 1fr;
    align-items:center;
    gap:9px;
    min-height:42px;
    padding:7px 10px;
    border:1px solid #edf0ee;
    border-radius:12px;
    background:#fff;
}

.manasik-preview-item > span{
    width:26px;
    height:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:#eef7f2;
    color:var(--brand-primary);
    font-size:.68rem;
    font-weight:850;
}

.manasik-preview-item strong{
    color:#334139;
    font-size:.79rem;
    font-weight:720;
}

.manasik-card-action{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid #edf0ee;
}

.manasik-card-action span{
    color:var(--brand-primary);
    font-size:.82rem;
    font-weight:800;
}

.manasik-card-action small{
    padding:5px 8px;
    border-radius:999px;
    background:#f3f5f4;
    color:#7b867f;
    font-size:.65rem;
    font-weight:750;
}

/* VALUE */

.manasik-value-section{
    padding:0 0 58px;
    background:#fff;
}

.manasik-value-grid{
    display:grid;
    gap:12px;
}

.manasik-value-grid article{
    padding:18px;
    border:1px solid #e5eae7;
    border-radius:16px;
    background:#fafcfb;
}

.manasik-value-grid article > span{
    display:block;
    margin-bottom:8px;
    color:#a8b3ac;
    font-size:.7rem;
    font-weight:850;
    letter-spacing:.06em;
}

.manasik-value-grid strong{
    display:block;
    margin-bottom:6px;
    color:#27362d;
    font-size:.9rem;
}

.manasik-value-grid p{
    margin:0;
    color:#727e76;
    font-size:.78rem;
    line-height:1.6;
}

/* CTA */

.manasik-start-cta{
    padding:0 0 62px;
    background:#fff;
}

.manasik-start-card{
    position:relative;
    overflow:hidden;
    display:grid;
    gap:24px;
    padding:26px 22px;
    border-radius:22px;
    background:
        radial-gradient(circle at 92% 8%,color-mix(in srgb,var(--brand-secondary) 18%,transparent),transparent 24%),
        linear-gradient(135deg,var(--brand-primary),var(--brand-primary-dark));
    color:#fff;
    box-shadow:0 18px 42px color-mix(in srgb,var(--brand-primary-dark) 15%,transparent);
}

.manasik-start-card::after{
    content:"";
    position:absolute;
    width:150px;
    height:150px;
    right:-80px;
    bottom:-80px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:50%;
}

.manasik-start-label{
    display:block;
    margin-bottom:10px;
    color:var(--brand-secondary-light);
    font-size:.68rem;
    font-weight:850;
    letter-spacing:.09em;
}

.manasik-start-card h2{
    max-width:690px;
    margin:0 0 10px;
    font-size:clamp(1.7rem,8vw,2.35rem);
    line-height:1.08;
    letter-spacing:-.035em;
}

.manasik-start-card p{
    max-width:650px;
    margin:0;
    color:rgba(255,255,255,.75);
    font-size:.9rem;
    line-height:1.65;
}

.manasik-start-actions{
    position:relative;
    z-index:2;
    display:grid;
    gap:10px;
}

.manasik-btn-white{
    justify-content:space-between;
    background:#fff;
    color:var(--brand-primary);
}

.manasik-btn-white:hover{
    color:var(--brand-primary-dark);
    transform:translateY(-1px);
}

.manasik-start-link{
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgba(255,255,255,.78);
    font-size:.78rem;
    font-weight:700;
}

.manasik-start-link:hover{
    color:#fff;
}

/* TABLET / DESKTOP */

@media(min-width:700px){
    .manasik-hero-actions{
        display:flex;
        flex-wrap:wrap;
    }

    .manasik-btn{
        min-width:165px;
    }

    .manasik-choice-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:20px;
    }

    .manasik-value-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .manasik-start-card{
        grid-template-columns:minmax(0,1.4fr) minmax(250px,.6fr);
        align-items:center;
        padding:34px;
    }
}

@media(min-width:1000px){
    .manasik-hero{
        padding:76px 0 70px;
    }

    .manasik-hero-grid{
        grid-template-columns:minmax(0,1.2fr) minmax(350px,.8fr);
        align-items:center;
        gap:54px;
    }

    .manasik-hero-copy h1{
        font-size:clamp(3rem,5vw,4.6rem);
    }

    .manasik-hero-copy > p{
        font-size:1.08rem;
    }

    .manasik-journey-card{
        padding:26px;
        border-radius:24px;
    }

    .manasik-choice-section{
        padding:78px 0;
        scroll-margin-top:128px;
    }

    .manasik-section-heading{
        margin-bottom:34px;
    }

    .manasik-section-heading h2{
        font-size:clamp(2.1rem,4vw,3.15rem);
    }

    .manasik-choice-card{
        padding:26px;
        border-radius:22px;
    }

    .manasik-value-section{
        padding-bottom:78px;
    }

    .manasik-start-cta{
        padding-bottom:76px;
    }
}


/* ============================================================
   M2 - PIPELINE MANASIK UMROH
   Mobile First. Terintegrasi dengan global public.css.
   ============================================================ */

.manasik-card-action-link{
    text-decoration:none;
}

.manasik-card-action-link:hover span{
    color:var(--brand-primary-dark);
}

.manasik-course-hero{
    position:relative;
    overflow:hidden;
    padding:42px 0 46px;
    background:
        radial-gradient(circle at 90% 8%,color-mix(in srgb,var(--brand-secondary) 10%,transparent),transparent 22%),
        linear-gradient(180deg,#ffffff 0%,#f7faf8 100%);
}

.manasik-back-link{
    width:max-content;
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-bottom:24px;
    color:#68756d;
    font-size:.78rem;
    font-weight:720;
}

.manasik-back-link:hover{
    color:var(--brand-primary);
}

.manasik-course-hero-grid{
    display:grid;
    gap:26px;
}

.manasik-course-copy h1{
    margin:14px 0 17px;
    color:#142219;
    font-size:clamp(2.15rem,10.5vw,3.15rem);
    line-height:1.03;
    letter-spacing:-.045em;
    font-weight:850;
}

.manasik-course-copy h1 span{
    display:block;
    color:var(--brand-primary);
}

.manasik-course-copy > p{
    max-width:680px;
    margin:0;
    color:var(--text-soft);
    font-size:1rem;
    line-height:1.72;
}

.manasik-course-actions{
    display:grid;
    gap:10px;
    margin-top:23px;
}

.manasik-progress-card{
    padding:21px;
    border:1px solid color-mix(in srgb,var(--brand-primary) 13%,transparent);
    border-radius:20px;
    background:#fff;
    box-shadow:0 16px 36px rgba(15,23,42,.06);
}

.manasik-progress-top{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:15px;
}

.manasik-progress-top > span{
    color:#718078;
    font-size:.68rem;
    font-weight:850;
    letter-spacing:.08em;
}

.manasik-progress-top strong{
    color:var(--brand-primary);
    font-size:1.45rem;
    line-height:1;
}

.manasik-progress-track{
    width:100%;
    height:9px;
    margin-top:14px;
    overflow:hidden;
    border-radius:999px;
    background:#edf1ee;
}

.manasik-progress-bar{
    display:block;
    width:0;
    height:100%;
    border-radius:999px;
    background:
        linear-gradient(
            90deg,
            var(--brand-primary),
            #1ca664
        );
    transition:width .28s ease;
}

.manasik-progress-copy{
    margin-top:13px;
}

.manasik-progress-copy strong{
    display:block;
    color:#29382f;
    font-size:.83rem;
}

.manasik-progress-copy small{
    display:block;
    margin-top:3px;
    color:#818c85;
    font-size:.69rem;
    line-height:1.45;
}

.manasik-next-box{
    margin-top:17px;
    padding:13px;
    border:1px solid color-mix(in srgb,var(--brand-primary) 10%,transparent);
    border-radius:13px;
    background:#f4faf6;
}

.manasik-next-box span{
    display:block;
    margin-bottom:4px;
    color:#77847c;
    font-size:.64rem;
    font-weight:850;
    letter-spacing:.08em;
}

.manasik-next-box strong{
    display:block;
    color:#21402f;
    font-size:.88rem;
}

/* PIPELINE */

.manasik-pipeline-section{
    padding:58px 0;
    background:#fff;
    scroll-margin-top:108px;
}

.manasik-pipeline{
    display:grid;
    gap:0;
    margin-top:4px;
}

.manasik-step-card{
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    gap:12px;
    scroll-margin-top:112px;
}

.manasik-step-rail{
    display:flex;
    flex-direction:column;
    align-items:center;
    min-height:100%;
}

.manasik-step-status{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 38px;
    padding:0;
    border:1px solid #dfe6e1;
    border-radius:12px;
    background:#f7f9f8;
    color:#94a098;
    font-size:.95rem;
    font-weight:900;
    cursor:pointer;
    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.manasik-step-status .status-done{
    display:none;
}

.manasik-step-card.is-complete
.manasik-step-status{
    border-color:color-mix(in srgb,var(--brand-primary) 18%,transparent);
    background:#e7f6ed;
    color:var(--brand-primary);
}

.manasik-step-card.is-complete
.manasik-step-status .status-pending{
    display:none;
}

.manasik-step-card.is-complete
.manasik-step-status .status-done{
    display:inline;
}

.manasik-step-line{
    width:2px;
    flex:1 1 auto;
    min-height:28px;
    margin:5px 0;
    background:#e2e8e4;
}

.manasik-step-card.is-complete
.manasik-step-line{
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb,var(--brand-primary) 55%,transparent),
            color-mix(in srgb,var(--brand-primary) 16%,transparent)
        );
}

.manasik-step-content{
    min-width:0;
    margin-bottom:16px;
    padding:18px;
    border:1px solid #e2e8e4;
    border-radius:17px;
    background:
        linear-gradient(180deg,#fff,#fbfdfc);
    box-shadow:0 8px 22px rgba(15,23,42,.035);
    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.manasik-step-card.is-complete
.manasik-step-content{
    border-color:color-mix(in srgb,var(--brand-primary) 18%,transparent);
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f6fbf8
        );
}

.manasik-step-topline{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
}

.manasik-step-number{
    color:var(--brand-primary);
    font-size:.66rem;
    font-weight:850;
    letter-spacing:.08em;
}

.manasik-step-state{
    padding:5px 8px;
    border-radius:999px;
    background:#f2f4f3;
    color:#7b8780;
    font-size:.63rem;
    font-weight:760;
}

.manasik-step-card.is-complete
.manasik-step-state{
    background:#e7f6ed;
    color:var(--brand-primary);
}

.manasik-step-content h3{
    margin:0 0 7px;
    color:#223129;
    font-size:1.08rem;
    line-height:1.3;
    font-weight:800;
}

.manasik-step-content > p{
    margin:0;
    color:#6d7972;
    font-size:.86rem;
    line-height:1.65;
}

.manasik-step-details{
    margin-top:15px;
    border-top:1px solid #edf0ee;
}

.manasik-step-details summary{
    min-height:46px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    list-style:none;
    cursor:pointer;
    color:#314138;
    font-size:.77rem;
    font-weight:760;
}

.manasik-step-details summary::-webkit-details-marker{
    display:none;
}

.manasik-step-details summary span:last-child{
    width:27px;
    height:27px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    border-radius:9px;
    background:#eef7f2;
    color:var(--brand-primary);
    transition:transform .18s ease;
}

.manasik-step-details[open]
summary span:last-child{
    transform:rotate(45deg);
}

.manasik-step-details-body{
    padding:3px 0 5px;
}

.manasik-step-details-body ul{
    display:grid;
    gap:8px;
    margin:0;
    padding:0;
    list-style:none;
}

.manasik-step-details-body li{
    display:grid;
    grid-template-columns:22px 1fr;
    gap:8px;
    color:#66736b;
    font-size:.76rem;
    line-height:1.55;
}

.manasik-step-details-body li > span:first-child{
    color:var(--brand-primary);
    font-weight:900;
}

.manasik-detail-note{
    margin-top:12px;
    padding:10px 11px;
    border-radius:11px;
    background:#f6f8f7;
    color:#818c85;
    font-size:.69rem;
    line-height:1.5;
}

.manasik-step-actions{
    margin-top:14px;
}

.manasik-step-complete-btn{
    width:100%;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 13px;
    border:1px solid color-mix(in srgb,var(--brand-primary) 18%,transparent);
    border-radius:11px;
    background:#fff;
    color:var(--brand-primary);
    font-size:.76rem;
    font-weight:800;
    cursor:pointer;
}

.manasik-step-card.is-complete
.manasik-step-complete-btn{
    background:#eaf7f0;
}

.manasik-pipeline-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-top:18px;
    padding:15px 16px;
    border:1px solid #e2e8e4;
    border-radius:14px;
    background:#fafcfb;
}

.manasik-pipeline-footer > div span{
    display:block;
    margin-bottom:2px;
    color:#7d8881;
    font-size:.62rem;
    font-weight:850;
    letter-spacing:.08em;
}

.manasik-pipeline-footer > div strong{
    display:block;
    color:#2c3b32;
    font-size:.82rem;
}

.manasik-reset-btn{
    min-height:38px;
    padding:0 12px;
    border:1px solid #e0e5e2;
    border-radius:10px;
    background:#fff;
    color:#7a867f;
    font-size:.69rem;
    font-weight:750;
    cursor:pointer;
}

.manasik-noscript{
    margin-top:14px;
    padding:12px;
    border:1px solid #f1d7a8;
    border-radius:11px;
    background:var(--brand-secondary-soft);
    color:var(--brand-secondary-dark);
    font-size:.75rem;
}

/* COURSE CTA */

.manasik-course-cta{
    padding:0 0 64px;
    background:#fff;
}

.manasik-course-cta-card{
    position:relative;
    overflow:hidden;
    display:grid;
    gap:22px;
    padding:25px 21px;
    border-radius:21px;
    background:
        radial-gradient(circle at 90% 10%,color-mix(in srgb,var(--brand-secondary) 18%,transparent),transparent 25%),
        linear-gradient(135deg,var(--brand-primary),var(--brand-primary-dark));
    color:#fff;
    box-shadow:0 18px 42px color-mix(in srgb,var(--brand-primary-dark) 15%,transparent);
}

.manasik-course-cta-card::after{
    content:"";
    position:absolute;
    width:150px;
    height:150px;
    right:-78px;
    bottom:-80px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:50%;
}

.manasik-course-cta-card > div:first-child > span{
    display:block;
    margin-bottom:9px;
    color:var(--brand-secondary-light);
    font-size:.66rem;
    font-weight:850;
    letter-spacing:.08em;
}

.manasik-course-cta-card h2{
    max-width:700px;
    margin:0 0 10px;
    font-size:clamp(1.65rem,7.8vw,2.3rem);
    line-height:1.08;
    letter-spacing:-.035em;
}

.manasik-course-cta-card p{
    max-width:650px;
    margin:0;
    color:rgba(255,255,255,.74);
    font-size:.86rem;
    line-height:1.65;
}

.manasik-course-cta-actions{
    position:relative;
    z-index:2;
    display:grid;
    gap:8px;
}

.manasik-course-consult{
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgba(255,255,255,.80);
    font-size:.76rem;
    font-weight:700;
}

.manasik-course-consult:hover{
    color:#fff;
}

/* TABLET / DESKTOP */

@media(min-width:700px){
    .manasik-course-actions{
        display:flex;
        flex-wrap:wrap;
    }

    .manasik-course-actions .manasik-btn{
        min-width:175px;
    }

    .manasik-course-cta-card{
        grid-template-columns:minmax(0,1.4fr) minmax(250px,.6fr);
        align-items:center;
        padding:34px;
    }

    .manasik-step-card{
        grid-template-columns:46px minmax(0,1fr);
        gap:16px;
    }

    .manasik-step-status{
        width:42px;
        height:42px;
        flex-basis:42px;
    }

    .manasik-step-line{
        margin-left:0;
    }

    .manasik-step-content{
        padding:21px;
    }
}

@media(min-width:1000px){
    .manasik-course-hero{
        padding:58px 0 64px;
    }

    .manasik-course-hero-grid{
        grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr);
        align-items:center;
        gap:52px;
    }

    .manasik-course-copy h1{
        font-size:clamp(3rem,5vw,4.4rem);
    }

    .manasik-course-copy > p{
        font-size:1.06rem;
    }

    .manasik-progress-card{
        padding:25px;
        border-radius:22px;
    }

    .manasik-pipeline-section{
        padding:76px 0;
        scroll-margin-top:128px;
    }

    .manasik-pipeline{
        max-width:960px;
    }

    .manasik-step-card{
        scroll-margin-top:132px;
    }

    .manasik-step-content{
        margin-bottom:18px;
        padding:23px;
        border-radius:18px;
    }

    .manasik-step-content h3{
        font-size:1.18rem;
    }

    .manasik-course-cta{
        padding-bottom:76px;
    }
}


/* ============================================================
   M4A - DETAIL MATERI MANASIK
   Generic template, mobile first.
   ============================================================ */

.manasik-step-detail-btn{
    width:100%;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
    padding:0 13px;
    border-radius:11px;
    background:var(--brand-primary);
    color:#fff;
    font-size:.76rem;
    font-weight:800;
}

.manasik-step-detail-btn:hover{
    color:#fff;
    background:var(--brand-primary-dark);
}

.manasik-material-hero{
    padding:42px 0 44px;
    background:
        radial-gradient(circle at 90% 10%,color-mix(in srgb,var(--brand-secondary) 10%,transparent),transparent 23%),
        linear-gradient(180deg,#fff,#f7faf8);
}

.manasik-material-hero-grid{
    display:grid;
    gap:22px;
}

.manasik-material-hero h1{
    margin:14px 0 10px;
    color:#15231b;
    font-size:clamp(2.2rem,10vw,3.1rem);
    line-height:1.03;
    letter-spacing:-.04em;
    font-weight:850;
}

.manasik-material-hero p{
    max-width:680px;
    margin:0;
    color:var(--text-soft);
    font-size:1rem;
    line-height:1.7;
}

.manasik-material-status-card{
    padding:20px;
    border:1px solid color-mix(in srgb,var(--brand-primary) 13%,transparent);
    border-radius:18px;
    background:#fff;
    box-shadow:0 14px 32px rgba(15,23,42,.06);
}

.manasik-material-status-card > span{
    display:block;
    color:#7b877f;
    font-size:.65rem;
    font-weight:850;
    letter-spacing:.08em;
}

.manasik-material-status-card strong{
    display:block;
    margin-top:6px;
    color:#26362d;
    font-size:1.08rem;
}

.manasik-material-status-card small{
    display:block;
    margin-top:9px;
    color:#8a948e;
    font-size:.68rem;
}

.manasik-material-complete-btn{
    width:100%;
    min-height:44px;
    margin-top:14px;
    border:1px solid color-mix(in srgb,var(--brand-primary) 18%,transparent);
    border-radius:11px;
    background:#eaf7f0;
    color:var(--brand-primary);
    font-size:.76rem;
    font-weight:800;
    cursor:pointer;
}

.is-material-complete .manasik-material-complete-btn{
    background:var(--brand-primary);
    color:#fff;
}

.manasik-material-content{
    padding:52px 0 64px;
    background:#fff;
}

.manasik-material-layout{
    display:grid;
    gap:22px;
}

.manasik-material-main{
    display:grid;
    gap:16px;
}

.manasik-material-block{
    padding:20px;
    border:1px solid #e4e9e6;
    border-radius:18px;
    background:#fff;
    box-shadow:0 8px 22px rgba(15,23,42,.035);
}

.manasik-material-kicker{
    display:block;
    margin-bottom:8px;
    color:var(--brand-primary);
    font-size:.64rem;
    font-weight:850;
    letter-spacing:.08em;
}

.manasik-material-block h2{
    margin:0 0 10px;
    color:#233229;
    font-size:1.15rem;
    line-height:1.3;
    font-weight:800;
}

.manasik-material-block > p{
    margin:0;
    color:#68756d;
    font-size:.88rem;
    line-height:1.72;
}

.manasik-material-check-list,
.manasik-material-note-list{
    display:grid;
    gap:9px;
    margin:0;
    padding:0;
    list-style:none;
}

.manasik-material-check-list li{
    display:grid;
    grid-template-columns:22px 1fr;
    gap:8px;
    color:#65726a;
    font-size:.82rem;
    line-height:1.55;
}

.manasik-material-check-list li > span:first-child{
    color:var(--brand-primary);
    font-weight:900;
}

.manasik-material-steps{
    display:grid;
    gap:12px;
    margin:0;
    padding:0;
    list-style:none;
    counter-reset:steps;
}

.manasik-material-steps li{
    display:grid;
    grid-template-columns:34px 1fr;
    gap:10px;
    align-items:start;
}

.manasik-material-steps li > span{
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#eaf7f0;
    color:var(--brand-primary);
    font-size:.7rem;
    font-weight:850;
}

.manasik-material-steps p{
    margin:4px 0 0;
    color:#627068;
    font-size:.82rem;
    line-height:1.58;
}

.manasik-material-note-block{
    background:#fbfdfc;
}

.manasik-material-note-list{
    padding-left:18px;
    list-style:disc;
}

.manasik-material-note-list li{
    color:#6d7972;
    font-size:.82rem;
    line-height:1.62;
}

.manasik-learning-checklist{
    display:grid;
    gap:8px;
}

.manasik-learning-checklist label{
    display:grid;
    grid-template-columns:20px 1fr;
    gap:9px;
    align-items:start;
    padding:10px 11px;
    border:1px solid #edf0ee;
    border-radius:11px;
    background:#fafcfb;
    color:#617068;
    font-size:.79rem;
    line-height:1.5;
    cursor:pointer;
}

.manasik-learning-checklist input{
    margin-top:3px;
    accent-color:var(--brand-primary);
}

.manasik-material-sidebar{
    display:grid;
    align-content:start;
    gap:12px;
}

.manasik-material-side-card{
    padding:18px;
    border:1px solid #e3e8e5;
    border-radius:16px;
    background:#fafcfb;
}

.manasik-material-side-card strong{
    display:block;
    color:#28372f;
    font-size:.88rem;
}

.manasik-material-side-card a{
    display:inline-flex;
    margin-top:9px;
    color:var(--brand-primary);
    font-size:.76rem;
    font-weight:800;
}

.manasik-material-navigation{
    display:grid;
    gap:10px;
    margin-top:22px;
}

.manasik-material-navigation a{
    padding:14px;
    border:1px solid #e2e8e4;
    border-radius:13px;
    background:#fff;
}

.manasik-material-navigation small{
    display:block;
    margin-bottom:3px;
    color:#87928b;
    font-size:.64rem;
}

.manasik-material-navigation strong{
    color:#2c3a32;
    font-size:.8rem;
}

.manasik-arabic-block{
    padding:16px;
    border-radius:13px;
    background:#f8faf9;
    color:#24342b;
    font-size:1.25rem;
    line-height:1.9;
    text-align:right;
}

@media(min-width:700px){
    .manasik-material-navigation{
        grid-template-columns:1fr 1fr;
    }

    .manasik-material-navigation a:last-child{
        text-align:right;
    }
}

@media(min-width:1000px){
    .manasik-material-hero{
        padding:58px 0 56px;
    }

    .manasik-material-hero-grid{
        grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
        align-items:end;
        gap:46px;
    }

    .manasik-material-hero h1{
        font-size:clamp(3rem,5vw,4.2rem);
    }

    .manasik-material-content{
        padding:70px 0 78px;
    }

    .manasik-material-layout{
        grid-template-columns:minmax(0,1.35fr) minmax(270px,.65fr);
        gap:28px;
        align-items:start;
    }

    .manasik-material-block{
        padding:24px;
    }

    .manasik-material-sidebar{
        position:sticky;
        top:110px;
    }
}


/* ============================================================
   M6A - STRUCTURE DOA / DALIL / VIDEO
   Mobile first + safe responsive media
   ============================================================ */

.manasik-material-block-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin-bottom:14px;
}

.manasik-material-block-head h2{
    margin-bottom:0 !important;
}

.manasik-material-head-icon{
    width:36px;
    height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    border-radius:11px;
    background:#eaf7f0;
    color:var(--brand-primary);
    font-size:.8rem;
    font-weight:900;
}

.manasik-source-block,
.manasik-prayer-block,
.manasik-video-block{
    position:relative;
    overflow:hidden;
}

.manasik-source-block::after,
.manasik-prayer-block::after,
.manasik-video-block::after{
    content:"";
    position:absolute;
    width:90px;
    height:90px;
    right:-48px;
    bottom:-48px;
    border-radius:50%;
    background:color-mix(in srgb,var(--brand-primary) 3.5%,transparent);
    pointer-events:none;
}

.manasik-arabic-block{
    position:relative;
    z-index:1;
    padding:18px 16px !important;
    border:1px solid color-mix(in srgb,var(--brand-primary) 10%,transparent);
    border-radius:14px !important;
    background:#f8fbf9 !important;
    color:#1f3127 !important;
    font-size:clamp(1.35rem,6vw,1.75rem) !important;
    line-height:2 !important;
    text-align:right !important;
    unicode-bidi:plaintext;
}

.manasik-latin-block,
.manasik-translation-block{
    position:relative;
    z-index:1;
    margin-top:12px;
    padding:13px 14px;
    border:1px solid #edf0ee;
    border-radius:12px;
    background:#fff;
}

.manasik-latin-block > span,
.manasik-translation-block > span,
.manasik-source-ref > span{
    display:block;
    margin-bottom:5px;
    color:#7b867f;
    font-size:.64rem;
    font-weight:850;
    letter-spacing:.07em;
    text-transform:uppercase;
}

.manasik-latin-block p,
.manasik-translation-block p{
    margin:0;
    color:#59675f;
    font-size:.82rem;
    line-height:1.65;
}

.manasik-source-ref{
    position:relative;
    z-index:1;
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid #edf0ee;
}

.manasik-source-ref strong{
    color:#35443b;
    font-size:.76rem;
    line-height:1.5;
    font-weight:750;
}

.manasik-video-frame{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    border:1px solid #e4e9e6;
    border-radius:14px;
    background:#111;
    box-shadow:0 10px 28px rgba(15,23,42,.08);
}

.manasik-video-frame iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
}

.manasik-video-caption{
    margin:11px 0 0 !important;
    color:#758078 !important;
    font-size:.75rem !important;
    line-height:1.55 !important;
}

@media(min-width:700px){
    .manasik-arabic-block{
        padding:22px 20px !important;
    }
}


/* ============================================================
   GLOBAL ARABIC FONT
   Semua teks Arab di website memakai Scheherazade New.
   ============================================================ */

:root{
    --font-arabic:'Scheherazade New', serif;
}

[lang="ar"],
[dir="rtl"],
.arabic,
.arabic-text,
.font-arabic,
.doa-arabic,
.quran-arabic,
.hadith-arabic,
.manasik-arabic-block{
    font-family:var(--font-arabic) !important;
    font-weight:500;
    line-height:1.9;
    letter-spacing:0;
}

.manasik-arabic-block{
    font-size:clamp(1.55rem,6vw,2rem) !important;
    line-height:2.05 !important;
}


/* ============================================================
   M9E UI FIX - REFERENCE GRID
   Komponen khusus daftar Referensi Manasik.
   Jangan gunakan .manasik-step-card karena class tersebut
   adalah komponen timeline/pipeline.
   ============================================================ */

.manasik-reference-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    margin-top:26px;
}

.manasik-reference-card{
    min-width:0;
    display:flex;
    flex-direction:column;
    min-height:100%;
    padding:20px;
    border:1px solid #e3e9e5;
    border-radius:18px;
    background:#fff;
    box-shadow:0 10px 28px rgba(15,23,42,.045);
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.manasik-reference-card:hover{
    transform:translateY(-2px);
    border-color:color-mix(in srgb,var(--brand-primary) 20%,transparent);
    box-shadow:0 16px 34px rgba(15,23,42,.075);
}

.manasik-reference-card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:15px;
}

.manasik-reference-category{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:5px 10px;
    border-radius:999px;
    background:#eaf7f0;
    color:var(--brand-primary);
    font-size:.67rem;
    font-weight:850;
    line-height:1.2;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.manasik-reference-icon{
    width:34px;
    height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 34px;
    border:1px solid color-mix(in srgb,var(--brand-primary) 12%,transparent);
    border-radius:10px;
    background:#f8fbf9;
    color:var(--brand-primary);
    font-size:.9rem;
    font-weight:900;
}

.manasik-reference-card h3{
    margin:0;
    color:#1e2f25;
    font-size:1.08rem;
    line-height:1.28;
    letter-spacing:-.02em;
    font-weight:850;
}

.manasik-reference-card p{
    margin:9px 0 18px;
    color:#6f7c74;
    font-size:.84rem;
    line-height:1.62;
}

.manasik-reference-link{
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:auto;
    padding:0 14px;
    border-radius:12px;
    background:var(--brand-primary);
    color:#fff;
    font-size:.77rem;
    font-weight:850;
}

.manasik-reference-link:hover{
    color:#fff;
    background:var(--brand-primary-dark);
}

@media(min-width:700px){
    .manasik-reference-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:18px;
    }

    .manasik-reference-card{
        padding:22px;
    }

    .manasik-reference-card h3{
        font-size:1.15rem;
    }
}

@media(min-width:1100px){
    .manasik-reference-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:20px;
    }

    .manasik-reference-card{
        padding:24px;
    }
}