/* Tema UI indihomejogja.id diselaraskan dengan wifimurah.co.id.
   Hanya mengubah presentasi: konten, data paket, tautan, ID & aksi dipertahankan.
   Dibuat 2026-10-16. */
:root {
  --navy: #0c2461; --navy-deep: #081c47;
  --red: #ec2332; --red-hover: #cf1d2a;
  --accent: #ec2332; --accent-dark: #cf1d2a;
  --accent-soft: #fff0f1; --red-dark: #cf1d2a;
  --primary: #0c2461; --primary-light: #f5f7fb;
  --dark: #0c2461; --text: #16243d;
  --text-primary: #16243d; --text-secondary: #64748b;
  --muted: #64748b; --surface: #f5f7fb; --soft: #f5f7fb;
  --page-bg: #fff; --line: #e4eaf2;
  --card: #fff; --radius: 22px; --shadow: 0 12px 34px rgba(11,32,72,.065);
  --nav-h: 76px;
}
html {scroll-padding-top: 94px}
body.site-theme {background:#fff!important;color:#16243d;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}
body.site-theme :is(button,input,select,textarea){font-family:inherit}
body.site-theme :is(a,button,input,select,textarea,summary):focus-visible{outline:3px solid #6aa4ff;outline-offset:3px}
body.site-theme :is(.container,.shell,.wrap){max-width:1180px}
body.site-theme :is(h1,h2,h3){letter-spacing:-.03em}
body.site-theme :is(.section-title,.section-heading h2){color:#16243d;font-weight:800;line-height:1.2}
body.site-theme :is(.section-subtitle,.section-heading p,.lead){color:#64748b}
body.site-theme :is(.section,.catalog,.guide){scroll-margin-top:76px}
body.site-theme :is(.feature-card,.fitur-item,.card,.tip-card,.step,.trust-card,.area-card,.hero-card,.pkg,.rpc-card,.faq-item,.recommendation-card){border-radius:22px;border-color:#e4eaf2;box-shadow:0 12px 34px rgba(11,32,72,.055)}
body.site-theme :is(.feature-card,.card,.tip-card,.rpc-card,.pkg){transition:transform .2s ease,box-shadow .2s ease}
@media(hover:hover){body.site-theme :is(.feature-card,.card,.tip-card,.rpc-card,.pkg):hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(11,32,72,.11)}}
body.site-theme :is(.section-alt,.section.alt,.catalog,#region-paket){background:#f5f7fb}

/* Navbar putih dengan link pill dan CTA merah, konsisten semua template. */
body.site-theme :is(.navbar,.topbar,nav.nav:not(.footer-links)){
  background:rgba(255,255,255,.97)!important;
  color:#314361!important;
  border-bottom:1px solid #e9edf3!important;
  box-shadow:0 3px 20px rgba(11,32,72,.04);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
body.site-theme :is(.navbar,.topbar){position:sticky;top:0;z-index:1000}
body.site-seo > nav.nav{position:sticky;top:0;z-index:1000}
body.site-region .topbar .nav{background:transparent!important;border-bottom:0!important;box-shadow:none!important;max-width:1180px;padding:0 20px;min-height:76px}
body.site-seo .nav .navin{min-height:76px}
body.site-theme :is(.navbar,.topbar,.nav) :is(.menu a,.nav-links a,.links a,.brand){color:#314361!important}
body.site-theme :is(.navbar,.topbar,.nav) :is(.menu a,.nav-links a,.links a){font-size:13.5px;font-weight:750;text-decoration:none;border-radius:12px}
body.site-theme :is(.navbar,.topbar,.nav) :is(.menu a,.nav-links a,.links a):hover,
body.site-theme :is(.navbar,.topbar,.nav) :is(.menu a.active,.menu a.is-active,.nav-links a.active,.links a.active){color:#cf1d2a!important;background:#fff0f1!important}
body.site-theme .navbar .nav-container{min-height:76px}
body.site-theme :is(.navbar,.topbar) .brand img{max-height:36px;width:auto;object-fit:contain}
body.site-theme .topbar .brand span{color:#314361}
body.site-theme :is(.navbar,.topbar,.nav) :is(.nav-cta,.menu a.nav-cta,.nav-links a.nav-cta){background:#ec2332!important;color:#fff!important;border-radius:999px!important;padding:11px 18px!important;border:0!important;box-shadow:none!important;font-weight:800}
body.site-theme :is(.navbar,.topbar,.nav) :is(.nav-cta,.menu a.nav-cta,.nav-links a.nav-cta):hover{background:#cf1d2a!important;color:#fff!important}
body.site-theme .nav-toggle-bar,body.site-theme .hamburger span{background:#0c2461}
body.site-theme :is(.site-header){background:rgba(255,255,255,.97);border-color:#e9edf3}
body.site-theme :is(.header-contact,.button-red){background:#ec2332;color:#fff}
body.site-theme :is(.header-contact,.button-red):hover{background:#cf1d2a}

/* Intro / section headings wifimurah */
body.site-theme :is(.eyebrow,.section-tag,.hero-eyebrow):not(.hero .eyebrow):not(.hero .hero-eyebrow){letter-spacing:.1em}
body.site-theme :is(.section-tag,.tag,.article-badge){background:#fff0f1;color:#cf1d2a;border-radius:999px}
body.site-theme :is(.btn-main,.btn-primary,.btn-red,.btn.primary,.nav-cta,.pkg-actions .button-red,.rpc-button){background:#ec2332!important;color:#fff!important;border-color:#ec2332!important;border-radius:13px;box-shadow:none}
body.site-theme :is(.btn-main,.btn-primary,.btn-red,.btn.primary,.rpc-button):hover{background:#cf1d2a!important;border-color:#cf1d2a!important}
body.site-theme :is(.btn,.btn-main,.button,.hero-panel-cta){font-weight:750}
body.site-theme :is(.btn-outline,.btn-white,.btn.secondary){border-radius:13px}
body.site-theme :is(.section,.guide){padding-top:76px;padding-bottom:76px}
body.site-theme :is(.footer,.site-footer){background:#081c47;color:#d5dff1}
body.site-theme :is(.footer,.site-footer) :is(a,p,li){color:#d5dff1}
body.site-theme :is(.footer,.site-footer) a:hover{color:#fff;text-decoration:underline}

/* Homepage — hero dua kolom dengan visual asli dipindahkan ke samping. */
body.site-home #hero.hero{
  min-height:0!important;display:block!important;text-align:left!important;position:relative;
  padding:0!important;margin:0!important;color:#fff!important;
  background:linear-gradient(125deg,#081c47,#112f77)!important;
  overflow:hidden;
}
body.site-home #hero.hero:before{display:none!important}
body.site-home #hero.hero:after{content:"";position:absolute;pointer-events:none;right:-245px;top:-215px;width:460px;height:460px;border-radius:50%;background:rgba(255,255,255,.045)}
body.site-home #hero .hero-shell{
  position:relative;z-index:2;display:grid!important;
  grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr)!important;
  gap:25px 38px!important;align-items:center;justify-items:stretch!important;
  padding:66px 24px 50px!important;max-width:1180px!important;
  min-height:620px;
}
body.site-home #hero .hero-left{min-width:0;max-width:none;text-align:left!important;margin:0}
body.site-home #hero .hero-eyebrow{display:inline-flex;align-items:center;margin:0 0 24px!important;padding:8px 14px!important;font-size:12px!important;line-height:1.5;color:#fff!important;background:rgba(255,255,255,.085)!important;border:1px solid rgba(255,255,255,.2)!important;letter-spacing:0;text-transform:none}
body.site-home #hero .hero-eyebrow:before{content:"";width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#57dd89;margin-right:8px}
body.site-home #hero h1{font-size:clamp(36px,4.35vw,58px)!important;line-height:1.1!important;font-weight:800;max-width:590px;margin:0 0 18px!important;color:#fff!important;text-align:left!important;letter-spacing:-.045em!important}
body.site-home #hero .hero-copy{max-width:510px!important;margin:0!important;padding:0!important;color:rgba(255,255,255,.78)!important;font-size:16px!important;line-height:1.75!important;text-align:left!important}
body.site-home #hero #salesInfo{text-align:left!important;font-size:13px!important;line-height:1.7!important;margin:18px 0 4px!important;color:#e4eaf7!important;font-weight:600!important}
body.site-home #hero .hero-actions{display:flex!important;justify-content:flex-start!important;gap:13px!important;margin-top:30px!important;flex-direction:row!important}
body.site-home #hero .btn-main{display:inline-flex;width:auto!important;min-height:48px;border-radius:13px;background:#fff!important;color:#cf1d2a!important;padding:12px 19px!important;font-size:14px}
body.site-home #hero .btn-main:hover{background:#fff0f1!important}
body.site-home #hero .btn-main.btn-outline{background:transparent!important;color:#fff!important;border:1.5px solid rgba(255,255,255,.48)!important}
body.site-home #hero .btn-main.btn-outline:hover{background:rgba(255,255,255,.12)!important}
body.site-home #hero .hero-image-wrapper{
  position:relative!important;inset:auto!important;width:100%!important;height:auto!important;
  display:flex;align-items:center;justify-content:center;z-index:1!important;
  border-radius:26px;overflow:hidden;aspect-ratio:1.26;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);
  box-shadow:0 18px 35px rgba(0,0,0,.16);
}
body.site-home #hero .hero-image-wrapper picture{display:block;width:100%;height:100%}
body.site-home #hero .hero-image-wrapper img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;display:block!important}
body.site-home #hero .hero-proof-cards{grid-column:1/-1;max-width:none;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin:6px 0 0!important}
body.site-home #hero .hero-proof-card{background:rgba(255,255,255,.085);border:1px solid rgba(255,255,255,.16);box-shadow:none;border-radius:16px;padding:15px 17px;color:#fff;text-align:left}
body.site-home #hero .hero-proof-card strong{color:#fff!important;font-size:13px}
body.site-home #hero .hero-proof-card span{color:rgba(255,255,255,.78)!important;font-size:12px}
body.site-home .section-title{font-size:clamp(28px,3vw,38px);line-height:1.2}
body.site-home .section-subtitle{max-width:700px;margin-inline:auto;font-size:15.5px}
body.site-home .feature-card{background:#fff;border:1px solid #e4eaf2;box-shadow:0 12px 34px rgba(11,32,72,.055)}
body.site-home .feature-card h3{color:#16243d}
body.site-home .feature-card p{color:#64748b}
body.site-home .area-card-link .area-card-cta{color:#cf1d2a}
body.site-home .faq .faq-item,body.site-home .faq-item{border-color:#e4eaf2}
body.site-home .paket-cta-full{background:#fff}
body.site-home .trust-section{background:#f5f7fb}
body.site-home .wa-float{background:#25d366!important;box-shadow:0 12px 30px rgba(37,211,102,.22)}

/* Katalog paket sudah mempunyai struktur yang hampir identik dengan referensi. */
body.site-package .package-hero{border-radius:0;background:linear-gradient(125deg,#081c47,#112f77);padding-top:76px}
body.site-package .package-hero:after{top:-200px;right:-240px;background:rgba(255,255,255,.045);width:460px;height:460px}
body.site-package .package-hero .hero-inner{min-height:630px;gap:38px}
body.site-package .hero-copy-wrap{padding-block:42px}
body.site-package .hero-poster img{aspect-ratio:1.26;filter:drop-shadow(0 18px 27px rgba(0,0,0,.18))}
body.site-package .catalog{padding-block:76px}
body.site-package .guide{background:#fff}
body.site-package .faq{background:#f5f7fb}
body.site-package :is(.pkg,.tip-card,.faq-item){border-radius:22px}

/* Halaman area: tetap menampilkan seluruh data coverage dan katalog, tema selaras. */
body.site-region .hero{background:linear-gradient(125deg,#081c47,#112f77)!important;color:#fff}
body.site-region .hero-wrap{max-width:1180px;padding:70px 22px 66px;grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr);gap:38px}
body.site-region .hero h1{font-size:clamp(36px,4.1vw,55px);line-height:1.1;letter-spacing:-.045em}
body.site-region .hero .eyebrow{background:rgba(255,255,255,.085);border:1px solid rgba(255,255,255,.2);font-size:12px;color:#fff}
body.site-region .hero p{font-size:16px;color:rgba(255,255,255,.8)}
body.site-region .hero-card{background:#fff;border-radius:26px;border:1px solid #e4eaf2;box-shadow:0 18px 40px rgba(0,0,0,.15)}
body.site-region .hero-card h2{color:#16243d}
body.site-region .btn.btn-white{background:#fff;color:#cf1d2a}
body.site-region .btn.btn-red{background:#ec2332;color:#fff;border-color:#ec2332}
body.site-region .section .section-head h2{font-size:clamp(28px,3vw,38px)}
body.site-region .section .tag{color:#cf1d2a}
body.site-region .chip{border-color:#e4eaf2;color:#314361;background:#fff}
body.site-region .step:before{background:#ec2332}
body.site-region .cta{background:linear-gradient(125deg,#081c47,#112f77)}
body.site-region .cta h2{color:#fff}
body.site-region #region-paket .rpc-filter[aria-pressed="true"]{background:#0c2461;border-color:#0c2461;color:#fff}
body.site-region #region-paket .rpc-category{color:#cf1d2a}
body.site-region #region-paket .rpc-price{color:#0c2461}
body.site-region #region-paket .rpc-button{border-radius:13px}
body.site-region .footer{background:#081c47}

/* Blog dan add-on: navigasi putih, hero navy, body berupa kartu terang. */
body.site-seo{background:#fff!important}
body.site-seo > nav.nav{background:rgba(255,255,255,.97)!important}
body.site-seo > nav.nav .brand{color:#cf1d2a!important}
body.site-seo > header.hero{background:linear-gradient(125deg,#081c47,#112f77)!important;border:0;color:#fff;padding:78px 0 70px}
body.site-seo > header.hero h1{font-size:clamp(36px,4.35vw,58px);line-height:1.1;color:#fff;letter-spacing:-.045em}
body.site-seo > header.hero p{color:rgba(255,255,255,.8);font-size:16px;line-height:1.75}
body.site-seo > header.hero .eyebrow{background:rgba(255,255,255,.085);border:1px solid rgba(255,255,255,.2);color:#fff;letter-spacing:0;font-size:12px;text-transform:none}
body.site-seo > header.hero .breadcrumbs{color:#d7e1f3}
body.site-seo > header.hero .breadcrumbs a{color:#fff}
body.site-seo .btn.primary{background:#ec2332;border-color:#ec2332;color:#fff}
body.site-seo .btn.secondary{color:#0c2461;background:#fff;border-color:#fff}
body.site-seo main section{padding:74px 0}
body.site-seo main section:nth-child(even){background:#f5f7fb}
body.site-seo .card{border-radius:22px;border:1px solid #e4eaf2;box-shadow:0 12px 34px rgba(11,32,72,.055)}
body.site-seo .card :is(h2,h3){font-size:clamp(18px,2vw,23px);color:#16243d}
body.site-seo .card p{color:#64748b}
body.site-seo .note{border-left-color:#ec2332}
body.site-seo .cta{background:linear-gradient(125deg,#081c47,#112f77);border-radius:24px}
body.site-seo .cta :is(h2,p){color:#fff}
body.site-seo .footer{background:#081c47;color:#d5dff1;padding:34px 0}

/* Artikel, kebijakan dan halaman bantuan: hindari kehilangan hierarki teks. */
body.site-editorial :is(.navbar){background:rgba(255,255,255,.97)!important}
body.site-editorial main.article-page{background:#f5f7fb;padding-top:65px}
body.site-editorial .article-header{position:relative;max-width:1180px;margin:0 auto 34px;text-align:left;padding:34px 38px;border-radius:24px;background:linear-gradient(125deg,#081c47,#112f77)}
body.site-editorial .article-header :is(h1,p){color:#fff!important;text-align:left}
body.site-editorial .article-header h1{font-size:clamp(30px,4vw,48px);letter-spacing:-.04em;line-height:1.13}
body.site-editorial .article-header .article-badge{color:#fff;background:rgba(255,255,255,.085);border:1px solid rgba(255,255,255,.2)}
body.site-editorial .article-content{border-radius:23px;border:1px solid #e4eaf2;box-shadow:0 12px 34px rgba(11,32,72,.055);color:#16243d}
body.site-editorial .article-content h2,body.site-editorial .article-content h3{color:#16243d;text-align:left}
body.site-editorial .article-content :is(p,li){color:#52627a}
body.site-editorial .article-content a{color:#cf1d2a}
body.site-editorial .article-content .toc{background:#f5f7fb;border-color:#e4eaf2}
body.site-editorial .article-cta{background:linear-gradient(125deg,#081c47,#112f77);box-shadow:none;border-radius:22px}
body.site-editorial .article-cta p{color:#fff}
body.site-editorial .article-cta a{color:#cf1d2a}
body.site-info :is(.hero,.help-hero){background:linear-gradient(125deg,#081c47,#112f77)!important;color:#fff}
body.site-info :is(.hero,.help-hero) h1{color:#fff!important}
body.site-info :is(.hero,.help-hero) p{color:rgba(255,255,255,.8)!important}
body.site-info .hero-image-wrapper{opacity:.16}
body.site-info .hero:before{background:linear-gradient(125deg,rgba(8,28,71,.93),rgba(17,47,119,.9))}
body.site-info :is(.help-badge,.section-tag){border-radius:999px}
body.site-info main .section:nth-of-type(even){background:#f5f7fb}
body.site-info .section-title{color:#16243d}

@media(max-width:1050px){
  body.site-home #hero .hero-shell{gap:24px;grid-template-columns:minmax(0,1fr) minmax(0,.9fr)!important}
  body.site-home #hero h1{font-size:clamp(34px,4.5vw,50px)!important}
  body.site-package .package-hero .hero-inner{min-height:530px}
}
@media(max-width:860px){
  body.site-home #hero .hero-shell{grid-template-columns:1fr!important;min-height:0;gap:28px;padding:52px 20px 44px!important}
  body.site-home #hero .hero-left{max-width:720px;width:100%}
  body.site-home #hero .hero-image-wrapper{max-width:650px;justify-self:center;aspect-ratio:1.55}
  body.site-home #hero .hero-proof-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.site-region .hero-wrap{grid-template-columns:1fr;gap:24px}
  body.site-package .package-hero .hero-inner{min-height:0}
}
@media(max-width:750px){
  body.site-home #hero .hero-shell{padding:48px 16px 40px!important}
  body.site-home #hero h1{font-size:clamp(34px,9vw,45px)!important}
  body.site-home #hero .hero-actions{flex-direction:column!important;align-items:stretch;justify-content:flex-start!important;gap:10px!important}
  body.site-home #hero .hero-actions .btn-main{width:100%!important}
  body.site-home #hero .hero-proof-cards{grid-template-columns:1fr;gap:10px}
  body.site-home #hero .hero-image-wrapper{aspect-ratio:1.26;border-radius:18px}
  body.site-home .navbar .menu{background:#fff!important;border:1px solid #e9edf3!important;border-radius:0 0 18px 18px;box-shadow:0 16px 30px rgba(11,32,72,.12)}
  body.site-theme .navbar .menu a,body.site-theme .navbar .nav-links a{color:#314361!important}
  body.site-theme .navbar .menu a.nav-cta,body.site-theme .navbar .nav-links a.nav-cta{color:#fff!important}
  body.site-theme .navbar .menu a:hover,body.site-theme .navbar .nav-links a:hover{background:#fff0f1!important;color:#cf1d2a!important}
  body.site-theme :is(.section,.guide){padding-top:55px;padding-bottom:55px}
  body.site-seo > header.hero{padding:52px 0}
  body.site-seo main section{padding:52px 0}
  body.site-editorial .article-header{padding:26px 22px}
  body.site-region .topbar .nav{min-height:72px}
  body.site-region .topbar .nav-links{display:none}
}
@media(max-width:480px){
  body.site-home #hero .hero-copy{font-size:15px!important}
  body.site-home #hero .hero-proof-card{padding:12px 15px}
  body.site-region .hero-wrap{padding:45px 18px}
  body.site-editorial .article-header h1{font-size:30px}
}
@media(prefers-reduced-motion:reduce){body.site-theme *{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Navigation mobile pada halaman wilayah, artikel hub dan add-on. */
body.site-theme .theme-mobile-toggle{display:none;align-items:center;justify-content:center;flex-direction:column;gap:5px;width:42px;height:42px;background:#fff;border:1px solid #e4eaf2;border-radius:12px;cursor:pointer;flex:0 0 auto}
body.site-theme .theme-mobile-toggle span{width:20px;height:2px;border-radius:2px;background:#0c2461;transition:transform .18s ease,opacity .18s ease}
body.site-theme .theme-mobile-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.site-theme .theme-mobile-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
body.site-theme .theme-mobile-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:850px){
  body.site-region .topbar .nav,body.site-seo > nav.nav .navin{position:relative}
  body.site-region .theme-mobile-toggle,body.site-seo .theme-mobile-toggle{display:flex;margin-left:auto}
  body.site-region .topbar .nav-links,body.site-seo .nav .links{
    display:none!important;position:absolute;left:0;right:0;top:calc(100% - 1px);z-index:1010;
    flex-direction:column;align-items:stretch;gap:3px;padding:13px!important;
    border:1px solid #e4eaf2;background:#fff!important;border-radius:0 0 18px 18px;
    box-shadow:0 16px 28px rgba(11,32,72,.13);
  }
  body.site-region .topbar .nav-links.theme-open,body.site-seo .nav .links.theme-open{display:flex!important}
  body.site-region .topbar .nav-links a,body.site-seo .nav .links a{display:block!important;padding:11px 14px!important;color:#314361!important;text-align:left;border-radius:11px!important;opacity:1}
  body.site-region .topbar .nav-links .nav-cta{color:#fff!important;text-align:center}
  body.site-seo .nav .links a:hover{background:#fff0f1!important;color:#cf1d2a!important}
}