:root{
  --red:#e43d21; --red-dark:#bd2b15; --navy:#17324d; --ink:#18232e;
  --muted:#66717c; --light:#f5f7f8; --white:#fff; --line:#e7eaed;
  --shadow:0 14px 40px rgba(15,30,45,.10);
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:Montserrat,Arial,sans-serif;color:var(--ink);line-height:1.75;background:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none}
a{color:inherit;text-decoration:none}.container{width:min(1180px,92%);margin:auto}

.nav-wrap{background:#fff;position:sticky;top:0;z-index:50;box-shadow:0 4px 20px rgba(0,0,0,.06)}
.nav{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.brand{display:flex;align-items:center;gap:12px}.brand-logo{width:52px;height:52px;object-fit:contain;border-radius:50%;display:block}.brand-mark{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--red);color:#fff;font-weight:800;letter-spacing:1px;box-shadow:0 6px 18px rgba(228,61,33,.25)}
.brand strong{display:block;font-size:14px;letter-spacing:.2px}.brand small{display:block;color:var(--muted);font-size:9px;letter-spacing:1.6px;margin-top:2px}
.menu{display:flex;gap:6px;align-items:center}.menu a{
  padding:26px 13px;
  font-size:12px;
  font-weight:700;
  position:relative;
  transition:color .25s ease, transform .25s ease;
  z-index:1;
}.menu a:after{
  content:"";
  position:absolute;
  left:7px;
  right:7px;
  bottom:10px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--red),#ff7a61);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
  box-shadow:0 4px 12px rgba(228,61,33,.22);
}.menu a:hover,.menu a.active{color:var(--red);transform:translateY(-2px)}.menu a:hover:after,.menu a.active:after{transform:scaleX(1)}
.menu-toggle{display:none;border:0;background:var(--navy);color:#fff;border-radius:8px;width:44px;height:44px;font-size:18px}
.hero{min-height:600px;display:flex;align-items:center;position:relative;background:linear-gradient(90deg,rgba(7,25,39,.92),rgba(7,25,39,.64) 42%,rgba(7,25,39,.12) 78%,rgba(7,25,39,.02)),url('../img/hero-uav-sensing.png') center/cover no-repeat;color:#fff}
.hero-content{max-width:720px;padding:85px 0}.eyebrow{text-transform:uppercase;letter-spacing:3px;font-weight:700;font-size:12px;color:#ffb19f}.hero h1{font-size:clamp(34px,5vw,66px);line-height:1.1;margin:12px 0 22px}.hero p{font-size:16px;max-width:650px;color:#e9eef2}.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 20px;border-radius:7px;font-weight:700;font-size:12px;border:1px solid transparent}.btn-primary{background:var(--red);color:#fff}.btn-primary:hover{background:var(--red-dark)}.btn-light{background:#fff;color:var(--navy)}
.section{padding:78px 0}.section.alt{background:var(--light)}.section-head{max-width:750px;margin-bottom:38px}.section-head.center{margin-inline:auto;text-align:center}.kicker{color:var(--red);font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase}.section h2{font-size:clamp(26px,3.2vw,40px);line-height:1.2;margin:8px 0 14px}.lead{color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px 24px;text-align:center;box-shadow:var(--shadow)}.icon{width:68px;height:68px;border-radius:16px;display:grid;place-items:center;background:#fff1ed;color:var(--red);font-size:30px;margin:0 auto 16px}.card h3{font-size:17px;margin:0;line-height:1.45}
.home-service-cards{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.home-service-cards .card{min-height:174px;padding:25px 16px 22px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:16px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.home-service-cards .card:hover{transform:translateY(-5px);border-color:rgba(190,24,45,.24);box-shadow:0 14px 30px rgba(15,23,42,.11)}
.home-service-cards .icon{width:58px;height:58px;margin:0 auto 15px;border-radius:17px;background:linear-gradient(145deg,var(--red),#8f1327);color:#fff;font-size:24px;box-shadow:0 9px 18px rgba(190,24,45,.20);position:relative;overflow:hidden}
.home-service-cards .icon:before{content:"";position:absolute;inset:1px;border:1px solid rgba(255,255,255,.24);border-radius:16px;pointer-events:none}
.home-service-cards .icon i{position:relative;z-index:1}
.home-service-cards h3{font-size:14px;line-height:1.4;max-width:175px}

.card-link{display:inline-flex;align-items:center;gap:7px;margin-top:18px;color:var(--red);font-size:12px;font-weight:800;text-decoration:none}.card-link:hover{color:var(--red-dark);gap:9px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}.photo{border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:#fff}.photo img{display:block;width:100%;height:420px;object-fit:cover}

.list{padding:0;margin:0;list-style:none}.list li{padding:11px 0;border-bottom:1px solid var(--line);font-size:13px}.list li i{color:var(--red);margin-right:10px}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px}.table{width:100%;border-collapse:collapse;min-width:750px}.table th{background:var(--navy);color:#fff;text-align:left;font-size:11px;padding:13px}.table td{padding:13px;border-bottom:1px solid var(--line);font-size:12px;vertical-align:top}.table tr:nth-child(even){background:#fafafa}
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}.project-card{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 10px 28px rgba(15,23,42,.07);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}.project-card:hover{transform:translateY(-7px);box-shadow:0 18px 40px rgba(15,23,42,.13);border-color:rgba(190,24,45,.28)}.project-image{position:relative;height:205px;overflow:hidden;background:#e9eef2}.project-image-link{display:block;width:100%;height:100%;cursor:zoom-in;overflow:hidden;position:relative}.project-image-link:focus-visible{outline:3px solid rgba(190,24,45,.55);outline-offset:-3px}.project-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease,filter .5s ease}.project-card:hover .project-image img{transform:scale(1.06);filter:saturate(1.06)}.project-body{padding:21px 21px 23px}.project-body h3{margin:0 0 13px;font-size:18px;line-height:1.3;color:var(--navy)}.project-meta{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}.project-meta span{display:flex;align-items:flex-start;gap:8px;color:var(--muted);font-size:11px;line-height:1.45}.project-meta i{width:14px;color:var(--red);margin-top:2px}.project-body p{margin:0;color:var(--muted);font-size:12px;line-height:1.75}.projects-intro{max-width:760px;margin:0 auto 34px}.projects-intro h2{margin-bottom:10px}.projects-intro .lead{margin:0}.project{padding:25px;border:1px solid var(--line);border-radius:14px;background:#fff}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:30px}.contact-card{padding:30px;background:var(--navy);color:#fff;border-radius:16px}.contact-item{display:flex;gap:14px;margin:20px 0}.contact-item i{color:#ff9c89;margin-top:5px}.contact-item span{font-size:12px;color:#dce5eb}
.form{background:#fff;border:1px solid var(--line);padding:30px;border-radius:16px;box-shadow:var(--shadow)}.field{margin-bottom:15px}.field label{display:block;font-size:11px;font-weight:700;margin-bottom:6px}.field input,.field textarea{width:100%;padding:12px;border:1px solid #dce1e5;border-radius:7px;font:inherit;font-size:12px}.field textarea{min-height:140px;resize:vertical}
.footer{background:#101d29;color:#d8e0e6;padding-top:55px}.footer-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(190px,.8fr) minmax(0,1.15fr);gap:28px;padding-bottom:40px}.footer h4{color:#fff;margin:0 0 15px}.footer p{font-size:11px}.footer a:hover{color:#fff}.footer-brand{font-weight:800;color:#fff;letter-spacing:.5px}.copyright{text-align:center;border-top:1px solid rgba(255,255,255,.08);padding:18px;font-size:10px}/* ===== WhatsApp bubble + Back to Top ===== */
.wa{position:fixed;right:22px;bottom:22px;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#32d76f,#18a957);color:#fff;font-size:27px;box-shadow:0 8px 22px rgba(24,169,87,.34),0 0 14px rgba(50,215,111,.18);z-index:70;text-decoration:none;transition:transform .22s ease,box-shadow .22s ease,filter .22s ease}
.wa:before{display:none}
.wa-new-message{position:absolute;right:58px;bottom:50%;transform:translateY(50%) translateX(8px) scale(.96);max-width:210px;padding:9px 13px;border-radius:12px;background:#fff;color:#25313a;font:600 11px/1.35 Arial,sans-serif;white-space:nowrap;box-shadow:0 8px 24px rgba(15,23,42,.16);border:1px solid rgba(15,23,42,.08);opacity:0;visibility:hidden;pointer-events:none;animation:waNewMessage 12s ease-in-out infinite;z-index:71}
.wa-new-message:after{content:"";position:absolute;right:-7px;top:50%;width:13px;height:13px;background:#fff;border-right:1px solid rgba(15,23,42,.08);border-top:1px solid rgba(15,23,42,.08);transform:translateY(-50%) rotate(45deg)}
@keyframes waNewMessage{0%,10%{opacity:0;visibility:hidden;transform:translateY(50%) translateX(8px) scale(.96)}14%,36%{opacity:1;visibility:visible;transform:translateY(50%) translateX(0) scale(1)}42%,100%{opacity:0;visibility:hidden;transform:translateY(50%) translateX(6px) scale(.98)}}
.wa:hover{transform:translateY(-1px) scale(1.04);filter:brightness(1.04);box-shadow:0 10px 26px rgba(24,169,87,.40),0 0 18px rgba(50,215,111,.22)}
.back-to-top{position:fixed;right:33px;bottom:100px;width:32px;height:32px;border:0;border-radius:8px;display:grid;place-items:center;background:#6b7280;color:#fff;font-size:13px;box-shadow:0 8px 22px rgba(0,0,0,.18);z-index:69;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s ease,visibility .25s ease,transform .25s ease,background .2s ease,box-shadow .2s ease}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{background:#4b5563;box-shadow:0 10px 26px rgba(0,0,0,.24);transform:translateY(-2px)}
@media(max-width:600px){.wa{right:16px;bottom:16px;width:46px;height:46px;border-radius:50%;font-size:24px}.wa:before{left:3px;bottom:-6px;width:14px;height:14px}.wa-new-message{right:53px;bottom:50%;max-width:175px;padding:8px 11px;font-size:10px}.back-to-top{right:28px;bottom:92px;width:30px;height:30px;font-size:12px}}
.page-hero{padding:65px 0;background:linear-gradient(90deg,var(--navy),#284e6e);color:#fff}.page-hero h1{margin:0 0 8px;font-size:38px}.page-hero p{margin:0;color:#d9e4ec;font-size:13px}
.badge{display:inline-block;padding:5px 9px;background:#fff0ec;color:var(--red);border-radius:5px;font-size:10px;font-weight:800}

/* Peralatan Penunjang */
.equipment-carousel{position:relative;display:flex;align-items:center;gap:10px;margin-top:26px}.equipment-grid{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 45px)/4);grid-template-columns:none;gap:15px;overflow:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;flex:1}.equipment-card{min-width:0;background:#fff;border:1px solid var(--line);border-radius:11px;overflow:hidden;box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease;scroll-snap-align:start}.equipment-card:hover{transform:translateY(-3px);box-shadow:0 12px 25px rgba(0,0,0,.10)}.equipment-image{height:145px;background:#f7f7f7;display:flex;align-items:center;justify-content:center;padding:10px}.equipment-image img{width:100%;height:100%;object-fit:contain;display:block}.equipment-card h3{font-size:13px;margin:0;padding:10px 8px 12px;text-align:center;line-height:1.3;color:var(--navy)}.equipment-arrow{flex:0 0 34px;width:34px;height:34px;border:1px solid #d9dee4;border-radius:50%;background:#fff;color:var(--navy);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 5px 14px rgba(0,0,0,.08);transition:all .2s ease;z-index:2}.equipment-arrow:hover{background:var(--red);border-color:var(--red);color:#fff;transform:scale(1.04)}.equipment-arrow:disabled{opacity:.35;cursor:default;transform:none;background:#fff;color:var(--navy);border-color:#d9dee4}
@media(max-width:980px){.equipment-grid{grid-auto-columns:calc((100% - 15px)/2)}.menu{gap:0}.menu a{padding-inline:8px}.menu a:after{left:8px;right:8px}.split{gap:30px}.cards{grid-template-columns:repeat(2,1fr)}.home-service-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1050px) and (min-width:761px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .footer-contact-item p.footer-address{white-space:normal;overflow-wrap:anywhere}

 .equipment-grid{grid-auto-columns:100%}.equipment-image{height:150px}.equipment-arrow{flex-basis:32px;width:32px;height:32px}.nav{min-height:66px}.menu-toggle{display:block}.menu{display:none;position:absolute;top:66px;left:0;right:0;background:#fff;box-shadow:0 12px 25px rgba(0,0,0,.1);padding:8px 5%;flex-direction:column;align-items:stretch}.menu.open{display:flex}.menu a{padding:12px 4px}.menu a:after{display:none}.brand strong{font-size:11px}.brand small{font-size:7px}.hero{min-height:540px}.hero-content{padding:65px 0}.section{padding:55px 0}.cards,.split,.project-grid,.contact-grid,.footer-grid{grid-template-columns:1fr}.photo img{height:300px}.page-hero h1{font-size:30px}
}

/* About / kegiatan dan lingkungan */
.about-visual{background:#e43d21;border-radius:18px;padding:10px;overflow:hidden;box-shadow:0 18px 45px rgba(228,61,33,.22)}
.about-visual img{display:block;width:100%;height:100%;min-height:420px;object-fit:cover;border-radius:12px}
@media(max-width:760px){.about-visual img{min-height:300px}}

/* ===== SKR V9 - Precise Tentang SKR layout ===== */
.about-section{background:#fff;padding:78px 0}
.about-split{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);gap:54px;align-items:stretch}
.about-visual{width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;box-shadow:none;border-radius:0;overflow:hidden;display:flex;align-items:stretch}
.about-visual img{display:block;width:100%;max-width:none;aspect-ratio:auto;height:100%;min-height:100%;object-fit:cover;border:0;border-radius:12px;box-shadow:none;margin:0}
.about-content{min-width:0}
.about-content h2{margin-top:8px}
.about-content .lead{font-size:15px;line-height:1.95;margin-bottom:22px}
.about-content .list li{font-size:13px;padding:13px 0}
@media(max-width:1050px) and (min-width:761px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .about-section{padding:55px 0}
  .about-split{grid-template-columns:1fr;gap:32px}
  .about-visual{height:auto;display:block}
  .about-visual img{width:100%;height:auto;min-height:0;aspect-ratio:4/3;border-radius:10px}
}

/* ===== SKR V10 NAVBAR ANIMATION ===== */
.nav-wrap{
  animation:navDrop .65s cubic-bezier(.22,1,.36,1) both;
}
@keyframes navDrop{
  from{opacity:0;transform:translateY(-14px)}
  to{opacity:1;transform:translateY(0)}
}
.menu a{
  overflow:visible;
}
.menu a:before{
  content:"";
  position:absolute;
  left:50%;
  bottom:7px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--red);
  transform:translateX(-50%) scale(0);
  transition:transform .25s ease;
}
.menu a:hover:before,
.menu a.active:before{
  transform:translateX(-50%) scale(1);
}
@media(max-width:1050px) and (min-width:761px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .menu a{
    padding:13px 4px;
    transform:none !important;
  }
  .menu a:after,.menu a:before{display:none}
}

@media(max-width:1050px) and (min-width:761px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .menu.open a{
    animation:menuItem .35s both;
  }
  .menu.open a:nth-child(1){animation-delay:.03s}
  .menu.open a:nth-child(2){animation-delay:.07s}
  .menu.open a:nth-child(3){animation-delay:.11s}
  .menu.open a:nth-child(4){animation-delay:.15s}
  .menu.open a:nth-child(5){animation-delay:.19s}
  .menu.open a:nth-child(6){animation-delay:.23s}
  @keyframes menuItem{
    from{opacity:0;transform:translateX(-12px)}
    to{opacity:1;transform:translateX(0)}
  }
}

/* ===== SKR V11 - NAVBAR HOVER ONLY ===== */
.nav-wrap{
  animation:none !important;
}
.menu a{
  transform:none !important;
  transition:color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.menu a:before{
  display:none !important;
}
.menu a:after{
  left:50%;
  right:auto;
  bottom:10px;
  width:0;
  height:3px;
  border-radius:999px;
  transform:translateX(-50%) !important;
  transform-origin:center;
  transition:width .3s ease;
  box-shadow:none;
}
.menu a:hover{
  color:var(--red);
  transform:none !important;
}
.menu a:hover:after{
  width:calc(100% - 24px);
}
.menu a.active{
  color:inherit;
  transform:none !important;
}
.menu a.active:after{
  width:0 !important;
}
@media(max-width:1050px) and (min-width:761px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .menu a{
    animation:none !important;
    transition:color .2s ease, background-color .2s ease;
  }
  .menu a:hover{
    color:var(--red);
    background:#fff6f3;
  }
  .menu a:after,
  .menu a:before{
    display:none !important;
  }
}

/* ===== SKR V12 - Hover navbar seperti contoh pengguna ===== */
.menu a{
  position:relative;
  padding:12px 16px !important;
  margin:0 2px;
  color:var(--navy);
  border-radius:0;
  transition:
    background-color .22s ease,
    color .22s ease,
    box-shadow .22s ease;
}

/* Hilangkan underline/indicator dari versi sebelumnya */
.menu a:after,
.menu a:before{
  display:none !important;
}

/* HOVER: blok hijau + teks putih */
.menu a:hover{
  background:#08752b;
  color:#fff !important;
  transform:none !important;
}

/* Menu aktif tetap normal; efek hijau hanya saat mouse diarahkan */
.menu a.active{
  background:transparent;
  color:var(--navy);
  transform:none !important;
}

/* Saat menu aktif juga sedang di-hover */
.menu a.active:hover{
  background:#08752b;
  color:#fff !important;
}

@media(max-width:1050px) and (min-width:761px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .menu a{
    margin:2px 0;
    padding:12px 14px !important;
    border-radius:2px;
  }

  .menu a:hover,
  .menu a.active:hover{
    background:#08752b;
    color:#fff !important;
  }

  .menu a.active{
    background:transparent;
    color:var(--navy);
  }
}

/* ===== SKR V13 - Navbar hover warna tema SKR ===== */
.menu a:hover,
.menu a.active:hover{
  background:#e43d21 !important;
  color:#fff !important;
}

/* ===== SKR V15 - ACTIVE NAV ITEM PERSISTENT ===== */
.menu a.active{
  background:#e43d21 !important;
  color:#fff !important;
  transform:none !important;
  border-radius:0;
}
.menu a.active:after,
.menu a.active:before{
  display:none !important;
}
.menu a.active:hover{
  background:#d9341b !important;
  color:#fff !important;
}

/* On mobile the active item remains highlighted too. */
@media(max-width:1050px) and (min-width:761px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .menu a.active{
    background:#e43d21 !important;
    color:#fff !important;
  }
  .menu a.active:hover{
    background:#d9341b !important;
    color:#fff !important;
  }
}

/* ===== SKR V16 - Navbar lebih rapat ===== */
.menu{
  gap:1px !important;
}
.menu a{
  padding-left:10px !important;
  padding-right:10px !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* ===== SKR V17 - UAV Sensing Hero ===== */
.hero{
  min-height:620px;
  background-position:center center;
}
.hero-content{
  position:relative;
  z-index:2;
}
@media(max-width:1050px) and (min-width:761px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .hero{
    min-height:620px;
    background-position:62% center;
  }
}

/* ===== SKR V30 - SHARED HEADER/HERO GRID ===== */
:root{
  --site-max:1180px;
  --site-width:92%;
}

/* Header and hero use exactly the same horizontal reference line. */
.nav > .brand,
.nav > .menu,
.hero > .hero-content{
  /* keep all three tied to the same .container edges */
}

.nav,
.hero > .hero-content{
  width:min(var(--site-max),var(--site-width));
  margin-inline:auto;
}

.hero > .hero-content{
  max-width:none;
  padding-top:82px;
  padding-bottom:82px;
  padding-left:0;
  padding-right:0;
}

.hero .eyebrow,
.hero h1,
.hero p,
.hero .btns{
  margin-left:0;
}

.hero h1{
  max-width:690px;
  font-size:clamp(30px,3.65vw,48px);
  line-height:1.08;
  letter-spacing:-.7px;
  margin-top:10px;
  margin-bottom:20px;
}

.hero p{
  max-width:610px;
  font-size:15px;
  line-height:1.72;
  margin-top:0;
  margin-bottom:0;
}

.hero .btns{
  margin-top:26px;
}

@media(min-width:761px){
  .hero > .hero-content{
    align-self:stretch;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
}

@media(max-width:1050px) and (min-width:761px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .nav,
  .hero > .hero-content{
    width:90%;
  }
  .hero > .hero-content{
    padding-top:64px;
    padding-bottom:64px;
  }
  .hero h1{
    max-width:100%;
    font-size:30px;
    line-height:1.14;
    letter-spacing:-.35px;
  }
  .hero p{max-width:100%;font-size:14px;line-height:1.7}
}

/* ===== SKR V41 - Google Maps lebih ringkas di bawah header ===== */
.contact-map{
  width:100%;
  height:360px;
  overflow:hidden;
  background:#eef1f3;
}
.contact-map iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}
@media(max-width:1050px) and (min-width:761px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .contact-map{height:260px}
}

/* ===== SKR V42 - FREEZE HEADER + MODERN FOOTER ===== */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
}
.site-header .nav-wrap{
  position:relative;
  top:auto;
  z-index:1001;
  box-shadow:0 5px 22px rgba(15,30,45,.08);
}
body{padding-top:0}

.footer{
  position:relative;
  background:linear-gradient(135deg,#0e1d2b 0%,#132b40 58%,#173a55 100%);
  color:#cdd8e1;
  padding:0;
  overflow:hidden;
}
.footer-top-line{
  height:4px;
  background:linear-gradient(90deg,var(--red),#ff7a61,var(--red));
}
.footer-grid{
  display:grid;
  grid-template-columns:1.2fr .72fr 1.05fr 1.15fr;
  gap:34px;
  padding:58px 0 42px;
}
.footer-brand-block{min-width:0}
.footer-brand-wrap{
  display:flex;
  align-items:center;
  gap:14px;
  width:max-content;
  max-width:100%;
}
.footer-logo{
  width:52px;
  height:52px;
  object-fit:contain;
  flex:0 0 auto;
}
.footer-brand-wrap strong{
  display:block;
  color:#fff;
  font-size:14px;
  font-weight:800;
  letter-spacing:.2px;
}
.footer-desc{
  max-width:470px;
  margin:22px 0 22px;
  color:#aebdca;
  font-size:12px !important;
  line-height:1.8;
  text-align:justify;
  text-justify:inter-word;
}
.footer-cta{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:10px 15px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;
  color:#fff;
  font-size:11px;
  font-weight:700;
  background:rgba(255,255,255,.05);
  transition:.25s ease;
}
.footer-cta:hover{background:var(--red);border-color:var(--red);transform:translateY(-2px)}
.footer-col h4{
  margin:2px 0 18px;
  color:#fff;
  font-size:13px;
  font-weight:800;
  letter-spacing:.2px;
}
/* Service Time footer section */
.footer-service-time{min-width:0}
.footer-service-time h4{margin-bottom:18px}
.service-time-card{
  padding:13px 14px;
  margin:0 0 12px;
  border:1px solid rgba(151,180,205,.16);
  border-radius:10px;
  background:rgba(255,255,255,.045);
}
.service-time-day{
  display:block;
  margin-bottom:5px;
  color:#9fb5ca;
  font-size:11px;
  font-weight:700;
  letter-spacing:.25px;
}
.service-time-detail{display:flex;align-items:center;gap:9px;min-width:0}
.service-time-detail strong{color:#fff;font-size:11px;font-weight:700;line-height:1.5}
.service-time-indicator{
  display:inline-block;
  flex:0 0 10px;
  width:10px;height:10px;border-radius:50%;
  background:#00c875;
  box-shadow:0 0 0 0 rgba(0,200,117,.55);
  animation:none;
}
.service-time-indicator.is-active{animation:serviceTimePulse 1.35s infinite}
.service-time-indicator.is-inactive{background:#ff334b;box-shadow:none;animation:none;opacity:.65}
@keyframes serviceTimePulse{
  0%{opacity:1;box-shadow:0 0 0 0 currentColor}
  65%{opacity:.55;box-shadow:0 0 0 6px transparent}
  100%{opacity:1;box-shadow:0 0 0 0 transparent}
}
.service-time-indicator.is-active{color:rgba(0,200,117,.45)}
.service-time-indicator.is-inactive{color:rgba(255,51,75,.45)}
.service-time-contact{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;box-sizing:border-box;margin-top:12px;padding:10px 14px;
  border:1px solid rgba(151,180,205,.38);border-radius:28px;
  background:rgba(5,16,31,.35);color:#fff!important;
  font-size:11px;font-weight:700;transition:background .2s,border-color .2s,transform .2s;
}
.service-time-contact i{color:#00e887;font-size:22px;line-height:1}
.service-time-contact:hover{background:rgba(0,217,130,.08);border-color:#00d982;transform:translateY(-1px)}

.footer-col > a{
  display:flex;
  align-items:center;
  gap:9px;
  width:max-content;
  max-width:100%;
  margin:0 0 11px;
  color:#b9c7d2;
  font-size:11px;
  line-height:1.5;
  transition:.2s ease;
}
.footer-col > a i{color:#f27661;font-size:9px}
.footer-col > a:hover{color:#fff;transform:translateX(3px)}
.footer-contact-item{
  display:flex;
  align-items:flex-start;
  gap:11px;
  margin:0 0 13px;
}
/* Keep the footer address on one line on desktop; allow wrapping on narrow screens. */
.footer-contact-item p.footer-address{white-space:normal;overflow-wrap:break-word;word-break:normal;min-width:0;max-width:100%}
.footer-contact-item{min-width:0}.footer-contact{min-width:0}.footer-contact-item p.footer-address{flex:1 1 auto}
.footer-contact-item p,
.footer-contact-item a{
  margin:0;
  color:#b9c7d2;
  font-size:11px !important;
  line-height:1.7;
}
.footer-contact-item a:hover{color:#fff}
.footer-icon{
  width:29px;
  height:29px;
  flex:0 0 29px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(228,61,33,.13);
  color:#ff8b76;
  font-size:11px;
}
.footer-bottom{
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  border-top:1px solid rgba(255,255,255,.09);
  color:#aebdca;
  font-size:11px;
  font-weight:500;
  letter-spacing:.2px;
  text-align:center;
}
.footer-bottom span{display:block;text-align:center}

@media(max-width:980px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
  .footer-brand-block{grid-column:1/-1}
}
@media(max-width:1050px) and (min-width:761px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .site-header,.site-header .nav-wrap{position:fixed !important;top:0 !important;left:0 !important;right:0 !important;}
  .footer-grid{grid-template-columns:1fr;gap:30px;padding:45px 0 32px}
  .footer-brand-block{grid-column:auto}
 .service-time-card{max-width:100%}
  .footer-brand-wrap strong{font-size:12px}
  .footer-desc{font-size:11px !important}
  .footer-bottom{min-height:auto;padding:18px 0;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11px;text-align:center}
}


/* ===== SKR V43 — Forest hero images for internal pages ===== */
.page-hero{
  min-height:360px;
  padding:0;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  color:#fff;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.page-hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(4,22,16,.88) 0%,rgba(4,22,16,.70) 32%,rgba(4,22,16,.28) 64%,rgba(4,22,16,.05) 100%);
}
.page-hero .container{position:relative;z-index:1}
.page-hero-copy{max-width:720px;padding:65px 0 58px}
.page-hero-kicker{
  display:inline-block;
  margin-bottom:13px;
  padding-left:15px;
  border-left:4px solid var(--red);
  color:#ffad9d;
  font-size:11px;
  font-weight:800;
  letter-spacing:2.4px;
}
.page-hero h1{
  margin:0 0 10px;
  color:#fff;
  font-size:clamp(34px,4.2vw,54px);
  line-height:1.1;
  text-shadow:0 3px 18px rgba(0,0,0,.22);
}
.page-hero p{
  margin:0;
  max-width:680px;
  color:#eef5f0;
  font-size:14px;
  line-height:1.75;
}
.page-hero-profil{background-image:url('../img/hero-profil-hutan.jpg')}
.page-hero-layanan{background-image:url('../img/hero-layanan-hutan.jpg')}
.page-hero-pengalaman{background-image:url('../img/hero-pengalaman-hutan.jpg')}
.page-hero-sdm{background-image:url('../img/hero-sdm-peralatan-hutan.jpg')}
@media(max-width:1050px) and (min-width:761px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .page-hero{min-height:285px}
  .page-hero-copy{padding:48px 0 42px}
  .page-hero-kicker{font-size:9px;letter-spacing:2px;margin-bottom:10px}
  .page-hero h1{font-size:31px}
  .page-hero p{font-size:12px;line-height:1.65}
  .page-hero:before{background:linear-gradient(90deg,rgba(4,22,16,.88),rgba(4,22,16,.54) 72%,rgba(4,22,16,.18))}
}

/* Struktur organisasi SKR - pengganti diagram lama */
.skr-org-chart{position:relative;width:100%;max-width:1500px;margin:0 auto;padding:28px 12px 36px;background:#fff;overflow:hidden}
.skr-org-chart *{box-sizing:border-box}
.org-box{position:relative;border:1.5px solid #d91f26;border-radius:12px;background:#f5f6f8;box-shadow:0 5px 16px rgba(0,0,0,.08);overflow:hidden;text-align:center;z-index:2}
.org-box .org-title{background:#d91f26;color:#fff;font-weight:700;font-size:20px;line-height:1.2;padding:12px 10px 10px}
.org-box .org-name{color:#151515;font-size:18px;line-height:1.25;padding:10px 8px 12px}
.org-top{width:460px;max-width:100%;margin:0 auto}
.org-top .org-title{font-size:24px;padding:13px 10px 11px}
.org-top .org-name{font-size:21px}
.org-vline{position:relative;width:3px;height:52px;background:#111;margin:0 auto;z-index:1}
.org-arrow{position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:11px solid #111}
.org-main-branch,.org-mid-branch,.org-bottom-branch{position:relative;height:60px;margin:0 13.2%;z-index:1}
.org-main-branch .org-horizontal,.org-mid-branch .org-horizontal,.org-bottom-branch .org-horizontal{position:absolute;left:0;right:0;top:0;height:3px;background:#111}
.org-branch{position:absolute;top:0;width:3px;height:48px;background:#111}
.org-branch .org-arrow{bottom:-1px}
.org-main-branch .b1{left:0}.org-main-branch .b2{left:33.33%}.org-main-branch .b3{left:66.66%}.org-main-branch .b4{right:0}
.org-grid-four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin:0}
.org-grid-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:70px;margin:0 7.5%}
.org-mid-branch{margin:0 12.5%;height:58px}
.org-mid-branch .m1{left:0}.org-mid-branch .m2{left:50%;transform:translateX(-50%)}.org-mid-branch .m3{right:0}
.org-bottom-branch{margin:0 17.5%;height:58px}
.org-bottom-branch .f1{left:0}.org-bottom-branch .f2{left:50%;transform:translateX(-50%)}.org-bottom-branch .f3{right:0}
.org-final{width:460px;max-width:100%;margin:0 auto}
@media(max-width:1000px){
 .org-grid-four{gap:12px}.org-grid-three{gap:24px;margin:0 3%}.org-main-branch{margin:0 8%}.org-mid-branch{margin:0 7%}.org-bottom-branch{margin:0 10%}
 .org-box .org-title{font-size:16px}.org-box .org-name{font-size:15px}.org-top .org-title{font-size:20px}.org-top .org-name{font-size:18px}
}
@media(max-width:700px){
 .skr-org-chart{overflow-x:auto;padding-left:8px;padding-right:8px}
 .skr-org-chart:before{content:'';display:block;min-width:900px}
 .skr-org-chart{min-width:900px}
 .org-grid-four{gap:12px}.org-grid-three{gap:28px;margin:0 5%}.org-main-branch{margin:0 7%}.org-mid-branch{margin:0 7%}.org-bottom-branch{margin:0 11%}
}

/* ===== V86 — Struktur Organisasi: ukuran seragam + alur lebih rapi ===== */
.skr-org-chart{
  width:100%;
  max-width:920px;
  min-width:0;
  height:540px;
  margin:0 auto;
  padding:0;
  position:relative;
  background:#fff;
  overflow:hidden;
}
.skr-org-chart .org-canvas{
  position:absolute;
  width:1200px;
  height:650px;
  left:50%;
  top:0;
  transform:translateX(-50%) scale(.82);
  transform-origin:top center;
}
.skr-org-chart .org-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
  overflow:visible;
}
.skr-org-chart .org-lines path{
  fill:none;
  stroke:#111820;
  stroke-width:2;
  stroke-linecap:square;
  stroke-linejoin:miter;
}
.skr-org-chart .org-lines marker path{fill:#111820!important;}
.skr-org-chart .org-card{
  position:absolute;
  width:250px;
  height:78px;
  border:1px solid rgba(14,29,43,.18);
  border-radius:8px;
  background:#f3f5f7;
  box-shadow:0 4px 12px rgba(15,30,45,.08);
  overflow:hidden;
  text-align:center;
  z-index:2;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.skr-org-chart .org-card:hover{
  transform:translateY(-3px);
  border-color:rgba(23,58,85,.45);
  box-shadow:0 8px 18px rgba(14,29,43,.15);
}
.skr-org-chart .org-card .org-title{
  height:39px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:5px 8px;
  background:linear-gradient(135deg,#0e1d2b,#173a55 58%,#244f6e);
  color:#fff;
  font-size:14px;
  font-weight:800;
  line-height:1.12;
}
.skr-org-chart .org-card .org-name{
  height:39px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:5px 8px;
  color:#18232e;
  background:#f3f5f7;
  font-size:13px;
  line-height:1.18;
}
.skr-org-chart .org-commissioner{left:475px;top:20px}
.skr-org-chart .org-director{left:475px;top:140px}
.skr-org-chart .e1{left:35px;top:270px}
.skr-org-chart .e2{left:335px;top:270px}
.skr-org-chart .e3{left:635px;top:270px}
.skr-org-chart .e4{left:935px;top:270px}
.skr-org-chart .s1{left:120px;top:410px}
.skr-org-chart .s2{left:475px;top:410px}
.skr-org-chart .s3{left:830px;top:410px}
.skr-org-chart .org-final{left:475px;top:550px}
@media(max-width:1050px){
  .skr-org-chart{max-width:850px;height:500px}
  .skr-org-chart .org-canvas{transform:translateX(-50%) scale(.75)}
}
@media(max-width:700px){
  .skr-org-chart{width:100%;height:455px;overflow-x:auto;overflow-y:hidden}
  .skr-org-chart .org-canvas{left:0;transform:scale(.66);transform-origin:top left}
}

/* ===== V50 — Keep hero titles left-aligned; section titles remain centered ===== */
.page-hero-copy{
  margin-inline:0;
  text-align:left;
}
.page-hero-copy p{
  margin-inline:0;
}
.section-head{
  margin-inline:auto;
  text-align:center;
}
.section-head .lead{
  margin-inline:auto;
}

/* ===== V51 - Modern Contact Form ===== */
.contact-section{padding-top:62px}
.contact-modern{display:grid;grid-template-columns:.82fr 1.18fr;gap:34px;align-items:stretch}
.contact-info-panel{position:relative;overflow:hidden;padding:34px 34px 38px;background:linear-gradient(180deg,#f3faf7 0%,#edf7f3 100%);border:1px solid #dce9e3;border-radius:18px;min-height:100%}
.contact-info-panel:after{content:"";position:absolute;width:190px;height:190px;right:-82px;bottom:-92px;border-radius:50%;background:rgba(32,145,96,.09);pointer-events:none}
.contact-accent{width:54px;height:3px;background:var(--red);border-radius:999px;margin-bottom:18px}
.contact-info-panel h2{margin:0 0 28px;color:#0a7a3a;font-size:30px;line-height:1.2}
.contact-info-item{display:flex;gap:16px;align-items:flex-start}
.contact-info-icon{flex:0 0 40px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#dff3e9;color:#087b3e;font-size:16px}
.contact-info-item strong{display:block;font-size:14px;margin:0 0 3px;color:#17232e}
.contact-info-item p{margin:0;color:#66717c;font-size:12px;line-height:1.85}
.contact-info-item a{color:inherit}
.contact-info-item a:hover{color:#087b3e}
.contact-info-divider{height:1px;background:#d8e7df;margin:22px 0}
.contact-modern-form{background:#fff;border:1px solid #dfe6e2;border-radius:18px;padding:30px 32px 28px;box-shadow:0 14px 40px rgba(15,30,45,.08)}
.contact-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}
.contact-field.full{grid-column:1/-1}
.contact-field label{display:block;font-size:13px;font-weight:700;margin-bottom:8px;color:#17232e}
.contact-field label span{color:var(--red)}
.contact-field input,.contact-field select,.contact-field textarea{width:100%;border:1px solid #d5dfda;background:#fff;border-radius:9px;padding:12px 14px;font:inherit;font-size:12px;color:#18232e;outline:none;transition:border-color .2s,box-shadow .2s}
.contact-field input,.contact-field select{height:47px}
.contact-field textarea{min-height:126px;resize:vertical}
.contact-field input:focus,.contact-field select:focus,.contact-field textarea:focus{border-color:#9ab9aa;box-shadow:0 0 0 3px rgba(8,123,62,.08)}
.contact-captcha{margin-top:18px}
.captcha-question{font-size:13px;color:#18232e;margin-bottom:8px}
.captcha-row{display:flex;gap:0;align-items:stretch}
.captcha-row input{width:136px;height:39px;border:1px solid #d5dfda;border-radius:8px 0 0 8px;padding:9px 11px;font:inherit;font-size:12px;outline:none}
.captcha-row input:focus{border-color:#9ab9aa;box-shadow:0 0 0 3px rgba(8,123,62,.08)}
.captcha-refresh{width:45px;height:39px;border:1px solid #d5dfda;border-left:0;border-radius:0 6px 6px 0;background:#f5f7f8;color:var(--navy);cursor:pointer;font-size:15px}
.captcha-refresh:hover{background:#edf1f3}
.contact-captcha small{display:block;color:#9aa8b3;font-size:10px;margin-top:7px}
.privacy-check{display:flex;gap:12px;align-items:center;margin:23px 0;color:var(--red);font-size:12px;font-weight:700;cursor:pointer}
.privacy-check input{width:30px;height:30px;flex:0 0 30px;accent-color:var(--red);cursor:pointer}
.privacy-check a{text-decoration:underline;color:#17567d}
.contact-submit{width:100%;height:43px;border:0;border-radius:7px;background:#087d31;color:#fff;font:inherit;font-size:12px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;transition:background .2s,transform .2s}
.contact-submit:hover{background:#066a2a;transform:translateY(-1px)}
.contact-alert{padding:11px 14px;border-radius:8px;margin-bottom:18px;font-size:11px;font-weight:700}
.contact-alert.success{background:#e8f7ee;color:#08733a;border:1px solid #ccebd8}
.contact-alert.error{background:#fff0ed;color:#b52f1a;border:1px solid #f4d0c8}
@media(max-width:900px){.contact-modern{grid-template-columns:1fr}.contact-info-panel{min-height:auto}.contact-info-panel:after{width:140px;height:140px}}
@media(max-width:600px){.contact-modern-form{padding:24px 18px}.contact-form-grid{grid-template-columns:1fr;gap:15px}.contact-field.full{grid-column:auto}.contact-info-panel{padding:28px 22px}.contact-info-panel h2{font-size:27px}.privacy-check{align-items:flex-start}.privacy-check input{margin-top:1px}}

/* ===== V52 - Hubungi Kami mengikuti warna footer ===== */
.contact-info-panel{
  background:linear-gradient(135deg,#0e1d2b 0%,#132b40 58%,#173a55 100%);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
}
.contact-info-panel:after{
  background:rgba(255,255,255,.055);
}
.contact-info-panel h2{color:#fff}
.contact-info-item strong{color:#fff}
.contact-info-item p{color:#d8e2e9}
.contact-info-item a{color:#d8e2e9}
.contact-info-item a:hover{color:#fff}
.contact-info-icon{
  background:rgba(255,255,255,.08);
  color:#f27661;
}
.contact-info-divider{background:rgba(255,255,255,.12)}


/* V79 - Beranda: nonaktifkan zoom pada foto kartu Pengalaman */
.homepage-project-grid .project-card:hover .project-image img{
  transform:none !important;
  filter:none !important;
}

/* ===== Project gallery lightbox ===== */
body.lightbox-open{overflow:hidden}
.project-lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility .22s ease}
.project-lightbox.show{opacity:1;visibility:visible;pointer-events:auto}
.project-lightbox-backdrop{position:absolute;inset:0;background:rgba(5,12,20,.88);backdrop-filter:blur(3px);cursor:zoom-out}
.project-lightbox-dialog{position:relative;z-index:1;width:min(920px,94vw);max-height:94vh;padding:20px 20px 16px;border-radius:16px;background:#fff;box-shadow:0 24px 80px rgba(0,0,0,.45);display:flex;flex-direction:column;align-items:center}
.project-lightbox-image{display:block;width:auto;max-width:100%;height:auto;max-height:68vh;object-fit:contain;border-radius:9px;background:#eef2f5}
.project-lightbox-close{position:absolute;right:-12px;top:-12px;z-index:4;width:38px;height:38px;border:0;border-radius:50%;display:grid;place-items:center;background:#be182d;color:#fff;font-size:17px;line-height:1;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.project-lightbox-close:hover{background:#9f1325}
.project-lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:40px;height:40px;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(15,23,42,.82);color:#fff;font-size:15px;cursor:pointer;box-shadow:0 7px 20px rgba(0,0,0,.2)}
.project-lightbox-prev{left:5px}.project-lightbox-next{right:5px}
.project-lightbox-nav:disabled{opacity:.35;cursor:default}
.project-lightbox-bottom{width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-top:12px}
.project-lightbox-thumbs{display:flex;gap:8px;overflow-x:auto;min-width:0;padding:2px 0 3px;scrollbar-width:thin}
.project-lightbox-thumb{flex:0 0 72px;width:72px;height:50px;padding:0;border:2px solid transparent;border-radius:7px;overflow:hidden;background:#eef2f5;cursor:pointer;opacity:.78}
.project-lightbox-thumb.active{border-color:#be182d;opacity:1}.project-lightbox-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.project-lightbox-counter{font-size:12px;font-weight:700;color:var(--navy);white-space:nowrap}
.project-lightbox-ai-note{justify-self:end;font-size:10px;color:#7b8794;text-align:right;white-space:nowrap}
/* V82 - jumlah foto pada card Pengalaman */
.project-gallery-count{position:absolute;right:10px;bottom:10px;z-index:3;display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:9px;background:rgba(15,23,42,.86);color:#fff;font-size:12px;font-weight:700;line-height:1;box-shadow:0 5px 14px rgba(0,0,0,.2);pointer-events:none}
.project-gallery-count i{font-size:13px}
@media(max-width:700px){.project-gallery-count{right:8px;bottom:8px;padding:6px 9px;font-size:11px}.project-gallery-count i{font-size:12px}}
.project-image-link{cursor:pointer}
@media(max-width:700px){.project-lightbox{padding:14px}.project-lightbox-dialog{width:96vw;padding:12px 12px 10px;border-radius:12px}.project-lightbox-image{max-height:58vh}.project-lightbox-nav{width:34px;height:34px;font-size:13px}.project-lightbox-prev{left:1px}.project-lightbox-next{right:1px}.project-lightbox-bottom{grid-template-columns:1fr auto;gap:6px}.project-lightbox-ai-note{grid-column:1/-1;justify-self:start}.project-lightbox-thumb{flex-basis:62px;width:62px;height:44px}.project-lightbox-close{right:-4px;top:-4px}}

/* ===== Layanan Baru berbasis materi tambahan ===== */
.service-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}
.service-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:28px 26px 24px;
  box-shadow:var(--shadow);
  text-align:left;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.service-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 36px rgba(15,30,45,.10);
  border-color:#e4c9c2;
}
.service-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}
.service-card .icon{margin:0;width:58px;height:58px;border-radius:17px;font-size:24px;background:linear-gradient(145deg,var(--red),#8f1327);color:#fff;box-shadow:0 9px 18px rgba(190,24,45,.20);position:relative;overflow:hidden}.service-card .icon:before{content:"";position:absolute;inset:1px;border:1px solid rgba(255,255,255,.24);border-radius:16px;pointer-events:none}.service-card .icon i{position:relative;z-index:1}
.service-number{
  color:#b5bdc4;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.5px;
}
.service-card h3{font-size:18px;line-height:1.4;margin:0 0 10px;color:var(--ink)}
.service-card>p{margin:0;color:var(--muted);font-size:13px;line-height:1.75;text-align:justify}
.service-card details{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.service-card summary{
  cursor:pointer;
  list-style:none;
  color:var(--red);
  font-size:12px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.service-card summary::-webkit-details-marker{display:none}
.service-card summary:after{content:'+';font-size:18px;line-height:1;font-weight:500}
.service-card details[open] summary:after{content:'−'}
.service-card details h4{font-size:13px;margin:18px 0 8px;color:var(--ink)}
.service-card details p,.service-card details li{font-size:12px;line-height:1.75;color:var(--muted)}
.service-card details p{margin:0 0 8px;text-align:justify}
.service-card details ul,.service-card details ol{margin:0;padding-left:20px}
.service-card details li{margin-bottom:6px}
.service-card details strong{color:var(--ink)}
@media(max-width:980px){.service-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.service-grid{grid-template-columns:1fr}.service-card{padding:24px 20px}}

/* ===== V85 - Dropdown Navbar Layanan seperti APCM ===== */
.menu-dropdown{position:relative;display:flex;align-items:center;height:100%;}
.menu-dropdown-head{display:flex;align-items:center;position:relative;}
.menu-dropdown-link{padding-left:10px !important;padding-right:4px !important;}
.menu-dropdown-link.active{background:#e43d21 !important;color:#fff !important;}
.dropdown-toggle{border:0;background:transparent;color:inherit;padding:12px 9px 12px 3px;cursor:pointer;font:inherit;display:flex;align-items:center;justify-content:center;transition:color .2s ease;}
.dropdown-toggle i{font-size:9px;transition:transform .2s ease;}
.menu-dropdown:hover .dropdown-toggle{color:#fff;}
.menu-dropdown:has(.menu-dropdown-link.active) .dropdown-toggle{color:#fff;}
.dropdown-menu{position:absolute;top:100%;left:0;min-width:285px;background:#fff;border:1px solid rgba(23,50,77,.10);border-top:3px solid var(--red);border-radius:0 0 8px 8px;box-shadow:0 16px 35px rgba(15,30,45,.16);padding:7px 0;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s ease,visibility .2s ease,transform .2s ease;z-index:100;}
.dropdown-menu a{display:block !important;margin:0 !important;padding:10px 16px !important;color:var(--navy) !important;background:#fff !important;font-size:11px !important;font-weight:600 !important;line-height:1.45;white-space:normal;transform:none !important;}
.dropdown-menu a:hover{background:#fff3ef !important;color:var(--red) !important;}
.menu-dropdown:hover .dropdown-menu,.__remove_focus_within_dropdown_menu{opacity:1;visibility:visible;transform:translateY(0);}
.menu-dropdown:hover .dropdown-toggle i,.menu-dropdown:focus-within .dropdown-toggle i{transform:rotate(180deg);}

@media(max-width:760px){
  .menu-dropdown{display:block;height:auto;width:100%;}
  .menu-dropdown-head{width:100%;}
  .menu-dropdown-link{flex:1;padding:12px 14px !important;}
  .dropdown-toggle{width:42px;height:42px;padding:0;margin:0 4px;color:var(--navy);}
  .menu-dropdown-link.active{background:#e43d21 !important;color:#fff !important;}
  .menu-dropdown:has(.menu-dropdown-link.active) .dropdown-toggle{background:#e43d21;color:#fff;border-radius:2px;}
  .dropdown-menu{position:static;display:none;min-width:0;width:100%;border:0;border-left:3px solid var(--red);border-radius:0;box-shadow:none;padding:3px 0 3px 10px;opacity:1;visibility:visible;transform:none;}
  .menu-dropdown.open .dropdown-menu{display:block;}
  .dropdown-menu a{padding:10px 14px !important;font-size:10px !important;border-bottom:1px solid #f0f1f2;}
  .menu-dropdown.open .dropdown-toggle i{transform:rotate(180deg);}
}

/* =========================================================
   TENTANG KAMI — TEKS PROFIL, VISI & MISI JUSTIFY
   ========================================================= */
.profile-content p,
.profile-content .card p,
.profile-content .card li {
  text-align: justify;
  text-justify: inter-word;
}

.profile-content .card ol {
  padding-left: 20px;
}

@media (max-width: 760px) {
  .profile-content p,
  .profile-content .card p,
  .profile-content .card li {
    text-align: justify;
  }
}

/* =========================================================
   PROFIL SKR — PENYEMPURNAAN JUDUL & VISI
   ========================================================= */
.profile-content .kicker + h2 {
  white-space: nowrap;
  letter-spacing: .1px;
}

.profile-content .card .badge + h3 {
  word-spacing: 4px;
  letter-spacing: .15px;
}

@media (max-width: 760px) {
  .profile-content .kicker + h2 {
    font-size: clamp(22px, 6vw, 30px);
    white-space: nowrap;
  }
}
/* =========================================================
   SKR V91 — BERANDA: TEKS JUSTIFY & PRESISI
   ========================================================= */
.home-page p,
.home-page li {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

.home-page .hero p,
.home-page .about-content .lead,
.home-page .projects-intro .lead,
.home-page .project-body p {
  text-align: justify;
  text-justify: inter-word;
}

.home-page .about-content .list li {
  text-align: justify;
  text-justify: inter-word;
}

/* V92 — Beranda: presisi visual Tentang SKR dan satu baris intro pengalaman */
.home-page .projects-intro .lead {
  white-space: nowrap;
  font-size: 14px;
}

@media (max-width: 760px) {
  .about-visual img {
    max-width: 100%;
    aspect-ratio: 4 / 3;
    margin: 0 auto;
  }

  .home-page .projects-intro .lead {
    white-space: normal;
    font-size: 14px;
  }
}


/* ===== V93 - Home Layanan Utama 5 Card Modern ===== */
@media(max-width:760px){
 .home-service-cards{grid-template-columns:1fr;gap:14px}
 .home-service-cards .card{min-height:150px;padding:22px 18px}
}


/* ===== LAYANAN — fokus anchor + judul satu baris ===== */
.service-card[id]{scroll-margin-top:100px}
.service-section-title{
  white-space:nowrap;
  font-size:29px !important;
  line-height:1.25 !important;
  letter-spacing:-.25px;
}
@media(max-width:760px){
  .service-section-title{
    font-size:17px !important;
    letter-spacing:-.45px;
  }
  .service-card[id]{scroll-margin-top:84px}
}

/* ===== V99 — Profil: legalitas modern + organisasi lebih presisi ===== */
.legal-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.legal-card{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:14px;
  min-height:126px;
  padding:20px 18px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(15,30,45,.08);
  border-radius:16px;
  box-shadow:0 10px 26px rgba(15,30,45,.07);
  overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.legal-card:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:linear-gradient(180deg,var(--red),#8f1327);
}
.legal-card:hover{
  transform:translateY(-3px);
  box-shadow:0 15px 32px rgba(15,30,45,.11);
  border-color:rgba(190,24,45,.18);
}
.legal-icon{
  flex:0 0 48px;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(145deg,var(--red),#8f1327);
  color:#fff;
  font-size:18px;
  box-shadow:0 8px 18px rgba(190,24,45,.20);
}
.legal-card span{
  display:block;
  margin:1px 0 6px;
  color:var(--red);
  font-size:10px;
  font-weight:800;
  letter-spacing:1.2px;
  text-transform:uppercase;
}
.legal-card h3{
  margin:0;
  color:#18232e;
  font-size:13px;
  line-height:1.55;
  font-weight:700;
}
.org-management-cards .card{
  position:relative;
  padding:24px 20px 22px;
  border-radius:16px;
  border:1px solid rgba(15,30,45,.08);
  box-shadow:0 10px 26px rgba(15,30,45,.07);
  overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.org-management-cards .card:before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg,var(--red),#8f1327);
}
.org-management-cards .card:hover{
  transform:translateY(-4px);
  box-shadow:0 15px 32px rgba(15,30,45,.12);
  border-color:rgba(190,24,45,.18);
}
.org-management-cards .icon{
  width:62px;
  height:62px;
  margin:0 auto 16px;
  border-radius:18px;
  background:linear-gradient(145deg,var(--red),#8f1327);
  color:#fff;
  font-size:25px;
  box-shadow:0 10px 22px rgba(190,24,45,.22);
  position:relative;
  overflow:hidden;
}
.org-management-cards .icon:before{
  content:"";
  position:absolute;
  inset:1px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:17px;
}
.org-management-cards .icon i{position:relative;z-index:1}
.org-management-cards .card h3{font-size:16px}
.org-management-cards .card p{line-height:1.7}

/* Struktur organisasi menyatu dengan background section, tanpa bidang putih */
.skr-org-chart{
  background:transparent !important;
}

@media(max-width:1100px){
  .legal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:761px){
  .profile-content .section-head h2,.org-section-head h2{white-space:nowrap}
}
@media(max-width:760px){
  .legal-grid{grid-template-columns:1fr;gap:13px}
  .legal-card{min-height:auto;padding:18px 16px}
  .legal-icon{flex-basis:44px;width:44px;height:44px;border-radius:13px;font-size:16px}
  .org-management-cards{grid-template-columns:1fr}
  .org-management-cards .card{padding:22px 18px}
}

/* ===== V100 — Legalitas modern table + lead satu baris ===== */
.legal-section-head .legal-lead{
  white-space:nowrap;
  font-size:13px;
}
.legal-table-wrap{
  width:100%;
  overflow-x:auto;
  background:#fff;
  border:1px solid rgba(15,30,45,.08);
  border-radius:14px;
  box-shadow:0 10px 28px rgba(15,30,45,.07);
}
.legal-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:760px;
  font-size:13px;
}
.legal-table th{
  padding:14px 18px;
  background:#18232e;
  color:#fff;
  text-align:left;
  font-size:11px;
  letter-spacing:.8px;
  text-transform:uppercase;
  font-weight:800;
}
.legal-table th:first-child{width:68px;text-align:center;border-top-left-radius:14px}
.legal-table th:last-child{border-top-right-radius:14px}
.legal-table td{
  padding:15px 18px;
  border-bottom:1px solid #e9edf1;
  color:#25313d;
  vertical-align:middle;
  line-height:1.5;
}
.legal-table tbody tr:last-child td{border-bottom:0}
.legal-table tbody tr:nth-child(even) td{background:#fafbfc}
.legal-table tbody tr:hover td{background:#fff4f5}
.legal-table td:first-child{
  text-align:center;
  color:var(--red);
  font-weight:800;
  font-size:11px;
}
.legal-table td:nth-child(2){
  width:34%;
  font-weight:800;
  color:#18232e;
}
.legal-table td:nth-child(2) i{
  width:25px;
  margin-right:7px;
  color:var(--red);
  text-align:center;
}
@media (max-width:900px){
  .legal-section-head .legal-lead{white-space:normal}
}

/* ===== V101 — Tenaga Ahli mengikuti tabel Legalitas + lead center ===== */
.legal-section-head .legal-lead,
.section-head .legal-lead{
  text-align:center;
  white-space:nowrap;
  width:100%;
  margin-left:auto;
  margin-right:auto;
}
.expert-table-wrap{
  width:100%;
  overflow-x:auto;
  background:#fff;
  border:1px solid rgba(15,30,45,.08);
  border-radius:14px;
  box-shadow:0 10px 28px rgba(15,30,45,.07);
}
.expert-table{
  min-width:760px;
}
.expert-table th:first-child{width:68px;text-align:center;border-top-left-radius:14px}
.expert-table th:last-child{border-top-right-radius:14px}
.expert-table td:first-child{
  text-align:center;
  color:var(--red);
  font-weight:800;
  font-size:11px;
}
.expert-table td:nth-child(2){
  width:28%;
  font-weight:800;
  color:#18232e;
}
.expert-table td:nth-child(3){width:24%;font-weight:700;color:#25313d}
.expert-table tbody tr:nth-child(even) td{background:#fafbfc}
.expert-table tbody tr:hover td{background:#fff4f5}
@media (max-width:900px){
  .legal-section-head .legal-lead,
  .section-head .legal-lead{white-space:normal}
}

/* ===== V102 — Legalitas: heading seluruhnya rata tengah dan presisi ===== */
.legal-section-head{
  max-width:100%;
  margin:0 auto 38px;
  text-align:center;
}
.legal-section-head .kicker,
.legal-section-head h2,
.legal-section-head .legal-lead{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
.legal-section-head h2{
  margin-top:8px;
  margin-bottom:14px;
}
.legal-section-head .legal-lead{
  width:100%;
  max-width:none;
  white-space:nowrap;
}
@media (max-width: 900px){
  .legal-section-head .legal-lead{white-space:normal}
}

/* ===== V103 — Organisasi & Manajemen: seluruh teks rata tengah ===== */
.org-section-head{
  text-align:center;
}
.org-section-head .kicker,
.org-section-head h2,
.org-section-head .lead{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
.org-section-head h2{
  width:100%;
}
.org-management-cards .card{
  text-align:center;
}
.org-management-cards .card h3,
.org-management-cards .card p,
.org-management-cards .card strong{
  text-align:center;
}
.org-management-cards .card p{
  margin-left:auto;
  margin-right:auto;
}
.org-management-cards .icon{
  margin-left:auto;
  margin-right:auto;
}
@media (max-width:900px){
  .org-section-head h2{white-space:normal}
  .org-section-head .lead{white-space:normal}
}

/* ===== V104 — Organisasi & Manajemen: judul benar-benar terpusat dan presisi ===== */
.org-section-head{
  width:100%;
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
  text-align:center !important;
}
.org-section-head h2{
  display:block;
  width:100%;
  margin-left:auto;
  margin-right:auto;
  text-align:center !important;
  white-space:nowrap;
}
.org-section-head .kicker,
.org-section-head .lead{
  width:100%;
  text-align:center !important;
  margin-left:auto;
  margin-right:auto;
}
@media (max-width:900px){
  .org-section-head h2{white-space:normal}
}

/* ===== SKR PROJECT CARDS — APCM VISUAL MATCH ===== */
.projects-section .project-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
.projects-section .project-card{
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:none;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.projects-section .project-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(15,23,42,.10);
  border-color:rgba(190,24,45,.22);
}
.projects-section .project-image{
  position:relative;
  height:210px;
  overflow:hidden;
  background:#e9eef2;
}
.projects-section .project-image-link{
  display:block;
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  line-height:0;
  text-decoration:none;
  cursor:zoom-in;
}
.projects-section .project-image-link:hover img{
  transform:scale(1.025);
}
.projects-section .project-image img{
  display:block;
  width:100%;
  height:210px;
  object-fit:cover;
  transition:transform .35s ease;
}
.projects-section .project-body{
  padding:20px;
}
.projects-section .project-body h3{
  font-size:17px;
  line-height:1.35;
  margin:0 0 8px;
  color:var(--navy);
}
.projects-section .project-meta{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0 0 10px;
}
.projects-section .project-meta span{
  display:flex;
  align-items:flex-start;
  gap:8px;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}
.projects-section .project-meta i{
  width:14px;
  flex:0 0 14px;
  color:var(--red);
  margin-top:2px;
}
.projects-section .project-body p{
  font-size:13px;
  line-height:1.65;
  color:var(--muted);
  margin:0;
}
@media(max-width:1050px) and (min-width:761px){
  .projects-section .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:760px){
  .projects-section .project-grid{grid-template-columns:1fr;gap:18px;}
  .projects-section .project-image,
  .projects-section .project-image img{height:205px;}
  .projects-section .project-body{padding:17px;}
}

/* V107 - Pengalaman: kembalikan indikator galeri lama, tanpa ikon panah */
.projects-section .project-image-link::before,
.projects-section .project-image-link::after{
  content:none !important;
  display:none !important;
}
.projects-section .project-gallery-count{
  position:absolute !important;
  right:10px !important;
  bottom:10px !important;
  z-index:10 !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
  padding:7px 10px !important;
  border-radius:9px !important;
  background:rgba(15,23,42,.86) !important;
  color:#fff !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1 !important;
  box-shadow:0 5px 14px rgba(0,0,0,.20) !important;
  pointer-events:none !important;
}
.projects-section .project-gallery-count i{
  display:inline-block !important;
  font-size:13px !important;
}
@media(max-width:700px){
  .projects-section .project-gallery-count{right:8px !important;bottom:8px !important;padding:6px 9px !important;font-size:11px !important}
  .projects-section .project-gallery-count i{font-size:12px !important}
}


/* V108 - Pengalaman: kartu tanpa lokasi/tanggal + lightbox transparan */
.projects-section .project-body h3{
  margin-bottom:0 !important;
}
.projects-section .project-meta{
  display:none !important;
}

.projects-section .project-lightbox{
  padding:20px !important;
  background:transparent !important;
}
.projects-section .project-lightbox-backdrop{
  background:rgba(5,12,20,.78) !important;
  backdrop-filter:blur(5px) !important;
  -webkit-backdrop-filter:blur(5px) !important;
}
.projects-section .project-lightbox-dialog{
  width:auto !important;
  max-width:94vw !important;
  max-height:94vh !important;
  padding:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.projects-section .project-lightbox-image{
  max-width:92vw !important;
  max-height:88vh !important;
  border-radius:6px !important;
  background:transparent !important;
  box-shadow:0 18px 55px rgba(0,0,0,.42) !important;
}
.projects-section .project-lightbox-close{
  position:fixed !important;
  top:18px !important;
  right:18px !important;
  width:42px !important;
  height:42px !important;
  border-radius:50% !important;
  background:rgba(15,23,42,.72) !important;
  color:#fff !important;
  font-size:18px !important;
  box-shadow:0 8px 24px rgba(0,0,0,.28) !important;
}
.projects-section .project-lightbox-close:hover{
  background:#be182d !important;
}
.projects-section .project-lightbox-nav{
  background:rgba(15,23,42,.68) !important;
}
.projects-section .project-lightbox-bottom{
  margin-top:10px !important;
  width:min(92vw,920px) !important;
}
.projects-section .project-lightbox-thumb{
  background:rgba(15,23,42,.55) !important;
}
.projects-section .project-lightbox-counter,
.projects-section .project-lightbox-ai-note{
  color:#fff !important;
}
@media(max-width:700px){
  .projects-section .project-lightbox{padding:10px !important}
  .projects-section .project-lightbox-image{max-width:96vw !important;max-height:78vh !important}
  .projects-section .project-lightbox-close{top:12px !important;right:12px !important;width:38px !important;height:38px !important;font-size:16px !important}
}


/* V109 - Lightbox proyek: klik foto wajib membuka overlay transparan */
body.lightbox-open{overflow:hidden !important}
.projects-section .project-lightbox{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483000 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  margin:0 !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  background:transparent !important;
  transition:opacity .2s ease,visibility .2s ease !important;
}
.projects-section .project-lightbox.show{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}
.projects-section .project-lightbox-backdrop{
  position:absolute !important;
  inset:0 !important;
  background:rgba(0,0,0,.78) !important;
  backdrop-filter:blur(6px) !important;
  -webkit-backdrop-filter:blur(6px) !important;
  cursor:zoom-out !important;
}
.projects-section .project-lightbox-dialog{
  position:relative !important;
  z-index:2 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  padding:70px 70px 35px !important;
  margin:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-direction:column !important;
}
.projects-section .project-lightbox-image{
  position:relative !important;
  z-index:2 !important;
  display:block !important;
  width:auto !important;
  max-width:calc(100vw - 110px) !important;
  height:auto !important;
  max-height:calc(100vh - 155px) !important;
  object-fit:contain !important;
  border-radius:4px !important;
  background:transparent !important;
  box-shadow:0 20px 70px rgba(0,0,0,.55) !important;
}
.projects-section .project-lightbox-close{
  position:fixed !important;
  z-index:10 !important;
  top:18px !important;
  right:18px !important;
  width:44px !important;
  height:44px !important;
  padding:0 !important;
  border:1px solid rgba(255,255,255,.25) !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  background:rgba(15,23,42,.82) !important;
  color:#fff !important;
  font-size:19px !important;
  cursor:pointer !important;
  box-shadow:0 8px 24px rgba(0,0,0,.35) !important;
}
.projects-section .project-lightbox-close:hover{background:#be182d !important;transform:scale(1.05)}
.projects-section .project-lightbox-nav{z-index:5 !important}
.projects-section .project-lightbox-prev{left:22px !important}
.projects-section .project-lightbox-next{right:22px !important}
.projects-section .project-lightbox-bottom{position:relative !important;z-index:4 !important;margin-top:14px !important}
@media(max-width:700px){
  .projects-section .project-lightbox-dialog{padding:60px 14px 24px !important}
  .projects-section .project-lightbox-image{max-width:calc(100vw - 28px) !important;max-height:calc(100vh - 145px) !important}
  .projects-section .project-lightbox-close{top:12px !important;right:12px !important;width:40px !important;height:40px !important;font-size:17px !important}
  .projects-section .project-lightbox-prev{left:8px !important}
  .projects-section .project-lightbox-next{right:8px !important}
}

/* V110 - Lightbox Proyek mengikuti model APCM: overlay penuh tanpa panel putih */
.project-lightbox{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483000 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  margin:0 !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  background:transparent !important;
  transition:opacity .22s ease,visibility .22s ease !important;
}
.project-lightbox.show{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}
.project-lightbox-backdrop{
  position:absolute !important;
  inset:0 !important;
  background:rgba(5,12,20,.72) !important;
  backdrop-filter:blur(4px) !important;
  -webkit-backdrop-filter:blur(4px) !important;
  cursor:zoom-out !important;
}
.project-lightbox-dialog{
  position:relative !important;
  z-index:2 !important;
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  max-height:none !important;
  padding:70px 80px 55px !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-direction:column !important;
}
.project-lightbox-image{
  position:relative !important;
  z-index:2 !important;
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:82vw !important;
  max-height:76vh !important;
  object-fit:contain !important;
  border-radius:10px !important;
  background:transparent !important;
  box-shadow:0 18px 55px rgba(0,0,0,.42) !important;
}
.project-lightbox-close{
  position:fixed !important;
  z-index:20 !important;
  top:20px !important;
  right:24px !important;
  width:48px !important;
  height:48px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  background:#ed1c24 !important;
  color:#fff !important;
  font-size:20px !important;
  line-height:1 !important;
  cursor:pointer !important;
  box-shadow:0 8px 24px rgba(0,0,0,.30) !important;
}
.project-lightbox-close:hover{
  background:#c9151d !important;
  transform:scale(1.04) !important;
}
.project-lightbox-nav{
  position:fixed !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:15 !important;
  width:48px !important;
  height:48px !important;
  padding:0 !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  background:rgba(15,23,42,.78) !important;
  color:#fff !important;
  font-size:18px !important;
  cursor:pointer !important;
  box-shadow:0 8px 22px rgba(0,0,0,.28) !important;
}
.project-lightbox-nav:hover{
  background:#be182d !important;
}
.project-lightbox-prev{left:22px !important}
.project-lightbox-next{right:22px !important}
.project-lightbox-nav:disabled{opacity:.35 !important;cursor:default !important}
.project-lightbox-bottom{
  display:none !important;
}
@media(max-width:700px){
  .project-lightbox-dialog{padding:58px 55px 30px !important}
  .project-lightbox-image{max-width:88vw !important;max-height:76vh !important;border-radius:7px !important}
  .project-lightbox-close{top:12px !important;right:12px !important;width:42px !important;height:42px !important;font-size:17px !important}
  .project-lightbox-nav{width:40px !important;height:40px !important;font-size:15px !important}
  .project-lightbox-prev{left:8px !important}
  .project-lightbox-next{right:8px !important}
}

/* V111 - Pengalaman: intro satu baris + seluruh isi deskripsi card justify */
.projects-section .projects-intro .lead{
  max-width:none !important;
  width:100% !important;
  white-space:nowrap !important;
  text-align:center !important;
}
.projects-section .project-body{
  text-align:justify !important;
  text-justify:inter-word !important;
}
.projects-section .project-body h3{
  text-align:left !important;
}
.projects-section .project-body p{
  text-align:justify !important;
  text-justify:inter-word !important;
}
@media(max-width:760px){
  .projects-section .projects-intro .lead{
    white-space:normal !important;
    text-align:center !important;
  }
}

/* ===== V112 — Deskripsi Section: kecil, rata tengah, satu baris ===== */
.section-head .lead,
.about-content > .lead,
.projects-intro .lead{
  text-align:center !important;
  font-size:13px !important;
  line-height:1.6 !important;
  white-space:nowrap !important;
  width:100% !important;
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Pastikan deskripsi section pada blok yang sebelumnya justify tetap center */
.home-page .about-content .lead,
.home-page .projects-intro .lead{
  text-align:center !important;
  font-size:13px !important;
  white-space:nowrap !important;
}

@media (max-width:900px){
  .section-head .lead,
  .about-content > .lead,
  .projects-intro .lead{
    white-space:normal !important;
    font-size:13px !important;
    text-align:center !important;
  }
}

/* V113 - Perbaikan Tentang SKR Beranda: paragraf isi tidak dipaksa satu baris */
.home-page .about-content > .lead{
  white-space:normal !important;
  text-align:justify !important;
  text-justify:inter-word !important;
  width:auto !important;
  max-width:none !important;
  overflow-wrap:break-word !important;
  word-break:normal !important;
}

html, body{
  overflow-x:hidden !important;
}


/* ===== V114 - Footer mengikuti menu utama navbar + WhatsApp pada Hubungi Kami ===== */
.footer-col > a{
  text-decoration:none;
}
.contact-whatsapp-wrap{
  margin:18px 0 0 56px;
}
.contact-whatsapp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-width:126px;
  height:40px;
  padding:0 17px;
  border-radius:8px;
  background:#25D366;
  color:#fff !important;
  text-decoration:none;
  font-size:12px;
  font-weight:800;
  box-shadow:0 7px 18px rgba(37,211,102,.20);
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}
.contact-whatsapp-btn i{
  font-size:17px;
}
.contact-whatsapp-btn:hover{
  background:#1fbd5b;
  color:#fff !important;
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(37,211,102,.26);
}
@media(max-width:600px){
  .contact-whatsapp-wrap{margin:16px 0 0 56px}
  .contact-whatsapp-btn{height:39px;font-size:11px}
}


/* ===== V115 - Presisi WhatsApp Kontak + Pin Google Maps ===== */
.contact-whatsapp-wrap{
  margin:18px 0 0 56px !important;
  display:flex !important;
  align-items:flex-start !important;
}
.contact-whatsapp-btn{
  margin:0 !important;
}
@media(max-width:600px){
  .contact-whatsapp-wrap{margin:16px 0 0 56px !important}
}


/* ===== V116 - Nama lokasi Google Maps + Spasi WhatsApp ===== */
.contact-whatsapp-wrap{
  margin:32px 0 0 56px !important;
}
@media(max-width:600px){
  .contact-whatsapp-wrap{margin:28px 0 0 56px !important}
}


/* ===== V117 - Google Maps: nama lokasi + pin presisi ===== */
.contact-map iframe{
  display:block !important;
  width:100% !important;
  border:0 !important;
}


/* ===== V118 - Google Maps pin merah + kartu lokasi presisi ===== */
.contact-map{
  position:relative !important;
}
.contact-map-location-card{
  position:absolute !important;
  top:12px !important;
  left:12px !important;
  z-index:20 !important;
  display:flex !important;
  align-items:flex-start !important;
  gap:10px !important;
  max-width:360px !important;
  padding:12px 15px !important;
  background:#fff !important;
  border-radius:3px !important;
  box-shadow:0 2px 8px rgba(0,0,0,.22) !important;
  color:#202124 !important;
}
.contact-map-location-icon{
  flex:0 0 30px !important;
  width:30px !important;
  height:30px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:50% !important;
  background:#ea4335 !important;
  color:#fff !important;
  font-size:14px !important;
}
.contact-map-location-card strong{
  display:block !important;
  margin:0 0 3px !important;
  font-size:14px !important;
  line-height:1.25 !important;
}
.contact-map-location-card span{
  display:block !important;
  font-size:12px !important;
  line-height:1.45 !important;
  color:#5f6368 !important;
}
@media(max-width:600px){
  .contact-map-location-card{
    top:8px !important;
    left:8px !important;
    right:8px !important;
    max-width:none !important;
    padding:10px 12px !important;
  }
  .contact-map-location-card strong{font-size:12px !important}
  .contact-map-location-card span{font-size:10px !important}
  .contact-map-location-icon{width:27px !important;height:27px !important;flex-basis:27px !important;font-size:12px !important}
}

/* V121 - Perbaikan teks tenaga ahli saja. Posisi dan bentuk kotak TIDAK diubah. */
.skr-org-chart .org-expert.e1 .org-title,
.skr-org-chart .org-expert.e4 .org-title{
  white-space:normal !important;
  overflow:visible !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  text-overflow:clip !important;
  font-size:12px !important;
  line-height:1.15 !important;
  padding-left:4px !important;
  padding-right:4px !important;
}

/* V122 - Struktur Organisasi: kotak kembali membulat seperti sebelumnya.
   Tidak mengubah posisi, ukuran, garis, atau alur struktur. */
.skr-org-chart .org-card{
  border-radius:12px !important;
}

/* V123 - Kotak tetap membulat, teks Ahli tidak terpotong.
   Tidak mengubah posisi, ukuran, atau bentuk luar kotak. */
.skr-org-chart .org-card{
  border-radius:12px !important;
}
.skr-org-chart .org-expert.e1 .org-title,
.skr-org-chart .org-expert.e4 .org-title{
  height:39px !important;
  min-height:39px !important;
  padding:4px 6px !important;
  font-size:11px !important;
  line-height:1.15 !important;
  white-space:normal !important;
  overflow:visible !important;
  word-break:normal !important;
  overflow-wrap:break-word !important;
  text-overflow:clip !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* ===== V124 - Semua menu Layanan fokus ke atas ===== */
.service-card[id]{scroll-margin-top:120px !important;}
@media(max-width:760px){
  .service-card[id]{scroll-margin-top:96px !important;}
}

/* =========================================================
   SKR PROJECT ADMIN / DATABASE PROJECTS
   ========================================================= */
.project-image-empty{background:#f2f4f6;display:flex;align-items:center;justify-content:center;min-height:240px}
.project-no-photo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:#8b949e;font-size:12px;text-align:center;width:100%;height:100%;min-height:240px}
.project-no-photo i{font-size:30px;color:#b2bac2}
.project-category{display:inline-block;font-size:10px;line-height:1.2;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#e43d21;margin-bottom:7px}
.project-location{font-size:11px;color:#7a858e;margin:-2px 0 10px}
.project-location i{margin-right:4px;color:#e43d21}
.projects-empty{text-align:center;padding:50px 20px;color:#7b8790}


/* ===== SKR - Frozen public website header (fixed) ===== */
.site-header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:99999 !important;
}
.site-header .nav-wrap{
  position:relative !important;
  top:auto !important;
  z-index:100000 !important;
}
body{padding-top:82px !important;}
@media(max-width:760px){
  body{padding-top:66px !important;}
  .site-header,.site-header .nav-wrap{position:fixed !important;top:0 !important;left:0 !important;right:0 !important;width:100% !important;}
}
.captcha-refresh.is-loading i{animation:captchaSpin .7s linear infinite}
.captcha-refresh:disabled{opacity:.7;cursor:wait}
@keyframes captchaSpin{to{transform:rotate(360deg)}}
/* Visual content protection */
img, picture, svg, video, canvas {
    -webkit-user-drag: none;
    user-drag: none;
}

.lightbox img, .gallery img, .project-card img, .project-image img,
.card-image img, .hero img, .equipment-card img, .client-card img {
    -webkit-user-drag: none;
    user-select: none;
}

/* ===== SKR HERO SLIDER — smooth horizontal transition + strict left alignment ===== */
.hero.hero-slider{
  position:relative;
  min-height:620px;
  display:block;
  overflow:hidden;
  isolation:isolate;
  background:#071927;
}
.hero-slider .hero-track{
  display:flex;
  width:100%;
  height:100%;
  min-height:620px;
  transform:translate3d(0,0,0);
  transition:transform .85s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.hero-slider .hero-slide{
  position:relative;
  flex:0 0 100%;
  min-width:100%;
  min-height:620px;
  display:flex;
  align-items:center;
  color:#fff;
  background-image:none;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  overflow:hidden;
}
.hero-slider .hero-slide::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(90deg,rgba(7,25,39,.92),rgba(7,25,39,.64) 42%,rgba(7,25,39,.12) 78%,rgba(7,25,39,.02) 100%);
  pointer-events:none;
}
.hero-slider .hero-content{
  position:relative;
  z-index:1;
  width:min(var(--site-max),var(--site-width));
  max-width:none;
  margin-inline:auto;
  padding:82px 0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  text-align:left !important;
}
.hero-slider .hero-content > *{
  text-align:left !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
.hero-slider .eyebrow{align-self:flex-start}
.hero-slider h1{max-width:690px}
.hero-slider p{max-width:610px;text-align:left !important}
.hero-slider .btns{justify-content:flex-start !important;align-items:flex-start}
.hero-slider .hero-arrow{
  position:absolute;
  top:50%;
  z-index:4;
  width:56px;
  height:56px;
  margin-top:-28px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:50%;
  background:rgba(8,24,38,.28);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  font-size:18px;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.hero-slider .hero-prev{left:28px}
.hero-slider .hero-next{right:28px}
.hero-slider .hero-arrow:hover{background:var(--red);border-color:var(--red);transform:scale(1.06)}
.hero-slider .hero-dots{
  position:absolute;
  left:50%;
  bottom:24px;
  z-index:4;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:8px;
}
.hero-slider .hero-dot{
  width:10px;
  height:10px;
  padding:0;
  border:1px solid rgba(255,255,255,.75);
  border-radius:50%;
  background:rgba(255,255,255,.2);
  cursor:pointer;
  transition:width .3s ease,background .3s ease,border-color .3s ease,border-radius .3s ease;
}
.hero-slider .hero-dot.is-active{width:28px;border-radius:999px;background:#fff;border-color:#fff}
.hero-slider .hero-dot:focus-visible,.hero-slider .hero-arrow:focus-visible{outline:3px solid rgba(255,255,255,.7);outline-offset:3px}
@media(max-width:760px){
  .hero.hero-slider,.hero-slider .hero-track,.hero-slider .hero-slide{min-height:620px}
  .hero-slider .hero-slide{background-position:62% center}
  .hero-slider .hero-content{width:90%;padding:64px 0}
  .hero-slider h1{max-width:100%;font-size:30px;line-height:1.14;letter-spacing:-.35px}
  .hero-slider p{max-width:100%;font-size:14px;line-height:1.7}
  .hero-slider .hero-arrow{width:44px;height:44px;margin-top:-22px;font-size:15px}
  .hero-slider .hero-prev{left:12px}.hero-slider .hero-next{right:12px}
  .hero-slider .hero-dots{bottom:18px}
}
@media(prefers-reduced-motion:reduce){
  .hero-slider .hero-track{transition:none}
  .hero-slider .hero-arrow,.hero-slider .hero-dot{transition:none}
}

/* ===== HERO FINAL FIX: reliable images + compact arrows ===== */
.hero-slider .hero-slide[style*="background-image"]{
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}
.hero-slider .hero-arrow{
  width:42px;
  height:42px;
  margin-top:-21px;
  font-size:13px;
  background:rgba(8,24,38,.38);
  border-color:rgba(255,255,255,.50);
}
.hero-slider .hero-prev{left:22px}
.hero-slider .hero-next{right:22px}
.hero-slider .hero-arrow:hover{transform:scale(1.04)}
@media(max-width:760px){
  .hero-slider .hero-arrow{width:34px;height:34px;margin-top:-17px;font-size:11px}
  .hero-slider .hero-prev{left:10px}.hero-slider .hero-next{right:10px}
}


/* ===== HERO SLIDER FINAL — smooth crossfade + white CTA hover ===== */
.hero-slider .hero-track{
  position:relative;
  display:block;
  width:100%;
  min-height:620px;
  transform:none !important;
  transition:none !important;
}
.hero-slider .hero-slide{
  position:absolute;
  inset:0;
  width:100%;
  min-width:100%;
  min-height:620px;
  opacity:0;
  visibility:hidden;
  transform:translate3d(18px,0,0) scale(1.01);
  transition:opacity 1.1s cubic-bezier(.22,1,.36,1),
             transform 1.1s cubic-bezier(.22,1,.36,1),
             visibility 0s linear 1.1s;
  pointer-events:none;
}
.hero-slider .hero-slide.is-active{
  opacity:1;
  visibility:visible;
  transform:translate3d(0,0,0) scale(1);
  z-index:2;
  pointer-events:auto;
  transition:opacity 1.1s cubic-bezier(.22,1,.36,1),
             transform 1.1s cubic-bezier(.22,1,.36,1),
             visibility 0s;
}
.hero-slider .hero-slide.is-leaving{
  opacity:0;
  visibility:visible;
  transform:translate3d(-18px,0,0) scale(1.005);
  z-index:1;
  transition:opacity 1.1s cubic-bezier(.22,1,.36,1),
             transform 1.1s cubic-bezier(.22,1,.36,1);
}
.hero-slider .hero-content{position:relative;z-index:3}
.hero-slider .btn-light{
  border-color:rgba(255,255,255,.9);
  transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.hero-slider .btn-light:hover,
.hero-slider .btn-light:focus-visible{
  background:var(--red);
  border-color:var(--red);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(0,0,0,.20);
}
@media(max-width:760px){
  .hero-slider .hero-track,
  .hero-slider .hero-slide{min-height:620px}
}


/* ===== SKR FINAL UI — mobile navigation animation + precise header brand ===== */
.brand > span{min-width:0;white-space:nowrap;display:block}
.brand strong{white-space:nowrap;font-size:clamp(10px,1.15vw,14px);letter-spacing:.1px;line-height:1.1}
.menu-toggle{position:relative;overflow:hidden;transition:background-color .25s ease,transform .25s ease,box-shadow .25s ease}
.menu-toggle .menu-icon-bars,
.menu-toggle .menu-icon-close{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .28s ease,transform .32s cubic-bezier(.22,1,.36,1)}
.menu-toggle .menu-icon-bars{opacity:1;transform:rotate(0deg) scale(1)}
.menu-toggle .menu-icon-close{opacity:0;transform:rotate(-90deg) scale(.7)}
.menu-toggle.is-open .menu-icon-bars{opacity:0;transform:rotate(90deg) scale(.7)}
.menu-toggle.is-open .menu-icon-close{opacity:1;transform:rotate(0deg) scale(1)}
.menu-toggle:hover{background:#243f5b;transform:none;box-shadow:0 5px 14px rgba(23,50,77,.18)}

/* Mobile main menu: smooth open/close instead of display:none/display:flex. */
@media(max-width:760px){
  .brand strong{font-size:10px;letter-spacing:0;line-height:1.05}
  .brand > span{white-space:nowrap;flex:1;min-width:0}
  .menu-toggle{flex:0 0 44px}
  .menu{
    display:flex !important;
    max-height:0;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    pointer-events:none;
    transform:translateY(-10px);
    transition:max-height .42s cubic-bezier(.22,1,.36,1),opacity .25s ease,visibility 0s linear .42s,transform .35s cubic-bezier(.22,1,.36,1);
  }
  .menu.open{
    max-height:calc(100vh - 66px);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
    transition:max-height .48s cubic-bezier(.22,1,.36,1),opacity .25s ease,visibility 0s,transform .35s cubic-bezier(.22,1,.36,1);
    overflow-y:auto;
  }

  /* Mobile Layanan dropdown: animated height, opacity and arrow rotation. */
  .menu-dropdown{overflow:hidden}
  .menu-dropdown .dropdown-menu{
    display:block !important;
    max-height:0;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    padding-top:0;
    padding-bottom:0;
    transition:max-height .42s cubic-bezier(.22,1,.36,1),opacity .25s ease,visibility 0s linear .42s,padding .35s ease;
  }
  .menu-dropdown.open .dropdown-menu{
    max-height:600px;
    opacity:1;
    visibility:visible;
    padding-top:3px;
    padding-bottom:3px;
    transition:max-height .48s cubic-bezier(.22,1,.36,1),opacity .25s ease,visibility 0s,padding .35s ease;
  }
  .menu-dropdown .dropdown-toggle i{transition:transform .35s cubic-bezier(.22,1,.36,1)}
}

/* Hero white CTA: hover only, no movement or shadow effect. */
.hero-slider .btn-light{
  border-color:#fff;
  transition:background-color .22s ease,color .22s ease,border-color .22s ease;
  transform:none !important;
  box-shadow:none !important;
}
.hero-slider .btn-light:hover{
  background:#eef0f2;
  color:var(--navy);
  border-color:#dfe3e7;
  transform:none !important;
  box-shadow:none !important;
}
.hero-slider .btn-light:focus-visible{
  outline:2px solid rgba(255,255,255,.85);
  outline-offset:3px;
  transform:none !important;
  box-shadow:none !important;
}

@media(max-width:420px){
  .brand strong{font-size:9px;letter-spacing:-.05px}
}


/* ===== SKR CTA — responsif desktop, tablet, dan mobile ===== */
.site-cta{
  position:relative;
  overflow:hidden;
  margin-top:0;
  padding:clamp(42px,5.2vw,76px) 0;
  background:linear-gradient(110deg,#fff5f2 0%,#ffebe6 52%,#ffe2da 100%);
  border-top:1px solid rgba(228,61,33,.08);
}
.site-cta:before{
  content:"";
  position:absolute;
  width:clamp(180px,28vw,360px);
  height:clamp(180px,28vw,360px);
  right:8%;top:-210px;
  border-radius:50%;
  background:rgba(228,61,33,.07);
  pointer-events:none;
}
.site-cta-inner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(18px,3vw,32px);
}
.site-cta-copy{min-width:0;max-width:100%;flex:1 1 0}
.site-cta-eyebrow{
  display:block;
  margin-bottom:10px;
  color:var(--red);
  font-size:clamp(9px,.8vw,10px);
  font-weight:800;
  letter-spacing:clamp(1px,.12vw,1.6px);
  line-height:1.5;
}
.site-cta h2{
  max-width:100%;
  margin:0;
  color:var(--navy);
  font-size:clamp(18px,2vw,27px);
  font-weight:800;
  line-height:1.3;
  letter-spacing:-.45px;
  white-space:normal;
  overflow-wrap:anywhere;
}
.site-cta h2 span{color:var(--red)}
.site-cta-button{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:46px;
  max-width:100%;
  padding:0 clamp(16px,2vw,22px);
  border:1px solid var(--red);
  border-radius:999px;
  background:var(--red);
  color:#fff;
  font-size:clamp(11px,.9vw,12px);
  font-weight:800;
  text-align:center;
  white-space:normal;
  box-shadow:0 10px 22px rgba(190,43,21,.16);
  transition:background .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.site-cta-button i{font-size:13px;flex:0 0 auto;transition:transform .22s ease}
.site-cta-button:hover{
  background:var(--red-dark);
  border-color:var(--red-dark);
  color:#fff;
  box-shadow:0 14px 30px rgba(190,43,21,.24);
}
.site-cta-button:hover i{transform:translateX(3px)}
@media (min-width:761px) and (max-width:1024px){
  .site-cta{padding:48px 0}
  .site-cta-inner{align-items:flex-start;gap:20px}
  .site-cta h2{font-size:clamp(18px,2.4vw,24px)}
  .site-cta-button{min-height:44px;padding:0 16px}
}
@media (max-width:760px){
  .site-cta{padding:38px 0}
  .site-cta-inner{align-items:stretch;flex-direction:column;gap:18px}
  .site-cta-copy{width:100%}
  .site-cta h2{font-size:clamp(18px,5vw,24px);line-height:1.35;letter-spacing:-.3px}
  .site-cta-eyebrow{font-size:9px;letter-spacing:1.1px;margin-bottom:8px}
  .site-cta-button{align-self:flex-start;min-height:46px;padding:0 20px;font-size:12px;white-space:nowrap}
}
@media (max-width:360px){
  .site-cta h2{font-size:17px}
  .site-cta-button{max-width:100%;padding:0 16px}
}


/* SKR — Organisasi & Manajemen: tiga kartu pengurus dan kartu saham terpisah */
.org-management-cards{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:24px}
.org-management-cards .card{height:100%;text-align:center}
.shareholder-card-wrap{display:flex;justify-content:center;margin:0 auto 42px;padding:0 12px}
.shareholder-card{width:min(100%,720px);display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px 18px;align-items:center;padding:24px 28px;border:1px solid rgba(15,30,45,.1);border-radius:16px;box-shadow:0 10px 26px rgba(15,30,45,.07);background:#fff}
.shareholder-card .icon{grid-row:1 / span 2;margin:0;width:62px;height:62px;display:flex;align-items:center;justify-content:center;border-radius:18px;background:linear-gradient(145deg,var(--red),#8f1327);color:#fff;font-size:25px}
.shareholder-kicker{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--red);font-weight:800}
.shareholder-card h3{margin:3px 0 0;font-size:19px}
.shareholder-list{grid-column:2;display:grid;gap:8px}
.shareholder-row{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:10px 13px;border-radius:9px;background:#f6f7f9;border:1px solid #e9edf1;color:#18232e}
.shareholder-row strong{color:var(--red);font-size:16px;white-space:nowrap}
.skr-org-chart{height:640px}
.skr-org-chart .org-canvas{height:780px;transform:translateX(-50%) scale(.78)}
.skr-org-chart .org-commissioner{left:475px;top:20px}
.skr-org-chart .org-director-utama{left:475px;top:140px}
.skr-org-chart .org-director{left:475px;top:260px}
.skr-org-chart .e1{left:35px;top:390px}.skr-org-chart .e2{left:335px;top:390px}.skr-org-chart .e3{left:635px;top:390px}.skr-org-chart .e4{left:935px;top:390px}
.skr-org-chart .s1{left:120px;top:530px}.skr-org-chart .s2{left:475px;top:530px}.skr-org-chart .s3{left:830px;top:530px}
.skr-org-chart .org-final{left:475px;top:670px}
@media(max-width:1050px){.skr-org-chart{height:600px}.skr-org-chart .org-canvas{transform:translateX(-50%) scale(.72)}}
@media(max-width:760px){.org-management-cards{grid-template-columns:1fr}.shareholder-card{grid-template-columns:52px minmax(0,1fr);padding:18px 16px;gap:10px 12px}.shareholder-card .icon{width:48px;height:48px;font-size:20px}.shareholder-card h3{font-size:17px}.shareholder-list{grid-column:1 / -1}.skr-org-chart{height:520px;overflow-x:auto;overflow-y:hidden}.skr-org-chart .org-canvas{left:0;transform:scale(.62);transform-origin:top left}}


/* SKR refinement: shareholder panel and organization chart — modern compact */
.org-management-cards{gap:14px;margin-bottom:16px!important}
.org-management-cards .card{padding:18px 16px;border:1px solid rgba(217,31,38,.12);border-radius:14px;box-shadow:0 7px 20px rgba(19,31,43,.06);transition:transform .2s ease,box-shadow .2s ease}
.org-management-cards .card:hover{transform:translateY(-3px);box-shadow:0 11px 24px rgba(19,31,43,.11)}
.org-management-cards .card .icon{width:46px;height:46px;margin:0 auto 10px;border-radius:13px;font-size:20px}
.org-management-cards .card h3{margin:0 0 6px;font-size:16px;line-height:1.3}
.org-management-cards .card p{margin:0;font-size:13px;line-height:1.45}
.shareholder-card-wrap{margin:0 auto 28px;padding:0 8px}
.shareholder-card{width:min(100%,620px);grid-template-columns:48px minmax(0,1fr);gap:6px 13px;padding:16px 18px;border-radius:14px;border-color:rgba(217,31,38,.14);box-shadow:0 7px 20px rgba(19,31,43,.06)}
.shareholder-card .icon{width:44px;height:44px;border-radius:12px;font-size:19px}
.shareholder-kicker{font-size:9px;letter-spacing:1.2px}
.shareholder-card h3{font-size:17px;margin:2px 0 0}
.shareholder-list{gap:5px}
.shareholder-row{padding:7px 10px;border-radius:7px;gap:10px;font-size:12px;line-height:1.35}
.shareholder-row strong{font-size:14px}
.skr-org-chart{height:590px;padding:14px 8px 22px;border-radius:16px;background:linear-gradient(180deg,#fff 0%,#fffafa 100%)}
.skr-org-chart .org-canvas{height:700px;transform:translateX(-50%) scale(.78);transform-origin:top center}
.skr-org-chart .org-card{width:230px;height:68px;border-radius:10px;box-shadow:0 4px 12px rgba(20,30,40,.07)}
.skr-org-chart .org-card .org-title{height:34px;padding:4px 7px;font-size:12px;letter-spacing:.1px;background:linear-gradient(135deg,#a91427,#d91f26 65%,#ed4b52)}
.skr-org-chart .org-card .org-name{height:34px;padding:4px 7px;font-size:12px;line-height:1.2;text-align:justify;text-align-last:center;justify-content:center}
.skr-org-chart .org-card .org-title{text-align:justify;text-align-last:center}
.skr-org-chart .org-commissioner{left:485px;top:10px}
.skr-org-chart .org-director-utama{left:485px;top:105px}
.skr-org-chart .org-director{left:485px;top:200px}
.skr-org-chart .e1{left:45px;top:305px}.skr-org-chart .e2{left:335px;top:305px}.skr-org-chart .e3{left:625px;top:305px}.skr-org-chart .e4{left:915px;top:305px}
.skr-org-chart .s1{left:170px;top:410px}.skr-org-chart .s2{left:485px;top:410px}.skr-org-chart .s3{left:800px;top:410px}
.skr-org-chart .org-final{left:485px;top:515px}
.skr-org-chart .org-card:hover{transform:translateY(-2px);box-shadow:0 8px 17px rgba(20,30,40,.12)}
@media(max-width:1050px){.skr-org-chart{height:540px}.skr-org-chart .org-canvas{transform:translateX(-50%) scale(.7)}}
@media(max-width:760px){
 .org-management-cards{grid-template-columns:1fr;gap:10px}
 .org-management-cards .card{padding:14px}
 .shareholder-card{grid-template-columns:42px minmax(0,1fr);padding:14px;gap:8px 10px}
 .shareholder-card .icon{width:40px;height:40px;font-size:18px}
 .shareholder-list{grid-column:1 / -1}
 .shareholder-row{font-size:11px;padding:7px 9px}
 .skr-org-chart{height:440px;overflow-x:auto;overflow-y:hidden;padding:12px 8px}
 .skr-org-chart .org-canvas{left:0;transform:scale(.56);transform-origin:top left}
}
@media(prefers-reduced-motion:reduce){.org-management-cards .card,.skr-org-chart .org-card{transition:none}}

/* SKR: shareholder card hover + compact modern organization chart */
.shareholder-card-wrap{margin:0 auto 22px;padding:0 8px;}
.shareholder-card{width:min(100%,520px);display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 20px 14px;border:1px solid rgba(217,31,38,.16);border-radius:15px;background:linear-gradient(145deg,#fff 0%,#fff8f8 100%);box-shadow:0 6px 18px rgba(25,30,40,.07);text-align:center;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;}
.shareholder-card:hover{transform:translateY(-4px);border-color:rgba(217,31,38,.42);box-shadow:0 13px 28px rgba(100,20,28,.14);}
.shareholder-card .icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;margin:0 auto 2px;border-radius:13px;background:linear-gradient(135deg,#a91427,#d91f26 65%,#ed4b52);color:#fff;box-shadow:0 5px 12px rgba(217,31,38,.2);transition:transform .22s ease;}
.shareholder-card:hover .icon{transform:scale(1.06);}
.shareholder-card>div:nth-child(2){width:100%;}
.shareholder-kicker{font-size:9px;letter-spacing:1.25px;text-transform:uppercase;color:#8e2630;font-weight:800;}
.shareholder-card h3{margin:2px 0 3px;font-size:17px;line-height:1.25;color:#202833;}
.shareholder-list{width:100%;display:grid;gap:5px;margin-top:3px;}
.shareholder-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 11px;border:1px solid rgba(217,31,38,.09);border-radius:9px;background:#fff;text-align:left;font-size:12px;line-height:1.3;transition:background .18s ease,border-color .18s ease;}
.shareholder-row:hover{background:#fff1f2;border-color:rgba(217,31,38,.25);}
.shareholder-row strong{flex:0 0 auto;color:#c51f2b;font-size:14px;font-weight:800;}
.skr-org-chart{height:445px;max-width:1000px;padding:0;border:1px solid rgba(217,31,38,.10);border-radius:16px;background:linear-gradient(180deg,#fff 0%,#fffafa 100%);box-shadow:0 7px 22px rgba(22,30,40,.045);overflow:hidden;}
.skr-org-chart .org-canvas{width:1200px;height:460px;transform:translateX(-50%) scale(.82);transform-origin:top center;}
.skr-org-chart .org-card{width:220px;height:58px;border:1px solid rgba(217,31,38,.2);border-radius:10px;background:#fff;box-shadow:0 3px 10px rgba(30,35,45,.065);}
.skr-org-chart .org-card .org-title{height:29px;padding:4px 7px;background:linear-gradient(120deg,#a91427,#d91f26 65%,#e94a52);font-size:11px;line-height:1.1;letter-spacing:.15px;text-align:center;text-align-last:center;}
.skr-org-chart .org-card .org-name{height:29px;padding:4px 6px;background:#fff;color:#26313d;font-size:11px;line-height:1.15;text-align:center;text-align-last:center;justify-content:center;}
.skr-org-chart .org-card:hover{transform:translateY(-2px);border-color:rgba(217,31,38,.5);box-shadow:0 8px 16px rgba(100,20,28,.13);}
/* compact rows; all connector endpoints follow card centers */
.skr-org-chart .org-commissioner{left:490px;top:8px;}
.skr-org-chart .org-director-utama{left:490px;top:82px;}
.skr-org-chart .org-director{left:490px;top:156px;}
.skr-org-chart .e1{left:100px;top:230px;}.skr-org-chart .e2{left:350px;top:230px;}.skr-org-chart .e3{left:600px;top:230px;}.skr-org-chart .e4{left:850px;top:230px;}
.skr-org-chart .s1{left:240px;top:320px;}.skr-org-chart .s2{left:490px;top:320px;}.skr-org-chart .s3{left:740px;top:320px;}
.skr-org-chart .org-final{left:490px;top:400px;}
@media(max-width:1050px){.skr-org-chart{height:405px}.skr-org-chart .org-canvas{transform:translateX(-50%) scale(.74)}}
@media(max-width:760px){.shareholder-card{width:100%;padding:15px 14px 12px}.shareholder-card .icon{width:40px;height:40px}.shareholder-card h3{font-size:16px}.shareholder-row{font-size:11px;padding:7px 9px}.skr-org-chart{height:290px;overflow-x:auto;overflow-y:hidden}.skr-org-chart .org-canvas{left:0;transform:scale(.55);transform-origin:top left}}
@media(prefers-reduced-motion:reduce){.shareholder-card,.shareholder-card .icon,.shareholder-row,.skr-org-chart .org-card{transition:none}}


/* Revisi SKR: shareholder card selaras dengan card manajemen; bagan organisasi lebih besar dan teratur */
.shareholder-card-wrap{max-width:860px;margin:0 auto 28px;padding:0 8px}
.shareholder-card{width:100%;display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:8px 18px;padding:22px 26px;border-radius:16px;background:#fff;border:1px solid rgba(15,30,45,.08);box-shadow:0 10px 26px rgba(15,30,45,.07);text-align:left;position:relative;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.shareholder-card:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#d91f26,#8f1327)}
.shareholder-card:hover{transform:translateY(-4px);box-shadow:0 15px 32px rgba(15,30,45,.12);border-color:rgba(190,24,45,.2)}
.shareholder-card .icon{grid-row:1 / span 2;width:64px;height:64px;margin:0;border-radius:18px;background:linear-gradient(145deg,#d91f26,#8f1327);color:#fff;font-size:25px;box-shadow:0 10px 22px rgba(190,24,45,.22);transition:transform .22s ease}
.shareholder-card:hover .icon{transform:translateY(-2px)}
.shareholder-card>div:nth-child(2){width:100%;align-self:end}
.shareholder-kicker{font-size:10px;letter-spacing:1.15px;text-transform:uppercase;color:#8e2630;font-weight:800}
.shareholder-card h3{font-size:20px;margin:3px 0 0;line-height:1.25;color:#202833}
.shareholder-list{grid-column:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:2px}
.shareholder-row{min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:7px;padding:12px 13px;border:1px solid rgba(217,31,38,.12);border-radius:11px;background:#fff;text-align:left;font-size:13px;line-height:1.35;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.shareholder-row:hover{background:#fff3f4;border-color:rgba(217,31,38,.3);transform:translateY(-2px)}
.shareholder-row span{overflow-wrap:anywhere;color:#303944;font-weight:600}
.shareholder-row strong{font-size:19px;line-height:1;color:#c51f2b;font-weight:850}
.skr-org-chart{width:100%;max-width:1200px;margin:0 auto;min-height:590px;height:590px;padding:0 8px;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:hidden}
.skr-org-chart .org-canvas{position:relative;left:50%;width:1200px;height:570px;transform:translateX(-50%) scale(.96);transform-origin:top center}
.skr-org-chart .org-card{width:230px;height:76px;border:1px solid rgba(190,24,45,.2);border-radius:12px;background:#fff;box-shadow:0 5px 15px rgba(25,30,40,.09);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.skr-org-chart .org-card .org-title{height:36px;padding:8px 10px;background:linear-gradient(120deg,#a91427,#d91f26 65%,#e94a52);font-size:13px;line-height:1.15;font-weight:800;letter-spacing:.1px;text-align:center;display:flex;align-items:center;justify-content:center}
.skr-org-chart .org-card .org-name{height:40px;padding:7px 9px;background:#fff;color:#26313d;font-size:13px;line-height:1.2;font-weight:600;text-align:center;display:flex;align-items:center;justify-content:center;overflow-wrap:anywhere}
.skr-org-chart .org-card:hover{transform:translateY(-3px);border-color:rgba(217,31,38,.5);box-shadow:0 10px 22px rgba(100,20,28,.15)}
/* Card positions align to the SVG connector coordinates; expert and support rows remain evenly spaced. */
.skr-org-chart .org-commissioner{left:485px;top:0}
.skr-org-chart .org-director-utama{left:235px;top:105px}
.skr-org-chart .org-director{left:735px;top:105px}
.skr-org-chart .e1{left:95px;top:255px}.skr-org-chart .e2{left:345px;top:255px}.skr-org-chart .e3{left:595px;top:255px}.skr-org-chart .e4{left:845px;top:255px}
.skr-org-chart .s1{left:220px;top:375px}.skr-org-chart .s2{left:485px;top:375px}.skr-org-chart .s3{left:750px;top:375px}
.skr-org-chart .org-final{left:485px;top:495px}
.skr-org-chart .org-lines{position:absolute;inset:0;width:1200px;height:570px;overflow:visible}
.skr-org-chart .org-lines path{stroke:#b51c2a;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1100px){.skr-org-chart{height:570px;min-height:570px;overflow-x:auto;overflow-y:hidden}.skr-org-chart .org-canvas{left:0;transform:scale(.86);transform-origin:top left}}
@media(max-width:760px){.shareholder-card{grid-template-columns:52px minmax(0,1fr);gap:8px 12px;padding:17px 14px}.shareholder-card .icon{width:48px;height:48px;font-size:20px;border-radius:14px}.shareholder-card h3{font-size:18px}.shareholder-list{grid-column:1 / -1;grid-template-columns:1fr;gap:7px}.shareholder-row{flex-direction:row;align-items:center;justify-content:space-between;padding:10px 12px}.shareholder-row strong{font-size:17px}.skr-org-chart{height:500px;min-height:500px;overflow-x:auto;overflow-y:hidden}.skr-org-chart .org-canvas{left:0;transform:scale(.68);transform-origin:top left}}
@media(prefers-reduced-motion:reduce){.shareholder-card,.shareholder-card .icon,.shareholder-row,.skr-org-chart .org-card{transition:none}}


/* Connector-only refinement: keep all organization cards unchanged. */
.skr-org-chart .org-lines{z-index:1;pointer-events:none;overflow:visible}
.skr-org-chart .org-lines path{stroke:#b51c2a;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.skr-org-chart .org-lines marker path{fill:#b51c2a!important}


/* SKR Digital Map background: subtle coordinate grid, survey nodes and measurement paths. */
:root{--skr-map-red:rgba(217,31,38,.16);--skr-map-blue:rgba(24,74,111,.13)}
body{
 background-color:#fff;
 background-image:
  radial-gradient(circle at 12% 18%,rgba(217,31,38,.035),transparent 24rem),
  radial-gradient(circle at 88% 42%,rgba(30,91,135,.045),transparent 28rem),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='210' viewBox='0 0 240 210'%3E%3Cg fill='none' stroke='%23184a6f' stroke-opacity='.13' stroke-width='.8'%3E%3Cpath d='M0 44L38 28 75 47 108 25 148 40 184 17 240 35M0 110L35 94 76 113 111 91 151 107 190 83 240 101M0 176L39 158 76 178 113 154 151 171 191 147 240 166M38 28L35 94 39 158M108 25L111 91 113 154M184 17L190 83 191 147M75 47L76 113 76 178M148 40L151 107 151 171'/%3E%3Cpath d='M12 0V210M72 0V210M132 0V210M192 0V210M0 70H240M0 140H240' stroke-opacity='.075' stroke-dasharray='2 5'/%3E%3C/g%3E%3Cg fill='%23d91f26' fill-opacity='.25'%3E%3Ccircle cx='38' cy='28' r='2.2'/%3E%3Ccircle cx='108' cy='25' r='2.2'/%3E%3Ccircle cx='184' cy='17' r='2.2'/%3E%3Ccircle cx='76' cy='113' r='2.2'/%3E%3Ccircle cx='151' cy='107' r='2.2'/%3E%3Ccircle cx='191' cy='147' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
 background-repeat:no-repeat,no-repeat,repeat;
 background-size:auto,auto,240px 210px;
 background-attachment:scroll,scroll,fixed;
}
/* Put the digital-map motif on the open background areas, not over photos or cards. */
.section{background-image:linear-gradient(135deg,rgba(255,255,255,.94),rgba(255,255,255,.91)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='220' viewBox='0 0 300 220'%3E%3Cg fill='none' stroke='%23184a6f' stroke-opacity='.18' stroke-width='1'%3E%3Cpath d='M0 52L46 30 84 48 121 20 160 42 206 18 250 38 300 15M0 112L46 90 84 108 121 80 160 102 206 78 250 98 300 75M0 172L46 150 84 168 121 140 160 162 206 138 250 158 300 135'/%3E%3Cpath d='M46 30V90M121 20V80M206 18V78M250 38V98' stroke-dasharray='3 5'/%3E%3C/g%3E%3Cg fill='%23d91f26' fill-opacity='.28'%3E%3Ccircle cx='46' cy='30' r='3'/%3E%3Ccircle cx='121' cy='20' r='3'/%3E%3Ccircle cx='206' cy='18' r='3'/%3E%3Ccircle cx='250' cy='98' r='3'/%3E%3C/g%3E%3C/svg%3E");background-size:auto,300px 220px;background-position:center, right top;background-repeat:repeat,no-repeat}
.section.alt{background-color:#f7f9fb;background-image:linear-gradient(135deg,rgba(247,249,251,.9),rgba(247,249,251,.94)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='200' viewBox='0 0 280 200'%3E%3Cg fill='none' stroke='%23184a6f' stroke-opacity='.19' stroke-width='1'%3E%3Cpath d='M0 40L35 22 72 39 108 18 147 34 183 12 225 30 280 8M0 100L35 82 72 99 108 78 147 94 183 72 225 90 280 68M0 160L35 142 72 159 108 138 147 154 183 132 225 150 280 128'/%3E%3Cpath d='M35 22V82M108 18V78M183 12V72M225 30V90' stroke-dasharray='2 4'/%3E%3C/g%3E%3Cg fill='%23d91f26' fill-opacity='.3'%3E%3Ccircle cx='35' cy='22' r='2.5'/%3E%3Ccircle cx='108' cy='18' r='2.5'/%3E%3Ccircle cx='183' cy='12' r='2.5'/%3E%3C/g%3E%3C/svg%3E");background-size:auto,280px 200px;background-position:center,left top;background-repeat:repeat,no-repeat}
@media(max-width:760px){body{background-size:auto,auto,190px 166px}.section,.section.alt{background-size:auto,220px 165px}}

/* SKR Digital Map V2: stronger, clearly visible coordinate and survey motif */
body{
 background-image:
  radial-gradient(circle at 7% 18%,rgba(217,31,38,.085),transparent 25rem),
  radial-gradient(circle at 94% 62%,rgba(24,74,111,.10),transparent 30rem),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='220' viewBox='0 0 260 220'%3E%3Cg fill='none' stroke='%23184a6f' stroke-opacity='.24' stroke-width='1.15'%3E%3Cpath d='M0 38L35 22 73 43 112 18 150 38 193 15 226 35 260 20M0 105L35 89 73 110 112 85 150 105 193 82 226 102 260 87M0 174L35 158 73 179 112 154 150 174 193 151 226 171 260 156M35 22V89M112 18V85M193 15V82M73 43V110M150 38V105M226 35V102M35 89V158M112 85V154M193 82V151'/%3E%3Cpath d='M14 0V220M78 0V220M142 0V220M206 0V220M0 65H260M0 135H260' stroke-opacity='.15' stroke-dasharray='3 5'/%3E%3C/g%3E%3Cg fill='%23d91f26' fill-opacity='.62'%3E%3Ccircle cx='35' cy='22' r='3'/%3E%3Ccircle cx='112' cy='18' r='3'/%3E%3Ccircle cx='193' cy='15' r='3'/%3E%3Ccircle cx='73' cy='110' r='3'/%3E%3Ccircle cx='150' cy='105' r='3'/%3E%3Ccircle cx='226' cy='102' r='3'/%3E%3C/g%3E%3Cg fill='none' stroke='%23d91f26' stroke-opacity='.42' stroke-width='1.2'%3E%3Ccircle cx='112' cy='85' r='7'/%3E%3Ccircle cx='193' cy='82' r='7'/%3E%3C/g%3E%3C/svg%3E");
 background-repeat:no-repeat,no-repeat,repeat;
 background-size:auto,auto,260px 220px;
}
/* Make the map pattern perceptible in page sections without covering content or cards. */
.section{
 background-image:
  linear-gradient(135deg,rgba(255,255,255,.78),rgba(255,255,255,.80)),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='250' viewBox='0 0 340 250'%3E%3Cg fill='none' stroke='%23184a6f' stroke-opacity='.30' stroke-width='1.2'%3E%3Cpath d='M0 50L42 28 82 48 122 22 164 43 207 18 250 40 295 16 340 35M0 112L42 90 82 110 122 84 164 105 207 80 250 102 295 78 340 97M0 174L42 152 82 172 122 146 164 167 207 142 250 164 295 140 340 159M42 28V90M122 22V84M207 18V80M295 16V78M82 48V110M164 43V105M250 40V102' stroke-dasharray='none'/%3E%3Cpath d='M20 0V250M100 0V250M180 0V250M260 0V250M0 80H340M0 145H340M0 210H340' stroke-opacity='.17' stroke-dasharray='3 5'/%3E%3C/g%3E%3Cg fill='%23d91f26' fill-opacity='.68'%3E%3Ccircle cx='42' cy='28' r='3.4'/%3E%3Ccircle cx='122' cy='22' r='3.4'/%3E%3Ccircle cx='207' cy='18' r='3.4'/%3E%3Ccircle cx='295' cy='16' r='3.4'/%3E%3Ccircle cx='164' cy='105' r='3.4'/%3E%3C/g%3E%3Cg fill='none' stroke='%23d91f26' stroke-opacity='.5' stroke-width='1.25'%3E%3Ccircle cx='122' cy='84' r='8'/%3E%3Ccircle cx='250' cy='102' r='8'/%3E%3C/g%3E%3C/svg%3E");
 background-size:auto,340px 250px;
 background-position:center, right top;
 background-repeat:repeat,repeat;
}
.section.alt{
 background-color:#f7f9fb;
 background-image:
  linear-gradient(135deg,rgba(247,249,251,.74),rgba(247,249,251,.78)),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='230' viewBox='0 0 320 230'%3E%3Cg fill='none' stroke='%23184a6f' stroke-opacity='.32' stroke-width='1.25'%3E%3Cpath d='M0 42L38 20 78 40 116 16 156 36 196 12 238 32 280 10 320 28M0 105L38 83 78 103 116 79 156 99 196 75 238 95 280 73 320 91M0 168L38 146 78 166 116 142 156 162 196 138 238 158 280 136 320 154M38 20V83M116 16V79M196 12V75M280 10V73M78 40V103M156 36V99M238 32V95'/%3E%3Cpath d='M18 0V230M98 0V230M178 0V230M258 0V230M0 72H320M0 137H320M0 202H320' stroke-opacity='.18' stroke-dasharray='3 5'/%3E%3C/g%3E%3Cg fill='%23d91f26' fill-opacity='.7'%3E%3Ccircle cx='38' cy='20' r='3.2'/%3E%3Ccircle cx='116' cy='16' r='3.2'/%3E%3Ccircle cx='196' cy='12' r='3.2'/%3E%3Ccircle cx='280' cy='10' r='3.2'/%3E%3C/g%3E%3C/svg%3E");
 background-size:auto,320px 230px;
 background-position:center,left top;
 background-repeat:repeat,repeat;
}
@media(max-width:760px){
 body{background-size:auto,auto,210px 178px}
 .section,.section.alt{background-size:auto,240px 180px}
}


/* SKR update: header tabel legalitas/tenaga ahli dan kartu pemegang saham */
.legal-table th,
.legal-table.expert-table th {
  background: linear-gradient(110deg, #d91f26 0%, #a7192e 42%, #163a70 100%);
  color: #fff;
}
.shareholder-card {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}
.shareholder-card .icon {
  grid-row: auto;
  margin: 0 auto 4px;
}
.shareholder-card > div:not(.icon) {
  width: 100%;
  text-align: center;
}
.shareholder-card .shareholder-list {
  grid-column: 1;
  width: 100%;
  text-align: left;
}
@media (max-width: 760px) {
  .shareholder-card { grid-template-columns: minmax(0, 1fr); }
  .shareholder-card .shareholder-list { grid-column: 1; }
}

/* V124 — Header tabel navy dengan aksen merah SKR dan jabatan utama struktur organisasi */
.legal-table thead th,
.expert-table thead th{
  background:linear-gradient(180deg,#142d4e 0%,#0b1f3a 100%) !important;
  border-top:4px solid #d91f26 !important;
  color:#fff !important;
}
.skr-org-chart .org-commissioner .org-title,
.skr-org-chart .org-director-utama .org-title,
.skr-org-chart .org-director:not(.org-expert) .org-title{
  background:linear-gradient(180deg,#142d4e 0%,#0b1f3a 100%) !important;
  border-top:4px solid #d91f26 !important;
  padding-top:2px !important;
}


/* ===== V119 - Footer Service Time cards lebih ringkas ===== */
.footer-service-time .service-time-card{
  width:100%;
  max-width:210px;
  box-sizing:border-box;
}
@media(max-width:600px){
  .footer-service-time .service-time-card{max-width:240px;}
}


/* Footer spacing adjustment: beri jarak dari judul perusahaan ke kolom Menu dan Service Time. */
@media (min-width: 761px) {
  .footer-grid > .footer-col:not(.footer-contact) {
    padding-left: 10px;
    box-sizing: border-box;
  }
}
@media (max-width: 760px) {
  .footer-grid > .footer-col:not(.footer-contact) {
    padding-left: 0;
  }
}


/* ===== V120 - Geser kolom Menu dan Service Time lebih ke kanan ===== */
@media (min-width: 761px) {
  .footer-grid > .footer-col:first-child { padding-left: 0 !important; }
  .footer-grid > .footer-col:nth-child(2),
  .footer-grid > .footer-col:nth-child(3) { padding-left: 26px !important; box-sizing: border-box; }
}
@media (max-width: 760px) {
  .footer-grid > .footer-col:nth-child(2),
  .footer-grid > .footer-col:nth-child(3) { padding-left: 0 !important; }
}


/* =========================================================
   SKR — VISI & MISI CARD MODERN (public profile page)
   ========================================================= */
.profile-content .split > div.card {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 2.5vw, 32px);
  border: 1px solid rgba(181, 28, 42, .13);
  border-radius: 20px;
  background: linear-gradient(145deg, #ffffff 0%, #fffafa 58%, #f7f9fc 100%);
  box-shadow: 0 16px 38px rgba(20, 37, 61, .09), 0 3px 10px rgba(181, 28, 42, .035);
  isolation: isolate;
  transition: transform .25s ease, box-shadow .25s ease;
}
.profile-content .split > div.card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(180deg, #c51f32, #163a70);
}
.profile-content .split > div.card::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -54px;
  right: -46px;
  width: 150px;
  height: 150px;
  border: 22px solid rgba(181, 28, 42, .035);
  border-radius: 50%;
  pointer-events: none;
}
.profile-content .split > div.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 21px 44px rgba(20, 37, 61, .13);
}
.profile-content .split > div.card .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  margin-bottom: 11px;
  border: 1px solid rgba(181, 28, 42, .12);
  border-radius: 999px;
  background: #fff0f1;
  color: #a81728;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.profile-content .split > div.card .badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b51c2a;
  box-shadow: 0 0 0 4px rgba(181, 28, 42, .09);
}
.profile-content .split > div.card p,
.profile-content .split > div.card li {
  color: #455468;
  font-size: 13px;
  line-height: 1.9;
}
.profile-content .split > div.card hr {
  border: 0 !important;
  height: 1px;
  margin: 23px 0 !important;
  background: linear-gradient(90deg, rgba(181, 28, 42, .32), rgba(22, 58, 112, .12), transparent);
}
.profile-content .split > div.card ol {
  padding-left: 22px;
  margin-bottom: 0;
}
.profile-content .split > div.card li {
  padding-left: 4px;
  margin: 0 0 9px;
}
.profile-content .split > div.card li::marker {
  color: #b51c2a;
  font-weight: 800;
}
@media (max-width: 760px) {
  .profile-content .split > div.card {
    padding: 22px 20px 22px 24px;
    border-radius: 16px;
  }
  .profile-content .split > div.card:hover { transform: none; }
}


/* ===== SKR HERO VIDEO + TRANSPARENT HOME HEADER (2026-10-23) ===== */
body.home-header{padding-top:0 !important}
body.home-header .site-header{position:fixed !important;top:0 !important;left:0 !important;right:0 !important;width:100% !important;z-index:99999 !important;background:transparent !important;transition:background .28s ease,box-shadow .28s ease}
body.home-header .site-header .nav-wrap{background:transparent !important;box-shadow:none !important;transition:background .28s ease,box-shadow .28s ease}
body.home-header .site-header .brand strong,
body.home-header .site-header .menu > a,
body.home-header .site-header .menu-dropdown-link,
body.home-header .site-header .dropdown-toggle{color:#fff !important;text-shadow:0 1px 8px rgba(0,0,0,.24)}
body.home-header .site-header .menu-toggle{color:#fff !important;border-color:rgba(255,255,255,.55) !important;background:rgba(255,255,255,.08) !important}
body.home-header .site-header.is-scrolled{background:rgba(9,25,39,.96) !important;box-shadow:0 5px 24px rgba(0,0,0,.16)}
body.home-header .site-header.is-scrolled .nav-wrap{background:transparent !important;box-shadow:none !important}
.hero-video{position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(620px,78vh,820px);overflow:hidden;background:#071927;color:#fff;padding:0}
.hero-video .hero-background-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%;z-index:0}.hero-video .hero-background-video{opacity:0;transition:opacity .75s ease}.hero-video .hero-video-a{opacity:1}
.hero-video .hero-video-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(5,20,32,.88) 0%,rgba(5,20,32,.67) 42%,rgba(5,20,32,.22) 78%,rgba(5,20,32,.12) 100%),linear-gradient(0deg,rgba(5,20,32,.24),transparent 40%)}
.hero-video .hero-content{position:relative;z-index:2;width:min(var(--site-max,1180px),var(--site-width,92%));max-width:none;margin-inline:auto;padding:150px 0 92px;color:#fff}
.hero-video .eyebrow,.hero-video h1,.hero-video p{color:#fff}
.hero-video h1{max-width:720px;font-size:clamp(32px,4vw,54px);line-height:1.08;letter-spacing:-.7px;margin:12px 0 20px}
.hero-video p{max-width:610px;font-size:16px;line-height:1.75;margin:0 0 28px}
.hero-video .btns{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:760px){
 body.home-header{padding-top:0 !important}
 .hero-video{min-height:690px;min-height:82svh}
 .hero-video .hero-background-video{object-position:58% center}
 .hero-video .hero-video-overlay{background:linear-gradient(90deg,rgba(5,20,32,.82),rgba(5,20,32,.42)),linear-gradient(0deg,rgba(5,20,32,.3),transparent 50%)}
 .hero-video .hero-content{width:90%;padding:125px 0 68px}
 .hero-video h1{font-size:clamp(30px,8vw,40px);line-height:1.13}
 .hero-video p{font-size:14px;line-height:1.7}
}
@media(prefers-reduced-motion:reduce){.hero-video .hero-background-video{display:none}.hero-video{background:#071927 url('../img/hero-uav-sensing.webp') center/cover no-repeat}}


/* ===== HERO VIDEO RESPONSIVE FIX 2026-10-23 ===== */
html, body { max-width:100%; overflow-x:hidden; }
.home-page .hero.hero-video {
  display:flex; position:relative; width:100%; max-width:none; margin:0; padding:0;
  min-height:clamp(560px, 88svh, 900px); height:auto; overflow:hidden;
  isolation:isolate; background:#071927;
}
.home-page .hero.hero-video > .hero-background-video {
  display:block !important; position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important; min-width:100% !important;
  min-height:100% !important; max-width:none !important; object-fit:cover !important;
  object-position:center center; z-index:0; opacity:1; visibility:visible;
}
.home-page .hero.hero-video > .hero-video-overlay {
  position:absolute; inset:0; z-index:1; pointer-events:none;
}
.home-page .hero.hero-video > .hero-content {
  position:relative; z-index:2; width:min(1180px, calc(100% - 64px));
  max-width:none; margin-inline:auto; box-sizing:border-box;
  padding:clamp(130px, 18vh, 190px) 0 clamp(64px, 9vh, 100px);
}
@media (max-width: 760px) {
  .home-page .hero.hero-video { min-height: min(820px, 92svh); min-height: max(600px, 92svh); }
  .home-page .hero.hero-video > .hero-background-video { object-position:58% center !important; }
  .home-page .hero.hero-video > .hero-content { width:calc(100% - 40px); padding:120px 0 58px; }
  .home-page .hero.hero-video h1 { font-size:clamp(29px, 7.5vw, 40px); overflow-wrap:normal; }
  .home-page .hero.hero-video p { max-width:100%; }
  .home-page .hero.hero-video .btns { gap:10px; }
}
@media (max-width: 380px) {
  .home-page .hero.hero-video > .hero-content { width:calc(100% - 32px); }
  .home-page .hero.hero-video .btn { padding:11px 13px; font-size:11px; }
}


/* ===== SKR HERO FULL VIEWPORT + WHITE SCROLLED HEADER + MODERN NAV HOVER (2026-10-23) ===== */
.home-page .hero.hero-video {
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  height:100vh !important;
  height:100svh !important;
  min-height:100vh !important;
  min-height:100svh !important;
  box-sizing:border-box !important;
}
.home-page .hero.hero-video > .hero-background-video {
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
}
.home-page .hero.hero-video > .hero-content {
  padding-top:clamp(120px, 18vh, 180px) !important;
  padding-bottom:clamp(44px, 8vh, 84px) !important;
}
/* Header at page top remains transparent; after scrolling it becomes white. */
body.home-header .site-header.is-scrolled {
  background:rgba(255,255,255,.97) !important;
  box-shadow:0 6px 26px rgba(7,25,39,.12) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
body.home-header .site-header.is-scrolled .nav-wrap {
  background:transparent !important;
  box-shadow:none !important;
}
body.home-header .site-header.is-scrolled .brand strong,
body.home-header .site-header.is-scrolled .menu > a,
body.home-header .site-header.is-scrolled .menu-dropdown-link,
body.home-header .site-header.is-scrolled .dropdown-toggle {
  color:#102b3b !important;
  text-shadow:none !important;
}
body.home-header .site-header.is-scrolled .menu-toggle {
  color:#102b3b !important;
  border-color:rgba(16,43,59,.22) !important;
  background:rgba(16,43,59,.04) !important;
}
/* Modern navbar hover: smooth pill, subtle lift and red accent. */
.site-header .menu > a,
.site-header .menu-dropdown-head {
  position:relative;
}
.site-header .menu > a,
.site-header .menu .menu-dropdown-link {
  border-radius:999px;
  transition:color .22s ease, background .22s ease, transform .22s ease, box-shadow .22s ease;
}
.site-header .menu > a { padding:10px 14px; }
.site-header .menu > a:hover,
.site-header .menu-dropdown:hover > .menu-dropdown-head .menu-dropdown-link,
.site-header .menu-dropdown.open > .menu-dropdown-head .menu-dropdown-link {
  background:rgba(205,48,55,.14) !important;
  color:#e65b61 !important;
  transform:translateY(-1px);
  box-shadow:inset 0 0 0 1px rgba(230,91,97,.18);
}
body.home-header .site-header:not(.is-scrolled) .menu > a:hover,
body.home-header .site-header:not(.is-scrolled) .menu-dropdown:hover > .menu-dropdown-head .menu-dropdown-link,
body.home-header .site-header:not(.is-scrolled) .menu-dropdown.open > .menu-dropdown-head .menu-dropdown-link {
  color:#fff !important;
  background:rgba(255,255,255,.17) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 5px 18px rgba(0,0,0,.08);
}
.site-header .menu > a.active {
  background:rgba(205,48,55,.12);
}
body.home-header .site-header:not(.is-scrolled) .menu > a.active {
  background:rgba(255,255,255,.13);
}
.site-header .dropdown-menu {
  border:1px solid rgba(255,255,255,.28);
  border-radius:14px;
  padding:8px;
  box-shadow:0 16px 38px rgba(5,20,32,.18);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.site-header .dropdown-menu a {
  border-radius:9px;
  transition:background .18s ease,color .18s ease,padding-left .18s ease;
}
.site-header .dropdown-menu a:hover {
  background:rgba(205,48,55,.10) !important;
  color:#c92e38 !important;
  padding-left:16px;
}
@media (max-width:760px) {
  .home-page .hero.hero-video {
    height:100vh !important;
    height:100svh !important;
    min-height:100vh !important;
    min-height:100svh !important;
  }
  .home-page .hero.hero-video > .hero-content {
    width:calc(100% - 40px) !important;
    padding-top:clamp(112px, 16vh, 150px) !important;
    padding-bottom:34px !important;
  }
  .site-header .menu > a { padding:11px 14px; }
}
@media (prefers-reduced-motion:reduce) {
  .site-header .menu > a,
  .site-header .menu .menu-dropdown-link,
  .site-header .dropdown-menu a { transition:none !important; }
}


/* ===== SKR NAV TOP LINE + CENTERED HERO + DROPDOWN CONTRAST FIX (2026-10-23) ===== */
/* Minimal modern navbar hover: a slim line appears above the item, no pill background. */
.site-header .menu > a,
.site-header .menu .menu-dropdown-head .menu-dropdown-link {
  position:relative;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
  transition:color .22s ease !important;
}
.site-header .menu > a::before,
.site-header .menu .menu-dropdown-head .menu-dropdown-link::before {
  content:"";
  position:absolute;
  top:1px;
  left:14px;
  right:14px;
  height:2px;
  border-radius:2px;
  background:#e3453c;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .24s ease;
}
.site-header .menu > a:hover::before,
.site-header .menu > a:focus-visible::before,
.site-header .menu > a.active::before,
.site-header .menu-dropdown:hover .menu-dropdown-link::before,
.site-header .menu-dropdown:focus-within .menu-dropdown-link::before,
.site-header .menu-dropdown-link.active::before {
  transform:scaleX(1);
}
.site-header .menu > a:hover,
.site-header .menu .menu-dropdown:hover .menu-dropdown-link,
.site-header .menu .menu-dropdown-link:hover,
.site-header .menu > a:focus-visible {
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
}
body.home-header .site-header:not(.is-scrolled) .menu > a:hover,
body.home-header .site-header:not(.is-scrolled) .menu-dropdown:hover .menu-dropdown-link,
body.home-header .site-header:not(.is-scrolled) .menu-dropdown-link:hover {
  color:#fff !important;
  background:transparent !important;
}
body.home-header .site-header.is-scrolled .dropdown-toggle,
body.home-header .site-header.is-scrolled .menu-dropdown:hover .dropdown-toggle,
body.home-header .site-header.is-scrolled .menu-dropdown:focus-within .dropdown-toggle,
body.home-header .site-header.is-scrolled .menu-dropdown:has(.menu-dropdown-link.active) .dropdown-toggle {
  color:#102b3b !important;
  text-shadow:none !important;
  background:transparent !important;
}
/* Keep chevron visible on all white-header pages as well as the scrolled home header. */
body:not(.home-header) .site-header .dropdown-toggle,
.site-header:not(.is-scrolled) .dropdown-toggle { color:inherit; }

/* Center hero copy and CTA group on the fullscreen video. */
.home-page .hero.hero-video > .hero-content {
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  margin-inline:auto !important;
  min-height:100vh !important;
  min-height:100svh !important;
  padding-top:clamp(100px, 14vh, 150px) !important;
  padding-bottom:clamp(36px, 7vh, 72px) !important;
}
.home-page .hero.hero-video > .hero-content h1,
.home-page .hero.hero-video > .hero-content p,
.home-page .hero.hero-video > .hero-content .eyebrow {
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.home-page .hero.hero-video > .hero-content p { max-width:min(760px, 100%) !important; }
.home-page .hero.hero-video > .hero-content .btns,
.home-page .hero.hero-video > .hero-content .hero-buttons {
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  width:100%;
}
@media (max-width:760px) {
  .home-page .hero.hero-video > .hero-content {
    min-height:100vh !important;
    min-height:100svh !important;
    padding-top:105px !important;
    padding-bottom:30px !important;
  }
  .site-header .menu > a::before,
  .site-header .menu .menu-dropdown-head .menu-dropdown-link::before { left:14px; right:auto; width:34px; }
}


/* ===== SKR HERO VIDEO / NAVBAR VISIBILITY FIX 2026-10-23 ===== */
/* Remove the dark gradient layer: show the uploaded hero video without an overlay. */
.home-page .hero.hero-video > .hero-video-overlay,
.hero-video .hero-video-overlay {
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
}
/* Keep the header above all page sections and visible while scrolling. */
body.home-header .site-header {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  width: 100% !important;
  z-index: 100000 !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  display: block !important;
}
body.home-header .site-header.is-scrolled,
body.home-header .site-header.is-scrolled .nav-wrap {
  background: rgba(255,255,255,.98) !important;
  color: #102b3b !important;
  box-shadow: 0 6px 26px rgba(7,25,39,.12) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body.home-header .site-header.is-scrolled .nav-wrap { box-shadow: none !important; }
body.home-header .site-header.is-scrolled .brand strong,
body.home-header .site-header.is-scrolled .menu > a,
body.home-header .site-header.is-scrolled .menu .menu-dropdown-link,
body.home-header .site-header.is-scrolled .menu .dropdown-toggle {
  color: #102b3b !important;
  text-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
body.home-header .site-header:not(.is-scrolled) .brand strong,
body.home-header .site-header:not(.is-scrolled) .menu > a,
body.home-header .site-header:not(.is-scrolled) .menu .menu-dropdown-link,
body.home-header .site-header:not(.is-scrolled) .menu .dropdown-toggle {
  color: #fff !important;
  text-shadow: 0 1px 8px rgba(0,0,0,.35) !important;
}
/* Robust top-line hover: target actual anchors in the current navbar markup. */
.site-header .menu > a,
.site-header .menu .menu-dropdown-head .menu-dropdown-link {
  display: inline-flex !important;
  align-items: center;
  position: relative !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  text-decoration: none !important;
}
.site-header .menu > a::before,
.site-header .menu .menu-dropdown-head .menu-dropdown-link::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 14px !important;
  right: 14px !important;
  width: auto !important;
  height: 2px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 2px !important;
  background: #e3453c !important;
  opacity: 1 !important;
  transform: scaleX(0) !important;
  transform-origin: center !important;
  transition: transform .24s ease !important;
  pointer-events: none !important;
}
.site-header .menu > a:hover::before,
.site-header .menu > a:focus-visible::before,
.site-header .menu > a.active::before,
.site-header .menu .menu-dropdown:hover .menu-dropdown-link::before,
.site-header .menu .menu-dropdown:focus-within .menu-dropdown-link::before,
.site-header .menu .menu-dropdown-link:hover::before,
.site-header .menu .menu-dropdown-link.active::before {
  transform: scaleX(1) !important;
}
.site-header .menu > a:hover,
.site-header .menu .menu-dropdown-link:hover,
.site-header .menu .menu-dropdown:hover .menu-dropdown-link {
  background: transparent !important;
  box-shadow: none !important;
}
@media (max-width: 760px) {
  .site-header .menu > a::before,
  .site-header .menu .menu-dropdown-head .menu-dropdown-link::before {
    left: 14px !important;
    right: auto !important;
    width: 34px !important;
  }
}

/* ===== SKR HERO CONTRAST + NAVBAR WHITE PAGE LINKS + SINGLE-LINE HERO COPY (2026-10-23) ===== */
/* Add a restrained dark tint over the video so the white hero copy stays legible. */
.home-page .hero.hero-video > .hero-video-overlay,
.hero-video .hero-video-overlay {
  display:block !important;
  opacity:1 !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  background:rgba(4, 18, 29, .34) !important;
}
/* On interior pages the header uses white navigation text, including active links. */
body:not(.home-header) .site-header .menu > a,
body:not(.home-header) .site-header .menu .menu-dropdown-link,
body:not(.home-header) .site-header .menu .dropdown-toggle {
  color:#fff !important;
  text-shadow:0 1px 5px rgba(0,0,0,.18) !important;
}
body:not(.home-header) .site-header .menu > a:hover,
body:not(.home-header) .site-header .menu > a:focus-visible,
body:not(.home-header) .site-header .menu > a.active,
body:not(.home-header) .site-header .menu .menu-dropdown-link:hover,
body:not(.home-header) .site-header .menu .menu-dropdown-link.active,
body:not(.home-header) .site-header .menu .menu-dropdown:hover .menu-dropdown-link,
body:not(.home-header) .site-header .menu .dropdown-toggle:hover {
  color:#fff !important;
}
body:not(.home-header) .site-header .menu .dropdown-toggle { color:#fff !important; }
/* Keep each hero text block on one line on wider screens; scale responsively. */
@media (min-width: 761px) {
  .home-page .hero.hero-video > .hero-content h1,
  .home-page .hero.hero-video > .hero-content p,
  .home-page .hero.hero-video > .hero-content .eyebrow {
    white-space:nowrap !important;
    max-width:100% !important;
  }
  .home-page .hero.hero-video > .hero-content h1 {
    font-size:clamp(25px, 3.05vw, 43px) !important;
    letter-spacing:-.55px;
  }
  .home-page .hero.hero-video > .hero-content p {
    font-size:clamp(13px, 1.18vw, 16px) !important;
  }
  .home-page .hero.hero-video > .hero-content .btns,
  .home-page .hero.hero-video > .hero-content .hero-buttons { flex-wrap:nowrap !important; }
}
@media (max-width: 760px) {
  .home-page .hero.hero-video > .hero-video-overlay { background:rgba(4,18,29,.42) !important; }
  .home-page .hero.hero-video > .hero-content h1,
  .home-page .hero.hero-video > .hero-content p { white-space:normal !important; }
}


/* ===== SKR NAV ACTIVE VISIBILITY + HERO TYPOGRAPHY + CTA HOVER (2026-10-23) ===== */
/* Prevent the active/clicked navigation item from turning white on a light header. */
body.home-header .site-header.is-scrolled .menu > a,
body.home-header .site-header.is-scrolled .menu .menu-dropdown-link,
body.home-header .site-header.is-scrolled .menu .dropdown-toggle,
body.home-header .site-header.is-scrolled .menu > a.active,
body.home-header .site-header.is-scrolled .menu .menu-dropdown-link.active,
body.home-header .site-header.is-scrolled .menu .menu-dropdown.active > .menu-dropdown-head .menu-dropdown-link,
body.home-header .site-header.is-scrolled .menu > a:hover,
body.home-header .site-header.is-scrolled .menu .menu-dropdown-link:hover,
body.home-header .site-header.is-scrolled .menu .menu-dropdown:hover .menu-dropdown-link,
body.home-header .site-header.is-scrolled .menu .dropdown-toggle:hover,
body.home-header .site-header.is-scrolled .menu > a:focus-visible,
body.home-header .site-header.is-scrolled .menu .menu-dropdown-link:focus-visible {
  color:#102b3b !important;
  -webkit-text-fill-color:#102b3b !important;
  text-shadow:none !important;
  opacity:1 !important;
  visibility:visible !important;
}
body.home-header .site-header:not(.is-scrolled) .menu > a,
body.home-header .site-header:not(.is-scrolled) .menu .menu-dropdown-link,
body.home-header .site-header:not(.is-scrolled) .menu .dropdown-toggle,
body.home-header .site-header:not(.is-scrolled) .menu > a.active,
body.home-header .site-header:not(.is-scrolled) .menu .menu-dropdown-link.active,
body.home-header .site-header:not(.is-scrolled) .menu > a:hover,
body.home-header .site-header:not(.is-scrolled) .menu .menu-dropdown-link:hover,
body.home-header .site-header:not(.is-scrolled) .menu .dropdown-toggle:hover {
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  text-shadow:0 1px 8px rgba(0,0,0,.35) !important;
}
/* Interior pages have a dark/colored header: keep all nav states consistently readable. */
body:not(.home-header) .site-header .menu > a,
body:not(.home-header) .site-header .menu .menu-dropdown-link,
body:not(.home-header) .site-header .menu .dropdown-toggle,
body:not(.home-header) .site-header .menu > a.active,
body:not(.home-header) .site-header .menu .menu-dropdown-link.active,
body:not(.home-header) .site-header .menu > a:hover,
body:not(.home-header) .site-header .menu .menu-dropdown-link:hover,
body:not(.home-header) .site-header .menu .dropdown-toggle:hover,
body:not(.home-header) .site-header .menu > a:focus-visible,
body:not(.home-header) .site-header .menu .menu-dropdown-link:focus-visible {
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  opacity:1 !important;
  visibility:visible !important;
}
/* Precise centered hero composition; preserve one-line copy on desktop, allow safe wrapping on narrow screens. */
body.home-page .hero.hero-video {
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-height:100vh !important;
  min-height:100svh !important;
  height:100vh !important;
  height:100svh !important;
  overflow:hidden !important;
}
body.home-page .hero.hero-video > .hero-background-video {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
}
body.home-page .hero.hero-video > .hero-video-overlay {
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  background:rgba(4,18,29,.34) !important;
  pointer-events:none !important;
}
body.home-page .hero.hero-video > .hero-content {
  position:relative !important;
  z-index:2 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  width:min(1240px, calc(100% - 64px)) !important;
  max-width:1240px !important;
  min-height:100% !important;
  margin:0 auto !important;
  padding:clamp(112px,15vh,160px) 0 clamp(44px,7vh,78px) !important;
  box-sizing:border-box !important;
}
body.home-page .hero.hero-video > .hero-content .eyebrow {
  width:100% !important;
  margin:0 auto clamp(12px,1.5vh,18px) !important;
  text-align:center !important;
  font-size:clamp(10px,.95vw,13px) !important;
  line-height:1.35 !important;
  letter-spacing:clamp(1px,.18vw,2px) !important;
}
body.home-page .hero.hero-video > .hero-content h1 {
  width:100% !important;
  max-width:100% !important;
  margin:0 auto clamp(16px,2vh,24px) !important;
  text-align:center !important;
  font-size:clamp(25px,3.05vw,44px) !important;
  line-height:1.16 !important;
  letter-spacing:clamp(-.7px,-.045vw,-.2px) !important;
  text-wrap:balance;
}
body.home-page .hero.hero-video > .hero-content p {
  width:100% !important;
  max-width:1000px !important;
  margin:0 auto clamp(24px,3.2vh,36px) !important;
  text-align:center !important;
  font-size:clamp(13px,1.15vw,16px) !important;
  line-height:1.65 !important;
}
body.home-page .hero.hero-video > .hero-content .btns {
  display:flex !important;
  flex-direction:row !important;
  justify-content:center !important;
  align-items:center !important;
  gap:12px !important;
  width:100% !important;
  margin:0 auto !important;
}
/* Modern, consistent hover treatment for both hero actions. */
body.home-page .hero.hero-video > .hero-content .btns .btn {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  min-height:48px !important;
  padding:13px 23px !important;
  border-radius:8px !important;
  border:1px solid rgba(255,255,255,.78) !important;
  font-weight:700 !important;
  text-decoration:none !important;
  transition:transform .24s ease,background-color .24s ease,color .24s ease,border-color .24s ease,box-shadow .24s ease !important;
  will-change:transform;
}
body.home-page .hero.hero-video > .hero-content .btns .btn-primary {
  color:#fff !important;
  background:#cf3038 !important;
  border-color:#cf3038 !important;
  box-shadow:0 7px 18px rgba(151,24,32,.2) !important;
}
body.home-page .hero.hero-video > .hero-content .btns .btn-light {
  color:#102b3b !important;
  background:#fff !important;
  border-color:#fff !important;
}
body.home-page .hero.hero-video > .hero-content .btns .btn:hover,
body.home-page .hero.hero-video > .hero-content .btns .btn:focus-visible {
  transform:translateY(-3px) !important;
  box-shadow:0 13px 28px rgba(0,0,0,.24) !important;
}
body.home-page .hero.hero-video > .hero-content .btns .btn-primary:hover,
body.home-page .hero.hero-video > .hero-content .btns .btn-primary:focus-visible {
  background:#a9212b !important;
  border-color:#a9212b !important;
}
/* Hubungi Kami: modern hover without red color shift. */
body.home-page .hero.hero-video > .hero-content .btns .btn-light:hover,
body.home-page .hero.hero-video > .hero-content .btns .btn-light:focus-visible {
  color:#102b3b !important;
  background:#f2f5f7 !important;
  border-color:#dce3e8 !important;
  box-shadow:0 13px 28px rgba(0,0,0,.24) !important;
}
body.home-page .hero.hero-video > .hero-content .btns .btn:focus-visible {
  outline:2px solid #fff !important;
  outline-offset:4px !important;
}
@media (min-width:761px) {
  body.home-page .hero.hero-video > .hero-content h1,
  body.home-page .hero.hero-video > .hero-content p,
  body.home-page .hero.hero-video > .hero-content .eyebrow { white-space:nowrap !important; }
  body.home-page .hero.hero-video > .hero-content h1 { font-size:clamp(24px,2.85vw,42px) !important; }
  body.home-page .hero.hero-video > .hero-content p { font-size:clamp(12px,1.05vw,15px) !important; }
}
@media (max-width:1000px) and (min-width:761px) {
  body.home-page .hero.hero-video > .hero-content { width:calc(100% - 44px) !important; }
  body.home-page .hero.hero-video > .hero-content h1 { font-size:clamp(23px,2.7vw,31px) !important; }
  body.home-page .hero.hero-video > .hero-content p { font-size:clamp(11px,1.2vw,13px) !important; }
}
@media (max-width:760px) {
  body.home-page .hero.hero-video { min-height:100svh !important; height:auto !important; }
  body.home-page .hero.hero-video > .hero-content {
    width:calc(100% - 36px) !important;
    min-height:100svh !important;
    padding:110px 0 42px !important;
  }
  body.home-page .hero.hero-video > .hero-content .eyebrow,
  body.home-page .hero.hero-video > .hero-content h1,
  body.home-page .hero.hero-video > .hero-content p { white-space:normal !important; }
  body.home-page .hero.hero-video > .hero-content h1 { font-size:clamp(27px,7.2vw,38px) !important; line-height:1.14 !important; }
  body.home-page .hero.hero-video > .hero-content p { max-width:560px !important; font-size:14px !important; line-height:1.6 !important; }
  body.home-page .hero.hero-video > .hero-content .btns { flex-wrap:wrap !important; gap:10px !important; }
  body.home-page .hero.hero-video > .hero-content .btns .btn { min-height:46px !important; padding:12px 17px !important; }
}
@media (prefers-reduced-motion:reduce) {
  body.home-page .hero.hero-video > .hero-content .btns .btn { transition:none !important; }
}

/* ===== FIX: readable navbar on white interior-page header (2026-10-23) ===== */
body:not(.home-header) .site-header,
body:not(.home-header) .site-header .nav-wrap {
  background: rgba(255,255,255,.97) !important;
}
body:not(.home-header) .site-header .brand strong,
body:not(.home-header) .site-header .menu > a,
body:not(.home-header) .site-header .menu .menu-dropdown-link,
body:not(.home-header) .site-header .menu .dropdown-toggle,
body:not(.home-header) .site-header .menu > a.active,
body:not(.home-header) .site-header .menu .menu-dropdown-link.active,
body:not(.home-header) .site-header .menu > a:hover,
body:not(.home-header) .site-header .menu .menu-dropdown-link:hover,
body:not(.home-header) .site-header .menu .dropdown-toggle:hover,
body:not(.home-header) .site-header .menu > a:focus-visible,
body:not(.home-header) .site-header .menu .menu-dropdown-link:focus-visible {
  color: #1b2733 !important;
  -webkit-text-fill-color: #1b2733 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
body:not(.home-header) .site-header .menu > a.active::before,
body:not(.home-header) .site-header .menu .menu-dropdown-link.active::before {
  opacity: 1 !important;
}
body:not(.home-header) .site-header .menu-toggle { color: #1b2733 !important; }


/* SKR V93 — layanan dropdown clean, hero typography precise, scroll-down cue */
/* Remove the filled/transparent box effect from the Layanan navigation item. */
.site-header .menu-dropdown-link,
.site-header .menu-dropdown-link:hover,
.site-header .menu-dropdown-link:focus,
.site-header .menu-dropdown-link.active,
.site-header .menu-dropdown.active .menu-dropdown-link {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.site-header .menu-dropdown-link::before,
.site-header .menu-dropdown-link::after {
  background: transparent !important;
  box-shadow: none !important;
}
.site-header .menu-dropdown-link:hover,
.site-header .menu-dropdown-link:focus-visible {
  color: inherit;
}
/* Keep the modern top-line hover as the only nav highlight. */
.site-header .menu-dropdown-link::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--red, #e43d21) !important;
  transform: translateX(-50%);
  transition: width .22s ease;
}
.site-header .menu-dropdown-link:hover::before,
.site-header .menu-dropdown-link:focus-visible::before,
.site-header .menu-dropdown-link.active::before {
  width: calc(100% - 18px);
}
.site-header .menu-dropdown-link { position: relative; }

/* Smaller, balanced Hero typography while preserving centered alignment. */
.home-page .hero .eyebrow {
  font-size: clamp(10px, .78vw, 12px);
  letter-spacing: clamp(1.5px, .18vw, 2.6px);
}
.home-page .hero h1 {
  max-width: 1120px;
  margin-inline: auto;
  font-size: clamp(27px, 3.05vw, 43px);
  line-height: 1.14;
  letter-spacing: -.45px;
  text-align: center;
  text-wrap: balance;
}
.home-page .hero p {
  max-width: 1000px;
  margin-inline: auto;
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.65;
  text-align: center;
}
.home-page .hero .btns { justify-content: center; }

/* Animated down-arrow cue (not a mouse-shaped icon). */
.hero-scroll-down {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 24px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 50%;
  background: rgba(7,25,39,.16);
  text-decoration: none;
  transform: translateX(-50%);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
  animation: skrScrollNudge 1.8s ease-in-out infinite;
}
.hero-scroll-down i { font-size: 16px; line-height: 1; }
.hero-scroll-down:hover,
.hero-scroll-down:focus-visible {
  background: var(--red, #e43d21);
  border-color: var(--red, #e43d21);
  color: #fff;
  animation-play-state: paused;
  outline: none;
}
@keyframes skrScrollNudge {
  0%, 100% { margin-bottom: 0; }
  50% { margin-bottom: -7px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-down { animation: none; }
}
@media (max-width: 760px) {
  .home-page .hero h1 { font-size: clamp(25px, 6.2vw, 34px); line-height: 1.15; }
  .home-page .hero p { font-size: 14px; }
  .hero-scroll-down { bottom: 15px; width: 38px; height: 38px; }
}

/* ===== SKR V54: definitive dropdown, hero typography and split-line scroll cue ===== */
.site-header .menu .menu-dropdown,
.site-header .menu .menu-dropdown-head,
.site-header .menu .menu-dropdown-head:hover,
.site-header .menu .menu-dropdown-head:focus-within,
.site-header .menu .menu-dropdown-link,
.site-header .menu .menu-dropdown-link:hover,
.site-header .menu .menu-dropdown-link:focus,
.site-header .menu .menu-dropdown-link:focus-visible,
.site-header .menu .menu-dropdown-link.active,
.site-header .menu .dropdown-toggle,
.site-header .menu .dropdown-toggle:hover,
.site-header .menu .dropdown-toggle:focus,
.site-header .menu .dropdown-toggle:focus-visible,
.site-header .menu .menu-dropdown:hover,
.site-header .menu .menu-dropdown:focus-within,
.site-header .menu .menu-dropdown.active {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none;
}
.site-header .menu .menu-dropdown-link,
.site-header .menu .dropdown-toggle { border: 0 !important; }
.site-header .menu .menu-dropdown-link::after { display:none !important; }
.site-header .menu .menu-dropdown-head { border-radius:0 !important; }

/* Precisely control the hero font sizes; override earlier legacy rules. */
body.home-page .hero.hero-video > .hero-content h1 {
  font-size: clamp(25px, 2.45vw, 36px) !important;
  line-height: 1.16 !important;
  letter-spacing: -.35px !important;
  max-width: 1100px !important;
}
body.home-page .hero.hero-video > .hero-content p {
  font-size: clamp(12px, .92vw, 14px) !important;
  line-height: 1.65 !important;
  max-width: 960px !important;
}
@media (max-width:1000px) and (min-width:761px) {
  body.home-page .hero.hero-video > .hero-content h1 { font-size: clamp(23px, 2.35vw, 29px) !important; }
  body.home-page .hero.hero-video > .hero-content p { font-size: 12px !important; }
}
@media (max-width:760px) {
  body.home-page .hero.hero-video > .hero-content h1 { font-size: clamp(25px, 6.4vw, 33px) !important; }
  body.home-page .hero.hero-video > .hero-content p { font-size: 13px !important; }
}

/* Split vertical lines with an animated up/down scroll glyph between them. */
.hero-scroll-down {
  width: 28px !important;
  height: 72px !important;
  bottom: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
  transform: translateX(-50%) !important;
  color: #fff !important;
}
.hero-scroll-down::before,
.hero-scroll-down::after {
  content: "";
  display: block;
  width: 1px;
  height: 22px;
  flex: 0 0 22px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 7px rgba(0,0,0,.22);
}
.hero-scroll-down i {
  display: block;
  font-size: 15px !important;
  line-height: 1 !important;
  animation: skrScrollGlyphBob 1.25s ease-in-out infinite !important;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
}
.hero-scroll-down:hover,
.hero-scroll-down:focus-visible {
  background: transparent !important;
  border: 0 !important;
  color: #fff !important;
  transform: translateX(-50%) !important;
}
.hero-scroll-down:hover::before,
.hero-scroll-down:hover::after { background: #fff; }
@keyframes skrScrollGlyphBob {
  0%,100% { transform: translateY(-4px); }
  50% { transform: translateY(4px); }
}
@media (max-width:760px) {
  .hero-scroll-down { bottom: 13px !important; height: 60px !important; }
  .hero-scroll-down::before,.hero-scroll-down::after { height:18px; flex-basis:18px; }
}
@media (prefers-reduced-motion: reduce) { .hero-scroll-down i { animation:none !important; } }


/* SKR: single down arrow with a gentle up/down animation in the main hero. */
.hero-scroll-down {
  width: 44px !important;
  height: 44px !important;
  bottom: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  transform: translateX(-50%) !important;
  animation: skrSingleArrowBob 1.35s ease-in-out infinite !important;
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.hero-scroll-down::before,
.hero-scroll-down::after { content: none !important; display: none !important; }
.hero-scroll-down i {
  display: block !important;
  font-size: 23px !important;
  line-height: 1 !important;
  animation: none !important;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.45));
}
.hero-scroll-down:hover,
.hero-scroll-down:focus-visible {
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
  transform: translateX(-50%) !important;
}
@keyframes skrSingleArrowBob {
  0%, 100% { translate: 0 -4px; }
  50% { translate: 0 5px; }
}
@media (max-width:760px) { .hero-scroll-down { bottom: 14px !important; width: 42px !important; height: 42px !important; } }
@media (prefers-reduced-motion: reduce) { .hero-scroll-down { animation: none !important; } }


/* SKR FIX: hilangkan kotak/lapisan transparan pada menu Layanan; pertahankan garis merah indikator hover */
.site-header .menu .menu-dropdown-head,
.site-header .menu .menu-dropdown-head:hover,
.site-header .menu .menu-dropdown-head:focus-within,
.site-header .menu .menu-dropdown-link,
.site-header .menu .menu-dropdown-link:hover,
.site-header .menu .menu-dropdown-link:focus,
.site-header .menu .menu-dropdown-link:focus-visible,
.site-header .menu .menu-dropdown-link.active,
.site-header .menu .menu-dropdown.active > .menu-dropdown-head .menu-dropdown-link,
.site-header .menu .menu-dropdown:hover > .menu-dropdown-head .menu-dropdown-link,
.site-header .menu .menu-dropdown.open > .menu-dropdown-head .menu-dropdown-link,
.site-header .menu .dropdown-toggle,
.site-header .menu .dropdown-toggle:hover,
.site-header .menu .dropdown-toggle:focus,
.site-header .menu .dropdown-toggle:focus-visible,
.site-header .menu .menu-dropdown:has(.menu-dropdown-link.active) .dropdown-toggle {
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
}
.site-header .menu .menu-dropdown-link {
  border-radius: 0 !important;
}

/* ===== FIX FINAL: remove all translucent box surfaces from Layanan nav item ===== */
.site-header .menu .menu-dropdown,
.site-header .menu .menu-dropdown-head,
.site-header .menu .menu-dropdown-head:hover,
.site-header .menu .menu-dropdown-head:focus-within,
.site-header .menu .menu-dropdown-link,
.site-header .menu .menu-dropdown-link:hover,
.site-header .menu .menu-dropdown-link:focus,
.site-header .menu .menu-dropdown-link:focus-visible,
.site-header .menu .menu-dropdown-link.active,
.site-header .menu .menu-dropdown:hover .menu-dropdown-head,
.site-header .menu .menu-dropdown.open .menu-dropdown-head,
.site-header .menu .menu-dropdown .dropdown-toggle,
.site-header .menu .menu-dropdown:hover .dropdown-toggle,
.site-header .menu .menu-dropdown.open .dropdown-toggle,
.site-header .menu .menu-dropdown:has(.menu-dropdown-link.active) .dropdown-toggle {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: 0 !important;
}
.site-header .menu .menu-dropdown-link.active,
.site-header .menu .menu-dropdown:hover .menu-dropdown-link,
.site-header .menu .menu-dropdown.open .menu-dropdown-link {
  color: inherit;
}


/* ===== DEFINITIVE FIX: Layanan navbar must have no translucent box ===== */
.site-header .menu .menu-dropdown,
.site-header .menu .menu-dropdown > .menu-dropdown-head,
.site-header .menu .menu-dropdown > .menu-dropdown-head::before,
.site-header .menu .menu-dropdown > .menu-dropdown-head::after,
.site-header .menu .menu-dropdown > .menu-dropdown-head .menu-dropdown-link,
.site-header .menu .menu-dropdown > .menu-dropdown-head .menu-dropdown-link::after,
.site-header .menu .menu-dropdown > .menu-dropdown-head .dropdown-toggle,
.site-header .menu .menu-dropdown:hover,
.site-header .menu .menu-dropdown:focus-within,
.site-header .menu .menu-dropdown.open,
.site-header .menu .menu-dropdown:hover > .menu-dropdown-head,
.site-header .menu .menu-dropdown:focus-within > .menu-dropdown-head,
.site-header .menu .menu-dropdown.open > .menu-dropdown-head,
.site-header .menu .menu-dropdown:hover > .menu-dropdown-head .menu-dropdown-link,
.site-header .menu .menu-dropdown:focus-within > .menu-dropdown-head .menu-dropdown-link,
.site-header .menu .menu-dropdown.open > .menu-dropdown-head .menu-dropdown-link,
.site-header .menu .menu-dropdown.active > .menu-dropdown-head .menu-dropdown-link,
.site-header .menu .menu-dropdown:has(.menu-dropdown-link.active) > .menu-dropdown-head .dropdown-toggle {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
}
.site-header .menu .menu-dropdown > .menu-dropdown-head .menu-dropdown-link {
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
}
.site-header .menu .menu-dropdown > .menu-dropdown-head .menu-dropdown-link::before {
  /* Retain only the thin red top hover/active indicator. */
  background: #e3453c !important;
  box-shadow: none !important;
}
.site-header .menu .menu-dropdown > .menu-dropdown-head .dropdown-toggle {
  border: 0 !important;
  border-radius: 0 !important;
}
/* Prevent inherited hover styles from painting a pill on the Layanan wrapper. */
.site-header .menu .menu-dropdown:hover > .menu-dropdown-head .menu-dropdown-link,
.site-header .menu .menu-dropdown.open > .menu-dropdown-head .menu-dropdown-link,
.site-header .menu .menu-dropdown.active > .menu-dropdown-head .menu-dropdown-link {
  color: inherit !important;
}


/* FINAL FIX: remove the translucent rectangle behind the Layanan label and chevron. */
.site-header .menu .menu-dropdown,
.site-header .menu .menu-dropdown:hover,
.site-header .menu .menu-dropdown:focus-within,
.site-header .menu .menu-dropdown.open,
.site-header .menu .menu-dropdown.active,
.site-header .menu .menu-dropdown > .menu-dropdown-head,
.site-header .menu .menu-dropdown:hover > .menu-dropdown-head,
.site-header .menu .menu-dropdown.open > .menu-dropdown-head,
.site-header .menu .menu-dropdown.active > .menu-dropdown-head,
.site-header .menu .menu-dropdown > .menu-dropdown-head > .menu-dropdown-link,
.site-header .menu .menu-dropdown > .menu-dropdown-head > .menu-dropdown-link:hover,
.site-header .menu .menu-dropdown > .menu-dropdown-head > .menu-dropdown-link:focus,
.site-header .menu .menu-dropdown > .menu-dropdown-head > .menu-dropdown-link:active,
.site-header .menu .menu-dropdown > .menu-dropdown-head > .menu-dropdown-link.active,
.site-header .menu .menu-dropdown > .menu-dropdown-head > .dropdown-toggle,
.site-header .menu .menu-dropdown > .menu-dropdown-head > .dropdown-toggle:hover,
.site-header .menu .menu-dropdown > .menu-dropdown-head > .dropdown-toggle:focus,
.site-header .menu .menu-dropdown > .menu-dropdown-head > .dropdown-toggle:active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: 0 !important;
  filter: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
.site-header .menu .menu-dropdown > .menu-dropdown-head > .menu-dropdown-link::after {
  background: transparent !important;
  box-shadow: none !important;
}
.site-header .menu .menu-dropdown > .menu-dropdown-head > .menu-dropdown-link::before {
  background: #e3453c !important;
  box-shadow: none !important;
}

/* SKR — Modern hero scroll cue: single animated down arrow */
.home-page .hero .hero-scroll-down,
.hero.hero-video .hero-scroll-down {
  position: absolute !important;
  z-index: 8 !important;
  left: 50% !important;
  bottom: 24px !important;
  width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  border-radius: 50% !important;
  background: rgba(12,24,37,.20) !important;
  background-image: none !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.14) !important;
  color: #fff !important;
  text-decoration: none !important;
  transform: translateX(-50%) !important;
  animation: skrModernScrollFloat 1.65s ease-in-out infinite !important;
  transition: background-color .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}
.home-page .hero .hero-scroll-down::before,
.home-page .hero .hero-scroll-down::after,
.hero.hero-video .hero-scroll-down::before,
.hero.hero-video .hero-scroll-down::after {
  content: none !important;
  display: none !important;
}
.home-page .hero .hero-scroll-down i,
.hero.hero-video .hero-scroll-down i {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 19px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  color: currentColor !important;
  filter: none !important;
  animation: none !important;
}
.home-page .hero .hero-scroll-down:hover,
.home-page .hero .hero-scroll-down:focus-visible,
.hero.hero-video .hero-scroll-down:hover,
.hero.hero-video .hero-scroll-down:focus-visible {
  color: #fff !important;
  background: rgba(228,61,33,.94) !important;
  border-color: rgba(255,255,255,.95) !important;
  box-shadow: 0 5px 20px rgba(0,0,0,.24) !important;
  outline: 2px solid rgba(255,255,255,.45) !important;
  outline-offset: 3px !important;
}
@keyframes skrModernScrollFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 6px; }
}
@media (max-width:760px) {
  .home-page .hero .hero-scroll-down,
  .hero.hero-video .hero-scroll-down { width: 42px !important; height: 42px !important; bottom: 15px !important; }
  .home-page .hero .hero-scroll-down i,
  .hero.hero-video .hero-scroll-down i { font-size: 17px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .hero .hero-scroll-down,
  .hero.hero-video .hero-scroll-down { animation: none !important; }
}


/* SKR HERO SCROLL — vertical line + animated arrow (2026-10-23) */
.home-page .hero .hero-scroll-down,
.hero.hero-video .hero-scroll-down {
  width: 34px !important;
  height: 66px !important;
  min-width: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  outline: none !important;
  color: #fff !important;
  transform: translateX(-50%) !important;
  animation: skrScrollCueFloat 1.7s ease-in-out infinite !important;
  overflow: visible !important;
}
.home-page .hero .hero-scroll-down i,
.hero.hero-video .hero-scroll-down i { display:none !important; }
.home-page .hero .hero-scroll-down::before,
.hero.hero-video .hero-scroll-down::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  width: 1px !important;
  height: 43px !important;
  background: linear-gradient(to bottom, rgba(255,255,255,.15), rgba(255,255,255,.95)) !important;
  box-shadow: 0 0 8px rgba(255,255,255,.22) !important;
  transform: translateX(-50%) !important;
  border: 0 !important;
}
.home-page .hero .hero-scroll-down::after,
.hero.hero-video .hero-scroll-down::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 35px !important;
  width: 10px !important;
  height: 10px !important;
  border-right: 2px solid #fff !important;
  border-bottom: 2px solid #fff !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: 2px 2px 7px rgba(0,0,0,.2) !important;
  transform: translateX(-50%) rotate(45deg) !important;
}
.home-page .hero .hero-scroll-down:hover,
.home-page .hero .hero-scroll-down:focus-visible,
.hero.hero-video .hero-scroll-down:hover,
.hero.hero-video .hero-scroll-down:focus-visible {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: #fff !important;
}
.home-page .hero .hero-scroll-down:hover::before,
.hero.hero-video .hero-scroll-down:hover::before {
  background: linear-gradient(to bottom, rgba(255,255,255,.35), #e43d21) !important;
  box-shadow: 0 0 12px rgba(228,61,33,.6) !important;
}
.home-page .hero .hero-scroll-down:hover::after,
.hero.hero-video .hero-scroll-down:hover::after {
  border-color: #e43d21 !important;
  filter: drop-shadow(0 0 4px rgba(228,61,33,.55)) !important;
}
@keyframes skrScrollCueFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 7px; }
}
@media(max-width:760px) {
  .home-page .hero .hero-scroll-down,
  .hero.hero-video .hero-scroll-down { width:30px !important; min-width:30px !important; height:58px !important; bottom:15px !important; }
  .home-page .hero .hero-scroll-down::before,
  .hero.hero-video .hero-scroll-down::before { height:37px !important; }
  .home-page .hero .hero-scroll-down::after,
  .hero.hero-video .hero-scroll-down::after { top:30px !important; width:9px !important; height:9px !important; }
}
@media(prefers-reduced-motion: reduce) {
  .home-page .hero .hero-scroll-down,
  .hero.hero-video .hero-scroll-down { animation:none !important; }
}


/* SKR FIX: force visible, smooth vertical scroll cue animation */
@keyframes skrScrollCueFloatFix {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}
.home-page .hero .hero-scroll-down,
.hero.hero-video .hero-scroll-down {
  animation: skrScrollCueFloatFix 1.45s ease-in-out infinite !important;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  /* Keep this cue animated as requested, even if the OS motion preference is enabled. */
  .home-page .hero .hero-scroll-down,
  .hero.hero-video .hero-scroll-down {
    animation: skrScrollCueFloatFix 1.45s ease-in-out infinite !important;
  }
}


/* SKR verified scroll cue animation override: animate the visible pieces directly. */
@keyframes skrScrollLinePulseVerified {
  0%, 100% { opacity: .55; transform: scaleY(.88); }
  50% { opacity: 1; transform: scaleY(1); }
}
@keyframes skrScrollArrowBounceVerified {
  0%, 100% { transform: translateY(-3px); opacity: .78; }
  50% { transform: translateY(5px); opacity: 1; }
}
.home-page .hero .hero-scroll-down,
.hero.hero-video .hero-scroll-down {
  animation: none !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
}
.home-page .hero .hero-scroll-down::before,
.hero.hero-video .hero-scroll-down::before {
  transform-origin: top center !important;
  animation: skrScrollLinePulseVerified 1.25s ease-in-out infinite !important;
}
.home-page .hero .hero-scroll-down::after,
.hero.hero-video .hero-scroll-down::after {
  transform-origin: top center !important;
  animation: skrScrollLinePulseVerified 1.25s ease-in-out infinite .12s !important;
}
.home-page .hero .hero-scroll-down > i,
.hero.hero-video .hero-scroll-down > i {
  display: block !important;
  animation: skrScrollArrowBounceVerified .9s ease-in-out infinite !important;
  will-change: transform, opacity !important;
}
@media (prefers-reduced-motion: reduce) {
  .home-page .hero .hero-scroll-down::before,
  .hero.hero-video .hero-scroll-down::before,
  .home-page .hero .hero-scroll-down::after,
  .hero.hero-video .hero-scroll-down::after,
  .home-page .hero .hero-scroll-down > i,
  .hero.hero-video .hero-scroll-down > i {
    animation-duration: 1.4s !important;
    animation-iteration-count: infinite !important;
  }
}


/* SKR final hero scroll icon shape fix: clean CSS arrowhead + animated line */
.home-page .hero .hero-scroll-down,
.hero.hero-video .hero-scroll-down {
  width: 24px !important;
  min-width: 24px !important;
  height: 62px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: translateX(-50%) !important;
  animation: none !important;
}
.home-page .hero .hero-scroll-down > i,
.hero.hero-video .hero-scroll-down > i {
  display: none !important;
}
.home-page .hero .hero-scroll-down::before,
.hero.hero-video .hero-scroll-down::before {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  top: 0 !important;
  left: 50% !important;
  width: 1px !important;
  height: 43px !important;
  border: 0 !important;
  background: linear-gradient(to bottom, rgba(255,255,255,.25), #fff) !important;
  box-shadow: 0 0 7px rgba(255,255,255,.2) !important;
  transform: translateX(-50%) !important;
  transform-origin: top center !important;
  animation: skrFinalLinePulse 1.5s ease-in-out infinite !important;
}
.home-page .hero .hero-scroll-down::after,
.hero.hero-video .hero-scroll-down::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  top: 35px !important;
  left: 50% !important;
  width: 9px !important;
  height: 9px !important;
  border: 0 !important;
  border-right: 2px solid #fff !important;
  border-bottom: 2px solid #fff !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: 2px 2px 5px rgba(0,0,0,.15) !important;
  transform: translateX(-50%) rotate(45deg) !important;
  transform-origin: center !important;
  animation: skrFinalArrowBounce 1.15s ease-in-out infinite !important;
}
@keyframes skrFinalLinePulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
@keyframes skrFinalArrowBounce {
  0%, 100% { transform: translate(-50%, -2px) rotate(45deg); opacity: .75; }
  50% { transform: translate(-50%, 5px) rotate(45deg); opacity: 1; }
}
.home-page .hero .hero-scroll-down:hover::after,
.hero.hero-video .hero-scroll-down:hover::after {
  border-color: #e43d21 !important;
  filter: drop-shadow(0 0 4px rgba(228,61,33,.55)) !important;
}
@media (max-width: 760px) {
  .home-page .hero .hero-scroll-down,
  .hero.hero-video .hero-scroll-down { height: 54px !important; }
  .home-page .hero .hero-scroll-down::before,
  .hero.hero-video .hero-scroll-down::before { height: 36px !important; }
  .home-page .hero .hero-scroll-down::after,
  .hero.hero-video .hero-scroll-down::after { top: 29px !important; }
}


/* SKR: single SVG with three clearly separated chevrons; disable legacy duplicate icon layers. */
.home-page .hero .hero-scroll-down::before,
.home-page .hero .hero-scroll-down::after,
.home-page .hero .hero-scroll-down > i { content:none !important; display:none !important; }
.home-page .hero .hero-scroll-down {
  position:absolute; z-index:4; left:50%; bottom:25px;
  width:54px; height:60px; padding:0;
  display:flex; align-items:center; justify-content:center;
  color:#078acb; border:0; border-radius:0; background:transparent;
  box-shadow:none; text-decoration:none; transform:translateX(-50%);
  animation:skrChevronFloat 1.55s ease-in-out infinite;
  transition:color .2s ease;
}
.home-page .hero .hero-scroll-chevrons {
  display:block; width:52px; height:54px; overflow:visible;
}
.home-page .hero .hero-scroll-chevrons path {
  fill:none; stroke:currentColor; stroke-width:4.2; stroke-linecap:butt; stroke-linejoin:miter;
}
.home-page .hero .hero-scroll-down:hover,
.home-page .hero .hero-scroll-down:focus-visible {
  color:#16a4e8; background:transparent; border:0; outline:2px solid currentColor; outline-offset:5px;
}
@keyframes skrChevronFloat {
  0%,100% { transform:translate(-50%,0); }
  50% { transform:translate(-50%,6px); }
}
@media (max-width:760px) {
  .home-page .hero .hero-scroll-down { bottom:15px; width:48px; height:56px; }
  .home-page .hero .hero-scroll-chevrons { width:46px; height:49px; }
}
@media (prefers-reduced-motion:reduce) { .home-page .hero .hero-scroll-down { animation:none; } }


/* SKR FINAL OVERRIDE: compact blue animated triple-chevron scroll cue */
.hero .hero-scroll-down {
  position:absolute !important; left:50% !important; bottom:24px !important;
  z-index:10 !important; width:38px !important; height:42px !important;
  min-width:0 !important; min-height:0 !important; padding:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  color:#078acb !important; background:transparent !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  opacity:1 !important; transform:translateX(-50%);
  animation:skrTripleChevronBounce 1.25s ease-in-out infinite !important;
}
.hero .hero-scroll-down::before,
.hero .hero-scroll-down::after,
.hero .hero-scroll-down > i { content:none !important; display:none !important; }
.hero .hero-scroll-down .hero-scroll-chevrons {
  display:block !important; width:36px !important; height:38px !important;
  max-width:none !important; overflow:visible !important;
}
.hero .hero-scroll-down .hero-scroll-chevrons path {
  fill:none !important; stroke:#078acb !important; stroke-width:3.2 !important;
  stroke-linecap:butt !important; stroke-linejoin:miter !important;
}
.hero .hero-scroll-down:hover,
.hero .hero-scroll-down:focus-visible { color:#078acb !important; background:transparent !important; }
@keyframes skrTripleChevronBounce {
  0%,100% { transform:translate(-50%,0); }
  50% { transform:translate(-50%,5px); }
}
@media(max-width:760px) {
  .hero .hero-scroll-down { width:34px !important; height:38px !important; bottom:15px !important; }
  .hero .hero-scroll-down .hero-scroll-chevrons { width:32px !important; height:34px !important; }
}


/* SKR scroll indicator final correction: small, blue, lower and visibly animated.
   Animate the SVG child so its movement does not conflict with the link's centering transform. */
.home-page .hero.hero-video { position: relative; }
.home-page .hero.hero-video > .hero-scroll-down {
  position: absolute !important; left: 50% !important; bottom: 7px !important;
  width: 24px !important; height: 28px !important; min-width: 24px !important; min-height: 28px !important;
  padding: 0 !important; margin: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important;
  box-shadow: none !important; color: #078ACB !important;
  transform: translateX(-50%) !important;
  animation: none !important;
}
.home-page .hero.hero-video > .hero-scroll-down::before,
.home-page .hero.hero-video > .hero-scroll-down::after,
.home-page .hero.hero-video > .hero-scroll-down > i {
  content: none !important; display: none !important;
}
.home-page .hero.hero-video > .hero-scroll-down > .hero-scroll-chevrons {
  display: block !important; width: 22px !important; height: 23px !important;
  max-width: 22px !important; max-height: 23px !important; overflow: visible !important;
  color: #078ACB !important;
  animation: skrChevronDropSmall 1.15s ease-in-out infinite !important;
  will-change: transform, opacity;
}
.home-page .hero.hero-video > .hero-scroll-down > .hero-scroll-chevrons path {
  fill: none !important; stroke: #078ACB !important; stroke-width: 4 !important;
  stroke-linecap: butt !important; stroke-linejoin: miter !important;
}
@keyframes skrChevronDropSmall {
  0%, 100% { transform: translateY(-2px); opacity: .72; }
  50% { transform: translateY(3px); opacity: 1; }
}
@media (max-width: 760px) {
  .home-page .hero.hero-video > .hero-scroll-down { bottom: 5px !important; width: 22px !important; height: 25px !important; }
  .home-page .hero.hero-video > .hero-scroll-down > .hero-scroll-chevrons { width: 20px !important; height: 21px !important; max-width: 20px !important; max-height: 21px !important; }
}


/* SKR FIX: remove right white strip caused by 100vw including the vertical scrollbar. */
html, body { max-width:100%; overflow-x:clip; }
.home-page .hero.hero-video {
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  left:auto !important;
  right:auto !important;
}
.home-page .hero.hero-video > .hero-background-video,
.home-page .hero.hero-video > .hero-video-overlay {
  inset:0 !important; width:100% !important; max-width:100% !important;
}


/* ===== SKR MOBILE NAV FIX: readable menu panel on small screens ===== */
@media (max-width: 760px) {
  body.home-header .site-header .menu,
  body.home-header .site-header .menu.open {
    background: rgba(10, 31, 45, .97) !important;
    background-color: rgba(10, 31, 45, .97) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .24) !important;
    border-top: 1px solid rgba(255,255,255,.12) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  body.home-header .site-header .menu > a,
  body.home-header .site-header .menu .menu-dropdown-link,
  body.home-header .site-header .menu .dropdown-toggle,
  body.home-header .site-header .menu .menu-dropdown-head > a,
  body.home-header .site-header .menu .menu-dropdown-head > button {
    color: #fff !important;
    text-shadow: none !important;
    background: transparent !important;
    -webkit-text-fill-color: #fff !important;
  }
  body.home-header .site-header .menu > a:hover,
  body.home-header .site-header .menu > a:focus-visible,
  body.home-header .site-header .menu > a.active,
  body.home-header .site-header .menu .menu-dropdown-link:hover,
  body.home-header .site-header .menu .menu-dropdown-link:focus-visible,
  body.home-header .site-header .menu .dropdown-toggle:hover {
    color: #ff655b !important;
    -webkit-text-fill-color: #ff655b !important;
    background: rgba(255,255,255,.06) !important;
  }
  body.home-header .site-header .menu .menu-dropdown,
  body.home-header .site-header .menu .menu-dropdown-head {
    background: transparent !important;
    box-shadow: none !important;
  }
  body.home-header .site-header .menu .menu-dropdown .submenu,
  body.home-header .site-header .menu .menu-dropdown-menu {
    background: #102a3a !important;
  }
}


/* ===== SKR MOBILE MENU REPAIR: consistent panel and readable Layanan submenu ===== */
@media (max-width: 760px) {
  body.home-header .site-header .menu,
  body.home-header .site-header .menu.open {
    background: rgba(18, 48, 66, .97) !important;
    background-color: rgba(18, 48, 66, .97) !important;
    padding: 10px 16px 18px !important;
    gap: 4px !important;
    align-items: stretch !important;
    overflow-x: hidden !important;
  }
  body.home-header .site-header .menu > a,
  body.home-header .site-header .menu .menu-dropdown-head .menu-dropdown-link {
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: none !important;
    transform: none !important;
  }
  body.home-header .site-header .menu > a.active,
  body.home-header .site-header .menu .menu-dropdown-link.active,
  body.home-header .site-header .menu .menu-dropdown.active > .menu-dropdown-head .menu-dropdown-link {
    background: rgba(255,255,255,.07) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }
  body.home-header .site-header .menu > a::after,
  body.home-header .site-header .menu .menu-dropdown-link::after,
  body.home-header .site-header .menu > a::before,
  body.home-header .site-header .menu .menu-dropdown-link::before {
    display: none !important;
    content: none !important;
  }
  body.home-header .site-header .menu .menu-dropdown,
  body.home-header .site-header .menu .menu-dropdown.active,
  body.home-header .site-header .menu .menu-dropdown-head {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.home-header .site-header .menu .menu-dropdown-head {
    display: flex !important;
    align-items: stretch !important;
  }
  body.home-header .site-header .menu .dropdown-toggle,
  body.home-header .site-header .menu .menu-dropdown:has(.menu-dropdown-link.active) .dropdown-toggle {
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 4px !important;
    color: #fff !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.home-header .site-header .menu .dropdown-menu,
  body.home-header .site-header .menu .menu-dropdown.open .dropdown-menu {
    position: static !important;
    display: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 4px 0 8px !important;
    padding: 6px 0 !important;
    border: 0 !important;
    border-left: 2px solid #e43d21 !important;
    border-radius: 0 !important;
    background: rgba(255,255,255,.055) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    overflow: hidden !important;
  }
  body.home-header .site-header .menu .menu-dropdown.open .dropdown-menu {
    display: block !important;
  }
  body.home-header .site-header .menu .dropdown-menu a,
  body.home-header .site-header .menu .dropdown-menu a:link,
  body.home-header .site-header .menu .dropdown-menu a:visited {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(255,255,255,.94) !important;
    -webkit-text-fill-color: rgba(255,255,255,.94) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    text-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
  }
  body.home-header .site-header .menu .dropdown-menu a:hover,
  body.home-header .site-header .menu .dropdown-menu a:focus-visible {
    background: rgba(255,255,255,.07) !important;
    color: #ff8178 !important;
    -webkit-text-fill-color: #ff8178 !important;
  }
}


/* ===== SKR WhatsApp unread badge: reliable pulse animation ===== */
.wa { isolation:isolate; overflow:visible !important; }
.wa .wa-unread-badge {
  position:absolute !important;
  top:-5px !important;
  right:-4px !important;
  z-index:3 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:19px !important;
  height:19px !important;
  min-width:19px !important;
  padding:0 !important;
  margin:0 !important;
  border:2px solid #fff !important;
  border-radius:50% !important;
  background:#e32636 !important;
  color:#fff !important;
  font:800 10px/1 Arial,sans-serif !important;
  text-align:center !important;
  box-shadow:0 2px 7px rgba(0,0,0,.28) !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:none !important;
  transform-origin:center !important;
  animation:skrWaBadgePulse 1.35s ease-in-out infinite !important;
  will-change:transform,box-shadow;
}
@keyframes skrWaBadgePulse {
  0%,100% { transform:scale(1); box-shadow:0 2px 7px rgba(0,0,0,.28),0 0 0 0 rgba(227,38,54,.52); }
  50% { transform:scale(1.16); box-shadow:0 2px 7px rgba(0,0,0,.28),0 0 0 6px rgba(227,38,54,0); }
}
@media (prefers-reduced-motion:reduce) {
  .wa .wa-unread-badge { animation:skrWaBadgePulse 2.4s ease-in-out infinite !important; }
}


/* ===== SKR: Mobile menu white / black / red hover refinement ===== */
@media (max-width:760px) {
  .menu {
    background:#fff !important;
    color:#171717 !important;
    border-top:1px solid #ececec !important;
    box-shadow:0 12px 28px rgba(0,0,0,.14) !important;
  }
  .menu > a,
  .menu a,
  .menu .dropdown-toggle,
  .menu button {
    color:#171717 !important;
    -webkit-text-fill-color:#171717 !important;
    background:transparent !important;
    border-radius:6px;
    transition:color .18s ease,background-color .18s ease !important;
  }
  .menu > a:hover,
  .menu > a:focus-visible,
  .menu a:hover,
  .menu a:focus-visible,
  .menu .dropdown-toggle:hover,
  .menu .dropdown-toggle:focus-visible,
  .menu button:hover,
  .menu button:focus-visible,
  .menu a.active,
  .menu .active > a {
    color:#b51c2a !important;
    -webkit-text-fill-color:#b51c2a !important;
    background:rgba(181,28,42,.07) !important;
  }
  .menu .dropdown-menu,
  .menu .submenu,
  .menu .dropdown-content {
    background:#fff !important;
    box-shadow:none !important;
    border-color:#eee !important;
  }
  .menu .dropdown-menu a,
  .menu .submenu a,
  .menu .dropdown-content a { color:#171717 !important; -webkit-text-fill-color:#171717 !important; }
  .menu .dropdown-menu a:hover,
  .menu .submenu a:hover,
  .menu .dropdown-content a:hover { color:#b51c2a !important; -webkit-text-fill-color:#b51c2a !important; background:rgba(181,28,42,.07) !important; }
}

/* ===== SKR: more noticeable animated WhatsApp notification badge ===== */
.wa { isolation:isolate !important; overflow:visible !important; }
.wa .wa-unread-badge {
  top:-7px !important; right:-6px !important;
  width:20px !important; height:20px !important; min-width:20px !important;
  border:2px solid #fff !important; border-radius:50% !important;
  background:linear-gradient(145deg,#ff3347 0%,#d50020 100%) !important;
  color:#fff !important; font:800 10px/1 Arial,sans-serif !important;
  box-shadow:0 2px 7px rgba(120,0,12,.32) !important;
  animation:skrWaBadgePop 1.8s cubic-bezier(.22,.8,.25,1) infinite !important;
  transform-origin:70% 30% !important; pointer-events:none !important;
}
.wa .wa-unread-badge::before {
  content:"" !important; position:absolute !important; inset:-4px !important;
  border:2px solid rgba(227,38,54,.65) !important; border-radius:50% !important;
  animation:skrWaBadgeRing 1.8s ease-out infinite !important; pointer-events:none !important;
}
@keyframes skrWaBadgePop {
  0%,100% { transform:scale(1) rotate(0); box-shadow:0 2px 7px rgba(120,0,12,.32),0 0 0 0 rgba(227,38,54,.32) !important; }
  12% { transform:scale(1.18) rotate(-8deg); }
  24% { transform:scale(1.08) rotate(7deg); }
  36% { transform:scale(1.14) rotate(-4deg); }
  50% { transform:scale(1) rotate(0); box-shadow:0 2px 7px rgba(120,0,12,.32),0 0 0 4px rgba(227,38,54,0) !important; }
}
@keyframes skrWaBadgeRing {
  0% { transform:scale(.72); opacity:.9; }
  75%,100% { transform:scale(1.65); opacity:0; }
}
@media (prefers-reduced-motion:reduce) {
 .wa .wa-unread-badge, .wa .wa-unread-badge::before { animation-duration:3s !important; }
}


/* ===== SKR FIX: Mobile Layanan dropdown matches white menu ===== */
@media (max-width: 760px) {
  body .site-header .menu .menu-dropdown,
  body .site-header .menu .menu-dropdown-head,
  body .site-header .menu .menu-dropdown-head .menu-dropdown-link,
  body .site-header .menu .menu-dropdown-head .dropdown-toggle {
    background: #fff !important;
    box-shadow: none !important;
  }
  body .site-header .menu .menu-dropdown-head .menu-dropdown-link,
  body .site-header .menu .menu-dropdown-head .dropdown-toggle {
    color: #171717 !important;
    -webkit-text-fill-color: #171717 !important;
  }
  body .site-header .menu .dropdown-menu,
  body .site-header .menu .menu-dropdown.open .dropdown-menu {
    background: #fff !important;
    background-color: #fff !important;
    border-left: 2px solid #b51c2a !important;
    border-top: 1px solid #eee !important;
    border-bottom: 1px solid #eee !important;
    box-shadow: none !important;
  }
  body .site-header .menu .dropdown-menu a,
  body .site-header .menu .dropdown-menu a:link,
  body .site-header .menu .dropdown-menu a:visited {
    color: #171717 !important;
    -webkit-text-fill-color: #171717 !important;
    background: #fff !important;
    border-bottom: 1px solid #eee !important;
  }
  body .site-header .menu .dropdown-menu a:hover,
  body .site-header .menu .dropdown-menu a:focus,
  body .site-header .menu .dropdown-menu a:focus-visible,
  body .site-header .menu .dropdown-menu a:active {
    color: #b51c2a !important;
    -webkit-text-fill-color: #b51c2a !important;
    background: rgba(181,28,42,.07) !important;
  }
  body .site-header .menu .menu-dropdown-head .menu-dropdown-link:hover,
  body .site-header .menu .menu-dropdown-head .menu-dropdown-link:focus-visible,
  body .site-header .menu .menu-dropdown-head .dropdown-toggle:hover,
  body .site-header .menu .menu-dropdown-head .dropdown-toggle:focus-visible {
    color: #b51c2a !important;
    -webkit-text-fill-color: #b51c2a !important;
    background: rgba(181,28,42,.07) !important;
  }
}


/* FINAL OVERRIDE: force white mobile navigation panel over legacy navy rules */
@media (max-width: 760px) {
  body.home-header .site-header .menu,
  body.home-header .site-header .menu.open {
    background: #fff !important;
    background-color: #fff !important;
    color: #171717 !important;
    border-top: 1px solid #ececec !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.14) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body.home-header .site-header .menu > a,
  body.home-header .site-header .menu .menu-dropdown-link,
  body.home-header .site-header .menu .dropdown-toggle,
  body.home-header .site-header .menu .menu-dropdown-head > a,
  body.home-header .site-header .menu .menu-dropdown-head > button {
    color: #171717 !important;
    -webkit-text-fill-color: #171717 !important;
    background: transparent !important;
    text-shadow: none !important;
  }
  body.home-header .site-header .menu > a:hover,
  body.home-header .site-header .menu > a:focus-visible,
  body.home-header .site-header .menu > a.active,
  body.home-header .site-header .menu .menu-dropdown-link:hover,
  body.home-header .site-header .menu .menu-dropdown-link:focus-visible,
  body.home-header .site-header .menu .dropdown-toggle:hover,
  body.home-header .site-header .menu .dropdown-toggle:focus-visible {
    color: #b51c2a !important;
    -webkit-text-fill-color: #b51c2a !important;
    background: rgba(181,28,42,.07) !important;
  }
  body.home-header .site-header .menu .menu-dropdown,
  body.home-header .site-header .menu .menu-dropdown-head,
  body.home-header .site-header .menu .menu-dropdown-head .menu-dropdown-link,
  body.home-header .site-header .menu .menu-dropdown-head .dropdown-toggle,
  body.home-header .site-header .menu .menu-dropdown .submenu,
  body.home-header .site-header .menu .menu-dropdown-menu,
  body.home-header .site-header .menu .dropdown-menu {
    background: #fff !important;
    background-color: #fff !important;
    box-shadow: none !important;
  }
  body.home-header .site-header .menu .menu-dropdown .submenu a,
  body.home-header .site-header .menu .menu-dropdown-menu a,
  body.home-header .site-header .menu .dropdown-menu a {
    color: #171717 !important;
    -webkit-text-fill-color: #171717 !important;
    background: #fff !important;
  }
  body.home-header .site-header .menu .menu-dropdown .submenu a:hover,
  body.home-header .site-header .menu .menu-dropdown-menu a:hover,
  body.home-header .site-header .menu .dropdown-menu a:hover {
    color: #b51c2a !important;
    -webkit-text-fill-color: #b51c2a !important;
    background: rgba(181,28,42,.07) !important;
  }
}


/* ===== SKR MOBILE MENU TEXT COLOR FIX: explicit black text on white panel ===== */
@media (max-width: 760px) {
  .site-header .menu,
  .site-header .menu.open,
  .site-header .menu .menu-dropdown,
  .site-header .menu .menu-dropdown-head,
  .site-header .menu .menu-dropdown-head > *,
  .site-header .menu .menu-dropdown-head a,
  .site-header .menu .menu-dropdown-head button {
    background-color: #fff !important;
    color: #171717 !important;
    -webkit-text-fill-color: #171717 !important;
    text-shadow: none !important;
  }
  .site-header .menu > a,
  .site-header .menu > a:link,
  .site-header .menu > a:visited,
  .site-header .menu .menu-dropdown-link,
  .site-header .menu .menu-dropdown-link:link,
  .site-header .menu .menu-dropdown-link:visited,
  .site-header .menu .dropdown-toggle,
  .site-header .menu .menu-dropdown-head button,
  .site-header .menu .menu-dropdown-head span,
  .site-header .menu .menu-dropdown-head i,
  .site-header .menu .menu-dropdown-head svg {
    color: #171717 !important;
    -webkit-text-fill-color: #171717 !important;
    text-shadow: none !important;
  }
  .site-header .menu > a:hover,
  .site-header .menu > a:focus-visible,
  .site-header .menu .menu-dropdown-link:hover,
  .site-header .menu .menu-dropdown-link:focus-visible,
  .site-header .menu .dropdown-toggle:hover,
  .site-header .menu .dropdown-toggle:focus-visible,
  .site-header .menu .menu-dropdown-head button:hover,
  .site-header .menu .menu-dropdown-head button:focus-visible {
    color: #b51c2a !important;
    -webkit-text-fill-color: #b51c2a !important;
    background-color: rgba(181,28,42,.07) !important;
  }
  .site-header .menu > a.active,
  .site-header .menu .menu-dropdown-link.active {
    color: #171717 !important;
    -webkit-text-fill-color: #171717 !important;
    background-color: #fff !important;
  }
  .site-header .menu .dropdown-menu,
  .site-header .menu .submenu,
  .site-header .menu .menu-dropdown-menu {
    background: #fff !important;
    background-color: #fff !important;
  }
  .site-header .menu .dropdown-menu a,
  .site-header .menu .submenu a,
  .site-header .menu .menu-dropdown-menu a {
    color: #171717 !important;
    -webkit-text-fill-color: #171717 !important;
    text-shadow: none !important;
    background: #fff !important;
  }
  .site-header .menu .dropdown-menu a:hover,
  .site-header .menu .submenu a:hover,
  .site-header .menu .menu-dropdown-menu a:hover {
    color: #b51c2a !important;
    -webkit-text-fill-color: #b51c2a !important;
    background: rgba(181,28,42,.07) !important;
  }
}


/* HARD FIX: mobile menu text visibility and contrast */
@media screen and (max-width: 760px) {
  html body.home-header header.site-header nav.menu,
  html body.home-header header.site-header nav.menu.open {
    background: #ffffff !important; background-color: #ffffff !important;
  }
  html body.home-header header.site-header nav.menu > a,
  html body.home-header header.site-header nav.menu > a:link,
  html body.home-header header.site-header nav.menu > a:visited,
  html body.home-header header.site-header nav.menu > .menu-dropdown .menu-dropdown-link,
  html body.home-header header.site-header nav.menu > .menu-dropdown .menu-dropdown-link:link,
  html body.home-header header.site-header nav.menu > .menu-dropdown .menu-dropdown-link:visited,
  html body.home-header header.site-header nav.menu > .menu-dropdown .dropdown-toggle,
  html body.home-header header.site-header nav.menu .dropdown-menu a,
  html body.home-header header.site-header nav.menu .dropdown-menu a:link,
  html body.home-header header.site-header nav.menu .dropdown-menu a:visited {
    color: #171717 !important; -webkit-text-fill-color: #171717 !important;
    opacity: 1 !important; visibility: visible !important; text-shadow: none !important;
  }
  html body.home-header header.site-header nav.menu > a *,
  html body.home-header header.site-header nav.menu .menu-dropdown-link *,
  html body.home-header header.site-header nav.menu .dropdown-toggle *,
  html body.home-header header.site-header nav.menu .dropdown-menu a * {
    color: inherit !important; -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important; visibility: visible !important; text-shadow: none !important;
  }
  html body.home-header header.site-header nav.menu > a:hover,
  html body.home-header header.site-header nav.menu > a:focus-visible,
  html body.home-header header.site-header nav.menu .menu-dropdown-link:hover,
  html body.home-header header.site-header nav.menu .menu-dropdown-link:focus-visible,
  html body.home-header header.site-header nav.menu .dropdown-toggle:hover,
  html body.home-header header.site-header nav.menu .dropdown-menu a:hover {
    color: #b51c2a !important; -webkit-text-fill-color: #b51c2a !important;
    background-color: rgba(181,28,42,.07) !important;
  }
}


/* SKR MOBILE NAV FINAL: active/current menu item remains readable on white */
@media screen and (max-width: 760px) {
  html body header.site-header nav.menu > a,
  html body header.site-header nav.menu > a:link,
  html body header.site-header nav.menu > a:visited,
  html body header.site-header nav.menu > a.active,
  html body header.site-header nav.menu > a.active:link,
  html body header.site-header nav.menu > a.active:visited,
  html body header.site-header nav.menu .menu-dropdown-link,
  html body header.site-header nav.menu .menu-dropdown-link:link,
  html body header.site-header nav.menu .menu-dropdown-link:visited,
  html body header.site-header nav.menu .menu-dropdown-link.active,
  html body header.site-header nav.menu .menu-dropdown.active .menu-dropdown-link,
  html body header.site-header nav.menu .dropdown-toggle {
    color: #171717 !important;
    -webkit-text-fill-color: #171717 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    text-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
  }
  html body header.site-header nav.menu > a.active,
  html body header.site-header nav.menu .menu-dropdown-link.active,
  html body header.site-header nav.menu .menu-dropdown.active > .menu-dropdown-head .menu-dropdown-link {
    background: #fff !important;
    background-color: #fff !important;
    color: #171717 !important;
    -webkit-text-fill-color: #171717 !important;
    box-shadow: inset 3px 0 0 #b51c2a !important;
  }
  html body header.site-header nav.menu > a:hover,
  html body header.site-header nav.menu > a:focus-visible,
  html body header.site-header nav.menu > a.active:hover,
  html body header.site-header nav.menu .menu-dropdown-link:hover,
  html body header.site-header nav.menu .menu-dropdown-link:focus-visible,
  html body header.site-header nav.menu .dropdown-toggle:hover,
  html body header.site-header nav.menu .dropdown-toggle:focus-visible {
    color: #b51c2a !important;
    -webkit-text-fill-color: #b51c2a !important;
    background: rgba(181,28,42,.07) !important;
    background-color: rgba(181,28,42,.07) !important;
  }
  html body header.site-header nav.menu > a *,
  html body header.site-header nav.menu .menu-dropdown-link * {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
  }
}


/* SKR FINAL MOBILE MENU REPAIR v2: force readable active link and compact dropdown */
@media screen and (max-width:760px) {
  html body.home-header header.site-header nav.menu > a,
  html body.home-header header.site-header nav.menu > a:link,
  html body.home-header header.site-header nav.menu > a:visited,
  html body.home-header header.site-header nav.menu > a.active,
  html body.home-header header.site-header nav.menu > a.active:link,
  html body.home-header header.site-header nav.menu > a.active:visited,
  html body.home-header header.site-header nav.menu .menu-dropdown-link,
  html body.home-header header.site-header nav.menu .menu-dropdown-link:link,
  html body.home-header header.site-header nav.menu .menu-dropdown-link:visited,
  html body.home-header header.site-header nav.menu .menu-dropdown-link.active,
  html body.home-header header.site-header nav.menu .dropdown-toggle {
    color:#171717 !important; -webkit-text-fill-color:#171717 !important;
    text-shadow:none !important; filter:none !important; opacity:1 !important; visibility:visible !important;
  }
  html body.home-header header.site-header nav.menu > a.active,
  html body.home-header header.site-header nav.menu .menu-dropdown-link.active {
    background:#fff !important; background-color:#fff !important;
    box-shadow:inset 3px 0 0 #b51c2a !important;
  }
  html body.home-header header.site-header nav.menu > a.active *,
  html body.home-header header.site-header nav.menu > a.active::before,
  html body.home-header header.site-header nav.menu > a.active::after,
  html body.home-header header.site-header nav.menu .menu-dropdown-link.active *,
  html body.home-header header.site-header nav.menu .menu-dropdown-link.active::before,
  html body.home-header header.site-header nav.menu .menu-dropdown-link.active::after {
    color:#171717 !important; -webkit-text-fill-color:#171717 !important; text-shadow:none !important;
  }
  html body.home-header header.site-header nav.menu .menu-dropdown { height:auto !important; min-height:0 !important; }
  html body.home-header header.site-header nav.menu .dropdown-menu {
    height:auto !important; min-height:0 !important; max-height:0 !important; overflow:hidden !important;
    padding-top:0 !important; padding-bottom:0 !important; margin:0 !important;
    border:0 !important; box-shadow:none !important;
  }
  html body.home-header header.site-header nav.menu .menu-dropdown.open .dropdown-menu,
  html body.home-header header.site-header nav.menu .__remove_focus_within_dropdown_menu {
    max-height:65vh !important; overflow-y:auto !important; padding:6px 0 8px 14px !important;
    border-left:2px solid #b51c2a !important;
  }
  html body.home-header header.site-header nav.menu .dropdown-menu a,
  html body.home-header header.site-header nav.menu .dropdown-menu a:link,
  html body.home-header header.site-header nav.menu .dropdown-menu a:visited {
    display:block !important; color:#171717 !important; -webkit-text-fill-color:#171717 !important;
    background:#fff !important; text-shadow:none !important; opacity:1 !important; visibility:visible !important;
  }
  html body.home-header header.site-header nav.menu .dropdown-menu a:hover,
  html body.home-header header.site-header nav.menu .dropdown-menu a:focus-visible {
    color:#b51c2a !important; -webkit-text-fill-color:#b51c2a !important; background:rgba(181,28,42,.07) !important;
  }
}


/* SKR MOBILE NAV POLISH 2026-10-24: hide top hover stroke on mobile and keep toggle styling consistent */
@media screen and (max-width:760px) {
  /* The mobile menu uses the active left marker; never show the desktop top red stroke. */
  html body header.site-header nav.menu > a::before,
  html body header.site-header nav.menu > a::after,
  html body header.site-header nav.menu .menu-dropdown-head .menu-dropdown-link::before,
  html body header.site-header nav.menu .menu-dropdown-head .menu-dropdown-link::after,
  html body header.site-header nav.menu .menu-dropdown-link::before,
  html body header.site-header nav.menu .menu-dropdown-link::after {
    display:none !important;
    content:none !important;
    opacity:0 !important;
    transform:none !important;
  }
  /* Keep the menu toggle the same on the homepage and interior pages, including after navigation. */
  html body header.site-header .menu-toggle,
  html body.home-header header.site-header .menu-toggle,
  html body:not(.home-header) header.site-header .menu-toggle,
  html body.home-header header.site-header.is-scrolled .menu-toggle {
    color:#1b2733 !important;
    -webkit-text-fill-color:#1b2733 !important;
    background:rgba(255,255,255,.82) !important;
    border:1px solid rgba(27,39,51,.12) !important;
    box-shadow:0 4px 14px rgba(16,35,50,.10) !important;
  }
  html body header.site-header .menu-toggle:hover,
  html body header.site-header .menu-toggle:focus-visible {
    background:#fff !important;
    color:#1b2733 !important;
    transform:none !important;
  }
}


/* SKR MOBILE SERVICE DROPDOWN + MENU SCROLL FIX 2026-10-24 */
@media (max-width:760px) {
  /* The opened mobile navigation itself must scroll when its contents exceed the viewport. */
  html body header.site-header nav.menu,
  html body header.site-header nav.menu.open {
    box-sizing:border-box !important;
    max-height:calc(100dvh - 84px) !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior-y:contain !important;
    touch-action:pan-y !important;
    scrollbar-width:thin;
  }
  html body header.site-header nav.menu .menu-dropdown {
    display:block !important;
    flex:0 0 auto !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }
  html body header.site-header nav.menu .menu-dropdown-head {
    display:flex !important;
    align-items:center !important;
    width:100% !important;
  }
  html body header.site-header nav.menu .dropdown-toggle {
    flex:0 0 42px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    touch-action:manipulation !important;
  }
  html body header.site-header nav.menu .dropdown-toggle i {
    display:inline-block !important;
    transition:transform .28s ease !important;
    transform:rotate(0deg);
  }
  html body header.site-header nav.menu .menu-dropdown.open .dropdown-toggle i,
  html body header.site-header nav.menu .dropdown-toggle[aria-expanded="true"] i {
    transform:rotate(180deg) !important;
  }
  html body header.site-header nav.menu .dropdown-menu {
    display:block !important;
    box-sizing:border-box !important;
    width:100% !important;
    max-height:0 !important;
    overflow-x:hidden !important;
    overflow-y:hidden !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    margin:0 !important;
    opacity:0 !important;
    visibility:hidden !important;
    transition:max-height .32s ease, opacity .22s ease, padding .32s ease, margin .32s ease !important;
  }
  html body header.site-header nav.menu .menu-dropdown.open .dropdown-menu,
  html body header.site-header nav.menu .__remove_focus_within_dropdown_menu {
    max-height:52vh !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    padding:6px 0 8px 14px !important;
    margin:4px 0 8px !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  html body header.site-header nav.menu .dropdown-menu a {
    flex:0 0 auto !important;
    min-height:42px !important;
  }
}


/* SKR MOBILE PATCH 2026-10-24: neutral hamburger hover + always-visible service chevron */
@media (max-width: 760px) {
  /* Do not change the hamburger/close button appearance on hover, focus or tap. */
  html body header.site-header .menu-toggle,
  html body header.site-header .menu-toggle:hover,
  html body header.site-header .menu-toggle:focus,
  html body header.site-header .menu-toggle:focus-visible,
  html body header.site-header .menu-toggle:active {
    color: #1b2733 !important;
    -webkit-text-fill-color: #1b2733 !important;
    background: rgba(255,255,255,.82) !important;
    background-color: rgba(255,255,255,.82) !important;
    border-color: rgba(27,39,51,.12) !important;
    box-shadow: 0 4px 14px rgba(16,35,50,.10) !important;
    transform: none !important;
    filter: none !important;
    outline-color: transparent !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  html body header.site-header .menu-toggle:hover *,
  html body header.site-header .menu-toggle:focus *,
  html body header.site-header .menu-toggle:focus-visible *,
  html body header.site-header .menu-toggle:active * {
    color: #1b2733 !important;
    -webkit-text-fill-color: #1b2733 !important;
  }
  /* Explicitly render the dropdown control on the white mobile menu, including on Home. */
  html body header.site-header nav.menu .menu-dropdown-head {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
  }
  html body header.site-header nav.menu .menu-dropdown-head .dropdown-toggle,
  html body.home-header header.site-header nav.menu .menu-dropdown-head .dropdown-toggle,
  html body.home-header header.site-header.is-scrolled nav.menu .menu-dropdown-head .dropdown-toggle {
    display: flex !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 4px !important;
    color: #171717 !important;
    -webkit-text-fill-color: #171717 !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 6px !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
  }
  html body header.site-header nav.menu .menu-dropdown-head .dropdown-toggle i,
  html body.home-header header.site-header nav.menu .menu-dropdown-head .dropdown-toggle i {
    display: inline-block !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    color: #171717 !important;
    -webkit-text-fill-color: #171717 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: rotate(0deg);
    transition: transform .25s ease !important;
  }
  html body header.site-header nav.menu .menu-dropdown.open .menu-dropdown-head .dropdown-toggle i,
  html body header.site-header nav.menu .menu-dropdown-head .dropdown-toggle[aria-expanded="true"] i {
    transform: rotate(180deg) !important;
  }
  html body header.site-header nav.menu .menu-dropdown-head .dropdown-toggle:hover,
  html body header.site-header nav.menu .menu-dropdown-head .dropdown-toggle:focus,
  html body header.site-header nav.menu .menu-dropdown-head .dropdown-toggle:active {
    color: #171717 !important;
    background: #fff !important;
    -webkit-text-fill-color: #171717 !important;
    box-shadow: none !important;
  }
}


/* SKR FIX 2026-10-24: mobile service submenu must close when arrow is toggled.
   Do not use :focus-within to force the submenu open after a tap. */
@media (max-width:760px) {
  html body header.site-header nav.menu .menu-dropdown:not(.open) > .dropdown-menu,
  html body.home-header header.site-header nav.menu .menu-dropdown:not(.open) > .dropdown-menu,
  html body.home-header header.site-header.is-scrolled nav.menu .menu-dropdown:not(.open) > .dropdown-menu {
    display:none !important;
    max-height:0 !important;
    height:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    opacity:0 !important;
    visibility:hidden !important;
    overflow:hidden !important;
    pointer-events:none !important;
  }
  html body header.site-header nav.menu .menu-dropdown.open > .dropdown-menu,
  html body.home-header header.site-header nav.menu .menu-dropdown.open > .dropdown-menu,
  html body.home-header header.site-header.is-scrolled nav.menu .menu-dropdown.open > .dropdown-menu {
    display:block !important;
    height:auto !important;
    max-height:52vh !important;
    opacity:1 !important;
    visibility:visible !important;
    overflow-y:auto !important;
    pointer-events:auto !important;
  }
}


/* SKR MOBILE SUBMENU CONSISTENCY PATCH 2026-10-24
   Keep the Layanan submenu identical on Home and interior pages. */
@media screen and (max-width:760px) {
  html body.home-header header.site-header nav.menu .menu-dropdown .dropdown-menu,
  html body:not(.home-header) header.site-header nav.menu .menu-dropdown .dropdown-menu {
    position:static !important;
    inset:auto !important;
    float:none !important;
    display:none !important;
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    height:0 !important;
    max-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background:#fff !important;
    background-color:#fff !important;
    border:0 !important;
    border-left:2px solid transparent !important;
    border-radius:0 !important;
    box-shadow:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    transform:none !important;
    pointer-events:none !important;
  }
  html body.home-header header.site-header nav.menu .menu-dropdown.open > .dropdown-menu,
  html body:not(.home-header) header.site-header nav.menu .menu-dropdown.open > .dropdown-menu {
    display:block !important;
    height:auto !important;
    max-height:52vh !important;
    margin:4px 0 10px !important;
    padding:6px 0 8px 14px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    background:#fff !important;
    background-color:#fff !important;
    border:0 !important;
    border-left:2px solid #b51c2a !important;
    border-radius:0 !important;
    box-shadow:none !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    pointer-events:auto !important;
  }
  html body.home-header header.site-header nav.menu .menu-dropdown .dropdown-menu a,
  html body.home-header header.site-header nav.menu .menu-dropdown .dropdown-menu a:link,
  html body.home-header header.site-header nav.menu .menu-dropdown .dropdown-menu a:visited,
  html body:not(.home-header) header.site-header nav.menu .menu-dropdown .dropdown-menu a,
  html body:not(.home-header) header.site-header nav.menu .menu-dropdown .dropdown-menu a:link,
  html body:not(.home-header) header.site-header nav.menu .menu-dropdown .dropdown-menu a:visited {
    display:block !important;
    box-sizing:border-box !important;
    width:100% !important;
    min-height:42px !important;
    height:auto !important;
    margin:0 !important;
    padding:11px 14px !important;
    color:#171717 !important;
    -webkit-text-fill-color:#171717 !important;
    background:#fff !important;
    background-color:#fff !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    font-size:13px !important;
    font-weight:600 !important;
    line-height:1.45 !important;
    text-align:left !important;
    text-decoration:none !important;
    text-shadow:none !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
  }
  html body.home-header header.site-header nav.menu .menu-dropdown .dropdown-menu a:hover,
  html body.home-header header.site-header nav.menu .menu-dropdown .dropdown-menu a:focus-visible,
  html body:not(.home-header) header.site-header nav.menu .menu-dropdown .dropdown-menu a:hover,
  html body:not(.home-header) header.site-header nav.menu .menu-dropdown .dropdown-menu a:focus-visible {
    color:#b51c2a !important;
    -webkit-text-fill-color:#b51c2a !important;
    background:rgba(181,28,42,.07) !important;
    background-color:rgba(181,28,42,.07) !important;
    outline:none !important;
  }
  html body.home-header header.site-header nav.menu .menu-dropdown .menu-dropdown-head,
  html body:not(.home-header) header.site-header nav.menu .menu-dropdown .menu-dropdown-head {
    display:flex !important;
    align-items:center !important;
    width:100% !important;
  }
}


/* SKR MOBILE NAV HOVER UPDATE: replace vertical active bar with a horizontal top accent. */
@media screen and (max-width:760px) {
  html body header.site-header nav.menu > a,
  html body header.site-header nav.menu .menu-dropdown-head .menu-dropdown-link {
    position:relative !important;
    border-left:0 !important;
    box-shadow:none !important;
  }
  html body header.site-header nav.menu > a::before,
  html body header.site-header nav.menu .menu-dropdown-head .menu-dropdown-link::before {
    content:"" !important;
    display:block !important;
    position:absolute !important;
    top:0 !important; left:14px !important; right:auto !important;
    width:0 !important; height:2px !important;
    padding:0 !important; border:0 !important; border-radius:2px !important;
    background:#b51c2a !important; opacity:1 !important;
    transform:none !important; transition:width .22s ease !important;
    pointer-events:none !important;
  }
  html body header.site-header nav.menu > a:hover::before,
  html body header.site-header nav.menu > a:focus-visible::before,
  html body header.site-header nav.menu > a.active::before,
  html body header.site-header nav.menu .menu-dropdown:hover .menu-dropdown-link::before,
  html body header.site-header nav.menu .menu-dropdown:focus-within .menu-dropdown-link::before,
  html body header.site-header nav.menu .menu-dropdown-link.active::before {
    width:42px !important;
  }
  html body header.site-header nav.menu > a:hover,
  html body header.site-header nav.menu > a:focus-visible,
  html body header.site-header nav.menu > a.active,
  html body header.site-header nav.menu .menu-dropdown-link:hover,
  html body header.site-header nav.menu .menu-dropdown-link:focus-visible,
  html body header.site-header nav.menu .menu-dropdown-link.active {
    box-shadow:none !important; border-left:0 !important;
  }
}

/* SKR MOBILE ACTIVE MARKER NORMALIZATION 2026-10-24
   Remove legacy vertical active borders and use the same horizontal red accent
   for every mobile navigation item, including the current page. */
@media screen and (max-width:760px) {
  html body header.site-header nav.menu > a,
  html body header.site-header nav.menu > a.active,
  html body header.site-header nav.menu > a[aria-current],
  html body header.site-header nav.menu .menu-dropdown-head .menu-dropdown-link,
  html body header.site-header nav.menu .menu-dropdown-head .menu-dropdown-link.active,
  html body header.site-header nav.menu .menu-dropdown-head .menu-dropdown-link[aria-current] {
    border-left:0 !important;
    border-left-width:0 !important;
    box-shadow:none !important;
  }
  html body header.site-header nav.menu > a::after,
  html body header.site-header nav.menu .menu-dropdown-head .menu-dropdown-link::after {
    content:none !important;
    display:none !important;
  }
  html body header.site-header nav.menu > a::before,
  html body header.site-header nav.menu .menu-dropdown-head .menu-dropdown-link::before {
    content:"" !important;
    display:block !important;
    position:absolute !important;
    top:0 !important;
    left:14px !important;
    right:auto !important;
    bottom:auto !important;
    width:0 !important;
    height:2px !important;
    border:0 !important;
    border-radius:2px !important;
    background:#b51c2a !important;
    opacity:1 !important;
    transform:none !important;
    transition:width .22s ease !important;
    pointer-events:none !important;
  }
  html body header.site-header nav.menu > a:hover::before,
  html body header.site-header nav.menu > a:focus-visible::before,
  html body header.site-header nav.menu > a.active::before,
  html body header.site-header nav.menu > a[aria-current]::before,
  html body header.site-header nav.menu .menu-dropdown:hover .menu-dropdown-link::before,
  html body header.site-header nav.menu .menu-dropdown:focus-within .menu-dropdown-link::before,
  html body header.site-header nav.menu .menu-dropdown-link.active::before,
  html body header.site-header nav.menu .menu-dropdown-link[aria-current]::before {
    width:42px !important;
  }
}


/* SKR MOBILE NAV: straight vertical active/hover marker (requested 2026-10-24) */
@media screen and (max-width:760px) {
  html body header.site-header nav.menu > a,
  html body header.site-header nav.menu .menu-dropdown-head .menu-dropdown-link {
    position:relative !important;
    border-left:3px solid transparent !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  /* Remove the horizontal pseudo-element introduced by previous patches. */
  html body header.site-header nav.menu > a::before,
  html body header.site-header nav.menu .menu-dropdown-head .menu-dropdown-link::before {
    content:none !important;
    display:none !important;
  }
  html body header.site-header nav.menu > a::after,
  html body header.site-header nav.menu .menu-dropdown-head .menu-dropdown-link::after {
    content:none !important;
    display:none !important;
  }
  html body header.site-header nav.menu > a:hover,
  html body header.site-header nav.menu > a:focus-visible,
  html body header.site-header nav.menu > a.active,
  html body header.site-header nav.menu > a[aria-current],
  html body header.site-header nav.menu .menu-dropdown:hover .menu-dropdown-link,
  html body header.site-header nav.menu .menu-dropdown:focus-within .menu-dropdown-link,
  html body header.site-header nav.menu .menu-dropdown-link:hover,
  html body header.site-header nav.menu .menu-dropdown-link:focus-visible,
  html body header.site-header nav.menu .menu-dropdown-link.active,
  html body header.site-header nav.menu .menu-dropdown-link[aria-current] {
    border-left:3px solid #b51c2a !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
}


/* SKR MOBILE NAV LAYOUT — match user reference (2026-10-24) */
@media screen and (max-width:760px) {
  html body header.site-header nav.menu,
  html body header.site-header nav.menu.open {
    box-sizing:border-box !important;
    background:#fff !important;
    color:#18334d !important;
    padding:13px 15px 18px !important;
    gap:0 !important;
    border-top:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    max-height:calc(100dvh - 80px) !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }
  html body header.site-header nav.menu > a,
  html body header.site-header nav.menu .menu-dropdown-head .menu-dropdown-link {
    display:flex !important;
    align-items:center !important;
    box-sizing:border-box !important;
    width:100% !important;
    min-height:70px !important;
    height:auto !important;
    margin:0 !important;
    padding:0 12px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#18334d !important;
    -webkit-text-fill-color:#18334d !important;
    font-size:15px !important;
    font-weight:700 !important;
    line-height:1.35 !important;
    text-decoration:none !important;
    transform:none !important;
    text-shadow:none !important;
  }
  html body header.site-header nav.menu > a.active,
  html body header.site-header nav.menu > a[aria-current],
  html body header.site-header nav.menu > a.active:hover,
  html body header.site-header nav.menu > a.active:focus-visible {
    min-height:56px !important;
    margin:0 0 2px !important;
    padding:0 12px !important;
    background:#ed351f !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
  }
  html body header.site-header nav.menu > a:hover,
  html body header.site-header nav.menu > a:focus-visible,
  html body header.site-header nav.menu .menu-dropdown-head .menu-dropdown-link:hover,
  html body header.site-header nav.menu .menu-dropdown-head .menu-dropdown-link:focus-visible {
    background:transparent !important;
    color:#18334d !important;
    -webkit-text-fill-color:#18334d !important;
  }
  html body header.site-header nav.menu > a::before,
  html body header.site-header nav.menu > a::after,
  html body header.site-header nav.menu .menu-dropdown-head .menu-dropdown-link::before,
  html body header.site-header nav.menu .menu-dropdown-head .menu-dropdown-link::after {
    content:none !important;
    display:none !important;
  }
  html body header.site-header nav.menu .menu-dropdown {
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:#fff !important;
    box-shadow:none !important;
  }
  html body header.site-header nav.menu .menu-dropdown-head {
    display:flex !important;
    align-items:stretch !important;
    width:100% !important;
    min-height:70px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:#fff !important;
    box-shadow:none !important;
  }
  html body header.site-header nav.menu .menu-dropdown-head .menu-dropdown-link {
    flex:1 1 auto !important;
    min-width:0 !important;
    min-height:70px !important;
  }
  html body header.site-header nav.menu .menu-dropdown-head .dropdown-toggle {
    flex:0 0 44px !important;
    width:44px !important;
    min-width:44px !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:#18334d !important;
    -webkit-text-fill-color:#18334d !important;
    box-shadow:none !important;
  }
  html body header.site-header nav.menu .menu-dropdown-head .dropdown-toggle i {
    font-size:13px !important;
    transition:transform .2s ease !important;
  }
  html body header.site-header nav.menu .menu-dropdown.open > .menu-dropdown-head .dropdown-toggle i {
    transform:rotate(180deg) !important;
  }
  html body header.site-header nav.menu .menu-dropdown .dropdown-menu {
    position:static !important;
    inset:auto !important;
    display:none !important;
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    height:0 !important;
    max-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    border:0 !important;
    border-left:0 !important;
    border-radius:0 !important;
    background:#fff !important;
    box-shadow:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    transform:none !important;
  }
  html body header.site-header nav.menu .menu-dropdown.open > .dropdown-menu {
    display:block !important;
    height:auto !important;
    max-height:52vh !important;
    margin:0 0 8px !important;
    padding:0 0 0 9px !important;
    overflow-y:auto !important;
    border-left:2px solid #ed351f !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  html body header.site-header nav.menu .menu-dropdown .dropdown-menu a {
    display:flex !important;
    align-items:center !important;
    box-sizing:border-box !important;
    width:100% !important;
    min-height:44px !important;
    height:auto !important;
    margin:0 !important;
    padding:0 12px !important;
    border:0 !important;
    border-bottom:1px solid #e9edf0 !important;
    border-radius:0 !important;
    background:#fff !important;
    color:#18334d !important;
    -webkit-text-fill-color:#18334d !important;
    font-size:13px !important;
    font-weight:500 !important;
    line-height:1.35 !important;
    white-space:normal !important;
    box-shadow:none !important;
  }
  html body header.site-header nav.menu .menu-dropdown .dropdown-menu a:last-child {
    border-bottom:0 !important;
  }
}


/* APCM-style mobile navbar hover: selectors matched to SKR's actual nav markup. */
@media (max-width: 991px) {
  html body header.site-header nav.menu > a:hover,
  html body header.site-header nav.menu > a:focus-visible,
  html body header.site-header nav.menu > a.active,
  html body header.site-header nav.menu .menu-dropdown-head .menu-dropdown-link:hover,
  html body header.site-header nav.menu .menu-dropdown-head .menu-dropdown-link:focus-visible,
  html body header.site-header nav.menu .menu-dropdown-head .menu-dropdown-link.active,
  html body header.site-header nav.menu .menu-dropdown-head .dropdown-toggle:hover,
  html body header.site-header nav.menu .menu-dropdown-head .dropdown-toggle:focus-visible {
    background: #eef8f2 !important;
    color: #056d35 !important;
    -webkit-text-fill-color: #056d35 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }
  html body header.site-header nav.menu .menu-dropdown .dropdown-menu a:hover,
  html body header.site-header nav.menu .menu-dropdown .dropdown-menu a:focus-visible,
  html body header.site-header nav.menu .menu-dropdown .dropdown-menu a.active {
    background: #eef8f2 !important;
    color: #056d35 !important;
    -webkit-text-fill-color: #056d35 !important;
  }
  html body header.site-header nav.menu > a,
  html body header.site-header nav.menu .menu-dropdown-head .menu-dropdown-link,
  html body header.site-header nav.menu .menu-dropdown-head .dropdown-toggle,
  html body header.site-header nav.menu .menu-dropdown .dropdown-menu a {
    transition: background-color .18s ease, color .18s ease !important;
  }
}


/* SKR MOBILE NAV — match approved right-side mockup: uniform red indicators */
@media screen and (max-width: 760px) {
  html body header.site-header nav.menu > a,
  html body header.site-header nav.menu .menu-dropdown-head .menu-dropdown-link,
  html body header.site-header nav.menu .menu-dropdown .dropdown-menu a {
    border-left: 6px solid transparent !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Beranda remains red; the other top-level rows use the exact same indicator on hover/focus. */
  html body header.site-header nav.menu > a.active,
  html body header.site-header nav.menu > a[aria-current],
  html body header.site-header nav.menu > a:hover,
  html body header.site-header nav.menu > a:focus,
  html body header.site-header nav.menu > a:focus-visible,
  html body header.site-header nav.menu .menu-dropdown-head .menu-dropdown-link:hover,
  html body header.site-header nav.menu .menu-dropdown-head .menu-dropdown-link:focus,
  html body header.site-header nav.menu .menu-dropdown-head .menu-dropdown-link:focus-visible,
  html body header.site-header nav.menu .menu-dropdown:hover > .menu-dropdown-head .menu-dropdown-link,
  html body header.site-header nav.menu .menu-dropdown:focus-within > .menu-dropdown-head .menu-dropdown-link,
  html body header.site-header nav.menu .menu-dropdown-head .dropdown-toggle:hover,
  html body header.site-header nav.menu .menu-dropdown-head .dropdown-toggle:focus-visible,
  html body header.site-header nav.menu .menu-dropdown .dropdown-menu a:hover,
  html body header.site-header nav.menu .menu-dropdown .dropdown-menu a:focus,
  html body header.site-header nav.menu .menu-dropdown .dropdown-menu a:focus-visible,
  html body header.site-header nav.menu .menu-dropdown .dropdown-menu a.active {
    border-left: 6px solid #ed351f !important;
    background: #fff0ed !important;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Keep the active Beranda fill exactly as in the existing menu. */
  html body header.site-header nav.menu > a.active,
  html body header.site-header nav.menu > a[aria-current] {
    background: #ed351f !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }

  html body header.site-header nav.menu .menu-dropdown .dropdown-menu a {
    border-bottom: 1px solid #e9edf0 !important;
  }
}


/* FINAL MOBILE NAV INDICATORS — top-level rows only; no submenu/caret bars. */
@media screen and (max-width: 760px) {
  /* Keep the approved 6px red indicator on top-level navigation items. */
  html body header.site-header nav.menu > a {
    border-left: 6px solid transparent !important;
    box-sizing: border-box !important;
  }
  html body header.site-header nav.menu > a.active,
  html body header.site-header nav.menu > a[aria-current],
  html body header.site-header nav.menu > a:hover,
  html body header.site-header nav.menu > a:focus,
  html body header.site-header nav.menu > a:focus-visible {
    border-left: 6px solid #ed351f !important;
  }
  /* The Layanan row has one indicator only; never draw another beside its chevron. */
  html body header.site-header nav.menu .menu-dropdown-head .menu-dropdown-link,
  html body header.site-header nav.menu .menu-dropdown-head .dropdown-toggle {
    border-left: 0 !important;
    box-shadow: none !important;
  }
  html body header.site-header nav.menu .menu-dropdown-head .menu-dropdown-link:hover,
  html body header.site-header nav.menu .menu-dropdown-head .menu-dropdown-link:focus,
  html body header.site-header nav.menu .menu-dropdown-head .menu-dropdown-link:focus-visible,
  html body header.site-header nav.menu .menu-dropdown:hover > .menu-dropdown-head .menu-dropdown-link,
  html body header.site-header nav.menu .menu-dropdown:focus-within > .menu-dropdown-head .menu-dropdown-link {
    border-left: 0 !important;
  }
  html body header.site-header nav.menu .menu-dropdown-head .dropdown-toggle:hover,
  html body header.site-header nav.menu .menu-dropdown-head .dropdown-toggle:focus,
  html body header.site-header nav.menu .menu-dropdown-head .dropdown-toggle:focus-visible {
    border: 0 !important;
    background: transparent !important;
    color: #18334d !important;
    -webkit-text-fill-color: #18334d !important;
  }
  /* Submenu links have no vertical red indicator; keep horizontal separators. */
  html body header.site-header nav.menu .menu-dropdown.open > .dropdown-menu {
    border-left: 0 !important;
    padding-left: 0 !important;
  }
  html body header.site-header nav.menu .menu-dropdown .dropdown-menu a,
  html body header.site-header nav.menu .menu-dropdown .dropdown-menu a:hover,
  html body header.site-header nav.menu .menu-dropdown .dropdown-menu a:focus,
  html body header.site-header nav.menu .menu-dropdown .dropdown-menu a:focus-visible,
  html body header.site-header nav.menu .menu-dropdown .dropdown-menu a.active {
    border-left: 0 !important;
    border-bottom: 1px solid #e9edf0 !important;
    background: #fff !important;
    color: #18334d !important;
    -webkit-text-fill-color: #18334d !important;
    box-shadow: none !important;
  }
  html body header.site-header nav.menu .menu-dropdown .dropdown-menu a:last-child {
    border-bottom: 0 !important;
  }
}


/* VERIFIED TARGETED FIX — unify Layanan row indicator with top-level menu items. */
@media screen and (max-width: 760px) {
  html body header.site-header nav.menu .menu-dropdown,
  html body header.site-header nav.menu .menu-dropdown-head {
    box-sizing: border-box !important;
    border-left: 6px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* One indicator on the Layanan row wrapper; none beside the chevron. */
  html body header.site-header nav.menu .menu-dropdown.active,
  html body header.site-header nav.menu .menu-dropdown.open,
  html body header.site-header nav.menu .menu-dropdown:hover,
  html body header.site-header nav.menu .menu-dropdown:focus-within {
    border-left: 6px solid #ed351f !important;
  }
  html body header.site-header nav.menu .menu-dropdown-head,
  html body header.site-header nav.menu .menu-dropdown-head .menu-dropdown-link,
  html body header.site-header nav.menu .menu-dropdown-head .dropdown-toggle {
    border-left: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* No vertical marker anywhere in the submenu; horizontal separators remain. */
  html body header.site-header nav.menu .menu-dropdown .dropdown-menu,
  html body header.site-header nav.menu .menu-dropdown.open > .dropdown-menu {
    border-left: 0 !important;
    border-right: 0 !important;
    padding-left: 0 !important;
    box-shadow: none !important;
  }
  html body header.site-header nav.menu .menu-dropdown .dropdown-menu a,
  html body header.site-header nav.menu .menu-dropdown .dropdown-menu a:hover,
  html body header.site-header nav.menu .menu-dropdown .dropdown-menu a:focus,
  html body header.site-header nav.menu .menu-dropdown .dropdown-menu a:focus-visible,
  html body header.site-header nav.menu .menu-dropdown .dropdown-menu a.active {
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #e9edf0 !important;
    background: #fff !important;
    color: #18334d !important;
    -webkit-text-fill-color: #18334d !important;
    box-shadow: none !important;
  }
  html body header.site-header nav.menu .menu-dropdown .dropdown-menu a:last-child {
    border-bottom: 0 !important;
  }
}


/* ROOT OVERRIDE 2026-10-24: exactly one square red indicator on mobile Layanan row.
   The wrapper and active link must never draw their own border/pseudo-element. */
@media screen and (max-width: 760px) {
  html body header.site-header nav.menu > .menu-dropdown,
  html body header.site-header nav.menu > .menu-dropdown.active,
  html body header.site-header nav.menu > .menu-dropdown.open,
  html body header.site-header nav.menu > .menu-dropdown:hover,
  html body header.site-header nav.menu > .menu-dropdown:focus-within {
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-image: none !important;
  }

  html body header.site-header nav.menu > .menu-dropdown > .menu-dropdown-head,
  html body header.site-header nav.menu > .menu-dropdown.open > .menu-dropdown-head,
  html body header.site-header nav.menu > .menu-dropdown:hover > .menu-dropdown-head,
  html body header.site-header nav.menu > .menu-dropdown:focus-within > .menu-dropdown-head,
  html body header.site-header nav.menu > .menu-dropdown.active > .menu-dropdown-head {
    border: 0 !important;
    border-left: 6px solid transparent !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-image: none !important;
  }

  html body header.site-header nav.menu > .menu-dropdown.open > .menu-dropdown-head,
  html body header.site-header nav.menu > .menu-dropdown:hover > .menu-dropdown-head,
  html body header.site-header nav.menu > .menu-dropdown:focus-within > .menu-dropdown-head,
  html body header.site-header nav.menu > .menu-dropdown.active > .menu-dropdown-head {
    border-left-color: #ed351f !important;
  }

  html body header.site-header nav.menu > .menu-dropdown > .menu-dropdown-head > .menu-dropdown-link,
  html body header.site-header nav.menu > .menu-dropdown > .menu-dropdown-head > .menu-dropdown-link.active,
  html body header.site-header nav.menu > .menu-dropdown > .menu-dropdown-head > .dropdown-toggle,
  html body header.site-header nav.menu > .menu-dropdown > .menu-dropdown-head > .dropdown-toggle:hover,
  html body header.site-header nav.menu > .menu-dropdown > .menu-dropdown-head > .dropdown-toggle:focus {
    border: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-image: none !important;
  }

  html body header.site-header nav.menu > .menu-dropdown::before,
  html body header.site-header nav.menu > .menu-dropdown::after,
  html body header.site-header nav.menu > .menu-dropdown > .menu-dropdown-head::before,
  html body header.site-header nav.menu > .menu-dropdown > .menu-dropdown-head::after,
  html body header.site-header nav.menu > .menu-dropdown > .menu-dropdown-head > .menu-dropdown-link::before,
  html body header.site-header nav.menu > .menu-dropdown > .menu-dropdown-head > .menu-dropdown-link::after,
  html body header.site-header nav.menu > .menu-dropdown > .menu-dropdown-head > .dropdown-toggle::before,
  html body header.site-header nav.menu > .menu-dropdown > .menu-dropdown-head > .dropdown-toggle::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-image: none !important;
  }

  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu,
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu a,
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu a:hover,
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu a:focus,
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu a.active {
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
  }
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu::before,
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu::after,
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu a::before,
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu a::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}


/* PERMANENT MOBILE NAV INDICATOR FIX — 2026-10-24
   Layanan gets exactly one straight marker on its header row.
   The dropdown wrapper, link, toggle and submenu must never draw extra markers. */
@media screen and (max-width: 760px) {
  html body header.site-header nav.menu > .menu-dropdown,
  html body header.site-header nav.menu > .menu-dropdown.active,
  html body header.site-header nav.menu > .menu-dropdown.open,
  html body header.site-header nav.menu > .menu-dropdown:hover,
  html body header.site-header nav.menu > .menu-dropdown:focus-within {
    border: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-image: none !important;
  }
  html body header.site-header nav.menu > .menu-dropdown::before,
  html body header.site-header nav.menu > .menu-dropdown::after,
  html body header.site-header nav.menu > .menu-dropdown > .menu-dropdown-head::before,
  html body header.site-header nav.menu > .menu-dropdown > .menu-dropdown-head::after,
  html body header.site-header nav.menu > .menu-dropdown > .menu-dropdown-head > .menu-dropdown-link::before,
  html body header.site-header nav.menu > .menu-dropdown > .menu-dropdown-head > .menu-dropdown-link::after,
  html body header.site-header nav.menu > .menu-dropdown > .menu-dropdown-head > .dropdown-toggle::before,
  html body header.site-header nav.menu > .menu-dropdown > .menu-dropdown-head > .dropdown-toggle::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: none !important;
    background-image: none !important;
  }
  html body header.site-header nav.menu > .menu-dropdown > .menu-dropdown-head,
  html body header.site-header nav.menu > .menu-dropdown.open > .menu-dropdown-head,
  html body header.site-header nav.menu > .menu-dropdown.active > .menu-dropdown-head,
  html body header.site-header nav.menu > .menu-dropdown:hover > .menu-dropdown-head,
  html body header.site-header nav.menu > .menu-dropdown:focus-within > .menu-dropdown-head {
    box-sizing: border-box !important;
    border: 0 !important;
    border-left: 6px solid transparent !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-image: none !important;
  }
  html body header.site-header nav.menu > .menu-dropdown.open > .menu-dropdown-head,
  html body header.site-header nav.menu > .menu-dropdown.active > .menu-dropdown-head,
  html body header.site-header nav.menu > .menu-dropdown:hover > .menu-dropdown-head,
  html body header.site-header nav.menu > .menu-dropdown:focus-within > .menu-dropdown-head {
    border-left-color: #ed351f !important;
  }
  html body header.site-header nav.menu > .menu-dropdown > .menu-dropdown-head > .menu-dropdown-link,
  html body header.site-header nav.menu > .menu-dropdown > .menu-dropdown-head > .menu-dropdown-link.active,
  html body header.site-header nav.menu > .menu-dropdown > .menu-dropdown-head > .dropdown-toggle,
  html body header.site-header nav.menu > .menu-dropdown > .menu-dropdown-head > .dropdown-toggle:hover,
  html body header.site-header nav.menu > .menu-dropdown > .menu-dropdown-head > .dropdown-toggle:focus,
  html body header.site-header nav.menu > .menu-dropdown > .menu-dropdown-head > .dropdown-toggle:focus-visible {
    border: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-image: none !important;
  }
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu,
  html body header.site-header nav.menu > .menu-dropdown.open > .dropdown-menu {
    border: 0 !important;
    border-left: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
  }
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu::before,
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu::after,
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu a::before,
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu a::after,
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu a {
    border-left: 0 !important;
    box-shadow: none !important;
  }
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu::before,
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu::after,
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu a::before,
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu a::after {
    content: none !important;
    display: none !important;
  }
}


/* FINAL FIX 2026-10-24 — mobile refresh duplicate on Beranda.
   Use the element border as the sole indicator; disable legacy pseudo markers. */
@media screen and (max-width: 760px) {
  html body header.site-header nav.menu > a::before,
  html body header.site-header nav.menu > a::after,
  html body header.site-header nav.menu > .menu-dropdown::before,
  html body header.site-header nav.menu > .menu-dropdown::after,
  html body header.site-header nav.menu > .menu-dropdown > .menu-dropdown-head::before,
  html body header.site-header nav.menu > .menu-dropdown > .menu-dropdown-head::after,
  html body header.site-header nav.menu > .menu-dropdown > .menu-dropdown-head > .menu-dropdown-link::before,
  html body header.site-header nav.menu > .menu-dropdown > .menu-dropdown-head > .menu-dropdown-link::after,
  html body header.site-header nav.menu > .menu-dropdown > .menu-dropdown-head > .dropdown-toggle::before,
  html body header.site-header nav.menu > .menu-dropdown > .menu-dropdown-head > .dropdown-toggle::after,
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu::before,
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu::after,
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu a::before,
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu a::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    box-shadow: none !important;
    background: none !important;
    background-image: none !important;
  }

  /* Main navigation links: indicator is the left border only. */
  html body header.site-header nav.menu > a {
    border-left: 6px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
  }
  html body header.site-header nav.menu > a.active,
  html body header.site-header nav.menu > a[aria-current],
  html body header.site-header nav.menu > a:hover,
  html body header.site-header nav.menu > a:focus,
  html body header.site-header nav.menu > a:focus-visible {
    border-left-color: #ed351f !important;
  }
  html body header.site-header nav.menu > a.active,
  html body header.site-header nav.menu > a[aria-current] {
    background: #ed351f !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }

  /* Layanan keeps its single indicator on the row wrapper only. */
  html body header.site-header nav.menu > .menu-dropdown,
  html body header.site-header nav.menu > .menu-dropdown > .menu-dropdown-head {
    border: 0 !important;
    border-left: 6px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    background: transparent !important;
    background-image: none !important;
  }
  html body header.site-header nav.menu > .menu-dropdown.active > .menu-dropdown-head,
  html body header.site-header nav.menu > .menu-dropdown.open > .menu-dropdown-head,
  html body header.site-header nav.menu > .menu-dropdown:hover > .menu-dropdown-head,
  html body header.site-header nav.menu > .menu-dropdown:focus-within > .menu-dropdown-head {
    border-left-color: #ed351f !important;
  }
  html body header.site-header nav.menu > .menu-dropdown > .menu-dropdown-head > .menu-dropdown-link,
  html body header.site-header nav.menu > .menu-dropdown > .menu-dropdown-head > .dropdown-toggle {
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    background: transparent !important;
    background-image: none !important;
  }
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu,
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu a {
    border-left: 0 !important;
    box-shadow: none !important;
  }
}


/* FINAL MOBILE MENU REFINEMENT — remove only the submenu's left rail;
   retain the primary Layanan indicator and add a subtle panel shadow. */
@media screen and (max-width: 760px) {
  html body header.site-header nav.menu,
  html body header.site-header nav.menu.open {
    box-shadow: 0 12px 32px rgba(15, 30, 45, 0.16) !important;
  }

  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu,
  html body header.site-header nav.menu > .menu-dropdown.open > .dropdown-menu,
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu[aria-hidden="false"] {
    border-left: 0 !important;
    border-inline-start: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
  }

  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu::before,
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu::after,
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu a::before,
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu a::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu a,
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu a:hover,
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu a:focus,
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu a:focus-visible,
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu a.active {
    border-left: 0 !important;
    border-inline-start: 0 !important;
    box-shadow: none !important;
  }
}


/* MOBILE SUBMENU RAIL REMOVAL — preserve the primary Layanan indicator only. */
@media screen and (max-width: 760px) {
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu,
  html body header.site-header nav.menu > .menu-dropdown.open > .dropdown-menu,
  html body header.site-header nav.menu > .menu-dropdown.active > .dropdown-menu,
  html body header.site-header nav.menu > .menu-dropdown:hover > .dropdown-menu,
  html body header.site-header nav.menu > .menu-dropdown:focus-within > .dropdown-menu {
    border: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-inline: 0 !important;
    border-inline-start: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-image: none !important;
  }
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu::before,
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu::after,
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu > a::before,
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu > a::after,
  html body header.site-header nav.menu > .menu-dropdown.open > .dropdown-menu::before,
  html body header.site-header nav.menu > .menu-dropdown.open > .dropdown-menu::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    box-shadow: none !important;
    background: none !important;
    background-image: none !important;
  }
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu > a,
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu > a:hover,
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu > a:focus,
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu > a:focus-visible,
  html body header.site-header nav.menu > .menu-dropdown > .dropdown-menu > a.active {
    border: 0 !important;
    border-left: 0 !important;
    border-inline-start: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    background-image: none !important;
  }
}


/* SKR: refined split-line scroll cue — lower placement and independently animated light strokes. */
.home-page .hero.hero-video > .hero-scroll-down {
  position:absolute !important; left:50% !important; bottom:10px !important;
  z-index:8 !important; width:82px !important; height:132px !important;
  padding:0 !important; margin:0 !important; border:0 !important; border-radius:0 !important;
  background:transparent !important; box-shadow:none !important;
  display:flex !important; flex-direction:column !important; align-items:center !important;
  justify-content:space-between !important; gap:0 !important;
  color:#fff !important; text-decoration:none !important;
  transform:translateX(-50%) !important; animation:none !important;
}
.home-page .hero.hero-video > .hero-scroll-down .hero-scroll-line {
  position:relative !important; display:block !important; flex:0 0 42px !important;
  width:1px !important; height:42px !important; min-height:42px !important;
  overflow:hidden !important; background:rgba(255,255,255,.38) !important;
  box-shadow:0 0 3px rgba(255,255,255,.12) !important;
}
.home-page .hero.hero-video > .hero-scroll-down .hero-scroll-line::after {
  content:"" !important; position:absolute !important; left:-1px !important; top:-14px !important;
  width:3px !important; height:14px !important; border-radius:3px !important;
  background:#fff !important; opacity:0 !important;
  box-shadow:0 0 7px 1px rgba(255,255,255,.85) !important;
  animation:skrScrollLightTravel 1.65s cubic-bezier(.45,0,.25,1) infinite !important;
  will-change:transform,opacity !important;
}
.home-page .hero.hero-video > .hero-scroll-down .hero-scroll-line-bottom::after {
  animation-delay:.18s !important;
}
.home-page .hero.hero-video > .hero-scroll-down .hero-scroll-label {
  display:block !important; flex:0 0 auto !important; margin:0 !important;
  padding:0 !important; color:#fff !important; font-size:13px !important;
  font-weight:400 !important; line-height:18px !important; letter-spacing:.01em !important;
  text-transform:none !important; text-shadow:0 1px 4px rgba(0,0,0,.65) !important;
}
@keyframes skrScrollLightTravel {
  0% { transform:translateY(0); opacity:0; }
  12% { opacity:1; }
  78% { opacity:1; }
  100% { transform:translateY(56px); opacity:0; }
}
.home-page .hero.hero-video > .hero-scroll-down:hover,
.home-page .hero.hero-video > .hero-scroll-down:focus-visible {
  background:transparent !important; color:#fff !important; border:0 !important;
  transform:translateX(-50%) !important; outline:2px solid rgba(255,255,255,.65) !important;
  outline-offset:5px !important;
}
@media (max-width:760px) {
  .home-page .hero.hero-video > .hero-scroll-down { bottom:8px !important; height:116px !important; width:76px !important; }
  .home-page .hero.hero-video > .hero-scroll-down .hero-scroll-line { flex-basis:36px !important; height:36px !important; min-height:36px !important; }
  .home-page .hero.hero-video > .hero-scroll-down .hero-scroll-label { font-size:12px !important; }
}
@media (prefers-reduced-motion:reduce) {
  .home-page .hero.hero-video > .hero-scroll-down .hero-scroll-line::after { animation:none !important; opacity:1 !important; top:50% !important; }
}


/* SKR FINAL SCROLL CUE — animate real child elements so the light visibly travels. */
.home-page .hero.hero-video > .hero-scroll-down {
  bottom: 10px !important;
  height: 132px !important;
  width: 82px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  transform: translateX(-50%) !important;
}
.home-page .hero.hero-video > .hero-scroll-down .hero-scroll-line {
  position: relative !important;
  display: block !important;
  flex: 0 0 42px !important;
  width: 1px !important;
  height: 42px !important;
  min-height: 42px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.38) !important;
}
.home-page .hero.hero-video > .hero-scroll-down .hero-scroll-light {
  position: absolute !important;
  display: block !important;
  left: -1px !important;
  top: -13px !important;
  width: 3px !important;
  height: 13px !important;
  border-radius: 3px !important;
  background: #fff !important;
  opacity: 0 !important;
  box-shadow: 0 0 7px 1px rgba(255,255,255,.9) !important;
  transform: translate3d(0,0,0);
  animation: skrScrollLightMoveFinal 1.7s cubic-bezier(.42,0,.24,1) infinite !important;
  will-change: transform, opacity;
}
.home-page .hero.hero-video > .hero-scroll-down .hero-scroll-line-bottom .hero-scroll-light {
  animation-delay: .22s !important;
}
@keyframes skrScrollLightMoveFinal {
  0%   { transform: translate3d(0,0,0); opacity: 0; }
  14%  { opacity: 1; }
  76%  { opacity: 1; }
  100% { transform: translate3d(0,55px,0); opacity: 0; }
}
.home-page .hero.hero-video > .hero-scroll-down .hero-scroll-label {
  display: block !important;
  color: #fff !important;
  font-size: 13px !important;
  line-height: 18px !important;
  font-weight: 400 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.65) !important;
}
@media (max-width:760px) {
  .home-page .hero.hero-video > .hero-scroll-down { bottom: 8px !important; height: 116px !important; width: 76px !important; }
  .home-page .hero.hero-video > .hero-scroll-down .hero-scroll-line { flex-basis: 36px !important; height: 36px !important; min-height: 36px !important; }
  .home-page .hero.hero-video > .hero-scroll-down .hero-scroll-label { font-size: 12px !important; }
}


/* SKR SCROLL CUE — JS-driven light; neutralize legacy animation conflicts. */
.home-page .hero.hero-video > .hero-scroll-down .hero-scroll-line {
  position:relative !important; overflow:hidden !important; background:rgba(255,255,255,.38) !important;
}
.home-page .hero.hero-video > .hero-scroll-down .hero-scroll-light {
  position:absolute !important; left:-1px !important; top:0 !important; width:3px !important; height:13px !important;
  display:block !important; border-radius:3px !important; background:#fff !important;
  opacity:0 !important; transform:translate3d(0,-13px,0);
  animation:none !important; will-change:transform,opacity !important;
  box-shadow:0 0 7px 1px rgba(255,255,255,.95) !important;
}


/* SKR SCROLL FINAL: remove the permanent white tracks; show only the travelling light. */
.home-page .hero.hero-video > .hero-scroll-down .hero-scroll-line,
.home-page .hero.hero-video > .hero-scroll-down .hero-scroll-line-top,
.home-page .hero.hero-video > .hero-scroll-down .hero-scroll-line-bottom {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
.home-page .hero.hero-video > .hero-scroll-down .hero-scroll-line::before,
.home-page .hero.hero-video > .hero-scroll-down .hero-scroll-line::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.home-page .hero.hero-video > .hero-scroll-down .hero-scroll-light {
  background: #fff !important;
  box-shadow: 0 0 7px 1px rgba(255,255,255,.95) !important;
}


/* SKR scroll cue final: restore subtle static tracks; cue is decorative, not a link. */
.home-page .hero.hero-video > .hero-scroll-down {
  cursor: default !important;
  pointer-events: none !important;
  text-decoration: none !important;
}
.home-page .hero.hero-video > .hero-scroll-down .hero-scroll-line {
  background: rgba(255,255,255,.48) !important;
  box-shadow: 0 0 3px rgba(255,255,255,.14) !important;
}
.home-page .hero.hero-video > .hero-scroll-down .hero-scroll-line::before,
.home-page .hero.hero-video > .hero-scroll-down .hero-scroll-line::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}
.home-page .hero.hero-video > .hero-scroll-down .hero-scroll-light {
  display: block !important;
}