:root{
  --bg:#F4F7FA;
  --white:#FFFFFF;
  --text:#17324D;
  --muted:#617489;
  --line:rgba(255,255,255,.45);
  --line-soft:rgba(17,70,120,.08);
  --navy:#103E6B;
  --navy-2:#174E86;
  --teal:#1CBEC2;
  --teal-2:#37D3D7;
  --shadow:0 20px 50px rgba(18,52,86,.08);
  --shadow-soft:0 12px 28px rgba(18,52,86,.06);
  --radius:24px;
  --radius-md:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-family, 'Plus Jakarta Sans', sans-serif);
  font-size:var(--fs-body, 16px);
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{font-family:inherit}

.page-orb{
  position:fixed;
  z-index:-1;
  filter:blur(70px);
  opacity:.45;
  border-radius:999px;
}
.orb-left{width:280px;height:280px;background:rgba(28,190,194,.22);left:-60px;top:180px}
.orb-right{width:340px;height:340px;background:rgba(16,62,107,.16);right:-120px;top:60%}

.section-gap{padding:78px 0}
.section-gap-small{padding:32px 0 70px}
.section-gap-top{padding-top:18px;padding-bottom:50px}
.container{position:relative;z-index:1}

.glass-card,
.glass-chip{
  background:rgba(255,255,255,.70);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:var(--shadow-soft);
}
.glass-card{border-radius:var(--radius)}
.glass-chip{border-radius:999px}

.site-navbar{padding:12px 0;transition:.25s ease}
.site-navbar.nav-scrolled{padding:8px 0}
.nav-shell{
  padding:14px 18px;
  border-radius:22px;
  background:rgba(255,255,255,.60);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 16px 38px rgba(18,52,86,.08);
}
.brand-wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.brand-badge{
  display:flex;align-items:center;justify-content:center;
  height:40px;padding:0 14px;border-radius:12px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(16,62,107,.08);
}
.brand-badge img{height:20px;width:auto;object-fit:contain}
.brand-badge-sitireq img{height:18px}
.nav-center-list{gap:8px}
.site-navbar .nav-link{
  color:var(--muted);
  font-size:var(--fs-navbar, .95rem);
  font-weight:700;
  padding:10px 15px !important;
  border-radius:12px;
  transition:.2s ease;
}
.site-navbar .nav-link.active,
.site-navbar .nav-link:hover{
  color:var(--navy);
  background:rgba(16,62,107,.06);
}
.btn-login,
.btn-primary-soft,
.btn-ghost-soft,
.btn-inline-soft,
.btn-form-submit{
  border:none;border-radius:14px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  transition:.2s ease;white-space:nowrap;
}
.btn-login,
.btn-primary-soft,
.btn-form-submit{
  color:#fff;
  background:linear-gradient(135deg,var(--navy),var(--teal));
  box-shadow:0 16px 30px rgba(16,62,107,.18);
}
.btn-login{padding:12px 18px;font-size:var(--fs-button, .92rem)}
.btn-primary-soft{padding:14px 22px;font-size:var(--fs-button, 15px)}
.btn-form-submit{padding:16px 22px;font-size:var(--fs-button, 15px)}
.btn-ghost-soft,
.btn-inline-soft{
  color:var(--navy);
  background:rgba(255,255,255,.82);
  border:1px solid rgba(16,62,107,.10);
  box-shadow:var(--shadow-soft);
}
.btn-ghost-soft{padding:14px 22px}
.btn-inline-soft{padding:14px 18px}
.btn-login:hover,.btn-primary-soft:hover,.btn-form-submit:hover{transform:translateY(-2px);color:#fff}
.btn-ghost-soft:hover,.btn-inline-soft:hover{transform:translateY(-2px);color:var(--navy)}
.navbar-toggler{border:none;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.76)}
.navbar-toggler:focus{box-shadow:none}
.navbar-toggler i{font-size:1.35rem;color:var(--navy)}

.intro-stage{padding-top:145px;padding-bottom:40px}
.pill-kicker{margin-bottom:16px}
.pill-kicker span,
.section-kicker,
.mini-kicker{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.74);
  border:1px solid rgba(16,62,107,.08);
  color:var(--teal);
  font-weight:800;font-size:var(--fs-section-kicker, .82rem);text-transform:none;
}
.display-title{
  font-size:var(--fs-intro-title, clamp(2.1rem,4vw,3.4rem));
  line-height:1.08;
  letter-spacing:-.04em;
  font-weight:800;
  margin:0 0 18px;
  color:var(--navy);
}
.lead-text,
.section-text,
.section-paragraph,
.section-heading p,
.service-card p,
.process-item p,
.feature-card p,
.value-item p,
.contact-info-card p,
.document-head p,
.footer-desc,
.footer-main ul li a,
.footer-contact li span,
.document-list em,
.hero-preview-note p,
.trust-strip span,
.team-mini-card span,
.insight-card span,
.stat-card span,
.network-number-grid span,
.about-float span,
.contact-list span{
  color:var(--muted);
  line-height:1.8;
}
.lead-text{font-size:var(--fs-intro-description, 1.03rem);max-width:620px}
.action-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:28px}
.hero-preview-card{padding:16px}
.hero-preview-media{border-radius:20px;overflow:hidden;background:linear-gradient(135deg,var(--teal),var(--navy));position:relative;min-height:320px}
.preview-video-link{display:block;position:relative;height:100%}
.preview-video-link img{width:100%;height:320px;object-fit:cover;opacity:.86}
.preview-video-link::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(28,190,194,.18),rgba(16,62,107,.28));pointer-events:none}
.play-button{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:2rem;background:rgba(255,255,255,.22);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.5)
}
.hero-preview-note{padding:16px 6px 4px}
.hero-preview-note h3,.section-title-lg,.section-title,.section-heading h2,.service-card h3,.process-item h3,.feature-card h3,.value-item h3,.document-head h3,.contact-info-card h3,.footer-main h3{margin:0 0 10px;font-weight:800;color:var(--navy);letter-spacing:-.03em}
.hero-preview-note h3{font-size:1.18rem}
.section-secondary{padding-top:14px}
.panel-card,.media-card,.about-card,.document-card,.contact-info-card,.contact-form-card,.footer-cta,.network-panel{padding:24px}
.section-title-lg{font-size:var(--fs-hero-title, clamp(2rem,3vw,2.8rem));line-height:1.1}
.section-title{font-size:var(--fs-section-title, clamp(1.7rem,2.8vw,2.5rem));line-height:1.14}
.section-paragraph{font-size:var(--fs-hero-description, 1rem)}
.mini-kicker i{color:var(--teal)}
.trust-strip{margin-top:24px;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;background:rgba(244,247,250,.78);border:1px solid rgba(16,62,107,.08)}
.trust-strip img{height:42px;width:auto;object-fit:contain}
.trust-strip strong{display:block;color:var(--navy)}
.media-card-head{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.78rem;font-weight:700;text-transform:uppercase;padding-bottom:16px}
.media-card-head span{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--navy))}
.media-card-head em{margin-left:auto;font-style:normal}
.media-card-body{border-radius:20px;overflow:hidden;background:linear-gradient(135deg,rgba(28,190,194,.22),rgba(16,62,107,.08))}
.media-card-body img{width:100%;height:365px;object-fit:cover}

.stats-section{margin-top:-6px}
.stat-card{padding:22px 18px;height:100%;text-align:left}
.stat-icon{
  width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  color:var(--teal);background:rgba(28,190,194,.12);font-size:1.15rem;margin-bottom:16px
}
.stat-card strong{display:block;font-size:var(--fs-stat-number, 2rem);color:var(--navy);line-height:1.1;margin-bottom:6px}
.stat-card span{font-size:var(--fs-stat-label, .95rem)}

.section-heading{max-width:780px}
.section-heading h2{font-size:var(--fs-section-title, clamp(1.8rem,3vw,2.65rem));line-height:1.18;margin-bottom:14px}
.service-card{padding:24px;height:100%}
.service-icon{
  width:58px;height:58px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  font-size:1.35rem;color:#fff;margin-bottom:18px;background:linear-gradient(135deg,var(--navy),var(--teal))
}
.icon-teal{background:linear-gradient(135deg,#16a8b4,#1ad0cc)}
.icon-blue{background:linear-gradient(135deg,#245ea5,#3d8de8)}
.icon-cyan{background:linear-gradient(135deg,#22b0cd,#24d2ba)}
.icon-navy{background:linear-gradient(135deg,#103e6b,#1f5f95)}
.service-card h3{font-size:var(--fs-card-title, 1.16rem)}
.link-button{padding:0;background:none;border:none;color:var(--teal);font-weight:800;margin-top:8px}
.link-button i{transition:.2s ease}
.link-button:hover i{transform:translateX(4px)}

.section-soft-panel{background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.46),rgba(255,255,255,0))}
.insight-card{padding:18px;display:flex;gap:16px;align-items:flex-start;margin-top:22px}
.insight-card i{font-size:1.4rem;color:var(--teal)}
.insight-card strong{display:block;color:var(--navy);margin-bottom:4px}
.process-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.process-item{padding:22px}
.process-item span{
  display:inline-flex;width:48px;height:48px;border-radius:14px;align-items:center;justify-content:center;
  margin-bottom:14px;color:#fff;font-weight:800;background:linear-gradient(135deg,var(--navy),var(--teal))
}
.process-item h3{font-size:var(--fs-card-title, 1.1rem)}

.about-building{width:100%;height:400px;object-fit:cover;border-radius:20px}
.about-card{position:relative;padding:16px}
.about-float{
  position:absolute;left:28px;right:28px;bottom:28px;padding:14px 18px;
  display:flex;align-items:center;gap:14px
}
.about-float img{height:32px;width:auto;object-fit:contain}
.value-timeline{display:grid;gap:16px;margin-top:24px}
.value-item{padding:18px 20px;position:relative}
.value-item span{width:11px;height:11px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--teal));display:block;margin-bottom:12px}
.value-item h3{font-size:var(--fs-card-title, 1.05rem);margin-bottom:4px}

.feature-card{padding:22px}
.feature-card i{font-size:1.45rem;color:var(--teal);margin-bottom:16px;display:inline-block}
.feature-card h3{font-size:var(--fs-card-title, 1.1rem)}
.swiper-pagination-bullet{background:rgba(16,62,107,.25);opacity:1}
.swiper-pagination-bullet-active{background:linear-gradient(135deg,var(--navy),var(--teal))}

.network-panel{padding:28px}
.network-number-grid{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px}
.network-number-grid .glass-chip{padding:16px 18px}
.network-number-grid strong{display:block;font-size:2rem;color:var(--navy);line-height:1.05}
.map-panel{display:block;border-radius:24px;overflow:hidden;position:relative;border:1px solid rgba(255,255,255,.72);box-shadow:var(--shadow)}
.map-panel img{width:100%;height:360px;object-fit:cover;background:#fff}
.map-panel span{position:absolute;left:18px;right:18px;bottom:18px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);display:flex;align-items:center;gap:8px;color:var(--navy);font-weight:700}

.modern-accordion{display:grid;gap:14px}
.modern-accordion .accordion-item{overflow:hidden;padding:0}
.modern-accordion .accordion-button{
  background:transparent !important;box-shadow:none !important;border:none;
  color:var(--navy);font-weight:800;padding:20px 22px
}
.modern-accordion .accordion-button:not(.collapsed){color:var(--navy)}
.modern-accordion .accordion-body{padding:0 22px 22px;color:var(--muted);line-height:1.8}
.modern-accordion .accordion-button::after{filter:hue-rotate(170deg) saturate(1.4)}
.document-head{display:flex;align-items:center;gap:16px;padding-bottom:18px;border-bottom:1px solid rgba(16,62,107,.08)}
.document-head img{width:46px;height:46px;object-fit:contain;border-radius:14px}
.document-head h3{font-size:var(--fs-card-title, 1.2rem);margin-bottom:2px}
.document-list{display:grid;gap:12px;padding:18px 0}
.document-list button{
  width:100%;border:none;text-align:left;padding:16px 18px;border-radius:16px;
  background:rgba(244,247,250,.88);display:flex;align-items:center;justify-content:space-between;gap:12px
}
.document-list button span{display:flex;align-items:center;gap:10px;color:var(--navy);font-weight:700}
.document-list button i{color:var(--teal)}
.document-progress strong{color:var(--navy)}
.progress{height:10px;border-radius:999px;background:rgba(16,62,107,.08)}
.progress-bar{background:linear-gradient(135deg,var(--navy),var(--teal));border-radius:999px}

.contact-brand-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.contact-logo{height:28px;width:auto;object-fit:contain}
.contact-logo-sitireq{height:22px}
.contact-list{list-style:none;padding:0;margin:20px 0;display:grid;gap:14px}
.contact-list li,
.footer-contact li{display:flex;align-items:flex-start;gap:12px}
.contact-list i,
.footer-contact i{color:var(--teal);font-size:1.08rem;line-height:1.8}
.team-mini-card{margin-top:18px;padding:14px;border-radius:18px;background:rgba(244,247,250,.84);border:1px solid rgba(16,62,107,.08);display:flex;gap:14px;align-items:center}
.team-mini-card img{width:68px;height:68px;object-fit:cover;border-radius:16px}
.team-mini-card strong{display:block;color:var(--navy);margin-bottom:4px}
.contact-form-card{padding:24px}
.form-label{font-weight:700;color:var(--navy);margin-bottom:8px;font-size:var(--fs-form-label, 15px)}
.form-control,.form-select{
  border-radius:16px;padding:14px 16px;border:1px solid rgba(16,62,107,.10);
  background:rgba(255,255,255,.92);box-shadow:none;color:var(--text)
}
.form-control:focus,.form-select:focus{border-color:rgba(28,190,194,.45);box-shadow:0 0 0 .18rem rgba(28,190,194,.10)}
textarea.form-control{min-height:140px;resize:vertical}

.footer-pro{padding-bottom:45px}
.footer-cta{padding:24px 26px;display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:34px}
.footer-cta span{display:inline-block;color:var(--teal);font-weight:800;margin-bottom:10px}
.footer-cta h2{font-size:var(--fs-section-title, clamp(1.6rem,2.4vw,2.2rem));line-height:1.15;margin:0 0 8px;color:var(--navy);font-weight:800}
.footer-cta p{margin:0;color:var(--muted);line-height:1.8}
.footer-main{padding:10px 0 16px}
.footer-logo{height:32px;width:auto;object-fit:contain;margin-bottom:16px}
.footer-social{display:flex;gap:12px;margin-top:18px}
.footer-social a,.back-top{
  width:42px;height:42px;border:none;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.82);box-shadow:var(--shadow-soft);color:var(--navy)
}
.footer-main h3{font-size:var(--fs-card-title, 1rem);margin-bottom:14px}
.footer-main ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.footer-main ul li a:hover{color:var(--navy)}
.footer-bottom{padding-top:16px;border-top:1px solid rgba(16,62,107,.08);display:flex;justify-content:space-between;gap:18px;align-items:center;color:var(--muted)}

.admin-page-note{font-size:.92rem;color:var(--muted)}

@media (max-width:1199.98px){
  .site-navbar .navbar-collapse{margin-top:14px;padding-top:14px;border-top:1px solid rgba(16,62,107,.08)}
  .nav-center-list{padding-bottom:10px}
}
@media (max-width:991.98px){
  .section-gap{padding:62px 0}
  .intro-stage{padding-top:126px}
  .display-title{font-size:2.35rem}
  .media-card-body img,.about-building,.map-panel img,.preview-video-link img{height:300px}
  .process-grid{grid-template-columns:1fr}
  .footer-cta{flex-direction:column;align-items:flex-start}
}
@media (max-width:767.98px){
  .nav-shell{padding:12px 14px}
  .brand-wrap{gap:8px}
  .brand-badge{height:36px;padding:0 10px}
  .brand-badge img{height:17px}
  .intro-stage{padding-top:118px}
  .display-title{font-size:2rem}
  .action-row{gap:10px}
  .btn-login,.btn-primary-soft,.btn-ghost-soft,.btn-inline-soft,.btn-form-submit{width:100%}
  .panel-card,.media-card,.about-card,.document-card,.contact-info-card,.contact-form-card,.footer-cta,.network-panel,.hero-preview-card{padding:18px}
  .preview-video-link img,.media-card-body img,.about-building,.map-panel img{height:240px}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}

/* FIX V7 - video awal model IDSurvey, dibuat rounded */
.intro-video-stage{
  padding:126px 0 36px;
}
.intro-video-shell{
  position:relative;
  min-height:650px;
  border-radius:36px;
  overflow:hidden;
  background:#0f3d68;
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 28px 70px rgba(16,62,107,.18);
  isolation:isolate;
}
.intro-bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border:0;
  transform:scale(1.01);
}
.intro-video-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,rgba(4,24,42,.78) 0%,rgba(9,48,80,.58) 46%,rgba(8,72,98,.20) 100%),
    linear-gradient(180deg,rgba(8,36,60,.18) 0%,rgba(8,36,60,.42) 100%);
}
.intro-video-shine{
  position:absolute;
  z-index:2;
  inset:18px;
  border-radius:28px;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.intro-video-content{
  position:relative;
  z-index:3;
  min-height:650px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  max-width:780px;
  padding:68px clamp(28px,6vw,76px);
}
.intro-logo-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:34px;
}
.intro-logo-row span{
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.72);
}
.intro-logo-row img{height:21px;width:auto;object-fit:contain;max-width:152px}
.intro-logo-row span:last-child img{height:19px}
.intro-kicker span{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.30);
  color:#ffffff;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.intro-title{
  color:#fff;
  max-width:760px;
  text-shadow:0 12px 34px rgba(0,0,0,.24);
}
.intro-lead{
  color:rgba(255,255,255,.84);
  max-width:640px;
}
.intro-actions .btn-primary-soft{
  background:linear-gradient(135deg,#1CBEC2,#103E6B);
  box-shadow:0 18px 35px rgba(0,0,0,.22);
}
.btn-video-ghost{
  border:none;
  border-radius:14px;
  padding:14px 22px;
  font-weight:800;
  color:#103E6B;
  background:rgba(255,255,255,.88);
  box-shadow:0 14px 26px rgba(0,0,0,.12);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:.2s ease;
}
.btn-video-ghost:hover{transform:translateY(-2px);color:#103E6B;background:#fff}

@media (max-width:991.98px){
  .intro-video-stage{padding-top:118px}
  .intro-video-shell,.intro-video-content{min-height:560px}
  .intro-video-shell{border-radius:30px}
  .intro-video-shine{border-radius:22px;inset:14px}
}
@media (max-width:767.98px){
  .intro-video-stage{padding-top:106px;padding-bottom:24px}
  .intro-video-shell,.intro-video-content{min-height:520px}
  .intro-video-shell{border-radius:24px}
  .intro-video-content{padding:46px 24px}
  .intro-logo-row{margin-bottom:24px}
  .intro-logo-row span{min-height:36px;padding:8px 10px}
  .intro-logo-row img{height:17px;max-width:120px}
  .btn-video-ghost{width:100%}
}


/* Dynamic typography from admin settings */
.site-navbar .nav-link{font-size:var(--fs-navbar, 15px)}
.btn-login,.btn-primary-soft,.btn-ghost-soft,.btn-inline-soft,.btn-form-submit,.btn-video-ghost{font-size:var(--fs-button, 15px)}
.intro-title{font-size:var(--fs-intro-title, 54px)!important}
.intro-lead{font-size:var(--fs-intro-description, 18px)!important}
.section-title-lg{font-size:var(--fs-hero-title, 42px)!important}
.section-paragraph{font-size:var(--fs-hero-description, 16px)!important}
.section-kicker,.mini-kicker,.pill-kicker span{font-size:var(--fs-section-kicker, 13px)!important}
.section-title,.section-heading h2{font-size:var(--fs-section-title, 38px)!important}
.section-text,.section-heading p{font-size:var(--fs-section-description, 16px)!important}
.service-card h3,.process-item h3,.feature-card h3,.value-item h3,.document-head h3,.contact-info-card h3,.hero-preview-note h3,.team-mini-card strong,.trust-strip strong,.footer-main h3{font-size:var(--fs-card-title, 18px)!important}
.service-card p,.process-item p,.feature-card p,.value-item p,.document-head p,.contact-info-card p,.hero-preview-note p,.team-mini-card span,.trust-strip span,.insight-card span,.document-list em,.contact-list span,.about-float span{font-size:var(--fs-card-description, 15px)!important}
.stat-card strong,.network-number-grid strong{font-size:var(--fs-stat-number, 32px)!important}
.stat-card span,.network-number-grid span{font-size:var(--fs-stat-label, 15px)!important}
.form-label{font-size:var(--fs-form-label, 15px)!important}
.footer-pro,.footer-desc,.footer-main ul li a,.footer-contact li span,.footer-bottom{font-size:var(--fs-footer, 15px)!important}
@media (max-width:767.98px){
  .intro-title{font-size:min(var(--fs-intro-title, 54px), 42px)!important}
  .section-title,.section-heading h2,.section-title-lg{font-size:min(var(--fs-section-title, 38px), 32px)!important}
}