/* ============================================================
   NETLIFE V10.1 — Tema Biru BCA
   Dipilih otomatis melalui config/theme-settings.json.
   ============================================================ */
:root{
  --navy:#090909;
  --navy-2:#151515;
  --blue:#0060AF;
  --cyan:#0086D6;
  --purple:#004A8F;
  --gold:#4DA3E2;
  --gold-2:#B9DCF4;
  --ink:#171719;
  --muted:#6d6d75;
  --soft:#f5f6f7;
  --white:#ffffff;
  --line:#dee3ea;
  --green:#16945f;
  --shadow:0 24px 70px rgba(0,12,30,.14);
  --shadow-lg:0 36px 100px rgba(0,0,0,.38);
  --red:#0060AF;
  --red-bright:#0086D6;
  --red-dark:#00427A;
  --red-deep:#001C33;
  --black:#050505;
  --black-2:#0d0d0f;
  --black-3:#17171a;
  --red-soft:#EEF7FD;
}

html{scrollbar-color:#0060AF #111111}
body{
  color:var(--ink);
  background:#ffffff;
  accent-color:var(--red);
}
::selection{background:#0060AF;color:#ffffff}

/* Header & primary navigation */
.topline{
  background:linear-gradient(90deg,#000f25,#005BAA,#0086D6,#00427A,#000f25);
  box-shadow:0 0 16px rgba(0,106,255,.58);
}
.site-header{
  background:rgba(7,7,8,.90);
  border-bottom:1px solid rgba(55,138,255,.22);
  box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.site-header.is-scrolled{
  background:rgba(5,5,6,.97);
  box-shadow:0 15px 45px rgba(0,0,0,.45);
  border-bottom-color:rgba(48,134,255,.32);
}
.site-header .brand strong{color:#ffffff}
.site-header .brand small{color:#bcbcbc}
.site-header .brand img{
  filter:drop-shadow(0 0 10px rgba(255,255,255,.12));
}
.desktop-nav>a,
.desktop-nav .nav-dropdown>button{color:#dedede}
.desktop-nav>a:hover,
.desktop-nav>a.is-active,
.desktop-nav .nav-dropdown:hover>button,
.desktop-nav .nav-dropdown:focus-within>button,
.desktop-nav .nav-dropdown.is-open>button,
.desktop-nav .nav-dropdown.is-active>button{
  color:#ffffff;
  background:linear-gradient(135deg,rgba(31,124,255,.28),rgba(0,50,120,.32));
  box-shadow:inset 0 0 0 1px rgba(75,150,255,.22);
}
.menu-toggle,
.icon-btn{
  color:#ffffff;
  background:linear-gradient(135deg,#00183a,#004cb6);
  box-shadow:0 10px 28px rgba(0,62,150,.28);
}

/* Dropdown desktop */
.nav-dropdown-menu,
.login-dropdown-menu{
  color:#f6f6f6;
  border-color:rgba(67,145,255,.24);
  background:rgba(13,13,15,.985);
  box-shadow:0 28px 85px rgba(0,0,0,.55),0 0 0 1px rgba(0,106,255,.06);
}
.nav-dropdown-menu:before{
  background:#0d0d0f;
  border-color:rgba(67,145,255,.24);
}
.nav-dropdown-menu a,
.login-dropdown-menu a{color:#ededed}
.nav-dropdown-menu a:hover,
.login-dropdown-menu a:hover,
.mobile-bottom-nav .mobile-login-menu a:hover{
  color:#ffffff;
  background:linear-gradient(135deg,rgba(35,127,255,.22),rgba(0,44,105,.34));
}
.product-menu .menu-feature{
  background:radial-gradient(circle at 90% 0,rgba(74,149,255,.32),transparent 42%),linear-gradient(135deg,#171719,#003a8b);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.product-menu .menu-feature small{color:#d0e4ff}
.login-dropdown-menu small{color:#aaaaaa}
.login-mini-icon,
.login-mini-icon.stockist{
  background:linear-gradient(145deg,#368aff,#003f97 58%,#001634);
  box-shadow:0 10px 25px rgba(0,73,175,.30);
}

/* Buttons */
.btn-primary,
.btn-gold{
  color:#ffffff;
  background:linear-gradient(135deg,#0086D6 0%,#0060AF 48%,#003B70 100%);
  box-shadow:0 15px 34px rgba(0,76,183,.32),inset 0 1px rgba(255,255,255,.22);
}
.btn-primary:hover,
.btn-gold:hover{
  background:linear-gradient(135deg,#4DA3E2,#0074C8 48%,#00427A);
  box-shadow:0 18px 40px rgba(0,85,205,.42);
}
.btn-light{
  color:#171719;
  background:#ffffff;
  border:1px solid rgba(0,74,177,.18);
}
.btn-ghost{
  color:#00579F;
  background:#f1f7ff;
  border-color:#cadaf0;
}
.btn-ghost:hover{background:#e3efff}
.text-link{color:#0060AF}
.back-to-top{
  background:linear-gradient(145deg,#0086D6,#004A8F);
  box-shadow:0 15px 35px rgba(0,67,160,.35);
}

/* Hero sliders */
.hero-home,
.hero-home.hero-slider,
.hero-slide-one,
.hero-slide-two,
.hero-slide-three{
  background-color:#030303;
}
.hero-slide-one{
  background:radial-gradient(circle at 78% 20%,rgba(35,127,255,.30),transparent 34%),radial-gradient(circle at 15% 85%,rgba(0,50,119,.30),transparent 40%),linear-gradient(135deg,#020202 0%,#0b0b0c 48%,#001b42 100%);
}
.hero-slide-two{
  background:radial-gradient(circle at 76% 26%,rgba(67,145,255,.31),transparent 34%),radial-gradient(circle at 13% 83%,rgba(0,39,93,.37),transparent 38%),linear-gradient(135deg,#030303 0%,#000a18 51%,#003279 100%);
}
.hero-slide-three{
  background:radial-gradient(circle at 80% 22%,rgba(31,124,255,.29),transparent 32%),radial-gradient(circle at 17% 84%,rgba(0,75,180,.24),transparent 39%),linear-gradient(135deg,#000000 0%,#111111 50%,#001f4b 100%);
}
.hero-slider .hero-slide::before,
.hero-home:after{
  background-image:linear-gradient(rgba(70,147,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(70,147,255,.045) 1px,transparent 1px);
}
.a1{background:#0086D6}
.a2{background:#00427A}
.eyebrow{color:#8FC8ED}
.eyebrow.dark{color:#0060AF}
.eyebrow i{background:linear-gradient(90deg,#0086D6,#004A8F)}
.hero-copy h1 em,
.hero-copy h2 em,
.page-hero h1 em,
.section h2 em,
.hero-slider .hero-copy h1 em,
.hero-slider .hero-copy h2 em{
  background:linear-gradient(90deg,#0086D6,#B9DCF4,#ffffff,#4DA3E2);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.product-stage{
  background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.16),rgba(0,35,84,.47) 58%,rgba(0,0,0,.80));
  box-shadow:inset 0 0 95px rgba(0,106,255,.14),0 50px 120px rgba(0,0,0,.58);
}
.product-stage:before,
.product-stage:after{border-color:rgba(72,148,255,.35)}
.float-card{
  background:rgba(0,15,35,.72);
  border-color:rgba(72,148,255,.24);
}
.float-card span{color:#a7c0e4}
.product-pair-stage::before,
.product-pair-stage::after{border-color:rgba(70,147,255,.35)}
.product-pair-stage .pair-glow,
.product-pair-stage.pair-blue .pair-glow{
  background:linear-gradient(135deg,#0086D6,#00427A,#000a17);
}
.hero-slider-arrow,
.hero-slider-dot.is-active{
  background:linear-gradient(135deg,#0086D6,#004A8F);
}
.hero-slider-dot{border-color:rgba(255,255,255,.52)}
.hero-slider-progress span{background:linear-gradient(90deg,#0086D6,#ffffff,#0086D6)}

/* Internal page hero */
.page-hero,
.package-hero,
.contact-hero,
.product-detail-hero,
.ethics-hero,
.gallery-hero,
.video-hero,
.testimonial-hero{
  background:radial-gradient(circle at 80% 18%,rgba(45,132,255,.28),transparent 32%),radial-gradient(circle at 10% 90%,rgba(0,47,112,.28),transparent 38%),linear-gradient(135deg,#020202,#111111 56%,#00275d);
}
.hero-logo-card,
.contact-bubble,
.video-device,
.ethics-seal{
  background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(0,45,108,.18));
  border-color:rgba(78,152,255,.25);
  box-shadow:0 30px 85px rgba(0,0,0,.42);
}
.hero-logo-card span{color:#c0daff}

/* Content sections */
.section-soft{background:linear-gradient(180deg,#f8f9fa,#f1f3f5)}
.section-ink{
  background:radial-gradient(circle at 82% 8%,rgba(30,124,255,.22),transparent 31%),linear-gradient(135deg,#030303,#101011 58%,#001a3e);
}
.trust-strip{border-color:#dee3ea}
.trust-grid b{color:#0052c6}
.info-card,
.notice-card{
  background:#f1f7ff;
  border-color:#cad9ef;
}
.info-card b,
.notice-card strong,
.vision-grid article>span,
.path-card span,
.value-grid article>span,
.process-grid article>span,
.form-head span,
.video-card>div:last-child>span,
.package-tier,
.product-detail-copy .product-kicker{
  color:#0060AF;
}
.check-list li:before{
  background:#e1eeff;
  color:#004bb4;
}
.stack-badge{
  background:linear-gradient(135deg,#2c84ff,#00427A);
  box-shadow:0 18px 45px rgba(0,60,144,.30);
}
.feature-card small{color:#8FC8ED}
.quote-card{
  background:radial-gradient(circle at 90% 10%,rgba(83,155,255,.25),transparent 37%),linear-gradient(135deg,#0a0a0b,#002e6f);
}
.quote-card span{color:#B9DCF4}
.cta-card,
.cta-panel{
  background:radial-gradient(circle at 90% 10%,rgba(74,149,255,.24),transparent 35%),linear-gradient(135deg,#080808,#000b1b 55%,#003682);
  border-color:rgba(73,149,255,.18);
}

/* Cards, tables, product and forms */
.product-card,
.video-card,
.contact-form,
.vision-grid article,
.path-card,
.value-grid article,
.process-grid article,
.package-card,
.stock-card,
.ethic-card,
.testimonial-card,
.detail-panel,
.product-fact,
.related-product,
.submission-card{
  border-color:#dee3ea;
  box-shadow:0 16px 45px rgba(0,20,48,.08);
}
.product-card:hover,
.video-card.has-video:hover,
.related-product:hover{
  box-shadow:0 28px 65px rgba(0,40,95,.18);
}
.product-image{background:#edeff2}
.product-image span{
  background:linear-gradient(135deg,rgba(20,20,20,.94),rgba(0,55,132,.92));
}
.table-wrap{border-color:#dee3ea;box-shadow:0 14px 42px rgba(0,29,70,.09)}
.data-table thead th{
  color:#ffffff;
  background:linear-gradient(135deg,#171719,#00357f);
}
.data-table tbody tr:nth-child(even){background:#f7faff}
.data-table tbody tr:hover{background:#ecf4ff}
.contact-form input,
.contact-form textarea,
.contact-form select{
  border-color:#d1d7df;
  background:#f9fafc;
  color:#151c25;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{
  border-color:#0057d0;
  box-shadow:0 0 0 4px rgba(0,87,208,.11);
}
.form-note{color:#00429e}
.code-card,
.video-settings-note{
  background:linear-gradient(135deg,#0b0b0c,#001d45);
  border-color:rgba(60,141,255,.24);
}
.video-config-path small{color:#9cc5ff}
.video-config-path code{color:#ffffff}
.video-config-path span{color:#bdc6d3}
.video-play,
.video-poster button{
  background:linear-gradient(145deg,rgba(48,134,255,.92),rgba(0,42,100,.94));
  box-shadow:0 14px 38px rgba(0,54,130,.38);
}
.video-placeholder{
  background:radial-gradient(circle,#00337a,#080808);
}

/* Product detail */
.product-detail-stage:before,
.product-detail-stage:after{border-color:rgba(70,147,255,.30)}
.product-detail-stage .stage-glow{background:radial-gradient(circle,rgba(35,127,255,.32),transparent 67%)}
.product-fact strong,
.detail-panel h2,
.related-product span{color:#004db9}
.info-box{
  background:#EEF7FD;
  border-color:#ccdbef;
}
.warning-box{
  background:#f4f9ff;
  border-color:#c9d6e9;
}

/* Gallery */
.page-galeri-foto .gallery-item{
  background:#111111;
  border:1px solid rgba(0,75,181,.22);
  box-shadow:0 18px 48px rgba(0,19,45,.18);
}
.page-galeri-foto .gallery-item:hover,
.page-galeri-foto .gallery-item:focus-visible{
  box-shadow:0 30px 68px rgba(0,47,114,.28);
}
.page-galeri-foto .gallery-item figcaption{
  background:linear-gradient(transparent,rgba(0,5,12,.94));
}
.page-galeri-foto .gallery-item figcaption span{color:#B9DCF4}
.lightbox{background:rgba(0,0,0,.92)}

/* Marketing plan */
.plan-highlight{
  background:radial-gradient(circle at 100% 0,rgba(74,149,255,.26),transparent 38%),linear-gradient(145deg,rgba(15,15,16,.95),rgba(0,39,93,.92),rgba(0,12,28,.95));
  border-color:rgba(74,149,255,.27);
}
.plan-highlight small{color:#9cc5ff}
.plan-highlight span{color:#ffffff}
.plan-highlight b{color:#d8dfe8}
.executive-package-card,
.ro-choice-card,
.ro-benefit-grid article,
.level-card,
.profit-card{
  border-color:#dae1ea;
  box-shadow:0 18px 55px rgba(0,22,54,.10);
}
.executive-package-card::before,
.executive-silver::before,
.executive-gold::before,
.executive-platinum::before,
.executive-diamond::before{
  background:linear-gradient(90deg,#00183a,#0057d1,#5b9fff);
}
.executive-card-head{
  background:linear-gradient(145deg,#fafcff,#edf2f8);
}
.executive-card-head>span{
  background:linear-gradient(145deg,#0086D6,#003682);
  box-shadow:0 8px 22px rgba(0,63,151,.25);
}
.executive-card-head strong,
.executive-bonus-list dd,
.executive-bonus-list .executive-feature dd,
.ro-choice-card strong,
.ro-benefit-grid strong,
.level-card strong,
.profit-card strong{color:#004db9}
.executive-bonus-list .executive-feature,
.elite-note{
  background:#EEF7FD;
}
.maintenance-card{
  border-color:#d7dfeb;
  background:linear-gradient(130deg,#fafcff,#eef2f8 58%,#ffffff);
}
.maintenance-icon{
  background:linear-gradient(135deg,#0086D6,#003277);
  box-shadow:0 18px 45px rgba(0,60,145,.30);
}
.rank-reward-card,
.level-card-dark{
  border-color:rgba(80,153,255,.18);
  background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(0,48,115,.10));
}
.rank-reward-card span,
.ro-tier-stack small{color:#9ac4ff}
.rank-reward-card h3,
.level-card-dark strong{color:#ffffff}
.plan-note-dark{background:rgba(0,15,35,.64);border-color:rgba(80,153,255,.20)}
.ro-tier-stack article{
  background:linear-gradient(135deg,rgba(20,20,21,.93),rgba(0,38,92,.80));
  border-color:rgba(70,147,255,.22);
}
.ro-choice-card>span{
  color:#004bb4;
  background:#EEF7FD;
}
.ro-choice-card.is-featured,
.ro-product-feature{
  background:radial-gradient(circle at 90% 10%,rgba(78,152,255,.24),transparent 35%),linear-gradient(145deg,#0c0c0d,#003783);
  border-color:#0046a8;
}
.ro-choice-card.is-featured p,
.ro-product-feature p{color:#d2dcea}
.ro-choice-card.is-featured>span{background:#ffffff;color:#003f97}
.elite-note{border-left-color:#0052c6}
.profit-card{
  background:linear-gradient(145deg,#ffffff,#f3f8ff);
}
.profit-card b{color:#002f72}
.plan-disclaimer{
  border-color:#c1d1e7;
  background:#f1f7ff;
}
.plan-disclaimer strong{color:#003f98}
.plan-disclaimer p{color:#5a6370}

/* Footer */
.site-footer{
  background:radial-gradient(circle at 80% 0,rgba(0,64,153,.19),transparent 35%),linear-gradient(135deg,#020202,#0b0b0c 60%,#000f25);
  border-top:1px solid rgba(60,141,255,.18);
}
.site-footer h3{color:#60a2ff}
.site-footer a,
.site-footer button,
.site-footer address{color:#bfb8b8}
.site-footer a:hover,
.site-footer button:hover{color:#5ca0ff}
.footer-brand p{color:#a8a0a0}
.footer-bottom{color:#888888;border-color:rgba(65,144,255,.16)}

/* Mobile drawer */
.mobile-drawer{
  color:#eeeeee;
  background:radial-gradient(circle at 100% 0,rgba(0,75,180,.20),transparent 36%),linear-gradient(160deg,#0c0c0d,#050505);
  box-shadow:-30px 0 90px rgba(0,0,0,.58);
}
.mobile-drawer .brand strong{color:#ffffff}
.mobile-drawer .brand small{color:#aaaaaa}
.drawer-backdrop{background:rgba(0,0,0,.78)}
.drawer-nav a,
.drawer-submenu>button{
  color:#dddddd;
  border-color:rgba(255,255,255,.10);
}
.drawer-nav a:hover,
.drawer-nav a.is-active,
.drawer-submenu.is-active>button,
.drawer-submenu>button:hover{
  color:#ffffff;
  background:linear-gradient(135deg,rgba(40,130,255,.24),rgba(0,40,95,.30));
}
.drawer-submenu>div a{border-left-color:#003279}
.drawer-login{
  border-color:rgba(66,145,255,.22);
  background:#111111;
}
.drawer-login-toggle{
  color:#ffffff;
  background:linear-gradient(135deg,#1c1c1e,#002e6f);
}
.drawer-login-toggle small{color:#b3bcc8}
.drawer-login-options .member,
.drawer-login-options .stockist{
  background:linear-gradient(135deg,#0086D6,#00357f);
}

/* Mobile bottom navigation */
@media(max-width:820px){
  .mobile-bottom-nav{
    background:linear-gradient(118deg,rgba(5,5,6,.98),rgba(0,28,67,.98) 49%,rgba(0,71,170,.97));
    border-color:rgba(72,148,255,.27);
    box-shadow:0 20px 58px rgba(0,0,0,.58),0 0 30px rgba(0,71,170,.15);
  }
  .mobile-bottom-nav a,
  .mobile-bottom-nav button{color:rgba(255,255,255,.68)}
  .mobile-bottom-nav a.is-active{
    color:#ffffff;
    background:linear-gradient(135deg,rgba(52,137,255,.27),rgba(0,46,110,.40));
  }
  .nav-login .nav-icon{
    background:linear-gradient(145deg,#4492ff,#0052c6 52%,#001f4b);
    border-color:#161616;
    box-shadow:0 18px 42px rgba(0,53,127,.52),0 0 22px rgba(36,127,255,.24);
  }
  .login-orbit{border-color:rgba(86,156,255,.64)}
  .mobile-login-menu{
    color:#f3f3f3;
    background:linear-gradient(145deg,rgba(18,18,20,.995),rgba(0,23,55,.995));
    border-color:rgba(80,153,255,.28);
    box-shadow:0 30px 85px rgba(0,0,0,.68);
  }
  .mobile-login-menu::after{
    background:#001431;
    border-color:rgba(80,153,255,.24);
  }
  .mobile-login-title{color:#9ac4ff}
  .mobile-bottom-nav .mobile-login-menu a{
    color:#eeeeee;
    background:#141416;
    border-color:rgba(70,147,255,.18);
    box-shadow:0 10px 28px rgba(0,0,0,.28);
  }
  .mobile-bottom-nav .mobile-login-menu a small{color:#aaaaaa}
  .package-tier{color:#004db9}
}

/* Accessibility and focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:3px solid rgba(42,131,255,.44);
  outline-offset:3px;
}