/* ====== RESET RINGAN ====== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100vw;min-height:100vh}
body{font-family:'Segoe UI',Arial,sans-serif;background:#fff;overflow-x:hidden}

/* ====== NAVBAR (dipakai index.html & maintenance.html) ====== */
.header-spacer{height:100px}
.navbar{
  width:100vw;background:#ffffffcc!important;
  box-shadow:rgba(14,30,37,.12)0 2px 4px,rgba(14,30,37,.32)0 2px 16px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 38px;height:88px;position:fixed;top:0;left:0;right:0;z-index:1001;
  transition:height .2s,padding .2s;backdrop-filter:blur(6px)
}
.navbar .brand{display:flex;align-items:center;gap:12px;font-size:1.32rem;font-weight:700;color:#1976d2;text-decoration:none}
.navbar .brand img{height:62px;width:auto;display:block;transition:height .2s}
.navbar .nav-links{display:flex;align-items:center;gap:28px}
.navbar .nav-link{color:#394867;text-decoration:none;font-weight:500;font-size:1.05rem;transition:color .2s;border-bottom:2.5px solid transparent;padding:8px 6px}
.navbar .nav-link:hover{color:#00acaa}
.navbar .nav-link.active,.navbar .nav-link[aria-current="page"]{color:#00acaa;font-weight:700;border-bottom:2.5px solid #00acaa;background:#e5f7fb}
.navbar .hamburger{display:none;background:none;border:none;font-size:1.92rem;color:#00acaa;cursor:pointer;margin-left:12px;z-index:12001;padding:7px 10px;margin-right:18px}
.navbar .hamburger i.fa-bars{color:#00acaa!important;text-shadow:0 1px 5px #01968b33;transition:color .2s}
.navbar .hamburger:hover i.fa-bars{color:#0a8684!important}
.hamburger-box{width:32px;height:22px;display:inline-block;position:relative}
.hamburger-inner{display:block;width:32px;height:4px;background:#00acaa;border-radius:3px;position:absolute;top:50%;margin-top:-2px;transition:all .27s cubic-bezier(.68,-.06,.32,1.42)}
.hamburger-inner::before,.hamburger-inner::after{content:"";position:absolute;width:32px;height:4px;background:#00acaa;border-radius:3px;transition:all .27s cubic-bezier(.68,-.06,.32,1.42)}
.hamburger-inner::before{top:-10px}.hamburger-inner::after{bottom:-10px}
.hamburger.is-active .hamburger-inner{background:transparent}
.hamburger.is-active .hamburger-inner::before{transform:translateY(10px) rotate(45deg)}
.hamburger.is-active .hamburger-inner::after{transform:translateY(-10px) rotate(-45deg)}
@media(max-width:900px){.navbar{padding:0 13px;height:76px;border-radius:0 0 14px 14px}.navbar .brand{font-size:1.08rem}.navbar .brand img{height:48px}.navbar .nav-links{gap:8px}.header-spacer{height:76px}}
@media(max-width:800px){
  .navbar .hamburger{display:block}
  .navbar .nav-links{
    position:fixed;top:0;left:0;height:100vh;width:100vw;background:#fff;
    box-shadow:0 0 40px #1976d23c;flex-direction:column;gap:4px;align-items:flex-start;justify-content:flex-start;
    padding:0;margin:0;z-index:12000;transform:translate3d(-100vw,0,0);transition:transform .32s cubic-bezier(.32,.72,0,1);
    display:flex;overflow-y:auto;overflow-x:hidden;box-sizing:border-box
  }
  .navbar .nav-links.active{transform:translate3d(0,0,0)}
  .navbar .nav-logo-mobile{width:100%;display:flex;justify-content:center;align-items:center;padding:22px 0 8px;border-bottom:1.5px solid #e9ecf7;margin-bottom:2px}
  .navbar .nav-logo-mobile img{height:58px;width:auto;max-width:180px;object-fit:contain;display:block}
  .navbar .nav-link{font-size:1.25rem;width:100%;padding:14px 28px;border:none;border-bottom:1.5px solid #e9ecf7;background:none;text-align:left}
  .navbar .nav-link.active{background:#e5f7fb;color:#00acaa;font-weight:700;border-bottom:none;border-left:none!important}
}
@media(max-width:600px){
  .navbar{height:70px;padding:0 5px}
  .navbar .brand{font-size:1rem}
  .navbar .brand img{height:48px!important;max-height:48px!important;width:auto!important;display:block;margin-left:10px}
  .navbar .nav-logo-mobile img{height:44px!important;max-height:44px!important}
  .navbar .nav-link{font-size:1.11rem;padding:13px 16px}
  .header-spacer{height:65px}
}
@media(min-width:801px){.navbar .close-nav,.navbar .nav-logo-mobile{display:none!important}}
.navbar .nav-link.active{border-left:none!important}
.nav-overlay{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(255,255,255,.12);z-index:11000;transition:opacity .22s}
.nav-overlay.active{display:block}

/* ====== HERO (landing/maintenance) ====== */
.hero-simple{width:100vw;max-width:100vw;margin:0 auto;display:flex;flex-direction:column;align-items:center;padding-top:38px;padding-bottom:32px;background:none;border-radius:18px}
.hero-simple-img{width:98vw;max-width:480px;height:auto;display:block;object-fit:contain;border-radius:0;margin: -20px auto 34px;box-shadow:none;background:transparent}
@media(max-width:600px){
  .hero-simple{padding-top:4vw!important;min-height:0!important}
  .hero-simple-img{width:74vw!important;max-width:210px!important;min-width:110px!important;margin:26px auto 12px!important;display:block}
}
.get-started-btn{
  display:inline-flex;align-items:center;gap:10px;border:none;border-radius:24px;background:#00acaa;color:#fff;font-weight:800;
  padding:14px 22px;cursor:pointer;box-shadow:0 4px 22px #029a9930,0 1.5px 6px #c4ebe480;transition:.18s
}
.get-started-btn:active{transform:scale(.98);background:#01968b}
.find-txt{opacity:.9}.rsf-txt{font-weight:900}

/* ====== LOADING OVERLAY (landing) ====== */
.loading-overlay{position:fixed;inset:0;background:#fff;z-index:15000;display:none;align-items:center;justify-content:center;flex-direction:column}
.loading-center{display:flex;align-items:center;justify-content:center;flex-direction:column}
.loading-img-above{width:140px;height:auto;margin-bottom:8px}
.loading-footer-image{position:fixed;left:0;right:0;bottom:54px;pointer-events:none}
.loading-footer-image img{width:100vw;height:auto;display:block}
.loading-footer{position:fixed;left:0;right:0;bottom:0}

/* ====== FOOTER ====== */
.footer-image{width:100vw;left:0;position:fixed;bottom:54px;z-index:13001;background:none;margin:0;padding:0;pointer-events:none}
.footer-image img{width:100vw;max-width:100vw;min-width:100vw;height:auto;object-fit:cover;margin:0;display:block;border-radius:0}
@media(max-width:600px){.footer-image{bottom:44px}}
@media(min-width:600px){.footer-copyright{position:static;box-shadow:none}body{padding-bottom:0;margin-top:-7px}.footer-image{position:static;bottom:auto;margin-bottom:0}.footer-image img{width:100vw;max-width:100vw;min-width:100vw;height:auto;border-radius:0}}
.footer-copyright{
  width:100vw;background:#c3da3e;color:#717b91;text-align:center;font-size:1rem;letter-spacing:.04em;
  padding:14px 0 8px;border-top:14px solid #00acaa;user-select:none;position:fixed;left:0;right:0;bottom:0;z-index:12001;
  box-shadow:0 -2px 12px 0 #e0e5ec3d;backdrop-filter:blur(3px);transition:padding .2s,font-size .2s,border-top-width .2s
}
.footer-copyright .footer-text{display:inline-flex;align-items:center;gap:4px}
.footer-copyright .fa-copyright{margin-right:2px;color:#fff}
body{padding-bottom:70px}
@media(max-width:600px){
  .footer-copyright{font-size:.77rem!important;padding:10px 0!important;border-top-width:6px!important;color:#fff;background:#00acaa;height:44px}
  body{padding-bottom:50px!important}
}

/* ====== TEKS HERO MAINTENANCE ====== */
.hero-title{margin-top:18px;color:#00acaa;font-size:2.3rem;font-weight:700;letter-spacing:.01em;text-align:center}
.hero-desc{font-size:1.18rem;margin-top:16px;color:#4c586e;text-align:center}
@media(max-width:600px){.hero-desc{padding:0 7vw;font-size:.88rem;line-height:1.33;word-break:break-word;margin-top:8px}}

/* kecil-kecil tapi penting */
.pulse-smooth{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}