:root {
  --sdm-primary: #0b4f8a;
  --sdm-primary-dark: #07345d;
  --sdm-accent: var(--sdm-secondary, #ec7a24);
  --sdm-text: #172033;
  --sdm-muted: #687386;
  --sdm-soft: #f4f7fb;
  --sdm-white: #ffffff;
  --sdm-border: #e4eaf1;
  --sdm-shadow: 0 18px 45px rgba(25, 53, 89, .10);
}

html { scroll-behavior: smooth; }
body { color: var(--sdm-text); }

.sdm-section { padding: 96px 0; }
.sdm-section-soft { background: var(--sdm-soft); }
.sdm-section-kicker { display: inline-block; color: var(--sdm-accent); font-size: 13px; font-weight: 800; letter-spacing: 2px; margin-bottom: 14px; }
.sdm-section-title { color: var(--sdm-text); font-size: clamp(32px, 4vw, 48px); font-weight: 800; line-height: 1.18; margin: 0 0 18px; }
.sdm-section-heading { max-width: 760px; margin: 0 auto 52px; }
.sdm-section-heading p, .sdm-heading-copy, .sdm-about-copy { color: var(--sdm-muted); font-size: 17px; line-height: 1.85; }
.sdm-title-line { width: 72px; height: 4px; background: var(--sdm-accent); border-radius: 999px; margin: 0 0 28px; }

.sdm-hero { min-height: 700px; position: relative; }
.sdm-hero .carousel, .sdm-hero .carousel-inner, .sdm-hero .carousel-item { min-height: 700px; }
.sdm-hero .carousel-item { position: relative; background-size: cover; background-position: center; }
.sdm-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--sdm-hero-overlay-left, rgba(11, 94, 145, .82)) 0%,
    var(--sdm-hero-overlay-center, rgba(11, 94, 145, .60)) 50%,
    var(--sdm-hero-overlay-right, rgba(11, 94, 145, .18)) 100%
  );
}
.sdm-hero-content { min-height: 700px; position: relative; z-index: 2; display: flex; align-items: center; padding-top: 80px; padding-bottom: 60px; }
.sdm-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 13px; font-weight: 800; letter-spacing: 2.3px; margin-bottom: 18px; }
.sdm-eyebrow:before { content: ''; width: 42px; height: 3px; background: var(--sdm-accent); }
.sdm-hero h1, .sdm-hero h2 { color: #fff; font-size: clamp(42px, 6vw, 72px); line-height: 1.08; font-weight: 800; margin-bottom: 22px; }
.sdm-hero p { color: rgba(255,255,255,.86); font-size: 18px; line-height: 1.75; max-width: 720px; margin-bottom: 34px; }
.sdm-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.sdm-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 27px; border-radius: 6px; font-weight: 700; transition: .25s ease; }
.sdm-btn:hover { transform: translateY(-2px); }
.sdm-btn-primary { background: var(--sdm-accent); color: #fff; }
.sdm-btn-primary:hover { color: #fff; box-shadow: 0 12px 25px rgba(236,122,36,.3); }
.sdm-btn-outline { color: #fff; border: 1px solid rgba(255,255,255,.6); }
.sdm-btn-outline:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.1); }
.sdm-hero .carousel-control-prev, .sdm-hero .carousel-control-next { width: 6%; }

.sdm-about-image-wrap {
  position: relative;
  isolation: isolate;
  padding: 0 0 34px 34px;
}

.sdm-about-image {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 430px;
  min-height: 0;
  object-fit: contain;
  object-position: center;
  padding: 46px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: var(--sdm-shadow);
}

.sdm-image-accent {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
  width: 70%;
  height: 72%;
  background: var(--sdm-primary);
  border-radius: 10px;
}
.sdm-about-badge { position: absolute; z-index: 3; right: -18px; bottom: 4px; min-width: 180px; background: var(--sdm-accent); color: #fff; padding: 22px 24px; border-radius: 8px; box-shadow: var(--sdm-shadow); }
.sdm-about-badge strong, .sdm-about-badge span { display: block; }
.sdm-about-badge strong { font-size: 22px; }
.sdm-about-badge span { font-size: 13px; opacity: .9; }
.sdm-text-link { color: var(--sdm-primary); font-weight: 750; display: inline-flex; gap: 8px; align-items: center; }
.sdm-text-link:hover { color: var(--sdm-accent); }

.sdm-ecosystem-card { height: 100%; background: #fff; border: 1px solid var(--sdm-border); border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(31,56,88,.06); transition: .3s ease; }
.sdm-ecosystem-card:hover { transform: translateY(-8px); box-shadow: var(--sdm-shadow); }
.sdm-card-image-link { display: block; overflow: hidden; height: 230px; background: #fff; }
.sdm-card-image-link img { width: 100%; height: 100%; object-fit: contain; padding: 26px; transition: .35s ease; }
.sdm-ecosystem-card:hover img { transform: scale(1.05); }
.sdm-card-body { padding: 26px; position: relative; }
.sdm-card-number { position: absolute; right: 22px; top: 18px; color: #dce5ef; font-size: 36px; font-weight: 900; }
.sdm-card-body h3 { position: relative; padding-right: 50px; font-size: 23px; font-weight: 800; margin-bottom: 14px; }
.sdm-card-body p { color: var(--sdm-muted); line-height: 1.7; }

.sdm-service-card { position: relative; height: 100%; padding: 34px 28px; border: 1px solid var(--sdm-border); border-radius: 9px; background: #fff; transition: .3s ease; overflow: hidden; }
.sdm-service-card:before { content: ''; position: absolute; left: 0; top: 0; width: 4px; height: 0; background: var(--sdm-accent); transition: .3s ease; }
.sdm-service-card:hover { transform: translateY(-7px); box-shadow: var(--sdm-shadow); border-color: transparent; }
.sdm-service-card:hover:before { height: 100%; }
.sdm-icon-box { width: 58px; height: 58px; display: inline-flex; align-items: center; justify-content: center; background: rgba(11,79,138,.09); color: var(--sdm-primary); border-radius: 10px; font-size: 27px; margin-bottom: 24px; }
.sdm-service-card h3 { font-size: 21px; font-weight: 800; line-height: 1.35; margin-bottom: 14px; }
.sdm-service-card p { color: var(--sdm-muted); line-height: 1.7; margin-bottom: 48px; }
.sdm-card-link { position: absolute; left: 28px; bottom: 28px; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--sdm-primary); border-radius: 50%; }
.sdm-card-link:hover { background: var(--sdm-accent); color: #fff; }

.sdm-industries { background: linear-gradient(135deg, var(--sdm-primary-dark), var(--sdm-primary)); }
.sdm-heading-light .sdm-section-title, .sdm-heading-light p { color: #fff; }
.sdm-heading-light p { opacity: .76; }
.sdm-industry-card { min-height: 126px; display: flex; align-items: center; gap: 18px; padding: 28px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; color: #fff; background: rgba(255,255,255,.06); transition: .25s ease; }
.sdm-industry-card:hover { background: #fff; color: var(--sdm-primary); transform: translateY(-4px); }
.sdm-industry-card > i:first-child { font-size: 31px; color: var(--sdm-accent); }
.sdm-industry-card h3 { flex: 1; font-size: 18px; font-weight: 750; margin: 0; color: inherit; }
.sdm-industry-arrow { opacity: .7; }

.sdm-advantage-card { height: 100%; display: flex; gap: 18px; padding: 24px; background: #fff; border: 1px solid var(--sdm-border); border-radius: 8px; }
.sdm-advantage-card > i { color: var(--sdm-accent); font-size: 29px; }
.sdm-advantage-card h3 { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.sdm-advantage-card p { color: var(--sdm-muted); line-height: 1.6; margin: 0; }

.sdm-cta { padding: 0 0 96px; }
.sdm-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 48px 54px; border-radius: 10px; background: var(--sdm-accent); color: #fff; }
.sdm-cta-inner span { font-size: 12px; font-weight: 800; letter-spacing: 2px; }
.sdm-cta-inner h2 { color: #fff; max-width: 700px; margin: 8px 0 0; font-size: clamp(28px, 3vw, 40px); font-weight: 800; }
.sdm-cta .sdm-btn-light {
  background: #fff;
  color: var(--sdm-primary) !important;
  white-space: nowrap;
}
.sdm-cta .sdm-btn-light:hover,
.sdm-cta .sdm-btn-light:focus {
  color: var(--sdm-accent) !important;
}
.sdm-hero-partner-logos {
  position: absolute;
  z-index: 4;
  top: var(--hero-logo-top-desktop);
  right: var(--hero-logo-right-desktop);
  display: flex;
  align-items: center;
  gap: var(--hero-logo-gap);
  opacity: var(--hero-logo-opacity);
  pointer-events: none;
}
.sdm-hero-partner-logo {
  display: block;
  height: auto;
  max-height: 150px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .16));
}
.sdm-hero-partner-logo--atp { width: var(--hero-atp-width-desktop); }
.sdm-hero-partner-logo--pmi { width: var(--hero-pmi-width-desktop); }
.sdm-hero-partner-logos-mobile { display: none; }

.sdm-contact-card { width: 100%; text-align: center; padding: 38px 26px; background: #fff; border: 1px solid var(--sdm-border); border-radius: 9px; box-shadow: 0 10px 30px rgba(31,56,88,.05); }
.sdm-contact-card h3 { font-size: 20px; font-weight: 800; margin-bottom: 12px; }
.sdm-contact-card p { color: var(--sdm-muted); line-height: 1.65; margin: 0; }
.sdm-contact-card a { color: var(--sdm-muted); }
.sdm-contact-card a:hover { color: var(--sdm-accent); }

@media (max-width: 991.98px) {
  .sdm-section { padding: 76px 0; }
  .sdm-hero, .sdm-hero .carousel, .sdm-hero .carousel-inner, .sdm-hero .carousel-item, .sdm-hero-content { min-height: 620px; }
  .sdm-hero-overlay { background: var(--sdm-hero-overlay-mobile, rgba(11, 94, 145, .72)); }
  .sdm-about-image-wrap { margin-top: 15px; }
  .sdm-cta-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 767.98px) {
  .sdm-section { padding: 64px 0; }
  .sdm-hero, .sdm-hero .carousel, .sdm-hero .carousel-inner, .sdm-hero .carousel-item, .sdm-hero-content { min-height: 580px; }
  .sdm-hero h1, .sdm-hero h2 { font-size: 40px; }
  .sdm-hero p { font-size: 16px; }
  .sdm-hero-partner-logos {
    display: none;
  }
  .sdm-hero-partner-logos-mobile {
    display: flex;
    width: 100%;
    min-height: 58px;
    align-items: center;
    justify-content: center;
    gap: min(var(--hero-logo-gap), 14px);
    margin: -12px 0 22px;
    opacity: var(--hero-logo-opacity);
    pointer-events: none;
  }
  .sdm-hero-partner-logos-mobile .sdm-hero-partner-logo {
    flex: 0 0 auto;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .14));
  }
  .sdm-hero-partner-logos-mobile .sdm-hero-partner-logo--atp {
    width: min(var(--hero-atp-width-mobile), 54px);
    max-width: 54px;
    max-height: 54px;
  }
  .sdm-hero-partner-logos-mobile .sdm-hero-partner-logo--pmi {
    width: min(var(--hero-pmi-width-mobile), 140px);
    max-width: 140px;
    max-height: 46px;
  }
  .sdm-about-image-wrap { padding: 0 0 25px 20px; }
  .sdm-about-image {
    height: 350px;
    min-height: 0;
    padding: 34px;
  }
  .sdm-about-badge { right: 0; }
  .sdm-cta { padding-bottom: 64px; }
  .sdm-cta-inner { padding: 34px 28px; }
}

@media (max-width: 575.98px) {
  .sdm-btn { width: 100%; }
  .sdm-about-image {
    height: 290px;
    padding: 24px;
  }
  .sdm-card-image-link { height: 200px; }
  .sdm-about-badge { position: relative; margin: -28px 12px 0 auto; width: max-content; }
}

/* Stability overrides for the legacy template CSS. */
#hero.sdm-hero,
#hero.sdm-hero .carousel,
#hero.sdm-hero .carousel-inner,
#hero.sdm-hero .carousel-item,
#hero.sdm-hero .sdm-hero-content {
  min-height: 650px !important;
  height: 650px !important;
}

@media (max-width: 991.98px) {
  #hero.sdm-hero,
  #hero.sdm-hero .carousel,
  #hero.sdm-hero .carousel-inner,
  #hero.sdm-hero .carousel-item,
  #hero.sdm-hero .sdm-hero-content {
    min-height: 580px !important;
    height: 580px !important;
  }
}

@media (max-width: 575.98px) {
  #hero.sdm-hero,
  #hero.sdm-hero .carousel,
  #hero.sdm-hero .carousel-inner,
  #hero.sdm-hero .carousel-item,
  #hero.sdm-hero .sdm-hero-content {
    min-height: 620px !important;
    height: 620px !important;
  }
}


/* =========================================================
   ABOUT US - SIMPLE LAYOUT
   ========================================================= */

.sdm-about-simple {
  overflow: hidden;
  background: #ffffff;
  padding: 72px 0 88px;
}

/* Judul About Us */
.sdm-about-simple-title {
  color: #39372d;
  font-family: "Raleway", sans-serif;
  font-size: clamp(62px, 8vw, 118px);
  font-weight: 300;
  letter-spacing: -0.07em;
  line-height: 0.92;
  margin: 0 0 76px;
}

/* Area teks */
.sdm-about-simple-content {
  max-width: 1040px;
}

.sdm-about-simple-content p {
  color: #161616;
  font-family: "Open Sans", sans-serif;
  font-size: clamp(20px, 1.75vw, 29px);
  font-weight: 400;
  line-height: 1.48;
  margin: 0 0 42px;
}

.sdm-about-simple-content p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   AREA LOGO
   ========================================================= */

.sdm-about-simple-logo {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 300px;
  padding: 8px 0 0;
}

/* =========================================================
   POSISI DAN UKURAN LOGO DESKTOP

   Cara mengatur:
   translate(X, Y)

   X positif  = ke kanan
   X negatif  = ke kiri
   Y positif  = ke bawah
   Y negatif  = ke atas

   Contoh:
   translate(20px, 15px)   = kanan dan bawah
   translate(-20px, -15px) = kiri dan atas
   ========================================================= */

.sdm-about-simple-logo img {
  display: block;
  width: 100%;
  max-width: 400px;
  max-height: 260px;
  object-fit: contain;
  object-position: center;

  /* UBAH POSISI LOGO DI SINI */
  transform: translate(-20px, -15px);
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {
  .sdm-about-simple {
    padding: 64px 0 72px;
  }

  .sdm-about-simple-title {
    margin-bottom: 52px;
  }

  .sdm-about-simple-logo {
    min-height: auto;
    justify-content: center;
    padding: 20px 0 0;
  }

  .sdm-about-simple-logo img {
    max-width: 360px;
    max-height: 250px;

    /* POSISI LOGO TABLET */
    transform: translate(0, -10px);
  }
}

/* =========================================================
   MOBILE / HANDPHONE
   ========================================================= */

@media (max-width: 575.98px) {
  .sdm-about-simple {
    padding: 50px 0 58px;
  }

  .sdm-about-simple-title {
    font-size: 58px;
    margin-bottom: 38px;
  }

  .sdm-about-simple-content p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 28px;
  }

  .sdm-about-simple-logo {
    padding-top: 20px;
  }

  .sdm-about-simple-logo img {
    max-width: 290px;
    max-height: 210px;

    /* POSISI LOGO MOBILE */
    transform: translate(0, 0);
  }
}